Хабрахабр

Как маркетологи Максидома теряют миллионы заигрываясь в гроуз-маркетинг: независимый юзабилити-аудит

Личный взгляд UX-дизайнера на уловки «гроуз-хакеров» интернет-магазина Максидом на фоне треша и проблем в интерфейсе, заставляющих пользователей страдать.

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

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

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

Содержание:

  • Навигация: взаимодействие с каталогом товаров
  • Навигация: поиск на сайте
  • Страницы категории второго уровня
  • Карточка товара
  • Корзина и оформление заказа
  • Немного о аксессибилити
  • Список гроуз-маркетинговых уловок

Навигация: взаимодействие с каталогом товаров

Главное в любом ecommerce-проекте — товары. Для удобного доступа к ним существует множество интерфейсных решений, но основным до сих пор остается каталог.

Проблема

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

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

Как исправить

Снизить контрастную нагрузку со статических элементов (например, верхнего меню), обеспечив достаточную идентификацию кнопки «Каталог товаров».

Проблема

Неоптимальное представление меню, появляющегося после нажатия на кнопку «Каталог товаров».

Представленное в виде вертикального списка ссылок без какой-либо сортировки, меню является очень сложным для восприятия и взаимодействия с посетителями. Список из 24 пунктов содержит разные по смыслу и объему группы товаров (например: «скобяные изделия» и «игрушки»).

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

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

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

Как исправить

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

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

Проблема

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

Как исправить

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

Проблема

Для каждого уровня каталога существует отдельная страница. Например, для каталога первого уровня она выглядит так:

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

Так выглядит страница каталога второго уровня:

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

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

Как исправить

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

Навигация: поиск на сайте

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

Проблема

При взаимодействии с поисковой строкой не используются поисковые подсказки, фактически ставшие стандартом для ecommerce-проектов.

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

Как исправить

Внедрить подсказки при взаимодействии со строкой поиска.

Страницы категории второго уровня

На уровне категорий второго уровня появляется возможность взаимодействия со списком товаров.

Проблема

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

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

Как исправить

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

Проблема

Некорректное использование выделения ссылки при наведении в блоке «Все подкатегории».

 

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

Как исправить

Использовать стандартный для сайта способ выделения ссылок или в целом пересмотреть подход к взаимодействию с блоком.

Проблема

Некорректное применение чекбокса для выделения параметров фильтра.

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

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

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

Как исправить

Более явно показывать, что каждый пункт фильтра является группой со своим набором параметров. Отказаться от использования элементов, которые могут трактоваться пользователями иначе. «Сбросить» можно вообще не показывать до применения каких-либо параметров фильтра. Применить разные стили оформления для кнопок «Показать» и «Сбросить».

Проблема

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

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

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

Как исправить

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

Проблема

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

Красным выделены зоны, не содержащие какой-либо ценной (с учетом контекста) информации. Зеленым выделены элементы, достаточные для взаимодействия и выбора товаров из ассортимента.

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

Информация о наличии, цена, кнопка «Купить» и сравнение являются элементами одного порядка и должны быть визуально объединены.

Как исправить

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

Объединить в одну группу элементы одного порядка, такие как: информация о наличии товара, стоимость, кнопка «Купить» и сравнение.

Проблема

Интерфейс сайта также предлагает альтернативное представление списка товаров — плиткой.

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

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

Но стоит ли это интерфейсное решение дополнительных неудобств взаимодействия с соседними товарами? Расширение карточки товара вправо оправдано только необходимостью добавить кнопку «В корзину».

Как исправить

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

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

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

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

Проблема

Не достаточно информативное отображение информации о наличии товара.

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

Перейти и понять, что это информация о наличии в конкретных магазинах:

И что это за адреса? А на сайте этот товар есть? Да, при первом посещении сайт пытается узнать ваш регион, но делает это не сильно убедительно:

И возможность как-то повлиять на это, если не увидеть слабозаметное сообщение вверху слева, нет. Если это сообщение пропустить, то на карточке товара будет отображаться информация о наличии в магазинах Санкт-Петербурга.

Как исправить

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

Проблема

Кнопка «Купить» оторвана от цены и имеет неприоритетное оформление. Попробуйте расслабить зрение и сразу найти кнопку «Купить» на скриншоте ниже:

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

Как исправить

Оформить кнопку «Купить» так, чтобы исключить любые ложные интерпретации. Визуально объединить логически связанные элементы: информацию о наличии, цену и кнопку «Купить». Снизить визуальную нагрузку в оформлении информации о бонусах.

Проблема

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

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

Как исправить

Указывать возможные варианты, сроки и стоимость доставки прямо на карточке товара.

Проблема

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

Как исправить

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

Проблема

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

Но, закрыв всплывающее окошко с этим предложением, становится невозможным понять, в корзине уже этот товар или еще нет? А как перейти к оформлению заказа?

Как исправить

Для товаров, находящихся в корзине, заменять кнопку «В корзину» на явное сообщение о том, что товар уже находится в корзине и предлагать переход к оформлению заказа.

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

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

Проблема

Слабая идентификация товаров в корзине. Так выглядит корзина, когда в ней нет товаров:

А так выглядит корзина, когда в ней есть товары:

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

Как исправить

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

Кто же ваши клиенты?

Согласно найденному в сети описанию рекламных возможностей для поставщиков, сам Максидом считает более 60% своих покупателей обеспеченными зрелыми людьми в возрасте 35-55 лет. В этом возрасте часто встречается ослабление зрения. Как разработчики сайта это учли?

В общем, все для людей. Сайт предлагает очень мелкие фотографии товаров, а важная информация отображается крайне мелким шрифтом со слабой контрастностью.

Уловки вместо решений

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

Отказать невозможно

Единственный шанс убрать это сообщение — принять и простить. Интерфейс задает вопрос от которого невозможно отказаться.

«Че» тут непонятного?

Понятно? Вам покажут запрос на уведомления и вы должны его принять.

Не, ну в самом деле, хотите?

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

Просмотрели еще несколько страниц?

Стало немного больше красного, правда? И вот сайт выглядит уже так. Так вот же они, внизу в виде красной плашки. Разбирая ошибки на карточке товара, я писал об отсутствии информации про способы оплаты, гарантию и возврат. Я тоже не сразу. Не заметили? Нет! Можно ли сделать что-то с этим элементом, например, узнать особенности доставки? Смотрите на плашку, а когда надоест, просто скройте.

Нужно повысить доверие, придумайте что-то!

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

Как, вы еще не подписались на уведомления в браузере?

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

И даже имейл не оставили? Будем напоминать сразу после пушей

Контрольный выстрел для совсем не сговорчивых

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

Почему это вы решили уйти с сайта?

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

Что же делать?

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

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

***

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

Покупали на нем что-то? Что вы думаете о сайте Максидом? Напишите в комментариях.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть