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

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

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

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

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

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

Содержание

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

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

Проблема

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

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

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

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

Проблема

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

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

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

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

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

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

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

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

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

Проблема

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

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

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

Проблема

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

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

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

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

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

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

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

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

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

Проблема

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

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

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

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

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

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

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

Проблема

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

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

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

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

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

Проблема

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

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

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

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

Проблема

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

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

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

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

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

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

Проблема

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

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

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

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

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

Проблема

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

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

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

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

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

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

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

Проблема

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

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

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

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

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

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

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

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

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

Проблема

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

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

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

А на сайте-то этот товар есть? И что это за адреса? И чем отличается статус «В наличии» от «Много»?

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

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

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

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

Проблема

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

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

У вас получилось сразу найти кнопку «Купить»?
Да, без проблем.
Нет, сначала я увидел плашку про бонусы.
Показать результаты
Переголосовать
Проголосовать

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

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

Проблема

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

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

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

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

Проблема

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

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

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

Проблема

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

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

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

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

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

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

Ошибка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Насколько вам интересны статьи такого формата?
Очень интересны, пиши ещё.
Нет, это пустая трата времени.
Показать результаты
Переголосовать
Проголосовать
0
107 комментариев
Написать комментарий...
Даниил Харьков

Вы как сантехники! каждый новый сантехник считает своим долгом обгадить работу предыдущего! Если решения действительно увеличили продажи, конверсию и средний чек, то ребята молодцы! Они могут это посчитать и поменять! Не понимаю автора задело то, что у них работает и он написал километры текста анализа, вместо того, чтобы делать своё? или своё делать лень? скинь свои работы? хайпануть решил? когда начнет бомбить в следующий раз, тоже будешь х страдать? такие аудиты нах не нужны, т.к. они касаются конкретного ресурса! твои гипотезы могут совсем не работать или и того хуже снизить конверсию на другом! и на этом тоже могут снизить! анализировать можно ТО, что можешь ПРОВЕРИТЬ!

Ответить
Развернуть ветку
Ruslan Kokin
Автор

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

Ответить
Развернуть ветку
Даниил Харьков

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

Ответить
Развернуть ветку
Ruslan Kokin
Автор

Это не гипотеза, это печальный факт.

Ответить
Развернуть ветку
Даниил Харьков

Если вы можете это проверить, то да? можете проверить? есть ли у вас хоть какие-то реальные цифры?

Ответить
Развернуть ветку
Ruslan Kokin
Автор

А у вас есть обратные факты? Может уже скинете маску и опубликуете вашу аналитику о том, что все чудесно, а я зря жуть навожу?

Ответить
Развернуть ветку
Даниил Харьков

тут уже нет смысла продолжать ветку. вы даже на простой вопрос не можете честно ответить!

Ответить
Развернуть ветку
Ruslan Kokin
Автор

А вы?

Ответить
Развернуть ветку
104 комментария
Раскрывать всегда