100 лучших советов по UX-дизайну в 2022 году. Дизайн пользовательского опыта (UXD или UX) в веб-дизайне — это процесс повышения удовлетворенности пользователей за счет повышения удобства использования, доступности и эффективности взаимодействия пользователя с веб-сайтами. На портале по UX/UI дизайна тоже есть много полезной информации по этой теме, по теме SEO продвижения на этом сайте есть много полезной информации. Мы изучаем и применяем в своей работе лучшие принципы взаимодействия с пользователем. Мы хотели бы поделиться некоторыми из лучших практик, которые приобрели за эти годы (включая основные симптомы плохого UX и лучшую статистику UX ). Вот наш список из 100 лучших практик UX, которым должен следовать каждый веб-дизайнер:
Поток
1. Думайте о веб-сайте как о дороге из желтого кирпича: плавно перемещайте пользователей из одного раздела в другой, понимая цели и потребности пользователей.
2. Пользователи с большей вероятностью заметят элементы в верхней части страницы в порядке их важности.
3. Последовательные и простые в использовании веб-интерфейсы помогают пользователям сосредоточиться на содержании и перемещаться по нему.
4. Избегайте создания тупиковых страниц на веб-сайтах. Они вызывают недоумение и создают дополнительную работу для пользователей.
5. Используйте общие шаблоны и интерфейсы веб-сайтов; не заставляйте пользователей узнавать что-то новое
Прокрутка
6. Пользователи будут прокручивать страницу вниз до тех пор, пока будет ясно, что дополнительная важная информация находится в нижней части страницы.
7. Ваш веб-сайт всегда должен обеспечивать четкую визуальную индикацию направления прокрутки и наличия большего количества контента.
8. Чем длиннее страница веб-сайта, тем меньше вероятность того, что кто-то прокрутит ее вниз.
9. Запуск веб-страниц — это хорошо, потому что прокрутка выполняется быстрее, чем нажатие — только не делайте страницы слишком длинными.
Контраст и цвет
10. Дизайн для дальтоников. Преобразуйте свои проекты в оттенки серого, чтобы все пользователи могли читать важную информацию.
11. Не используйте синий цвет для текста на веб-сайтах, кроме ссылок.
12. Помните о контрасте на мобильных веб-сайтах. Яркость экрана может сделать ваш сайт непригодным для использования.
13. Зарезервируйте один цвет для CTA на своем веб-сайте и не используйте его ни для чего другого.
14. Теплые, яркие цвета выходят вперед, а холодные, темные остаются на заднем плане.
Загрузка
15. Убедитесь, что пользователи веб-сайта могут быстро и легко достичь своей основной цели.
16. Для пользователей важнее всего то, что ваш сайт работает быстро (даже если это просто их восприятие).
17. Восприятие скорости веб-сайта зависит от времени загрузки, поведения загрузки, времени ожидания и плавности анимации.
18. Покажите каркас элементов веб-сайта, чтобы передать макет при загрузке.
19. Текст веб-сайта должен загружаться раньше изображений, чтобы пользователи могли начать читать до того, как загрузится остальная часть сайта.
20. Задержки, превышающие несколько секунд, часто заставляют пользователей покидать сайт.
Мобильный
21. Элементы мобильного интерфейса сложно точно нажимать, если они маленькие или расположены близко друг к другу.
22. Минимальный размер сенсорной мишени на мобильных устройствах должен составлять 1 см x 1 см с надлежащим заполнением.
23. Кто-то, показывающий мизинец на вашем мобильном веб-сайте или в приложении, означает, что объекты интерфейса слишком малы.
24. Держа планшет в руках, к боковым и нижним краям экрана легче всего дотянуться большим пальцем.
25. Не требуйте вертикальной прокрутки для чего-либо, кроме обычной прокрутки веб-страницы.
26. Не используйте двойные нажатия на мобильных устройствах. Убедитесь, что пользователи могут взаимодействовать одним касанием
27. Определите, будут ли пользователи использовать устройства одной или двумя руками при разработке макетов для мобильных устройств.
Навигация
28. Всегда имейте очевидный способ получить доступ к меню навигации на вашем веб-сайте.
29. Если иерархия вашего веб-сайта превышает 3-4 уровня, пора изменить дизайн.
30. Рассмотрите возможность использования липких меню, особенно на более длинных веб-страницах или когда нужен быстрый доступ.
31. Хорошая навигация по сайту не мешает, она уходит на второй план.
32. Сделайте вашу навигацию последовательной; он не должен меняться по всему сайту
33. Сделайте навигационные ярлыки конкретными, не более 2–3 слов и начните с наиболее информативного слова.
34. Сообщите пользователям, где они находятся на веб-сайте, с помощью хлебных крошек.
35. Мобильная навигация: покажите наиболее часто используемые параметры и скройте остальные в гамбургер-меню.
36. Гамбургерные меню на настольных компьютерах менее заметны, менее привычны, увеличивают стоимость взаимодействия и уменьшают информационный запах.
37. Для вторичной навигации на мобильных устройствах используйте целевые страницы категорий, подменю или внутристраничные меню.
38. Выпадающее меню должно быть вертикальным, а не горизонтальным; прокручивать по горизонтали намного сложнее
39. Megamenus должен быть уже, чем страница, чтобы их было легко «щелкнуть».
40. При использовании мегаменуса организуйте ссылки в группы и разделяйте элементы, на которые можно нажимать, и элементы, на которые нельзя нажимать.
41. Не скрывайте функции входа или поиска в меню веб-сайта.
Формы
42. Выровняйте метки и поля форм в одну вертикальную линию, чтобы обеспечить быстрое сканирование.
43. Метки полей должны находиться за пределами текстового поля, а не внутри, чтобы пользователи не теряли их из виду.
44. Разделите разделы разделителями, чтобы сделать длинные веб-формы более удобными для пользователей.
45. Помещайте ошибки формы рядом с полями, вызывающими ошибки, во всех веб-формах.
46. Сообщения об ошибках должны быть полезными, удобными, краткими и легкими для понимания.
47. Показывайте сразу все поля, вызывающие ошибки, рядом с каждым проблемным полем, чтобы мобильные пользователи не пропустили предупреждение.
Ссылки
48. Ссылки на веб-сайтах должны выделяться — используйте синий текст и / или подчеркивание для обозначения гиперссылок.
49. Ссылки всегда должны выглядеть как ссылки.
50. Пользователю не нужно щелкать ссылку, чтобы выяснить, куда она ведет. Текст ссылки должен сказать им
51. Не используйте синий текст или подчеркивание для элементов без ссылок на веб-сайтах или в приложениях.
52. Ссылка на полный URL-адрес в любом месте веб-сайта всегда должна указывать на эту страницу.
53. Ожидается, что определенные элементы, такие как изображения продуктов или обзоры, всегда будут интерактивными.
54. Используйте другой цвет для посещенных ссылок на веб-сайтах, чтобы уменьшить нагрузку на память пользователей.
Кнопки
55. Кнопки на веб-сайтах должны выглядеть интерактивными и иметь достаточно места, чтобы пользователи могли удобно нажимать или нажимать.
56. Для частых действий на веб-сайтах или в приложениях должны использоваться большие кнопки, размещенные в легко доступных зонах.
57. Цвета фона, границы и ориентированные на действия ярлыки на веб-сайте сигнализируют пользователям о том, что элемент является интерактивным.
58. Для плоских дизайнов убедитесь, что кнопки действий выполнены в контрастном цвете с ярлыком, ориентированным на действия.
59. Веб-сайт должен иметь визуальную подсказку, что нажатие кнопки было успешным в течение 0,1 секунды после взаимодействия.
60. Кнопки, которые изменяют или удаляют данные на мобильных устройствах, должны требовать больше усилий для нажатия, чтобы предотвратить случайное нажатие.
Поиск
61. Если у вас не очень маленький веб-сайт с небольшим содержанием, всегда имейте поле поиска.
62. Поле поиска всегда должно выглядеть как текстовое поле на рабочем столе. Значок поиска можно использовать для мобильных устройств.
63. Сделайте так, чтобы поле поиска было легко найти. Обычно пользователи ищут его в правом верхнем углу.
64. При поиске на веб-сайтах пользователи обычно ищут «маленькое поле для ввода».
65. Поля поиска на веб-сайтах должны быть достаточно широкими, чтобы видеть весь поисковый запрос.
Карусели
66. Избегайте каруселей: каждый новый слайд стирает память о предыдущем слайде. Пользователи могут сосредоточиться только на одном деле за раз
67. Точки на каруселях трудно увидеть на мобильных сайтах. Вместо этого используйте изображения, выглядывающие слева и справа
68. Вместо стрелок навигации карусели используйте описательные ярлыки, чтобы пользователи знали, чего ожидать от следующего слайда.
69. Только около 1% пользователей нажимают на слайды карусели на веб-сайтах, поэтому не полагайтесь на эти клики.
70. Карусели веб-сайтов, которые перемещаются автоматически, должны переключаться на ручной режим, когда пользователи взаимодействуют с ними.
Аккордеоны
71. Используйте аккордеоны для сжатия длинного контента на мобильных веб-сайтах.
72. При использовании аккордеонов предложите способ свернуть любое открытое содержимое после того, как пользователь его развернул.
73. Плюсы использования аккордеонов на мобильных веб-сайтах: более короткие страницы легче использовать, чем внутристраничные переходные ссылки.
74. Минусы использования аккордеонов на мобильных сайтах: повышенная стоимость взаимодействия; вне поля зрения не в уме
Помощь и подсказки
75. Основная цель каждой веб-страницы должна быть очевидна для пользователя.
76. Пользователи не хотят использовать справку на вашем веб-сайте. Поместите это в контекст и предложите мастера и ответы на часто задаваемые вопросы, когда это необходимо.
77. Отображать подсказки на веб-сайтах и в приложениях в контексте и только при необходимости.
78. Справка и инструкции должны быть краткими и визуально отличаться от других элементов интерфейса.
79. Показывайте только одну подсказку на веб-сайтах и в мобильных приложениях. Это снижает нагрузку на память
Иконки
80. Иконки должны визуально описывать их функции и назначение. Сделайте их простыми, знакомыми и значимыми
81. Иконки следует использовать только при необходимости. Избегайте чрезмерного использования и не используйте их просто для украшения
Содержание
82. Самая важная информация на вашей веб-странице всегда должна выделяться как наиболее визуально заметная.
83. Поместите ключевую информацию на первое место. Пользователи начинают с верхнего левого угла, и первые 2-3 слова сканируются чаще всего.
84. Размещайте высокоприоритетный контент вверху страницы сайта. Используйте аналитику для определения приоритетов на разных устройствах
85. Используйте контраст цвета и размера на своем веб-сайте, чтобы отличать основную информацию от вспомогательных деталей.
86. Для мобильных пользователей более важны такие приоритеты, как контекст, местоположение и экстренная информация.
87. Приоритеты для мобильных устройств: местоположение, события, номер телефона, экстренная информация, информация с привязкой ко времени и информация, необходимая на ходу.
88. Простые, понятные термины лучше, чем отраслевой жаргон или модные термины для навигации по веб-сайту.
Читаемость
89. Большинство пользователей сначала сканируют, а потом читают. Используйте визуальное разнообразие и содержательный текст, чтобы упростить сканирование
90. Читаемость — это не только то, можете ли вы что-то читать, но и то, хотите ли вы это читать.
91. Используйте увеличенный межстрочный интервал между маркированными списками, нумерованными списками, строками и абзацами, чтобы повысить удобочитаемость.
92. При выборе шрифта для веб-сайта учитывайте его удобочитаемость, удобочитаемость, вес и стили.
93. На мобильных веб-сайтах и в приложениях подумайте о том, чтобы увеличить высоту шрифта по x, чтобы улучшить его читаемость.
94. Избегайте мелкого шрифта на всех устройствах, особенно для длинных копий. Не используйте сокращенные шрифты в основном тексте
95. Убедитесь, что размер текста для заголовков на мобильном веб-сайте такой же адаптивный, как и остальной контент.
96. Увеличивайте размер шрифта на мобильных сайтах — всегда масштабируйте размер шрифта по размеру экрана.
97. Баннерная слепота: пользователи стараются не смотреть на то, что похоже на рекламные баннеры.
98. Облегчите чтение длинных текстовых блоков, включив в абзац только одну идею.
99. Текст, выделенный курсивом, труднее читать , особенно читателям, страдающим дислексией.
100. НЕ ИСПОЛЬЗУЙТЕ ВСЕ ЗАГЛАВНЫЕ УКАЗАНИЯ В ЗАГОЛОВКАХ И ТАГЛАЙНАХ.
