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

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

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

Эффективная и выгодная реклама с сервисом от МегаФона

Широкий выбор рекламных каналов, более 100 параметров по интересам, подробная аналитика и другие возможности уже ждут в Личном кабинете. А еще кешбэк 100% за запуск рекламы в первый месяц и еще 10% — каждый месяц.

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

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

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

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

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

Шапка сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Навигация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Навигация

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

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

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

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

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

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

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

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

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

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