На зависть Ариадне, или куда мобильная навигация приводит пользователей | Umbrella IT

На зависть Ариадне, или куда мобильная навигация приводит пользователей

 

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

 

Глупо даже пытаться представить себе современный мир без мобильной связи и мобильных приложений.

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

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

Во-первых, это долго.

Во-вторых, непривычно (а чтобы привыкнуть к новому, нужно время).

Именно так – для человека, которому и без того хватает собственных забот, все так и есть. Umbrella предлагает посмотреть более внимательно на язык мобильной навигации. Познакомиться с ней поближе, и потом, будучи во всеоружии, использовать ее в своем приложении, чтобы неудачный UX не стал причиной сползания на последние места в Appstore или Google Play.

 

ЧТО НУЖНО ПОЛЬЗОВАТЕЛЮ ОТ МОБИЛЬНОГО ПРИЛОЖЕНИЯ?

Результаты различных UI/UX исследований показывают что главное впечатление о приложении пользователь получает в течение первых 10-15 секунд. Это не так много, но и достаточно для того, чтобы завладеть его вниманием. Главное, не потерять ни одной из этих секунд напрасно и успеть расположить к себе пользователя.

Вот тут основная роль отводится визуальной составляющей дизайна. Увидел – зацепило – остался!

Задумайтесь:

Согласно данным на сайте Statistic Brain (по состоянию на 2 сентября 2017 года) общее количество загрузок на Google Play составило: 91 000 000 000. Добавьте сюда еще загрузки Apple, составившие 62 000 000 000.

Представили, какое это количество приложений? И, выбирая из всего этого многообразия, вы наверняка будете действовать на основании первого впечатления. То есть еще до того, как поймете, насколько удобно и полезно приложение, вы уже можете закрыть его и забыть, если вам не понравится дизайн.

Но это первые несколько секунд…

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

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

Согласно Statista миллионы уникальных пользователей выбирают именно “свой” мессенджер.

 

statista

 

Что именно каждый пользователь находит в “своем” мобильном приложении? Что нужно предусмотреть, чтобы новое приложение стало популярным?

  • единообразие: никто не будет изучать новую концепцию на каждом новом экране – нам хочется, чтобы приложение было выполнено в одном стиле (как внешне, так и функционально).

В этом одна из причин безусловной популярности Facebook: на какую бы страницу/экран в приложении  мы ни зашли – все узнаваемо и понятно.

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

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

 

milena

 

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

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

 

В общем и целом:

пользователь хочет  думать о том, ЧТО делает в приложении, но не задумываться о том, КАК это сделать.

Потому что:

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

А теперь посмотрите на экран своего мобильного устройства: 5 дюймов? больше?

Как вы думаете, просто ли придумать навигацию, которая впишется в рамки экрана, будет одинаково понятной для пользователей разного возраста (пола, национальности, профессии) и при этом удобной, чтобы пользователи не тратили свое ценное время на поиски и догадки?

 

Не просто. Но возможно.

 

Говоря об основных платформах (Android и iOS), мы понимаем, что каждая из них имеет свою систему навигации, привычную для преданных пользователей.

Для разработчиков приложений Android “настольной книгой” является Material Design, где описано, как создавать визуальные, интерактивные и подвижные элементы. И пользователи Android привыкли к стилю и особенностям своих приложений.

Точно так же собственные Guidelines есть и у разработчиков приложений iOS.

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

 

guitar

 

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

 

ПРОВОДНИК ДЛЯ ПОЛЬЗОВАТЕЛЯ

Основной инструмент UI/UX дизайнеров, при помощи которого они рассказывают пользователю о приложении, – это меню. Набор символов, картинок, текста, который помогает выбрать нужный экран, перейти к нему и выполнить нужное действие.

 

ПОЛНОЭКРАННЫЕ МЕНЮ

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

Информацию в этих меню подают в виде списка (с текстовым описанием позиций):

 

qwerty

 

Либо в виде сетки (с использованием изображений):

 

qwerty 1

 

Плюсы:

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

 

Минусы:

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

 

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

 

 

ГАМБУРГЕР-МЕНЮ

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

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

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

 

nearby

 

Плюсы:

  • узнаваемый значок;
  • не занимает много места.

 

Минусы:

  • в раскрытом виде закрывает остальной контент приложения;
  • контент самого меню неизвестен пользователю, и может так и остаться не просмотренным.

 

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

 

ПАНЕЛЬ ВКЛАДОК

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

 

Плюсы:

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

 

Минусы:

  • количество ограничено пятью пунктами (поэтому в такую панель вносят самые основные функции);
  • нет места, чтобы подписать значки. И если используются какие-то сверх-оригинальные иконки, пользователь может не понять, что происходит, и куда он перешел;
  • верхняя панель зачастую исчезает при прокручивании, и чтобы к ней вернуться, приходится прокручивать весь контент опять вверх.

 

gif

 

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

 

МЕНЮ – КНОПКА

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

Меню раскрывается либо нажатием, либо удержанием.

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

 

gif

 

Плюсы:

  • занимает минимальное пространство на экране;
  • значок, в форме которого представлена кнопка, можно подписать, чтобы пользователь однозначно понимал его назначение.

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

Минусы:

  • кнопка может перекрывать часть контента на экране;
  • не всегда сразу понятна функция кнопки.

 

Хорошая новость: Таких кнопок на экране не будет много, чтобы пользователь не отвлекался и не терял время, выбирая из нескольких ярких элементов. Обычно это одна или две кнопки, которые отвечают за основные функции приложения (например, в почте – функция “написать письмо”).

 

ИСПОЛЬЗОВАНИЕ ЖЕСТОВ

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

 

Плюсы:

  • такой способ работы с контентом удобнее для мобильных;
  • элементы навигации скрыты и не занимают место на экране;
  • это технология будущего благодаря распространению сенсорных устройств.

 

Минусы:

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

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

 

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

 

ПОДВЕДЕМ ИТОГИ

Мобильные приложения создаются для того, чтобы предоставить пользователям новые возможности.

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

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

Используйте потенциал своего  продукта на 100% – не оставляйте шанса конкурентам и не давайте пользователям поводов усомниться в правильности выбора.

 

Свяжитесь с нами

 

Фото: Shutterstock.com

 

 

 

 

 

 

 

 

 

 


Ещё

  • Umbrella IT вошла в Топ веб и мобильных разработчиков
    Umbrella IT вошла в Топ веб и мобильных разработчиков
    Скейтбордисты и банджи-джамперы любят риск. Будоражащее кровь чувство опасности – именно то, что заставляет их сердца биться быстрее. Но когда дело касается представления своего бизнеса в интернете – зачем рисковать? Umbrella IT – надежный партнер. Мы были первым официальным партнером Symfony в России. Наш опыт и экспертизу давно ценят наши клиенты, а теперь – и …
  • Создаем приложение с механикой Uber: руководство по разработке проекта на миллион долларов
    Создаем приложение с механикой Uber: руководство по разработке проекта на миллион долларов
    Uber стал первым, кто применил бизнес-модель совместного потребления и экономику по требованию и взял на абордаж целый мир. Дестабилизация традиционного рынка такси не мешает Uber позиционировать себя, прежде всего, как технологическую, а не транспортную компанию. И это вполне оправданно – образцовый сервис и эффективные технические решения – именно то, что привело компанию к оглушительному успеху. …
  • Как увеличить вовлеченность в мобильных приложениях: 6 полезных советов
    Как увеличить вовлеченность в мобильных приложениях: 6 полезных советов
    Что заставит пользователей возвращаться в ваше приложение снова и снова? Как запустить работу приложения на полную мощность и сделать его незаменимым для всех и каждого? Десяток, а может и два десятка установленных на смартфон приложений, но пользуетесь в реальности всего несколькими из них? Совсем не хочется, чтобы ваше приложение попало в список “однажды открою, вдруг …