Приветствую, Искатель самых свежих новостей из мира UX-дизайна!🍊
(как и ранее - это не реклама, поэтому без ссылок ;) )
UXbenchmark, проанализировал ТОП-60 сайтов электронной коммерции во время крупномасштабного UX-тестирования и сделал вывод, что для бОльших продаж и удобства пользователей, для уточнения размера/цвета (и пр.) товара перед добавлением его в корзину, ЛУЧШЕ использовать эти современные UX-приёмы.
Но, несмотря на это, 28% сайтов из их списка ТОП-60, всё ещё используют устаревший способ отображения выбора и, если учтут свои ошибки, то могут сделать свои онлайн-магазины прибыльнее и удобнее! (особенно это актуально для мобильных приложений).
Итак. Что именно было в исследовании? На мобильных устройствах эта повышенная потребность во взаимодействии становится ещё более утомительной, особенно когда продукты поставляются в нескольких цветовых или стилевых вариациях в дополнение к нескольким размерам. Из-за размера мобильного экрана, информация о продукте сжимается в более узкий и длинный формат прокрутки, заставляя пользователей прокручивать назад и вперёд между селектором цвета и селектором размера, чтобы определить доступность каждой комбинации. Между тем, на компьютере, более широкий обзор экрана обычно позволяет даже большим количествам цветов, размеров и других вариаций, быть видимыми на одном экране, что делает процесс выбора комбинации вариантов продукта менее трудоемким. Вывод: если у товара (на мобильном устройстве с выпадающим списком выбора) более одной цветовой вариации - некоторые пользователи, скорее всего, откажутся от поиска своей предпочтительной комбинации цвета и размера, считая его слишком трудоемким.
Применяйте новейшие UX-приёмы к своим продуктам, чтобы сделать их прибыльнее и удобнее. Успехов Вашим онлайн-магазинам!
И так, как же именно “открытые кнопки” позволяют пользователям сразу же увидеть параметры размера? Примеры.
Вместо использования раскрывающегося списка с параметрами размера, скрытыми по умолчанию, отображение параметров размера с помощью кнопочных селекторов помогает гарантировать, что эти важные вариации продукта легко видны пользователям. Поскольку каждая кнопка имеет определенный размер, пользователи могут лучше видеть сразу все доступные опции, а количество усилий и взаимодействия, необходимых для изучения этой базовой информации, значительно уменьшается.
Как заметил один пользователь, “я думаю, что чем меньше кликов мне придется делать, тем лучше”.
ПРИМЕР. Пользователь, испытав разочарование на других тестовых сайтах, когда желаемый размер оказался недоступен, выразил признательность за выставление размеров непосредственно на странице продукта. И пояснил: “Он сразу показывает мне, какие размеры доступны. Мне не нужно никуда нажимать, чтобы увидеть, какие размеры доступны”.
Вывод: когда размеры представлены в виде отдельных кнопок, пользователи могут легко определить с первого взгляда, какие именно оставшиеся размеры доступны.
ПРИМЕР. Другой пользователь легко определил, что заказываемая толстовка была доступна в ее желаемом размере. Пояснив: “Сразу видно, доступен ли именно мой размер, или этого товара у них сейчас для меня не осталось”.
Вывод: открытые кнопки позволяют легко просматривать доступные размеры без необходимости взаимодействия с раскрывающимся селектором.
ВЫВОДЫ из ВСЕГО исследования полностью:
Размер “кнопок” стал стандартным веб-соглашением. Для продуктов, которые поставляются в разных размерах, предварительный просмотр того, какие из них есть на складе, является важной предпосылкой для принятия решения о покупке. Выпадающие меню и образцы цветов - пережиток раннего веб-дизайна. Всё ещё не все ресурсы используют размер кнопок адекватно. Существует множество хороших вариантов и отобразить удобно, и вместить компактно, нужно только поискать немного. Но в итоге именно от ожиданий пользователя будет зависеть - купит он имеющийся на складе товар; или же уйдёт без покупки, не разобравшись, что такой товар был готов к покупке.
♥️ Успехов на всех фронтах!
Рекомендую к прочтению также продолжение результатов данного исследования:
СТАТЬЯ 1. “Кнопки лучше списка”
СТАТЬЯ 3. “Чем заметнее UX-указатель, тем проще пользоваться. Три реальных UX-примера”.
