Не обращая внимания на то, что многие правила веб-дизайна укоренились в качестве базисных правил, сайты электронной коммерции остаются весьма различными кроме того в рамках главных формы — подтверждения и элементов корзины заказа. Вследствие этого, разглядим дизайн двух наибольших ритейлеров и постараемся узнать, чей UX (пользовательский опыт, user experience) действеннее .
Поиск по сайту
Next
Поисковое окно на сайте Next замечательно видно на основной странице, а его функциональность включает предвещающий поиск и достаточно аккуратную историю запросов.
Topman
Сайт Topman аналогичной функции не предлагает, не смотря на то, что панель поиска в полной мере пригодна для применения.
Результат: Next 1:0 Topman.
- Секреты юзабилити вебмагазина: поиск по сайту
Результаты поиска
Next
По запросу «Oxford shirt» на сайте Next представлено множество результатов.
Это не то дабы страно, поскольку рубахи-оксфорд — «фишка» бренда Next, но появляется путаница по причине того, что кое-какие модели имеют диапазон цветов, что показывается посредством курсора, но наряду с этим любой из вариантов демонстрируется как отдельный итог.
Получается, что одинаковая модель рубахи-оксфорд с долгим рукавом представлена 3 раза, и различие содержится лишь в цвете:
Одинаковая рубаха, легко в различном цвете
Разумеется, что должно быть либо одно, либо второе: или необходимо показывать все 13 рубах в различных цветах, или один с возможностью выбрать цвет. А при наличии обоих видов пользователю приходится разбираться в поиске, чтобы выяснить, какие конкретно из рубах в действительности отличаются дизайном, а какие конкретно — лишь цветом.
Второй вариант — возможно давать товарам более характерные заглавия либо кроме того заглавия, каковые содержат описательные элементы (к примеру, тип и материал воротничка либо тип кроя). Это разрешит клиентам лучше ориентироваться в выдаче результатов.
Следующая неприятность фильтров на сайте Next — это не весьма хорошая категоризация. Вот пара примеров.
Фильтр «крой» разрешает выбрать лишь варианты: «прямой», «приталенный» либо «второй». «Второй» звучит как достаточно расплывчатая категория — в действительности, в случае если ее выбрать, то в выдаче будет множество рубах, каковые возможно было бы легко включить и в две другие категории.
Фильтр «рукав» еще хуже — в том месте кроме этого имеется тщетная категория «второй» (наровне с «маленький» и «долгий»), которая, "Наверное," содержит лишь рубахи с долгим рукавом:
Все рубахи в разделе «Второй» имеют долгий рукав
Кроме этого имеется фильтр «размер», используемый к воротничку, не смотря на то, что это и не указано нигде. Он просто выдает перечень размеров шеи в дюймах, что достаточно неясно для тех, кто пользуется метрической совокупностью.
Помимо этого, у пользователей имеется возможность выбрать сортировку по алфавиту, но сложно представить обстоятельство, по которой кто-то примет решение применить ее.
Нужно заявить, что фильтры и результаты поиска на сайте Next достаточно хороши, но без таких функций, как «стремительный просмотр» и выделенное состояние при наведении курсора на изображение товара, перечисленные выше мелкие раздражающие факторы сложнее оправдать.
Topman
Тут результаты поиска значительно более понятны: цвета поделены, употребляется меньше фильтров.
На сайте Topman указать верные фильтры легче, по причине того, что магазин не предлагает изделия, основываясь на размере воротничка и имеет на 75 товаров меньше для отображения — это заметно менее пугающе для пользователя.
Помимо этого, Topman позоляет заметить 20 товаров на странице либо сходу все, а на странице Next возможно лишь скроллить результаты.
Фильтры легко убрать, так же как и на сайте соперника. Но Topman опять побеждает, по причине того, что фильтры содержат меньше неточностей и имеется дополнительная опция в виде прокрутки изображений товара:
Результат: Next 1:1 Topman
Страницы товаров
Next
У компании Next достаточно неповторимые страницы товаров. Они лаконичны, включают громадную фотографию, основы и прекрасное описание UX, такие как навигационная цепочка («крошки»), кнопка «Назад», экскурсовод по размерам, и «сравнительно не так давно просмотренные» вещи.
Но все-таки кое-что возможно было бы улучшить:
- отсутствует информация о доставке;
- не указан размер рубахи, использованной на фотографии и рост модели. Это довольно часто есть необходимым пунктом, если вы желаете дать представление о том, как сидит вещь;
- рубахи-оксфорд представлены в размерах S, M, L, XL, но однако фильтры разрешают выбирать лишь по размеру воротничка.
Кроме этого первое, что выделяется на странице — это советы, каковые отображаются неправильно.
К примеру, предлагается сочетать рубаху с маленьким рукавом и рубаху с долгим рукавом. Не смотря на то, что эта функция на сайте должна быть алгоритмической, такие неточности направляться отсеивать посредством пользовательского тестирования.
А в этом случае возможна путаница между выбранным и рекомендуемым товаром, что может легко привести к добавлению в корзину ненужной вещи.
Topman
Страницы Topman включают больше функций из разряда передовых практик.
Тут возможно проверить наличие товара в ближайшем магазине, имеется прекрасно презентованные советы, каковые не теряются под первым экраном, а размеры товара показываются сходу с понятным обозначением недоступных вариантов.
Кроме этого на странице имеется блок, где предлагаются скидки на различные суммы приобретений. В то время, когда просмотрено достаточно большое количество страниц и в корзину добавлено пара товаров, Topman очевидно желает подтолкнуть пользователя к приобретению.
Фотографий товара тут больше и они разнообразнее, чем у Next, что для потребителя, пожалуй, есть самым заметным различием.
Результат: Next 1:2 Topman
- Из-за чего проектировать пользовательский опыт (UX) так сложно?
Опция «добавить в корзину»
Next
Кнопка «добавить в корзину» имела возможность бы быть больше, не смотря на то, что она видна благодаря зеленому цвету. Но вторая такая кнопка, относящаяся уже к рекомендованной вещи, пара путает.
В то время, когда продукт наконец-то добавлен в корзину, то пользователю ясно, что именно он сделал, благодаря мелкому окну в правом верхнем углу страницы с заметной опцией и миниатюрой товара оформления заказа. Пожалуй, это один из лучших практик.
Topman
Подход Topman к кнопке «добавить в корзину» весьма похож на прошлый. Но кнопка призыва к действию (CTA, Call To Action) больше, и имеется дополнительный CTA — «перейти к оформлению заказа», что кроме этого появляется на странице по окончании. Применяемый зеленый цвет кроме этого мало более заметный, чем у Next.
Результат: Next 2:3 Topman
- Кинутая корзина, либо 12 способов вернуть клиентов вебмагазина
оформление и Регистрация приобретения
Next
Регистрационная форма у Next приятная и динамичная, с громадным числом руководств (см. скриншот). Тут кроме того имеется возможность выбрать обращение «Почтенный» (Reverend):
Но на протяжении регистрации смогут появляться сложности, к примеру, нереально ввести адрес вручную, а если вы живете в новом доме, то Royal Mail может мучительно продолжительно додавать его в «совокупность», и вы останетесь без адреса.
Непроизвольный выбор адреса лишь по почтовому индексу и отсутствие поля «адрес» — точный метод утратить клиентов.
Нет возможности ввести адрес вручную:
Следующая раздражающая подробность — ритейлер не выполняет политику электронной коммуникации и конфиденциальности (Privacy and Electronic Communications Regulations), потому, что у них имеется поле, которое говорит «поставьте галочку, если вы НЕ Желаете приобретать».
У пользователя должна быть возможность выбрать опцию, а не отказаться от навязанной, что расстраивает.
Однако имеется и хорошие моменты, в то время, когда добираемся до оформления заказа.
- Next обращает внимание на надёжную оплату везде, где это вероятно. Доставка на следующий сутки, но наряду с этим возможно выбрать второй сутки, и подходящий временной промежуток.
- Кроме этого они машинально использют почтовый индекс, дабы предложить магазин, где клиент может забрать заказ самостоятельно.
- UX тут особенно понятный, и имеется приятные моменты, такие как выпадающее меню с заметками о доставке (к примеру, пользователь спешит и может отметить опцию «оставить у портье»).
- Зеленый цвет весьма удачно подобран на данной странице — он разрешает выделить все серьёзное.
- При оплате употребляется динамическая форма, ничего лишнего.
Кроме малых неприятностей с регистрацией необходимости и адреса отказываться от рассылок, форму заказа Next возможно назвать эргономичной, в ней сложно совершить ошибку.
Topman
В ходе регистрации на этих сайтах имеется умное различие. У Next нужно кликнуть на кнопку «регистрация» и после этого ввести контактные эти, включая адрес. Topman же запрашивает email и создание пароля на первой странице, а после этого уже дополнительную данные (к примеру, адрес).
Это более разумный подход, потому, что так пользователь вовлекается стремительнее, а это указывает, что возможно продолжить работу с теми, кто выпал на стадии введения адреса.
В момент приобретения Topman предлагает понятную совокупность, подобную той, что применяет Next, не смотря на то, что первый вариант возможно похвалить за демонстрацию более понятной сводки по заказу, дополненной фотографиями товаров.
У Next кроме этого имеется сводка, но без фото, и требуется кликнуть, дабы ее взглянуть.
Topman проигрывает магазину Next по вариантам доставки. Они четко представлены, но за стандартную требуется заплатить больше, чем у Next при заказе доставки на следующий либо в выбранный сутки.
Не обращая внимания на это, оплата на сайте Topman несложна, плюс возможно вручную ввести собственный адрес.
Результат:
Неточности, распознанные у Next (отсутствие ручного ввода адреса и запутанные опции подписки) уравновешиваются более дорогостоящей доставкой Topman. Любопытно, что ни один из магазинов не предлагает возможность оплатить как гость.
На основании того, что цена — это меньшая неприятность, чем UX, и без того как Topman включает фотографии товаров при оформлении заказа, они побеждают данный раунд.
Next 2:4 Topman
- Микровзаимодействия: 14 примеров хорошего micro UX
Выводы по окончании «битвы»
Topman победил! Что, учитывая его нынешнюю репутацию диджитал-новатора, неудивительно.
И это не обличение вебмагазина Next — их сайт совсем приемлемый, и он не содержит значительных препятствий для совершения приобретений.
Однако, в сфере электронной коммерции довольно часто легче выделить варианты улучшения пользовательского опыта при сравнении с другим веб-сайтом, что мало в первых рядах с позиций оптимизации процессов.
Не смотря на то, что оба вебмагазина имеют схожий вид на скриншотах (в частности, на страницах товаров), они трудятся совсем по-различному.
Само собой разумеется, в любом случае нужно тестирование — кто заявил, что изменение обозначенных моментов улучшит обстановку?
Высоких вам конверсий!
По данным: econsultancy.com
Случайные статьи:
GTA 5 Моды УРАЛ vs УРАЛ NEXT на бездорожье В ГТА 5 (Обзор модов в gta 5)
Подборка похожих статей:
-
Почему хорошая навигация эффективнее функции поиска на сайте?
В разработке веб-интерфейсов существует тенденция избавляться от стандартного меню. И в действительности, для чего заботиться о навигации, в случае если…
-
Дизайн или копирайтинг: какие сплит-тесты самые эффективные?
В то время, когда чуть более ста лет назад Уильям Сили Госсет (William Sealy Gosset), узнаваемый ученый-статистик, более узнаваемый под псевдонимом…
-
Какие эффекты лендинг пейдж можно реализовать в редакторе lpgenerator?
Вам точно уже как мы знаем, что лендинг — это независимая интернет-страница, которая разрешает удачно презентовать продукт аудитории и поднять его…
-
Как добавить позитива в checkout-процесс (и сделать его эффективнее)
Ответьте на несложный вопрос: имеете возможность ли вы отыскать в памяти случай, в то время, когда процесс оформления приобретения в каком-нибудь…