Когда на сайте несколько статей, обычного меню хватает.

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

Так появилась идея глобального поиска, который открывается через Ctrl + K.

Почему обычной формы поиска было мало

Классический поиск обычно живёт на отдельной странице.

Пользователь вводит запрос, отправляет форму, ждёт загрузку и получает список результатов.

Для большого информационного сайта это нормально. Но на AllBlog многие запросы короткие и конкретные:

json
regex
метаданные
stable diffusion
python

Хотелось, чтобы результат появлялся сразу и не вырывал человека из текущей страницы.

Что должен искать глобальный поиск

Главная задача — объединить разные типы содержимого.

В одной выдаче могут находиться:

  • статьи;
  • онлайн-инструменты;
  • категории;
  • команды навигации;
  • отдельные разделы сайта.

Пользователь не обязан помнить, является JSON Formatter статьёй, сервисом или пунктом меню. Он вводит название и получает подходящую страницу.

Почему именно Ctrl + K

Это сочетание уже знакомо пользователям многих современных приложений.

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

Сценарий выглядит так:

  1. пользователь нажимает Ctrl + K;
  2. поверх страницы открывается компактное окно;
  3. фокус сразу переходит в поле;
  4. результаты обновляются во время ввода;
  5. нужный пункт открывается через Enter.

Закрыть окно можно клавишей Esc.

Клавиатура должна работать полностью

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

Поэтому добавлены базовые действия:

↑ — предыдущий результат
↓ — следующий результат
Enter — открыть
Esc — закрыть

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

Это небольшие детали, но без них командная палитра ощущается недоделанной.

Как формируется индекс

Для каждого элемента поиска нужен компактный набор данных:

  • заголовок;
  • тип;
  • URL;
  • короткое описание;
  • ключевые слова.

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

exif
gps
фото
метаданные
очистить фотографию

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

Что делать, если ничего не найдено

Пустой блок с надписью «0 результатов» мало помогает.

Лучше предложить следующий шаг:

  • изменить запрос;
  • открыть каталог сервисов;
  • перейти к категориям;
  • очистить поле.

На AllBlog при пустой выдаче остаётся ссылка на каталог инструментов. Даже неудачный поиск не превращается в тупик.

Внешний вид тоже важен

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

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

Самая заметная часть — поле ввода. Самая сложная — десяток мелочей вокруг него.

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

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

Фильтрация выполняется прямо в браузере, поэтому результаты появляются моментально.

По мере роста сайта подход можно будет усложнить: добавить полнотекстовый поиск, веса полей, исправление опечаток или серверный индекс.

Но начинать с тяжёлой поисковой системы не было смысла.

Итог

Хороший поиск — это не только алгоритм совпадения строк.

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

Ctrl + K оказался небольшой функцией, которая связала разные части AllBlog в одну систему.