В сентябре этого года институт Baymard опубликовал исследование про UX продуктовых страниц: что в них плохо и как это можно исправить.

Наш дизайнер Алексей Андросов выделил 7 основных пунктов, актуальных для российских интернет-магазинов. Мы их перевели и адаптировали.

Покажите товар на модели (этого не делает 81% сайтов)

«Думаю, без модели сложно представить, как будет выглядеть платье. Поэтому мне и смотреть на него не особо интересно. Я бы предпочла увидеть платье на модели».

Из-за того, что в приложении Urban Outfitter платье показывают не на модели, участнице тестирования было сложно его правильно оценить.

Изображение должно показывать товар «в масштабе» — то есть в сравнении с другими предметами понятного размера. Так пользователи смогут определить реальные параметры товара, который смотрят в интернете.

Но этого недостаточно для одежды, аксессуаров (сумок, украшений, часов), косметики — чтобы получить максимально точное представление о таком товаре, его нужно показать в контексте с моделью.

Товар, который показан на модели, дает представление не только о размере, но и об образе в целом. Проще говоря, покупатель видит не только вещь, но и то, как он будет в ней выглядеть.

Например, часы на однотонном фоне — это просто часы. А часы на мужчине, который одет в дорогой костюм и сидит в авто премиум-класса,— это уже имидж.

 

Алексей Андросов
Дизайнер Intensa

«Я вижу, как товар выглядит на модели, поэтому понимаю, что сумка довольно большая».

Сумка, которая показана на модели, сама по себе отвечает на вопросы по поводу размера, которые могут возникнуть у пользователей сайта Next (UK).

Товар, который показан в контексте с моделью, дает о себе более объективное представление. Так пользователи лучше поймут, как выглядит товар, и смогут принять решение о покупке.

Дайте пользователям возможность покупать товары, которых нет в наличии, увеличив время доставки (этого не делает 87% сайтов)

«Да его нигде нет. Я лучше просто пропущу. Какое-то разочарование».

Наведя курсор на кнопку «Узнать о поступлении по электронной почте», участница тестирования решила совсем отказаться от покупки на немецком сайте Bonprix.

Если не дать пользователям возможность купить товар, которого временно нет в наличии, это почти гарантирует, что они покинут сайт и пойдут искать этот товар в другом месте.

Действительно, показать текст о том, что товара нет в наличии, — это тупик UX: если пользователи были настроены на покупку конкретного товара, после этого они не будут дальше просматривать сайт.

«Недостаток в том, что товар будет в наличии только 22 января».

В приложении Amazon участник тестирования сам мог выбрать, покупать ли ему фритюрницу, которой сейчас нет в наличии, с доставкой через несколько недель. Учитывая, что этот товар подходит пользователю и доступен со скидкой, время доставки, возможно, не будет проблемой.

Если товара временно нет в наличии, то лучшее UX-решение — позволить пользователям сделать покупку, увеличив время доставки.

Упростите доступ к функции «Добавить в избранное» (этого не делает 96% сайтов)

«Я не вошла в систему, поэтому теперь мне придется… проклятие! Я просто не хочу делиться своей информацией».

Участницу тестирования разозлило то, что ее заставили регистрироваться на немецком сайте Zalando, чтобы добавить платье в wish-лист. Если пользователи не хотят создавать учетную запись, чтобы добавить товар в избранное, они уйдут на другой сайт, где можно не раскрывать свою личную информацию.

Меньшинство пользователей добавляет понравившиеся товары в «Избранное». Большинство использует корзину как временное хранилище.

Кроме того, многие пользователи не хотят делиться личной информацией — об этом говорит их нерешительность, когда нужно нужно ввести номер телефона.

«Давайте посмотрим, что произойдет, если я добавлю этот товар в wish-лист. Возможно, мне придется завести аккаунт. Нет — это круто, хорошо… Думаю, в данном случае здорово, что не нужно регистрироваться, чтобы добавить товар в wish-лист».

Немецкий участник тестирования оценил, что на сайте BonPrix не нужно регистрироваться, чтобы сохранить товар. Это производит на пользователей хорошее впечатление.

Поэтому важно, чтобы гостевые пользователи сайта тоже могли добавлять товар в «Избранное».

Понятно, почему сайты хотят, чтобы пользователь зарегистрировался:
— ему можно чаще предлагать акции и скидки;
— пользователи, которые уже зарегистрированы, склонны чаще совершать покупки на сайте;
— наличие учетной записи дает больше возможностей для управления функциями.

Но это отпугивает большое количество новых пользователей — так можно потерять значительный объем продаж.

Разместите информацию о бесплатной доставке в разделе «Купить» или рядом с ним (этого не делает 23% сайтов)

На сайте Ulta информация о бесплатной доставке есть только на баннере вверху страницы. Во время тестирования многие участники пропустили это уведомление и сосредоточились на изучении информации рядом с разделом «Купить».

У участников тестирования была «баннерная слепота» — некоторые пользователи не замечали информацию о бесплатной доставке на баннерах сайта, в заголовке страницы или в верхней части карточки товара.

Поскольку большинство пользователей ассоциируют любые баннеры с рекламой, они игнорируют баннер «бесплатная доставка» — так было у 27% участников тестирования.

Некоторые пользователи будут искать информацию на продуктовой странице, в то время как остальные сделают ошибочный вывод, что на сайте вообще нет бесплатной доставки.

Часто баннер с информацией про бесплатную доставку размещают на главной странице сайта или в разделе «Акции». Но пользователи не всегда попадают сразу на эти страницы — они могут прийти из поисковика или, например, с контекстной рекламы. Поэтому лучше давать полную информацию на странице товара, в том числе и о доставке, тем более бесплатной.

 

Алексей Андросов
Дизайнер Intensa

«Мне нравится, что они написали про бесплатную доставку и бесплатный возврат. Для меня это было важно».

На сайте Miinto участница тестирования быстро заметила информацию о бесплатной доставке — сразу под основной кнопкой в карточке товара.

Информацию о бесплатной доставке следует размещать рядом с разделом «Купить» — там ее будет проще заметить.

Возможно, это также сократит количество пользователей, которые отказываются от заказа, чтобы не переплачивать. По статистике отказов в корзине, это характерно для 48% пользователей.

Структурируйте список характеристик, чтобы пользователь мог быстро по ним пробежаться (этого не делает 62% сайтов) 

Это очень важно, особенно когда на сайте есть функционал сравнения. Но даже на сайтах известных интернет-магазинов иногда не заполняют все параметры и оставляют пустоты в таблице. Из-за этого товары нельзя сравнить.

 

Алексей Андросов
Дизайнер Intensa

У ноутбуков множество характеристик, которые взаимосвязаны друг с другом. Но на сайте Staples они не структурированы по смыслу. Например, чтобы найти в списке «Объем SSD», пользователям нужно просмотреть десятки других характеристик, которые их не интересуют, — это отнимает время и силы.

Во время тестирования выяснилось, что даже относительно короткий список характеристик сложно «просканировать» взглядом.

Нужные характеристики можно не заметить, так как они запрятаны среди множества других параметров. В результате пользователи не найдут ответа на свой вопрос и откажутся либо от товара, либо от сайта.

Список характеристик на сайте B&H Photo структурирован по разделам с понятными подзаголовками. Благодаря этому пользователи могут быстро найти характеристику, которая их интересует. Им не нужно просматривать все подряд. Например, пользователи, которых интересуют параметры вспышки, легко найдут информацию в разделе «Вспышка». 

Поэтому очень важно, чтобы по списку характеристик можно было пробежаться взглядом.

Список, в котором более 20 параметров, нужно структурировать по разделам с взаимосвязанной информацией. У каждого раздела должен быть заголовок, чтобы пользователям было легче просматривать список.

Также можно использовать значки и линии, менять цвет фона.

Осторожнее используйте таблицы, в которых несколько столбцов с характеристиками. Тестирование показало, что пользователям сложнее искать и интерпретировать информацию, если в макете два столбца (в отличие от макета с одним столбцом).

Приведите единицы измерения к общему виду (этого не делает 43% сайтов)

«Это немного раздражает. Характеристики расположены так, чтобы их можно было сравнить, но все запутано, потому что единицы измерения разные».

На сайте Tesco в характеристиках товаров указаны разные единицы измерения. Поэтому участнику тестирования пришлось преобразовывать их в уме, чтобы сравнить параметры. Многие пользователи могут решить, что это того не стоит, и уйти с сайта. 

Во время тестирования выяснилось, что многим сайтам сложно составить логичный список характеристик для товаров одного типа.

Например, для холодильников разных марок, у которых отличаются характеристики или единицы измерения (например, дюймы и сантиметры).

Так часто происходит, когда сайты сотрудничают с несколькими поставщиками. У каждого поставщика свой список характеристик. Сайты не приводят их к единообразию.

Следовательно, пользователям трудно сравнивать товары.

Характеристики в Home Depot приведены в одинаковых единицах измерения. Так проще сравнивать, например, размер товаров.

Характеристики, которые предоставили поставщики, нужно привести к единообразию — так будет легче сравнить однотипные товары.

Дайте объяснение характеристикам товаров (этого не делает 69% сайтов)

Некоторые термины в этом списке характеристик могут быть непонятны неопытным пользователям сайта Hi-Fi Klubben. Например, «aptX», «aptX HD», «aptX Adaptive» и «AAC». Когда такие термины неясны, пользователи будут задаваться вопросом, важны ли эти характеристики, и сравнивать элементы будет сложнее.

Во время тестирования заметили, что многие сайты используют специальную терминологию, которая требует знаний о предметной области (например, «ампер»). Обычному пользователю их, скорее всего, не хватит.

Практика показывает, что люди не могут расшифровать значение характеристики.

В результате пользователи либо пытаются угадать значение, либо идут искать его на других сайтах.

Участницу тестирования озадачило, что на сайте Crutchfield «погодоустойчивый» и «водонепроницаемый» — это два разных термина. Всплывающая подсказка помогла ей понять разницу.

Используйте всплывающие подсказки для технических параметров из отраслевой терминологии или для характеристик, значение которых не до конца очевидно.

Посмотреть полное исследование и изучить другие рекомендации можно на сайте Baymard.
The Current State of E-Commerce Product Page UX Performance (15 Best Practices)


Intensa — производственное агентство для e‑commerce.

Мы помогаем торговым сетям увеличивать выручку интернет-магазинов за счет быстрой и отлаженной аутсорс-разработки.

Какие задачи мы решаем
You May Also Like

5 необходимых фильтров для интернет-магазина с большим каталогом, которых нет на 57% сайтов

Перевели статью зарубежного независимого исследовательского института Web UX Baymard о пяти необходимых фильтров для интернет-магазинов. Данные исследования актуальны не только для…

6 способов повысить средний чек товарными рекомендациями в корзине

Baymard Institute провели масштабное UX-исследование кросс-продаж в корзине. По результатам сформировали 6 рекомендаций, как повысить их эффективность и увеличить конверсию. Мы перевели исследование —…

9 хитростей продуктивного программирования

Перевели статью с портала medium.com о продуктивном программировании. Луис Петрик, разработчик-любитель из Германии, рассказал о своих хитростях успешного программирования. Он уверяет, что кодинг — это весело, особенно, если следовать его вполне простым советам.