Якщо в офлайн-торгівлі покупець може поставити запитання про наявність товару продавцю, то в ecommerce консультантом виступає пошук на сайті. Фахівці з Baymard University вважають, що автозаповнення пошуку – одна з ключових функцій майданчиків в ecommerce. Якщо її реалізовано коректно, у користувача не виникне труднощів із пошуком і купівлею товарів.
Фахівці з Baymard University вивчили різні реалізації автозаповнення пошуку на ecommerce-проектах і виявили серед них ті патерни, які працюють найкраще:
- обмежене число пропозицій;
- відсутність смуг прокрутки;
- різні уточнювальні мітки;
- перенесення тексту;
- наочна різниця у варіантах;
- акцент на тому, що цікавить користувача;
- візуальна глибина;
- мінімум зовнішніх елементів.
Обмежене число речень
Список пропозицій має бути обмеженим. Інакше плашка з варіантами закриває всю область перегляду – через це незручно користуватися сайтом і керувати пошуком загалом. Фахівці Baymard University зазначають, що оптимальна кількість – 10 пропозицій. Якщо їх більше, покупець або ігнорує всі, або витрачає занадто багато часу на те, щоб їх вивчити. У мобільних версіях інтернет-магазинів варто пропонувати ще менше варіантів, ніж на десктопах – від чотирьох до восьми.
На прикладі нижче під час пошуку відображається три варіанти, у яких найбільше відгуків. Так користувач бачить сайт, а поле автозаповнення не закриває важливі елементи інтерфейсу. Якщо натиснути на значок лупи, можна побачити всі інші доступні варіанти за запитом.
Жодних смуг прокрутки
Замість смуг прокрутки краще просто обмежити саме поле з варіантами автозаповнення, як сказано в попередньому пункті. Вбудовані скролбари можуть викликати у користувачів труднощі під час роботи з сайтом – особливо, якщо під час прокручування скрол відбувається самим сайтом, а не тільки областю пошуку.
Більше уточнюючих міток
Хоча більшість людей вже інтуїтивно знають, як користуватися пошуком, ваша аудиторія може включати і менш досвідчених веб-користувачів. Для них варто додати мітки, які допоможуть відрізняти одне від іншого: наприклад, пропоновані варіанти від категорій товарів і сторінок конкретних брендів.
На сайті IKEA розроблено систему уточнюючих міток. Популярні запити на сайті позначені значком лупи, категорії товарів – окремим символом у вигляді квадрата, а конкретні пропозиції товарів відразу відображаються з фотографіями.
Перенесення тексту
Коли варіанти автозаповнення обрізаються на мобільних пристроях (наприклад, у вигляді три крапки), користувачі не можуть переглянути їх цілком. Замість цього можна використовувати перенесення, щоб користувач прочитав весь текст і зрозумів, що йому пропонують.
Наочна різниця у варіантах
Стилізуйте автозаповнення в пошуку на сайті так, щоб за зовнішнім виглядом варіантів було зрозуміло, що пропонує сайт, а що користувач уже ввів сам. Найпростіший і найзручніший варіант – жирним шрифтом позначити ту частину, яку пропонує сайт, а звичайним залишити те, що надрукував покупець (або навпаки).
Акцент на тому, що цікавить користувача
Коли пропозиція, на яку користувач навів курсор, виділяється візуально, це спрощує взаємодію з сайтом. Крім цього, багато операційних систем і великих сайтів привчили людей до того, що автозаповненням можна керувати за допомогою клавіатури.
Тому важливо підтримувати і таку навігацію – стрілки вгору і вниз повинні переміщати по варіантах, а клавіша Enter перенаправляти на сторінку пропозиції, на якій курсор стоїть в даний момент. В ідеалі список ще “повертається” до початку, коли користувач доходить до кінця.
Пропозиція, виділена блакитним кольором, – та, на якій користувач зупинився. Переміщатися по всьому полю можна за допомогою клавіш на клавіатурі.
Візуальна глибина
Візуальні елементи на веб-сторінці постійно конкурують за увагу користувача. Коли користувач шукає товар, решту області краще затемнювати, загострюючи увагу саме на пошуку. Це мінімізує ризик, що користувач відволічеться.
Мінімум зовнішніх елементів
Якщо автозаповнення пропонує безліч елементів з різних розділів, це може трохи спантеличити. Елементи, що відволікають, краще звести до мінімуму, щоб користувач міг зосередитися на автозаповненні та вивчити товар. Особливо це важливо для мобільних версій сайтів, де місце, отже сильно обмежене розмірами пристроїв.
