20 советов как настроить сравнение товаров без ущерба для юзабилити

Что должна включать «юзабельная» страница сравнения товаров? Приводим советы портала getelastic.com на примере магазинов по продаже мобильных телефонов.

Категории и страницы поиска

1. Используйте с умом фильтры и инструменты сортировки

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

В качестве инструмента сортировки можно добавить отзывы клиентов.


Для выбора по цене иногда полезно использовать «ползунки».

2. Не выносите сравнение на боковую часть страницы сайта

В противном случае панель сравнения попадет в зону «баннерной слепоты».

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

3. Нужно иметь четкий «призыв к действию» (call to action) рядом с чек-боксом

Держите эти призывы к действию, по возможности, в поле зрения пользователя.

4. Ссылка должна оставаться ссылкой

Одним из самых основных правил веб-юзабилити является правило: «ссылка должна выглядеть как ссылка». Ссылки должны выглядеть интерактивными: быть выделенными другим цветом, подчеркнуты, или иметь подпись «нажмите на [____]».

5. Обеспечьте визуальную обратную связь, когда элемент будет добавлен в таблицу сравнения

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

6. Предложите сравнить товары на странице поиска

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

Таблицы сравнения

7. Сделайте кнопку «Закрыть» очевидной

Как и в случае с любым лайтбоксом, дизайн кнопки «Закрыть» должен быть очевидным.

8. Используйте большие изображения товаров

Клиенты очень быстро забывают, что они выбирали. Позвольте им вспомнить свой выбор с помощью хорошей картинки.

Vodafone, например, идет дальше этого совета и показывает несколько изображений при наведении курсора мыши.

9. Сделайте картинку интерактивной

Удивительно, но некоторые таблицы сравнения включают в себя изображения, которые не являются интерактивными.

10. Включите «звездный» рейтинг

Рейтинг клиентов может быть решающим фактором. Включить этот показатель как параметр сравнения – отличная идея.

11. Сделайте цены заметными

Демонстрируйте цену везде, где это уместно, даже если это «от [цена]».

12. Сделайте кнопку «Добавить в корзину» заметной

Избегайте белых и серых кнопок. Как и любой призыв к действию, сделайте кнопку «Добавить в корзину» или «Выбрать» заметной.

Размещайте эти кнопки, как в верхней, так и в нижней части таблицы.

13. Не забывайте ставить ссылку «Подробнее о товаре»

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

14. Используйте понятные инструменты для редактирования таблицы

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

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

15. «Печать / Сохранить» и функция «Отправить email»

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

16. Опция «Свернуть/Развернуть»

Длинные таблицы с большим количеством информации трудно воспринимать. Нужно предоставить возможность разворачивать и сворачивать ряд опций (для отображения и скрытия информации).

Ссылки нужно делать очевидным и интерактивными.

17. Скройте сходства или выделите подсветкой различия

Эта функция подчеркивает действительно разные варианты.


18. Добавьте всплывающие подсказки

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

19. Преобразование единиц измерения (при необходимости)

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

20. Лайтбокс должен иметь скролл

Для длинных страниц информации полоса прокрутки помогает клиентам сопоставить атрибуты товара.

20 советов как настроить сравнение товаров без ущерба для юзабилити: 1 комментарий

  1. Вот я не понимаю, как создаются такие «рекомендации»? Если какой то зарубежный сайт так сделал — то это сразу рекомендация для всех?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *