Когда пользователи оставляют поле поиска пустым...

Если вы читаете эти строки, то бьюсь об заклад вас волнуют вопросы юзабилити. Думаю, вы как и я уделяете кучу времени, пытаясь усовершенствовать каждую деталь вашего сайта: от превосходного отображения на различных устройствах, до создания занимательных страницы 404! В то же время, вы когда-то задумывались, что произойдёт, если пользователь оставит поле поиска пустым, а затем нажмёт Enter?

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

Перезагрузка / Перенаправление на Главную

Примеры: Web Designer Wall и Team Treehouse Blog.

В этих случаях, скорее всего, используется 1) стандартный функционал поиска через WordPress и 2) отсутствует файл шаблона search.php (или шаблон такой же, как на главной странице). Таким образом, пользователь будет переправлен на главную страницу сайта, без применения поисковых фильтров. Такое поведение может показать несколько странным.

Отсутствие какого-либо действия

Примеры: Codrops и SitePoint.

На данных сайтах, при введении пустого значения, поле поиска просто закрывается или вовсе ничего не происходит.

Вывод сообщения: “Ничего не найдено”

Примеры: CSS-Tricks и WinningWP.

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

Вывод всех свежих материалов

Примеры: WebDesignerDepot и Code Tuts+.

В результате видим список самых последних постов.

Абсолютно пустой результат

Примеры: Smashing Magazine и Designmodo.

В качестве результата получаем абсолютно пустой ответ.

Ошибка

Примеры: TheNextWeb и 1stWebdesigner.

На странице видим сообщение об ошибке.

Ещё варианты

Так что же должно произойти, если пользователь ввёл пустое значение в поле поиска? С помощью атрибута 'required' (HTML5) можно пойти по пути наименьшего сопротивления.

<input required type="search" name="q" id="q">

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

<form id="search-form" action="/search-results/">
  <div>
	<label for="q" id="search-label">
  	Search
	</label>
	<input required aria-labelledby="search-label" id="q" type="search" name="q" class="search-field" value="">
	<input type="submit" value="Search" class="screen-reader">
  </div>
</form>

Что насчёт более старых версий браузеров? Неужели этого достаточно? Как ещё можно улучшить данный процесс?

Лично я считаю, что неплохо было бы отобразить пользователю пустой результат. В то же время, предлагаю включить чувство юмора, фантазию и отобразить нечто забавное. Применить тот же подход, что и с страницами 404. Безусловно, многими из вас, данный подход будет отвергнут.

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

Какой из перечисленных вариантов больше подходит вам? Давайте обсудим это!