Улучшение UX/UI дизайна: Распространенные ошибки и рекомендации

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

В этой статье рассмотрим основные ошибки UX/UI дизайна и предоставим рекомендации для улучшения работы. Это полезно студентам и начинающим дизайнерам.

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

1) Типографической иерархия

Обрати внимание на то, что в макете должны легко считываться разные уровни информации. Попробуй выделить основной заголовок (H1) — самый крупный и единственный на странице, подзаголовки (H2) — уже меньше по размеру, для разметки основных блоков, основной текст — оптимально использовать размер в 16 px. Все размерности на странице должны повторяться.
Статья

2) Разрядка

Разрядка прописных букв

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

Нельзя разряжать строчные буквы

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

3) Висячие части речи

Желательно избавляться от висячих союзов и предлогов (на концах строк), так как верстка текста станет чище и аккуратнее.

4) Размер текста

Не стоит использовать размер основного текста меньше 14–16 px. Это не юзер-френдли, пользователю будет тяжело воспринимать такой текст.

12 px обычно используют для подсказок, желательно увеличить размер шрифта для обычного текста хотя бы до 14–16 px

Статья

5) Длина текстовой строки

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

5) Интерлиньяж

Настройка интерлиньяжа обычно происходит по принципу «‎Чем больше кегль — тем меньше интерлиньяж». В большинстве случаев для простого текста достаточно установить значение интерлиньяжа на уровне 140%, а для заголовков – 120% (в зависимости, конечно, от используемого шрифта).

6) Рыба-текст

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

Также стоит добавлять реалистичные имена и разные картинки. Можно ускорить эту работу скачав плагин для фото unsplash и скачать плагин для рандомных данных о пользователе.

7) Контраст текста

Текст на странице или изображении должен иметь коэффициент контраста не менее 4.5:1. В идеале, это значение должно быть не менее 7:1. Для увеличенного текста коэффициент контраста должен быть не менее 3:1. В идеале, это значение должно быть не менее 4.5:1. Проверять контраст можно с помощью плагина в фигме.

8) Текст плохо читается на детализированной картинки

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

9) Длинное тире и кавычки «ёлочки»

Почитать подробнее про тире и кавычки

1) Цветовой баланс

Должен быть соблюден баланс цветов 60–30–10 (60% — основной, 30% — второстепенный и 10% акцентный цвет).

Суть метода:

• 60% пространства предназначено для основного базового цвета (например, цвета фона).
• 30% — для вторичного/поддерживающего цвета. Он не такой заметный, как акцентный, но более ощутимый, чем базовый. Может применяться для текстов и декоративных элементов.
• 10% для акцентных элементов: кнопки, ссылки.
  Статья
  

2) Чисто черный цвет на белом фоне

Чисто черный цвет для текста на белом фоне обычно не используется из-за его сильной контрастности и высокой яркости. Вместо этого обычно применяется оттенок чёрного или изменяется прозрачность. Существует только относительная темнота, которую мы воспринимаем как настоящий черный цвет. Код цвета #000000 может показаться слишком резким, особенно на фоне более светлых элементов.
Статья

3) Цветовая палитра

Должна быть подобрана цветовая палитра, использоваться сочетающиеся цвета.

Для того чтобы проверить сочетание выбранных цветов можно воспользоваться инструментами:

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

4) Dark mode

При создании темной темы стоит задуматься над основными моментами:

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

Можно использовать плагин в фигме для темной темы, если уже есть светлая.

1) Компоненты

При создании повторяющихся элементов рекомендуется использовать компоненты с англоязычными названиями (например, 'button' для кнопки, 'card' для карточки), таким образом, вы ускорите свою работу. Если вам потребуется внести изменения во все карточки, достаточно внести их только в главную карточку, и дочерние компоненты автоматически обновятся в соответствии с этими изменениями.

Как создавать и пользоваться компонентами.
Кнопки/инпуты/карточки можно сделать в вариантах, чтобы потом удобнее было работать.

2) Стили

Всегда нужно добавлять стили для текста и цвета. Они нужны для того, чтобы легче было что-то менять. Стили прописывают как "h1 web" или "h1 mobile".

Здесь можно посмотреть как создать стили в фигме.

3) UI kit

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

Обычно ui kit содержит в себе:

• Типографика: шрифтовая пара, иерархия размеров, стили шрифтов;
• Цвета: основные и второстепенные, акцентные, стили;
• Элементы и их состояния: кнопки, формы, инпуты, карточки, футер, хэдер;
  
• Иконки;
  
• Сетка.
  
  

4) Z или F паттерн

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

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

Статья

5) Кнопки

• Primary и secondary кнопки. Обычно яркими и акцентными являются primary кнопки, в то время как secondary кнопки обычно не имеют заливки, а только обводку, что делает их менее заметными

• Состояния кнопок. Желательно показать основные состояния кнопок: Default, hover, pressed, disabled.

• Оформление кнопок. В кнопках обычно горизонтальные отступы больше вертикальных.

• Высота кнопки. В мобильной версии рекомендуется установить высоту кнопок в диапазоне 40-48 пикселей для обеспечения удобства использования на ограниченном экранном пространстве. Шрифт же следует выбирать размером от 16 пикселей и выше, чтобы обеспечить читаемость и хорошее восприятие на маленьких экранах.

6) Иконки

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

Где искать иконки.

Можно установить плагин в фигме для быстрого доступа к иконкам.

7) Футер

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

8) Дивайдеры

Разделители не стоит делать слишком контрастными относительно фона, чтобы они не дробили блоки визуально и не отвлекали внимание от важного контента.

Как правильно использовать разделители контента.

1) Правило внешнего и внутреннего

Если элементы объединены в группу, внутренние расстояния между ними должны быть меньше, чем внешние расстояния до других групп.

2) Правило близости

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

3) Сетка

Один из аспектов сетки - это размер рабочей области. В данном случае, размер рабочей области может быть выбран из вариантов, таких как 1140 px, 1200 px или 960 px. Это определяет ширину, в пределах которой будут размещаться элементы и контент.

Кроме того, настройка колоночной сетки является важным аспектом. Часто используется 12-колоночная сетка, которая позволяет равномерно распределить элементы на странице. Например, ширина одной колонки может составлять 65 px, а межколонники - 30 px, при условии, что они кратны и хорошо делятся друг на друга. Это позволяет создавать удобные пропорции и уравновешенный внешний вид для различных разрешений экрана.

1) Персона

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

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

Желательно детализировано подойти к составлению персоны и указать:

• Общий бэкграунд
• Контекст использования
• Цель использования
• Важно
• Полезно
• Страхи
  
  
  

2) Вайфреймы

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

3) Структура работы в Figma

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

Структура работы в Figma может включать страницы:

• Исследование: мудборды и референсы;
• Проектирование: вайфреймы, cjm и user story;
  
• Визуализация: макетов и использования UI Kit;
  
• Обложка: визуального представления проекта.
  

4) Ассоциативное облако

Ассоциативное облако нужно для:

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

Ошибки в UX/UI дизайне могут негативно сказываться на пользовательском опыте. Исправление этих ошибок поможет создавать привлекательные и интуитивно понятные интерфейсы. Постоянное совершенствование и использование рекомендаций помогут достичь идеального пользовательского опыта.