16 советов по UX и UI дизайну, которые всегда обеспечивают рост

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

Что касается принципов удобства использования и дизайна, существуют проверенные и протестированные правила, которые мы можем применять без колебаний. Зачем изобретать велосипед?

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

1. Самый эффективный призыв к действию

Ваша кнопка призыва к действию всегда будет работать лучше, если вы добавите к действию некоторый контекст. Но постарайтесь, чтобы он содержал не более трех слов. Вместо «Добавить» можно использовать «В корзину», а вместо «Купить» — «Купить сейчас».

2. Текст на мобильном

Было проведено множество тестов, доказывающих, что лучшая удобочитаемость на мобильных устройствах — не более 9 слов в строке или 50–60 символов.

3. CTA на мобильном телефоне

Он должен быть больше, чем то, что использует большинство дизайнеров. Исследование Human Fingertips в MIT Touch Lab показало, что средняя ширина указательного пальца у большинства взрослых составляет 16–20 мм, что делает идеальным размером кнопки 40–50 пикселей в высоту.

4. Списки товаров

Не уверены, когда использовать радио-кнопки, а когда раскрывающийся список? Правило UX простое — используйте радио переключатели для менее 5 вариантов и раскрывающийся список для более 5 вариантов.

5. Страницы или бесконечная прокрутка

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

6. Выбор по умолчанию — быть или не быть

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

7. Как использовать иконки

Чрезмерное использование иконок — это ошибка пользовательского интерфейса, часто ставящая под угрозу UX. Использование иконок всегда должно иметь правильное значение, усиливая то, что нельзя сказать словами, и никогда не скрывать функциональность за расплывчатым изображением. Золотое правило UX: используйте значки, когда текста недостаточно для объяснения действия.

8. Сообщения об ошибках

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

9. Чек-листы или радио-кнопки?

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

10. Используйте placeholder, чтобы показать пример.

Использование заполнителя улучшает контекст и увеличивает конверсию формы. Но вам следует пойти еще дальше — вместо имени необходимого поля используйте пример. Например, введите образец номера телефона (+44 757 869…) вместо «номер телефона» или «hi@pony.studio» вместо «электронная почта». Это проверенный принцип UX.

11. Более широкая область тапа на смартфоне

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

12. Используйте цвета для классификации

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

13. Кнопки полей формы

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

14. Идеальная высота линии

Мы все хотим, чтобы между размером шрифта и межстрочным интервалом было идеальное соотношение, но не всегда делаем правильно. Универсальное правило UX — для лучшей читаемости поддерживайте высоту строки минимум на 20–30% больше, чем высота символа, поэтому в большинстве случаев подойдет все, что находится в этом диапазоне.

15. Всегда работающий размер шрифта

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

16. Наложение изображений для безупречного вида

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

Источник