Если товары значительно отличаются, то они должны быть представлены в каталоге на отдельных карточках товара; параметры одного товара следует отображать на странице товара.
Для 5-го выпуска серии отчетов об опыте взаимодействия пользователей на сайтах электронной коммерции мы подготовили ещё одно исследование. Оно показало, что иногда люди сталкиваются с трудностями при покупке товаров, которые имеют несколько параметров (т.е. могут быть сделаны из разных материалов, иметь различные принты, быть разных размеров и цветов).
Выявленные нами проблемы юзабилити возникали, когда на сайте электронной коммерции один и тот же товар с несколькими параметрами был представлен в каталоге так, как будто это разные товары. И наоборот — когда разные товары были показаны так, как будто это один товар с разными характеристиками. Давайте обсудим разницу.
Предположим, что на сайте электронной коммерции есть два разных товара — А и Б. Если единственная разница между ними — это один параметр (например, цвет, размер, принт, материал), то они считаются одним товаром. Однако, если характеристики двух товаров значительно отличаются, то это два разных товара.
Ключевой руководящий принцип, основанный на исследовании пользователей интернет-магазинов, можно резюмировать следующим образом:
Если продукты отличаются, то они должны быть представлены в каталоге на отдельных карточках товара; характеристики одного товара должны быть размещены на странице товара.
Если это правило не соблюдается, возникают следующие проблемы юзабилити:
- Пользователям становится трудно сравнивать разные товары, если они представлены как варианты одного и того же товара на одной и той же странице товара.
- Если для каждой характеристики одного товара предназначена отдельная карточка в каталоге и страница товара. В таком случае количество вариантов значительно увеличивается. Это делает просмотр и выбор товаров утомительным. Также повышается риск того, что пользователи могут не обнаружить те характеристики товара, которые им нужны.
В этой статье на примерах мы проанализируем обе проблемы, возникшие при юзабилити-тестировании, и подробно исследуем препятствия, которые они создают.
Одна страница товара для разных продуктов
В нашем исследовании мы столкнулись со страницами товаров, на которых были размещены выпадающие списки. Но вместо выбора характеристик одного товара, там были представлены совершенно разные товары.
Например, на странице товара интернет-магазина Best Buy вместе с подробной информацией о телевизоре был раскрывающийся список, в котором были представлены другие модели телевизоров. Каждая модель значительно отличалась по функциям и применяемым технологиям.
Покупая новый телевизор, один из участников исследования был ошеломлен выбором представленных моделей. На самом деле при нажатии на любое из полей в выпадающем списке информация на странице товара (в том числе название продукта) менялась. Но участник не сразу это заметил, потому что изображение оставалось прежним.
Различие между самими товарами и их характеристиками крайне важно. Неправильный выбор вызывает проблемы у пользователей по двум причинам.
Во-первых, с помощью выпадающего списка сложных характеристик, которые полностью меняют описание товара, пользователи не будут располагать достаточной информацией, чтобы сделать осознанный выбор. Выбор модели телевизора — сложное решение, потому что между ними есть много отличий — это совершенно разные продукты! У людей нет глубокого понимания, чем одна коллекция отличается от остальных, поэтому параметры в раскрывающемся списке (например, CX и NanoCell 81) для большинства пользователей ничего не значат. (Эта путаница усиливается бессмысленными названиями, но это уже другая история).
При нажатии на эту ссылку открывается модальное окно со сравнением и ссылкой на полную сравнительную таблицу (англ. “See full comparison”). К сожалению, участник нашего исследования не заметил эту ссылку.
При выборе такого дорогого товара, как телевизор, требуется больше информации, чем просто варианты, представленные в раскрывающемся меню. Участник исследования отметил:
«Чтобы понять, чем отличаются модели телевизоров, мне пришлось посетить сторонние сайты и сайт LG. Например, чтобы узнать, чем BX отличается от CX. Я могу видеть разные ценовые категории телевизоров, но мне нужно понимать, какие функции включены в цену и какие из них нужны именно мне?»
(На самом деле на сайте BestBuy действительно была информация, которая объясняла различия между разными сериями телевизоров LG, но участник исследования ее не нашел).
Во-вторых, большинство покупателей, посетивших страницу товара, уже выполнили поиск и отфильтровали товары по цене и размеру, которые соответствуют их критериям покупки. Таким образом, они смотрят на страницу товара, уже обладая некоторой информацией. Демонстрация альтернативных продуктов без дополнительного контекста будет сбивать с толку, тем более что они не отвечают потребностям пользователей. Люди должны тщательно оценить детали каждой из альтернатив, чтобы определить, соответствуют ли они их критериям. Например, наш покупатель обнаружил, что смотрит на модель, которая стоит намного дороже той цены, на которую он ориентировался. В этот момент ему было трудно повторно найти телевизор, который изначально его интересовал.
Вероятно, возможность выбора других моделей телевизоров была добавлена на страницу товара, чтобы покупатели могли найти похожие модели. Однако эту задачу можно решить другими способами. Например, разместить их на странице товара в разделе Сопутствующие товары, как это сделали другие интернет-магазины по продаже телевизоров. Другие модели также можно найти при просмотре каталога товаров. Предоставление более широкого выбора моделей на странице товара не стоит тех сложностей, с которыми сталкиваются пользователи.
По этим причинам выбор характеристик на странице товара должен быть представлен только для одного и того же товара.
С другой стороны, есть обратная проблема, когда для каждой характеристики одного продукта сделана своя страница товара.
В каталоге один товар представлен на нескольких карточках
Варианты одного и того же товара, представленные в виде отдельных карточек в каталоге, приводят к проблемам юзабилити для покупателей.
Так было на сайте Arhaus.com. Участница исследования хотела купить табурет в интернет-магазине Arhaus. Она посетила страницу товара Robin Wishbone Counter Stool, но была разочарована. Там было показано, что стул представлен в единственном цвете “Stone Vintage”, который не подходил к ее интерьеру.
На самом деле этот табурет был представлен в различных вариантах деревянных оснований разной высоты. Вместо того, чтобы позволить покупателям выбрать цвет и высоту основания на странице товара, в каталоге было представлено несколько карточек этого товара с переходом на отдельную страницу товара. Каждая страница товара соответствовала одному цвету и одной высоте основания для одного и того же табурета. Таким образом, поскольку табурет был представлен в 3 разных цветах и имел 2 варианта высоты, для его демонстрации было создано 6 разных страниц товара.
Вдобавок ко всему, на странице товара была еще одна ошибка дизайна: цвет основания (“Stone Vintage”) не был представлен должным образом — он был показан в описании рядом с надписью Fabric (с англ. “Материал”). Более того, рядом с этим названием был указан только один образец цвета (“Stone Vintage”), тогда как на самом деле в наличии были разные цвета основания табурета, но они были показаны на других карточках и разных страницах товара.
В этом каталоге показаны два варианта одного и того же табурета, которые размещены вместе с другими совершенно разными конструкциями табуретов. В таком представлении товаров пользователям сложно понять, что это разные варианты одного и того же товара.
Возможно, что на сайте Arhaus создали отдельные карточки и страницы товара для каждого варианта этого табурета, чтобы они были представлены в равной степени с остальными товарами. К сожалению, при этом возникают две серьезные проблемы юзабилити:
- Это затруднит обнаружение всех вариантов товара.
- Это увеличит время просмотра всех вариантов товара.
Мы обсудим каждое препятствие ниже.
Пользователи могут не обнаружить все варианты товара
Хочется думать, что посетители сайта внимательно просматривают весь каталог товаров, но не всегда это так. Если для каждого варианта одного товара есть уникальная страница товара, результатом будет увеличение количества вариантов, требующих просмотра. Пользователи, которые заинтересованы только в одном товаре, теперь должны просматривать все варианты, большинство из которых не вызывают у них интерес. Количество вариантов может легко перегрузить. Покупатели могут отвлечься или сдаться, прежде чем обнаружат то, что их интересует.
К счастью, наша покупательница, которая заинтересовалась табуретом Wishbone, вернулась в каталог, где наткнулась на аналогичную модель табурета черного цвета. Она сказала: «О, это же тот самый табурет, только в черном цвете! Похоже на то. Мне больше нравится черный, но теперь мне интересно, в каких цветах он еще представлен!»
Позже она поняла, что выбранный ею черный табурет на самом деле был слишком высоким. Он назывался Robin Wishbone Barstool (прим. барный стул Robin Wishbone) и был выше табурета Robin Wishbone Counter Stool (прим. обычный стул), который она нашла изначально под названием Stone Vintage. Это открытие добавило еще одну проблему в процесс поиска. Она продолжала искать в каталоге другие цвета табурета, но ей также приходилось обращать пристальное внимание на название табурета, по которому можно было определить его высоту, чтобы убедиться, что она выбирает только нужный ей цвет. Дело в том, что табуреты разной высоты на фотографиях выглядели одинаково.
К счастью, она обнаружила черный табурет Wishbone нужной высоты, внимательно изучив весь каталог в категории табуретов. Хотя она могла бы воспользоваться функцией поиска, но это прервало бы процесс просмотра, на который она уже потратила время.
Повышенные трудозатраты со стороны пользователей для просмотра всех вариантов
Онлайн-покупатели часто разбивают процесс на две фазы: (1) этап просмотра, когда они просматривают варианты и сохраняют понравившиеся товары либо на отдельной вкладке (избранное), либо в корзине, и (2) этап выбора, на котором они оценивают и сравнивают сохраненные товары, чтобы сделать окончательный выбор перед тем, как оформить заказ.
Мы уже обсудили дополнительные трудозатраты, связанные с просмотром каждой характеристики одного и того же товара на разных страницах товара. Однако у пользователей возникают новые трудности в процессе выбора.
На этапе просмотра многие покупатели не понимают, что они выбрали один и тот же товар, представленный в нескольких вариантах. Идентификация дубликатов на этапе просмотра зависит от кратковременной памяти пользователей, поскольку они должны вспомнить, что видели похожий товар раньше.
Даже те, кто заметил, что один и тот же продукт отображается в каталоге несколько раз, на этапе просмотра могут быть не готовы остановиться на одной характеристике товара. В результате на этапе выбора у них будет больше вариантов для принятия окончательного решения. Этот процесс может превратиться в чрезвычайно сложный и запутанный.
Характеристики товара должны быть легко обнаружены
Для каждого продукта и всех его вариантов должна быть доступна отдельная страница товара. Однако, чтобы пользователи могли обнаружить другие характеристики продукта, в каталоге это должно быть четко обозначено. Если параметры носят эстетический характер (например, цвет и узор), в каталоге в карточке товара должны быть четко показаны соответствующие варианты, расположенные под названием товара. Пользователи привыкли к такому подходу, и, если варианты заметны, они будут знать, что доступно несколько моделей.
В карточке товара в каталоге интернет-магазина Arhaus под изображением действительно были расположены варианты цветов. Рядом с ними была ссылка "+MORE" (прим. с англ. «Больше цветов»), при нажатии на которую пользователь мог видеть дополнительные цвета основания табурета. Однако участница исследования, которая покупала табурет, упустила эту деталь.
Ссылки “+ MORE” были пропущены участницей исследования по нескольким причинам:
- Стандартный подход к отображению параметров цвета заключается в отображении каждого доступного цвета, а не индикатора того, что существует больше цветов.
- Ссылка “+ MORE” была небольшой и малозаметной, поэтому ее было трудно обнаружить при обычном сканировании контента.
Когда участница просматривала страницу, она увидела только один вариант цвета, поэтому больше не возвращалась к просмотру этой области.
Как отобразить несколько значений параметра товара в каталоге
Если продукт имеет несколько параметров с разными вариантами, как это было в случае с табуретами Arhaus (где высота табурета и цвет основания являлись разными параметрами и имели несколько вариантов), их демонстрация в каталоге может потребовать больше внимания.
Размер часто является одним из переменных параметров, и в большинстве случаев выбор размера не должен быть представлен в карточке товара в каталоге. Так бывает при покупке одежды. Предполагается, что вы сможете выбрать размер на странице товара, и нет необходимости указывать, что существуют разные размеры, в каталоге.
Большинство других сайтов, которые продают стулья, предусматривали возможность выбора высоты табурета на странице товара. Они также продумали фильтрацию табуретов по высоте, чтобы сузить выбор.
Когда у товара есть несколько параметров, помимо размера (например, цвет обивки и цвет основания, как в случае с табуретами), в интернет-магазинах есть несколько распространенных способов, чтобы указать на наличие этих параметров в каталоге:
Объедините два параметра вместе
Например, белый/металлический или серый/натуральный. Комбинация может быть представлена в виде одноцветного или двухцветного образца. Пользователи должны иметь возможность нажимать на образцы, чтобы изменить превью продукта и увидеть различные варианты.
В качестве альтернативы вместо образцов цвета можно использовать миниатюры товара, чтобы показать возможные варианты — как это сделала IKEA в примере ниже.
Этот подход хорошо работает только в том случае, если комбинация вариантов приводит к управляемому количеству вариантов, например менее 10. Если существует больше вариантов выбора, параметры нельзя объединять.
Используйте изображения продукта, чтобы представить разнообразие параметров
Вместо того, чтобы показывать одно изображение товара с несколькими параметрами, выберите фотографию, на которой показано несколько одних и тех товаров, представленных в разных вариантах (например, товары с разными цветами обивки сидений и оснований).
Большинство сайтов используют несколько из этих опций сразу, чтобы клиенты могли быстро понять, какое разнообразие доступных вариантов предлагает интернет-магазин.
Сайты с небольшим количеством товаров могут стать исключением
Coclico, небольшой нью-йоркский магазин элитной обуви. Они также создали отдельные карточки для одной и той же обуви разного цвета. Однако, в отличие от Aarhus, у Coclico небольшой ассортимент. По этим причинам наличие отдельных карточек для одинаковых товаров, которые отличаются только по цвету, не вызывали трудностей у покупателей.
На странице товара всегда должна быть предоставлена возможность выбрать и изучить все параметры одного и того же товара. Не нужно заставлять покупателей искать другие цвета в каталоге.
Несмотря на то, что небольшие превью других цветов отображались в разделе Сопутствующие товары (“We thought you might like these too”), пользователи ожидали увидеть другие варианты цветов на странице товара. Отображение этого товара в другом цвете в качестве сопутствующего повышает риск того, что пользователи его просто проигнорируют. К тому же отсутствие других цветов обуви заставит людей покинуть страницу товара в поисках других вариантов.
Было бы лучше, если бы на странице товара Coclico можно было выбрать разные цвета одной модели, как это сделано на сайте Article.com, на котором продаются кровати разных размеров и цветов.
Если каталог товаров небольшой, то можно показывать варианты одного и того же товара, которые отличаются, например, по цвету, на разных карточках в каталоге. Однако на сайтах со средним и большим ассортиментом поиск одного и того же продукта, представленного на нескольких карточках, увеличит сложность задачи для пользователя.
Заключение и выводы
Может показаться хорошей идеей разбить варианты одного и того же товара на отдельные карточки, чтобы создать впечатление наличия широкого выбора. Однако в реальных ситуациях такая практика создает пользователям следующие проблемы:
- Для простых переменных параметров, таких как цвет, размер или принт, используйте одну карточку с четкими механизмами выбора нужных характеристик.
- В каталоге должны использоваться высококонтрастные, заметные индикаторы характеристик товара. Они должны быть расположены под превью товара, если обладает несколькими параметрами.
- Продукты со сложными параметрами, которые коренным образом отличаются по описанию и функциям, должны быть расположены в каталоге на отдельных карточках товара с переходом на отдельную страницу товара. Так можно будет подробно изучить информацию о каждом товаре и сравнить его с другими.
- Сайты с ограниченным ассортиментом могут показывать варианты одного и того же товара в виде разных карточек в каталоге; однако выбор характеристик товара должен по-прежнему оставаться на странице товара.
.svg)
.webp)
