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

Зачем нужны хлебные крошки на сайте:

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

При этом, хлебные крошки:

• Занимают мало места на сайте;
• Просты в реализации;
• Никогда не вызывают проблем у пользователей;
• Учитываются поисковыми системами.

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

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

Отсутствие хлебных крошек

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

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

Как оформить хлебные крошки:

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

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

• Путь начинается с главной страницы (название бренда);
• Разделяются уровни знаками: “>” (больше чем) или “/” (косая черта, слеш) или “→” (стрелка направо) чтобы прослеживалось направление движения:

Раздел меню > Подраздел (1 уровень) > Подраздел (2 уровень) … > Карточка товара;

• Не стоит разделять уровни следующими символами: “ | “ (вертикальная черта), “ — “ (горизонтальная черта, дефис/тире),”:” (двоеточие), “;” (точка с запятой), “…” (многоточие) они могут вызвать путаницу;
• Последний уровень выделяется жирным шрифтом или цветом;
• Каждый уровень (кроме последнего) является кликабельны и ведет в соответствующий раздел сайта;
• Так как пользователь всегда находится на последнем уровне, то делать его кликабельным не нужно;
• Располагать хлебные крошки желательно в левой-верхней части экрана, именно там пользователи искали их чаще всего, что говорит о выработанной привычке.

Всё большую популярность набирают хлебные крошки с выпадающими списками (изображение ниже). Подобный подход не вызывал трудностей у пользователей в ходе тестирования.

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

Ошибки при оформлении хлебных крошек

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

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

Точка роста конверсии: используйте хлебные крошки и избегайте ошибок при их оформлении

В данной статье рассмотрена лишь одна точка роста конверсии. Узнать ещё 100+ точек роста конверсии и UX-исследований можно в электронном учебнике Conversant.

Как оформить хлебные крошки на сайте (bredcrumbs) was originally published in Conversant on Medium, where people are continuing the conversation by highlighting and responding to this story.

1. Позволяет пользователям легко переключаться между разделами сайта, независимо от текущего местоположения;
2. Позволяет пользователям, зашедшим не через главную страницу, сориентироваться.

В последнее время всё чаще встречаются сайты, на которых применяется раскрывающееся меню, которое скрыто под кнопкой “Каталог”. Так, например, сделано на сайте Garmin.

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

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

И действительно подход с скрытием разделов меню уже достаточно давно применяется на сайте Amazon и это не влияет на конверсию. Но это не означает, что подобный подход будет работать и на других сайтах электронной коммерции. Потому что Amazon существует очень давно, хорошо узнаваем и продаёт практически все категории товаров, именно поэтому им сложно вынести какие-то разделы в меню. Не все компании (даже крупные), предлагают такое количество товаров на сайте и потому нуждаются в информировании пользователей в большей степени. Ниже пример того, как в меню на сайте Эльдорадо, расположено меню. Учитывая то, что Эльдорадо продаёт большое количество товаров, то в меню вынесены самые популярные товарные категории, а остальные скрыты в раскрывающемся меню под кнопкой “Каталог” в самом начале меню (слева).

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

В случае отсутствия или скрытого меню, становится непонятно:

• Куда попал пользователь из вне?
• Есть ли другие продукты из той же категории на сайте?
• Есть ли другие категории товаров на сайте?

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

Точка роста конверсии: используйте меню на всех страницах сайта

В данной статье рассмотрена лишь одна точка роста конверсии. Узнать ещё 100+ точек роста конверсии и UX-исследований можно в электронном учебнике Conversant.

Меню: плюсы и минусы скрытого меню разделов сайта was originally published in Conversant on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

Отсутствие дескриптора

Наиболее распространенная ошибка связанная с дескриптором — это его отсутствие. Обратите внимание на примеры ниже. Слева логотип “Петрович” без дескриптора. Пользователю впервые попавшему на сайт может быть не сразу понятно, куда он попал и чему посвящен данный сайт. Полистав сайт какое-то время, пользователю становится понятно, что Петрович — это магазин строительного оборудования и инструментов. Но это расходует время и терпение, а также повышает количество вопросов и сомнений. В ходе тестов некоторые пользователи уходили с сайта, посчитав, что необходимых товаров на сайте нет. Но они были. Поэтому лучше добавить дескриптор, который снимет лишние вопросы и сэкономит время пользователям. Вот как это реализовано на 2-ом и 3-ем примерах ниже (Мир инструмента и Кувалда.ру).

Непонятный дескриптор

Ещё одна ошибка — это непонятный дескриптор. На примере ниже слева у Ситилинка дескриптор “Электронный дискаунтер”, что может трактоваться как дискаунтер в электронном виде, а вовсе не дискаунтер электроники. К тому же не всем может быть известно слово “дискаунтер”. Другой пример ниже справа у Комуса дескриптор “Интернет-гипермаркет”, что также вызывает вопросы гипермаркет каких товаров, продовольственных или непродовольственных, товаров для офиса или для дома и т.п. Не все могут понимать, что само слово “гипермаркет” означает большой магазин продающий различные товары.

Ниже примеры более понятных дескрипторов. Так ниже слева у DNS дескриптор “Цифровая и бытовая техника”, что гораздо понятнее чем “Электронный дискаунтер” у Ситилинка (сверху). А ниже справа у Hoff дескриптор “Гипермаркеты мебели и товаров для дома”, что также гораздо понятнее, чем “Интернет-гипермакет” у Комуса (сверху).

Точка роста конверсии: добавьте дескриптор рядом с логотипом, сделайте его простым и понятным.

В данной статье рассмотрена лишь одна точка роста конверсии. Узнать ещё 100+ точек роста конверсии и UX-исследований можно в электронном учебнике Conversant.

Дескриптор: как снять вопросы и “трение” новых пользователей was originally published in Conversant on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

2. Расположение логотипа

Логотип — это первое что ищет взглядом пользователь, впервые попавший на сайт. Именно по логотипу можно быстро определить, попал ли пользователь туда куда ему нужно. И так как пользователи попадают на сайт не только через главную страницу, а например, сразу на внутренние страницы сайта через поисковые системы, то логотип желательно размещать на всех страницах сайта в привычном месте. Под привычным местом подразумевается левый верхний угол, потому что именно оттуда начинает движение взгляд большинства пользователей. Это связано с тем, что в большинстве видов письменностей, в частности в кириллице и латинице, направление письма слева направо и сверху вниз, аналогично чтению текста в к книге. Соответственно, при чтении или сканировании страницы, привычной стартовой точкой для взгляда получается как раз левый-верхний угол. Отсюда же исходит так называемый F-паттерн, когда пользователи идут по сайту слева-сверху направо и вниз, а в результате движения взгляда получается латинская буква “F”.

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

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

Пионеры в области юзабилити, Nielsen Norman Group провели исследование, в котором взяли разные сайты отелей и сделали для каждого копию главной страницы. Единственное отличие это размещение логотипа, в оригинальном варианте он был слева, а во втором варианте справа.

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

Точка роста конверсии: расположите логотип в верхнем-левом углу

В данной статье рассмотрена лишь одна точка роста конверсии. Узнать ещё 100+ точек роста конверсии и UX-исследований можно в электронном учебнике Conversant.

Расположение логотипа: как повысить узнаваемость в 2 раза was originally published in Conversant on Medium, where people are continuing the conversation by highlighting and responding to this story.

Конверсия с латинского “conversio”, что в переводе на русский язык означает “обращение”, “превращение”, “изменение”. Конверсия присутствует в разных отраслях, например: в химической (изменение состава газов), в лингвистической (изменение слов), в микробиологической (изменений свойств клетки), и других. В данной статье речь пойдёт о конверсии на веб-сайтах, а точнее на сайтах электронной коммерции (e-commerce), при продажах через интернет (интернет-магазины).

Коэффициент конверсии сайта это

Коэффициент конверсии в интернет-коммерции показывает какой процент посетителей сайта становятся вашими реальными покупателями. Поэтому коэффициент конверсии это ключевой показатель эффективности сайтов в e-commerce.

Как посчитать конверсию сайта?

Допустим, что к вам на сайт приходят 500 посетителей в день, из них 10 совершают покупки. Формула подсчета конверсии сайта:

(10 / 500) х 100% = 2%
Эти 2% и есть коэффициент конверсии

Микроконверсия и макроконверсия

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

Средняя конверсия сайтов

Какая конверсия низкая, какая конверсия высокая, какая конверсия хорошая, какая конверсия плохая? Конверсия может быть разной, в зависимости от сферы деятельности и проработки конверсии. Большинство сайтов Рунета имеет низкую конверсию около 1% и меньше. ТОП-2000 интернет-магазинов имеет конверсию около 2–3%.

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

Зачем увеличивать конверсию?

Увеличив конверсию сайта вы получаете больше продаж без увеличения бюджета на рекламу. Например, улучшение конверсии с 2,0% до 2,6% для небольшого сайта с оборотом в 400 тыс. руб. в месяц (или 4,8 млн. руб. в год) приведет к дополнительным продажам в размере 1,4 млн. руб. в год. Если у вас есть интернет-магазин, то спроецируйте эту ситуацию на свой сайт и посчитайте недополученную прибыль и выброшенные деньги на рекламу.

Можно ли вообще увеличить конверсию?

Увеличить конверсию сайта вполне реально. В Рунете есть сайты, коэффициент конверсии которых доходит до 3%, 4%, 7% и даже 14% (данные выше). При этом, это абсолютно разные сферы: одежда и обувь, косметика и парфюмерия, продукты питания, книги, автозапчасти, билеты на мероприятия и многие другие.

Как увеличить конверсию?

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

Более подробную информацию, больше примеров и исследований вы сможете найти на сайте Conversant.me

Что такое конверсия сайта? was originally published in Conversant on Medium, where people are continuing the conversation by highlighting and responding to this story.