Когда мы приступили к разработке компонента Combobox для нашей библиотеки, перед нами встали вопросы, как правильно должен работать поиск:
- Нужно ли выделять совпадения в раскрывающемся списке?
- Должны ли совпадения основываться на первых буквах или нет?
- Если нет, то надо ли выше показывать, что соответствует первым буквам?
Характеристики поиска
Поиск местоположения Поиск может осуществляться на странице, в модальном окне или во всплывающем окне.
Пример поиска по странице в Яндекс.
Директе Мы видим то, что ищем
- мы видим сразу
- мы не видим.
Самый известный пример поиска, когда мы не видим того, что ищем.
Начать поиск
- По запросу - поиск начнется только после нажатия кнопки или Enter на клавиатуре.
- На лету — результат поиска обновляется при появлении каждого нового символа в строке поиска.
Пример оперативного поиска по каталогу городов и отелей на Aviasales Переписка
- Частичный означает, что в поле достаточно ввести несколько символов из нужного запроса, и в результатах поиска будут все варианты, содержащие эти символы.
- Частичный по первым символам — тот же принцип, что и выше, но результаты поиска будут содержать все варианты, начинающиеся с введенных символов.
Частично и частично по первым символам Полное совпадение — скорее исключение, поэтому в поиске его следует использовать только в том случае, если вы уверены, что пользователь его поймет, иначе у него создастся впечатление, что поиск нарушен.
Полное соответствие Сортировка
- Стандартный — параметры в результатах поиска сохраняют порядок сортировки.
- По релевантности – в этом случае выше показаны изменения сортировки и те варианты, которые наиболее близки к поисковому запросу.
Стандартная сортировка и по релевантности Выделение совпадений Если поиск основан на текстовых блоках, лучше выделить то, что пользователь ввел в поле.
Это поможет вам быстро понять, какой из показанных вариантов лучше всего соответствует вашему запросу.
Без выбора и с выбором
Мы объединили эти характеристики для разных случаев в нашем интерфейсе.
1. По страницам Место поиска: На странице Мы видим то, что ищем: мы видим сразу Начать поиск: на лету Переписка: частичный Сортировка: стандартный Матчи: не выделяя Мы используем его, когда вам нужно что-то найти на определенной странице сайта.
2. По всему сайту Место поиска: в модальном режиме Мы видим то, что ищем: мы не видим Начать поиск: по запросу Переписка: частичный Сортировка: по релевантности Матчи: с выделением Он нужен для тех случаев, когда на сайте много страниц и может быть непонятно, на какой из них искать нужную информацию.
3. В текстовой ссылке Место поиска: во всплывающем окне Мы видим то, что ищем: мы видим/не видим сразу Начать поиск: на лету Переписка: частично по первым символам Сортировка: стандартный Матчи: с выделением Используется в таких компонентах, как ComboBox. В нашей дизайн-системе выпадающий список является всплывающим, потому что… он не блокирует работу со страницей.
Если значение в выпадающем списке состоит из нескольких слов, то на совпадение проверяется не только самое первое слово; совпадение проверяется по следующим разделителям: пробел, точка, дефис.
Пример: Урбан Горн; [email protected]; Урбан-Горн.
Во всех трёх случаях поиск «Горна» сработает. 
4. В справочнике по номерам Место поиска: во всплывающем окне Мы видим то, что ищем: мы видим/не видим сразу Начать поиск: на лету Переписка: частичный Сортировка: по релевантности Матчи: с выделением Он также используется в компонентах, с той лишь разницей, что каталог должен состоять из числовых значений.
Следовательно, в данном случае совпадение частичное, поскольку мы не знаем, как пользователь будет искать номер — с начала, с конца или с середины.
Поиск ≠ фильтр по имени
В нашем интерфейсе мы разделили поиск и фильтрацию по имени.Поиск проще и понятнее, но с помощью фильтра можно решать и более сложные задачи, например, поиск по комбинациям «Содержит/Не содержит».
В фильтре, в отличие от поиска, после ввода значения создается Чип; их может быть несколько и они могут дополнять друг друга.
На странице рекомендуется использовать что-то одно, в зависимости от того, какие задачи решает пользователь.
Спасибо Сергей Токарев за помощь в подготовке материала.
Теги: #интерфейсы #веб-дизайн #поиск #поиск по сайту #combobox
-
Серверная Машина Середины 90-Х.
19 Oct, 24 -
Протокол Связи Siri Взломан
19 Oct, 24 -
История О Том, Как Я Прозрел
19 Oct, 24 -
Aol Снова Изменила Протокол
19 Oct, 24
