Ошибки UX в ecommerce: Поиск

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

Согласно отчету Forrester Research, 43% посетителей интернет-магазинов сразу идут в поиск. У этого простого способа навигации по сайту и товарам много преимуществ:

Мы собрали частые ошибки в дизайне и юзабилити, которые все портят.

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

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

Как оказалось, размер окна — общая боль обувных магазинов. У бренда Westfalika все не так плохо: поиск сразу предлагает варианты и даже показывает миниатюры. У многих конкурентов нет даже этого. Кто-то пытается решить проблему выпадающим поиском, но получается не очень.

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

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

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

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

Вердикт: поиск по сайту должен быть в центре внимания и выделяться, как усы Супермена.

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

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

Вот вам обойма: Tezenis, «Эстель Адони», Fräulein Kink. Особенно любят такой поиск зарубежные бренды, наши чаще прячут его за иконкой лупы — зато справа.

На сайте ARDI посетители видят такую картину: сначала ссылка на новую коллекцию, потом на разделы каталога, форма подписки, рекомендуемые товары, информация о компании, преимущества, доставка и оплата, отзывы — и наконец поиск. В подвале.

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

Оказывается, внятный поиск на сайте магазина нижнего белья — такая же редкость, как большой поиск в обувном. Но нам повезло: у Oysho он на месте и работает как надо.

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

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

Поиск СберМаркета и Metro на тот же запрос ничего не показывает, хотя умеет. В выдаче после «мы не можем найти товар» — список рекомендаций, в котором первые две позиции у молока. Во всяком случае, на другие запросы с опечатками поиск реагирует адекватно — ну или дело в количестве ошибок.

Испытание лактозой прошел «Утконос»: выпадающие подсказки и выдача — 10/10.

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

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

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

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

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

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

Напоследок эксперимент с маркетплейсами: берем бренд, которого точно нет на этих площадках и запускаем поиск.

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

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