Мобильная версия интернет-магазина: как довести пользователя до покупки, часть третья

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

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

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

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

В прошлой статье мы писали, что карусели в хлебных крошках на «мобилке» стоит использовать только в крайнем случае. Ребята из Baymard Institute назвали пользователей «естественно предрасположенными» к такой механике в новом исследовании.

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

Вот такой Mortal Kombat крупнейших независимых исследовательских институтов.

Мы в Mojo советуем думать головой и выбирать решение под проект:

— если структура сайта сложная и в ней легко запутаться, используйте карусель. Ориентируйтесь на ЦА и проводите тесты;

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

Важно в любом случае:

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

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

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

Точный поиск

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

Если ваш поиск не распознает «шомпунь» или «крем для лнца», то лучше вернуться в офлайн.

Поиск по типу продукта/категории

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

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

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

В помощь несколько типов синонимов, которые следует учитывать:

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

Синонимы региональных диалектов, например, «мочалка» и «вехотка», «капюшон» и «башлык».

Сленговые варианты, например, «ноут» вместо «ноутбук».

10 распространённых непродуктовых запросов:

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

Поиск проблем

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

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

Поиск с авто-фильтром

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

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

Тематический поиск

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

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

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

Поиск совместимости

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

Распространённые варианты введения:

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

Аббревиатуры и поиск символов

Пользователи копируют и вставляют поисковые запросы в поле из различных источников. Скопированные названия могут включать символы. Например, «Мужские джинсы Levi's® 511 ™ Slim-Fit Stretch Jeans».

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

72% мобильных сайтов при поиске показывают только товары и игнорируют их категории.

Предлагайте подходящие разделы — пользователи ещё не начали изучать продукты и могут перейти в категорию.

Пользователи рано или поздно попадут на страницы без результатов. Особенно, если ищут товары по функциям и темам.

Есть две группы страниц без результатов:

Общие — просто оставляют пользователей наедине со своей проблемой.

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

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

6 способов помочь пользователям при нулевой выдаче:

1. Предложите подходящие категории. Если пользователь ищет «красные зимние куртки», но их нет, дайте ссылку на категорию «куртки».

2. Покажите альтернативные результаты.

3. Персональные рекомендации. Отобразите продукты на основании истории просмотров и покупательском поведении пользователя. Это способ указать посетителям на другой интересный для них контент.

4. Дайте номер телефона отдела продаж, ссылку на чат и другую справочную информацию.

5. Реклама. Если поисковая система поддерживает большинство запросов, нулевая выдача означает, что товара на сайте нет. В таком случае можно показать объявление.

6. Покажите хиты продаж или популярные категории.

В исследовании «Бэймард» 57% испытуемых не понимали, как результаты поиска связаны с их запросом. Данные товаров ничего им не говорили.

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

Искать внутри категории — распространенный паттерн поведения. Пользователи хотят сузить широкий выбор и находят пустое поле поиска.

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

Варианты решения проблемы:

1. Показывайте категории в автозаполнении поиска — как в примере с DNS и «Связным». Будет понятнее, что поиск идёт по всему сайту. Решение слабое, но простое в реализации.

2. Дайте выбрать категорию поиска вручную.

3. Внедрить поле «Найти в категории» и, наконец, позволить пользователям искать товары в соответствии с паттерном поведения.

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

Мы уже писали, что по исследованиям Baymard 70% пользователей прокручивают домашнюю страницу до конца при первом посещении сайта.

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

Особенно это важно для сайтов, где навигация скрыта (к слову, не делайте так).

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

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

Важно: футер не должен быть «костылём» для основной навигации. Если интерфейс всего сайта страдает — ссылки внизу страницы не спасут.

Мы уже писали в цикле про десктоп: убирайте всё лишнее из хедера и футера в корзине и чек-ауте. В этой статье пойдём ещё дальше.

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

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

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

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

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

2. Дать ссылки на второстепенные задачи:

3. Указать внутренние бренды

Подойдёт крупным организациям с дочерними компаниями.

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

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

По мнению Nielsen Norman Group, фильтрация должна включать:

NN/g предлагают использовать область уведомлений (tray) для отображения фильтров в мобильных версиях.

Большинство магазинов применяют полноэкранный дизайн. Одновременно демонстрировать фильтры и продукты на «мобилке» невозможно. В области уведомлений контент виден условно — 10% от экрана ничего не дают посетителям. Да, неуверенных пользователей полное изменение интерфейса на дисплее может сбить с толку сильнее, чем выдвинувшаяся страница.

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

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

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

Чтобы разработать фильтрацию категории, нужно ответить на следующие вопросы:

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

Если у вас уже есть инструменты фильтрации, метрики помогут вам определить, какие параметры поиска популярны. Поэкспериментируйте с A/B или даже A/B/n, чтобы уточнить формулировки в фильтрах.

«Перекрёстная» навигация — путь пользователя по связанным элементам, а не линейно по структуре сайта.

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

50% мобильных сайтов не имеют перекрестных продаж или их логика приводит к рекомендации неподходящих продуктов.

Выход:

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

Для тех, кто пролистал в самый низ:

Мы любим ваши вопросы в ЛС и комментариях — задавайте, ответим на все :) Новая статья из цикла по расписанию на следующей неделе, подписывайтесь на Mojo, чтобы не пропустить. Расскажем, как оформить фильтры, каталог и сортировку.

#интерфейсы