Какие элементы сайта позволяют улучшить UX
Всем привет!
Решил поделиться своими наработками по элементам на сайте, которые улучшают пользовательский опыт и облегчают взаимодействие.
Хочу сразу обратить внимание, что мой опыт не является последний инстанцией, скорее его можно рассматривать, как дополнительный материал и использовать в работе, как чек-лист.
1. Поиск по сайту.
Поиск, это та эта функция, которая должна облегчить пользователю найти нужную информацию, товар или услугу на сайте, но некоторые “прикручивают” поиск и на этом все.
Пример хорошей реализации поиска:
Пример плохой реализации поиска:
2. Элементы навигации.
Например те, которые позволяют вернуться на шаг назад или продолжить серфинг. Особенно это важно на мобильном устройстве.
Пример хорошей навигации:
Пример плохой навигации:
3. Всплывающие подсказки.
Когда пользователь что-то не сделал, на что-то должен обратить внимание, что-то ввел некорректно и т.д.
Пример хорошей подсказки:
Пример плохой подсказки:
4. Отображение контента.
Возможность выбора отображения контента на сайте, будь то карточка товара или блог со статьями.
5. Большие задачи делить на маленькие.
Все большие формы, или формы, которые имеют деление на несколько логических блоков, разделять на шаги.
6. Информирование и количестве.
Информировать о количестве материала на сайте или наличии товара.
7. Информирование о персональных скидках.
Пример хорошей реализации:
8. Информировать об ограничениях.
Например, нельзя примерить без покупки. Пример хорошей реализации:
9. Информировать сколько осталось до какой-либо выгоды для клиента.
Пример хорошей реализации:
10. Автоматическое определение местоположения пользователя.
Для отображения удаленности магазина, мероприятия и т.д.
Пример хорошей реализации:
11. Информативные сообщения об ошибках.
Пример хорошей реализации:
Пример плохой реализации:
12. Использовать правильные формы ввода.
Если текст, то текстовая клавиатура, телефон, то набор цифр, если почта, то наличие @.
13. Раскрывающиеся элементы.
Не стоит показывать все сразу, пусть пользователь сначала изучит что-то одно.
Пример хорошей реализации:
Пример плохой реализации:
14. Навигация по сайту.
Правильно структурированное и логически выстроенное меню на сайте, является чуть ли не обязательным элементом, с которым пользователь взаимодействует всегда.
Можно еще углубиться в дизайн, и поговорить о контрасте, цвете, акцентах, шрифтах и т.д. Но кажется, что это тема отдельной статьи, да и большим опытом не обладаю, чтобы эту часть осветить.
На VC, была хорошая статья про психологию и UX, можно почитать её тут.
Буду рад любым комментариям, особенно тем, где вы поделитесь своими наработками.
Готовлю следующую статью, если вам интересны темы ниже, то прошу отметить то, что больше откликается.
Думаю, стоит еще добавить инфо о навигационном меню и поп-апах, всплывающих окнах, которые также являются UX, насколько я еще это знаю. ) Я не обладаю большими знаниями в UX UI, изучаю потихоньку. Однако вышеуказанное является неотъемлемой частью удобства пользования сайтом.)
Все верно, правильное и понятное меню, это чуть ли не самое главное для пользовательского опыта, поп-ап я бы больше отнёс к блокам коммуникаций, когда хочется о чём-то рассказать или получить от пользователя данные.
Спасибо, что обратили внимание.
Информацию про меню добавил.
13. Раскрывающиеся элементы - это неверно. Если сделать как вы советуете, пользователю нужно сделать лишний клик/тап и даже возможно скролить список. Лучше сделать кнопками, которые видны сразу - пользователю потребуется меньше действий.
Вы правы, что данный элемент применим не во всех случаях, важно следить за контекстом и не создаются ли сложности для пользователя.
Но если учесть сумму факторов:
1. Дизайн. Больше относится к десктопу, если дизайн позволяет вывести все элементы, то можно не использовать выпадающий список.
2. Устройство пользователя (мобилка или десктоп). Важно учесть с какого устройства зашел пользователь, так как область экрана ограничена и выпадающий список, это то решение, которое позволяет использовать пространство максимально эффективно.
Пример удачной реализации (мое мнение): http://snap.ashampoo.com/1xaQq7flBSS6Jsu3O7W5V4BjG8yTPVwloW49UckwU7u0qJ3aHt58P9HW6blNWcYF
Пример реализации требуемой доработок: http://snap.ashampoo.com/cusAknzyWmFRnIaehAWz28eaWgNpNaOqucQ9plXhX8YFhzkO1cjVAnwxTEHcfWsz
3. Кнопки. В идеале все важные элементы должны быть на первом экране.
Пример удачной реализации (мое мнение): http://snap.ashampoo.com/1xaQq7flBSS6Jsu3O7W5V4BjG8yTPVwloW49UckwU7u0qJ3aHt58P9HW6blNWcYF
Пример реализации требуемой доработок: http://snap.ashampoo.com/QDSCPKxLzX5R3Mi3f0NGABlmZjFaGxcX2U1LasxZlUMhcvDHUrOvSZCnDiNKAqd3
4. Количество выводимых элементов. Если их не много, то можно отобразить все. А если их 20, то лучше использовать раскрывающийся список.
5. Вывод дополнительной информации. Если хотите дополнительно что-то указать, например "товар доступен только в магазине" или "Подписаться на поступление", то самым правильным решением будет, это использовать выпадающий список:
Пример удачной реализации (мое мнение):
- раскрыв список размеров, становится ясно, что с размером и не важно какое устройство, везде единый стиль: http://snap.ashampoo.com/CNDiEkDtAmSzduYeajbBQijnqUmxGS7jbcRFmVznCMHgcBkClLe4TnJfdV5JJ1tK
Пример реализации требуемой доработок:
- нужно выбрать размер, чтобы понять что с ним. Дизайн мобильной версии и десктопа отличается, нужно время что-бы разобраться, если первый раз используешь сервис: http://snap.ashampoo.com/WB6dqbrIS4FQN1gZsavdOQMe7SAQ4DWtfUwVVI9JFf2TABotcewQUDvSwVEtZ3Ha