75статья

Как улучшить навигацию по интернет-магазину

Как улучшить навигацию по интернет-магазину

Опубликовал Александр Иваничкин, 28 мая 2014

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

Индивидуальное юзабилити-тестирование проводилось по принципу «мысли вслух», в ходе чего мы протестировали следующие сайты: Amazon, Best Buy, Blue Nile, Chemist Direct, Drugstore.com, eBags, GILT, GoOutdoors, H&M, IKEA, Macy’s, Newegg, Pixmania, Pottery Barn, REI, Tesco, Toys’R’Us, The Entertainer и Zappos.

Мы тестировали главную страницу, навигацию по категориям, подкатегории и списки товаров.

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

1. Не создавайте неактивные родительские категории (тем не менее, родительские категории всё-равно должны быть)

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

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


Сайт Pottery Barn.

«Я думал, что кликать можно на все» — сказал участник исследования сайта Pottery Barn (сверху слева), посмотрев на выпадающее меню, — «и что черные элементы приведут меня на главную страницу с товарами для столовой». Однако, при наведении мышки на черный заголовок, он сменился на курсор выделения текста, а не указатель в виде руки, и участник пришел к выводу, что этот заголовок не кликабелен. Такие же неактивные родительские заголовки были обнаружены и на сайте REI (сверху справа).

Большинство участников ожидали, что эти заголовки кликабельны, и постоянно пытались на них нажать, несмотря на то, что курсор показывал, что это невозможно. Участники хотели видеть широкий ассортимент продукции, надеясь попасть на страницу, на которой будет отображен управляемый перечень подкатегорий. Он мог бы помочь им сделать выбор в большей области (в отличие от страницы с перечнем товаров). Родительские категории как часть иерархии продукции (а не только пустые текстовые ярлыки) — важные элементы при предварительном поиске товаров. Пользователи, которые еще окончательно не решили, чего они хотят, или те, которые ищут вдохновения для покупки, смогут покопаться в более широких категориях перед тем, как углубляться в более узкие.


Pixmania.com (слева) и Amazon.com (справа).

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

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

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

2. При необходимости одинаковые категории можно поместить в разные основные разделы.

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

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

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


BestBuy.com

Одна участница не знала, где искать компьютерные адаптеры – в разделе «Офис» или «Компьютеры и планшеты», так как в первом описывается контекст использования, а в последнем — тип продукции. Основываясь на подкатегориях, она решила, что правильный выбор — последний вариант. Однако, в разделе «Компьютеры и планшеты» (сверху справа) она засомневалась, где ей искать — в «Аккумуляторы и источники питания» или в обычном разделе «Аксессуары». К счастью, адаптеры были в обоих. Также обратите внимание, что на сайте Best Buy есть категория «Чернила и тонеры» в разделе «Компьютеры и планшеты», а также категория «Чернила и тонеры для принтера» в разделе «Офис», что даёт пользователям возможность найти этот раздел в любой из потенциально подходящих родительских категорий.

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

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

  • Подкатегорию можно разместить в одном месте в таксономии сайта, а потом просто создать ссылку на неё в других родительских категориях (например, в выпадающем меню). Пользователь потом просто перейдёт в «настоящую» категорию, вне зависимости от того, откуда он в неё зашел. Такой вариант может привести к замешательству, если пользователь уверен, что нажимал на ссылку в меню «Офис», а оказался в разделе «Электроника» (как это будет показано в «хлебных крошках»).
  • С другой стороны, можно продублировать категории таким образом, чтобы каждая представляла собой уникальную запись в иерархии сайта с правильными «хлебными крошками» и прочим. Недостаток такого варианта заключается в технической сложности. Продукты должны быть правильно помечены по всем продублированным подкатегориям; функция автозаполнения поискового движка должна предлагать каждую категорию не чаще, чем один раз за поиск и так далее. Более того, это требует создания канонической страницы, чтобы избежать SEO-штрафов за дублирование.

3. На сайте должна быть категория или фильтр «Новинки».

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

«H&M – это один из сайтов, который я просматриваю время от времени», рассказывает один из участников тестирования, «поэтому я могу выбрать «Новые поступления» или что-либо вроде этого, и посмотреть, что нового у них появилось». Многие участники, которые пользовались тестируемыми сайтами хотели посмотреть категорию «Новинки». Это особенно важно, если они уже выбрали продукт или торговую марку, и уже пользовались хорошим каталогом продукции, и поэтому хотят проверить, что нового появилось с момента их последнего посещения.

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


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

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


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

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

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

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

4. Размещайте на страницах продукции как альтернативные, так и дополнительные товары.

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

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

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

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

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

«Иногда они предлагают образы, идеи или что-нибудь другое», объясняет участница после того, как просмотрела до конца страницу товара на сайте Gilt, показанную выше. Так как товары в блоке «Позвольте предложить» довольно неплохие, участница смогла найти себе платье (на странице, на которой она находилась в тот момент), и хотела дополнить образ парой туфель, которые бы подошли к платью. Однако, к сожалению, Gilt предлагает только альтернативные товары (т.е. другие платья), а не дополнения или аксессуары (туфли, украшения, косметику и прочее).

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

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

«Там было сказано «Рекомендовано для вас» и я поверил, что это мне подойдет», объяснил участник, посмотревший чехлы для камер, которые появились после добавления в корзину компактной камеры Nikon Coolpix на сайте Tesco (выше). Оказалось, что один из двух рекомендуемых чехлов не подходил для этой камеры.

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

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

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

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

5. Сделайте список «Недавно просмотренных товаров».

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

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

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

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

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

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

На сайте Tesco (выше) повторный поиск недавно просмотренных товаров значительно упрощен за счет списка «Товары, которые вы недавно просматривали», встроенного в подвал на всех страницах категорий и товаров. Сравните, насколько проще участнику было проверить габариты камеры здесь и в предыдущем примере с сайтом Pixmania.


Ещё один вариант расположения списка «Недавно просмотренных товаров» на боковой панели, как это показано на сайте Crate & Barrel.

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

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

6. Создавайте специальные страницы с перечнем совместимой продукции.

Проблема: Пользователям довольно сложно искать совместимые товары, если на сайте прямо не говорится об их соответствии.

Поиск запасного адаптера для ноутбука или подходящего чехла к камере кажутся простыми задачами, но в процессе тестирования это оказалось довольно сложным для 35% участников. Это означает, что 65% сдались или еще хуже — купили продукт, который, по их мнению, подходил, а по факту — нет.

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

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

«Я выберу Nikon, хотя на самом деле, я не хотел Nikon, но я сделаю это в надежде найти оригинальную сумку для камеры, чтобы быть уверенным, что она подойдет, потому что мне не очень хочется возвращаться и искать габариты камеры, а потом сравнивать их с размерами сумки», объяснил нам участник. «А потому, если она не безумно дорогая, я, наверное, возьму оригинальную». Участники часто сдавались при попытке найти подходящий чехол, который бы им нравился, и просто пытались найти что-либо, что подойдет для их камеры. Частью этой стратегии всегда было использование фильтра по торговым маркам, однако это приводило к тому, что неопытные фотографы заказывали неподходящие чехлы, так как они были уверены, что большинство чехлов Nikon подходят для большинства камер Nikon.

Если вы решили выделить целые страницы под совместимые товары, тогда страница для, скажем, «Камеры Nikon D7000» должна содержать список всех совместимых аксессуаров, таких как аккумуляторы, чехлы и объективы. Если заглядывать ещё дальше, можно сделать фильтр по типу продукции, чтобы пользователи могли найти «совместимые ‘чехлы для камеры’ ‘Nikon D7000’». Это позволит людям перемещаться по каталогу продукции вертикально и искать (в основном наиболее выгодные) аксессуары, сохраняя уверенность в их совместимости.

Определение совместимости по всему каталогу – это трудоемкая операция, но при наличии разумных запросов для каждой категории, зависимой от совместимости, большую часть работы можно автоматизировать. Преимуществ в определении такой совместимости достаточно много. Кроме уже описанной возможности вертикально просматривать категории, это позволяет вам создавать мощные фильтры. Представьте себе один фильтр в категории «Адаптеры и зарядные устройства для ноутбуков», который позволяет людям ввести модель компьютера и найти совместимые зарядные устройства. Более того, это также отличный вариант для поисковой оптимизации, так как такие списки совместимости могут быть представлены в виде нескольких уникальных целевых страниц для каждого продукта, например «Объективы для Nikon D7000», «Зарядные устройства и адаптеры для MacBook Pro» и «Обложки для Kindle Paperwhite».


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

Если бы на сайте Pixmania была установлена совместимость по каталогу, можно было бы привязать ссылку на перечень совместимых аксессуаров — «Посмотреть все 8 совместимых чехлов для Canon PowerShot A2300» — в конце блока кросселлинга, предоставляя прямой путь к полному обзору соответствующих чехлов.


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

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

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

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

«Он подходит для X60, но это не то. У меня X61», говорит участник, глядя на первый результат поиска на странице, показанной выше. И продолжает: «Он подходит ко всем устройствам серии X60. Значит ли это, что он подходит и для X61? Надо бы сходить на сайт Lenovo и проверить». Замешательство в том, какие модели принадлежат к «серии» — обычное дело, так как название серии часто путают с названиями определенных моделей.

Просто показывая список совместимых товаров для каждой модели, вы не сможете всё упростить, потому что некоторые модели также объединяются в серии. На примере сайта Newegg, приведённом выше, модель «Lenovo ThinkPad X61s» является частью серии Lenovo X60. Эту иерархию необходимо отображать на страницах совместимых товаров, так как участники тестирования путали названия серий и моделей. Страницы для совместимых продуктов по серии должны быть связаны со всеми моделями в этой серии, чтобы развеять любые сомнения, возникающие у пользователя.

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

7. Всегда связывайте контекстные изображения непосредственно с отображаемыми товарами.

Проблема: Пользователи быстро выходят из себя, если на фотографии отображено несколько товаров, но к ним нельзя перейти.

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

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

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

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

На странице, приведенной выше, участник увидел нужный ему стол на изображении в разделе «Гостинная», и нажал на него, но ничего не произошло. Потом он нажал кнопку «Сохранить в список», думая, что этим он сохранит все показанные товары, а потом просто удалит лишние. Но этого тоже не произошло. «Нееет… Гррр, добавился только диван. А мне нужен диванный столик», сказал он, наводя курсор на изображение стола и нажимая на нем правую кнопку. Он засмеялся от отчаянья и продолжил: «Я хочу это. Что я сделал? Я это хочу [указывает на столик]. Когда я нажимал на кнопку, я думал, что сохранятся все, но сохранился только диван». После неудачной попытки найти стол, участник тестирования просто покинул сайт.

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

В таких случаях, лучше заменить ссылку на товар описанием, а не просто удалить ссылку полностью (как это показано на примере IKEA выше). Описание может быть довольно простым, вроде «Снят с продажи», «Доступно только в магазине» или «Недоступно в магазинах США» — главное показать, что пользователь не сможет купить этот предмет. Если товар не снят с продажи, а просто недоступен для заказа через определённый канал или в регионе (как в случае с IKEA выше), тогда описание может подтолкнуть покупателей к верному направлению. При этом, если доступны похожие товары, можно привести ссылку на них или на категорию с ними.

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


Еще один способ решить эту проблему – пометить контекстные изображения прямыми ссылками на отображённые товары, как показано выше на сайте Crate & Barrel, где нажатием на «+» открывается краткий обзор помеченного товара.

Прямые ссылки нужны не только для контекстных изображений

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

Если они не могут это найти — они не могут это купить

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

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

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

  1. Делайте глобальные категории ссылками, а не только подкатегории.
  2. При необходимости одинаковые подкатегории можно поместить в разные родительские категории.
  3. На сайте должна быть категория или фильтр «Новинки».
  4. Размещайте на страницах продукции как альтернативные, так и дополнительные товары.
  5. Сделайте список «Недавно просмотренных товаров».
  6. Создавайте специальные страницы с перечнем совместимой продукции.
  7. Всегда связывайте контекстные изображения непосредственно с отображаемыми товарами.

И последнее замечание. В процессе тестирования стало понятно, что неточные категории могут приводить к более серьезным последствиям, чем «просто» немедленный уход с сайта — они могут постоянно наносить ущерб торговой марке. Когда у участников не получалось найти определенный тип продукции, они часто приходили к выводу, что сайт это не продаёт. Такое основательное недопонимание приводит не только к немедленной потере продаж, но и к дальнейшим убыткам, так как покупатели больше не придут в магазин, если они уверены, что он не продает нужный им товар.

Это перевод статьи под названием “An E-Commerce Study: Guidelines For Better Navigation And Categories” от Christian Holst. Перевели в компании UXDepot с одобрением издания Smashing Magazine.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста 🙂

Все комментарии:

    Нет комментариев.


    Оставьте комментарий: