Закрыть
E-mail:
Пароль:
Забыли пароль?
В каталоге проекта: 11 032 веб-студии, 924 CMS, 215 596 сайтов.
РегистрацияCMS MagazineВход
CMS Magazine CMS Magazine

Шаблоны проектирования для мобильных приложений: поиск, сортировка и фильтр

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

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

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

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

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

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

  • У Walmart есть отдельная кнопка для поиска (Go), у Target для поиска нужно нажать кнопку Search на клавиатуре.
Walmart
  • Загрузка и отображение результатов у Target.
Target

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

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

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

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

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

  • Fidelity показывает индикатор прогресса в поле, где будут предложены варианты автозавершения.

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

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

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

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

  • BlackBerry App World и WorldMate предлагают динамический поиск для уточнения больших списков результатов.

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

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

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

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

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

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

  • AllRecipes предлагает широкий выбор фильтров, у Dropbox их всего три.

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

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

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

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

  • eBay позволяет явно сохранять запросы. При этом и eBay, и Walmart сохраняют недавние запросы и без особых указаний.

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

  • Trulia предлагает поиск по местоположению, Amazon - 4 способа поиска.
  • Google Shopper предлагает функции сканирования и речевого ввода, а также полную историю поиска, сгруппироваанную по дате.

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

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

Экран поиска

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

  • Поиск рецептов WholeFood's позволяет добавлять критерии: тип блюда, категорию, специальные диеты, а также ключевые слова.
Мнение:
Максим Десятых
Креативный директор
redmadrobot
Расширенный экран поиска — это единственный вариант решения в тех случаях, когда требуется подобрать что-то, а не просто найти. Тут очень важны критерии подбора, поэтому для них требуется целый экран.

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

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

  • Kayak и Foursquare (webOS) показывают результаты списком.
  • airbnb показывает результаты списком с возможностью просмотреть их на карте.
  • У Zappos помимо списка есть карусельный режим просмотра.

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

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

Сортировка

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

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

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

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

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

  • Expedia (старая версия) и Target iOS используют сортировку на том же экране.

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

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

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

  • Обычное меню в программе Walmart для Android.

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

  • Kayak для iOS использует стандартный барабанный селектор.

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

  • Target для Android использует выпадающий список, а AwesomeNote - меню поверх основного экрана.

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

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

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

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

Фильтры

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

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

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

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

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

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

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

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

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

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

  • Выдвигающаяся панель фильтров Expedia's.

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

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

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

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

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

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

  • Экран с фильтрами в WorldMate's (очень похожа по дизайну на Kayak) и Zappos.

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

  • Экран с фильтрами в приложении Free-Time.
Мнение:
Максим Десятых
Креативный директор
redmadrobot
Здесь та же история: в идеале фильтры должны поместиться все и сразу, а если не получается, то их нужно ставить на выдвигающуюся панель или окно. Если это не получается, то у вас что-то не так со всем приложением.

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

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

Автор: Theresa Neil, перевод: Айпартнер

Комментарии экспертов

Макс Гулевич

Компания: РосБизнесКонсалтинг
Должность: Руководитель отдела проектирования и дизайна

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

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

Что делать?

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

Анатолий Ларин

Компания: Touch Instinct
Должность: Менеджер по развитию бизнеса

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

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

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

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

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

Леонид Бугаев

Компания: Nordic Agency AB
Должность: Владелец

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

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

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

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

Егор Аристакесян

Компания: Articul Media Group
Должность: Креативный директор и совладелец

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

Если Вы хотите дать экспертный комментарий к статьям, публикуемым на CMS Magazine, следите за анонсами материалов в нашей группе в Facebook.


CMS Magazine CMS Magazine
RSS-подписка комплексные решения
CMS Magazine CMS Magazine
CMS Magazine