Форма поиска, возможно, является одним из наиболее важных элементов интерфейса и на то есть много разных причин. Во-первых, поиск помогает расширить глубину вашего контента. Будь то платформа электронной коммерции или новостной сайт, форма поиска – это то место, куда пользователи будут переходить, чтобы получить необходимую им информацию. И, во-вторых, поиск по вашему сайту дает ценный фидбек. Какой контент ищут больше всего? На каких страницах пользователи чаще всего используют форму поиска и почему? Цель состоит не в том, чтобы разделить эти два варианта использования, а объединить их вместе с UX-дизайном.
Таким образом, эта статья поможет вам понять, как лучше всего подойти к поисковым формам на любом веб-сайте или в мобильном дизайне. Мы также рассмотрим некоторые приемы дальнейшего улучшения поиска. Прочитайте эту статью, чтобы узнать больше!
Поиск влияет на вашу прибыль
Функция поиска по сайту – универсальная вещь. Сегодня она есть в дизайне 99% сайтов, и во многих случаях поиск по сайту напрямую повлияет на вашу прибыль.
Это включает в себя продажи, конверсии, лиды и все, что заставляет пользователя выполнять выгодные для бизнеса действия.
Вот несколько фактов:
- До 80% пользователей покидают сайт, если качество поиска не соответствует норме.
- Успешный поиск приводит к увеличению коэффициента конверсии в 2 раза.
- В среднем пользователи сдаются после 8 секунд на попытку что-то найти.
Понятно, что поиск должен стать неотъемлемой частью вашего дизайна, а не внешней функцией. Итак, давайте попробуем сосредоточиться на этом.
Где лучше разместить форму поиска?
Несмотря на то, что заманчиво разместить форму поиска там, где вам хочется, лучше разместить ее там, где будет удобно вашим пользователям.
Как неписаное правило, дизайнеры соглашаются, что сверху по центру и сверху справа – лучшие области для размещения окна поиска. Тем не менее, вы должны использовать индивидуальный подход для своего сайта.
Давайте взглянем на некоторые примеры.
1. Verywell
Verywell – это платформа, посвященная всем видам новостей о здоровье. Сайт работает как платформа для блогов. Тем не менее, первое, что пользователи видят при заходе на домашнюю страницу – это массивное окно поиска.
На то есть две причины:
- Это сайт, ориентированный на информацию и ее доступность.
- Verywell использует «Поиск» и «Категории» в качестве фактической функции навигации по сайту.
В отдельных сообщениях блога Verywell использует традиционный подход к иконкам, чтобы пользователи знали, где находится форма поиска.
Но когда пользователи нажимают на иконку, они видят не просто форму ввода. Вместо этого, Verywell старается еще больше, чтобы сделать сайт максимально доступным для поиска.
Вот так:
Открывается оверлей, в котором отображаются связанные темы и другие навигационные ссылки, и, конечно же, здоровенное окно поиска по середине страницы.
Это просто показывает, как, казалось бы, скучную форму можно превратить в нечто замечательное.
2. Quora
Quora живет и дышит поиском контента, поэтому для команды дизайнеров было очень важно правильно настроить функцию поиска.
Это первый пример размещения, который является частью идеологии дизайна. В этом примере Quora использует панель навигации, чтобы выделить только самые важные функции сайта, среди которых поиск.
Если вы посмотрите вверх, вы увидите функцию автозаполнения:
И если автозаполнения недостаточно, вы можете перейти к реальной странице поиска.
Она выглядит так:
Обратите внимание на обширные функции, представленные на этой странице. Пользователи могут даже искать контент от других людей!
В поиске главное не только внешний вид, но и то, что происходит после того, как пользователи нажимают клавишу Enter!
Если вы не уверены, где размещать форму поиска, то анализ самых популярных сайтов в вашей нише быстро выявит общие закономерности.
А что насчет мобильного интерфейса?
Почти всегда в мобильных дизайнах вы хотите разместить панель поиска в верхней части страницы.
А в верхнем левом или правом углу полностью зависит от других функций вашего сайта.
Символы и кнопки
Существует два часто используемых типа поисковых форм: одна простая, а другая с дополнительной иконкой, в качестве кнопки «отправить».
Идея заключается в том, что пользователи могут нажать кнопку «Enter» или щелкнуть по увеличительному стеклу, чтобы отправить поисковый запрос.
И хотя вы видите это увеличительное стекло повсюду, не все дизайны позволяют отправить запрос без нажатия клавиши «Enter».
Определенно приятно на мобильных устройствах иметь возможность нажать на иконку. И если вы сделаете это, убедитесь, что иконка имеет соответствующий размер, и пользователи не будут случайно щелкать по другим элементам страницы.
Сделайте поиск доступным на любой странице
Дизайн должен быть последовательным.
Если ваша основная навигация содержит ссылки на разные страницы, почему эти другие страницы не имеют такой же доступности меню? Многие сайты используют меню для указания на блог, но как только вы попадете туда, форма поиска либо отсутствует, либо скрыта где-то на боковой панели.
Поэтому вы можете просто использовать согласованное меню навигации для всех страниц. Конечно, в этом меню должно быть окно поиска.
Кроме того, страницы 404 – это еще одна область, где дизайнеры обычно забывают разместить форму поиска. Если пользователь попал на страницу 404, это означает, что он не смог найти то, что искал. Следующим шагом будет поиск сайта c рабочей страницей.
Подумайте о расширенных параметрах поиска
Если на вашей платформе есть контент, основанный на множестве вариантов выбора, вам нужно убедиться, что пользователи могут сузить поиск на основе нескольких выбранных фильтров.
Вот пример функции поиска на Stack Overflow:
Поскольку каждый «ответ» работает как отдельный ввод данных, пользователи могут использовать синтаксис расширенного поиска, чтобы сузить свой поиск до пользователя или даже конкретных URL-адресов, используемых в ответе.
Чем больше глубина поиска, тем легче пользователям найти именно ту часть контента, которая им нужна.
А вот пример от Airbnb:
Возможность искать дома, в которых есть «тренажерный зал» или «возможность обустроить рабочее место», значительно улучшает пользовательский опыт.
Проектирование доступного поиска для мобильных пользователей
Мобильные экраны выпускаются в сотнях разных размеров и разрешений. Чтобы сделать поиск доступным для всех, обеспечьте доступность формы поиска, как по ширине, так и по размеру шрифта.
Любой скажет, что маленькие формы ввода и кнопки часто приводят к нажатию не того элемента сайта. И многие пользователи просто не станут пользоваться таким сайтом.
Автозаполнение – обязательная функция для больших сайтов
Прогнозируемые формы поиска существуют уже много лет, но вы можете упускать из виду их преимущества в своих собственных проектах. В первую очередь, автозаполнение экономит время. Если пользователи могут избежать нескольких шагов, чтобы попасть на страницу, это огромный плюс в плане пользовательского опыта.
Google хорошо известен своей функцией автозаполнения, но это не единственный способ добавить автозаполнение в ваш проект. Если вы управляете магазином электронной коммерции, автозаполнение может значительно улучшить пользовательский опыт, автоматически предлагая различные типы продуктов, которые есть в вашем каталоге.
Этот пример от Alibaba – только один из многих, которые вы найдете среди самых популярных платформ электронной коммерции.
И если вы хотите внедрить автозаполнение для мобильных пользователей, я настоятельно рекомендую ознакомиться с этой статьей от Algolia.
A / B тест нескольких вариантов
Как и любой другой элемент дизайна, поисковые формы не являются окончательными и не привязаны к определенному стилю. Хотя примеры, показанные в этой статье, демонстрируют доступность, они не демонстрируют индивидуальный выбор дизайна.
Поэтому, чтобы добиться наилучших результатов, настоятельно рекомендуется опробовать поиск по стилю и размещению с помощью A/B тестирования.
Изображение BoldMinded
К инструментам для тестирования относятся Optimizely, AB Tasty, и, если у вас есть ресурсы, вы можете использовать все сразу. Разные сайты имеют разные типы аудитории, поэтому A / B-тестирование разных мест размещения даст вам четкое представление о том, что работает, а что нет.
Вывод
Поиск – достаточно важная функция дизайна, поэтому пользователи почти всегда будут помнить плохой опыт. Следовательно, правильно реализованная форма поиска гарантирует удовлетворительные результаты для вас и ваших пользователей.
Вот резюме всего, что мы узнали в этой статье:
- Поиск влияет на прибыль вашего бизнеса. Поиск без усилий приводит к переходам без усилий.
- Широко признано, что размещение формы поиска в верхнем колонтитуле обеспечивает лучший пользовательский опыт.
- Использование таких кнопок, как увеличительное стекло, дает пользователю необходимый триггер и возможность отправлять свой поисковый запрос различными способами.
- Будьте готовы, что пользователи попадут на несуществующие страницы. Чтобы вытащить их с этих страниц, сделайте поиск доступным по всему сайту.
- Расширенные параметры поиска позволяют пользователям сузить область поиска до нужной им страницы / сегмента.
- Мобильные формы должны быть четко видны и учитывать экраны разных размеров.
- Автозаполнение сокращает время, необходимое для поиска конкретной страницы или продукта.
- A / B-тестирование показывает, как различные места размещения формы поиска влияют на коэффициент конверсии и, в конечном итоге, на пользовательский опыт.
Знаете другие способы, как сделать поиск в интерфейсах доступным для всех? Пишите в комментариях!
Об авторе: Алекс Ивановс – специалист по цифровому маркетингу, обладающий талантом копирайтера и UX-дизайнера. Посетите его сайт The Divine Indigo.
Перевод статьи icons8.com
Топ коментарі (0)