Русский
Русский
English
Статистика
Реклама

Найди меня, если сможешь

Когда мы начали разрабатывать компонент Combobox для нашей библиотеки, мы столкнулись с вопросами, как правильно должен работать поиск:

  1. Нужно ли выделять совпадения в выпадающем списке?

  2. Совпадения должны быть по первым буквам или нет?

  3. Если нет, нужно ли показывать выше то, что совпадает по первым буквам?

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

Характеристики поиска

Место поиска

Поиск может находиться на странице, в модалке или в попапе.

Пример поиска на странице в Яндекс.ДиректеПример поиска на странице в Яндекс.Директе

Видим, по чему ищем

  • сразу видим,

  • не видим.

Самый известный пример поиска, когда не видим, по чему будем искатьСамый известный пример поиска, когда не видим, по чему будем искать

Начало поиска

  1. По запросу поиск начнется только после нажатия на кнопку или Enter на клавиатуре.

  2. На лету результат поиска обновляется с появлением каждого нового символа в поисковой строке.

Пример поиска на лету по справочнику городов и отелей в АвиасейлсПример поиска на лету по справочнику городов и отелей в Авиасейлс

Соответствие

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

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

Частичное и частичное по первым символамЧастичное и частичное по первым символам

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

Полное соответствиеПолное соответствие

Сортировка

  1. Стандартная варианты в результате поиска сохраняют свою последовательность в сортировке.

  2. По релевантности в этом случае сортировка меняется и выше показываются те варианты, которые наиболее близки к поисковому запросу.

Стандартная сортировка и по релевантностиСтандартная сортировка и по релевантности

Выделение совпадений

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

Без выделения и с выделениемБез выделения и с выделением

Комбинируем эти характеристики для разных кейсов в нашем интерфейсе

1. По странице

Место поиска: на странице

Видим, по чему ищем:сразу видим

Начало поиска:на лету

Соответствие:частичное

Сортировка:стандартная

Совпадения:без выделения

Используем, когда нужно найти что-то на конкретной странице сайта.

2. По всему сайту

Место поиска: в модалке

Видим, по чему ищем:не видим

Начало поиска:по запросу

Соответствие:частичное

Сортировка:по релевантности

Совпадения:с выделением

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

3. В справочнике по тексту

Место поиска: в попапе

Видим, по чему ищем:сразу видим / не видим

Начало поиска:на лету

Соответствие:частичное по первым символам

Сортировка:стандартная

Совпадения:с выделением

Используется в компонентах, например, в ComboBox. В нашей дизайн-системе выпадающий список является попапом, т.к. он не блокирует работу со страницей. Если значение в выпадающем списке состоит из нескольких слов, то проверяется на совпадение не только самое первое слово, проверка на совпадение идет через следующие разделители: пробел, точка, дефис. Пример: Urban Gorn; urban.gorn@mail.ru; Urban-Gorn. Во всех трех случаях поиск по слову "Gorn" сработает.

4. В справочнике по цифрам

Место поиска: в попапе

Видим, по чему ищем:сразу видим / не видим

Начало поиска:на лету

Соответствие:частичное

Сортировка:по релевантности

Совпадения:с выделением

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

Поиск фильтрация по названию

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

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


СпасибоСергею Токареву за помощь в подготовке материала.

Источник: habr.com
К списку статей
Опубликовано: 30.03.2021 20:09:12
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Веб-дизайн

Интерфейсы

Поиск

Поиск по сайту

Combobox

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru