5 шаблонов UX, чтобы помочь вашим пользователям перемещаться

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

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

Примеры того, как различные приложения реализуют пошаговые руководства

1. Пошаговые руководства и знаки тренеров

Полезность является ключом к успешному приложению. Однако иногда это означает довольно сложное приложение с множеством различных типов инструментов и контента. Хороший способ решения этой проблемы - начальное пошаговое руководство или учебное пособие, чтобы продемонстрировать, как работает каждая функция. Secret и Youtube выделяют важные разделы пользовательского интерфейса с отметками тренера, которые объясняют, что они делают, в то время как Carousel и Duolingo показывают слайд-шоу, рассказывающее пользователям о типичном пользовательском интерфейсе. Этот шаблон проектирования также можно использовать для сбора дополнительной информации от пользователя, что упрощает первоначальную регистрацию / регистрацию и обеспечивает более интуитивную интеграцию в приложение.
Если различные функции вашего приложения не сразу очевидны для пользователя, пошаговые руководства и оценки тренеров являются отличными шаблонами проектирования, упрощающими взаимодействие с пользователем и сложность приложения.

2. Контент-навигация

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

3. Слайдеры

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

4. Поповеры

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

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

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

5. Выдвижные панели, боковые панели и ящики

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

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

Вы можете подписаться на нас в Facebook / LinkedIn / Twitter

Первоначально опубликовано на monsoonfish.com.

Эта история опубликована в журнале The Startup, крупнейшем издании по предпринимательству, за которым следят 277 994+ человека.

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