В ожидании столика в местном ресторане, я пролистывал страницы газет с бесплатными объявлениями. Я был шокирован, как сильно я завишу от трех штук, которые не доступны в аналоговом мире: поиск, сортировка и фильтрация.

AutoDirect и другие бесплатные газеты поделены на разделы (грузовики, минивэны, внедорожники), однако в других, вроде Greensheet, лишь непрерывный список рекламы. Мне придется просмотреть каждую рекламу в газете, чтобы найти то, что я хочу. Нет уж, спасибо, я лучше воспользуюсь Craigslist на моем телефоне.

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

Шаблоны поиска 

Обычный поиск

Обычный поиск требует действия для поиска и просмотра результатов. Таким действием может быть нажатие кнопки поиска на экране, как в приложении Walmart или на клавиатуре, как у Target. Результаты обычно выводятся под поисковой строкой. Скорее всего вы захотите объединить обычный поиск с шаблоном автозавершения. 

Не забудьте сделать кнопки очистки поля и отмены поиска. Используйте анимацию, чтобы показать, что поиск начался.

Максим Десятых
Креативный директор redmadrobot

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

Автозавершение

Автозавершение является одним из самых полезных новшеств Web 2.0. По мере введения запроса, вам предлагается список возможных результатов. Нажатие на один из них производит поиск по этому варианту. Также вы можете написать слово целиком и нажать кнопку поиска. 

В идеальном случае результаты показываются моментально, однако в реальной жизни лучше использовать индикатор прогресса ("идет поиск..."). Netflix (сверху) использует индикатор в поле поиска, в то время как Fidelity (снизу) показывает его там, где выводятся результаты. 

У TripAdvisor продвинутое автозавершение, оно группирует результаты по популярным направлениям, отелям и ресторанам. LinkedIn делает нечто похожее, показывая сначала прямые связи и лишь затем других людей в LinkedIn. 

Максим Десятых
Креативный директор redmadrobot

Автозавершение — гениальная вещь. В продвинутом исполнении с группировкой результатов становится мощнейшим инструментом. Рекомендуется в любой ситуации.

Динамический поиск

Этот шаблон также называют динамической фильтрацией. Данные на экране автоматически фильтруются с каждым символом, введенным в поле поиска. Вы будете правы, если скажете, что это похоже на автозавершение, но есть существенное отличие. Шаблон динамического поиска используются для уточнения или сужения существующего набора объектов на экране. В примерах используются приложения BlackBerry App World и WorldMate для Android, в которых на момент начала ввода текста на экране уже был список приложений и гостиниц соответственно. 

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

Максим Десятых
Креативный директор redmadrobot

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

Поиск с ограничениями

Иногда проще и быстрее получить нужные результаты, ограничив область поиска. Google и Photobucket демонстрируют разные подходы к решению этой задачи. 

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

Предложите разумное количество опций, лучше всего от трех до шести.

Максим Десятых
Креативный директор redmadrobot

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

Сохраненные и недавние запросы

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

Другое проявление уважения пользовательских усилий можно встретить в программах типа Trulia, где пользователю подсказывают его местоположение, или  поиск по штрих-коду как в PriceCheck от Amazon. 

Сохраненные запросы обычно требуют дополнительных действий, в то время как недавние запросы сохраняются без вмешательства пользователя. Решите, какой из вариантов будет лучше удовлетворять пользовательским потребностям.

Максим Десятых
Креативный директор redmadrobot

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

Экран поиска

Этот паттерн отличается наличием нескольких полей с параметрами поиска и отдельной яркой кнопкой поиска.

Максим Десятых
Креативный директор redmadrobot

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

Результаты поиска

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

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

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

Сортировка

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

• Сортировка на том же экране
• Выбор сортировки
• Форма сортировки

Сортировка на том же экране

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

У Target четыре вида сортировок и три кнопки. Для сортировки по цене они предлагают два варианта: по уменьшению и увеличению цены.

Ясно покажите, какой вариант сортировки выбран. Подумайте над шаблоном выбора типа сортировки, если надписи не помещаются в отведенное место.

Окно сортировки

Этот шаблон является хорошей альтернативой сортировке на том же экране. Существуют несколько видов окна сортировки, лучше выбрать тот, который подходит под операционную систему телефона. Например, обычное меню подходит для Android, а для iOS привычнее барабанный селектор или стандартное всплывающее меню с кнопками.

У Walmart кнопка сортировки находится рядом с полем поиска, в то время как у Kayak сортировки и фильтры находятся внизу экрана.

Универсальные решения для всех OS - раскрывающийся список как в программе Target для Android, или меню поверх основного экрана, как в Awesome Note.

Экран сортировки

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

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

Максим Десятых
Креативный директор redmadrobot

Все верно: если вариантов сортировки мало, то стоит размещать их на экране с результатами поиска; если много, — то контекстное меню здорово поможет; а если вы плохой дизайнер интерфейсов, — то делайте отдельный экран для этого.

Фильтры

Часто требуется отфильтровать (кто-то предпочитает слово "уточнить") результаты поиска. Обычно пользователь выбирает критерий, по которому результаты отбираются из большого количества. Распространенные шаблоны здесь такие:

• Фильтр на том же экране
• Выдвигающаяся панель с фильтрами
• Фильтр в диалоговом окне
• Форма с фильтрами

Также обратите внимание на ограниченный поиск для оптимального способа фильтровать данные перед поиском.

Фильтр на том же экране

Так же как и с сортировками, фильтр на том же экране отображается рядом с результатами поиска или списком объектов. Фильтр применяется по одному нажатию. HeyZap использует стандартный переключатель, а Google - вертикальные вкладки.

Приложения CBS News и ACL Festival используют прокручивающуюся панель, что позволяет на одном экране уместить много фильтров.

У SXSW под рядом первичных фильтров есть еще один, где можно задать параметры фильтра. Новостная читалка Feed a Fever использует стилизованные выпадающие списки в качестве фильтров новостей.

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

Выдвигающаяся фильтры

Выдвигающаяся панель фильтров почти так же эффективна, как обычная панель фильтров, и может использоваться для раскрытия свойств фильтров. Чтобы раскрыть панель, надо потянуть ее за "ручку" или просто нажать на нее. В Audible выдвигается простая панель, похожая на стандартное меню внизу экрана. А в Sam  - целый набор фильтров, который может быть применен к карте с клубами. Лучшим решением для Sam было бы оставить карту видимой и сделать динамические фильтры, которые будут применяться сразу после нажатия.

Диалоговое окно с фильтрами

Диалоговое окно с фильтрами похоже на своих братьев из браузеров. В TripAdvisor для iOS свое оригинальное окно с фильтрами, а USPS Mobile для Android полагается на стандартные элементы управления.

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

Называйте варианты фильтров коротко, избегайте прокрутки. Если опций много - попробуйте форму с фильтрами.

Отдельный экран с фильтрами

Когда информации очень много, ей требуется больше фильтров. Например, WorldMate использует форму для фильтрации отелей по цене, бренду и звездности. У Zappos еще больше фильтров и они используют стандартный экран  iOS с кнопками Очистить и Готово наверху.

У Freetime свои оригинальные элементы управления. Сначала выбираете категорию, потом критерий фильтра и применяете его к календарю.

Максим Десятых
Креативный директор redmadrobot

Здесь та же история: в идеале фильтры должны поместиться все и сразу, а если не получается, то их нужно ставить на выдвигающуюся панель или окно. Если это не получается, то у вас что-то не так со всем приложением.

Оригинал: http://uxdesign.smashingmagazine.com/2012/04/10/ui-patterns-for-mobile-apps-search-sort-filter/

Благодарим за перевод компанию Айпартнер, рекомендуем их блог ActualWeb.

Макс Гулевич
Руководитель отдела проектирования и дизайна в РосБизнесКонсалтинг

Статья понравилась!

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

Что делать?

• Осознать важность проблемы (это мы уже сделали, ведь мы читаем данную статью :-); 
   
• Основательно проработать те варианты использования приложения, где пользователь будет искать, фильтровать, анализировать и персонифицировать информацию для себя; 
   
• Уделить особое внимание функциональностям поиска, фильтрации и персонификации; 
   
• Спроектировать и отрисовать все как следует! 
   
• Протестировать взаимодействие с особой тщательностью. 
   
• Самое главное: функциональность поиска и отбора должна работать быстро и без дефектов, команда разработчиков должна приложить максимум усилий для этого — иначе приложение никогда не будет популярным.

Анатолий Ларин
Менеджер по развитию бизнеса в Touch Instinct

На мой взгляд, такая статья абсолютно бесполезна.

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

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

Если нужно вдохновение при проектировании, проще использовать http://pttrns.com/search. Примеров там гораздо больше и подача удобнее.

Бонусом покажу мой любимый на сегодня поиск из приложения ASOS :) Задача: покупатель хочет быстро найти нужный ему более-менее конкретный товар, скажем «желтые босоножки». Решение: пользователь вводит свой запрос на главной странице, и мы выдаем ему желтые босоножки. Ни один из Российских интернет магазинов одежды так не умеет.

Леонид Бугаев
Владелец в Nordic Agency AB

Когда я приходил на работу руководителем отдела знаний (креатив и знания — всегда рядом) в известные рекламные агентства, я первым делом приходил к начальнику IT-отдела и честно предупреждал о «тяжелой истории поиска» в моей ежедневной работе: поисковые запросы типа «виски какой нравится банкирам», «где провести вечер сигареты танцы дискотека» или «конкуренты виагры» — это те самые цветочки, которые обычно удивляли людей, которые мониторили поисковые запросы «чтобы было строго по работе».

Такая сложная работа — знать, как работают поисковые запросы Яндекс.Поиска, Google или древней Altavista — помогала нам знать все о потребителях рекламируемых товаров — будь то виски, пиво, сигареты или те самые «конкуренты Виагра» (и это не популярная группа, которая выскакивает в поиске изображений:)

Мобильные технологии поиска упрощают жизнь — но при этом на 100% использует особенность смартфона — его персональность. История поисковых запросов — наверное, та самая \’маленькая черная записная книжка\’, которую каждый из нас не хотел бы делить с друзьями на Facebook в живом режиме. Но преимущество персональной истории запросов в любом мобильном приложении — это обязательное условие успеха приложения.

Используйте эту силу в своей работе, дорогие разработчики мобильных приложений. «Фильтруйте базар» по-умному! :)
  

Егор Аристакесян
Креативный директор и совладелец в Articul Media Group

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