Представьте, вы зашли в мобильное приложение, кликнули на интересный раздел, но ничего не происходит. Колесико прогресса крутится, но контент не появляется. Секунды тянутся мучительно долго. Знакомо? Если да, то вы столкнулись с плохим UX окна загрузки.
Каждый раз, когда пользователь ждет загрузки страницы, он думает, действительно ли выгоды от использования продукта стоят ожидания. От того, насколько удобно реализован этот момент, зависит его лояльность как клиента. По данным исследований, 40% пользователей покидают сайт, если загрузка длится дольше 3 секунд.
Вывод очевиден, нельзя недооценивать влияние окна загрузки на UX. Каждая секунда ожидания либо укрепляет лояльность пользователя, либо склоняет его к тому, чтобы закрыть вкладку. Проведите тест: попросите 5 коллег или знакомых оценить окно загрузки на вашем сайте. Ответы могут вас удивить.
Хотите узнать мнение клиентов о вашем веб- или мобильном приложении? Онлайн-сервис опросов «Анкетолог» поможет собрать обратную связь и улучшить пользовательский опыт на каждом этапе взаимодействия – в том числе на экране загрузки.
К сожалению, ожидание – неизбежная часть взаимодействия с цифровыми продуктами. В это время в приложении происходят важные для его корректной работы процессы – загрузка данных, инициализация сервисов, настройка окружения.
Правильно оформленная страница информирует пользователя о текущем статусе загрузки, позволяя избежать впечатления, что приложение не отвечает. По данным UX-исследований, анимация на странице загрузки снижают чувство неопределенности и тревоги и помогает улучшить восприятие процесса ожидания.
Привлекательное окно загрузки улучшает UX, делает его более приятным и информативным. Вот несколько способов, как можно разнообразить окно загрузки:
Визуальные эффекты и анимация
Визуальные эффекты и анимация на странице загрузки – не просто украшение, а инструмент, который решает сразу несколько задач.
Яркая живая анимация удерживает внимание и не дает пользователям заскучать. Даже простой прогресс-бар в динамике интереснее, чем статичный. Анимированные элементы мотивируют дождаться загрузки страницы, а не закрыть приложение.
Визуальные эффекты с первых секунд погружают в атмосферу бренда. Для функциональных сервисов (например, мобильный банк) уместна сдержанная анимация. Неформальные бренды (например, дейтинг-приложения) могут настроить пользователей на игривый лад с помощью милых иллюстраций или парящих сердечек.
Плавные анимации создают ощущение, что загрузка происходит быстрее, чем на самом деле. По данным UX-исследований, при одинаковом времени загрузки пользователи предпочитают интерфейсы с анимацией – это улучшает их восприятие скорости работы приложения.
Пример: В мобильном приложении «СберМаркетинг» на странице загрузки визуализирован процесс доставки заказа велокурьером, а в приложении для совместного досуга «Кавер» вокруг названия сервиса «летают» графические элементы.
Мини-игры
Мини-игры выигрывают за счет своей интерактивности. Простая анимация привлечет внимание первые несколько раз, в то время как мини-игра затягивает и работает дольше за счет соревновательного азарта. Всегда приятнее проявлять активность, чем пассивно следить за анимированными элементами.
Мини-игры вызывают более яркие эмоции и лучше запоминаются. Полезный совет быстро забудут, а удачную игровую механику обсудят с друзьями и коллегами. Так страница загрузки поможет повысить узнаваемость бренда.
Анимированному маскоту мини-игра добавит очков обаяния. Персонаж, с которым можно поиграть, становится интерактивным помощником, а не просто милой картинкой. Это укрепляет эмоциональную связь и побуждает чаще пользоваться приложением.
Пример: Этот прием удачно реализован в браузере Google Chrome. Мини-игра становится доступна при проблемах подключения к интернету. Механика проста: динозавр Ти-Рекс бежит по бесконечному полю, перепрыгивая через кактусы и птерозавров. Игра затягивает и отвлекает от досады из-за неработающего интернета.
Хотите сыграть? Отключите Wi-Fi и откройте любую страницу в Chrome. Жмите пробел, чтобы прыгать, и помогите динозавру пробежать как можно дальше. Очки сохранятся, пока вы не обновите страницу.
Прогресс-бар
В отличие от других приемов прогресс-бар дает четкую обратную связь. Пользователь понимает, что процесс идет и сколько времени осталось. Это снижает тревожность и позволяет легче перенести мучительное ожидание.
Конечно, в плане развлечения прогресс-бар уступает интерактивным элементам или мини-играм. Зато он более универсален и уместен в любом продукте: от бизнес-приложения до интернет-магазина.
Пример хорошей страницы загрузки – веб-версия мессенджера WhatsApp. Их главное преимущество – сквозное шифрование переписки, которое гарантирует безопасность и конфиденциальность данных.
Чистая и лаконичная заставка радует глаз и информирует о процессе загрузки. Вместо статичной картинки мы видим визуализацию процесса передачи данных, значок шифрования и прогресс-бар. Так пользователь понимает, что все работает штатно, и спокойно дожидается перехода на сайт.
Еще один удачный прием – скелетон-скрин, серые плейсхолдеры будущего контента. Наблюдая за постепенным заполнением макета, пользователь чувствует прогресс и вовлекается в процесс. При этом предзагрузка элементов интерфейса ощущается быстрее, чем на самом деле.
Пример: Экран загрузки Figma (платформы для совместной работы дизайнеров) – прекрасный пример комплексного подхода к оптимизации ожидания. Разработчики Figma следуют принципам хорошего дизайна: они одновременно используют анимацию логотипа, скелетон-страницу и прогресс-бар.
Забавные персонажи
Дружелюбный персонаж очеловечивает взаимодействие с продуктом. Маскот воспринимается как виртуальный помощник, готовый поддержать и развлечь в моменты ожидания. Такой эмоциональный контакт повышает лояльность к бренду.
Маскот лучше запоминается и формирует узнаваемый стиль. Встретив знакомый образ на экране загрузки, пользователь почувствует себя как дома. А приятные эмоции от общения с маскотом перенесутся на весь опыт использования приложения.
Пример: Во время загрузки уроков на онлайн-платформе Duolingo пользователи видят анимированного талисмана – сову Дуо, которая выполняет забавные действия. Такая анимация развлекает пользователей и скрашивает ожидание.
Если вы только планируете внедрить маскота или хотите узнать отношение к текущему, опросите своих клиентов. С онлайн-сервисом опросов «Анкетолог» легко собрать обратную связь и выбрать персонажа, который лучше всего передает характер бренда.
Загрузите варианты маскотов в анкету, предложите респондентам оценить дизайн, характер и соответствие ценностям и миссии бренда. Так вы определите фаворита аудитории, который будет восприниматься как дружелюбный помощник в работе с продуктом.
Полезная информация
Познавательный контент приносит практическую пользу: пользователи узнают что-то новое и чувствуют, что проводят время с пользой. Это повышает доверие к продукту, а в долгосрочной перспективе формирует имидж экспертного бренда.
Этот прием прост в реализации и подходит для широкой аудитории. Не нужно собирать данные о конкретном пользователе, чтобы предложить ему релевантную информацию, достаточно подготовить подборку инсайтов, которые будут интересны всем.
Новости и обновления сервиса
Актуальный контент держит в курсе событий и стимулирует регулярно заходить на сайт. Новостная лента несет практическую ценность: анонсы свежих функций помогают сразу разобраться в обновлениях и начать их применять. Пользователи чувствуют свою причастность к актуальной жизни продукта и более лояльны к бренду.
Пример: Почтовый сервис Mailchimp анонсирует обновления сервиса на экране загрузки. Если бы UI/UX-дизайнеры ограничились стандартным спиннером, время ожидания казалось бы дольше. Вместо этого сервис использовал возможность, чтобы рассказать о полезных функциях, например, «отчетах по опросам».
Занятым пользователям непросто следить за обновлениями приложения. А ожидание загрузки – идеальный момент, чтобы привлечь их внимание. В эти секунды у вас есть «охваченная аудитория» людей, которые уже пользуются продуктом и открыты к новой информации.
Советы и подсказки
Обучающий контент приносит практическую пользу. Пользователи изучают возможности сервиса и повышают эффективность своей работы. А значит, извлекают больше выгод из пользования сервисом и становятся более лояльными.
В отличие от видеоуроков или справки, лаконичные подсказки на экране загрузки легче усваиваются. Для этого не нужно специально искать инструкции или выделять время на обучение. Полезные советы сами найдут пользователя в моменты ожидания. Это особенно ценно для новичков, которые только начали осваивать функционал.
Пример: Вместо стандартной анимации онлайн-платформа Mural дает пользователям практичные советы: как пригласить коллег, использовать шаблоны или экспортировать проект. Пользователи осваивают ключевые функции, просто следя за экраном загрузки. Это сокращает время адаптации новичков и помогает опытным юзерам открывать новые возможности сервиса.
Персонализация
В отличие от перечисленных ранее приемов, персональные месседжи адресованы конкретному пользователю. Это повышает его вовлеченность и создает ощущение, что продукт обращается лично к нему.
В отличие от универсальных цитат и фактов, персональный контент более релевантен и интересен. Он опирается на историю взаимодействия с сервисом: недавние покупки, популярные запросы, достижения в программе лояльности. Каждая загрузка становится уникальной и мотивирует возвращаться снова.
Пример: Когда пользователи заходят в Slack и ждут загрузки рабочего пространства, их приветствуют цитаты от коллег по команде. Если вы работаете с юмористами, как в нашем случае, страница загрузки Slack всегда вызовет улыбку или даст пищу для размышлений.
Это отличный пример использования контента, сгенерированного самими пользователями. Такие персональные сообщения создают ощущение связи с командой и заставляют предвкушать живое общение. Можно даже устроить мини-конкурс на самую остроумную цитату недели и размещать ее на экране загрузки.
Демонстрация процесса по шагам
Представьте, что вы ждете блюдо в ресторане и через стеклянную стену видите все, что происходит в этот момент на кухне. Знание того, что происходит с вашим заказом, дает чувство доверия и уменьшает беспокойство.
Пошаговая визуализация дает четкое представление о ходе операции. Пользователь видит, какие этапы уже пройдены, а какие еще впереди. Это повышает ощущение контроля и прозрачности.
Пример: TurboTax – отличный пример того, как страница загрузки может не только информировать, но и убеждать пользователей. Когда клиенты импортируют налоговые данные, они видят анимированное окно с обещанием быстро перенести всю необходимую финансовую информацию в декларацию.
Загрузка занимает до 10 секунд, хотя технически TurboTax может выполнить эту задачу гораздо быстрее. Разработчики намеренно замедлили процесс, чтобы у пользователей было время осознать комплексность задачи.
На первый взгляд это может показаться нелогичным, но в TurboTax уверены (и наверняка подтвердили это через юзабилити-тестирование), что дополнительные секунды помогают убедить людей в тщательной проверке аккаунтов и точном импорте данных.
Этот кейс возвращает нас к идее осмысленности действий. Когда пользователь запускает масштабный процесс, он ожидает, что это займет некоторое время. Мгновенный результат, напротив, может вызвать недоверие и подорвать значимость операции.
Очеловечивание бренда
В отличие от неодушевленных предметов, живые люди вызывают больший эмоциональный отклик. Фотографии и истории реальных сотрудников дают ощущение личного знакомства с командой и располагают к бренду.
В отличие от маскотов люди вызывают больше доверия и эмпатии. Клиенты видят, что за продуктом стоят конкретные личности со своими увлечениями и ценностями. Это помогает построить более близкую связь между аудиторией и брендом.
Пример: Агентство Ueno искало новые таланты в команду. Чтобы оптимизировать процесс найма и показать своих сотрудников, они разработали интерактивный 3D-инструмент для собеседований и представили свою команду прямо на экране загрузки.
Для финальной анимации выбрали шесть персонажей из каждого офиса Ueno (Нью-Йорк, Сан-Франциско, Исландия и Лос-Анджелес). Причем постарались охватить разные направления: операционку, дизайн, разработку, контент и так далее. Получился классный микс, который дает посетителям сайта шанс заглянуть за кулисы и прочувствовать культуру компании.
Оригинальный подход Ueno к экрану загрузки – отличный пример очеловечивания бренда. Вместо привычного прогресс-бара мы видим дружную творческую команду. Динамичная 3D-графика на фирменном розовом фоне приятна глазу. При этом заставка не выглядит перегруженной: 6 человек плавно сменяют друг друга.
Этот кейс показывает, что даже служебные экраны могут стать изюминкой сайта и даже инструментом подбора персонала. Оригинальный подход помог Ueno передать ценности бренда и привлечь «своих» кандидатов.
Хотите узнать, какой вариант экрана загрузки больше нравится пользователям? Протестируйте разные версии с помощью онлайн-платформы «Анкетолог». Загрузите в анкету изображения или анимации экранов. Попросите респондентов оценить привлекательность, уникальность, запоминаемость каждого варианта по шкале от 1 до 10.
Дополните количественные оценки качественной обратной связью, добавив открытый вопрос «Почему вы выбрали именно этот вариант?». Так вы не только определите лучший дизайн, но и поймете, что именно в нем цепляет аудиторию.
Что важно запомнить
Время ожидания – важный этап взаимодействия с цифровым продуктом. Каждая секунда либо укрепляет лояльность пользователя, либо побуждает его закрыть приложение. Поэтому дизайну экрана загрузки нужно уделить особое внимание.
Визуальные эффекты создают ощущение более быстрой загрузки, чем на самом деле. Кроме того, экран загрузки – отличная возможность выделиться среди конкурентов и предложить клиентам дополнительную ценность: советы по работе в приложении, новости об обновлениях, персонализированные рекомендации.
Комбинируйте разные варианты и тестируйте их в «Анкетологе», чтобы найти сочетание, которое лучше всего резонирует с аудиторией. Превратите досадную паузу в изюминку продукта, которая развлекает, вовлекает или даже обучает пользователей.