форма поиска для сайта

Варианты оформления поля Поиска по сайту на CSS

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

Вариант 1. Поиск с иконками выбора области поиска

HTML

SCSS

jQuery

Вариант 2. Форма поиска с анимированной кнопкой

HTML

Вариант 3. Расширяющаяся панель поиска

Наведите на лупу, чтобы увидеть эффект

HTML

Вариант 4. Панель поиска на CSS

Кликните на лупе, чтобы увидеть эффект

HTML

Вариант 5. Анимация поля поиска на CSS

Наведите на лупу, чтобы увидеть эффект

HTML

Вариант 6. Анимация панели поиска

HTML

Вариант 7. Панель поиска

Кликните на лупе, чтобы увидеть эффект

HTML

Понравилась статья? Поделитесь

Вас может заинтересовать:

9 трендов, которые будут диктовать правила брендинга и дизайна логотипа в 2019 году: яркие цвета, градиенты, минимализм и многое другое!

Вы неравнодушны к красному цвету? Тогда эта статья для вас. Смотрите и комментируйте.

Источник

Найдется все, или как организовать поиск на сайте

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

Поиск позволяет решать следующие задачи:

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

Как должна выглядеть форма поиска

Сразу ответим на популярный вопрос: разместить одну кнопку или показать форму полностью? Лучше отразить поле ввода и кнопку запуска, чтобы не заставлять пользователя совершать лишние действия. Порой такие кнопки не всегда заметны.

Не сразу удается найти кнопку поиска на сайте туристического бюро

Удобно сразу ввести запрос на сайте интернет-магазина одежды

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

Поле ввода. Сделайте его удобным по длине и высоте, чтобы можно было ввести поисковый запрос в 2-3 слова. Используйте крупный шрифт запроса, чтобы пользователи могли разглядеть и при необходимости поправить свой запрос.

Слишком маленькое поле ввода на сайте по продаже сумок:

Достаточно места для запроса на сайте спорттоваров:

Кнопка запуска. Многие владельцы сайтов про нее забывают, и пользователи не могут понять, как запустить поиск. Кнопка должна быть заметной и удобной для клика, поэтому лучше написать на ней текст «Найти» или «Искать», а не использовать мелкую и незаметную иконку лупы. В «лупу» сложно попасть курсором мышки.

Кнопка на сайте типографии не сразу заметна и неудобна для клика:

На сайте книжного интернет-магазине располагается заметная кнопка, по которой легко кликнуть:

Пример удобной кнопки выбора категории товаров с сайта детских товаров:

Где лучше разместить форму поиска

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

Но также обсудим другие варианты:

Главное меню. Подходит, если в меню немного ссылок и есть достаточно места для формы.

Места явно недостаточно для формы
(сайт компьютерного сервисного центра):

Форма легко поместилась в меню
(интернет-магазин чая):

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

На примере сайта по продаже бытовой химии видно, что поле ввода слишком короткое:

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

Пример размещения формы в подвале сайта:

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

Пример размещения формы поиска в основной части страницы на сайте по продаже электронных компонентов:

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

Как правильно выводить результаты поиска

Лучше всего показать результаты на отдельной странице, при этом:

Сохраните введенный запрос. Пользователь должен видеть, что он ввел ранее.

На сайте по продаже одежды и обуви исчезнувший запрос только дезориентирует:

Дублирование запроса помогает не потеряться в интернет-магазине верхней одежды:

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

Над запросом на сайте туристического снаряжения явно не хватает формы поиска:

На странице сайта по продаже сумок удобно вводить следующий запрос:

Указывайте количество найденных результатов. Пользователь должен сразу видеть, сколько вариантов у него есть.

Не ясно, сколько найдено подходящих вариантов. Пример взят с сайта интернет-магазина мебели:

Сразу видно количество найденных статей на сайте юридических услуг:

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

Несмотря на разделительные линии, однотонный текст сливается (пример взят с сайта по продаже систем безопасности):

Результаты хорошо отделены друг от друга на сайте строительного центра:

Не оставляйте страницу результатов пустой. Предложите популярные товары или список статей, возможно, они заинтересуют пользователя.

Такая страница только теряет клиентов. Пример с сайта продажи одежды:

На сайте товаров для дома грамотно выводятся похожие товары:

Используйте подсказки. Помогите потенциальному клиенту быстрее ввести запрос.

Удобно, когда пользователю подсказывают категорию и выводят подходящий товар.

Пример от интернет-магазина товаров для дома и отдыха:

На странице результатов сохраняйте основные элементы навигации. Не должно происходить смены адреса или внешнего вида страницы.

Такие страницы результатов только дезориентируют пользователей. Пример с сайта по продаже установок альтернативной энергии:

Какие инструменты использовать

Выделим основные способы и разберем их плюсы и минусы:

+ Основное преимущество – создание поиска на основе всех ваших желаний и идей, который полностью интегрируется в вашу систему сайта.

– Ограничения: особенности выбранной cms, дороговизна работы специалистов и трата времени на разработку. У многих cms есть встроенные средства, что немного ускоряет процесс настройки поиска.

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

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

+ Большой набор функций, которые помогут сделать поиск более удобным.

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

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

Заключение

Придерживайтесь данных рекомендаций и поиск на сайте станет надежным инструментом в работе с клиентами. Если же вы еще не определились, нужен ли вашему сайту поиск, то пишите в комментариях, подскажем =).

Если возникли вопросы с настройкой поиска по сайту – озвучьте пожелания, поможем с реализацией.

Источник

Поиск на сайте своими руками

Наверное, многие когда-нибудь задумывались, как сделать поиск на сайте? Безусловно, для крупных сайтов с большим количеством контента поиск является просто незаменимой вещью. В большинстве случаев пользователь, впервые посетив Ваш сайт в поисках чего-либо важного, не станет разбираться в навигационных панелях, выпадающих меню и прочих элементах навигации, а в спешке попытается найти что-нибудь похожее на поисковую строку. И если такой роскоши на сайте не окажется, либо он не справится с поисковым запросом, то посетитель просто закроет вкладку. Но статья не о значении поиска для сайта и не о психологии посетителей. Я расскажу, как реализовать небольшой алгоритм полнотекстового поиска, который, надеюсь, избавит начинающих разработчиков от головной боли.

У читателя может возникнуть вопрос: зачем писать все с нуля, если все уже давно написано? Да, у крупных поисковиков есть API, есть такие клевые проекты, как Sphinx и Apache Solr. Но у каждого из этих решений есть свои преимущества и недостатки. Пользуясь услугами поисковиков, типа Google и Яндекс, Вы получите множество плюшек, таких как мощный морфологический анализ, исправление опечаток и ошибок в запросе, распознавание неверной раскладки клавиатуры, однако без ложки дегтя тут не обойдется. Во первых, такой поиск не интегрируется в структуру сайта — он внешний, и Вы не сможете указать ему, какие данные наиболее важны, а какие не очень. Во вторых, содержимое сайта индексируется только с определенным интервалом, который зависит от выбранного поисковика, так что если на сайте что-нибудь обновится, придется дожидаться момента, когда эти изменения попадут в индекс и станут доступными в поиске. У Sphinx и Apache Solr дела с интеграцией и индексированием гораздо лучше, но не каждый хостинг позволит из запустить.

Ничто не мешает написать поисковый механизм самостоятельно. Предполагается, что сайт работает на PHP в связке с каким-нибудь сервером баз данных, например MySQL. Давайте сначала определимся, что требуется от поиска на сайте?

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

Принцип работы

Подготовка

Задача поставлена, теперь можно перейти к делу. Я использую Linux в качестве рабочей ОС, однако постараюсь не использовать ее экзотических возможностей, чтобы любители Windows смогли «собрать» поисковый движок по аналогии. Все, что Вам нужно — это знание основ PHP и умение обращаться с MySQL. Поехали!

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

Теперь вооружаемся своим любимым текстовым редактором и подготавливаем каркас:

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

Морфологический анализатор

Русский язык — довольно сложная штука, которая радует своим разнообразием и шокирует иностранцев конструкциями, типа «да нет, наверное». Научить машину понимать его, да и любой другой язык, — довольно непростая задача. Наиболее успешны в этом плане поисковые компании, типа Google и Яндекс, которые постоянно улучшают свои алгоритмы и держат их в секрете. Придется нам сделать что-то свое, попроще. К счастью, колесо изобретать не придется — все уже сделано за нас. Встречайте, phpMorphy — морфологический анализатор, поддерживающий русский, английский и немецкий языки. Более подробную информацию можно получить тут, однако нас интересуют только две его возможности: лемматизация, то есть получение базовой формы слова, и получение грамматической информации о слове (род, число, падеж, часть речи и т.д.).

Нужна библиотека и словарь для нее. Все это добро можно найти тут. Библиотека находится в одноименной папке «phpmorphy», словари расположены в «phpmorphy-dictionaries». Скачиваем последние версии в корневую папку проекта и распаковываем:

Отлично! Библиотека готова к использованию. Пришло время написать «оболочку», которая абстрагирует работу с phpMorphy. Для этого создадим еще один файл morphyus.php в корневой директории:

Пока реализовано только два метода. get_words разбивает текст на массив слов, фильтруя при этом HTML-теги и сущности типа » «. Метод lemmatize возвращает массив лемм слова, либо false, если таковых не нашлось.

Механизм ранжирования на уровне морфологии

Давайте остановимся на такой единице языка, как предложение. Наиболее важной частью предложения является основа в виде подлежащего и/или сказуемого. Чаще всего подлежащее выражается существительным, а сказуемое глаголом. Второстепенные члены в основном употребляются для уточнения смысла основы. В разных предложениях одни и те же части речи порой имеют совершенно разное значение, и наиболее точно оценить это значение в контексте текста сегодня может только человек. Однако программно оценить значение какого-либо слова все-таки можно, хоть и не так точно. При этом алгоритм ранжирования должен опираться на так называемый профиль текста, который определяется его автором. Профиль представляет из себя ассоциативный массив, ключами которого являются части речи, а значениями соответственно ранг (или вес) каждой из них. Пример профиля я покажу в заключении, а пока попробуем перевести эти размышления на язык PHP, добавив еще один метод к классу morphyus:

Индексирование содержимого сайта

Как уже говорилось выше, индексирование заметно ускоряет выполнение поискового запроса, так как поисковому движку не нужно обрабатывать контент каждый раз заново — поиск выполняется по индексу. Но что же все-таки происходит при индексировании? Если по порядку, то:

В результате получается объект следующего формата:

Пишем инициализатор и первый метод ядра поискового движка:

Теперь при добавлении или изменении данных в таблицах достаточно просто вызвать данную функцию, чтобы проиндексировать их, но это не обязательно: индексирование может быть и отложенным. Первым аргументом метода make_index является исходный текст, вторым — коэффициент значимости индексируемых данных. Ранг каждого слова, кстати, расчитывается по формуле:

Хранение индексированных данных

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

Нерешенным остался лишь вопрос формата индексированного содержимого, ведь make_index возвращает объект, и так просто в базу данных или файл его не запишешь. Можно использовать JSON и хранить его в полях типа LONGTEXT, можно BSON или CBOR, используя тип данных LONGBLOB. Два последних формата позволяют представлять данные в более компактном виде, чем первый.

Как говорится, «хозяин — барин», так-что решать, где и как все будет храниться, Вам.

Benchmark

Давайте проверим, что у нас получилось. Я взял текст своей любимой статьи «Темная материя интернета», а именно содержимое узла #content html_format и сохранил его в отдельный файл.

На моей машине с конфигурацией:
CPU: Intel Core i7-4510U @ 2.00GHz, 4M Cache
RAM: 2×4096 Mb
OS: Ubuntu 14.04.1 LTS, x64
PHP: 5.5.9-1ubuntu4.5

Индексирование заняло около секунды:

Думаю, вполне неплохой результат.

Реализация поиска

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

Все! Поисковый движок готов к использованию. Но есть одно но… На самом деле это не джин-волшебник, и просто закинув его на свой сайт Вы не получите ничего. Его нужно интегрировать, причем этот процесс во многом зависит от архитектуры Вашего сайта. Рассмотрим этот процесс на примере небольшого интернет магазина.

Реализация поиска на примере интернет-магазина

Допустим, информация о продаваемой продукции хранится в таблице production:

А описание в таблице description:

Поле production.keywords будет содержать индекс ключевых слов продукта, description.index будет содержать индексированное описание. И все это будут храниться в формате JSON.

Вот пример функции добавления нового продукта:

Здесь поисковый механизм был интегрирован в функцию добавления нового продукта магазина. А теперь обработчик поисковых запросов:

Данный сценарий принимает поисковый запрос в виде GET-параметра query и выполняет поиск. В результате выводятся найденные продукты магазина.

Заключение

В статье был описан один из вариантов реализации поиска для сайта. Это самая первая его версия, поэтому буду только рад узнать Ваши замечания, мнения и пожелания. Присоединяйтесь к моему проекту на Github: https://github.com/axilirator/firewind. В планах добавить туда еще кучу всяких возможностей, вроде кэширования поисковых запросов, подсказок при вводе поискового запроса и алгоритма побуквенного сравнения, который поможет бороться с опечатками.

Всем спасибо за внимание, ну и с днем информационной безопасности!

Источник

Создание и настройка поиска

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

Шаг 1. Область поиска

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

Техническое название поиска

Название, которое будет отображаться на странице Мои поиски. Его будете видеть только вы.

Название поиска для стандарта Opensearch

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

Семейный фильтр

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

Чтобы заведомо исключить из области поиска страницы с матом и порнографией, настройте семейный фильтр. Настройки фильтра аналогичны соответствующим настройкам большого поиска.

Область поиска

Перечислите через пробел адреса сайтов или их подразделов.

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

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

Исключение страницы somepage.php сайта example.com : http://example.com/somepage.php

Исключение всех страниц раздела /blog/ сайта сайта example.com : http://example.com/blog

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

Если ваша область поиска состоит только из поисковых тем, вы можете указать исключения, нажав кнопку Добавить сайты и исключения.

Шаг 2. Форма поиска

На втором шаге вы настраиваете внешний вид поисковой формы. Настройки автоматически отражаются под заголовком Предпросмотр формы поиска — форма здесь выглядит такой, какой она будет на странице вашего сайта. Обратите внимание: на вашем сайте форма автоматически растянется по ширине доступного ей места.

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

Код получившейся формы доступен на последнем шаге создания поиска.

Шаг 3. Результаты поиска

На третьем шаге вы настраиваете результаты поиска. Главное — решить, на какой именно странице должны показываться результаты поиска (блок Где показывать результаты).

Доступно два варианта:

На странице Яндекса, с вашим логотипом, заголовком и нижним колонтитулом (вариант Показать результаты на Яндексе ).

На странице вашего сайта (вариант Показывать результаты на моей странице ). Если вы выбрали этот вариант, укажите URL страницы, которая будет содержать код результатов поиска. Сам код будет доступен на последнем шаге создания поиска.

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

Шаг 4. Проверка поиска

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

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

Шаг 5. Код для вставки на сайт

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

Выбор кодировки и языка

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

Выбор языка влияет на несколько параметров поиска:

Код поисковой формы

Выбрав язык поисковой формы, вы можете скопировать ее код и вставить в HTML-код страницы вашего сайта.

Код формы Яндекс.Поиска для сайта заключен в элемент

Код результатов поиска

Яндекс.Поиск для сайта предоставляет два кода результатов поиска:

Вставленный вами код результатов поиска встраивает весь HTML-код в структуру вашей страницы. Элементы результатов поиска будут оформлены согласно вашим общим CSS-стилям.

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

Дальнейшая настройка

Созданный поиск появится в списке Мои поиски. Открыв страницу поиска, вы можете изменить все параметры, заданные при создании, а также настроить поисковые подсказки, сниппеты и уточнения поиска.

Источник

Создаем идеальную строку поиска

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

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

Лучшие практики

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

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

Пользователи распознают информацию, которую передает иконка, даже без подписи

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

2. Располагайте строку поиска на видном месте

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

На картинке слева функция поиска скрыта за иконкой

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

Избегайте применять последовательное раскрытие для функции поиска — оно скрывает контекст

3. Снабдите строку поиска кнопкой действия

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

Совет: Не делайте кнопку поиска слишком маленькой, чтобы пользователям не приходилось нацеливаться на нее курсором. Чем больше места она занимает, тем проще заметить и кликнуть.

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

4. Добавьте строку поиска на каждую страницу

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

5. Строка поиска должна быть простой

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

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

Плохо, когда пользователи вынуждены искать строку поиска — это значит, что она не притягивает взгляд и теряется на странице.

Иллюстрация, приведенная ниже, взята из исследования A. Dawn Shaikh и Keisi Lenz: на ней показано, в какой части экрана пользователи ожидают увидеть строку поиска. Эти данные были получены на базе опроса 142 респондентов. Как показало исследование, самые удачные области — верхний правый и верхний левый углы экрана: там пользователям удобнее всего обнаружить строку поиска, следуя стандартному F-паттерну.

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

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

На насыщенном контентом сайте Youtube строка поиска находится в верхней центральной части экрана

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

Общее правило гласит, что в строке ввода должно помещаться 27 символов (этого достаточно для 90% запросов).

У Amazon строка поиска нужной длины

Совет: Подумайте о том, чтобы реализовать строку, которая будет разворачиваться по клику. Таким образом вам удастся сэкономить место на экране и при этом обеспечить достаточно визуальных подсказок, чтобы пользователь мог быстро найти поле и выполнить поиск.

8. Применяйте механизм автозаполнения

Механизм автозаполнения помогает пользователю выбрать нужный запрос, пытаясь предсказать его на основании уже введенной части текста. Он нужен не для того, чтобы ускорить процесс, а для того, чтобы направлять пользователя и помогать ему корректно сформулировать запрос. У среднестатистического пользователя с этим большие проблемы; если он не находит то, что искал, с первого раза, последующие попытки, как правило, оказываются неудачными. Часто люди просто сдаются. Автозаполнение — если оно, конечно, хорошо настроено — способствуют тому, чтобы пользователи использовали более подходящие запросы.

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

Автозаполнение экономит пользователю время и может даже подсказать более удачную формулировку

9. Ясно дайте понять, что именно можно искать

Отображать в поле ввода пример поискового запроса — хорошая идея: так можно донести до пользователей, для чего именно они могут использовать эту функцию. Если пользователь может осуществлять поиск по различным критериям, намекните ему об этом при помощи особого паттерна (как в примере с сайта IMDB ниже). HTML5 позволяет легко добавить текст, который будет по умолчанию высвечиваться в неактивной строке поиска.

Совет: Ограничьтесь несколькими словами, иначе вместо того, чтобы минимизировать когнитивную нагрузку, вы её только увеличите.

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

Источник