Поиск и фильтрация документов в Диадоке

Проблемы прошлого решения

Прошлое решение состоит из полнотекстового поиска и расширенных фильтров. У пользователей есть трудности с этим решением:

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

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

Задачи на основе проблем

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

Первая концепция

Полнотекстовый поиск, совмещенный с фильтрами.

Кликнули в поле поиска.

• Поле увеличилось на всю ширину, снизу затемняющая основной контент вуаль.
• Автоматом выбран раздел, в котором мы находились — «Входящие документы». Иногда пользователям нужно искать не в конкретном разделе, а во всех сразу. Можно выбрать другой — в неудаляемой выпадашке.
• Одновременно с фокусом в поле раскрылся список с предложением выбрать тип фильтра, по которому будем искать.

После выбора типа фильтра можно начать вводить значение:

Начали вводить название контрагента. Поле работает как автокомплит — выводит список контрагентов:

Выбрали контрагента из списка.

• Контрагент превратился в токен.
• Серая подсказка с названием типа фильтра исчезла. При наведении на токен в хинте будет подсказка с типом фильтра.
• Для разных типов сущностей разные цвета, контрагенты — голубого.
• Фокус автоматом снова встал в поле и появилась выпадашка с типами фильтров — выбор фильтра и значения можно повторить заново.
• Если дважды кликнуть на токен, он перейдет в режим редактирования: превратится обратно в текст, появится автокомплит по контрагенту.

Выбрали все нужные фильтры и нажали кнопку «Найти».

• Строка поиска переезжает из шапки в рабочую область.
• Можно отредактировать значения в токенах и поискать заново.
• Можно сохранить этот поиск как шаблон и использовать его позже.
• Можно ввести в поле какую-то фразу без выбора фильтра — по ней будет идти полнотекстовый поиск.

Шаблоны фильтров

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

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

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

Вторая концепция

В этой концепции быстрые фильтры совмещены с шапкой таблицы. Остальные фильтры спрятаны за кнопкой «Все фильтры».

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

После выбора значения, оно появляется над таблицей в виде токена. Цвет токена зависит от типа фильтра. Токен удаляется по крестику и фильтрация сбрасывается. Справа от токенов есть кнопка сброса всех фильтров.

По кнопке «Все фильтры» открывается лайтбокс со всеми возможными фильтрами.

В левой части — кнопки-списки с возможностью поиска и множественным выбором, как в шапке таблицы на списке. Вот некоторые из них:

После выбора значения в каком-то из полей, оно выводится в виде токена в нижней части лайтбокса. Там можно увидеть, какие фильтры уже выбраны и будут применены после нажатия на кнопку «Применить».

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

Шаблоны фильтров

В лайтбоксе около выбранных токенов есть ссылка для того, чтобы сохранить этот набор фильтров как шаблон:

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

Если после выбора шаблона добавить еще какие-то фильтры, они добавятся к уже выбранным фильтрам из шаблона, но в поле «Шаблоны фильтров» уже не будет выводиться название шаблона, потому что новый набор фильтров ему уже не соответствует.

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

Шаблон удаляется с подтверждением:

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

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

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

Юзабилити-тестирование