Заделываем бреши в навигации: проверьте, насколько ваш интернет-магазин удобен для пользователей. Читайте на Cossa.ru

25 ноября 2020, 10:25

Заделываем бреши в навигации: проверьте, насколько ваш интернет-магазин удобен для пользователей

Татьяна Воронцова, ведущий UX-специалист компании Registratura из iConText Group, рассказывает, как решить основные проблемы посетителей сайта и получать максимальную отдачу от вложений в разработку ресурса.

Заделываем бреши в навигации: проверьте, насколько ваш интернет-магазин удобен для пользователей

У вас собственное производство, отличное качество продукции, вы давно на рынке. Но даже в этом случае никогда не помешает провести UX/UI-аудит сайта. Если пользователь не сможет найти нужный товар, не поймёт, чем (кроме цены) различаются похожие модели, велика вероятность, что он уйдёт на соседнюю вкладку браузера — к вашим конкурентам.

В агентство Registratura.ru обратился производитель оконных изделий из клееного евробруса — компания «ИнВуд». Она выполняет полный спектр услуг в сфере остекления домов и квартир пластиковыми и деревянными окнами. Приоритетное направление — деревянные окна.

МегаФон ПроБизнес

Получите Кешбэк 100% за запуск рекламы с МегаФон Таргетом!

Узнать больше >>

Реклама. ПАО «МегаФон». ИНН 7812014560. ОГРН 1027809169585

Задача состояла в том, чтобы выявить проблемы, с которыми сталкивается покупатель в ходе поиска/выбора деревянных окон, и дать рекомендации.

Подготовительный этап

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

Шапка сайта

Изделия из сосны охватывают все возможные варианты. Поэтому в качестве объекта поиска мы выбрали деревянное окно из сосны.

Классификация деревянных окон на сайте

Считаем, что у пользователя нет проблем в процессе поиска и выбора товара, если:

  • не возникает вопросов к навигации: пользователь понимает, где и как найти категорию «Деревянное окно» и подкатегорию «Деревянное окно из сосны»;

  • посетитель видит, что деревянное окно из сосны представлено в трёх модификациях: «Эконом», «Стандарт» и «Премиум»;

  • пользователь может сравнить варианты товара по ключевым характеристикам;

  • на странице товара представлена хорошо структурированная, исчерпывающая информация об изделии;

  • не возникает проблем с заказом товара;

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

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

Сценарии поведения пользователя на сайте

Сценарий № 1 — Окна. Пользователь ищет деревянное окно из сосны 1350×1200. Посмотрел несколько сайтов. Выбирает оптимальное сочетание цена-качество. Начинает с главной страницы.

Находит в меню пункт «Окна».
Открывает меню второго уровня.
Выбирает категорию «Деревянные окна»/подкатегорию «Окна из сосны».
Переходит на страницу подкатегории «Деревянные окна из сосны со стеклопакетом» (путь к странице «Главная — Деревянные окна — Окна из сосны»). На первом экране видит тематическую картинку и SEO-текст. Начиная со второго экрана — анонсы окон.

Проблема № 1. Из названия страницы «Деревянные окна из сосны со стеклопакетом» непонятно, что речь идёт об окнах премиум-класса.

Далее пользователь находит на странице два подходящих окна (различаются поворотным механизмом).
Переходит по ссылке «Подробнее» на страницу «Окно из сосны двухстворчатое глухое /пов.-откидное».
На первом экране карточки товара видит краткое описание: схематичное изображение изделия, основные параметры (ширина, высота, тип окна, фурнитура и прочие) и CTA-кнопку «Заказать окно». По клику на кнопку открывается форма заявки (Имя/Еmail/Телефон/Комментарии).

Проблема № 2. Пользователь не увидел, что окно из сосны 1350×1200 может быть выполнено в трёх вариантах: «Эконом», «Стандарт» и «Премиум».

Проблема № 3. На сайте не используется дополнительная мотивация пользователя:

  • скидку 5% могут получить пенсионеры;
  • скидку 5% могут получить пользователи, пришедшие по рекомендации;
  • можно купить окно в рассрочку;
  • срок гарантии продлевается на 7 лет при покраске по системе DYE +.

Кроме того, если покупатель решит просмотреть страницу полностью, то обнаружит, что можно выбрать цвет окна, изменить предустановленную фурнитуру и тому подобное. Выбор зафиксируется в форме заявки после нажатия на СТA-кнопку «Получить».

Проблема № 4. Функционал изменения характеристик (варианты ручек, цвет покрытия) оформлен как обычное иллюстрированное описание. Есть вероятность, что пользователь его просто не заметит.

Сценарии поведения пользователя на сайте продажи окон - схема 1 «Окна»

Схема сценария № 1 — «Окна»

Сценарий 2 — Стоимость. Пользователь ищет товар в условиях ограниченного бюджета, а именно — деревянное окно 1350×1200 до 3000 рублей. Просмотр начинает с главной страницы сайта.

Находит в меню пункт «Стоимость».
Открывает меню второго уровня, находит категорию «Окна экономкласса».
Переходит в подкатегорию «Деревянные окна экономкласса» (путь к странице «Главная — Деревянные окна — Окна экономкласса»). На первом экране видит SEO-текст. Начиная со второго экрана — анонсы окон.
На странице подкатегории находит два подходящих по размеру варианта: за 2000 и 2900 рублей. Выбирает «Окно экономкласса из сосны двухстворчатое глухое /пов.-откидное». По ссылке «Подробнее» переходит в карточку товара с подробным описанием.
На странице есть CTA-кнопка «Заказать окно». По клику открывается форма заявки «Имя/Еmail/Телефон/Комментарии».

Проблема № 1. Бюджет нашего пользователя — 3000 рублей. Соответственно, его могут заинтересовать окна «Стандарт» (2700 рублей) и «Премиум» (3000 рублей).

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

Сценарии поведения пользователя на сайте продажи окон - схема 2 «Стоимость»

Схема сценария 2 — «Стоимость»

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

  • В разделе «Окна» он найдёт только изделия премиум-класса.
  • В разделе «Стоимость» — три вида окон: «Эконом», «Стандарт» и «Премиум».

Как решить проблемы пользователя

Мы предложили внести изменения, которые сделают поиск и выбор изделия более удобными. Основные рекомендации связаны с блоками «Навигация», «Страница категории/подкатегории» и «Карточка товара» нашего чеклиста.

1. Навигация

На сайте «ИнВуд» каталог не выделен в отдельное меню. На верхнем уровне нет пунктов «Оплата» и «Доставка». Заголовок страницы не всегда даёт полное представление о контенте (пример с деревянными окнами из сосны премиум-класса).

Навигация для сайта продажи окон - чеклист по UX-аудиту интернет-магазина

Фрагмент страницы деревянных окон из сосны премиум-класса

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

Навигация для сайта продажи окон: меню - чеклист по UX-аудиту интернет-магазина

Меню на сайте конкурентов

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

Навигация для сайта продажи окон: пример решения - чеклист по UX-аудиту интернет-магазина

Пример решения

2. Страница категории/подкатегории

Страница должна содержать ответы на вопросы пользователя.

  • Ту ли категорию я выбрал/Соответствует ли это моим ожиданиям?
  • Есть ли в этой категории ещё товары? Где они?
  • Вот то, что я хочу купить. Как сделать заказ прямо сейчас?

Наши рекомендации

Добавить на страницу фильтр «Класс товара», чтобы пользователь видел все варианты («Эконом», «Стандарт», «Премиум») и мог быстро переключаться между ними.

Навигация для сайта продажи окон: фильтры - чеклист по UX-аудиту интернет-магазина

Пример решения. Фильтры

Внести изменения в анонсы товаров.

  • На сайте у каждого 1-, 2- и 3-створчатого окна по три анонса, которые различаются одной характеристикой — поворотным механизмом. Рекомендуется вместо трёх сделать один анонс с вариантами товара, в котором изменяемый параметр будет реализован в виде выпадающего списка.

  • Указать ключевые параметры, по которым различаются изделия одного размера и материала, но разного класса стоимости. Например, стеклопакет и покрытие. Это поможет покупателю сравнить изделия и сделать выбор.

  • Добавить CTA-кнопку «Заказать».

  • Дополнительно мотивировать пользователя скидками и рассрочкой.

Навигация для сайта продажи окон: анонсы товаров - чеклист по UX-аудиту интернет-магазина

Пример решения. Анонс товара

3. Карточка товара

На этой странице пользователь должен найти ответы на следующие вопросы.

  • Это товар, который я ожидал увидеть?
  • Сколько стоит?
  • Почему мне выгодно купить именно здесь и сейчас?
  • Каковы основные характеристики и преимущества товара?
  • Есть ли отзывы тех, кто уже купил?
  • Есть ли аналоги?

Навигация для сайта продажи окон: карточка товара - чеклист по UX-аудиту интернет-магазина

Фрагмент карточки товара (деревянное окно из сосны премиум-класса)

В ходе проведения аудита мы отметили следующие моменты.

  • Если пользователь пришёл на сайт с поискового запроса на товарную карточку, он не увидит, что перед ним изделие премиум-класса. В заголовке страницы <h1> это никак не отражено.

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

  • Не очевидно, что можно поменять ручки и цвет для выбранного окна.

  • На сайте есть акции, которые могут дополнительно мотивировать на покупку, но на странице с товаром эта информация никак не используется.

  • Покупателю не предлагаются аналоги — товары того же размера и той же ценовой категории, но в другом исполнении.

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

Внесение изменений, предложенных в блоке «Навигация», «Страница категории/подкатегории», «Карточка товара», должны упростить поиск и выбор деревянного окна на сайте. Схематичный путь пользователя по сценарию 1 (окна) и сценарию 2 (стоимость) будет выглядеть следующим образом:

Навигация для сайта продажи окон: схематичный путь пользователя - чеклист по UX-аудиту интернет-магазина

Рекомендованная схема

Чеклист для проверки сайта

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

1. Навигация

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

Навигация - чеклист по UX-аудиту интернет-магазина/сайта

2. Страница категории/подкатегории

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

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

Страница категории/подкатегории - чеклист по UX-аудиту интернет-магазина/сайта

3. Карточка товара

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

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

Карточка товара - чеклист по UX-аудиту интернет-магазина/сайта

Подробный чеклист для проверки удобства и привлекательности сайта смотрите на сайте Registratura.ru. Используйте рекомендации для улучшения юзабилити ресурса и повышайте конверсию!

Источник фото на тизере: Scott Webb on Unsplash

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.

Телеграм Коссы — здесь самый быстрый диджитал и самые честные обсуждения: @cossaru

📬 Письма Коссы — рассылка о маркетинге и бизнесе в интернете. Раз в неделю, без инфошума: cossa.pulse.is

✉️✨
Письма Коссы — лаконичная рассылка для тех, кто ценит своё время: cossa.pulse.is