Чек-лист оценки дизайна интернет-магазина: страница товара (карточка товара)

Интернет-магазины — живые организмы. Как всем живым существам, им приходится непрерывно приспосабливаться и работать над собой, чтобы выжить в борьбе с конкурентами. День за днём вносятся небольшие правки и изменения. Вносятся до тех пор, пока не возникает вопрос, как «впихнуть» в уже имеющийся дизайн новые элементы. Это значит, «наросты» когда-то мелких улучшений стали мешать не только администраторам, но и пользователям магазина, они стали мешать совершению покупки. Затруднённый процесс покупки снижает конверсию, уменьшает доходы, и заставляет проверять сайт на предмет удобства пользования.

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

В этой статье расскажем, как проверить юзабилити страницы товара.

Первый и главнейший вопрос — выполняет ли карточка товара свою функцию?

Мы знаем, что у карточки товара есть две основные задачи:

• Убедить совершить покупку.
• Доставить удовольствие от просмотра (для гарантированного возвращения клиента, если он не готов купить прямо сейчас).

Для убеждения важно:

1. Вести направление взгляда. Есть закономерности движения взгляда при распознавании изображения, в том числе на экране монитора.
   Первое, что притягивает внимание — лица и глаза, поэтому фотографии товаров с участием человека хороши для фиксации внимания. Чуть менее притягательны яркие (контрастные) пятна, именно поэтому кнопку «Купить» делают контрастного цвета. Затем взгляд изучает остальные, менее яркие, элементы - они играют вспомогательную роль, их делают менее контрастными.
   
   
2. Уместить на одном экране информацию, важную для сравнения и выбора товаров, чтобы не приходилось прокручивать страницу вверх-вниз в попытках сравнить товары между собой.
   Следует иметь в виду, что для одних товаров важной информацией может быть «фото + цена», для других - «фото + цена + размер», для третьих - «технические характеристики + скорость доставки». Хорошо, если известны параметры, важные для покупателя. Но чаще всего о них можно только догадываться, поэтому рядом с фото следует разместить цену и основные характеристики.
   
   
3. Выделить в разные блоки информацию, (а) важную для сравнения товаров между собой и (б) важную для сравнения магазина с конкурентами.
   Товары сравнивают по важным параметрам, о которых мы сказали выше. А магазины сравнивают по уровню цен, по стоимости дополнительных услуг, по наличию акций, бонусов, сервисов и удобств для покупателей. Упростим покупателям задачу, распределив информацию по блокам. В упорядоченном виде информация воспринимается легко, в отличие от случаев, когда преимущества магазина и товара "скачут" по странице, перебивают друг друга, теряются в ворохе информации.
   
   
4. Повысить наглядность за счёт пиктограмм, схем, макро-фотографий и видео-обзоров. Наглядность — наш лучший друг.
   Всё это призвано возместить невозможность пощупать товар руками.
   
   
5. Дать ответы на все вопросы, возникающие в процессе выбора.
   Такими вопросами могут быть: «Это дорого или дёшево? Как сэкономить? Какова будет итоговая цена со всеми сопутствующими расходами (упаковка, доставка, сборка)? Как этот товар работает (каков он в действии)? Подойдёт ли мне (покупателю) по параметрам, не указанным на сайте (по тактильным ощущениям, вкусу, оттенку, какой-то персональной особенности)? Как товар окажется у меня дома? Как скоро?»
   Способы ответов на вопросы индивидуальны для каждого конкретного магазина и могут быть реализованы с помощью плагинов, приложений или же простым добавлением текста на странице.

Перечислим, что должно быть в карточке товара, помимо исходной информации в дефолтной теме (название товара, его изображение, цена и кнопка «Купить»):

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

Как использовать чек-лист

1. Проверяем отработку чек-листа. Берём карточку товара, берём перечень нужных элементов, отмечаем «галочками» или плюсиками те позиции, что присутствуют в карточке товара. Отмечаем маркером отсутствующие позиции. Пишем комментарии, когда пункт реализован не полностью или требует доработки. Думаем, что делать с недостающими пунктами, внедряем.
   
   
2. Проверяем, насколько тематично распределена информация, объединена ли в легко распознаваемые блоки.
   
   
3. Проверяем пути по странице. Проще всего это сделать на листах бумаги:

• Печатаем макет на чёрно-белом принтере на нескольких листах в альбомной ориентации. Каждый лист будет примерно как один экран видимости.
  
  
• Обводим маркерами самые яркие элементы и проверяем, соответствуют ли они нашему представлению, на что должен обратить внимание покупатель. В результате у нас получится несколько нарисованных кругов/овалов.
  
  
• Отмечаем приоритет выделенных элементов согласно их яркости и размеру.
  Для примера возьмём страницу товара с АлиЭкспресса. Вот как выглядела страница в цвете, и вот что получилось после распечатки и маркерных отметок.
  
  
  
• Отмечаем дополнительные элементы, привлекающие внимание.
  
  
• Рисуем предполагаемые пути взгляда по экрану, сравниваем с нашими представлениями об идеале, думаем.
  
  Мы видим, что цена тут — не самое главное. Главное — фото товара, картинка. А внимание держится в центре экрана, причём достаточно компактно: от картинки к Бесплатной доставке (они знают, что для покупателей это важный параметр) и к кнопкам «Купить». Они сообщают о сроке акции, подстёгивая принятие решения о покупке прямо здесь и сейчас, привлекают дополнительными возможностями сэкономить (купоны). Затем внимание переходит с картинки правее, на текст, и когда мы прокручиваем страницу, текст всё так же находится справа, фиксируя внимание покупателя. В этом они молодцы: взгляду не приходится далеко прыгать слева-направо или сверху-вниз.
  
  
• Вносим изменения и повторяем действия, начиная с распечатки.

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