Компании, занимающиеся электронной коммерцией, тратят огромные суммы денег на то, чтобы привлечь посетителей на свой сайт. В исследовании, проведенном Frac.tl, было обнаружено, что в 2015 году Amazon потратил около $1,35 млрд на поисковую рекламу, что составило целых 97% от его маркетингового бюджета.
Когда компания тратит такие гигантские суммы на рекламу, ей крайне важно обеспечить понятную пользователю навигацию сайта, которая бы вела к завершению продажи.
Можно с уверенностью сказать, что навигация – это одна из ключевых частей дизайна вашего интернет-магазина. Хорошая навигация улучшает пользовательский опыт, что ведет к увеличению продаж и прибыли. С другой стороны, неудобная навигация отталкивает пользователей и приводит к увеличению процента отказов.
Baymard провел сравнительное исследование 50 сайтов электронной торговли на предмет удобства использования и выяснил, что пользователи не могли найти товар из-за неудобного интерфейса. Посетители сайтов получали неверное представление о наличии продукта, и это напрямую повлияло не только на непосредственные продажи, но также и на будущие продажи, так как эти покупатели вряд ли вернутся на этот сайт в поисках того же товара.
Каждому сайту были присвоены баллы по системе, основанной на 17-35 принципах. Диаграмма разброса данных ниже показывает общий балл одного из сайтов. Черные линии обозначают средний показатель; красные точки означают низкую степень удобства в использовании, желтым отмечен приемлемый уровень удобства, а зеленым – хороший.
Из этого графика следует, что большинство изученных сайтов не обладают хорошей навигацией, улучшающей взаимодействие с пользователем.
Здесь возникает более интересный вопрос: какие сайты имеют самую лучшую коммерческую навигацию? Я составил список из 11 сайтов с отличной, как мне кажется, навигацией для интернет-магазина, чтобы вы смогли использовать эти примеры для улучшения продаж.
1. Автозаполнение на сайте Waterstones
Нам всем очень нравится предложения Google по автозаполнению, которые помогают сузить область поиска, минимизировать риск опечаток и ускорить весь процесс поиска, что ведет к точным результатам за более короткое время. Однако когда мы осуществляем поиск товара по сайту электронной торговли, эти предложения по автозаполнению не всегда полезны.
Компания Waterstones отлично справилась с этой проблемой. Они предлагают пользователям быстрые и точные идеи для автозаполнения, которые помогают мгновенно найти желаемый товар.
Когда я ввел слово how в строке поиска, система выдала целый список названий популярных книг, начинающихся с этого слова. Более того, результаты поиска были показаны в расширенном формате, то есть помимо названия я видел обложку книги и ее цену. Если в процессе поиска вам доступна полная информация, вы сможете сделать более удачный и осознанный выбор.
Чем полезна функция автозаполнения?
Эта функция значительно повышает коэффициент конверсии, потому что люди получают возможность искать и находить нужные товары, затрачивая минимальные усилия.
Пользователи также полагаются на автозаполнение, чтобы быть уверенными в правильном написании названия продукта, и если система не исправляет ошибки, продукт невозможно нейти в перечне товаров, а это значит, что продукт остается непроданным, хотя пользователи искали его. Именно поэтому автозаполнение играет огромную роль для конверсии интернет-магазинов.
2. Фасеточный поиск на сайте Rollie Nation
Эффективный поиск продукта – главный ключ к конверсии. Никто не захочет заставлять покупателя пролистать несколько страниц, прежде чем он найдет нужный товар, ведь это и называется негативный пользовательский опыт. Фасеточный поиск представляет собой отличный способ предоставить ценную информацию о продукте в простом формате на основе выбора конкретных параметров, что облегчает процесс поиска, фильтрации и покупки.
Взгляните, как компания Rollie Nation, онлайн магазин обуви, встроила фасеточный поиск в свою систему навигации.
Покупатели могут отсортировать желаемый товар по следующим параметрам:
- Стиль: Like Boot, Derby, Mira, Sport и т.д.
- Размер: в зависимости от размера ноги покупателя
- Цена: возможность фильтровать от минимальной до максимальной цены
- Цвет: применение этого фильтра зависят от выбора цвета покупателем
Основатель бренда Rollie Nation Винс Лебон (Vince Lebon), принявший участие в исследовании для журнала Big Commerce, подчеркнул важность использования фасеточного поиска и фильтрации продукта. Внедрение этих функций резко увеличило продажи.
«В обувной отрасли для каждой товарной позиции может существовать до 14 размеров и много других параметров, — говорит Лебон. – Учитывая как быстро происходит оборот товара, покупателям приходилось просматривать три или четыре стиля, прежде чем найти обувь своего размера, это, конечно, был отталкивающий опыт для них. Как только мы применили фасеточный поиск в навигации по сайту, наши продажи сильно возросли» — увеличение в районе 2,7% от средней стоимости заказа.
Чем полезен фасеточный поиск?
Эта функция презентует ваш каталог в наиболее удобном виде для вашей аудитории, и таким образом вы можете превратить поиск товара в реальную покупку.
Благодаря фасеточному поиску вы не потеряете пользователей, потому что они смогут находить то, что ищут, быстрее. Это значит, что стоимость привлечения клиентов будет снижена.
Комментарий: При использовании фасеточного поиска существует несколько навигационных путей, ведущих к одному и тому же контенту. К примеру, чтобы найти женскую футболку красного цвета (red-coloured women’s t-shirt), пользователи могут проследовать по одному из следующих путей в зависимости от структуры вашего сайта:
- site.com/womens/t-shirts/red
- site.com/t-shirts/womens/red
- site.com/t-shirts/red/womens
Подобная неоднозначность может вызвать множество проблем дублирования. Чтобы исправить или избежать их, вы можете сделать следующее:
- Используйте JavaScript, чтобы предотвратить создание одинаковых URL. Этот вариант займет довольно много времени, так как вам придется вручную проверять каждую комбинацию страниц, которые вы хотите проиндексировать. Убедитесь, что все главные страницы проиндексированы, а URL не повторяются.
- Используйте тэги no-index и follow, чтобы не допустить индексирования дублированных комбинаций URL. Это снизит количество повторяющихся страниц, однако ваш бюджет может быть перерасходован, а ссылочный вес снижен.
- Используйте канонические тэги, чтобы Google мог распознать один из URL как каноническую версию, а другие как дублированные страницы. Этот вариант сохранит ваш ссылочный вес, но будет расходовать краулинговый бюджет.
- Используйте файл robots.txt, чтобы отклонить URL с определенными параметрами. Один из недостатков этого варианта заключается в том, что бот все же может краулить подобные URL, если есть ссылки, ведущие на страницу, отклоненную в файле robots.txt.
В большинстве случаев вам придется использовать комбинацию предложенных выше решений в зависимости от конкретных задач.
3. Большее по размеру и визуально привлекательное навигационное меню на примере сайта компании Big Chill
Качественное навигационное меню верхнего уровня (top-level menu) для электронной коммерции имеет решающее значение для конверсии сайта. Пользователи не должны запутаться в меню, поэтому хорошая идея – последовать примеру компании Big Chill и создать большое и приятное взгляду меню.
Большинство значков меню верхнего уровня (top level menu) просты и состоит из всего одного слова. Такой минималистичный дизайн не отвлекает внимание посетителя сайта.
Когда я поставил курсор на значок магазина, открылась выпадающая вкладка, и я был приятно удивлен, увидев большие и визуально привлекательные варианты для выбора.
На этом скриншоте четко видно, пункты меню отображаются в полноэкранном формате, а картинки на разделах упрощают процедуру выбора для пользователя.
Почему меню большого размера удобно?
Меню верхнего уровня легко активировать кликом или нажатием пальца, а картинки сэкономят время, которое пользователи потратили бы на чтение названий. Подобный интерфейс улучшает взаимодействие с пользователями.
Покупатели могут быстро оценить значки меню и перейти в интересующий их раздел сайта, где они сразу найдут желаемый товар или услугу.
4. Объемный футер на сайте GrubHub
Объемный футер – это хороший способ продемонстрировать аудитории полную картину всего сайта или наиболее важных его страниц, причем вашей целью должно выступать улучшение пользовательского опыта на сайте. Если ваш бизнес обслуживает несколько географических регионов, то перечисление их в футере может улучшить позиции некоторых страниц сайта в результатах поиска (хотя точной гарантии нет, поэтому футер лучше не забивать).
Компания GrubHub демонстрирует местонахождение всех своих точек в футере, что значительно увеличивает его размер.
Чем полезен объемный футер?
Объемные футеры удерживают аудиторию на сайте, так как помогают ей найти искомую информацию или товар быстрее.
Вы также можете улучшить оптимизацию сайта, опубликовав в футере ссылки на важные страницы сайта (например, ссылки на разделы или месторасположение). Эта стратегия увеличит вес ссылок и, таким образом, значимость внутренних страниц, что может привести к более высокому рейтингу сайта, увеличению трафика и, как следствие, продаж.
Комментарий: Не наполняйте футер спамом. Многие вебмастера используют его для увеличения ссылочного веса, но при этом забывают о пользовательском опыте. Всегда держите в уме, что основная задача объемного футера – улучшить взаимодействие с посетителями сайта; таким образом, определите цель сайта и решите, какие ссылки уместно поместить в футер. Не используйте объемный футер для дополнительного ненужного упоминания геолокаций; также помните, что чрезмерно оптимизированный якорный текст, который якобы может продвинуть сайт в поисковиках, будет проигнорирован Google.
Хороший объемный футер для интернет-магазина , к примеру, будет помогать просматривать популярные категории или продукты на сайте, которые иначе было бы трудно найти. Тем не менее, ссылки на все внутренние страницы из футера неприемлемы и будут расценены Google как спам.
5. Дублирование подразделов в разных разделах на примере сайта Best Buy
Вы когда-нибудь думали о том, чтобы повторять ссылки на подразделы? Bestbuy.com показывает одни и те же подразделы в разных корневых категориях. Например, категорию «Home Theatre Systems» можно найти и в «Audio», и в «TV and Home Theatre».
Чем полезно дублирование подкатегорий?
Согласно результатам одного из исследований Measuring Usability, после того как предмет детской мебели был указан в двух разных категориях сайта, процент пользователей, нашедших его, возрос с 29 до 74%.
Улучшенная заметность продукта всегда повышает шансы его продажи.
6. Цветная анимация на примере сайта Skinny Ties
SEO не обязательно быть скучным, всегда найдется место для анимации! Я рекомендую вам добавить немного анимации в систему навигации на сайте, и вы увидите, что она творит чудеса.
Интернет-магазин галстуков Skinny Ties удачно использует цветную анимацию для демонстрации своей коллекции галстуков, чем и завоевал сердца своих пользователей. Вот что отличает их от конкурентов:
На своей домашней странице они показывают категории галстуков такие, как шелковые, полосатые, хлопковые, с графическим дизайном и т.д., в анимационном формате.
Верхнее меню предлагает выбор категории по удобным визуальным подсказкам. Варианты цвета не написаны словами, а показаны в цветовой палитре, так что пользователь сразу поймет, что делать.
Помимо надписей в разделе меню «Ширина» есть фотографии модели, на которых можно увидеть, как галстук будет выглядеть на вас. Здорово, не так ли?
Чем полезна цветная анимация?
Меню в цвете сразу же захватывает внимание посетителя сайта. Он поставит курсор на привлекшую его категорию и не сможет не кликнуть на нее.
Многочисленные визуальные указатели в навигационном меню помогают пользователю понять свойства товара и адекватно оценить, подходит ли он ему. Получая помощь при выборе товара, пользователи чувствуют, что их ценят, и рекомендуют удобный для покупок сайт другим пользователям. Простота процесса покупки может увеличить продажи и прибыль.
7. Ретаргетинг с помощью файлов cookie на и сайта Asos
Делать онлайн покупки удобнее, если вебсайт уже знает, что именно вам нужно. Например, когда я захожу на сайт Asos, он автоматически перенаправляет меня в раздел «мужская одежда», и в верхнем меню отображаются только товары для мужчин. Для меня как покупателя ретаргетинг означает отсутствие необходимости выбирать категорию «мужская одежда» каждый раз, когда я захожу на сайт. Эта функция ускоряет весь процесс покупки и улучшает взаимодействие с аудиторией сайта, то есть, увеличивает продажи.
Технически это называется cookie ретаргетинг, когда встроенный в браузер файл cookie отслеживает выбор посетителей.
Чем полезен cookie ретаргетинг?
Эта функция помогает динамически обновлять меню и предлагать пользователю подходящий ассортимент товаров, основываясь на его высказанных ранее предпочтениях. Сайты электронной торговли, применяющие этот прием, отмечают скачок в количестве продаж.
8. Хорошо различимая строка поиска на примере сайта Zara
Поле поиска часто называют «Святая поисковая строка» (Holy Search Box), потому что грамотный инструмент для поиска крайне важен для удержания посетителей на сайте.
Я часто вижу интернет-магазины с маленькой поисковой строкой, которую трудно обнаружить. Это препятствует эффективному поиску продукта и увеличивает процент отказов.
Посмотрите, как Zara использует выделяющуюся и хорошо видную строку поиска, которую можно использовать сразу при входе на сайт.
Чем полезна поисковая строка большего размера?
Эта функция сайта – последний шанс пользователя найти необходимый товар, если навигационное меню не помогло. Легко обнаружимое поле поиска – это лучший способ направить посетителя сайта прямо на нужную ему страницу.
Возможность поиска внутри сайта делает его более клиентоориентированным и нравится посетителям, искушенным в вопросах поиска.
Установка этой функции позволит вам получить ключевую информацию о покупателях, которую вы сможете потом использовать для оптимизации сайта и дальнейшего корректирования маркетинговой стратегии в целом.
9. Строка со специальными предложениями на примере сайта Mountain Bikes Direct
Если вы хотите, чтобы люди покупали ваш продукт, вам необходимо завоевать их доверие. Строка со специальными предложениями – это еще один интересный элемент дизайна, который может увеличить доверие к вашему продукту и сайту со стороны посетителей, что приведет к увеличению продаж.
Компания Mountain Bikes Direct повысила лояльность своих покупателей, удачно расположив строку со специальными предложениями под верхним меню. В этой строке можно разместить уникальное торговое предложение, ссылку на надежную курьерскую службу доставки, сведения о способах оплаты и о вашей политике возврата, награды и отзывы, полученные вашей компанией в прошлом – эти и другие варианты хороши, чтобы покупатели почувствовали доверие к вам.
Чем полезна строка со специальными предложениями?
Посетители сайта обязательно увидят информацию, размещенную в этой строке, и оценят, почему другие люди доверяют вашей компании. Если строка будет включать полезные для новых посетителей сведения и если они смогут оперативно найти нужный товар, вы быстро завоюете их расположение. Уверенность в бренде значит, что посетители сайта с большей вероятностью совершат покупку. Строка со специальными предложениями создает уверенность в правильном выборе у изначально сомневавшихся покупателей.
10. Функциональное выпадающее меню на примере сайта компании New Balance
Нестандартное навигационное меню, содержащее больше информации о товарах, делает позитивный вклад в улучшения пользовательского опыта. Именно это и демонстрирует сайт обувной компании New Balance. В верхнем меню расположено крупное фото товара и его название. Этот прием привлекает внимание пользователя к товару и улучшает ваше с ним взаимодействие.
Чем полезно функциональное выпадающее меню?
Пользователь наталкивается на продукт при входе на сайт, что избавляет его от необходимости просматривать многочисленные страницы в поисках этого товара. Когда вы выставляете свой лучший продукт напоказ, у посетителей больше шансов заинтересоваться им, а это улучшает пользовательский опыт и, следовательно, обеспечивает коммерческий успех.
Выпадающее меню на полную ширину страницы является прекрасным способом увлечь посетителей. Повышенная заинтересованность аудитории уменьшает процент отказов и увеличивает время, проведенное на сайте. Чем больше времени посетители проведут на вашем сайте, тем больше им захочется купить ваш продукт.
11. Минималистичная вертикальная навигация на примере сайта компании Nua Bikes
Если ваш сайт построен на одностраничном шаблоне, тогда, возможно, компактная вертикальная навигация – самый лучший вариант. Причина проста: ваши пользователи не должны запутаться. Рассмотрите пример сайта компании Nua Bikes.
Навигация слева представляет собой аккуратный дизайн, где пользователи смогут быстро и эффективно найти нужный продукт.
Чем полезно минималистичное вертикальное меню?
Такая навигация необходима сайтам с ограниченным ассортиментом товаров. Сведения о товарах загружаются быстрее, а покупатели скорее попадают в воронку продаж.
Чтобы вертикальное меню сочеталось с другими элементами на странице, его фон должен совпадать с фоном основного контента. Это позволяет посетителю сайта не запутавшись получить доступ ко всему его содержимому.
Заключение
Одна из самых больших ошибок вебмастеров – не использовать приемы, которые будут гарантированно творить чудеса. Рассмотрите предложенные выше варианты и решите, какие из них будут наиболее полезны для вашей аудитории и какие наиболее коммерчески успешны, а потом попробуйте применить их. Вы удивитесь, когда увидите положительные изменения в количестве продаж.
0 Responses to 11 отличных примеров навигации для интернет-магазина, которые помогут увеличить объем продаж