UX-специалист Nielsen Norman Group Кейт Мейер принес Рекомендации по созданию эффективных сравнительных таблиц товаров и услуг в онлайн-каталогах.
Сравнение – это самое главное действие обо всем, что пользователи делают в Интернете.
В большинстве случаев это необходимый шаг, который человек проходит, прежде чем совершить нужное вам действие, например, купить продукт, подписаться на рассылку новостей, связаться с вами или запросить ценовое предложение.
Первым требованием для реализации функции сравнения является предоставление согласованной информации обо всех сравниваемых продуктах или услугах.
Но когда эта информация распределена по страницам, то стоимость взаимодействия И когнитивная нагрузка начинают увеличиваться: пользователи вынуждены держать информацию в голове, делать заметки, переключаться между вкладками или открывать несколько окон в браузере.
Именно здесь следует ввести сравнительную таблицу – хорошо известную, но часто недооцениваемую или неправильно используемую возможность.
Типичная таблица сравнения использует столбцы для продуктов или услуг и строки для функций.
Таким образом, вы сможете быстро и легко сравнить параметры и функции каждого продукта.
Пример типичной сравнительной таблицы продуктов с сайта keurig.com
Когда вам нужна сравнительная таблица?
Очень часто таблицы сравнения воспринимаются исключительно как инструмент электронной коммерции.Действительно, основные функции такого инструмента предназначены для сравнения потребительских товаров средней и высокой ценовой категории, особенно когда речь идет об электронике (умные микроволновые печи, фитнес-трекеры, пылесосы или автомобили).
Но сравнительные таблицы также хороши для оценки услуг, статуса членства, ценовых пакетов, функций программного обеспечения, стоимость обучения или локации.
Их можно использовать для сравнения аналогичных продуктов внутри одной организации или для сравнения продукта одной организации с продуктом конкурента.
Сравнительные таблицы — гораздо более универсальный инструмент, чем многие о них думают. Чтобы понять, когда использовать сравнительную таблицу, сначала необходимо понять, как люди принимают решения.
В результате покупатели используют некомпенсационный метод принятия решений .
Чтобы сократить количество вариантов, обычно используют один значимый критерий, превосходящий по важности все остальные.
Этот жесткий фильтр помогает пользователю ограничить результаты поиска до разумных пределов.
Фильтры и многоаспектная навигация поддерживать некомпенсационный способ принятия решений.
А для компенсаторного метода принятия решений лучше всего подходят сравнительные таблицы.
С их помощью пользователи могут очень быстро визуализировать и сравнить многие важные характеристики.
Конечно, бывают случаи, когда такой прием окажется ненужным.
Помимо описанного выше некомпенсационного метода принятия решений, сравнительная таблица бесполезна в случаях, когда: Подобные позиции не обязательно являются взаимоисключающими.
В отличие от выбора, например, микроволновой печи или ноутбука, с Zara пользователи, скорее всего, купят более одной рубашки, поэтому магазину одежды не обязательно создавать сравнительную таблицу, чтобы пользователи могли видеть несколько товаров на одной странице и сравнивать их.
.
Продукт или услуга настолько просты, что пользователи не захотят анализировать их характеристики.
Например, кофейная кружка не имеет каких-то особо значимых характеристик, достойных сравнения.
Кого-то, покупающего кружку в интернет-магазине, скорее всего, заинтересует дизайн (возможно, размер), но вряд ли покупатель захочет сравнить подробные характеристики нескольких кофейных кружек.
Товар или услуга очень дешевы или их можно легко заменить.
(например, ручка, бумажные полотенца и т. д.).
В этом случае поведение пользователя будет основано на принцип разумная достаточность, и они вряд ли потратят много времени на анализ вариантов.
Товар или услуга уникальны, и их сложно сравнить с чем-либо еще.
Например, было бы очень сложно придумать набор характеристик, по которым можно было бы сравнивать произведения искусства.
Всякий раз, когда пользователю приходится выбирать между множеством похожих предложений, особенно когда на решение влияет множество факторов, есть отличная возможность реализовать сравнительную таблицу.
Виды сравнительных таблиц
Некоторые сравнительные таблицы являются статическими, то есть содержат предварительно выбранные продукты; другие являются динамичными и позволяют пользователям самим решать, какие элементы сравнивать.Какой тип подойдет вам, зависит от того, насколько велик у вас ассортимент товаров: статические таблицы используются для небольшого (менее пяти позиций) ассортимента товаров, а динамические таблицы — для широкого ассортимента.
Статические таблицы
Если у вас очень мало продуктов, которые пользователи могут сравнивать, вы можете создать предварительные статические таблицы сравнения.Например, Apple продает только пять разных моделей Apple Watch, поэтому компания предоставляет пользователям сравнительную таблицу, когда они сталкиваются с выбором.
Статические таблицы сравнения также обычно хороши для сравнения статусов программ членства или ценовых пакетов.
Добавив этот тип таблицы на свой сайт, вы можете контролировать представление информации на странице.
Например, при необходимости вы можете сменить страницу, изменить высоту или ширину ячеек.
Но учтите, что просто реализовать такую таблицу на сайте недостаточно (как это можно сделать с динамическими таблицами): вам придется обновлять ее каждый раз, когда у вас появится новый товар или услуга.
Убедитесь, что пользователь может найти сравнительную таблицу.
Добавьте ссылку на него в структуру информации контента.
Apple разместила ссылку на такую таблицу во вторичном меню навигации рядом со ссылками на различные модели Apple Watch.
Динамические таблицы
Динамические таблицы позволяют пользователю выбирать, какие элементы он хотел бы видеть в сравнительной таблице.Они уместны в ситуации, когда ассортимент продукции включает более пяти позиций.
С одной стороны, таблицы динамического сравнения хорошо моделируются, если вы со временем предлагаете все больше и больше товаров или меняете ассортимент, с другой стороны, они обычно реализуются на сайтах с помощью плавный макет (гибкая верстка), где внешний вид таблиц невозможно так четко контролировать.
Выбор элементов в таблице динамического сравнения
Существует два распространенных способа разрешить пользователям выбирать элемент для добавления в таблицу: 1. Кнопка или флажок «Сравнить» (флажок), размещаемый непосредственно на страницах товаров.В этом случае пользователи могут выбрать интересующие их товары, а затем перейти на динамически создаваемую страницу сравнения продуктов.
Галочки (слева) и кнопки (справа) — два наиболее распространенных способа выбора товаров для последующего сравнения с помощью интерактивной таблицы.
В целом страницы товаров имеют тенденцию быть перенасыщенными, поэтому при внедрении этих функций разработчики сталкиваются с проблемой: с одной стороны, им нужно сделать так, чтобы кнопка «Сравнить» была сразу видна, с другой — не дайте ему слишком много места на странице.
Лучше всего разместить ее так, чтобы кнопка отображалась в качестве второстепенного действия вверху или внизу страницы или под всеми описаниями продуктов.
Интерактивный инструмент сравнения продуктов Delta появляется только тогда, когда пользователи наводят курсор на продукт. Так что нет смысла это скрывать.
2. Непосредственное манипулирование объектом интереса.
С помощью этого метода пользователи могут щелкать или перетаскивать нужные продукты и добавлять их в сравнительную таблицу.
Это действие обычно возможно либо потому, что, как в примере Garmin ниже, специальный режим сравнения отключает действие, которое обычно происходит при нажатии на продукт, либо потому, что, как в примере с Fitbit, на сайте есть страница, посвященная сравнениям.
.
У Garmin есть кнопка «Сравнить» в самом верху страницы со списком продуктов.
Если вы сначала нажмете эту кнопку, товар будет добавлен в таблицу.
К сожалению, эта серая невзрачная кнопка теряется в пользовательском интерфейсе, поэтому ее очень легко пропустить.
FitBit предлагает семь моделей фитнес-трекеров.
Специальная страница сравнения позволяет покупателям выбирать товары для сравнения.
Такое решение будет непрактичным, если ассортимент товаров очень велик.
Это также может быть бесполезно, если у вас уже есть страницы со списком продуктов.
Одним из преимуществ этого подхода к управлению прямым выбором является возможность отделить фактический процесс сравнения от страницы со списком продуктов, что приводит к более четкому визуальному восприятию.
Отдельная страница сравнения продуктов (например, у Fitbit) — хороший вариант, когда у вас не так много продуктов или предложений и использование традиционного списка продуктов не оправдано.
Самые эффективные решения для сравнительных таблиц
Независимо от того, какой тип сравнительной диаграммы вы выберете, следуйте этим рекомендациям, чтобы помочь пользователям принять правильное решение.
Сравнительная таблица должна содержать не более пяти позиций.
Таблицы сравнения поддерживают компенсаторный метод принятия решений, который люди используют только тогда, когда есть только несколько вариантов для рассмотрения.
Если вам нужно сравнить более пяти товарных позиций, используйте другие механизмы.
Например, фильтры, помогающие пользователям сузить поиск от большого выбора до пяти или менее элементов.
При создании статических таблиц сравнения желательно сохранять простоту.
Если вы не можете ограничить статическую таблицу максимум пятью вариантами, пересмотрите процесс сравнения.
Возможно, статическая таблица сравнения вообще не ваш вариант. Если представить сложную информацию в виде таблицы, то, возможно, пяти вариантов будет слишком много.
При создании динамических таблиц следует уделить дополнительное внимание тому, как будет распределяться макет таблицы и как он будет адаптироваться к пяти SKU. Большинство таблиц динамического сравнения допускают только три или четыре элемента.
Подумайте, сколько текста включить в описание функции и как это повлияет на макет и читаемость текста.
Также не забудьте учитывать размер экрана устройства или браузера, который использует клиент. В таблице, ориентированной на мобильные устройства, вам может потребоваться сократить количество сравниваемых элементов до двух.
С другой стороны, не ограничивайте пользователей, заставляя их сравнивать только два элемента, если у вас достаточно места для большего количества элементов.
Динамическая сравнительная таблица Apple для компьютеров Mac необоснованно не позволяет пользователю сравнивать более двух компьютеров одновременно, даже на экранах очень больших размеров.
Что бы вы ни ограничивали, убедитесь, что вы ясно доносите эту информацию до своих пользователей, чтобы избежать путаницы и ошибок.
И не забудьте предоставить пользователю возможность удалить элемент из сравнения, когда он будет готов сузить свой выбор.
Последовательность важна
Самая большая проблема большинства сравнительных таблиц — это вовсе не дизайн, а содержание.Когда информация о характеристиках продукта отсутствует, является неполной или противоречивой, сравнительные таблицы быстро становятся бесполезными.
Это особенно большая проблема для таблиц динамического сравнения, когда вы имеете дело с большим количеством предложений, в которых доступна информация лишь с незначительно отличающимися метаданными.
В этой сравнительной таблице показаны характеристики четырех различных беззеркальных камер.
Камеры Panasonic имеют гораздо больше метаданных, чем другие.
В данном случае сравнение бессмысленно.
В этой сравнительной таблице подробно описаны характеристики четырех статусов членства, доступных на SmugMug. Варианты сравнительной таблицы — не место для демонстрации уникальных особенностей вашего сайта.
Лучше всего сохранять параметры эквивалентными и не отвлекать пользователя при выявлении различий.
Обезжиренная поддержка
Сравнение плюсов и минусов различных продуктов — когнитивно сложный процесс.И вам нужно убедиться, что пользователи могут сосредоточиться на самом важном.
Самый эффективный способ сделать это — составить таблицу так, чтобы можно было быстро просмотреть ее на предмет различий и сходств, а также ключевых слов.
Придерживайтесь стандартной компоновки таблицы: варианты товаров размещаются в столбцах, характеристики в строках, заголовки строк слева, заголовки столбцов вверху.
Используйте одинаковое выравнивание текста в каждом столбце.
Williams Sonoma проделала очень хорошую работу по классификации сковород и размещению их в этой статической сравнительной таблице.
К сожалению, горизонтальные заголовки строк не являются стандартными, что затрудняет их просмотр.
Узкие абзацы также затрудняют понимание.
Если вы используете текст внутри сравнительных таблиц, не пишите слишком много.
По возможности избегайте полных предложений.
Цветовое кодирование также может помочь — вы можете слегка выделить поля каждого столбца или выделить текст в ячейках цветом.
Постарайтесь сохранить достаточный контраст, не жертвуя при этом читабельностью.
FitBit.com использует разные цвета флажков в каждом столбце, чтобы помочь пользователям четко различать особенности каждого продукта.
Такое цветовое выделение не работало бы, если бы характеристики были более сложными и не могли быть выражены в таблице с галочками.
techsmith.com использует столбцы с цветовой кодировкой, чтобы показать различные функции, доступные в программных предложениях, а также платформу, на которой они работают. Также очень важно четко обозначить строки, чтобы пользователи могли легко проверить, к какому признаку относится та или иная ячейка.
Четкие границы, тонкое выделение или дополнительное пространство помогут сделать эти строки более четкими и визуально отделить их друг от друга.
Прикрепленные заголовки столбцов
Когда вы имеете дело с длинными списками функций, рекомендуется закрепить заголовки столбцов, чтобы пользователь мог легко прокручивать страницу вниз.В противном случае пользователи быстро забудут, в какой колонке какой товар указан.
Disney предлагает динамическую сравнительную таблицу, которая поможет пользователю сравнить различные годовые абонементы.
К сожалению, в таблице не записаны заголовки столбцов, поэтому пользователям приходится запоминать их или прокручивать страницу вверх, чтобы проверить, какой столбец предназначен для Disney Platinum Plus Pass, а какой — для Disney Platinum Pass.
Объяснение сложных терминов
Таблицы сравнения должны содержать информацию, действительно важную для пользователей.Не закидывайте в таблицу все доступные метаданные, это только усложнит задачу пользователям.
Постарайтесь дать определение незнакомым терминам в контексте и связать неясные характеристики с чем-то конкретным.
Хорошим примером является страница Amazon портативного энергобанка Anker.
Сравнительная таблица продуктов производителя переводит технические характеристики на язык, понятный среднему потребителю.Сравнительная таблица Anker содержит характеристики, которые очень полезны для сравнения портативных блоков питания: емкость аккумулятора в ампер-часах, скорость зарядки и вес.
Но что действительно делает эту таблицу очень хорошей, так это то, что она переводит все эти характеристики в понятия, знакомые среднестатистическому покупателю.
«Емкость аккумулятора составляет 3350 ампер-часов — что примерно равно 1,2 заряда iPhone 6».
«Размеры 3,5 х 0,9 х 0,9 дюйма — примерно размер тюбика помады».
«Вес составляет 2,7 унции, что соответствует весу яйца».
Среднестатистическому потребителю может быть трудно представить, что ощущают 2,7 унции, но он почти наверняка может представить вес яйца.
Еще один эффективный способ сделать неясные характеристики значимыми для пользователя — добавить ссылки типа «Дополнительная информация» или предоставить контекстные подсказки, которые содержат определения или пояснения.
Активируемая при наведении подсказка объясняет значение характеристик без добавления дополнительного текста на саму страницу.
Персональный контроль деталей
Несмотря на все приведенные выше советы, если у вас много продуктов с множеством функций, пользователю все равно будет сложно их сравнивать.Ему, вероятно, придется прокручивать вперед и назад.
Для этого учтите возможность того, что пользователь сможет включить в сравнение только те характеристики товара, которые ему нужны.Раскрывающиеся строки — самый простой способ реализовать это.
Кроме того, дайте пользователю возможность скрыть те строки, где характеристики товаров полностью совпадают – пусть будет видна только разница.
В своей динамической таблице продуктов Samsung предлагает значительные возможности настройки процесса сравнения.
Пользователи могут скрывать или раскрывать категории характеристик, а также выбирать конкретные параметры, чтобы в таблице отображались только те строки, которые им интересны.
Однако в этой таблице столбцы неровные, что затрудняет ее беглый просмотр.
Он также имеет слишком много возможностей для настройки отображаемых строк и, похоже, страдает от раздувания статистики.
Совершенно непонятно, зачем пользователю при сравнении товаров устанавливать фильтр «Только сходства».
Crutchfield позволяет пользователям скрывать одинаковые характеристики для всех сравниваемых продуктов, нажав кнопку «Скрыть одинаковые характеристики».
Если все три динамика имеют одинаковый гарантийный срок, то, скорее всего, эта информация не повлияет на выбор пользователя.
При создании простых статических таблиц стоит рассмотреть возможность предоставления более упрощенного варианта – только с теми характеристиками, которые, по вашему мнению, будут наиболее важны для покупателя.
Однако при этом оставьте доступ к более продвинутой опции.
Для своих четырех тарифных планов SmugMug представляет очень упрощенную сравнительную диаграмму «моментальных снимков».
Более подробная таблица доступна на другой странице.
Механизм сравнения для мобильных устройств
Стоит помнить, что на маленьких экранах одновременно будет видно меньше строк, а значит, кратковременная память пользователя будет испытывать большую нагрузку.Поэтому соблюдение всех вышеперечисленных рекомендаций в случае с мобильными платформами еще важнее.
Если сравнительная таблица для мобильных устройств не подходит для продукта, который вы предлагаете, возможно, имеет смысл подумать о том, как преобразовать ее в вкладки или списки для экранов меньшего размера.
Например, вы можете превратить столбцы во вкладки.
Здесь пользователи не смогут полноценно сравнивать сразу два товара, как это позволяет полноразмерная таблица, но, по крайней мере, они смогут переключаться между товарами быстрее и проще, чем если бы им приходилось пролистывать информацию или переключаться между вкладками.
в мобильном браузере.
Золотое правило сравнительных таблиц
Главное – постараться сделать всю работу за покупателя.Не замедляйте страницы с нестандартными или слишком длинными таблицами повторяющейся информации, не заставляйте клиентов держать информацию в памяти и заставляйте их проверять значение терминов, с которыми они не знакомы.
Сравнительная таблица – это инструмент, который позволяет каждому пользователю найти тот вариант, который ему подходит. У вас может возникнуть соблазн манипулировать клиентами, предлагая более дорогой вариант, но честное представление вашей продукции принесет пользу вашей компании в долгосрочной перспективе.
Не следует манипулировать своими пользователями, тогда вы не потеряете их доверие.
Многие клиенты сразу распознают манипуляцию, что значительно снижает
кредит доверия на ваш сайт. Когда люди покупают то, что для них лучше, они с большей вероятностью будут удовлетворены и будут рекламировать ваш бренд друзьям и семье (что увеличивает индекс потребительской лояльности Ваша компания).Помимо оценки следующего клика, вы также должны спрогнозировать следующий год: чем больше кто-то ценит свое текущее взаимодействие с вашим сайтом, тем больше вероятность, что он превратится в лояльный вернувшийся пользователь .
-
Мой Опыт Реанимации Жесткого Диска
19 Oct, 24 -
Теги H4, H5, H6 В Комментариях
19 Oct, 24 -
Логика Английских Времен
19 Oct, 24
