Scott
Удобная строка поиска объясняет, что можно найти, позволяет сформулировать запрос своими словами и делает следующее действие предсказуемым. Её задача не сводится к значку лупы. Поле, подсказки, отправка запроса и путь назад должны согласованно показывать, ищет человек среди множества объектов или открывает один уже известный.
Начните с набора объектов и задачи. В библиотеке проектов дизайнер может помнить название, клиента или только фразу из обсуждения макета. Поиск дополняет категории и маршруты из нашего руководства по дизайну навигации, но не должен компенсировать непонятную структуру. Разберём поиск проекта «Spring launch» так, чтобы введённый текст не терялся по пути.
Объясните область поиска до начала ввода
Подписи «Поиск» достаточно, когда сама страница ясно показывает, среди чего искать. Но её мало, если одна и та же шапка может искать проекты, людей, файлы и статьи справки. Укажите область в постоянной подписи, соседнем заголовке или явном переключателе. Подсказка внутри поля может дать полезный пример, но исчезает при вводе и не должна быть единственным объяснением.
Для нашей библиотеки используем подпись «Поиск проектов». Подсказка «Название проекта или клиент» объясняет, какие сведения пригодятся. Не обещайте поиск по комментариям, если сервис индексирует только названия. Если архивные проекты исключены, сообщите об этом рядом с результатами или добавьте фильтр «Включая архивные проекты». Необъяснённые исключения создают впечатление, что исправный поиск не работает.
Глобальный и локальный поиск должны быть похожи, но не одинаковы. Поле над таблицей счетов следует назвать «Поиск счетов», а команда для всего рабочего пространства может искать несколько типов объектов. Когда человек открывает счёт из глобального поиска, сохраняйте различие между выходом из поиска и фильтрацией текущей таблицы. Иначе визуально одинаковый элемент будет менять правила от страницы к странице.
Разделите ввод, очистку и отправку запроса
Сделайте поле достаточно широким для реального запроса, а не только для слова «Поиск». Проверьте короткое название и длинную фразу вроде «Spring launch — обзор для клиента». Длинное значение может прокручиваться внутри поля, но не должно сдвигать кнопку поиска или прятать очистку. Полю нужны заметный фокус, постоянное доступное имя и контраст, который обеспечивается не одной лишь подсказкой.
В этой библиотеке Enter без выбранной подсказки отправляет весь введённый запрос. Кнопка поиска делает то же самое. Очистка удаляет текст и закрывает подсказки, но не уводит со страницы. Эти продуктовые решения стоит принять до детальной отрисовки: кнопка «Найти» не должна неожиданно открывать первый проект.
Определите поведение пустого запроса. Часто понятнее оставить библиотеку в обычном режиме просмотра, чем показывать ошибку с требованием обязательно что-нибудь искать. Если страница действительно не работает без запроса, объясните, что нужно ввести. Не открывайте пустую выдачу, которая выглядит так, будто система что-то искала и ничего не нашла.
Отличайте варианты запроса от прямого перехода
Подсказки могут помочь закончить фразу или сразу открыть известный объект, минуя поиск. Оба варианта полезны, но строка должна объяснять своё действие. В нашей библиотеке после ввода «spring» появляется группа «Варианты запроса» с вариантом «spring launch», а ниже — группа «Проекты» с конкретным проектом «Spring launch». Выбор первого варианта запускает поиск. Выбор второго открывает проект.
Одних совпадающих слов для различения недостаточно. Добавьте тип и немного уточняющего контекста, например «Проект · Studio team». При поступлении результатов этот контекст должен оставаться стабильным. Человек, который собирается нажать вторую строку, не должен случайно выбрать другую из-за перестановки списка под указателем.
| Действие в библиотеке | Что делает интерфейс | Что остаётся видимым |
|---|---|---|
| Ввести «spring» | Предлагает подходящие подсказки, ничего не открывая | Введённый запрос и область «Поиск проектов» |
| Выбрать «Искать spring launch» | Отправляет этот запрос и показывает результаты | Выбранный запрос в редактируемом поле |
| Выбрать проект «Spring launch» | Открывает конкретный проект | Понятный путь обратно к предыдущему поиску |
| Нажать Enter, не выбирая строку | Ищет по текущему введённому запросу | Исходная формулировка, а не невыбранная подсказка |
| Закрыть подсказки | Закрывает список без отправки запроса | Текст, который можно исправить или отправить |
Длинный список подсказок может оказаться хуже их отсутствия. Лучше небольшой набор подходящих вариантов, чем заполнение заранее заданного числа строк. Не смешивайте статьи справки с поиском только по проектам лишь потому, что они доступны из другого сервиса. Если подсказки недостаточно полезны, чтобы облегчить задачу, начните с понятного поля и явной отправки запроса.
Учтите клавиатуру и нестабильное соединение
Для редактируемого поля с подсказками паттерн combobox W3C на английском описывает взаимодействие с клавиатурой и вспомогательными технологиями. Стрелка вниз позволяет перейти к списку, Enter принимает выбранную подсказку, а Escape закрывает его. Обычное редактирование текста должно оставаться доступным. Доступное имя обозначает само поле поиска, а не введённый запрос.
Однако конкретное поведение всё равно нужно выбрать при проектировании. В нашем примере первая подсказка не выбирается автоматически только потому, что появились результаты. Видимое выделение означает, что человек перешёл к строке. Пока строка не выделена, Enter отправляет введённый текст. Прототип поможет обсудить это различие, а работу клавиатуры и вспомогательных технологий нужно проверить и в реализованном компоненте.
Теперь представьте: результаты для «spring» ещё загружаются, а человек уже изменил запрос на «summer». Старый ответ не должен заполнять список так, будто относится к новому запросу. Отметьте это требование рядом с макетом. При короткой задержке оставьте поле рабочим; при заметной покажите ненавязчивое сообщение о загрузке в области подсказок. Фоновый запрос подсказок не должен заменять всю страницу индикатором загрузки.
Если подсказки недоступны, сохраните явную отправку поиска, когда основной сервис продолжает работать. Сообщение «Подсказки недоступны. Нажмите Enter для поиска» объясняет, как продолжить. Если не работает весь поиск, сохраните запрос и предложите повторить попытку. Загрузка, ошибка запроса и реальное отсутствие подсказок — разные состояния, даже если сначала ни в одном из них нет строки для выбора.
Оставьте достаточно места для мобильного поиска
На узком экране компактный значок может открывать отдельное представление поиска. Значку нужно доступное имя, а открытому представлению — видимое поле, понятный выход и место для клавиатуры. Переносите фокус в поле, когда человек намеренно открывает поиск, а не при каждом посещении библиотеки. Неожиданно появившаяся клавиатура скрывает содержимое до того, как пользователь решил искать.
Сохраняйте ту же область поиска и тот же смысл действий, что и на компьютере. Подсказка, которая открывает проект, не должна превращаться в поисковый запрос только потому, что на телефоне меньше места для подписи. Сначала сокращайте второстепенный контекст, а не убирайте различие. Проверяйте длинное реалистичное название проекта, а не только «Демо».
Когда человек открывает проект и возвращается, восстанавливайте отправленный запрос и полезную позицию в выдаче. Если он отменяет мобильный поиск до отправки, возвращайте библиотеку в прежнее состояние. За этими двумя выходами стоят разные намерения. Сохраняя оба, вы не превращаете поиск в маршрут без обратной дороги.
Соберите весь поисковый сценарий в Pixso
Создайте в Pixso три связанных представления: обычную библиотеку проектов, ту же библиотеку с подсказками для «spring» и результаты запроса «spring launch». Сохраняйте одинаковые поля и подписи во всех фреймах. Четвёртый экран с открытым проектом нужен, если вы проверяете прямой переход из подсказки. Инструменты интерактивного прототипирования Pixso позволяют соединить эти экраны и обсудить маршрут с командой.
Дайте участнику задачу, а не указание воспользоваться поиском: «Найдите проект обзора для клиента, связанный с весенним запуском». Посмотрите, понятна ли область поиска, предсказуемо ли действие подсказки и сохраняется ли место после возвращения из проекта. Затем попробуйте запрос без полезных подсказок и длинное название на телефоне. Эти ситуации выявляют другие проблемы, чем вопрос о том, аккуратно ли выглядит компонент.
В передаче разработчикам зафиксируйте главное: действие Enter, обозначение выбранной подсказки, последствия очистки и восстановление состояния при возврате. Успех поиска — в возможности уточнять намерение, не теряя его, а не в максимальном числе строк выпадающего списка.
