1 3 1160x597 - UX-рекомендации по улучшению инструмента «Сравнение товаров»

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

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

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

В этой статье мы обсудим результаты нашего инструмента «Сравнить». В частности, мы обсудим:

  • 3 особенности, которые помогут решить, действительно ли инструмент «Сравнить» нужен определенным сайтам.
  • 3 UX-требования к инструментам «Сравнить»

3 особенности, которые помогут решить, действительно ли нужен инструмент «Сравнить»

Хотя инструменты сравнения зачастую и полезны, они не всегда нужны конкретным сайтам или продуктам. Наш сравнительный анализ показывает, что в настоящее время из 60 крупнейших сайтов электронной коммерции 38% предлагают данный инструмент. Этот показатель остался практически неизменным с 2015 года, когда мы впервые начали отслеживать его. Тогда эта цифра составляла 40%.

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

Поэтому, прежде чем решить нужен ли вашему сайту инструмент «Сравнить» (или необходим ли его редизайн), следует учесть 3 важные особенности:

  1. Существуют ли проблемы целостности данных о продукте (52% сайтов имеют проблемы)
  2. Являются ли элементы списка товаров эффективными с точки зрения конечного пользователя (46% сайтов имеют проблемы)
  3. Имеет ли это смысл для рассматриваемой вертикали конкретного продукта
UX-рекомендации по улучшению инструмента «Сравнение товаров»

1) Достаточна ли для сравнения целостность данных? «Это немного раздражает, потому что, вы сравниваете товары, и немного сбивает с толку, что они используют разные единицы измерения», – объяснил пользователь, как только он наконец понял, почему размеры двух камер, которые он сравнивал на сайте Tesco, казались такими разными. Один из продуктов указан в миллиметрах, а другой – в сантиметрах.

Во-первых, правильные данные о продукте являются основой любого инструмента «Сравнить». Если есть проблемы с данными о продукте (они отсутствуют, не структурированы или не синхронизированы), то инструмент «Сравнить» просто не будет пригоден для использования конечными пользователями, поскольку зависит от данных, которые выделяет. Следовательно, целостность данных абсолютно необходима, когда речь идет об инструментах сравнения. К сожалению, наш сравнительный анализ целостности данных показывает, что в настоящее время 52% сайтов электронной коммерции не обрабатывают данные о продуктах своих поставщиков перед их использованием на своем собственном сайте.

Если целостность данных имеет проблемы, например, из-за необработанных спецификаций продуктов, предоставленных поставщиком, не тратьте время на внедрение инструмента «Сравнить». А, если вы уже это сделали, рассмотрите возможность удаления этой функции, поскольку она может ввести пользователей в заблуждение.

UX-рекомендации по улучшению инструмента «Сравнение товаров»

2) Достаточно ли хорош интерфейс списка продуктов? «Здесь я не получаю никакой информации, кроме цены и названия», – сказал пользователь, когда искал на сайте Zappos сумку, которая подошла бы к его ноутбуку. Хотя функция сравнения могла бы помочь, в данном случае достаточно было добавить в информацию элемента списка атрибуты, относящихся к категории, (например, размер ноутбука). Это значительно уменьшило бы необходимость в инструменте «Сравнить».  

Во-вторых, инструменты «Сравнить» не должны заменять неэффективные элементы списка товаров.

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

Вместо того, чтобы полагаться на инструмент «Сравнить», добавление правильных атрибутов элемента списка для конкретной категории часто решает проблемы. Однако наш сравнительный анализ интерфейса элементов списка показывает, что 46% сайтов не отображают атрибуты продукта, которые больше всего нужны пользователям. Подробнее эта проблема описана в нашей статье «Какую информацию отображать в списках продуктов — 46% совершат ошибку». Вместо того чтобы решать проблемы списка продуктов дизайнеры пытаются лечить их симптомы при помощи инструмента «Сравнить». Особенно для менее ориентированных на характеристики отраслей и продуктов, когда часто достаточно несколько ключевых атрибутов, чтобы пользователи могли сравнить продукты непосредственно на странице списка товаров.

UX-рекомендации по улучшению инструмента «Сравнение товаров»

3) Имеет ли смысл инструмент «Сравнить» для вертикали продукта? Многие вертикали характеристик продуктов, как у усилителей на сайте Musician’s Friend, выигрывают от использования инструментов сравнения, позволяющих «продвинутым пользователям» эффективно сравнивать спецификации нескольких различных продуктов.

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

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

Для этих типов продуктов инструмент «Сравнить» может дать пользователям возможность очень структурированно рассмотреть доступные варианты (что подходит для определенной группы пользователей).

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

3 UX-требования для инструментов сравнения

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

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

Тестирование выявило 3 требования, гарантирующие, что инструмент «Сравнить» будет хорошо работать в списке продуктов:

  1. В десктопной версии показывайте ссылку «Сравнить» только при наведении курсора
  2. Предоставьте пояснение в подсказке
  3. Обеспечьте легкий и удобный доступ к интерфейсу сравнения
UX-рекомендации по улучшению инструмента «Сравнение товаров»
UX-рекомендации по улучшению инструмента «Сравнение товаров»

1) В десктопной версии показывайте ссылку «Сравнить» только при наведении курсора. Этот макет иллюстрирует отображение флажка «Сравнить» только для элемента списка, на который в данный момент наведен курсор. Обратите внимание, что флажок «Сравнить» отсутствует в элементах списка (первое изображение), пока пользователь не наведет курсор на определенный элемент списка (второе изображение). Ни один из сайтов в нашем тесте не отображает опцию «Сравнить» только для элемента списка, на который в данный момент наведен курсор, (вместо этого на всех сайтах этот параметр отображается постоянно).

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

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

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

UX-рекомендации по улучшению инструмента «Сравнение товаров»

2) Предоставьте пояснительный текст в виде подсказки. Во время тестирования некоторые пользователи ошибочно принимали ссылки и кнопки «Сравнить» в элементах списка, за другую функцию. Например, сравнение цен за пределами сайта или настройки продукта, или просто предполагали, что нажатие на ссылку «Сравнить» приведет их непосредственно на страницу продукта. Добавление пояснительного текста в виде всплывающей подсказки (как показано здесь), наряду с использованием флажка, может помочь лучше идентифицировать ссылку «Сравнить».

2) Предоставьте пояснительный текст в виде подсказки. Второй момент заключается в том, чтобы при наведении курсора появлялась всплывающая подсказка. Подсказка должна кратко объяснить инструмент «Сравнить» – то есть, как он работает и чем он хорош.

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

3) Обеспечьте легкий и заметный доступ к интерфейсу сравнения. В то время как сайт Walgreens постоянно отображает ссылку «Сравнить» и не предоставляет пояснительный текст всплывающей подсказки, функцию «Сравнить» очень трудно пропустить, если щелкнуть флажок «Сравнить». Потому что он расширяется в нижней части интерфейса. Пользователям также предоставляются аналогичные продукты для сравнения, если они выбирают только один – полезный способ указания пользователям других соответствующих продуктов, которые могут их заинтересовать.

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

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

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

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

Убедитесь, что инструмент «Сравнить» помогает, а не мешает

UX-рекомендации по улучшению инструмента «Сравнение товаров»

Если инструмент «Сравнить» легко найти в списке продуктов, он может привести к интерфейсу, специально разработанному для облегчения сравнения продуктов (как видно из статьи Джона Льюиса). Перечисление спецификаций для аналогичных продуктов, позволяет пользователям тщательно обдумать доступные им варианты.

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

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

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

Чтобы инструмент «Сравнить» было легко найти, нужно:

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

Правильно реализованный инструмент «Сравнить» поможет пользователям найти подходящий продукт, что повысит вероятность того, что они его купят.

Оригинал: Edward Scott

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

Как упростить свой дизайн, большое руководство

Свыше 20 понятных иллюстрированных примеров Компании постоянно стремятся создавать простые и полезные…

5 способов сделать кнопку призыва к действию интуитивно понятной

Нажать или не нажать – это вопрос, который приходит в голову пользователю,…