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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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