Какие элементы сайта позволяют улучшить UX

Всем привет!

33

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

Ответить