UX/UI-рекомендації: створюємо ідеальний внутрішній пошук для ecommerce

Віра Шкребцова

5 Квітня 2021

Поділитися:

Головне завдання пошукового рядка – швидко привести клієнтів до того, що вони шукають. Тому важливо, щоб користуватися нею було просто та зручно. Саме UX/UI Design вирішує такі питання.

Сьогодні розберемося, що таке UX і UI: у чому полягає різниця між ними та що їх об'єднує. Розповімо, як покращити досвід користувачів та інтерфейс сторінки пошукової видачі. Також ви дізнаєтесь думку керівника відділу UX/UI компанії "Турум-бурум" Дениса Студеннікова про продуманий дизайн пошуку.

Дизайн має значення

Стів Джобс

Американський підприємець і винахідник

Дизайн — це не те, який вигляд має предмет, а те, як він працює.

Якщо дизайн є зручним для користувачів, зробити цільову дію буде легше. Так, у 1954 Пол Морріс Фіттс відкрив закон, який дозволяє визначати оптимальні розміри, зони натискання та розташування елементів інтерфейсу з урахуванням простоти їхнього використання.

Ось основні тези з дослідження Фіттса:

чим більша мета (клікабельний елемент інтерфейсу) — тим простіше nf швидше можна її досягти;
водночас не варто робити об'єкти на сайті величезними, оскільки це не принесе значного покращення.

З моменту відкриття закону минуло вже понад 60 років, але він все ще актуальний для проектування й дизайну інтерфейсів. Найбільші компанії застосовують ці закономірності, наприклад, Amazon збільшив ширину вікна пошуку та помістив його ближче до адресного рядка. В результаті після введення адреси веб-сайту та переходу на Amazon.com люди можуть миттєво потрапити у вікно його пошуку.

Ecommerce-гігант підійшов відповідально до розробки функціоналу пошуку, створив не просто відділ, а започаткував свою компанію A9, яка займається створенням технологій для пошуку. A9 створили у 2003 році як незалежну компанію зі штаб-квартирою у Пало-Альто, Каліфорнія. Компанія протягом 16 років займалася розвитком пошуку на сайтах Amazon. Свою співпрацю вони припинили після скандалу в 2019 році через зміни в алгоритмі рядка на користь прибуткових для майданчика продуктів.

Створюємо ідеальний рядок пошуку

У процесі проектування пошуку рекомендуємо враховувати зовнішній вигляд, розташування й функціональність. Ці аспекти доповнюють один одного, щоб сформувати більш зрозумілий і ефективний досвід користувача.

Зокрема UX- та UI-вікна пошуку допомагають заощадити час і допомагають користувачам швидко потрапити туди, куди треба.

UX і UI — поняття різні, але дуже пов'язані одне з одним. Ідеальний продукт завжди починається з досвіду користувача, якому підпорядковуються всі візуальні характеристики.

User Experience або UX (досвід користувача) — це відчуття, які з'являються в людини під час взаємодії з продуктом, сервісом або послугою. UX відповідає не тільки за красу, функціональність і зручність, а й за емоції користувача. Мета UX — домогтися, щоб ваш продукт відповідав комерційним цілям і завданням, викликав у клієнтів позитивні емоції під час кожної взаємодії, тим самим збільшуючи їхню лояльність до бренду.

User Interface або UI (інтерфейс користувача) — це спосіб взаємодії користувача з продуктом, сервісом чи послугою. UI фокусується на тому, який вигляд має інтерфейс: меню, пошук, фільтрація на сайті та інші елементи.

1.1. Зовнішній вигляд пошукового рядка

Вікно пошуку потребує візуального оформлення. Якщо воно буде невдалим, є ризик, що покупець не знайде потрібний товар. Наприклад, текст, який відображається в полі введення, може бути нечитабельним. Або поле для введення пошукового запиту може бути занадто коротким, і користувач не побачить весь текст.

Зовнішній вигляд пошукового рядка включає велику кількість параметрів: колір, розмір, кнопка дії, іконка, текстові підказки та оформлення результатів видачі.

Підказки

Ми рекомендуємо показувати підказку в пошуковому рядку. Це не тільки орієнтує користувачів, що саме вони можуть знайти на вашому сайті, а й додатково привертає увагу до пошуку. Переконайтеся, що текст підказки зникає, коли рядок пошуку стає активним.

Заклик до дії

Вікно пошуку повинне мати кнопку дії (CTA). Особливо в тому випадку, коли результати видачі не підтягуються в режимі реального часу або після натискання клавіші Enter. Поставте чіткий заклик до дії праворуч від рядка пошуку.

Іконка

Зазвичай саме лінза асоціюється з пошуком. Користувачі підсвідомо шукають її, коли хочуть ввести запит. Цей значок має бути простим, контрастним і з невеликою кількістю деталей, як на прикладі нижче.

Колір

Пошуковий рядок на сайті має бути помітним із першого погляду — це робить його більш ефективним. Допоможе в цьому колір – він відразу привертає увагу. Враховуйте колір і візуальний контраст рядка в порівнянні з іншим візуалом на сайті.

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

Наприклад, AliExpress для швидкого розпізнавання та взаємодії виділив панель пошуку яскравим червоним кольором.

Розмір

Розмір поля пошуку повинен бути достатньо великим, щоб текст був повністю помітним. Занадто короткий рядок не заважає користувачам вводити довгі запити, але все ж таки погано впливає на UX. Справа в тому, що вона перешкоджає процесу перевірки й редагування тексту, оскільки видно лише його частину.

Оптимальний розмір пошукового рядка має вміщувати 27-30 символів.

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

1.2. Зовнішній вигляд сторінки видачі

Перейдемо до візуалізації результатів пошуку.

Фото та ціни в результатах видачі

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

Кількість результатів пошуку

Коли клієнти бачать кількість товарів у видачі, це допомагає їм зрозуміти, скільки часу знадобиться, щоб все переглянути. На прикладі нижче видно, що на перегляд 698 записів знадобиться чимало часу. Це спонукає клієнта використовувати фільтри або уточнити запит.

Пошукова видача над розворотом

Термін "розворот" запозичений веб-дизайнерами у поліграфістів. Це лінія, за якою складається газета. Концепція “видимої зони” застосовується й у інших цифрових продуктах. Десктопні й мобільні версії сайтів теж мають зону, яку видно відразу після завантаження, та прихований контент, ознайомлення з яким потребує додаткових дій – скролінгу.

Користувачі прокручують сторінки лише в тому випадку, якщо контент над розворотом є привабливим, цікавим і виправдовує зусилля. Тому завжди показуйте результати пошуку над розворотом. Все, що знаходиться вгорі сторінки, одразу потрапляє в зону уваги користувачів. Важливо, щоб видача не загубилася серед інших елементів сторінки, що не стосуються пошуку. Користувачі очікують побачити товари відразу після натискання кнопки "Пошук", а необхідність скролити — це зайва дія.

Не варто опускати картки товарів під рекламний банер, як на цьому прикладі:

На наступному екрані результати пошуку розміщені над розворотом. Користувач одразу бачить релевантні товари та зацікавлений прокрутити сторінку далі.

Макет сторінки видачі

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

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

Якщо ваші картинки високої якості та ефективно презентують продукт, для зручності відвідувачів ви можете також вбудувати опцію деталізації (лупи), дозволивши їм наблизити будь-яку частину зображення й детально її розглянути. Це особливо важливо для мобільних пристроїв через невеликий розмір екрану.

Прогрес пошуку

В ідеалі результати пошуку мають відображатися миттєво. Але якщо це неможливо, використовуйте індикатор прогресу виконання. Це дозволить візуально інформувати користувачів про те, що система працює. Наприклад:

2. Розташування

Другий аспект, який потрібно враховувати при розробці форми пошуку на сайті — це її розташування.

Місце рядка в інтерфейсі має велике значення. Є безліч варіантів розташування вікна пошуку, але для покращення досвіду користувача — підійдуть два. Найзручнішим місцем буде верхній лівий або верхній правий кут сторінки вашого сайту. Це оптимальне розташування рядка зумовлено F-подібним шаблоном читання.

Дослідження Eyetracking показує, що люди читають веб-сторінки та екрани телефонів за різними шаблонами, але найпопулярнішим все ж є F-подібний. Через 11 років після відкриття він, як і раніше, живий і актуальний у сучасному світі. І це доводить, що UX більше залежить від поведінки людини, ніж від технологій.

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

3.1. Функціональність рядка пошуку

Тепер, коли ми розібралися з дизайном і розташуванням, перейдемо до функціональності. Зрештою лише розумні функції пошуку дозволяють людям знаходити те, що вони шукають, і максимально покращують досвід користувачів. Маркетологам і власникам інтернет-магазинів повинно бути прикро, коли на сайті є цікавий контент і популярні товари, але відвідувачі не можуть його знайти. Щоб уникнути такого результату, ефективний пошук повинен мати такі функції:

Зберегти початковий текст у полі введення

Налаштуйте пошуковий рядок так, щоб запити користувачів не зникали після натискання кнопки Пошук. Якщо користувачі не знайдуть потрібне з першої спроби, вони зможуть уточнити свій запит додатковими словами. Щоб їм було простіше це зробити, залиште початковий запит видимим у полі пошуку, як на фото нижче. Тоді користувачам не доведеться повторно вводити його.

Пропонувати автопідказки

Запропонуйте покупцю те, що йому потрібно! Функція автопідказок заощаджує час користувача. Так, під час введення пошукової фрази відображається блок із підказками:

продовження запиту;
підказка категорії;
підказка бренду;
підказка конкретного товару.

Вони допомагають прискорити процес пошуку та спрямовують користувача до дії, яка підвищить конверсію на сайті. Особливо цей функціонал полегшує життя людям, які користуються вашим сайтом з мобільного. Ну кому захочеться зайвий раз натискати на маленькі кнопки віртуальної розкладки?

Але пам'ятайте, що перелік підказок не повинен бути занадто довгим, щоб не відволікати увагу користувача переглядом непотрібних результатів.

Виправляти помилки

За статистикою Multisearch, 10-15% користувачів припускаються помилок у запиті. Понад 50% із них не уточнюють свої пошукові запити. Вони просто залишають сайт, сподіваючись знайти потрібний товар в іншому місці. Тому важливо щоб пошук розумів, що шукає клієнт.

Розуміти синоніми та враховувати морфологію

Щоб користувач побачив необхідні товари, розумний пошук повинен обробляти запити у всіх морфологічних формах — рід, відмінок, число. А також розуміти контекст запиту й визначати слова синоніми. Детальніше читайте за посиланням.

На фото внизу пошук враховує множинну форму синоніма мобільний телефон.

Розпізнавати транслітерацію

Навчіть пошук переводити кирилицю в латиницю й навпаки. Коли пошук розуміє транслітерацію, немає різниці, яким алфавітом користувач вводить запит, дивіться приклад нижче. Ця функція в рази скорочує кількість незнайдених результатів.

Зберігати історію запитів

Сформулювати, ввести та запам'ятати запит — не завжди просте завдання для покупця. При розробці пошуку ви повинні пам'ятати про основне правило юзабіліті — поважайте зусилля користувачів. Пошуковий рядок повинен зберігати всі останні запити користувача, щоб давати йому ці дані під час наступної взаємодії з системою. Це не лише полегшує шлях клієнта до покупки, а й підвищує лояльність до сайту – позитивний досвід хочеться повторити.

3.2. Функціональність сторінки з результатами

Розглянемо можливості для покращення пошукової видачі:

Пропонувати точні й актуальні результати

Перша сторінка результатів — "золота". Саме результати, які відвідувачі бачать на цій сторінці, формують остаточне рішення людини: купити продукт у цьому інтернет-магазині або продовжити пошуки в іншому. Все залежить від їхньої релевантності. Користувачі дуже часто роблять висновок про цінність сайту саме за якістю результатів видачі. Таким чином, важливо правильно розставити пріоритети — всі найрелевантніші товари повинні з'явитися на першій сторінці видачі.

Синонім якості пошуку – його релевантність. Коли результати видачі відповідають очікуванням користувача, вони релевантні. Але щоб зробити з пошуку справжній генератор доходу, однієї релевантності недостатньо. І тому розумний пошук може ранжувати результати. Тобто рядок враховуватиме, які товари показуватимуться вище, а які нижче, з урахуванням важливих для ecommerce факторів. Як саме це працює, ви можете прочитати тут.

Хороший приклад релевантної видачі на сайті доставки продуктів харчування:

Надавати можливість для сортування та фільтрації товарів

Упорядкувавши результати пошуку, ви полегшите процес вибору та прискорите покупку. Фільтри та сортування у цьому допоможуть.

Кошик у результатах пошуку

Додати товар у кошик, минаючи сторінку з карткою товару, — дуже зручний і корисний функціонал. Така можливість суттєво скорочує шлях до покупки та заощаджує час клієнтів. Коли людина вводить запит, вона одразу ж бачить відповідні товари разом із кнопкою "В кошик", як представлено на фото нижче. Йому не потрібно переходити в картку товару та витрачати час, якщо він уже визначився з вибором.

Правильно наповнюйте сторінку “Нічого не знайдено”

Якщо за запитом не знайдено жодного товару, важливо дати відвідувачам альтернативні варіанти. Альтернативи є своєрідним стимулом для подальшого вивчення сайту. Наприклад:

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

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

Унікальний звіт Multisearch за незнайденими запитами — найкращий порадник, який допоможе дізнатися, що шукають на вашому сайті, але не знаходять в асортименті. З його допомогою ви можете наповнити сайт товарами, які мають попит і принесуть вам прибуток.

Досвід компанії "Турум-Бурум"

Наші друзі з "Турум-бурум" у своїй роботі щодня стикаються з проблемами, до яких призводить погано продуманий дизайн пошуку.

Денис Студенніков

Керівник відділу UX/UI у студії з оптимізації інтерфейсів та розробки ecommerce-проектів "Турум-бурум"

Пошук — це важлива точка росту на сайті, яку часто недооцінюють і не беруть до уваги. Статистика та безліч прикладів з практики компанії Турум-Бурум підтверджують, що якісно розроблений пошук навіть для невеликої аудиторії дає колосальний результат.

Наприклад, під час роботи з проектом Intertop ми визначили, що близько 3% відвідувачів сайту використовують пошук. Здавалося б, цифра незначна, але це близько 60 000 відвідувачів на місяць. Через погану роботу алгоритмів результати видачі були нерелевантними, а відсоток відмов — високим.

Рішення: Ми проаналізували дані аналітики, зібрали перелік запитів користувачів із пошуку, розбили їх на категорії: найменування бренду, розмір, тип товару тощо. На основі цієї інформації переглянули логіку пошуку.

74,64% — ось як збільшився коефіцієнт транзакцій із пошуку після його вдосконалення.

Зверніть особливу увагу реалізації пошуку на мобільних гаджетах. 3,5 мільярда — стільки активних мобільних користувачів є сьогодні, і їхня кількість стрімко зростає. Дійте за принципом mobile-first і правильно адаптуйте інструмент пошуку під мобайл.

Якщо на робочому столі в результатах видачі пошуку можна показати 3-4 рядки товарів, то в мобайлі простір обмежений. Тому реалізуйте рядок пошуку з урахуванням таких моментів:

обов'язково залишайте іконку пошуку в шапці, не ховайте її в бургер;
відкривайте пошук за замовчуванням, особливо якщо на вашому сайті великий трафік. Краще ви сховаєте «Вибране» у бургер-меню, зменшите іконку кошика та логотип, але основну площу нехай займає пошук.

Не забувайте про мікровзаємодії. UX — це не просто розташування блоків, а ще й відчуття, яке отримує користувач від інтерфейсу. Не примушуйте людей робити зайві кліки. Після натискання на іконку пошуку автоматично ставте курсор в input. Щоб було реалізовано процес: натиснув на іконку — одразу почав вводити запит.

Наприклад, для проекту Dicentra.ua ми реалізували повноекранний пошук як на робочому столі, так і в мобайлі. Варіант пошуку у вигляді pop-up або окремому вікні підходить проектам, у яких переважає мобільний трафік. Таким чином ми створюємо окремий фокус уваги й отримуємо додатковий простір під підказки.

Реалізація пошуку в окремому вікні для інтернет-магазину Dicentra:

Висновки:

Не можна недооцінювати пошук, він дає вагомі точки росту. Важливо детально пропрацьовувати всі деталі пошуку для мобайлу, за можливості давати його одразу розкритим. Під час взаємодії з пошуком одразу ставте фокус на полі введення.

Підіб'ємо підсумки

Створена з урахуванням описаних нами функцій панель пошуку подарує вашим клієнтам позитивні емоції та змусить їх повертатися на ваш сайт знову.

Розробка пошуку власними силами — процес тривалий і витратний. Ви можете заощадити час і бюджет, обравши розумний пошук Multisearch. Це готове рішення з великим функціональними можливостями, яке дуже просто встановлюється. Smart-пошук легко знаходить потрібний товар, тому подобається відвідувачам сайтів. Власники інтернет-магазинів точно оцінять збільшення конверсії після інтеграції Multisearch.

Якщо ви хочете дізнатися більше про функції пошуку і про те, чим він може бути корисним, просто зв'яжіться з нами. 14 днів безкоштовного тестового періоду допоможуть вам переконатися в ефективності розумного та швидкого пошуку Multisearch.