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

Если вы читаете эти строки, то бьюсь об заклад вас волнуют вопросы юзабилити. Думаю, вы как и я уделяете кучу времени, пытаясь усовершенствовать каждую деталь вашего сайта: от превосходного отображения на различных устройствах, до создания занимательных страницы 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. Безусловно, многими из вас, данный подход будет отвергнут.

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://css-tricks.com/users-leave-search-box-empty/
Перевел: Станислав Протасевич
Урок создан: 21 Октября 2014
Просмотров: 16245
Правила перепечатки


5 последних уроков рубрики "Юзабилити"

  • Мифы о почтовом маркетинге

    Вы все ещё пользуетесь почтовым маркетингом для продвижения своего бизнеса? Если нет, неужели это следствие того,что вы считаете рассылку неуместной для вашего бизнеса? Если вы все же используете рассылку, уверены ли вы в том, что она максимально эффективна? Как и многие другие вещи в жизни, область маркетинга полна слухов и мифов, которые звучат великолепно, но в действительности только вредят. К счастью, упомянутые ниже примеры помогут значительно улучшить стратегии почтового маркетинга.

  • Разумная достаточность: что это означает при заполнении форм?

    Термин “разумная достаточность” относится к склонности человека использовать минимальные ресурсы для успешного завершения работы. Это явление, которое осуществляется на подсознательном уровне: чаще всего мы даже не задумываемся о том, что сейчас нам необходимо использовать самый минимум усилий для выполнения определённой задачи.

  • Семёрка дизайнерских тенденций, формирующих будущее UX

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

  • Три устаревших UX подхода и их альтернативы

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

  • 15 правил формирования ссылок для людей с ограниченными возможностями

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

^ Наверх ^