4 способа улучшить UX для сайтов электронной коммерции
Содержание
- Ключевые выводы
- Основные статистические данные
- 1) Предлагать релевантные предложения автозаполнения для поисковых терминов и запросов с ошибками (69% не делают этого)
- 2) Добавьте опцию «Просмотреть все» в основную навигационную панель на каждом уровне мобильного каталога продуктов (33% этого не делают)
- 3) Включайте атрибуты продукта последовательно во все пункты списка (68% этого не делают)
- 4) Используйте «дату доставки» вместо «скорости доставки» при прогнозировании прибытия посылки (37% не делают этого)
- Как сделать сайт массовой торговли одновременно универсальным и интуитивно понятным
Ключевые выводы
- UX для массмаркета должен помогать пользователям понять, как устроен сайт, как выбирать между доступными товарами и когда ожидать их товары.
- Невыполнение любого из этих требований затруднит использование сайта и, в худшем случае, приведет к отказу от него.
- Улучшите свой сайт для массовых продаж, помогая своим пользователям с помощью этих 4 ценных рекомендаций
Основные статистические данные
- 69% протестированных сайтов не предлагают релевантных предложений автозаполнения для поисковых терминов и запросов с явными ошибками.
- 33% сайтов не имеют опции «Просмотреть всё» в основной навигации на каждом уровне мобильного каталога продуктов.
- 68% сайтов не включают атрибуты продукта последовательно в пункты списка
- 37% сайтов не оценивают «дату доставки» и вместо этого используют «скорость доставки» при прогнозировании прибытия посылки пользователя.
Обнаружили, что сайты массовых торговцев должны удовлетворять жестким требованиям пользователей в широком спектре областей UX, поскольку пользователям может быть сложно получить легкий доступ к разнообразию предлагаемых ими продуктов без тщательно продуманного дизайна сайта.
Вот несколько таких областей: пользователи должны иметь возможность интуитивно понимать организацию сайта, его механизмы поиска и то, как сравнивать атрибуты его продуктов.
К счастью, результаты исследования Baymard раскрывают лучшие практики в этих областях. Эта статья предоставит вам лучшие и худшие примеры практики от массмаркет, а также сайтов, которые продают продукты, соответствующие сайтам массмаркета.
В частности, в этой статье описываются 4 способа улучшения пользовательского опыта в массмаркет:
- Предлагайте соответствующие варианты автозаполнения для неправильно написанных запросов
- Наличие опции «Просмотреть все» в главной навигации на каждом уровне мобильного каталога продукции.
- Включайте атрибуты продукта последовательно во все пункты списка
- При прогнозировании прибытия посылки используйте «дату доставки» вместо «скорости доставки».
1) Предлагать релевантные предложения автозаполнения для поисковых терминов и запросов с ошибками (69% не делают этого)
В Urban Outfitters , если в строке поиска пропустить одну букву из слова «hoodie», то это не даст никаких полезных результатов. Предложения в разделах «Тенденции» и «Самые популярные» привлекают дополнительное внимание к продуктам, которые пользователи не ищут.Для пользователей, которые знают, какой продукт им нужен, первым действием на сайте массмаркета часто становится использование инструмента поиска, который требует интуитивно понятного поиска .
В ходе масштабного тестирования на настольных компьютерах, мобильных устройствах и мобильных приложениях почти все пользователи в какой-то момент при составлении запросов полагались на подсказки автозаполнения .
Однако эти предложения часто не срабатывали , если запросы содержали даже малейшую орфографическую ошибку (например, поиск «furnture» вместо «furture» ).
Это дало понять многим пользователям, что их запросы вряд ли дадут желаемые результаты.
Поскольку автозаполнение играет ключевую роль на ранних этапах поиска, неожиданные предложения из-за незначительных опечаток могут заставить пользователей изменить свои стратегии поиска товаров, перейдя на другие методы просмотра или переработав запросы.
В худшем случае, если автозаполнение не справляется с незначительными опечатками, это может привести к отказу от поиска, если альтернативные стратегии поиска товаров не приведут к быстрым релевантным результатам.
Система автозаполнения Williams Sonoma не распознает неправильное написание слова «spatula», несмотря на то, что оно отличается всего на одну букву от предполагаемого слова. Предложение сайта «Spatyla» бесполезно для пользователя, ищущего шпатель, и потребует от пользователя найти свою ошибку и перепечатать неправильную букву, чтобы получить соответствующие результаты.
Более того, было отмечено, что эта проблема более серьезна для тестировщиков мобильных устройств, поскольку на мобильных клавиатурах набор текста и редактирование сложнее, чем на настольных компьютерах.
В отличие от пользователей, использующих настольную клавиатуру и мышь, которые могут просто указать и щелкнуть там, где они хотят отредактировать, пользователи мобильных устройств, как было замечено, удаляют символы по одному или пытаются нажать точно посередине неправильно написанного слова — часто им приходится повторять процесс несколько раз после того, как их первые попытки оказались неудачными.
Необходимость многократного исправления текста поискового запроса приводит к потере времени и усилий — времени, которое можно было бы потратить на изучение интересующих вас продуктов.
В Wayfair запрос, предназначенный для поиска «area rugs», включает опечатку, где была введена простая замена соседних символов («area ruf») — однако автозаполнение все равно предлагает релевантные предложения запроса, с исправленным совпадением в верхней части списка предложений. Сопоставление очевидных опечаток с исправленными предложениями может позволить пользователям находить продукты без дополнительных усилий по пересмотру запросов.
Предложения автозаполнения в приложении Walmart оказались полезными для двух участников во время тестирования, поскольку автозаполнение хорошо справилось с «shekv» (первое изображение) и «lightsand» (второе изображение), предоставляя предложения в соответствии с намерениями пользователей.
Поскольку орфографические ошибки в поисковых запросах встречаются довольно часто, релевантность автозаполнения можно повысить, сопоставив неправильно написанные слова с осмысленными предложениями автозаполнения.
Традиционно решения для проверки орфографии без использования искусственного интеллекта можно было применять для поиска в электронной коммерции и вручную настраивать для конкретных отраслей в соответствии с часто встречающимися ошибками в словах.
Во многих компаниях автозаполнение поисковых запросов теперь выполняется сервисами, использующими искусственный интеллект, такими как Algolia, Meilisearch, Elasticsearch, Typesense и Coveo, которые по-прежнему позволяют как автоматически, так и вручную сопоставлять неправильно написанные пользователем слова с наиболее вероятным термином.
Какой бы путь вы ни выбрали, использование точно настроенной автозамены может облегчить пользователям поиск нужной информации и избежать ошибок автозаполнения, которые привели к отказу от ввода данных в ходе тестирования.
2) Добавьте опцию «Просмотреть все» в основную навигационную панель на каждом уровне мобильного каталога продуктов (33% этого не делают)
Хотя поиск играет решающую роль в поиске пользователями того, что им нужно, навигация также очень важна.Например, результаты опроса показывают, что 37% респондентов заявили, что используют навигацию сайта при случайном поиске товаров с определенными характеристиками или функциями, а 31% заявили, что используют навигацию сайта для поиска визуально ориентированных товаров (опрос 2025 года среди 1167 онлайн-покупателей).
На сайтах для ПК пользователи часто имеют возможность получить широкий спектр продуктов, выбрав верхний уровень в главном раскрывающемся меню навигации . Эта опция отображается для пользователей при изменении курсора при наведении.
Однако на мобильных устройствах это не так.
Здесь, в John Lewis, пользователи могут выбирать различные платья для просмотра, но не могут просматривать их все.
На мобильных устройствах из-за отсутствия состояния наведения курсора массовым торговцам приходится определять, должен ли пользователь, нажимающий на основную категорию, разворачивать подкатегории внутри нее или перенаправлять пользователей на целевую страницу для элемента основной категории (например, широкий список товаров или промежуточная страница категории ).
Один из шаблонов проектирования, который может предоставить пользователям доступ к более широкому спектру на мобильных устройствах, — это возможность нажать на заголовок категории, в которой они в данный момент находятся.
Однако во время тестирования участники не смогли нажать на заголовок текущей просматриваемой категории, чтобы получить более широкий список товаров, даже когда участники хотели получить более широкий список, когда заголовок представлял собой просто название подкатегории (например, «Макияж», «Топы» и т. д.).
Другой подход заключается в использовании нескольких областей нажатия в каждом основном элементе навигации, например, позволяя пользователям нажимать на заголовок (например, «Топы»), чтобы увидеть широкий список товаров, или нажимать на стрелку в конце строки, чтобы развернуть подкатегории (например, «Рубашки», «Повседневные рубашки», «Свитера» и т. д.).
Однако этот дизайн основан на очень тонких подсказках , которые многие участники пропустили: некоторые — потому что были незнакомы с этой концепцией, другие — потому что сталкивались с ней непоследовательно на разных сайтах — или даже в пределах одного сайта.
Macy’s включает вложенные пункты меню «Просмотреть все» на разных уровнях иерархии категорий.
Было отмечено, что стабильно хорошие результаты дает наличие пункта меню «Просмотреть все», вложенного в каждую категорию продуктов в иерархии.
Например, сайт с категорией «Женщины» и подкатегориями «Одежда» и «Пальто» будет иметь пункт меню «Просмотреть все» на каждом уровне — например, «Просмотреть все женские», «Просмотреть всю женскую одежду», «Просмотреть все женские пальто» .
Если списки продуктов на самом верху иерархии, скорее всего, будут перегружены или бесполезны для пользователей, то кнопка «Просмотреть все» может перенаправить пользователей на страницы промежуточных категорий .
Однако обратите внимание, что главное — чтобы слова «Просмотреть все», «См. все» и т. д. предшествовали названию подкатегории, в которой в данный момент находятся пользователи.
Реализации, в которых просто указано, например, «Джинсы» вместо «Просмотреть все джинсы» , будут пропущены большинством пользователей, которые не поймут, что заголовок «Джинсы» можно нажать, чтобы увидеть самый широкий доступный путь «Джинсы» .
Однако это также означает, что если текущая реализация позволяет пользователям просматривать все продукты в подкатегории, нажав на ее заголовок, то исправить это так же просто, как добавить текст «Просмотреть все» или «См. все» ко всем соответствующим заголовкам.
«Я думаю, если бы я не был уверен, что хочу, я бы просто выбрал «все», и мне бы показали все возможные конфигурации. В то время как если бы я знал, что мне нужен Side-by-Side, я бы мог сразу перейти к нему, или к нижней или верхней морозильной камере, я бы мог сразу перейти к ним». Опции «Просмотреть все» , такие как «Все полноразмерные холодильники», размещенные в качестве первого пункта меню в приложении Build.com , позволяют пользователям просматривать более широкий набор продуктов, прежде чем сузить выбор.
Кроме того, опцию «Просмотреть все» следует разместить в качестве первого пункта меню в списке (т. е. наверху), поскольку тестирование показало, что размещение ее в другом месте затрудняет ее поиск участниками.
Кроме того, расположение «Просмотреть все» внизу или в середине списка нарушает типичную информационную архитектуру для вложенной иерархии, где родительский элемент всегда будет предшествовать дочерним элементам, вложенным в него.
Стратегическое использование функции «Просмотреть все» и автокоррекции, учитывающей опечатки пользователей, может помочь пользователям ориентироваться в продуктах, но проблемы остаются , когда пользователи переходят к этим продуктам и начинают анализировать соответствующую информацию о них.
3) Включайте атрибуты продукта последовательно во все пункты списка (68% этого не делают)
На сайте Microsoft технические характеристики отображаются только для продукта в правом нижнем углу, что делает невозможным корректное сравнение товаров без посещения страниц продуктов.Аналогично, на сайте Target верхний элемент списка не содержит атрибутов продукта, а второй содержит информацию об ингредиентах, аромате и количестве увлажняющего средства.
В ходе тестирования многие участники отклоняли элементы, которые не демонстрировали тех же атрибутов , которые присутствовали в других элементах списка для аналогичных продуктов.
Это весьма проблематично, поскольку пользователи фактически исключают большое количество совершенно релевантных продуктов просто потому, что они не видят определенного атрибута продукта в информации о товаре в списке.
В ходе тестирования отсутствие согласованности атрибутов элементов списка косвенно приводило к многочисленным отказам от сайта, поскольку участники предполагали, что на сайте недостаточно релевантных товаров.
Информация о кофеварках Williams Sonoma здесь слегка неоднородна: у всех есть марка, название модели и емкость, но у Cuisinart отсутствует цветовое обозначение, а у West Bend не указан тип кофеварки (например, капельная, перколяторная или емкостная).
Непоследовательное включение атрибутов продукта в элементы списка может происходить по ряду причин, включая следующие:
- Информация неизвестна. Иногда все атрибуты продукта просто недоступны для всех продуктов в списке; например, на сайте может отсутствовать информация о «сенсорном экране» для всех их ноутбуков.
- Информация неструктурирована. Распространенной причиной несоответствий элементов списка является то, что атрибуты продукта не хранятся в последовательной структуре. Непоследовательно включенная информация была наиболее распространенной проблемой, обнаруженной во время тестирования, когда необходимые атрибуты были доступны на страницах продукта, но не были последовательно включены в элементы списка.
- Информация контролируется поставщиками. Поставщики продуктов обычно хотят выделить конкретную информацию о своих продуктах; следовательно, они будут стремиться выделить различные характеристики и преимущества в элементах списка, если им разрешено контролировать эту информацию (например, если они предоставляют описание «сводки продукта»).
Tesco предоставляет одну и ту же информацию о продукте в своих каталогах мороженого, несмотря на то, что продукция представлена двумя разными брендами: сначала указывается бренд, затем вкус, тип продукта (мороженое) и, наконец, количество.
Поэтому крайне важно убедиться, что одни и те же атрибуты последовательно включены в аналогичные элементы одного и того же списка продуктов.
В зависимости от основной проблемы решение может быть найдено одним из трех способов:
Если информация неизвестна, есть два решения: либо не отображать неизвестную информацию ни в одном из пунктов списка, либо явно указать недоступность атрибута для тех продуктов, где он отсутствует, а не скрывать его полностью.
Если информация неструктурирована, необходимо строгое внутреннее структурирование данных или четко определенная маркировка, чтобы гарантировать надежное извлечение данных о продуктах.
Если поставщик контролирует описания, то решение заключается в том, чтобы строго контролировать весьма ограниченную информацию, отображаемую в элементах списка, а не просто использовать предоставленные поставщиком сводки или основные сведения о продуктах.
Внедрение этих решений позволяет пользователям легко и быстро сравнивать эти атрибуты сразу по нескольким товарам (см. также Объединение вариаций товаров в один элемент списка ).
4) Используйте «дату доставки» вместо «скорости доставки» при прогнозировании прибытия посылки (37% не делают этого)
Foot Locker предоставляет возможность выбора способа доставки во время оформления заказа, но возлагает на пользователей бремя оценки даты прибытия.Еще одним источником путаницы является выполнение заказа, в частности, когда пользователи должны ожидать получения своей посылки.
К сожалению, разнообразие товаров, продаваемых на сайтах массовой торговли, приводит к разнице в скорости доставки, и не все из них легко понять.
Решение, традиционно используемое в электронной коммерции, заключается в четком указании скорости доставки для каждого варианта доставки: например, «Стандарт: 2 рабочих дня — 123₽».
Однако в ходе многочисленных раундов масштабного тестирования пользовательского опыта оформления заказа в Baymard постоянно наблюдали, как участники полностью останавливались в попытках экстраполировать или предположить, когда прибудет их заказ, зная только скорость доставки.
Такая остановка часто приводила к колебаниям и даже к отказу от повозки, когда своевременность имела первостепенное значение.
Британский сайт Debenhams разъясняет сроки доставки, но пользователям все равно приходится рассчитывать, сколько дней пройдет до получения заказа.
Если указаны только скорость доставки или название, пользователям придется учитывать элементы, которые могут быть неясными, неуказанными, двусмысленными или сильно различаться на разных сайтах, например:
- Требуется ли на сайте время обработки заказа (например, «Доставка в течение 1 рабочего дня» ), и если да, то включено ли это в время доставки или нет
- Крайний срок приема заказов и учитывается ли сегодняшний день в заявленном сроке доставки
- Точное определение «рабочего дня» и попадают ли выходные или праздничные дни в диапазон доставки
На сайте JCPenney предполагаемая дата доставки указана под каждым вариантом доставки, поэтому пользователи могут легко оценить и сравнить доступные варианты.
Amazon знает, что пользователям все равно, будет ли их заказ доставлен по «стандартной» или «премиальной» схеме доставки: вместо этого пользователям просто сообщают дату, на которую они могут рассчитывать получить свой заказ.
Чтобы обеспечить точность и ясность для пользователей, заинтересованных в том, когда они получат свой заказ, сайты должны вместо этого указывать предполагаемую «дату доставки» для каждого варианта непосредственно в интерфейсе выбора доставки.
Рассчитав предполагаемую дату доставки, сайты могут снять значительную часть нагрузки с пользователей, поскольку им не придется рассчитывать такие вещи, как:
- Последний день приема заказов
- Есть ли какие-нибудь приближающиеся праздники
- Осуществляется ли доставка по субботам любым из доступных способов или нет
- Есть ли на сайте время обработки заказа
- Сколько времени может занять обработка заказа
- Истек ли внутренний срок обработки заказов на сайте или нет
Для дальнейшего упрощения сравнения предполагаемая дата доставки должна отображаться на видном месте рядом со стоимостью каждого варианта (в том числе на странице товара, если это возможно; см. «На страницах товаров необходимо отображать «Предполагаемую стоимость доставки»») непосредственно на странице оформления заказа.
Важно отметить, что участники тестирования интерпретировали указанную на сайте дату доставки как четкое обещание или гарантию доставки к этой дате.
Чтобы гарантировать, что объекты смогут соответствовать ожиданиям, установленным предполагаемой датой доставки, расчеты даты доставки должны динамически обновляться с учетом известных причин возможных задержек, включая дополнительное время обработки заказов в периоды пиковой нагрузки, проблемы с поставками или невыполненные заказы, время обработки, задержки в праздничные дни, таможенные процедуры и т. д.
Это особенно важно для сайтов с большой долей заказов на подарки, а также заказов в период предпраздничных распродаж, когда пользователи особенно обеспокоены своевременной доставкой (см. также «Пользователи игнорируют возможность самовывоза, когда она не представлена как вариант доставки» ).
Как сделать сайт массовой торговли одновременно универсальным и интуитивно понятным
В данном случае Tesco не только предоставляет одинаковые характеристики продукта в рамках одной категории, например, мороженого, но и предоставляет одинаковые характеристики продукта для всех замороженных продуктов: бренд, название продукта и количество.Эти часто нарушаемые передовые практики — лишь начало рекомендаций Baymard, основанных на исследованиях и предназначенных для создания успешных сайтов массовой торговли.
Действительно, приведенные выше рекомендации взяты всего лишь из 4 из более чем 500 руководств для сайтов массовой электронной коммерции.
Тем не менее, эти методы упрощают путь пользователей , чего не могут сделать многие сайты массовой торговли, что делает их целевыми объектами, на которые стоит обратить внимание:
- Предлагайте соответствующие варианты автозаполнения для поисковых терминов и запросов с ошибками (69% этого не делают)
- Наличие опции «Просмотреть все» в главной навигации на каждом уровне мобильного каталога продуктов (на 33% сайтов ее нет)
- Постоянно включайте атрибуты продукта во все пункты списка (на 68% сайтов этого не делается)
- Используйте «Дата доставки» вместо «Скорости доставки» при прогнозировании прибытия посылки (37% сайтов этого не делают)
Сайты для массовых торговцев в идеале должны улучшить тот опыт, который пользователь может получить в обычном магазине, а советы, представленные здесь, гарантируют, что ваш сайт для массовых торговцев будет обеспечивать пользовательский опыт, который больше похож на профессионально организованную продажу с опытным персональным покупателем, а не на извилистое блуждание по захламленному магазину секонд-хенда.
Автор: Ларс Сёдерлунд. Исследователь UX
Понравилась статья? Жмите лайк или подписывайтесь на рассылку.
А также поделитесь статьей с друзьями в соцсетях.
Популярные статьи
