100 лучших советов по UX-дизайну в 2022 году

w1.png

100 лучших советов по UX-дизайну в 2022 году. Дизайн пользовательского опыта (UXD или UX) в веб-дизайне — это процесс повышения удовлетворенности пользователей за счет повышения удобства использования, доступности и эффективности взаимодействия пользователя с веб-сайтами. На портале по UX/UI дизайна тоже есть много полезной информации по этой теме, по теме SEO продвижения на этом сайте есть много полезной информации. Мы изучаем и применяем в своей работе лучшие принципы взаимодействия с пользователем. Мы хотели бы поделиться некоторыми из лучших практик, которые приобрели за эти годы (включая основные симптомы плохого UX и лучшую статистику UX ). Вот наш список из 100 лучших практик UX, которым должен следовать каждый веб-дизайнер:

Поток

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

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

3. Последовательные и простые в использовании веб-интерфейсы помогают пользователям сосредоточиться на содержании и перемещаться по нему. Нажмите, чтобы твитнуть

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

5. Используйте общие шаблоны и интерфейсы веб-сайтов; не заставляйте пользователей узнавать что-то новоеНажмите, чтобы твитнуть

100 советов по UX-дизайну от мастера пользовательского опыта

Прокрутка

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

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

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

9. Запуск веб-страниц — это хорошо, потому что прокрутка выполняется быстрее, чем нажатие — только не делайте страницы слишком длинными. Нажмите, чтобы твитнуть

100 советов по UX-дизайну от мастера пользовательского опыта

Контраст и цвет

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

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

12. Помните о контрасте на мобильных веб-сайтах. Яркость экрана может сделать ваш сайт непригодным для использованияНажмите, чтобы твитнуть

13. Зарезервируйте один цвет для CTA на своем веб-сайте и не используйте его ни для чего другого. Нажмите, чтобы твитнуть

14. Теплые, яркие цвета выходят вперед, а холодные, темные остаются на заднем плане. Нажмите, чтобы твитнуть

32-3

Загрузка

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

16. Для пользователей важнее всего то, что ваш сайт работает быстро (даже если это просто их восприятие). Нажмите, чтобы твитнуть

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

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

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

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

100 советов по UX-дизайну от мастера пользовательского опыта

Мобильный

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

22. Минимальный размер сенсорной мишени на мобильных устройствах должен составлять 1 см x 1 см с надлежащим заполнением. Нажмите, чтобы твитнуть

23. Кто-то, показывающий мизинец на вашем мобильном веб-сайте или в приложении, означает, что объекты интерфейса слишком малы. Нажмите, чтобы твитнуть

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

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

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

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

100 советов по UX-дизайну от мастера пользовательского опыта

Навигация

28. Всегда имейте очевидный способ получить доступ к меню навигации на вашем веб-сайте. Нажмите, чтобы твитнуть

29. Если иерархия вашего веб-сайта превышает 3-4 уровня, пора изменить дизайн. Нажмите, чтобы твитнуть

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

31. Хорошая навигация по сайту не мешает, она уходит на второй план. Нажмите, чтобы твитнуть

32. Сделайте вашу навигацию последовательной; он не должен меняться по всему сайтуНажмите, чтобы твитнуть

33. Сделайте навигационные ярлыки конкретными, не более 2–3 слов и начните с наиболее информативного слова. Нажмите, чтобы твитнуть

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

35. Мобильная навигация: покажите наиболее часто используемые параметры и скройте остальные в гамбургер-меню. Нажмите, чтобы твитнуть

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

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

38. Выпадающее меню должно быть вертикальным, а не горизонтальным; прокручивать по горизонтали намного сложнееНажмите, чтобы твитнуть

39. Megamenus должен быть уже, чем страница, чтобы их было легко «щелкнуть». Нажмите, чтобы твитнуть

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

41. Не скрывайте функции входа или поиска в меню веб-сайта. Нажмите, чтобы твитнуть

100 советов по UX-дизайну от мастера пользовательского опыта

Формы

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

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

44. Разделите разделы разделителями, чтобы сделать длинные веб-формы более удобными для пользователей. Нажмите, чтобы твитнуть

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

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

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

100 советов по UX-дизайну от мастера пользовательского опыта

Ссылки

48. Ссылки на веб-сайтах должны выделяться — используйте синий текст и / или подчеркивание для обозначения гиперссылок. Нажмите, чтобы твитнуть

49. Ссылки всегда должны выглядеть как ссылки. Нажмите, чтобы твитнуть

50. Пользователю не нужно щелкать ссылку, чтобы выяснить, куда она ведет. Текст ссылки должен сказать имНажмите, чтобы твитнуть

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

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

53. Ожидается, что определенные элементы, такие как изображения продуктов или обзоры, всегда будут интерактивными. Нажмите, чтобы твитнуть

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

100 советов по UX-дизайну от мастера пользовательского опыта

Кнопки

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

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

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

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

59. Веб-сайт должен иметь визуальную подсказку, что нажатие кнопки было успешным в течение 0,1 секунды после взаимодействия. Нажмите, чтобы твитнуть

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

100 советов по UX-дизайну от мастера пользовательского опыта

Поиск

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

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

63. Сделайте так, чтобы поле поиска было легко найти. Обычно пользователи ищут его в правом верхнем углу.Нажмите, чтобы твитнуть

64. При поиске на веб-сайтах пользователи обычно ищут «маленькое поле для ввода». Нажмите, чтобы твитнуть

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

100 советов по UX-дизайну от мастера пользовательского опыта

Карусели

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

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

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

69. Только около 1% пользователей нажимают на слайды карусели на веб-сайтах, поэтому не полагайтесь на эти клики. Нажмите, чтобы твитнуть

70. Карусели веб-сайтов, которые перемещаются автоматически, должны переключаться на ручной режим, когда пользователи взаимодействуют с ними. Нажмите, чтобы твитнуть

100 советов по UX-дизайну от мастера пользовательского опыта

Аккордеоны

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

72. При использовании аккордеонов предложите способ свернуть любое открытое содержимое после того, как пользователь его развернул. Нажмите, чтобы твитнуть

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

74. Минусы использования аккордеонов на мобильных сайтах: повышенная стоимость взаимодействия; вне поля зрения не в умеНажмите, чтобы твитнуть

100 советов по UX-дизайну от мастера пользовательского опыта

Помощь и подсказки

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

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

77. Отображать подсказки на веб-сайтах и ​​в приложениях в контексте и только при необходимости. Нажмите, чтобы твитнуть

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

79. Показывайте только одну подсказку на веб-сайтах и ​​в мобильных приложениях. Это снижает нагрузку на памятьНажмите, чтобы твитнуть

100 советов по UX-дизайну от мастера пользовательского опыта

Иконки

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

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

100 советов по UX-дизайну от мастера пользовательского опыта

Содержание

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

83. Поместите ключевую информацию на первое место. Пользователи начинают с верхнего левого угла, и первые 2-3 слова сканируются чаще всего.Нажмите, чтобы твитнуть

84. Размещайте высокоприоритетный контент вверху страницы сайта. Используйте аналитику для определения приоритетов на разных устройствахНажмите, чтобы твитнуть

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

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

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

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

100 советов по UX-дизайну от мастера пользовательского опыта

Читаемость

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

90. Читаемость — это не только то, можете ли вы что-то читать, но и то, хотите ли вы это читать. Нажмите, чтобы твитнуть

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

92. При выборе шрифта для веб-сайта учитывайте его удобочитаемость, удобочитаемость, вес и стили. Нажмите, чтобы твитнуть

93. На мобильных веб-сайтах и ​​в приложениях подумайте о том, чтобы увеличить высоту шрифта по x, чтобы улучшить его читаемость. Нажмите, чтобы твитнуть

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

100 советов по UX-дизайну от мастера пользовательского опыта95. Убедитесь, что размер текста для заголовков на мобильном веб-сайте такой же адаптивный, как и остальной контент. Нажмите, чтобы твитнуть

96. Увеличивайте размер шрифта на мобильных сайтах — всегда масштабируйте размер шрифта по размеру экрана. Нажмите, чтобы твитнуть

97. Баннерная слепота: пользователи стараются не смотреть на то, что похоже на рекламные баннеры. Нажмите, чтобы твитнуть

98. Облегчите чтение длинных текстовых блоков, включив в абзац только одну идею. Нажмите, чтобы твитнуть

99. Текст, выделенный курсивом, труднее читать , особенно читателям, страдающим дислексией.Нажмите, чтобы твитнуть

100. НЕ ИСПОЛЬЗУЙТЕ ВСЕ ЗАГЛАВНЫЕ УКАЗАНИЯ В ЗАГОЛОВКАХ И ТАГЛАЙНАХ. Читать намного сложнееНажмите, чтобы твитнуть

small_c_popup.png

Заявка на создание сайта

Заполните заявку и мы вам перезвоним в течении 15 минут