Мобильные модальные окна: 8 лучших примеров использования

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

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

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

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

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

Существует 3 типа мобильных модальных окон.

1. Попапы

Это сообщения, которые всплывают и запрашивают у пользователей такие вещи, как разрешения на push-уведомления, подписку на сервис определения местоположения или оставление отзыва в App Store. Возможно, самый распространенный тип мобильных модалов, но они также наименее любимые.

Хорошая новость в том, что этот элемент пользовательского интерфейса может и не использоваться. Вместо того, чтобы полагаться на стандартное всплывающее окно на сером фоне, вы можете использовать фирменный оверлей (окно, закрывающее часть экрана) или полноэкранный модальный режим при запросе разрешений. Например, Babbel предлагает пользователям сначала предоставить разрешения для устройств с помощью своего собственного фирменного запроса. Только если пользователи ответят положительно и захотят предоставить доступ к микрофону, им покажут стандартное всплывающее окно iOS — в этот момент у них уже будет достаточно контекста для подтверждения запроса.

2. Частичный оверлей

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

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

3. Полноэкранные модальные окна

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

Итак, как сделать хорошее мобильное модальное окно?

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

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

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

Фирменный, индивидуальный дизайн, который подходит вашему приложению

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

Сильный текст и убедительный CTA‍

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

Тайминг и таргетинг

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

Интересный визуальные вид

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

8 лучших примеров мобильных модальных окон

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

1. Новый вид Gmail

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

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

2. Включение push-уведомлений в Youtube TV

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

3. Функции умного дома Spotify

Красота модального окна Spotify заключается в его простоте. Сообщение понятно — вы можете транслировать своих любимых исполнителей из Spotify в Google Home. Несмотря на то, что конечному пользователю это кажется легким, ясно, что много времени было потрачено на определение времени появления этого сообщения, которое появляется только тогда, когда пользователь слушает музыку рядом с устройством Google Home. Это гарантирует, что сообщение актуально и полезно для пользователя в данный момент.

Spotify знает, что возможность потоковой передачи их приложения на несколько устройств означает лучшее удержание и доход. Их простое модальное решение отлично справляется с задачей возврата пользователей.

4. Простое обновление дизайна Sephora

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

5. Привлекательные допродажи Venmo

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

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

6. Индивидуальное предложение Caviar

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

Продвижение в приложении хорошо работает для 2 разных аудиторий:

• Латентные пользователи Caviar, которым нужен последний толчок для размещения заказа
• Постоянные пользователи Caviar, которые заслуживают награды за свою лояльность

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

7. Игровые достижения Nike Run Club

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

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

8. Запрос на отзыв в OpenTable

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

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

Мобильные модальные окна — возможность улучшить вовлечение и удержание

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

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

Источник