Ошибки юзабилити, которые влияют на ключевые метрики интернет-магазина

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

Разделы статьи:  

• На какие метрики можно повлиять с помощью улучшения юзабилити
• Как провести анализ юзабилити своего сайта
• Ошибки интерфейса ключевых страниц сайта
• Главная страница
• Навигация
• Фильтры и страница выдачи
• Карточка товара
• Корзина
• Оформление заказа
• Страница благодарности
• Чеклист по проверке юзабилити

На какие метрики можно повлиять с помощью улучшения юзабилити?

Вот список лишь части метрик, на которые влияют изменения в UX:

• Показатель отказов
• Длительность сеанса
• Среднее время на странице
• Коэффициент микро/макро конверсий
• Коэффициент возврата пользователей
• Трафик
• Средний чек
• Глубина просмотра
• Соотношение трафика desktop/mobile/tablet и др.

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

Внедрение в интерфейс таких инструментов, как upsell и cross-sell позволяет увеличивать средний чек.

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

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

ARPU (Average revenue per user) = Revenue/User

Как провести анализ юзабилити своего сайта

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

Чтобы самостоятельно найти ошибки юзабилити своего сайта, вы можете:

1.   Пройти путь пользователя

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

2.   Проанализировать микро и макро конверсии

Понять, в каких проблемных местах сайта отваливаются пользователи, вам поможет Google Analytics.

3.   Провести исследование аудитории

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

4. Проведите технический аудит

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

Просто пройдитесь по своему проекту.

У нас был кейс, когда 5% пользователей, которые пришли из браузера Edge, абсолютно не конвертировались.  Мы долго думали, в чем причина. А ответ нашли, когда прокликали сайт и увидели, что в этом браузере не работала кнопка купить.

5. Просмотреть карты скролла и тепловые карты

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

6. Просмотреть записи сеансов.

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

7. Получить обратную связь

Анализ ответов реальных пользователей на конкретные вопросы позволит быстро найти и исправить ошибки юзабилити.

Ошибки юзабилити ключевых страниц сайта

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

• Главная страница
• Навигация
• Фильтры и страница выдачи
• Карточка товара
• Корзина
• Оформление заказа
• Страница благодарности

Главная страница

Здесь мы выделили 4 ключевых тезиса, качественная проработка которых может принести вам ощутимую пользу:

1. Соблюдение правила 3-х секунд
2. Концентрация точек входа
3. Наличие конкурентных преимуществ
4. Оптимизированная длина страницы

 1. Соблюдение правила 3-х секунд

По статистике пользователь определяется, готов ли он взаимодействовать с проектом или нет, в течение 3-х секунд. Факторами, которые на это влияют, являются:

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

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

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

В качестве удачного примера правила 3-х секунд рассмотрим дизайн главной страницы интернет-магазина Pampik.

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

2.  Концентрация точек входа

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

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

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

3.   Наличие конкурентных преимуществ

Люди устали от шаблонных формулировок, которым уже не верят. Например, 100% положительных отзывов, это очевидная неправда. Качественный товар, многолетний опыт, профессионалы в своем деле – штампы, которые не вызывают доверия.

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

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

4. Оптимизированная длина страницы

По статистике, если первый экран видят 100% пользователей, то второй уже – 50%, третий – 22%, а четвертый – 1 %. У нас были кейсы, когда открывая Hotjar, мы видели, что люди не доскролливают до определенного блока. Поэтому экспериментируйте с длиной страницы и расположением разделов. В результате вы выйдете на оптимальную структуру, которая будет включать достаточное количество точек входа с быстрым доступом к ним.

Навигация

Навигация включает в себя:

• меню каталога,
• link bar,
• футер,
• другие элементы навигации (сквозные панели с call to action, ключевые кнопки на странице товара)

1. Структурированность всех элементов навигации

Рассмотрим ошибки юзабилити в навигации на примере сайта магазина компьютерной техники Сервер. Первое, что бросается в глаза – это нарушение паттернов: нестандартное расположение кнопок “Вход” и “Регистрация”, сразу под логотипом. Очень маленькие надписи, трехэтажное меню, шапка и навигация шапки выглядят не структурировано.

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

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

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

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

В качестве хорошего примера с навигацией рассмотрим магазин женского нижнего белья и купальников Jullietta.

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

Таким образом, меню решает сразу несколько задач:

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

Еще один удачный пример навигации на сайте.

‍‍

2. Автоисправления и автоматические предложения товаров в поиске

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

Еще один анти-пример: забиваем в поиске магазина название игрушки Hot Wheels на русском языке и получаем нулевой результат.

Сайт не реагирует, не выдает подсказок, вариантов исправления, иного интерпретирования запроса.

Рассмотрим удачный пример: проделав аналогичную процедуру в другом интернет-магазине, мы получили максимум информации и товаре.

Еще один удачный пример с автоисправлением в поиске:

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

Фильтры и страница выдачи

1. Наличие всех необходимых фильтров
2. Фильтры приоритезированы
3. Наличие поиска или "развернуть все"
4. Возможность выбора нескольких фильтров в адаптиве

1. Наличие всех необходимых фильтров

Это тонкая настройка интерфейса, грамотное использование которой, может дать ощутимый результат.

Вот пример того, когда все необходимые фильтры отсутствуют.

Мы видим только 2 фильтра: цена и размер. Отсутствует сезонность, длина, цвет. Т.е. магазин уже теряет позиции в поиске, так как чаще люди ищут по запросу «купить женское зимнее пальто», чем «купить пальто 48 размера». Проект проигрывает с точки зрения маркетинга и усложняет процесс подбора товара для пользователя.

2. Фильтры приоритезированы

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

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

Теперь рассмотрим два примера с разными вариантами решений по приоритезации фильтров.

В этом примере фильтры приоритезированы: диагональ и бренд вынесены вверх.

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

А теперь сравним с анти-примером, где критерии выбора не учтены и фильтры не приоритезированы.

3. Наличие поиска или "развернуть все"

Еще одним грамотным решением создания качественной структуры фильтров является возможность разворачивать полный список опций при помощи кнопки “+”.

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

4. Возможность выбора нескольких фильтров в адаптиве

Относительно адаптивных версий сайта, редкость, когда у пользователей есть возможность использовать несколько фильтров.

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

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

Для этого раздела важны следующие аспекты:

1. Наличие информации для принятия решения о покупке и social proof
2. Отсутствие ссылок, которые уводят со страницы
3. Очевидный call to action
4. Внедрение upsell и cross-sell инструментов

1. Наличие информации для принятия решения о покупке и social proof

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

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

Social proof – этот контент бесценен, за его уникальность стоит бороться. Особенно это касается товаров массового потребления, детских товаров и сегмента, который требует подтверждения качества. Здесь важны отзывы, вопросы/ответы, коммуникация с клиентами.

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

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

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

2. Отсутствие ссылок, которые уводят со страницы

Типичная ошибка в карточке товара: нажимаешь на кнопку “доставка” и тебя перебрасывает в отдельный раздел по вопросам доставки.

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

3. Очевидный call-to-action

Основная задача сайта - побудить пользователя совершить целевое действие (купить товар, забронировать номер и т.п.). Для этого в дизайне карточки товара стоит делать акцент на одной наиболее важной кнопке - call-to-action.

Разберем следующий анти-пример:

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

В качестве дачной реализации можно привести в пример интернет-магазин косметики Mon Amiе.

В этой карточке также использовано несколько кнопок призыва к действию: добавить в избранное, купить в один клик, отложить, задать вопрос. Но при этом есть один четкий и однозначный call-to-action, который ведет пользователя в корзину.

4. Внедрение cross-sell и upsell инструментов

В момент продажи товара надо не бояться предлагать что-то еще, но делать это очень корректно. Это могут быть:

• Похожие товары
• Комплекты
• Сезонные товары
• Те, кто смотрели этот товар, затем купили
• Вам может понравиться
• Товар недели
• Другие товары этого брендаХорошо смотрится вместе с...

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

С помощью специально созданных алгоритмов можно выводить в блок “Похожие товары” продукцию на 5-7% дороже. Грамотное использование cross-sell и  upsell, может ощутимо повысить средний чек.

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

Корзина

Здесь основные аспекты заключаются в следующем:

1. Отработка возможных возражений и вопросов
2. Cross-sell
3. Четкий call to action

1. Отработка возможных возражений и вопросов

Рассмотрим удачный пример отработки возражений на сайте LaModa.

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

Если пользователь часто бросает корзину с товаром, причиной этого может быть то, что он не уверен либо в качестве, либо в том, что он сможет вернуть товар.

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

2. Cross-sell

Увеличить средний чек могут помочь допродажи - cross-sell. В качестве удачного примера cross-sell можем привести корзину интернет-магазина Mon Amie.

После внедрения этого и других решений в интерфейс Mon Amie нам удалось увеличить средний чек в 1,7 раз.

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

Оформление заказа

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

1. Отсутствие точек выхода
2. Оптимизация формы заказа
3. Персонализация и забота

1. Отсутствие точек выхода

Если пользователь дошел до чекаута, важно не упустить его на этом этапе, а “заставить” завершить сделку, но сделать это хитростью. Мы советуем максимально убрать в данном функционале точки выхода, оставив только самые необходимые: например, телефон, номер заказа.

В качестве удачного примера советуем обратить внимание на страницу оформления заказа в интернет-магазине Pampik.

Если пользователь решил уйти с сайта, не завершив целевое действие, можно попросить его оставить свой телефон или email.

2. Оптимизация формы заказа

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

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

В качестве хорошего примера формы заказа мы выбрали один из наших проектов - нишевой магазин насосов.

Форма заказа краткая и помещается в один экран. Заголовки полей ввода написаны понятным языком для целевой аудитории ("Куда выставить счет" и т.п.), подсказки в формах помогают понять, в каком формате должен быть ответ.  

3. Персонализация и забота

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

Например, в форме оформления доставки еды мы добавили пункт “Подготовить сдачу с ...”.

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

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

Еще одним удачным примером может быть решение “Не перезванивайте мне, заказ подтверждаю”.

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

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

Страница благодарности

Страница благодарности - недооцененный функционал, с которым мало кто работает, хотя он дает колоссальные возможности. Thank you page выполняет задачи:

• подтверждения заказа,
• допродаж,
• обратной связи

Рассмотрим страницу благодарности магазина Pampik. На странице описано, что будет происходить дальше. Есть информация о заказе: номер, заказчик, телефон, способ и адрес доставки, способ оплаты. Есть вход в личный кабинет, запрос оставить отзыв о магазине, предложение подписаться на социальные сети, есть сообщение по новой услуге - “Сумка в роддом”.

Сравните теперь со следующим примером, где страница благодарности до конца не проработана.

Таким образом, мы видим, что thank you page - это полноценная страница, рабочий инструмент, который способен приносить деньги и повышать ключевые KPI.

Чек-лист по проверке юзабилити

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

1. Главная страница:

• Соблюдено правило 3-х секунд
• Есть огромное количество точек входа на другие страницы сайта
• Правильно поданы конкурентные преимущества
• Длина страницы оптимизирована

2. Навигация

• Всех элементы навигации структурированы
• Внедрены автоисправления и автоматические предложения товаров в поиске

3. Фильтры и страницы выдачи

• Присутствуют все необходимые фильтры
• Фильтры расставлены по приоритетам
• Есть возможность поиска или решение "развернуть все"
• Есть возможность выбора нескольких фильтров в адаптиве

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

• Есть вся необходимая информация для принятия решения о покупке и social proof
• Отсутствуют ссылки, которые уводят со страницы
• Выделен основной Call to action
• Внедрены upsell и cross-sell инструменты

5. Корзина

• Отработаны возможные возражения и вопросы
• Есть инструмент cross-sell
• Четко виден основной call to action

6. Оформление заказа

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

7. Проработана страница благодарности

Изучите свою целевую аудиторию, особенно ее ожидания, возражения, страхи и проблемы, и постарайтесь их отработать в интерфейсе. Результат не заставит себя ждать. Речь идет не об увеличении дохода на 1-2%, а про использование потенциала роста в 20-30%.

Используйте сервисы для анализа поведения пользователей: Google Analytics, Hotjar, Survio, UX Feedback, Usability Hub и т.п. Это простые инструменты, которые не требуют особой квалификации, но дадут вам достаточно много инфо

‍