- Статьи
- 15 мин на чтение
- 22
Сравнительные таблицы для товаров, услуг и характеристик
Резюме: Применяйте этот универсальный инструмент с графическим интерфейсом, чтобы поддержать пользователей, когда им нужно принять решение, которое включает в себя рассмотрение нескольких характеристик среди небольшого количества предложений. Консистентность контента, удобство сканирования и простой дизайн — вот некоторые из наиболее важных условий для создания эффективных сравнительных таблиц.
Сравнение — одно из самых важных действий, которые пользователи совершают в Интернете. Во многих случаях это необходимый шаг, который предшествует совершению посетителями сайта желаемого действия, например, покупке продукта, подписке на членство в клубе, контакту с вами или запросу цены.
Однако зачастую эта важная информация находится на разных страницах. Это вынуждает пользователей запоминать её или открывать несколько окон или вкладок. Именно здесь на помощь приходит сравнительная таблица.
Содержание:
Когда нужна сравнительная таблица
Когда сравнительная таблица не нужна
Статические сравнительные таблицы
Динамические сравнительные таблицы
Лучшие практики применения сравнительных таблиц
Золотое правило сравнительных таблиц
Определение
Сравнительная таблица — таблица, где в столбцах располагают товары (или услуги), а в строках — их характеристики. Она позволяет быстро и легко сравнивать свойства и характеристики каждого предложения.
Базовая сравнительная таблица в самом распространённом виде: каждый товар находится в отдельном столбце, а для каждой характеристики товара выделена отдельная строка
Когда нужна сравнительная таблица
Часто сравнительные таблицы ошибочно воспринимают исключительно, как инструмент для сектора электронной коммерции. Действительно, чаще всего сравнительные таблицы используют для сравнения товаров среднего и дорогого ценового сегмента, особенно электроники: микроволновых печей, фитнес-трекеров, пылесосов или автомобилей. Но, помимо товаров, сравнительные таблицы также хорошо подходят для сравнения:
- Услуг
- Уровней членства
- Тарифных пакетов
- Функций в приложениях
- Стоимости обучения
- Локаций
Их используют, чтобы сравнить аналогичные товары, которые предлагает одна и та же организация, или товары одной организации с товарами конкурентов. Сравнительная таблица — гораздо более универсальный инструмент, чем мы привыкли думать.
Правила принятия решений: компенсаторные и некомпенсаторные
Когда людям приходится выбирать из множества альтернатив, трудно сопоставить плюсы и минусы каждой отдельной альтернативы. В результате люди принимают некомпенсаторные решения. Другими словами, за основу для принятия решения они берут только один фактор.
Например, пользователь, которых желает купить новый автомобиль, может отсеять все машины дороже 20 000 долларов, даже если некоторые из них лишь немного превышают его бюджет. Этот необязательный фильтр помогает покупателю ограничить набор результатов до разумного предела.
Когда людям приходится выбирать из небольшого набора альтернатив — обычно не более 5-7, они, как правило, принимают компенсаторные решения. То есть они рассматривают индивидуальные преимущества каждого товара и сравнивают их плюсы и минусы по ряду критериев.
Например, пользователь, который выбирает новый ноутбук, может быть готов рассмотреть более тяжелый девайс, если тот дольше работает в автономном режиме и обладает лучшей вычислительной мощностью.
Фильтры и фасеты поддерживают некомпенсаторное принятие решений. В отличие от них, для принятия компенсаторных решений лучше всего подходят сравнительные таблицы. Они позволяют пользователям легко увидеть и сразу же сравнить несколько важных характеристик.
Когда сравнительная таблица не нужна
Безусловно, есть случаи, когда сравнительная таблица не нужна. Помимо ситуации с некомпенсаторным принятием решений, о котором мы говорили выше, сравнительная таблица не понадобится, если товары сравнения:
- Не взаимоисключающие
- Простые
- Дешёвые или заменяемые
- Уникальные или их трудно сравнить
За этими исключениями применение сравнительной таблицы ограничивается только вашим воображением. В любой момент, когда пользователи хотят сделать выбор между похожими предложениями, создайте сравнительную таблицу. Особенно, если люди принимают решение с учётом множества факторов.
Не взаимоисключающие
Похожие товары необязательно взаимоисключающие. Возможно, покупателю нужна только одна микроволновая печь или ноутбук. Но это правило не относится к таким товарам, как рубашки, игрушки или лампочки. Скорее всего, покупателю не понадобится сравнительная таблица, чтобы выбрать платье, потому что он может не ограничиться одним.
❌ amazon.com: Сравнительная таблица для похожих платьев не нужна
✅ amazon.com: Вместо сравнительной таблицы на странице товара с платьем Amazon предлагал быстрый способ добавить к заказу похожее платье
Простые товары
Когда товар или услуга очень простые, пользователям нет смысла анализировать их характеристики. Например, у кофейной кружки не так много значимых характеристик, которые можно сопоставить друг с другом. Тот, кто покупает кофейную кружку в Интернете, может заинтересоваться стилем (и, возможно, размером), но, вероятно, не захочет сравнивать множество характеристик нескольких кофейных кружек.
Сравнительные таблицы, как правило, не нужны для товаров, которые люди выбирают в первую очередь по эстетическим соображениям. Это касается мебели, домашнего декора, одежды или аксессуаров.
Дешёвые или заменяемые товары
Если товар или услуга дешёвые или их легко заменить, пользователи, скорее всего, будут рады не тратить много времени на анализ альтернатив. Например, нет смысла сравнивать разные рулоны бумажных полотенец.
❌ jetpens.com: Не имеет смысла сравнивать так много характеристик такого простого и недорогого предмета, как пластиковая ручка
Уникальные товары, которые трудно сравнить
Наконец, сравнительные таблицы не подходят в случае уникальных товаров или услуг, которые трудно сравнить с другими. Например, трудно придумать набор характеристик для сравнения произведений искусства.
Типы сравнительных таблиц
Существует два типа сравнительных таблиц:
- Статические сравнительные таблицы включают заранее выбранные товары и лучше всего подходят для небольших подборок товаров — менее 5.
- Динамические сравнительные таблицы позволяют пользователям самим решать, какие товары они хотят сравнить. Они лучше всего подходят для больших подборок товаров.
Статические сравнительные таблицы
Если есть несколько товаров, которые нужно сравнить, вы можете создавать статические сравнительные таблицы.
Например, в последнем релизе Apple представлены только три модели Apple Watch. Поэтому пользователям, которые пытаются определиться с выбором, Apple предлагает готовую сравнительную таблицу.
✅ apple.com: Поскольку в продаже есть только три модели последних Apple Watch, все три Apple представила в виде сравнительной таблицы
Хорошее эмпирическое правило — используйте этот подход, если у вас не более пяти предложений. Позже в статье мы рассмотрим ограничение по количеству товаров для сравнения. Статические сравнительные таблицы обычно хорошо работают для сравнения уровней членства или тарифных пакетов.
При такой реализации сравнительной таблицы можно контролировать отображение информации на странице.
Например, вы можете изменить текст, чтобы он соответствовал пространственным ограничениям одной ячейки. Однако обратите внимание, что такая реализация не так легко масштабируется, как в динамических сравнительных таблицах. Вам придётся обновлять сравнительную таблицу, если вы внесёте в неё новый продукт или услугу.
✅ apple.com: Убедитесь, что пользователи могут легко найти статическую сравнительную таблицу. Для этого включите ссылку на неё в информационную архитектуру в качестве пункта меню. Apple включила ссылку на статическую сравнительную таблицу во вторичное навигационное меню Apple Watch, рядом со ссылками на различные модели Apple Watch
Динамические сравнительные таблицы
Динамические сравнительные таблицы позволяют пользователям выбирать, какие товары они хотят видеть в таблице. Они уместны, если товаров или услуг более 5.
Хотя динамические сравнительные таблицы хорошо масштабируются по мере увеличения или изменения набора предложений, обычно их реализуют с помощью перетекающего макета. К тому же их внешний вид невозможно контролировать так же тщательно, как внешний вид статических таблиц.
✅ tesla.com: На сайте Tesla с помощью динамической таблицы пользователи могли сравнивать различные модели Tesla
Выбор элементов в динамической сравнительной таблице
Есть два популярных способа дать пользователям возможность выбрать, какие элементы добавить в таблицу. Они включают: кнопки «Сравнить» или чекбоксы, а также прямое управление интересующими элементами.
Кнопки «Сравнить» или чекбоксы
Кнопки «Сравнить» или чекбоксы появляются непосредственно на страницах каталога. С помощью этого подхода пользователи могут выбрать интересующие их товары, а затем перейти на страницу с созданной динамической сравнительной таблицей.
Чекбоксы (слева, homedepot.com) и кнопки (справа, lowes.com) — два наиболее распространённых способа, которые позволяют пользователям отбирать товары для интерактивной сравнительной таблицы
Каталог с товарами обычно перегружен, поэтому одна из основных задач такой реализации — сделать кнопки «Сравнить» заметными, но при этом не отводить для них слишком много места на странице. Наиболее безопасно разместить кнопки «Сравнить» в виде второстепенных кнопок действий, либо в верхней и нижней частях страницы, либо под описанием товаров.
Прямое управление товарами
С помощью этого подхода пользователи могут кликнуть или перетащить товары, которые хотят добавить в сравнительную таблицу. Обычно такое действие возможно потому, что, как в примере Garmin ниже, специальный режим сравнения отключает обычное действие клика по товару. Можно также добавить отдельную сравнительную страницу в правом нижнем углу, как показано на примере.
❌ garmin.com: Несмотря на то, что серая прозрачная кнопка сливается с интерфейсом и её не так просто обнаружить, этот пример Garmin не так уж плох. В верхней части каталога находится кнопка «Сравнить». После её активации, нажатие на карточку с товаром позволяет добавить его в сравнительную таблицу и препятствует переходу на страницу с подробной информацией о нём.
Одно из преимуществ такого подхода к выбору — возможность отделить сравнительную страницу от страницы каталога и сделать её визуально чище.
Отдельная страница для сравнения, как у Fitbit — хороший вариант, когда у вас недостаточно товаров или предложений, чтобы применить традиционную страницу каталога.
Лучшие практики применения сравнительных таблиц
Независимо от того, какой тип сравнительной таблицы вы выберете, следуйте этим лучшим практикам, чтобы поддержать пользователей в принятии решения.
Используйте сравнительные таблицы для сравнения не более 5 товаров
Сравнительные таблицы поддерживают компенсаторное принятие решений, в котором люди участвуют только тогда, когда им нужно рассмотреть относительно небольшое количество вариантов. Если нужно сравнить более 5 вариантов, добавьте другие алгоритмы, например, фильтры. Так вы поможете пользователям сузить большой набор вариантов до 5.
В случае статичных сравнительных таблиц делайте выбор в пользу простоты. Если вы не можете привести статическую таблицу к менее 5 вариантам для сравнения, подумайте над тем, а стоит ли вообще её делать. В зависимости от сложности информации, которую вы представляете, может оказаться, что даже 5 вариантов — слишком много.
В случае динамических сравнительных таблиц подумайте, будет ли макет изящно масштабироваться до 5 элементов, если у пользователей будет возможность выбирать, какими будут эти 5 элементов. Большинство динамических сравнительных таблиц допускают сравнение только 3-4 элементов. Подумайте, какой объём текста нужно будет включить в описание характеристик, и как это отразится на макете и удобстве восприятия.
Также учитывайте размер устройства или браузера пользователя. Возможно, в случае мобильных интерфейсов придётся сократить количество представленных в таблице элементов до двух. С другой стороны, если у вас есть место для отображения большего количества элементов, не заставляйте пользователей сравнивать только два элемента.
❌ Динамическая таблица Apple для компьютеров Mac неоправданно ограничивала пользователей в сравнении двух товаров даже при очень больших размерах экрана. Разрешение монитора в примере выше составляет 3008 × 1692
Каким бы ни было ваше ограничение, убедитесь, что вы чётко рассказали о нём пользователям, чтобы избежать путаницы и ошибок. И не забудьте разрешить покупателям удалять варианты из сравнительной таблицы по мере того, как они будут сужать свой выбор.
Будьте консистентны
Основная проблема большинства сравнительных таблиц заключается не в дизайне, а в контенте. Если информация о характеристиках отсутствует, она неполная или непоследовательная в аналогичных вариантах, удобные сравнительные таблицы быстро становятся бесполезными. Это особенно проблематично в случае динамических сравнительных таблиц, когда вы имеете дело со множеством элементов, метаданные которых лишь слегка отличаются друг от друга.
❌ bestbuy.com: В этой сравнительной таблице представлены характеристики двух разных камер, которые продаёт Best Buy. Характеристик камеры Sony Alpha 7 намного больше. Поддерживать характеристики в актуальном состоянии бывает непросто, особенно когда компании продают множество товаров от разных производителей. Однако если информация обо всех сравниваемых товарах неполная, то её можно вообще не включать в сравнительную таблицу.
❌ smugmug.com: В этой сравнительной таблице подробно описаны возможности четырёх уровней членства в SmugMug. Причём в каждом столбце указано разное значение для характеристики «Реклама и спам»: Zip, Zero, Zilch и Nada. Значения в сравнительных таблицах — не лучшее место для демонстрации индивидуальности сайта. Лучше оставить эти значения эквивалентными и не отвлекать пользователей, пока они ищут различия
Поддерживайте удобство сканирования
Сравнение плюсов и минусов различных товаров — процесс, который требует больших когнитивных усилий. Чтобы пользователи могли сосредоточиться на главном, лучше сделать таблицу удобной для сканирования на предмет различий, сходств и ключевых слов.
Придерживайтесь стандартного макета таблицы: предложения располагайте в столбцах, их характеристики — в строках. Названия строк размещайте слева, а названия столбцов — сверху. Консистентно выравнивайте текст в каждом столбце.
❌ williams-sonoma.com: Дизайнеры сайта Williams Sonoma проделали хорошую работу по классификации кастрюль в этой статичной сравнительной таблице. К сожалению, горизонтальные заголовки строк выглядят нестандартно и мешают сканированию. Узкие абзацы в разделе «ОТЛИЧИТЕЛЬНЫЕ ОСОБЕННОСТИ» (DISTINGUISHING FEATURES) неудобны для сканирования и чтения
Если вы используете текст в сравнительных таблицах, делайте его коротким. По возможности избегайте полных предложений.
Также может помочь цветовое кодирование — лёгкое затенение фона в каждом столбце или окрашивание текста в ячейках. Убедитесь, что вы сохраняете достаточный контраст и не жертвуете удобством восприятия.
✅ В столбцах таблицы FitBit.com галочки окрашены в другой цвет. Это помогает пользователям чётко различать характеристики каждого товара. Такой подход к цветовому кодированию не очень хорошо работает для более сложных значений характеристик, которые невозможно отобразить в виде галочек
✅ На сайте techsmith.com столбцы окрашены в разные цвета, чтобы показать различные возможности программных продуктов, а также платформы, на которых они могут использоваться
Также важно чётко обозначить строки, чтобы пользователи могли легко определить, к какой характеристике относится та или иная ячейка. Особенно при использовании таких символов, как галочки, которые не могут считываться без привязки к характеристике. Границы, затенение или дополнительные интервалы помогут сохранить чёткость и обособлённость строк.
Закреплённые заголовки столбцов
Закрепляйте заголовки столбцов по мере прокручивания их пользователем, особенно если речь идёт о длинных списках характеристик, которые занимают несколько экранов. Кратковременная человеческая память ограничена, и пользователь легко забудет, в каком столбце какой товар находится.
❌ adobe.com: Adobe предлагает статичную сравнительную таблицу, чтобы клиенты могли сравнить различные годовые тарифные планы. К сожалению, заголовки столбцов они не закрепили, поэтому пользователям приходилось запоминать названия столбцов или прокручивать страницу назад, чтобы проверить, что обозначает каждый столбец
Значимые характеристики
Сравнительная таблица должна содержать действительно важные для пользователей характеристики. Не стоит просто добавлять в таблицу все имеющиеся метаданные, потому что это усложнит людям жизнь.
Старайтесь как можно чаще давать определение незнакомым терминам в контексте и связывать расплывчатые характеристики с чем-то конкретным.
Например, в сравнительной таблице Anker есть характеристики, полезные в контексте сравнения портативных зарядных устройств: ёмкость аккумулятора в mAh, скорость зарядки и вес. Что действительно делает эту сравнительную таблицу хорошей, так это тот факт, что она переводит эти характеристики на понятный для пользователя язык. Ёмкость аккумулятора составляет 3350 мАч, что примерно равно 1,2 заряда iPhone 6. Размер 3,5 x 0,9 x 0,9 дюйма, по размеру сопоставим с тюбиком губной помады. Вес — 2,7 унции, что сопоставимо с весом яйца. Среднестатистическому потребителю трудно представить себе, что такое 2,7 унции, но он наверняка может представить себе вес яйца.
✅ amazon.com: В сравнительной таблице товаров производителя технические характеристики переведены на язык, понятный среднестатистическому потребителю
Ещё один эффективный способ придать смысл непонятным характеристикам — включить ссылки на дополнительную информацию или контекстные всплывающие подсказки с определениями или уточняющей информацией.
✅ dropbox.com: Всплывающая подсказка, которая появляется при наведении курсора, поясняет значение характеристик и не добавляет на страницу лишний текст
Предоставьте пользователям контроль
Даже если вы хорошо поработали над тем, чтобы контент было удобно сканировать, а заголовки закрепили, пользователям может быть трудно сравнивать товары с большим количеством характеристик, особенно если эти характеристики занимают несколько экранов. В таких ситуациях людям приходится прокручивать страницу вперёд и назад, сравнивая плюсы и минусы разных товаров.
Чтобы сделать задачу управляемой, позвольте пользователям выбирать, какие именно характеристики они хотят видеть в таблице. Строки, которые можно сворачивать, легко реализуют эту функцию.
В качестве альтернативы, позвольте пользователям скрывать строки, в которых все товары похожи, и показывайте только различия.
✅ bestbuy.com: В этой сравнительной таблице, выбрав переключатель «Показать различия» (Highlight Differences), пользователи могут легко увидеть различия между товарами, строки которых выделены жёлтым цветом
Для простых статических сравнительных таблиц можно представить упрощённую таблицу с теми характеристиками, которые, по вашему мнению, будут наиболее важны для пользователей. Но при этом стоит предоставить доступ к более детальной таблице.
✅ smugmug.com: для быстрого просмотра на сайте SmugMug представлена упрощенная сравнительная таблица с тремя вариантами тарифных планов
smugmug.com: Гораздо более полная сравнительная таблица доступна на другой странице
Упростите сравнение в мобильных интерфейсах
Некоторые сайты просто убирают функцию сравнения в мобильных версиях. Если это возможно, постарайтесь поддерживать некоторый уровень сравнения в мобильных версиях, но вряд ли в сравнительной таблице вы сможете показать более 2 товаров одновременно. Помните, что на небольших экранах одновременно будет видно меньше строк, а нагрузка на кратковременную память пользователя будет больше. Поэтому следование предыдущим рекомендациям, в частности, сделать текст хорошо сканируемым и дать пользователям возможность выбирать, что отображать, будет ещё более важным в случае мобильных версий.
Если предложения из сравнительной таблицы выглядят плохо на мобильных устройствах, преобразуйте таблицу в табы или списки для маленьких экранов. Только помните, что эти форматы не поддерживают компенсаторное принятие решений, поскольку пользователям придётся запоминать характеристики каждого товара, чтобы взвесить все «за» и «против».
✅ shopify.com: Одна из стратегий, которая делает сравнительные таблицы рабочими в мобильных интерфейсах, — преобразование столбцов во вкладки. Это означает, что пользователи не смогут проводить сравнение «бок о бок», как в полной таблице, но, по крайней мере, они смогут быстрее переключаться между товарами, чем если бы им пришлось прокручивать страницу или переключаться между вкладками мобильного браузера
Золотое правило сравнительных таблиц
Подведём итог в отношении рекомендаций, которые мы здесь перечислили: прежде всего, делайте работу за пользователя. Не тормозите их нестандартными или слишком длинными таблицами с повторяющейся информацией, не просите их запоминать информацию и не заставляйте их гуглить незнакомые термины.
Сделайте решения пользователей максимально простыми: вы будете довольны, а они — счастливы.
Перевод статьи Why You Should Never Split Text Field Inputs из блога nngroup
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- nngroup
