Создание идеальной заставки (всплывающего окна)

05.05.2020
Posted in blog-article
05.05.2020 admin

Создание идеальной заставки (всплывающего окна)

Вашему вниманию перевод великолепной статьи о том, как должна выглядеть идеальная заставка для вашего приложения!

В первой части нашего сериала про «Инструментальный пакет программ для разработки приложений»  Креативный директор Gorilla Arm, Дункан Кэмпбелл,обращает своё внимание на первый экран, который ваши пользователи увидят — любимую  заставку.

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

Неправильно.

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

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

Давайте начнем…

Итак, что такое заставка?

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

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

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

Правило 3-х секунд

Прежде чем мы начнем анализировать, как сделать этот экран лучше, чем он есть, мы должны рассмотреть несколько ограничений. Во-первых, заставка должна быть быстрой. Как быстрой? Как можно быстрее, но не более 2 или 3 секунд. Любой пользователь, который регулярно использует ваше приложение, быстро расстроится , если ему придётся сидеть и ждать более 2-3 секунд, пока приложение откроется. И почему вы хотите заставить их ждать в любом случае — вы ведь хотите, чтобы они уже лазали внутри приложения, нажимали кнопки, покупали продукты и соединялись с другими? Поэтому, независимо от вашей стратегии заставки, убедитесь, что если она нарушит правило 3-х секунд, вы идёте и придумываете новую стратегию.

Также учтите, что если ваше приложение регулярно используется (т. е. ваши пользователи открывают приложение не реже одного раза в день), вы должны уменьшить это до 1-секундного правила или даже попытаться удалить заставку на экране вовсе. Представьте, что вам нужно сидеть и ждать 3-секундную заставку в  Whatsapp каждый раз, когда вы хотите написать другу или 3-секундную заставку Tinder каждый раз, когда вы получаете пару (мы надеемся, это происходит довольно часто). В этих случаях вы можете пропустить заставку в целом и просто перейти прямо к контенту — загрузив все, что вам нужно с главного экрана, и высветив любые ошибки или проблемы после их загрузки.

Большой вход

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

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

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

Работа с партнерами или спонсорами? Сейчас самое время представить их (но помните, что это не самая интересная информация для пользователей, поэтому вы можете рассмотреть возможность сохранения этого для другого приложения). Независимо от того, что вы решите, делайте это простым. Это не тот момент, чтобы заставлять ваших пользователей сосредотачиваться — просто нежно подведите их к тому, что вы для них создали,во время продвижения своего качественного приложения.

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

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

https://dribbble.com/sammedve  это слишком долго для каждой сессии

Какой код я должен запустить?

Спросите любого разработчика приложений, и они дадут вам список из 100 вещей, которые они хотят сделать в коде, пока загружается экран заставки. Но трюк здесь заключается в том, чтобы сосредоточить этот короткий промежуток времени на абсолютном минимуме, который вам нужен, так что следующий всплывающий экран будет иметь достаточно контента с плавным  переходом. Что касается разработчика UX, ваша ответственность заключается в том, что впечатление пользователя имеет первостепенное значение, и прямо сейчас на этом первом экране приложения, если вы ошибетесь, вы можете саботировать всю свою тяжелую работу в остальной части приложения. Пообщайтесь с вашими разработчиками и разработайте способ сократить этот список из 100 вещей до 3 или 4 ключевых запросов сервера.

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

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

Итак, что, если загрузка данных нарушает 3-х секундное правило?

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

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

Многие приложения не делают в заставке примечание о загрузке изображений . Почему бы и нет? Для контента, который, вероятно, будет отличаться каждый раз, когда пользователь входит в  приложение (например, приложение доставки еды или онлайн-магазин), это будет означать, что заставка всегда будет «медленной», потому что каждый раз, когда пользователь будет открывать приложение,приложению будет необходимо время загрузить новые изображения.

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

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

Как насчет ошибок?

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

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

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

Приложение XConfessions показывает ошибки и запросы на обновление непосредственно в заставке, чтобы избежать всплывающих окон

Поддержание актуальности приложения

Последний трюк для идеального заставки — проверить, использует ли пользователь правильную версию приложения. Представьте себе, что вы запускаете приложение (версия 1.0), и в какой-то момент вам нужно обновить некоторые ключевые функции. Вы создаете новое приложение версии 2.0, и вы готовы запустить его в магазинах приложений, но вам нужно убедиться, что все ваши пользователи обновлены до новой версии. Большинство разработчиков сделают все возможное, чтобы этого не произошло, написав код, который работает как для более старой версии, так и для более новых, но это требует времени и затратно. Некоторые разработанные приложения делают так, что просто блокируют пользователям использование более старых приложений и заставляет их обновлять для экономии времени и денег. Это особенно характерно в начале проекта, когда его функциональность более неустойчива и нуждается в свободе развития без затрат на поддержку старой версии.

В настоящее время нет способа заставить пользователей обновлять свое приложение через App Store или Play Store. Поэтому нам нужен механизм, чтобы проверить, действительно ли установленное приложение является допустимой версией. Чтобы это сработало, попросите своих разработчиков добавить минимальную версию приложения в серверной части — в примере выше,  минимальная версия приложения будет установлена на значении 2.0, а если в настоящее время установлено приложение (1.0) — это что-то меньшее, чем 2.0, мы будем показывать на экране заставки информацию: «Вам нужно обновить приложение, чтобы продолжить использовать нашу платформу». Упростите обновление для пользователя, предоставив им кнопку, которая направляет их прямо в хранилище для обновления своего приложения. И после обновления они смогут продолжить использовать ваше приложение.

«Является ли этот шаг дополнительным?» Я слышу твой крик. Ну, и да и нет. Если вы пропустите этот шаг, вы на 100% привязаны к поддержке более старых версий вашего приложения. И это означает, что у ваших разработчиков будет больше работы, и ваше приложение становится более сложным. Тем не менее, через экран заставить ваших пользователей обновиться до последней версии очень   тяжело и затратно по усилиям и это следует использовать только в крайних случаях. Но, как правило, я бы сказал, что этот код был создан с целью никогда не использовать его. Если вам когда-нибудь понадобится использовать его в чрезвычайной ситуации, он там есть, и, возможно, будет вашей наградой.

Добавление чего-то особенного

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

Shazam легко интегрирует их логотип в основной интерфейс

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

HQ убивает его своим анимированным и красиво перенесенным заставкой

Идеальная экран-заставка

Итак, помните:

-Держите заставку простой с короткой, элегантной анимацией, чтобы презентовать свое приложение.

-Всегда помните правило 3-х секунд. И если вы перешагиваете 3 секунды, покажите индикатор загрузки.

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Contact

Давайте работать вместе!

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

Вы разработчик?

Пишите! Нам постоянно нужны новые кадры, либо можем помочь в продвижении вашего приложения

Новичок?

Поможем быстро войти в нишу, не тратя годы на понимание

Давно в нише?

Рады будем пообщаться как на темы whitehat, так и blackhat тематики ^_^ + всегда есть что обсудить по поводу рекламных сетей

ПИШИ В TELEGRAM!

Contact