Прокачайте ваш онбординг
с навигатором интерфейсов Experrto
Выберите категорию

10 топовых методик для создания идеального мобильного UX

10 топовых методик для создания идеального мобильного UX

Хотя при разработке приложений и нужно придерживаться конкретных рекомендаций по мобильному UX, пользователи также должны высказывать свое мнение. Загрузив ваше приложение, потенциальный клиент удалит его, как только увидит, что это просто мобильная версия вашего сайта. Эти люди рассчитывают получить мобильный опыт, который учитывает их потребности. Именно этот фактор делает загрузку приложения стоящей. По данным Statista, в среднем большинство пользователей удаляют мобильные приложения, которые им не интересны, в течение 6 дней.

Эта статистика смотрится еще хуже на фоне того, что к 2020 году суммарный доход от мобильных приложений уже перевалил за $189 000 000 000. Сейчас это, как никогда ранее, говорит о том, что ваша команда не может игнорировать UX мобильных приложений. С мыслью об этом, в статье мы перечислили 10 лучших методик, которые вы должны учитывать на каждом этапе процесса мобильной разработки.

Содержание статьи

Что такое мобильный UX дизайн?
1. Проведите тщательное исследование мобильного пользовательского опыта
2. Используйте простую навигацию для более удобного UX
3. Минимизируйте контент как часть вашего мобильного UX
4. Требуйте от пользователей как можно меньших усилий для работы с приложением
5. Проектируйте мобильный UX, который кажется быстрым и респонсивным
6. Направляйте пользователей с помощью приемов мобильного UX
7. Приоритезируйте первый опыт
8. Обеспечьте согласованность между десктопным и мобильным UX
9. Убедитесь в читабельности текста
10. Не забывайте тестировать свои идеи по персонализации мобильного UX
Вместо заключения

Что такое мобильный UX дизайн?

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

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

Далее мы рассмотрим 10 топовых методик для улучшения мобильного UX.

1. Проведите тщательное исследование мобильного пользовательского опыта

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

  • Начните с анализа своих конкурентов, чтобы создать идеальный мобильный UX. Составьте список как минимум из десяти приложений, похожих на разрабатываемый вами продукт. Запишите, что вам в них нравится, а что нет, и почему.
  • Проработайте образы идеальных пользователей вашего приложения (user personas), чтобы понять, как люди будут взаимодействовать с этим решением. Не бойтесь создавать сразу несколько образов. Так вы поймете, в каком контенте и действиях заинтересованы разные группы пользователей.
  • Продумав user personas, вы получите лучшее представление о своей целевой аудитории. Протестируйте приложение или его прототип с этими целевыми пользователями на различных мобильных устройствах и убедитесь, что оно хорошо смотрится и работает на этих девайсах. Вы должны воспринимать свое приложение как постоянно развивающийся продукт. Это значит, что наряду с тестами до запуска вы должны регулярно тестировать его в дальнейшем и следить за тем, чтобы оно соответствовало потребностям ваших целевых клиентов.
  • Вы хотите сделать ваше приложение глобальным? Тогда вам также нужно протестировать UX дизайн своего продукта с пользователями из растущих рынков. Проверьте, кэширует ли ваше решение данные при подключению к Интернету, чтобы страницы загружались быстрее. Помимо этого, обратите внимание на культурные различия в плане дизайна и ограниченных возможностей мобильных устройств (люди из развивающихся стран могут позволить себе преимущественно недорогие девайсы).

2. Используйте простую навигацию для более удобного UX

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

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

Используйте простую навигацию для более удобного UX

3. Минимизируйте контент как часть вашего мобильного UX

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

Чтобы добиться этого, вам необходимо:

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

Как повысить коэффициент удержания мобильного приложения?

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

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

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

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

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

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

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

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

Разработка личного кабинета пользователя: улучшаем интерфейс

6. Направляйте пользователей с помощью приемов мобильного UX

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

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

Направляйте пользователей с помощью приемов мобильного UX

7. Приоритезируйте первый опыт

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

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

Как UX влияет на адаптацию к продукту, удержание и рост

8. Обеспечьте согласованность между десктопным и мобильным UX

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

  • Дать людям возможность продолжить свой путь с того места, где они остановились на мобильном устройстве. Например, листая товары в вашем eCommerce-приложении, пользователи могут перейти на ПК, чтобы получше их рассмотреть.
  • Делайте покупки еще более удобными, полагаясь на in-app браузер вместо стандартного мобильного.

Обеспечьте согласованность между десктопным и мобильным UX

9. Убедитесь в читабельности текста

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

  • Выберите шрифт, который используется на вашей платформе по умолчанию. Например, шрифты Roboto и Noto отлично подходят для Android приложений.
  • Используйте шрифт размером не менее 11 пунктов, чтобы пользователи могли читать его без зума.
  • Убедитесь, что картинки отображаются с правильным соотношением сторон в соответствии с мобильным UX дизайном, а не растягиваются до нужного формата, чтобы просто заполнить пустое место.
  • Оптимизируйте ваш видеоконтент для портретного режима.
  • Обеспечьте визуальную (шрифты, кнопки и ярлыки) и функциональную (все интерактивные элементы работают одинаково) согласованность вашего мобильного приложения.
  • Не копируйте UI элементы из других приложений в свой продукт. Хотя вам и нужно придерживаться стандартных гайдов по дизайну интерфейса, значки и функциональные элементы, такие как поля ввода, чекбоксы и переключатели, должны быть уникальными для вашего бренда.

UX-дизайн: как сделать ваш продукт удобным для восприятия

10. Не забывайте тестировать свои идеи по персонализации мобильного UX

Создайте более персонализированный мобильный UX для своей целевой аудитории, следуя этим рекомендациям:

  • Предлагайте людям полезный контент на основе их местоположения, прошлых поисковых запросов или покупок.
  • Давайте пользователям фидбек каждый раз, когда они выполняют действие или задачу в вашем приложении. К примеру, вы могли бы использовать интерактивные подсказки Experrto, указывающие на завершение задачи. А соответствующий звук после нажатия кнопки может подсказать человеку, что продукт работает нормально или что он сам делает все правильно.
  • Приспособьте ваше приложение для очень занятых пользователей, которые всегда на ходу. Сохраняйте последнюю открытую ими страницу/экран, чтобы они могли вернуться к ней позже. И вместо того, чтобы просить людей логиниться в систему при каждом посещении, позвольте им авторизоваться с помощью Face- или Touch-ID.

Вместо заключения

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

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

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

Прокачайте свой онбординг!

По материалам: playbookux.com

Прокачайте ваш онбординг
с навигатором интерфейсов Experrto