Функция сравнения товаров: когда без нее не обойтись и почему

Предоставить пользователям возможность быстро и эффективно сравнивать доступные варианты — одна из основных функций списка товаров.

Основные выводы:

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

Функция сравнения значительно упрощает сопоставление товаров с большим количеством технических характеристик.

Есть 2 аспекта, которые важно реализовать правильно, чтобы оптимизировать процесс выбора товара.

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

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

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

Функция сравнения может значительно облегчить пользователям жизнь, ведь речь идет о наглядном отображении характеристик нескольких товаров рядом на одной странице. Однако наше тестирование UX сайтов электронной коммерции показало, что 17% интернет-магазинов с технически-сложными товарами не имеют такой функции.

Мы расскажем о некоторых результатах нашего исследования и обсудим:

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

1. Почему трудно сравнивать технически-сложные товары прямо в списке товаров

При сравнении технически-сложных товаров прямо в списке пользователи сталкиваются с двумя проблемами:

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

1) Не все характеристики можно показать в карточках товаров

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

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

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

Например, если для одного пользователя было критичным наличие клавиатуры с подсветкой, то для другого — конкретное поколение Wi-Fi-соединения.

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

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

2) Трудно сравнивать товары, которые нельзя просмотреть одновременно

👎🏻 Хотя пользователи могут оценить множество товаров в списке по-отдельности, когда вы предоставляете исчерпывающие сведения о них, как, например, сайт *B&H Photo*, сравнить все ключевые характеристики нескольких товаров будет сложно, поскольку в одном окне просмотра помещается лишь два-три элемента.

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

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

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

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

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

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

2. Как функции сравнения помогают пользователям

👍🏻 "Я никогда не делал этого раньше. Окей, это все, что вам нужно для сравнения, прямо на экране, сразу, вместо того, чтобы переходить с одной страницы на другую или прокручивать страницу туда сюда. Это круто. Это действительно работает. Я думаю, это очень удобно". Посетитель сайта, который раньше не использовал функции сравнения, обнаружил, что эта функция на *B&H Photo* *значительно упрощает сравнение товаров.*

👍🏻 "Тут много информации, и мне это нравится. Чем больше информации, тем проще понять, что это за товар. Например, здесь указано время работы от батареи, графический процессор, размер жесткого диска, тип батареи и вес. Информации много, и это то, что мне нужно. Чем больше информации, тем проще мне принять решение". Этот пользователь хотел сравнить ноутбуки по многочисленным характеристикам на *Staples* *и был рад, что функция сравнения значительно облегчила ему задачу.*

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

Во время тестирования 67% участников использовали функцию сравнения, и оставили о ней много положительных отзывов, например:

"Мне нравится, что я могу сравнить сразу несколько ноутбуков. Это хорошо, ведь я могу сопоставить характеристики всех товаров одновременно, особенно если я ищу конкретные параметры".

"Если все характеристики товаров перечислены на одной странице бок о бок, вы действительно можете тщательно сравнить их".

Хорошо реализованная функция сравнения позволяет пользователям увидеть все технические характеристики до 5 продуктов одновременно.

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

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

3. Как упростить выбор товаров для сравнения

В ходе тестирования мы выявили 2 особенности реализации, которые облегчают процесс добавления товаров в сравнительную таблицу:

Наличие чекбоксов "Сравнить" внутри элементов списка
Постоянно видимое напоминание о том, какие товары были выбраны для сравнения

1) Наличие чекбоксов "Сравнить" внутри элементов списка

👎🏻 *На сайте* *IKEA* чекбоксы выбора товаров для сравнения по умолчанию скрыты (первое изображение). Они появляются, только когда пользователи наводят курсор на карточку товара (второе изображение; третий элемент). В результате некоторые люди и не подозревают о существовании функции сравнения.

👍🏻 "О, да, у них есть функция сравнения. Хорошо, вот этот, этот". Чекбоксы, которые всегда остаются видимыми, информируют пользователей сайта *Office Depot* *о наличии функции сравнения.*

👍🏻 "Прямо под каждым товаром есть чекбокс, с помощью которого я могу их выбрать. Не знаю, почему я этого не сделал. Но если такая возможность есть, я полагаю, это намного проще". Заметные чекбоксы "Добавить, чтобы сравнить" на сайте *B&H Photo* *напоминают пользователям, что они могут сравнивать товары на одной странице.*

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

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

Поэтому чекбоксы "Сравнить" должны быть видны по умолчанию в карточках товаров внутри списка.

Примечание: Раньше мы рекомендовали сделать так, чтобы чекбоксы "Сравнить" появлялись только при наведении. Однако последнее тестирование показало, что чекбоксы должны отражаться вне зависимости от каких-либо действий со стороны пользователей, чтобы они знали о наличии функции сравнения. Преимущества информирования о существовании функции перевешивают негативные последствия "загромождения" карточек товаров.

2) Постоянно видимое напоминание о том, какие товары были выбраны для сравнения

👎🏻 "Это довольно сложно, потому что здесь есть небольшое всплывающее окно... оно исчезает, если вы наводите на него курсор. Всякий раз, когда я перехожу к другому элементу для сравнения, оно появляется, а затем пропадает. И тогда я случайно нажимаю на что-то другое". Этому пользователю сайта *Newegg* было довольно непросто нажать на кнопку "Сравнить" во всплывающем окне, которое появлялось, когда он выбирал товар с помощью чекбокса. Кроме того, невозможно было узнать, сколько товаров было выбрано, пока пользователь не выбирал еще один.

👍🏻 "Товар легко добавить для сравнения. О, и он даже всплывает снизу. Мне это нравится. Теперь у меня есть референс, и я даже могу быстро отменить свой выбор, пока прокручиваю страницу вниз: если я хочу удалить какой-то товар из списка, я могу просто снять выделение прямо здесь, внутри этого маленького окошка. Это здорово. Я такого раньше не видел". Панель, которая появляется после того, как пользователь выбирает товар для сравнения на сайте *B&H Photo*, показывает, какие товары были добавлены и сколько еще можно добавить, а также позволяет перейти к сравнительной таблице с помощью кнопки "Сравнить эти товары".

👍🏻 *Аналогичным образом, панель на сайте* *Office Depot* позволяет пользователям без труда редактировать товары для сравнения и быстро перемещаться в сравнительную таблицу с помощью кнопки “Сравнить”.

Чаще всего в сравнительную таблицу можно добавить от 3 до 5 товаров.

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

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

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

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

4. Функции сравнения на мобильных устройствах

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

Из 38 участников мобильного тестирования, посетивших два сайта с функциями сравнения (Walgreens и B&H Photo), только трое воспользовались указанной функцией на Walgreens, а на B&H Photo она не применялась вообще — несмотря на то, что этот сайт содержит в основном технически-сложные товары, рассчитан на продвинутых пользователей, а некоторые участники тестирования действительно искали на нем способы сравнения товаров.

*Даже если функция сравнения упрощает выбор товаров и их сопоставление на мобильных устройствах, как на сайте* *Home Depot*, небольшое окно просмотра позволяет просматривать только 1 товар без горизонтальной прокрутки (второе изображение), что негативно сказывается на эффективности функции. Кроме того, когда пользователь выбирает товар для сравнения, список товаров частично скрывается — фактически, панель занимает 51% области просмотра (первое изображение).

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

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

Кроме того, чекбоксы не могут занимать слишком много места, поэтому по ним зачастую трудно попасть пальцем, особенно если они меньше минимально допустимого размера 7 мм x 7 мм.

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

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

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

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

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

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

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

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

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

Обеспечьте возможность сравнения технически-сложных товаров

👍🏻 *Пользователи сайта* *Crutchfield* могут без труда выбирать товары для сравнения с помощью чекбоксов "Сравнить", а уже выбранные товары отображаются в фиксированной панели в конце страницы.

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

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

Функции сравнения позволяют пользователям преодолеть те трудности, которые возникают при сопоставлении технически-сложных товаров с большим количеством характеристик в списках товаров: