ТОП 100 UX рекомендаций — часть 1

UX рекомендации
Статьи
Автор: Юлия Федотова
«Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер.
Предлагаем простые UX рекомендации, которые дадут вам понять, что исправить на сайте, чтобы улучшить опыт и впечатления пользователя о сайте.»

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

Последовательность

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

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

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

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

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

Скроллинг

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

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

8. Чем длиннее страница, тем меньше вероятность, что пользователь досмотрит ее до конца.

9. Сознание способно удерживать 7+/-2 концепта в оперативной памяти. Слишком длинные страницы увеличивают нагрузку на память. Разбивка длинного контента на несколько страниц снимает нагрузку на память.

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

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

11. Не используйте синий цвет для выделения текста на странице. Это цвет ссылок.

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

13. Выберите единый цвет для СТА-кнопок на сайте и не используйте его для оформления других элементов.

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

Загрузка

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

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

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

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

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

20. Задержки загрузки контента повышают вероятность отказа от просмотра и выхода с сайта.

Мобильность

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

22. Минимальный размер элемента в мобильном интерфейсе должен быть 1см х 1см. Любой навигационный элемент должен быть визуально отличим от других элементов дизайна и контента.

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

24. Проектируя интерфейс под планшеты, стоит учесть, что края — самые легко достижимые для касаний области.

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

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

27. Перед созданием мобильного интерфейса определите, как посетитель будет использовать гаджет: одной или двумя руками.

Навигация

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

29. Если структура сайта предусматривает 3-4 уровня вложенности, самое время задуматься над редизайном.

30. Если на сайте предполагаются длинные страницы, используйте прикрепляющиеся основные меню. Это упростит доступ к основным разделам, уменьшив количество действий.

31. Качественно оформленная навигация не мешает взаимодействию пользователя с сайтом.

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

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

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

35. Качественная мобильная навигация показывает пользователям наиболее часто используемые элементы в основном доступе. Остальные прячет в гамбургерах.

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

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

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

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

40. В мега-меню важно правильно сгруппировать элементы, а также визуально дифференцировать кликабельные и некликабельные элементы.

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

Формы

42. Все поля формы должны быть расположены вертикально в едином столбце. Это упрощает скнирование и восприятие информации, а также понимание цели.

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

44. Визуально разделяйте длинные формы на части/этапы, это улучшит восприятие и упростит достижение цели.

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

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

47. Показывайте все поля с ошибками сразу, а не поэтапно, чтобы снизить вероятность отказа от заполнения формы.

Источник

Добавить комментарий

Войти с помощью: 

Статьи по теме

покупки со смартфонов
Статьи
Как пользователи совершают покупки со смартфонов
Яндекс совместно с компанией GfK RUS провели исследование, как пользователи совершают п...
ux рекомендации
Статьи
ТОП-100 UX рекомендаций — часть 2
Качественный UX обеспечивает больше успешных взаимодействий пользователей с сайтом. Оши...