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