Экспресс-курс: обучаем отличать хорошие таблицы для сравнения товаров от не очень. Много картиночек под катом.
Сравнение товаров: круто и не очень
Сибирикс
хэндбук заказчикаа

Сравнение товаров: круто и не очень

Экспресс-курс: обучаем отличать хорошие таблицы для сравнения товаров от не очень. Много картиночек под катом.
Главное преимущество интернет-магазинов — любимое домашнее креслице под попой покупателя. А вот по части сравнить-надавить-продать он обычно проигрывает оффлайновым конкурентам. Но e-commerce всему можно научить, прикрутив правильный сервис и настроив подходящую фичу. Например, сравнение товаров — вот о нём и поговорим.
Чем будем мериться?
Не торопись, подумай. Нужно ли тебе сравнение товаров? Это ведь дополнительная работа программистов и дизайнеров, деньги, все дела. Может, твой интернет-магазин и без сервиса сравнения товаров достаточно хорош?

Ради сопоставления пары параметров тратиться на него не стоит. Пользователь и без таблицы поймёт, готов он заплатить за блокнот с золотым тиснением на 50 рублей больше, чем за обычный. Если продукт простой и недорогой — не смущай покупателя кнопкой «сравнение».

А вот в интернет-магазине техники, велосипедов, матрасов и других сложных штук она не помешает. Есть смысл сравнивать товары, если они:

  • Важные, при выборе которых ошибка в одном параметре — уже роковая.
  • Не дешёвые. Тот случай, когда проще несколько месяцев ездить по ушам поддержки магазина, чем заказать второй раз, даже если возможность имеется.
Не круто
Круто
Дьявол в деталях
Теперь ты знаешь, нужно ли тебе сравнение товаров. И пора разобрать по кнопочкам и пикселям, как оно должно выглядеть.

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

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

Можно текстом, но это рискованный вариант. Если распихать характеристики по ячейкам простенькой html-таблицы и остановиться на этом — получится не читабельно и ни капельки не продающе.

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

Подчеркни главное и не перегружай клиента лишней информацией. Выделять различающиеся параметры цветом — это говорить покупателю «ты мне нравишься» на языке e-commerce. А позволить скрыть ненужные блоки характеристик — равноценно признанию в любви.
Не круто
Круто
С информацией ситуация скользкая: с одной стороны, «не перегружай», с другой — таблица должна помочь в выборе и свести в одном месте все плюсы и минусы товаров. Что нельзя делать — оставлять много букв в одной ячейке, которая из-за этого грустной сопелькой тянется пару экранов. Вместо них добавляйте подсказки, которые появляются при нажатии / наведении курсора на соответствующий значок.
Не круто
Круто
И дайте пользователю сохранить, распечатать или отправить таблицу на email — ему будет приятно не натыкивать по 5 смартфонов для сравнения каждый раз, когда он забывает, у какой модели разрешение больше, а у какой — батарея.
Адаптив
Большая и подробная таблица для сравнения товаров не поместится на экране смартфона. Тут нужен хороший адаптив. И для таблиц есть три симпатичных варианта:

1. Каждому товару — отдельный блок, в котором остаётся 2 колонки: с характеристиками и их названиями.
2. Закрепить первую колонку, а остальные оставить подвижными. Такая таблица сохраняет структуру десктопной версии, при этом хорошо просматривается на мобилках.
3. Свернуть информацию до названия товара, а подробности показывать при нажатии.
Выбирайте любой, но помните — второй вариант адаптива нагляднее и подойдёт как раз для сравнительной таблицы.
~
Так что, если решил сравнивать — делай качественно и круто. А на картинки в колонке слева смотри только в образовательных целях. Но если шальная голова всё-таки решит сделать таблицу с фоточками, оранжевым фоном и серобуромалиновыми галочками и крестиками — придёт полиция веб-дизайна и сделает больно. Мы предупредили.