7 Принципов оптимизации юзабилити интернет-магазинов

Posted on by riasevastopol

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

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

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

Был использован особый способ в подобного рода изучениях — “Think-aloud protocol” (сущность этого способа содержится в том, что пользователей, принимающих участие в изучении, просят подробно говорить все, что они думают по поводу юзабилити сайта в контексте заданной задачи, к примеру, поиска конкретного предложения). Анализу были подвержены ресурсы таких гигантов индустрии, как Amazon, Best Buy, Blue Nile, Chemist Direct, Drugstore.com, eBags, GILT, GoOutdoors, HM, IKEA, Macy s, Newegg, Pixmania, Pottery Barn, REI, Tesco, Toys R Us, The Entertainer и Zappos.7 Принципов оптимизации юзабилити интернет-магазинов

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

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

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

1. Делайте заголовки заметными

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

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

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

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

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

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

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

Основное условие — дабы перечень родительских рубрик был заметен и дешёв без дополнительных кликов.

  • Как оптимизировать навигацию вебмагазинов, либо 7 раз отмерь

2. Дублируйте подкатегорию в нескольких родительских рубриках

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

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

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

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

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

  • Оптимизация юзабилити основной страницы вебмагазина

3. Применяйте категорию «Новинки» ??для удержания внимания ваших клиентов

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

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

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

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

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

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

В конечном итоге категории либо фильтры для новинок не обязательно должны именоваться «Новые поступления». В зависимости от типа продукта либо его сезонности для таких разделов смогут подойти наименования: «Что нового?» либо «Новинки сезона».

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

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

  • 10 способов повышения продаж, основанных на психологии клиентов

4. Применение элементов апсейла и кросс-сейла

Неприятность: на протяжении просмотра товарной целевой страницы визитёру неоправданно?? сложно отыскать другие продукты, заменители товара либо сопутствующие аксессуары. Иначе говоря отсутствуют элементы «апсейла» (upsell — продажа дополнительных товаров) и «кросс-сейла» (cross-selling — перекрестные продажи) конкретно на лендинге продукта.

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

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

  • он или откажется от предстоящего поиска по сайту и уйдет с него;
  • или продолжит поиск через страницы с товарами и альтернативными товарами-заменителями.

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

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

Пользователи желают видеть больше подобных и дополнительных торговых предложений конкретно на целевой странице интересующего их товара.

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

Хорошим примером реализации апсейла есть товарный лендинг вебмагазина Tesco. Он превосходно оказывает помощь визитёрам отыскать дополнение и альтернативу к приобретению посредством товарных блоков: «Others bought these alternatives» (Другие выбрали, как альтернативу) и «Customers who bought this also bought» (Пользователи, приобретшие это, кроме этого приобрели). Эти ссылки размещены на боковой панели товарных страниц Tesco и светло показывают на то, что перечни основаны на поведении вторых клиентов, просматривавших данную страницу ранее.

  • Как расширить прибыль вебмагазина посредством апсейл?

5. Перечни ранее просмотренных товаров

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

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

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

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

На сайте Tesco (фото выше) повторно просмотреть ранее открытые товары достаточно легко. Это возможно сделать посредством блока ссылок «Items you have recently viewed» (Товары, каковые вы сравнительно не так давно просматривали), интегрированного в нижнюю часть всех подряд страниц сайта.

Показ «Ранее просмотренных товаров» обязан функционировать только на базе информации о текущем сеансе без необходимой регистрации либо входа на сайт.

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

А потому разработчикам стоит предусмотреть две дополнительные функции на выбор пользователя: «Очистить все» и «Отключить перечень».

  • Как кнопка «Назад» способна стереть с лица земли юзабилити сайта?

6. страницы и Специальные блоки совместимых товаров

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

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

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

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

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

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

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

  • 14 правил создания совершенной товарной страницы

7. Активные ссылки с контекстных изображений на товары, представленные на сайте

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

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

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

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

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

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

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

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

По окончании первой неудачи участник опыта переместился конкретно на страницу одного из кроватей из ассортимента, представленного в каталоге Pottery Barn. По окончании осмотра изображения дивана визитёру весьма понравился журнальный столик, представленный в качестве дополнения к вероятному интерьеру. Хотя определить о столике больше, пользователь начал искать ссылку на данные о заинтересовавшем его товаре, но опять так ничего и не отыскал.

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

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

  • 5 способов расширить конверсию посредством изображений

В случае если визитёры не смогут это отыскать — они не смогут это приобрести

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

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

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

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

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

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

Высоких вам конверсий!

По данным smashingmagazine.com, image source DLoTO

Случайные статьи:

Принципы веб-дизайна интернет-магазина. Выпуск №8 рубрики \


Подборка похожих статей:

riasevastopol

More Posts