Приветствую, Искатель самых свежих новостей из мира UX-дизайна!🍊
(как и ранее - это не реклама, поэтому без ссылок ;) )
UXbenchmark, проанализировал ТОП-60 сайтов электронной коммерции во время крупномасштабного UX-тестирования и сделал вывод, что для бОльших продаж и удобства пользователей, для уточнения размера/цвета (и пр.) товара перед добавлением его в корзину, ЛУЧШЕ использовать эти современные UX-приёмы.
Но, несмотря на это, 28% сайтов из их списка ТОП-60, всё ещё используют устаревший способ отображения выбора и, если учтут свои ошибки, то могут сделать свои онлайн-магазины прибыльнее и удобнее! (особенно это актуально для мобильных приложений).
Вот три фактора, выявленных при исследовании, которые вам будет выгодно учесть у себя:
1. Во время тестирования было замечено, что некоторые UX-конструкции были слишком тонкИ в указании того, какой размер был выбран.
Селекторы, которые слишком незаметны, и индикации выбора , которые слишком приглушены, замедлят пользователей, так как они должны сначала определить, распознала ли система их вход, прежде чем они смогут перейти к добавлению товара в свою корзину.
ПРИМЕР. H&M выставляет селекторы размера, но указание на то, что размер был выбран, слишком тонко — после нажатия, небольшое кольцо окружает селектор размера “M”. Пользователь поясняет: “в этом приложении просто есть кольцо вокруг одного из кружков параметров товара. Я не знаю, означает ли это, что он выбран?”. Вывод: Селекторы размеров должны делать очевидным для пользователей, какой размер выбран в данный момент. На Brooklinen же, высокая контрастность позволяет пользователям легко различать выбранные, невыбранные и недоступные параметры размера.
2. Кроме того, на мобильных устройствах кнопки размера, которые не имеют адекватного размера и разнесены по расстоянию, также могут привести к разочаровывающим проблемам с областью попадания.
Это затрудняет пользователям быстрый поиск и выбор нужного размера. Поэтому, как и в случае с другими мобильными элементами, жизненно важно обеспечить надлежащую конструкцию селекторов размеров для сенсорного взаимодействия.
“Кнопки” - это лучший опыт, даже когда есть множество вариантов выбора.
3. Когда у продуктов разнообразие размеров очень широкое, представление кнопок для каждого варианта составляет особую проблему (особенно на мобильных устройствах, такое представление может занимать бОльшую часть экрана).
Но, если сделать бОльшую наглядность, при этом уменьшив кнопки и введя несколько взаимозависимых дополнительных наглядных уровней - то всё получается удобно!
Рассмотрите возможность группировки и вложенности размеров по типу, что позволяет отдельным размерам внутри каждого типа быть доступными непосредственно на экране, без необходимости активировать и прокручивать раскрывающийся список.
Эта реализация особенно важна для ограничения количества прокрутки на узких мобильных экранах.
ПРИМЕР. L. L. Bean достаточно эффективно выставляет 13 различных размеров обуви на странице продукта, не слишком отвлекая пользователей. Кроме того, ширина также выставляется, позволяя пользователям легко видеть, как выбор одного типа вариации изменяет доступность другого.
ПРИМЕР. Или вводят зачёркивания отсутствующих размеров, кнопки маленьких размеров и несколько взаимозависимых дополнительных наглядных уровней (regular\tall\petite и short\regular\long):
(Но “вложенные селекторы размеров” именно отдельно не были протестированы, поэтому сайты должны действовать осторожно при реализации этого варианта).
4. Кроме того, горизонтальный прокручиваемый список может быть использован на мобильных устройствах для дальнейшего уменьшения экранной заполненности от отображения вариантов размера (благодаря знакомству пользователей с этим шаблоном дизайна из других мобильных функций).
ПРИМЕР. Everlane минимизирует поле показа, необходимое для отображения размеров, представляя их в горизонтальном "swipeable-списке". Обратите внимание, как самая правая кнопка размера обрезается правым краем экрана, давая визуальный сигнал для пользователей провести вправо для отображения дополнительных размеров:
ВЫВОДЫ из ВСЕГО исследования полностью:
Размер “кнопок” стал стандартным веб-соглашением. Для продуктов, которые поставляются в разных размерах, предварительный просмотр того, какие из них есть на складе, является важной предпосылкой для принятия решения о покупке. Выпадающие меню и образцы цветов - пережиток раннего веб-дизайна. Всё еще не все ресурсы используют размер кнопок адекватно. Существует множество хороших вариантов и отобразить удобно, и вместить компактно, нужно только поискать немного. Но в итоге именно от ожиданий пользователя будет зависеть - купит он имеющийся на складе товар; или же уйдёт без покупки, не разобравшись, что такой товар был готов к покупке.
♥️ Успехов на всех фронтах!
Рекомендую к прочтению также продолжение результатов данного исследования:
СТАТЬЯ 1. “Кнопки лучше списка”
СТАТЬЯ 2 ”Чем меньше кликов мне придётся сделать, тем лучше! Два UX-примера “открытых кнопок”.
