7 найкращих практик дизайну та розміщення вікна пошуку
Вікно пошуку є одним із найважливіших елементів веб-сайту. Незалежно від того, яким типом бізнесу ви займаєтеся, важливо мати добре спроектоване вікно пошуку, щоб відвідувачі могли легко знайти те, що вони шукають. Це не означає, що достатньо просто додати функцію пошуку, навіть не замислюючись про те, як вона виглядає.
Вам потрібно врахувати функціональність, зручність використання, естетику та навіть розташування вікна пошуку. Це все для того, щоб ви могли покращити взаємодію з користувачем на своєму веб-сайті, що навіть може призвести до збільшення конверсій.
Отже, що вам потрібно зробити, створюючи вікно пошуку? Хоча точні рекомендації можуть бути суб’єктивними залежно від ваших потреб і цілей, є кілька загальних порад, які можуть працювати для різних типів веб-сайтів. Отже, ось деякі з найкращих методів розробки та розміщення вікна пошуку:
1 Зробіть це помітним
Перше і найважливіше правило дизайну вікна пошуку — зробити його легко помітним. Можливо, ви надто зосереджені на естетиці дизайну, щоб створити вікно пошуку, яке поєднується з рештою веб-сайту. Але важливо пам’ятати, що ви додаєте вікно пошуку для людей, які хочуть щось знайти на вашому веб-сайті. Змусити їх шукати у вікні пошуку не матиме сенсу та може навіть негативно вплинути на їхній досвід.
Це не означає, що ви повинні повністю піти на компроміс щодо естетики. Придумайте дизайн, який чудово виглядатиме на тлі вашого існуючого дизайну веб-сайту, але залишатиметься достатньо помітним, щоб люди його помітили. Тому розмір поля має бути великим, але не надто великим, щоб воно займало забагато місця на сторінці. І колір має бути контрастним, але доповнювати решту кольорів, які використовуються на сторінці.
Вікно пошуку Best Buy є хорошим прикладом, оскільки білий колір контрастує з синім сторінки, але все ще вирівнюється з іншими кольорами, використаними в дизайні сторінки. Розмір вікна пошуку не надто великий, але все ще достатньо помітний, щоб люди одразу помітили його, коли вони заходять на сторінку.
2 Виділіть кнопку Надіслати
Як згадувалося раніше, основна мета вікна пошуку – полегшити роботу відвідувачам сайту. Уникайте надмірного ускладнення за допомогою мініатюрних кнопок надсилання, на які користувачі повинні зосередитися, щоб натиснути. Виділення кнопки надсилання покращує видимість самого вікна пошуку, а також полегшує натискання користувачами.
Ви вирішуєте, чи використовувати піктограму збільшувального скла чи написати «Надіслати» в кнопці «Надіслати». Однак зосередьтеся на розмірі та кольорі кнопки, щоб користувачі не мали проблем знайти її після введення в Поясніть їм, що вони мають робити після введення того, що вони шукають.
Деякі веб-сайти навіть розміщують лише значок збільшувального скла, щоб відвідувачі могли щось шукати. Це може виявитися дуже корисним для естетики веб-сайту, як у випадку з Levi’s Strauss. Але це не оптимальний приклад дизайну вікна пошуку.
Хоча це виглядає добре з точки зору дизайну, це може бути незручно для відвідувачів, оскільки їм доводиться чекати, доки завантажиться вікно пошуку після натискання піктограми лупи. Це може бути неприємно, особливо якщо ви заходите на сайт із місця, де з’єднання повільне. Замість того, щоб завантажувати його окремо, можливо, краще розгорнути вікно пошуку в тому самому місці, де розміщено збільшувальне скло.
Якщо простір обмежений, але пошук важливий, може бути добре, якщо він змішується з верхньою панеллю навігації. Це саме те, що shralpin зробив на своєму мобільному сайті.
З іншого боку, у Xero Shoes взагалі немає кнопки надсилання. Відвідувачі повинні будуть ввести ключове слово в поле пошуку, а потім натиснути Enter, щоб шукати щось на сайті. Тепер ви можете подумати, що не так вже й погано просто натиснути клавішу Enter, щоб розпочати пошук, але як щодо решти відвідувачів? Деякі з них можуть спеціально шукати кнопку «Надіслати», і можуть мати труднощі з пошуком за допомогою такого типу дизайну.
Кнопка надсилання в Amazon досить помітна помаранчевим, тоді як решта вікна пошуку біла. Колір кнопки надсилання також контрастує з темнішим кольором заголовка веб-сайту. Отже, хоча вони використовують лише піктограму збільшувального скла як кнопку надсилання, вона все одно добре помітна, на відміну від прикладу Levi’s. Переконайтеся, що піктограма доповнена, оскільки це збільшить видимість.
3 Розмістіть його там, де користувачі найімовірніше шукатимуть
Тривають дебати щодо найкращого місця розміщення вікна пошуку на веб-сайті. Але якщо ви подивитеся на деякі з найпопулярніших веб-сайтів, ви помітите, що вікна пошуку часто розміщуються вгорі по центру або у верхньому правому куті сторінки. Про це свідчить дослідження, опубліковане SLI Systems. Аналіз показав, що 54% роздрібних продавців розміщують вікно пошуку у верхньому правому куті, 30% у центрі та лише 16% зліва.
Це означає, що відвідувачі можуть очікувати, що вікно пошуку буде у верхньому правому куті вашого веб-сайту. Якщо розмістити його десь несподівано, користувачам може знадобитися докласти додаткових зусиль, щоб знайти поле пошуку. Незважаючи на це, доцільно вивчати активність відвідувачів за допомогою теплової карти або інструменту стеження за очима. Це допоможе вам визначити, де вони, швидше за все, шукатимуть, і допоможе вам зрозуміти, де слід розмістити вікно пошуку на вашому сайті.
Незалежно від того, вибираєте ви ліворуч, праворуч чи по центру; переконайтеся, що він розташований у верхній частині сторінки, оскільки згідно з дослідженням відстеження погляду NN Group відвідувачі, швидше за все, спочатку скануватимуть саме тут. Було б корисно провести A/B-тест на різних місцях розташування вікон пошуку, а потім визначити яка позиція здається вам найкращою.
Ось приклад вікна пошуку, розміщеного в правій частині сторінки від Get Plus Followers.
Вікно пошуку EBay розташоване в центрі сторінки, де воно добре видно, і це одне з перших речей, які відвідувачі помітять про веб-сайт.
4 Поєднайте автозаповнення з графікою
Ваш веб-сайт може бути серед 62,5%, які використовують функцію автозаповнення у вікні пошуку. Щоб отримати конкурентну перевагу, ви можете ще більше вдосконалити функцію, додавши попередній перегляд зображень продукту разом із пропозиціями автозаповнення у вашій функції пошуку. Це пояснюється тим, що лише 28,2% веб-сайтів-учасників наразі впроваджують цю функцію.
Щоб додатково обґрунтувати автозаповнення за допомогою графіки, ви можете поглянути на корпус LED Hut. Після додавання попереднього перегляду зображень до пропозицій автозаповнення постачальнику світлодіодного освітлення вдалося збільшити коефіцієнт конверсії пошуку на 200%. Ось як це виглядатиме, якщо ви додасте попередній перегляд зображень до пропозиції пошуку.
5 Уникайте ізоляції або переповнення вікна пошуку
У першому пункті згадується, наскільки важливо зробити поле пошуку помітним. Це означає, що вам слід уникати перенасичення прилеглих територій піктограмами чи іншими елементами, які можуть відволікати відвідувачів від вікна пошуку. Вікно пошуку має бути пріоритетним і зосередженим на ньому. Водночас не перестарайтеся, оскільки ви можете в кінцевому підсумку ізольувати вікно пошуку, що ускладнить його пошук.
Вікно пошуку Snow and Rock є хорошим прикладом добре розробленого вікна пошуку. Як ви можете бачити на зображенні нижче, на місці, де він розміщений, не надто багато елементів. Але ви все одно можете побачити його в центрі ліворуч на сторінці, а не там, де користувачам буде важко знайти. Кнопка надсилання також контрастує з іншими кольорами на веб-сайті, що робить її помітною.
6 Виберіть вікно пошуку, що розширюється
Якщо ви шукаєте способи заощадити простір і водночас зробити вікно пошуку помітним для користувачів, ви можете обрати вікно пошуку, що збільшується. Це ідеальний вибір для веб-сайтів, на яких пошук не надто важливий, але ви все одно хочете дати користувачам можливість шукати щось. Замість додавання лише піктограми збільшувального скла ви додасте невелике вікно пошуку поруч із ним, яке буде візуальною підказкою для відвідувачів сайту. Коли користувач клацає поле, вікно розгортається й дозволяє користувачам вводити потрібний термін.
Ось хороший приклад від Net-a-Porter. Якщо ви подивіться на праву верхню частину веб-сайту, ви побачите, що поле пошуку видно, але не надто велике. Існує піктограма збільшувального скла, щоб користувачі могли визначити, що це параметр пошуку.
Але як тільки ви клацнете поле, вікно пошуку розгорнеться, і ви введете необхідний пошуковий термін. Таке поєднання естетики та зручності використання чудово підходить для веб-сайту, який має включати багато елементів на головну сторінку, оскільки це допомагає вам заощадити місце без шкоди для видимості вікна пошуку.
Вікно пошуку існує для людей, які вже мають уявлення про те, що вони шукають. Але як щодо тих, хто не дуже впевнений, що вони шукають? Можливо, у вас є функція автоматичного заповнення пропозицій, але для деяких веб-сайтів доцільно додати функцію розкривного меню поруч із вікном пошуку. Це дає користувачам відчуття напрямку та дає їм підказки про те, що шукати.
Ця тактика виявилася успішною для Casa Mineira, бразильської компанії з нерухомості. У прикладі, проведеному на веб-сайті, заміна стандартного поля пошуку спадними меню допомогла залучити більше потенційних клієнтів. Насправді ця зміна призвела до збільшення кількості потенційних клієнтів на 57,25%, ніж раніше.
Причина, чому цей варіант так добре спрацював, полягає в тому, що відвідувачам було надано чіткий шлях дій, і вони могли швидко знайти те, що шукали. У попередньому дизайні відвідувачі мали бути впевнені, що саме вони шукають. Тому, щоб краще орієнтувати відвідувачів, вони вирішили охопити широкий спектр місць і типів розміщення.
Але важливо пам’ятати, що цей варіант може бути не найкращим для всіх типів веб-сайтів. Наприклад, магазин електронної комерції може бути не в змозі зробити пошук більш функціональним для відвідувачів за допомогою цієї техніки. Але для компаній з нерухомості та компаній, пов’язаних із послугами, функція пошуку в розкривному списку може бути ідеальним рішенням.
Нижня лінія
Тепер ви краще розумієте дизайн і розташування вікна пошуку за допомогою прикладів і порад. Отже, чого ви з цього навчилися? Можливо, ви помітили наголос на видатності та видимості вікна пошуку. Це означає, що контраст кольорів, естетика та розмір вікна пошуку є одними з найважливіших аспектів.
Ваша увага повинна бути зосереджена на поєднанні функціональності та естетики, що може бути непросто виконати. Найкраща порада, яку ви можете отримати, це провести тестування A/B на різних дизайнах і позиціях, як зазначено в попередніх пунктах. Маєте запитання щодо дизайну вікна пошуку? Не соромтеся залишити коментар нижче.