20 советов о том как создавать удобные сравнительные таблицы

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

Категории и Поиск Товаров

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

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


Также подумайте о добавлении отзывов покупателей как критерия сортировки.


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

2. Не прячьте возможность сравнения товаров.

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

Лучше всего расположить эти функции непосредственно в списке товаров.

3. Поместите рядом с каждым товаром возможность его сравнения.

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

4. Не отменяйте выделение.

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

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

5. Пользователь должен иметь возможность увидеть что товар добавлен в сравнительную таблицу.

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

6. Предлагайте сравнение товаров также в результатах поиска.

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

Многие крупные телекоммуникационные и IT компании предоставляют результаты поиска аналогичные результатам Google — поиск происходит по всему Интернету, а не только контенту самого магазина (как на скриншоте). Сравнительные функции в результатах в таком случае позволяют отделить товары интернет магазина, которые пользователь может приобрести, от общих результатов.

Сравнительные таблицы.

7. Кнопка Закрыть должна быть хорошо видна.

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

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

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

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

9. Пользователь должен иметь возможность перейти к детальному описанию приклике на товар.

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

10. Включите рейтинги в критерии сравнения.

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

11. Возможность сравнения по цене должна быть доступна.

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

12. Четкое выделение функции добавления товара в корзину вверху и внизутаблицы.

Избегайте использования серых и белых кнопок.

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

13. Включите ссылку на детальное описание продукта.

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

14. Сравнительная таблица должна включать понятные и хорошо видимые возможности для редактирования.

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

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

15. Печать, сохранение и отправка по email.

Для многих товаров, над покупкой которых обычно долго размышляют (как, например, мобильные телефоны с контрактами) полезны были бы такие возможности, как отправка сравнительной таблицы по email — себе, или другому пользователю. Хотя, это скорее nice-to-have возможность.

16. Сворачиваемые секции.

Длинные таблицы с большим объемом информации сложны для восприятия. Можно сократить количество информации представленное в таблице, убрав детали в сворачиваемые секции.

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

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

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

18. Покажите тултипы, объясняющие специализированные термины принаведении курсора на текст.

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

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

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

20. Панель со скроллбаром.

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

Сравните, насколько это приятнее, чем, например, такой интерфейс, без скроллбара

 

Это перевод статьи Linda Bustos, оригинал расположен по адресу http://www.getelastic.com/20-tips-for-product-comparison-tools/

Напомним, что для создания таких сайтов используйте XML/CSV выгрузки офферов нашей сети.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники
Запись опубликована в рубрике Партнерские магазины, Партнерский маркетинг, Разное. Добавьте в закладки постоянную ссылку.

2 комментария: 20 советов о том как создавать удобные сравнительные таблицы

  1. IGor говорит:

    На базе какого движка можно создать такой сайт с использованием XML/CSV выгрузки? С вашим плагином такого не выходит..

    • GdeSlon говорит:

      IGor, что именно не получается? Обратитесь, пожалуйста, к своему менеджеру — постараемся решить

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

Ваш e-mail не будет опубликован.