Hi-Tech

Чтобы пользователь не закрыл приложение ещё при загрузке: правила создания начального экрана

Перевод материала креативного директора студии мобильной разработки Gorilla Arm Дункана Кэмпбелла.

В закладки

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

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

Что такое экран загрузки

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

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

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

Простая заставка приложения Verse

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

Правило трёх секунд

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

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

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

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

Представьте, что вам нужно ждать трёхсекундную заставку WhatsApp каждый раз, когда вы хотите отправить сообщение другу, или трёхсекундную заставку Tinder каждый раз, когда получаете совпадение (что, надеюсь, происходит довольно часто).

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

Простой вход

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

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

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

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

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

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

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

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

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

Отличная анимация, но смотреть её каждый раз будет утомительно

Какой код использовать

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

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

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

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

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

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

Что, если загрузка данных длится дольше трёх секунд

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

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

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

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

Но зачем? Насчёт предварительной загрузки изображений — многие приложения делают это во время заставки. Для обновляющегося контента (например, приложение доставки еды или онлайн-магазин) это будет означать, что заставка всегда будет медленной, потому что каждый раз, когда вы открываете приложение, ему будет нужно загрузить новые изображения.

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

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

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

Что насчёт ошибок

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

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

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

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

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

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

Вот как приложение XConfessions избегает всплывающих окон при ошибке 

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

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

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

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

Поэтому нам нужен механизм, чтобы проверить, является ли установленное приложение последней версией. Сегодня невозможно заставить пользователей обновить своё приложение через App Store или Play Store. 0. Попросите ваших разработчиков добавить минимальную версию приложения в бэкенд — в приведенном выше примере минимальная версия приложения будет установлена на 2.

0, то покажем сообщение на заставке с надписью: «Вам необходимо обновить приложение, чтобы продолжить использовать нашу платформу». Если установлена версия меньше 2. После обновления они смогут продолжить использовать приложение. Сделайте так, чтобы пользователям было удобно, добавьте кнопку, которая доставит их прямо в магазин для обновления приложения.

И да и нет. «Этот шаг необязателен?» — спросите вы. А это значит, что у разработчиков будет больше работы и приложение станет сложнее. Если вы пропустите этот шаг, вы на 100% привяжете себя к поддержке старых версий приложения.

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

Добавление нового

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

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

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

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

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

Отлично анимированный переход в приложении HQ

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

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

  • Будьте проще. Сделайте короткую, изящную анимацию, которая представит приложение.
  • Всегда помните о правиле трёх секунд. Если оно нарушается, покажите индикатор загрузки.
  • Загрузите минимальное количество данных с сервера, но убедитесь, что есть вся необходимая информация для немедленного отображения следующего экрана.
  • Интегрируйте ошибки в экран заставки, чтобы избежать уродливых всплывающих окон.
  • Убедитесь, что пользователи используют последнюю версию приложения. Если они этого не делают, направьте их в магазин для обновления.
Теги
Показать больше

Похожие статьи

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

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

Кнопка «Наверх»
Закрыть