UX-руководство по созданию страниц товаров онлайн-магазинов

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

Пользователи, делающие покупки онлайн, не могут потрогать товар, задать вопросы продавцу, примерить или опробовать товар перед покупкой. Конечно, наиболее мотивированные покупатели могут заказать образцы, чтобы пощупать материал. Или задать вопросы в чате (обычно в крайнем случае). Самые бесстрашные покупатели могут даже использовать виртуальные инструменты для примерки. Но все это приводит к высоким затратам на взаимодействие, что требует сильной мотивации и готовности потратить время на просмотр приложения или сайта. Как правило, покупатели не хотят тратить столько времени, поэтому страница товара должна помочь им получить информацию как можно быстрее. В интересах магазина убедиться в том, что на вопросы пользователей даны ответы, а товар представлен достоверно и точно.

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

1. Пользователи не могут понять, соответствует ли товар их требованиям, и поэтому отказываются от покупки (лучше подстраховаться, чем потом жалеть).
2. Пользователи покупают не тот товар, основываясь на неточном описании, что приводит к разочарованию или возврату покупки (чем больше раз пользователи сталкиваются с такой ситуацией, тем чаще они поступают в соответствии со сценарием из первого пункта).

Проанализировав сотни примеров из нашего последнего исследования, проведенного на 49 сайтах онлайн-магазинов, мы создали руководство по созданию эффективного дизайна страниц с подробной информацией о товаре. В этой статье представлен краткий обзор наших основных выводов и рекомендаций.

Что должно быть представлено на странице товара

‍Страница товара – это элемент, на котором лежит большая ответственность, он должен содержать ответы на вопросы пользователей и готовить их к покупке. Поэтому очень важно, чтобы страницы товаров были спроектированы должным образом. Хороший дизайн страниц товара отвечает следующим требованиям – мы разделили их на обязательные, желательные и странные ("странные" элементы дизайна могут отвлекать и разочаровывать пользователей, если они не являются действительно необходимыми или хорошо исполненными).

Обязательно

‍Абсолютный минимум – элементы, которые должна содержать любая страница товара.

• Название товара
• Качественное изображение товара
• Увеличенное изображение (или несколько)
• Цена, включающая информацию о любых дополнительных сборах
• Характеристики товара, такие как цвет и размер, с возможностью их выбора
• Информация о наличии товара
• Возможность добавить товар в корзину и наличие обратной связи о его добавлении в корзину
• Краткое и информативное описание товара

Желательно

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

• Рейтинги или отзывы покупателей и экспертов с возможностью сортировки и применения фильтров
• Дополнительные изображения товара (увеличенные изображения деталей товара или анимации о процессе его использования)
• Видеоролики о товаре
• Функция масштабирования на изображениях товаров
• Рекомендации по сопутствующим товарам
• Инструменты для составления вишлистов

Странно

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

• Возможность виртуальной примерки (например, через загрузку фотографий или дополненную реальность)
• Отзывы покупателей в формате фото или видео
• Возможность оформить подписку на товар
• Инструменты для кастомизации товара
• 360° обзор товара
• Видео или анимация с пошаговой инструкцией по использованию товара

Предвидеть вопросы о товаре и давать на них ответы

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

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

Одной из распространенных проблем, связанных с покупками в Интернете, является возврат товара. Когда на сайте подробно описаны товары, пользователи, как правило, делают правильный выбор, в котором они уверены, и не беспокоятся о возможности возврата. Хорошие страницы товаров должны содержать подробное описание товара с текстом и изображениями:

Описание должно быть подробным и четким, а не многословным или запутанным. Пользователям не нужна реклама товара, им нужно его честное описание с пояснениями о том, как его использовать, как он выглядит и какие задачи решает. Пользователи обычно пропускают текст при чтении в Интернете, и чаще читают только начало описания, игнорируя его конец, обращают внимание на начало строки и не всегда дочитывают ее до конца. Не тратьте первые несколько строк описания на введение — переходите сразу к сути.

Описания также должны раскрывать смысл любых терминов, с которыми пользователи могут быть незнакомы. Например, некоторые товары на сайте Urban Outfitters были обозначены как Urban Renewal Recycled. В описании товара было указано, что означает этот ярлык: «каждое платье было изготовлено вручную, поэтому изделие, которое вы получите, может отличаться по цвету, тону и размеру от того, которое представлено на сайте».

Описание товара на сайте Urban Outfitter включало в себя раздел под названием "About Urban Renewal Recycled", в котором было раскрыто значение наличия этого ярлыка на некоторых товарах.

Используйте изображения и/или видео, чтобы ответить на вопросы.

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

Участница исследования искала сумку на сайте онлайн-магазина eBags и просматривала изображения в списке товаров. Когда она перешла на страницу одного из товаров, она сказала: "Я хотела бы узнать, как эта сумка выглядит изнутри". Когда она нашла соответствующее изображение, она произнесла: "Ну вот! Это очень мило! У нее 2 внутренних кармана". Затем она вернулась к списку товаров и выбрала несколько других сумок, посетила страницы с их подробным описанием, и оценила, как они выглядят изнутри. Об одной из сумок она сказала: "У нее красивая подкладка и удобная боковая застежка-молния". Таким образом, она купила сумку, не прочитав ни одного слова из описания товара.

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

Помогите пользователям сравнить товары

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

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

‍1. Варианты товара. Покупатели, рассматривающие несколько вариантов товара, которые отличаются по таким параметрам как цвет, размер или вкус, ожидают, что для каждого из них будет доступна одна и та же информация.

Один из участников исследования был раздосадован противоречивой информацией о размерах товара на Adagio.com. Сайт подробно описал, сколько чашек чая можно заварить из упаковки объема образца. Но для более крупных упаковок такого пояснения не было. Вместо этого на сайте была указана стоимость одной чашки чая, поэтому пользователи могли оценить варианты на основе цены. Это было полезно, но такое несоответствие раздражало пользователей.

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

‍2. Категория товара. Пользователи, покупающие тот или иной вид товара, ожидают, что на сайте будут представлены одинаковые характеристики для разных марок и моделей. Например, выбирая стиральную машину, пользователь хотел бы иметь возможность сравнить информацию о вместимости, занимаемой площади и типе доступных режимов (таких как деликатный, экологичный, быстрый и т.д.). В случае со сложными техническими характеристиками сравнительные таблицы могут быть лучшим решением для представления такой информации.

‍3. Однотипные страницы товара. Обычно, когда люди перемещаются между страницами сайта, они ожидают, что эти страницы будут выглядеть примерно одинаково. Это одно из десяти правил дизайна пользовательского интерфейса. При посещении страниц товаров покупатели ожидают, что они будут похожи по структуре, содержанию и визуальному оформлению. Количество и тип информации может варьироваться в зависимости от товара, но визуальное оформление, доступ к навигации по всему сайту и функция поиска должны быть одинаковыми.

‍4. Страницы товаров конкурентов. Стоит постараться понять, какую информацию пользователи могут увидеть на сайтах ваших конкурентов, и предложить такую же информацию на страницах ваших товаров. Например, пользователь сравнивал матрасы на сайтах TuftAndNeedle.com и Casper.com, но только на Casper.com страница товара содержала информацию о бесплатной доставке. Он объяснил: «У Casper есть бесплатный возврат и доставка. Таким образом, разница в цене с Tuft & Needle может сводиться к стоимости доставки». Затем он перешел на вкладку браузера с сайтом Tuft & Needle: «Мне пришлось бы углубиться в изучение деталей процесса покупки, чтобы выяснить, сколько стоит доставка, поэтому я просто куплю матрас у Casper, и мне доставят его бесплатно».

На странице Casper указана бесплатная доставка. Пользователи сразу это замечали и учитывали при оценке стоимости матраса.

В отличие от Casper.com, на сайте Tuft & Needle было необходимо добавить матрас в корзину, чтобы узнать, что доставка будет бесплатной.

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

Показывайте покупателям отзывы — даже плохие

‍Даже самое подробное описание товара все равно оставит некоторые вопросы пользователей без ответа. Отзывы о товаре от других покупателей или экспертов — это еще один источник информации, который поможет сделать представление о товаре более полным.

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

Покупатель читал отзывы о смарт-часах на сайте Fossil.com. Он сказал: "Кто-то говорит, что резиновый ремешок чрезвычайно сложен в использовании. Другие говорят, что он выглядит дешево, как детские часы, а третьи — что материалы превосходны". В конце концов, несмотря на наличие негативных отзывов о часах, положительных отзывов было достаточно, чтобы убедить пользователя продолжить рассматривать эти часы. Он закончил чтение отзывов и вернулся к описанию характеристик и изображениям товара.

Пользователь мобильного сайта Fossil нашел полезными отзывы о смарт-часах. Положительные отзывы перевешивали негативные.

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

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

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

Начало процесса покупки

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

Чтобы помочь пользователям начать процесс покупки, страницы с товарами должны:

‍Содержать описание каждого параметра товара. Пользователи должны понимать, что означает каждый параметр — будь то цвет, размер, объем памяти или любая другая характеристика. Выбор параметров также должен быть простым, чтобы пользователи могли легко выбрать именно тот товар, который им нужен.

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

‍Давать четкую обратную связь после добавления элемента в корзину. Заключительным шагом в переходе к процессу покупки является добавление элемента в корзину. Удивительно, но покупатели очень часто сталкиваются с проблемами, потому что не знают, был ли элемент добавлен в корзину.

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

После добавления элемента в корзину, Chewy.com перемещает покупателей на промежуточную страницу, где они могут убедиться, что товар добавлен верно, перейти к его просмотру или в корзину. На промежуточных страницах также должна быть кнопка «Продолжить покупки», чтобы пользователям не приходилось использовать кнопку «Назад» в браузере, если они не готовы к выходу из корзины на данный момент (на сайте Chewy.com такой кнопки нет).

‍Заключение

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