Что такое UX-копирайтинг

Чтобы интерфейс был доступным для пользователей важно продумать все до мелочей: шрифт, отступы, цветовую палитру... Только когда речь доходит до контента, то многие дизайнеры пасуют – либо не оказывают текстам должного внимания, либо наполняют макеты всякой бессмыслицей. А зря! Ведь UX, это в первую очередь про то, чтобы сделать продукт удобным и понятным. 
При этом классический копирайтер не всегда сможет написать хорошие тексты для интерфейсов, в силу отсутствия понимания контекста или технической специфики. А во многих проектах тексты пишет программист, получивший макеты с текстами-заглушками от дизайнера.

При этом чтобы начать работать UX-копирайтером, нужно иметь минимум навыков редактуры текста и базовое понимание в дизайне интерфейсов.

В публикации на TexTerra автор подробно разложил чем именно занимается UX-копирайтер и почему эта специализация в сфере UX становится все более востребованной на бирже труда.

Статья будет полезна всем, кто хочет найти себя в новом направлении или просто получить базовое понимание UX-копирайтинга.

Ссылка на статью: "Что такое UX-копирайтинг, и чем он отличается от обычного"

В дополнение отличный видео-доклад "Текст в интерфейсе" от продуктовой команды Тинькофф.

Психология в дизайне - эффект градиента цели

Вам когда-нибудь предлагали поучаствовать в программе лояльности? Например, сбор милей от авиаперевозчиков или бесплатный кофе в кофейне после определенного количества покупок... Именно это и есть эффект градиента цели. Чем ближе покупатель приближается к цели, тем чаще он что-то покупает, чтобы заполучить награду. Иными словами эффект градиента цели, это:

Стремление добиться цели возрастающее по мере приближения к ней

Эффект схож с эффектом Зейгарник, с той разницей, что мотиватором для пользователя является приближение к заветному вознаграждению, а не сам факт завершения действия.

Как применить в дизайне

Если в коммерции эффект широко применяется для повышения покупательской лояльности, то при разработке диджитал продуктов эффект прекрасно подойдет для удержания и мотивации пользователей к завершению действия. Несколько примеров:

– Заполняйте за пользователя некоторые поля в формуляре, чтобы ему было проще достигнуть конечной цели – отправки формуляра

– Отображайте прогресс-бары, изначально немного заполненными, если нужно подтолкнуть пользователя завершить какое-либо действие

– Эффект прекрасно дополняет геймификацию в игровых процессах поднимая мотивацию пользователей

На этом все! Если было полезно, дайте знать в реакциях!

В дополнение к посту про эффект градиента цели…

Неплохой пример как замотивировать пользователя закончить процесс ввода данных для карточки пользователя. На polywork после регистрации, введя основную информацию о себе, создается первая запись в ленте карьерных достижений, а всплывающая подсказка объясняет, что только что произошло.

Дизайн сложных таблиц

Создание удобных, читаемых таблиц требует хорошего знания многих дисциплин в дизайне.
Сложная финансовая таблица, если она сделана с умом, может выглядеть как произведение дизайнерского искусства.

В статье, которую хочу вам порекомендовать, очень подробно и с роскошными примерами разобраны все азы создания подобных таблиц: от выбора шрифта, до отображения единиц измерений и инфографики.

Учитывая ростущий спрос на проектирование финансовых интерфейсов, материал будет очень даже полезнен!

https://awdee.ru/complex-tables-design/

Методы исследования в UX - first-click тест

Тест первого клика (англ. first click testing) – один из методов юзабилити исследования для быстрой проверки гипотез или выявления проблем в интерфейсах. Идея теста проста – выяснить, куда будут нажимать пользователи в первую очередь для выполнения той или иной задачи. 


Как проводится тестирование методом first-click

Во время удаленного немодерируемого тестирования показываем пользователям макет и задаем вопрос: где респондент стал бы искать определенную опцию? Каждое задание включает в себя один скрин с одним четко сформулированным вопросом. 
Например, на карточке товара в интернет-магазине, можно спросить, как пользователь может посмотреть оценки других покупателей. 

Вы также можете включить в один юзабилити-тест несколько последовательных заданий. Результатом теста является тепловая карта с дополнительной статистикой, на основании которой можно сделать выводы для улучшения пользовательского опыта. 

На картинке под постом – пример такой карты кликов для двух вопросов.

Сервисы для проведения теста

Большинство зарубежных платформ для проведения пользовательского тестирования, таких так userzoom.com, maze.co, usabilityhub.com или optimalworkshop.com предоставляют возможность проведения теста первого клика. Подобные тесты можно провести также и на российских сервисах fabuza.ru и oprosso.ru, но подписка там будет намного дороже. Как недорогую альтернативу можно настроить замер кликов через Яндекс Метрику на собственном прототипе.


В заключение

Тест можно проводить в любой фазе пользовательского исследования: на прототипах, рабочем варианте продукта или статических скринах. Он позволяет быстро разобраться, могут ли пользователи выполнить поставленную задачу в нужной последовательности в течении заданного времени.

Если большинство пользователей не прошло тест – значит, вероятней всего они не справятся и с дальнейшим сценарием теста. Также вы сможете понять: насколько вашим пользователям понятны названия кнопок и меню и правильно ли они расположены.  В результате вы получите ценную информацию для принятия дальнейших решений.

Было полезно? Дайте знать в реакциях!

#методы

Протестируйте свои знания в дизайне

Собрал небольшой квиз по тематике UI/UX
- всего 12 вопросов
- по 30 сек на ответ

Ссылка:
t.me/QuizBot?start=lXAZlTjV

Обязательно поделитесь результатами в комментах! 😉

Как дизайнерам быстро выявить слабые и сильные стороны продукта

Независимо от того делаете вы проект для клиента или для себя – важно понимание того, насколько конкурентоспособен ваш продукт и в каком направлении его необходимо развивать. В чем сильные стороны, а где могут возникнуть проблемы? Наиболее быстро в этом можно разобраться с помощью SWOT-анализа.

Основная задача метода – структурировано описать ситуацию и выявить проблемы продукта на основе которых можно определить курс действий. SWOT рассматриваются следующие составляющие продукта или компании:

Внутренняя среда
1) Сильные стороны (Strengths)
2) Слабые стороны (Weaknesses)

Внешняя среда
3) Возможности (Opportunities)
4) Угрозы (Threats)


Применение

Все довольно просто! Необходимо начертить таблицу состоящую из 4 полей. В первый столбец вписываем позитивные факторы – сильные стороны и возможности. Во второй столбец – слабые стороны и угрозы. 
В результате вы получите наглядную матрицу, иллюстрирующую текущую ситуацию. 

Однако не стоит забывать, что для настоящего стратегического планирования вам понадобится провести более глубокое исследование, SWOT-анализ является лишь ориентиром для дальнейших действий.

На этом все! Желаю всем отличных выходных.

Градиент цели, first-click тест, дизайн квиз...

Темы вышедшие на этой неделе:

- Что такое UX-копирайтинг

- Психология в дизайне - эффект градиента цели

- Дизайн сложных таблиц

- Методы исследования в UX - first-click тест

- Протестируйте свои знания в дизайне - квиз по тематике UI/UX

- Как дизайнерам быстро выявить слабые и сильные стороны продукта

Кстати, дизайн квиз пока прошли 56 человек, только один подписчик смог ответить верно на 11 вопросов из 12. Знаю, тест не слишком простой 😉 Что, радует, большинство смогли ответить правильно как минимум на 7 вопросов и это реально круто 🙌 Значит канал читаете внимательно, так держать!

На этом у меня все! До понедельника!

Нейросети и дизайн интерфейсов

Стали часто попадаться, статьи, как вот эта, про то, какие залипательные интерфейсы могут создавать нейросети. И действительно, то что выдает нейронка Midjourney на первый взгляд впечатляет: цветовая палитра, эффекты, композиция смотрятся довольно красивенько. А вот в профессиональной среде творчество нейросетей вызывает раздражение. Иллюстраторы на Artstation уже выразили свой протест против применения ИИ. Стоит ли дизайнерам тоже напрячься? Пока что нет – тут я присоединюсь к автору вышеупомянутой статьи. То, что сейчас создают нейросети – это максимум визуальные концепты, а не дизайн интерфейса. ИИ способен только подражать тому, на основе чего он был изначально обучен.

Но не стоит расслабляться! В перспективе нейронки смогут понимать дизайн паттерны и генерить вполне логичные и функциональные шаблоны. А если на выходе научить ИИ выдавать готовый код, то получим довольно продвинутые инструменты для создания полноценных продуктов, будь то сайт или приложение. 

Означает ли это, что дизайнер станет ненужен? Отчасти, да. Все, что касается отрисовки макетов, скорей всего, будет делать сетка, но процессом будет все равно управлять человек. Поэтому профиль дизайнера сдвинется от умения "красиво рисовать", больше к аналитике и пользовательской психологии. Пока искусственный интеллект еще далек от понимания всех этих тонкостей человеческой природы. Зато тот, кто в будущем начнет адаптировать ИИ для оптимизации своей работы, несомненно получит преимущество над конкурентами. 

А что вы думаете по этому поводу?

Оптические иллюзии в дизайне – вертикально-горизонтальная иллюзия

Любое проектирование макета начинается с базовых элементов – квадратов. Их можно встретить в карточках, тизерах, в ленте на соцсетях или шотах на Dribbble.

Именно с квадратом связана одна интересная иллюзия. Если поместить квадрат в прямоугольник, то создается впечатление, что его пропорции нарушились: вертикальные стороны выглядят длиннее горизонтальных. При этом на самом деле, перед нами идеальный равносторонний квадрат. Это и есть – вертикально-горизонтальная иллюзия.

Интересный факт:
Эффект воспринимается по-разному представителями разных культур, а также полов. Например, жители больших городов гораздо более восприимчивы к этой иллюзии, чем в сельских районах, проживающие преимущественно на равнинах.


Вывод

При проектировании интерфейсов стоит учесть, что вертикально-горизонтальная иллюзия может нарушить гармонию макета создав ложное впечатление нарушения пропорции. Эффект также можно использовать и преднамеренно – например если необходимо выделить определенный элемент.

Было полезно? Дайте знать в реакциях!

Психология в дизайне - Пиковое правило

Пиковое правило, также известное как "правило пика и завершения" — когнитивное искажение, описывающее то, как люди запоминают прошлые события.

В ходе экспериментального исследования по работе памяти в 1993 году было выявлено, что интенсивные положительные или отрицательные моменты на пике переживания и в последние моменты опыта оказывают наибольшее влияние на наше восприятие.


Как применить в дизайне

При разработке продуктов обращайте внимание на самые интенсивные моменты пользовательского пути ("пики") и заключительные моменты. Это можно сделать, например сфокусировавшись на эмоциях пользователя.

Хороший пример тому – инструмент управления проектами Asana на картинке под постом: выполнив задание, иногда, можно увидеть, как по экрану пролетает единорог.

– Определите и проработайте UX тех моментов, когда продукт наиболее полезен и ценен вашим пользователям

– Исключите негативный опыт из ключевых моментов взаимодействия. Пользователи запомнят его лучше положительного. 

– Поощряйте пользователей после совершения ключевого действия


Заключение

Помните, что мы храним в нашей памяти информацию в виде моментов с наиболее яркими впечатлениями от события. Уделяйте особое внимание деталям, проектируя ключевые моменты пользовательского пути – именно по ним у пользователя и сложеется впечатление о вашем продкуте.

Было полезно? Вдарьте по реакциям!

Методы исследования UX – Опросы

Один из наиболее универсальных и, на первый взгляд, простых методов пользовательского исследования. Разберем по порядку, зачем и как дизайнеру необходимо владеть этим инструментом и какие ошибки стоит избегать.

Одно из преимуществ опроса в том, что он не требует модерации и за короткое время можно собрать большой массив количественных и качественных данных о пользователях. Также его можно применять на любом этапе разработки проекта


Когда применять

На начальной стадии исследования, он поможет собрать базовую информацию о вашей целевой аудитории, выяснить отношение к услуге или продукту, выявить глубинные цели и боли аудитории.
Он также прекрасно подойдет для проверки гипотез и отработки несложных сценариев при отсутствии какого либо интерфейса. 
После проведения немодерируемого пользовательского тестирования, опрос также поможет разобраться насколько респонденту было трудно справится с заданием и что он думает об интерфейсе.


Как проводить опоросы

Для начала проведите подготовительную работу:

1) Сформулируйте цель исследования

В зависимости от этапа проектирования у опроса могут быть разные задачи. Если в начальном этапе основная цель – сбор информации о пользователях и проверка гипотез, то в процессе тестирования продукта, это может быть выявление проблем с юзабилити или оценка выбранного решения. Опрос также можно встроить прямо в продукт, как инструмент обратной связи.

Например, после заказа товара в интернет-магазине можно попросить покупателя оценить его опыт взаимодействия задав несколько коротких вопросов.

2) Подберите респондентов

Один из наиболее сложных этапов это, подбор нужных респондентов. Если у вас есть клиентская база тут все просто – делаете рассылку, пишите напрямую, стимулируете участие в опросе всякими плюшками. Сам попрос можно проводить, например через Google Forms или Surveymonkey. Можно также воспользоваться специализированными сервисами например от ЯндексВзгляд, anketolog.ru или oprosso.ru, но тут всегда есть риск, что на сторонней платформе вы не найдете свою ЦА.

3) Сформулируйте вопросы

Начните ваш опросник с описания: Для чего проводится? Сколько времени займет? Как будут использоваться личные данные и ответы? Не забывайте поблагодарить респондентов в завершение опроса. Кроме того, вы можете попросить людей оставить контактную формацию для прохождения интервью. 

Рассмотрим наиболее частые типы вопросов:

Вопросы да/нет
Помогают узнать отношение респондента к чему-либо или отсортировать аудиторию по категориям. Например:

– Вы когда-нибудь пользовались сервисом каршеринга?
– Вы бы заказали медикаменты через онлайн-сервис?

Вопросы с вариантами ответов
Могут быть использованы для сбора детальной информации о ЦА. Например:

– Как часто вы осуществляете покупки через интернет-магазины?
– Укажите ваши любимые спортивные бренды.

Открытые вопросы
Для уточнения какой-либо дополнительной информации или пожеланий можно предложить респонденту добавить развернутый ответ. Например:

– Какие дополнительные функции вы бы пожелали увидеть?

Оценочная шкала
Используется для субъективных оценок, например: определенных качеств, согласия с высказыванием, впечатления от чего-либо.
Например:

– Оцените сложность выполнения задания по 5-бальной шкале

Как задавать вопросы

Задавайте вопросы в логичной последовательности не перемешивая разные темы. Всегда лучше разбить вопросы на группы.

Чтобы предотвратить неверные ответы используйте четкие формулировки избегая, например двойные отрицания в вопросах.

Кроме того, учитывайте, что люди не любят много писать, поэтому не используйте слишком много открытых вопросов.

Частая ошибка – задавать много вопросов про желания или будущее. Стоит учитывать, что респонденты не всегда знают, что они на самом деле хотят.

На этом все! Надеюсь было полезно.

#методы

Визуальные тренды года

Год неумолимо подходит к концу. Время подвести итоги... Редакция платформы EditorX выкатила обзор наиболее популярных приемов визуального дизайна этого года. Многие из них мы несомненно увидим и в предстоящем году. Что любопытно: нет никакой стилистической целостности в плане дизайна. Тут и ностальгия по интернет движу 90-х, и Веб 3, хэндмейд коллажи, мягкие 3д элементы, яркие цвета... В общем огромная поляна для экспериментов! 

Вот основные тенденции веб-дизайна этого года, по мнению платформы:

1. Брендинг на основе искусственного интеллекта

2. Кислотный зеленый

3. Динамическая айдентика и логотипы

4. Ретростиль 90-х

5. Субверсивная навигационная иерархия

6. Дружелюбные шрифты

7. Мягкие, тактильные 3D-элементы

8. Цифровые коллажи и эстетика хэндмейд

9. Анимация и триггеры на основе прокрутки

10. Конфетные цвета


Приятного просмотра!

Самый важный навык дизайнера

Многие начинающие дизайнеры часто жалуются – мол не находят общий язык с клиентом. От заказчика идет только негатив и нарекания. Иной раз может казаться, что клиент вообще не хочет вас услышать. В итоге – страдает качество работы, а в перспективе такой опыт может привести к выгоранию.

К сожалению некоторые дизайнеры забывают про один очень важный навык – эмпатию. Ведь мы с вами работаем в первую очередь не с машинами, а с живыми людьми, которые мыслят иначе, имеют иной опыт, их оценочные критерии отличны от наших. Без сопереживания просто невозможно узнать, что людям нужно, в частности это касается не только заказчиков, но и пользователей ваших интерфейсов. Причем большинство дизайнеров с уверенностью вам ответят, что с эмпатией у них как раз все в порядке. Как правило они заблуждаются в силу эффекта иллюзорной превосходности.

Чтобы развить эмпатию, важно учиться слушать и наблюдать за людьми, уметь понимать, что заказчик хочет и чего ожидает от сотрудничества с вами. Это также означает, что вам нужно быть готовым к компромиссам и пересмотру своих точек зрения, если это необходимо.

В первом разговоре с клиентом, я вообще, говорю очень мало. В основном слушаю и задаю вопросы. В общении важно быть не столько экспертом в дизайне, сколько тонким психологом.

Проявляйте любопытство и живой интерес к собеседнику, пытайтесь вникнуть в суть его проблемы, понять специфику его работы, не стесняйтесь переспрашивать если вам что-то до конца непонятно. И всегда помните, что другие люди – именно другие.

С Новым годом, мои дорогие подписчики!

Спасибо, что вы есть и читаете мой канал. Всем мира, добра и позитива в этом году!

Этот год хотелось бы открыть с опроса, он поможет мне понять в каком направлении стоит дальше писать статьи.

Да, опрос был на прошлой неделе, но я, в силу своей криворукости, благополучно его удалил ;) Поэтому, не сочтите за труд проголосовать еще раз.
Если есть предложения о чем еще стоит писать, кидайте в бот @uxtrends_bot или коменты. Спасибо 🙏

Полезное чтиво для саморазвития

Время отпусков – идеальные дни, чтобы отвлечься от рутины, расширить свой кругозор, изучить новые навыки... Хочу предложить вам несколько книг, которые добавят полезных знаний в копилку.

Майк Монтейро: «Дизайн — это работа»
В книге доступно описан процесс работы в сфере дизайна – начиная от самопрезентации и заканчивая основами общения с клиентом. Автор разбирает распространенные рабочие эпизоды показывая на примерах как избежать многих ошибок.

Остин Клеон: «Кради как художник» 
Практичная и увлекательная книга для всех, кто хочет найти свой путь в творчестве. 
Отличное пособие, полное иллюстраций, упражнений и примеров для тех, кто мечтает реализовать свои идеи в цифровой век.

Дэн Роем: «Визуальное мышление»
Книга учит решать проблемы используя образы и рисунки, анализировать сложные задачи, объединять и обобщать информацию. Кроме того с этой книгой вы научитесь "продавать" свои идеи при помощи визуальных образов.

#почитать

Принципы проектировки интерфейсов – Правило третей

Этот популярный принцип построения композиции пришел из фотографии. Следуя правилу третей, необходимо визуально разделить страницу макета на три равные части по вертикали и горизонтали. В результате мы получим сетку состоящую из девяти равных сегментов.
Согласно правилу, точки пересечения линий — это так называемые точки силы, в которых необходимо располагать наиболее важные элементы. Именно к ним будет приковано внимание зрителя в первую очередь.


Как применять в дизайне

Используйте правило для фокусировки внимания на ключевых элементах. Например, при создании первого экрана веб-страницы старайтесь располагать слоган, изображение продукта и призыв к действию на пересечении линий в «точках силы», как это продемонстрировано на картинке под постом.


Совет

Если вы видите, что в вашем макете что-то пошло не так – попробуйте прогнать дизайн через правило третей. Это поможет гармонично распределить элементы и убрать все лишнее.

На этом все! Постараюсь больше писать таких статей. Поддержите в реакциях, если согласны!

Визуальная иерархия

Взгляните на картинку, прикрепленную к посту. На варианте слева информация представлена в виде таблицы. Все элементы равнозначны между собой. Пользователю необходимо сперва прочитать весь список, а потом сделать выводы, какая информация важнее.

На варианте справа информация организована иначе: важный контент выведен крупным шрифтом, для обозначения индикатора статуса используется соответствущий цвет, а кнопку гораздо легче отличить от обычного текста. Благодаря визуальной структуре, информация считывается намного проще.

Создавая интерфейсы, всегда держите в голове – какая информация наиболее важна для вашего пользователя. Используйте цвет, контраст, размеры и расстояния для создания визуальной иерархии.

Как за 5 минут настроить шрифты в макете


1) Создаем гармоничные размеры

Взяв за основу базовый размер шрифта, например 16px, нужно определить его соотношение размеров – коэффициент с которым мы получим размеры шрифта для заголовков и более мелких надписей. 
Чем выше соотношение – тем контрастнее будет смотреться дизайн.
Наиболее просто, это можно сделать с помощью сервиса https://type-scale.com
Задав базовый размер мы получим 9 гармоничных размеров шрифта.


2) Создаем вертикальный ритм

Теперь необходимо найти оптимальную высоту вертикального отступа между элементами.
Наиболее наглядно это можно сделать с помощью сервиса https://gridlover.net Тут есть все, что нужно – HTML разметка, CSS стили, а также подсветка сетки вертикального ритма. С помощью слайдера можно легко настроить размер шрифта, соотношение размеров и высоту строки.

Дайте знать в реакциях, если было полезно!

Книги для саморазвития, правило третей, визуальная иерархия...

Посты, которые вы могли пропустить за эту неделю.

– Полезное чтиво для саморазвития

– Принципы проектировки интерфейсов – Правило третей

– Визуальная иерархия

– Как за 5 минут настроить шрифты в макете

Вдарьте по реакциям, если посты были для вас полезны!