Поле поиска: лучшие практики

Search box – это комбинация поля ввода и кнопки подтверждения. Некоторые считают, что окно поиска по сайту не нуждается в дизайне: это ведь всего лишь 2 простых элемента. Однако на веб-сайтах, изобилующих контентом, поиск – наиболее часто используемый элемент дизайна.

Когда пользователь попадает на более-менее комплексный сайт, то первое, что он ищет, – это окно поиска, чтобы быстро и безболезненно найти нужную информацию. Его дизайн и юзабилити играют важную роль.

В этой статье мы рассмотрим, как улучшить этот элемент, чтобы сэкономить время посетителя, и помочь ему попасть туда, куда нужно, с наименьшими затратами времени.

1. Используйте иконку увеличительного стекла

 Search Box всегда должен сопровождаться иконкой увеличительного стекла. Иконки по определению являются визуальным представлением объекта, действия или идеи. Существует всего несколько наиболее узнаваемых среди пользователей иконок, и увеличительное стекло – одна из них.

Пользователи узнают иконку увеличительного стекла даже без текстовой подсказки.

Совет: Используйте схематическую иконку – самый простой и понятный вариант увеличительного стекла. Чем меньше деталей – тем больше узнаваемость.

2. Поместите поле поиска в видное место

Если поиск важен для вашего приложения или сайта, то расположите его на видном месте, чтобы пользователи могли найти его максимально быстро.

Важно, чтобы поле ввода отображалось полностью, а не было скрыто за иконкой – это делает функцию поиска менее заметной и увеличивает стоимость взаимодействия:

3. Search Box нуждается в кнопке

Кнопка помогает людям понять, что для активации поиска есть дополнительный шаг, даже если они захотят сделать это с помощью клавиши Enter.

Советы:

• Размер кнопки подтверждения должен быть настолько большим, чтобы пользователю не пришлось долго целиться мышкой, чтобы в него попасть. Большая кликабельная область облегчит задачу, а также сделает кнопку более заметной.
• Позвольте пользователям активировать поиск как с помощью клика, так и с помощью клавиши Enter. У многих людей до сих пор есть привычка кликать на кнопку, чтобы подтвердить действие.

4. Разместите окно поиска на каждой странице

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

5. Упростите область поиска

Когда вы создаете дизайн окна поиска, убедитесь, что его максимально легко использовать. Исходя из юзабилити, наиболее дружелюбным по отношению к пользователям будет не отображать сложные функции по умолчанию. Продвинутые функции (как в примере ниже) будут сбивать пользователя с толку.

6. Располагайте поиск там, где пользователи ожидают его увидеть

Не очень здорово, когда пользователям приходится искать область поиска.

Диаграмма, которую вы видите внизу, взята из научного исследования Дона Шэика (Dawn Shaikh) и Кейси Ленз (Keisi Lenz): она показывает ожидаемую позицию области поиска. Исследование было проведено на 142 людях. Стало очевидно, что наиболее привычным для пользователей расположением является правый верхний угол каждой страницы вашего сайта, где его легко найти с помощью стандартного F-образного шаблона просмотра.

Исходя из этого, располагайте поиск в правом верхнем углу или в центральной верхней части вашего сайта, и будьте уверены, что пользователи обязательно его найдут.

Советы:

• В идеале, Search Box должен подходить под общий дизайн сайта, в то же время оставаясь выделяющимся для пользователя.
• Чем больше у вас контента, тем важнее отображение функции поиска. Используйте контрасты, чтобы поле ввода и иконка были заметны на фоне и отличались от других элементов.

7. Правильный размер поля ввода

Слишком короткое поле ввода – типичная ошибка дизайнеров. Конечно пользователи могут вводить большие запросы, но только часть текста будет оставаться видимой, а это плохо для юзабилити, потому что пользователи не могут легко просматривать и редактировать свой запрос. На самом деле, когда окно поиска включает только ограниченное количество видимых букв, пользователям приходится использовать более короткие запросы, потому что остаток текста не будет виден. Когда поле ввода такого размера, какого будет его предполагаемое содержимое, то это будет удобнее и легче читаться.

Правило большого пальца предполагает, что поле ввода должно включать 27 символов, тогда в него поместится 90% всех возможных запросов.

Совет: вы можете использовать Search Box, который раскрывается по нажатию. Это сохранит место на экране, сохранив при этом достаточно визуальных подсказок, помогающих быстро найти поиск по сайту.

8. Используйте авто-заполнение

Механизм авто-заполнения помогает пользователям сформировать запрос, пытаясь предугадать его по введенным буквам. Авто-заполнение не только ускорят процесс, но и помогает пользователям сформировать их поисковой запрос. Типичный посетитель не очень силен в формулировках: если он не получит нужный результат с первого раза, то вряд ли у него получится и во второй раз. На самом деле, чаще всего они просто сдаются. Авто-заполнение помогает формулировать правильные запросы.

Google добились мастерства в этом деле, и работают с авто-заполнением уже с 2008 года. Исходя из того, что пользователи ищут одни и те же вещи более одного раза, Google запоминает историю, а затем экономит время пользователей, создавая более быстрое и приятное взаимодействие.

Советы: 

• Убедитесь, что авто-заполнение полезно. Плохо проработанный поиск наоборот сбивает пользователей с толку. Так что используйте авто-корректировку грамматики, узнавание корневых слов и предугадывание текста.
• Авто-заполнение должно работать максимально быстро, примерно с третьего введенного символа, чтобы предотвратить возможную ошибку пользователя.
• Показывайте не более 10 возможных вариантов заполнения (без полосы прокрутки), чтобы не перегружать посетителя информацией.
• Дайте возможность управлять поиском с помощью клавиатуры. Когда пользователь прокрутил предположения до последней строчки, то нужно вернуться в начало списка. Клавиша Esc должна закрывать окно.
• Подчеркните отличие между введенной информацией и предлагаемой авто-заполнением (например, текст ввода имеет стандартное начертание, а предполагаемое продолжение выделено жирным).

9. Должно быть понятно, что пользователь может искать

Неплохо добавить в окно поиска пример запроса, чтобы пользователи могли понять, что они могут найти. Если посетители могут производить поиск по нескольким критериям, то используйте подсказку-шаблон (как в примере ниже). HTML5 позволяет с легкостью добавить такие подсказки с помощью команды placeholder.

Совет: подсказка должна состоять из небольшого количества слов, чтобы не увеличивать длительность загрузки.

Заключение

Поиск – это одно из фундаментальных действий, лежащих в основе создания приложений и сайтов с большим количеством контента. Даже такие незначительные изменения, как правильный размер поля ввода или подсказка, что можно искать на сайте, могут значительно увеличить юзабилити и общий UX.

Перевод статьи Design a Perfect Search Box