Правильные паттерны поиска в мобильных приложениях - какую механику выбрать дизайнеру

Поиск является одним из самых гибких инструментов в разработке мобильных приложений. Он может работать совершенно по-разному в зависимости от контекста его использования. Для того чтобы вы могли максимально подробно разобраться в теме, разработчики иговой студии Skill Rush Gaming решили выделить несколько основных принципов, по которым работает поиск в мобильных приложениях.

Первый принцип - по точке входа в поиск

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

Классический вариант - поисковая строка. Это самый оптимальный вариант в том случае, когда главный фокус внимания сосредоточен на функционале поиска. Строка занимает достаточно большое пространство на экране, поэтому является максимально доступной для пользователей. Такое расположение отлично подходит для случаев, когда поисковая строка является основным способом работы с контентом. Пример расположения такой строки можно найти в приложениях: Google Maps и Airbnb. Такая строка может появляться не только сверху или снизу экрана, но и даже посередине.

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

Третий вариант - иконка лупы в навбаре. Используется такой вариант расположения поисковой строки в том случае, когда функция поиска менее приоритетна или пользуются ей не так часто. Такой вариант может позволить сохранить пространство на экране и чаще всего подразумевает, что пользователи сначала будут фокусироваться на других объектах приложения и только потом начинать поиск. Вы можете внедрить такой вариант в том случае если поиск является далеко не единственно важным действием в приложении. Примеры таких проектов - Youtube и Twitch. Можно спрятать точку входа в поиск, например расположить ее в выпадающем меню. Это идеальное решение в том случае если в вашем сценарии поиск нужен крайне редко.

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

Второй принцип - по широте поисковой выдачи

Поиск может быть локальным, а может быть глобальным. Оба типа довольно востребованы и имеют ряд своих преимуществ. Глобальный поиск можно использовать в приложениях, где представлено много контента, он является одним из основных способов навигации. Пример приложения с глобальным поиском — это Google Maps, в котором он является основным способом навигации, ведь при помощи поисковой строки можно найти все что вам нужно - от станции АЗС до ближайшего кафе.

Второй тип — это локальный поиск. Он помогает пользователю найти информацию в определенном контексте или в области приложения. Примером локального поиска выступает Facebook, а если быть точнее его раздел «Друзья». Здесь точка входа поиска обозначена при помощи иконки лупы. Кликнув по ней, пользователь осуществляет поиск по специальному списку людей, то есть делает это локально.

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

Третий принцип - по способу представления информации

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

Четвертый и самый последний вариант — это поиск на том же самом экране. Если он открывается на том же экране, то скорее всего нужен для поиска по контенту и используется чаще всего в качестве фильтра. Пример такого варианта мы можем видеть в Telegram.

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

Четвертый принцип - по сложности выдачи информации

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

Вариант выдачи с категориями и фильтрами. Если в приложении много контента разного типа, то стоит рассмотреть возможности добавления определенной категории, фильтра или даже их комбинации. Это поможет структурировать результаты поисковой выдачи. Категории и фильтры помогают пользователю получить конкретный ответ на свой вопрос, сузив при этом область поиска. Обязательно внедрите возможность использовать несколько фильтров одновременно. Еще одним вариантом подачи информации является комбинация категорий и фильтров, которую можно использовать одновременно. Если вы приняли решение использовать такой довольно сложный вариант, то нужно убедиться, что вашей ЦА понятны все представленные вами формулировки. Делать выбор между простой выдачей и выдачей с категориями и фильтрами нужно с опорой на контент, цель пользователя и общую стратегию бизнеса.

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

Пятый принцип - по сложности поля поиска

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

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

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

Выход из режима поиска и отмена ввода

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

Выдача результатов

Мы советуем настроить выдачу результатов уже после ввода нескольких символов. Это поможет пользователю максимально быстро найти необходимую информацию. Можно еще настроить выдачу после нажатия кнопки поиска, но такой вариант чаще все используют при технических ограничениях, если база данных не позволяет показать сразу результат. Лучшим решением будет дать пользователю ответ до того момента как он нажмет кнопку «Поиск». Если такой возможности нет, то используйте вариант, который мы описали выше.

Оформление поисковой выдачи

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

Дополнительные детали, которые нужно учитывать во время проектирования поискового ввода

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

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

Реклама ИП Брагин Олег Сергеевич, ИНН 519017027462