Для чего дизайнеры используют каркасные экраны?

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

‍Какие бывают типы каркасных экранов?

Существует 3 основных типа каркасных экранов:

• Со статичным контентом и изображениями;
• Анимированные; 
• Рамочные.

1. Каркасные экраны со статичным контентом и изображениями

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

2. Анимированные каркасные экраны 

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

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

DoorDash использует каркасный экран с короткой анимацией мерцания, движущейся слева направо

3. Рамочные каркасные экраны

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

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

Преимущества каркасных экранов

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

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

Что лучше: каркасный экран, прогресс-бар или спиннер?

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

Продолжительность времени ожидания имеет значение

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

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

Каркасные экраны и спиннеры противопоказаны при быстрой загрузке страниц

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

Прогресс-бары подходят для демонстрации различных процессов

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

Не используйте рамочные каркасные экраны 

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

Заключение

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