Поиск, сортировка и фильтры в мобильных приложениях
В ожидании столика в местном ресторане, я пролистывал страницы газет с бесплатными объявлениями. Я был шокирован, как сильно я зависим от трех штук, которые не доступны в аналоговом мире: поиск, сортировка и фильтрация.
AutoDirect и другие бесплатные газеты поделены на разделы (грузовики, минивэны, внедорожники), однако в других, вроде Greensheet, лишь непрерывный список рекламы. Мне придется просмотреть каждую рекламу в газете, чтобы найти то, что я хочу. Нет уж, спасибо, я лучше воспользуюсь Craigslist на моем телефоне.
Но после просмотрa Craigslist становится ясно, что нам есть еще куда стремиться в проектировании поиска, сортировки и фильтров. Эта статья предлагает десяток разных способов, как помочь пользователю найти то, что он ищет.
Шаблоны поиска
Обычный поиск
Обычный поиск требует действия для поиска и просмотра результатов. Таким действием может быть нажатие кнопки поиска на экране, как в приложении Walmart или на клавиатуре, как у Target. Результаты обычно выводятся под поисковой строкой. Скорее всего вы захотите объединить обычный поиск с шаблоном автозавершения.
У Walmart есть отдельная кнопка для поиска (Go), у Target для поиска нужно нажать кнопку Search на клавиатуре
Загрузка и отображение результатов в приложении Target
Не забудьте сделать кнопки очистки поля и отмены поиска. Используйте анимацию, чтобы показать, что поиск начался.
Автозавершение
Автозавершение является одним из самых полезных новшеств Web 2.0. По мере введения запроса, вам предлагается список возможных результатов. Нажатие на один из них производит поиск по этому варианту. Также вы можете написать слово целиком и нажать кнопку поиска.
Android Marketplace (Google Play) и Netflix используют автозавершение
В идеальном случае результаты показываются моментально, однако в реальной жизни лучше использовать индикатор прогресса (“идет поиск…”). Netflix (сверху) использует индикатор в поле поиска, в то время как Fidelity (снизу) показывает его там, где выводятся результаты.
Fidelity показывает индикатор прогресса в поле, где будут предложены варианты автозавершения
У TripAdvisor продвинутое автозавершение, оно группирует результаты по популярным направлениям, отелям и ресторанам. LinkedIn делает нечто похожее, показывая сначала прямые связи и лишь затем других людей в LinkedIn.
TripAdvisor и LinkedIn группируют предлагаемые варианты
Динамический поиск
Этот шаблон также называют динамической фильтрацией. Данные на экране автоматически фильтруются с каждым символом, введенным в поле поиска. Вы будете правы, если скажете, что это похоже на автозавершение, но есть существенное отличие. Шаблон динамического поиска используются для уточнения или сужения существующего набора объектов на экране. В примерах используются приложения BlackBerry App World и WorldMate для Android, в которых на момент начала ввода текста на экране уже был список приложений и гостиниц соответственно.
BlackBerry App World и WorldMate предлагают динамический поиск для уточнения больших списков результатов
Он отлично работает для уточнения однотипных данных, например в адресной книге или музыкальной библиотеке. В то же время такой поиск может быть неудобным, когда необходимо искать данные из различных источников.
Поиск с ограничениями
Иногда проще и быстрее получить нужные результаты, ограничив область поиска. Google и Photobucket демонстрируют разные подходы к решению этой задачи.
Google предлагает всплывающий блок, где можно выбрать тип данных, а у Photobucket появляется отдельное диалоговое окно
AllRecipes также позволяет выбрать тип данных перед отправкой запроса. Dropbox по умолчанию ищет всё, но вы можете выбрать только файлы или только папки перед или после нажатия кнопки поиска.
AllRecipes предлагает широкий выбор фильтров, у Dropbox их всего три
Предложите разумное количество опций, лучше всего от трех до шести.
Сохраненные и недавние запросы
В успешных мобильных интерфейсах учитывается основной принцип юзабилити: уважайте усилия пользователя. Сохраненные и недавние запросы делают это, позволяя выбирать из предыдущих запросов вместо того, чтобы заново набирать тот же текст.
eBay позволяет сохранять пользовательские запросы. При этом и eBay, и Walmart сохраняют недавние запросы и без особых указаний
Другое проявление уважения пользовательских усилий можно встретить в программах типа Trulia, где пользователю подсказывают его местоположение, или поиск по штрих-коду как в PriceCheck от Amazon.
Trulia предлагает поиск по местоположению, Amazon - 4 способа поиска
Google Shopper предлагает функции сканирования и речевого ввода, а также полную историю поиска, сгруппироваанную по дате
Сохраненные запросы обычно требуют дополнительных действий, в то время как недавние запросы сохраняются без вмешательства пользователя. Решите, какой из вариантов будет лучше удовлетворять пользовательским потребностям.
Экран поиска
Этот паттерн отличается наличием нескольких полей с параметрами поиска и отдельной яркой кнопкой поиска.
Поисковые формы в WorldMate и airbnb.
Поиск рецептов WholeFood’s позволяет добавлять критерии: тип блюда, категорию, специальные диеты, а также ключевые слова
Результаты поиска
Результаты поиска могут показываться в том же или отдельном окне, в виде списка, на карте или в виде картинок. То, как выглядят результаты поиска зависит от типа данных и предпочтений пользователей.
airbnb показывает результаты списком с возможностью просмотреть их на карте
Kayak и Foursquare (webOS) показывают результаты списком
У Zappos помимо списка есть карусельный режим просмотра
Подгрузка результатов - распространенная техника, цель которой показать первые результаты, пока грузятся остальные. У многих приложений есть кнопка: “Показать еще” или же они автоматически загружают нужные результаты, когда пользователь доходит до края экрана.
eBay Motors и Best Buy
Укажите количество результатов. Используйте подрузку результатов вместо разбиения на страницы. Примените самую подходящую сортировку.
Сортировка
Важно выбрать самую подходящую сортировку для отображения результатов. Ее можно определить исходя из сложившихся стереотипов и предпочтений пользователей. У сортировки бывают следующие шаблоны:
Сортировка на том же экране
Выбор сортировки
Форма сортировки
Сортировка на том же экране
Когда вариантов сортировки немного, лучше всего расположить кнопки сортировки на том же экране, чтобы они были доступны одним нажатием. Размещать их сверху или снизу зависит от дизайна.
Expedia (старая версия) и Target iOS используют сортировку на том же экране
Четко покажите, какой вариант сортировки выбран. Подумайте над шаблоном с окном сортировки, если надписи не помещаются в отведенное место.
Окно сортировки
Этот шаблон является хорошей альтернативой сортировке на том же экране. Существуют несколько видов окна сортировки, лучше выбрать тот, который подходит под операционную систему телефона. Например, обычное меню подходит для Android, а для iOS привычнее барабанный селектор или стандартное всплывающее меню с кнопками.
Обычное меню в программе Walmart для Android
У Walmart кнопка сортировки находится рядом с полем поиска, в то время как у Kayak сортировки и фильтры находятся внизу экрана.
Kayak для iOS использует стандартный барабанный селектор.
Универсальные решения для всех OS - раскрывающийся список как в программе Target для Android, или меню поверх основного экрана, как в Awesome Note.
Target для Android использует выпадающий список, а AwesomeNote - меню поверх основного экрана
Экран сортировки
В некоторых программах сортировка и фильтры расположены на одном экране, обычно называющемся “Уточнить результаты”. Это наиболее сложный способ, т.к.. он требует открыть форму, выбрать опции и нажать кнопку “Применить” или “Готово”.
Cars.com и eBay Classifieds
Подумайте над более компактным и удобным интерфейсом для сортировки, прежде чем делать подобное.
Фильтры
Часто требуется отфильтровать (кто-то предпочитает слово “уточнить”) результаты поиска. Обычно пользователь выбирает критерий, по которому результаты отбираются из большого количества. Распространенные шаблоны здесь такие:
Фильтр на том же экране
Выдвигающаяся панель с фильтрами
Фильтр в диалоговом окне
Форма с фильтрами
Также обратите внимание на ограниченный поиск для оптимального способа фильтровать данные перед поиском.
Фильтр на том же экране
Так же как и с сортировками, фильтр на том же экране отображается рядом с результатами поиска или списком объектов. Фильтр применяется по одному нажатию. HeyZap использует стандартный переключатель, а Google - вертикальные вкладки.
HeyZap и Google
Приложения CBS News и ACL Festival используют прокручивающуюся панель, что позволяет на одном экране уместить много фильтров.
CBS News (один ряд фильтров) и Austin City Limits Music Festival (два ряда фильтров)
У SXSW под рядом первичных фильтров есть еще один, где можно задать параметры фильтра. Новостная читалка Feed a Fever использует стилизованные выпадающие списки в качестве фильтров новостей.
SXSW Conference и Feed a Fever
Варианты фильтрации должны быть понятно названы, чтобы их было легко понять. Не забудьте четко показать, какие из фильтров включены.
Выдвигающаяся панель фильтров
Выдвигающаяся панель фильтров почти так же эффективна, как обычная панель фильтров, и может использоваться для раскрытия свойств фильтров. Чтобы раскрыть панель, надо потянуть ее за “ручку” или просто нажать на нее. В Audible выдвигается простая панель, похожая на стандартное меню внизу экрана. А в Sam - целый набор фильтров, который может быть применен к карте с клубами. Лучшим решением для Sam было бы оставить карту видимой и сделать динамические фильтры, которые будут применяться сразу после нажатия.
Audible и Sam’s Club
Выдвигающаяся панель фильтров Expedia
Диалоговое окно с фильтрами
Диалоговое окно с фильтрами похоже на своих братьев из браузеров. В TripAdvisor для iOS свое оригинальное окно с фильтрами, а USPS Mobile для Android полагается на стандартные элементы управления.
TripAdvisor and Due Today Lite
Хотя диалоговое окно с фильтрами решает свою задачу, первые два шаблона дают большую свободу для пользователей экспериментировать с фильтрами, не уходя из главного окна.
Называйте варианты фильтров коротко, избегайте прокрутки. Если опций много - попробуйте форму с фильтрами.
Отдельный экран с фильтрами
Когда информации очень много, ей требуется больше фильтров. Например, WorldMate использует форму для фильтрации отелей по цене, бренду и звездности. У Zappos еще больше фильтров и они используют стандартный экран iOS с кнопками Очистить и Готово наверху.
Экран с фильтрами в WorldMate’s (очень похожа по дизайну на Kayak) и Zappos
Freetime свои оригинальные элементы управления. Сначала выбираете категорию, потом критерий фильтра и применяете его к календарю.
Экран с фильтрами в приложении Free-Time
Источник: smashingmagazine|com
Автор: Тереза Нил (Theresa Neil)
Перевод: ActualWEB
Опубликовано в блоге Actual WEB.