- Статьи
- 6 мин на чтение
- 27
Скелетные экраны
Ключевые выводы: Скелетные экраны (или скелетон-экраны) применяют в качестве заполнителя страницы во время ожидания пользователями её загрузки. Этот индикатор прогресса появляется до того, как страница полностью загрузится, снижает ощущение долгого ожидания её загрузки, и подсказывает, как в конечном итоге она будет выглядеть.
Скелетный экран — шаблон дизайна, который применяют для обозначения загрузки страницы. При этом она похожа на вайрфрейм, который имитирует макет страницы. Этот особый тип индикатора прогресса используют исключительно для полностраничной загрузки.
В приложении LinkedIn скелетный экран показывает, что страница загружается, и даёт пользователям представление о её структуре
Типы скелетных экранов
Существует 3 основных типа скелетных экранов:
• Скелетные экраны со статичным контентом и статичными изображениями
• Анимированные скелетные экраны
• Скелетные экраны с отображением очертания страницы
Скелетные экраны со статичным контентом и статичными изображениями
Это наиболее распространенные скелетные экраны, которые похожи на вайрфреймы. В них контент и иллюстрации отображают в виде светло-серых блоков. Структура серых блоков имитирует структуру финальной страницы, заполненной контентом. Скелетный экран помогает пользователям мысленно представить то, что будет на странице, и даже даёт некоторые подсказки относительно её информационной иерархии.
В приложении Headspace скелетный экран помогает сформировать у пользователей представление о структуре страницы. Этот скелетный экран опирается на правила дизайна, где большие серые поля — это изображения, а длинные прямоугольные поля — текст. Самая толстая серая линия в верхней части (1) обозначает заголовок страницы, а вторая, более короткая и тонкая линия под ней — описательный текст (2); ниже структура страницы представлена в виде карты последовательности (3) с карточкой на каждом этапе. В каждой карточке будет заголовок (4), небольшой сопроводительный текст (5) и изображение (6). Справа вы можете увидеть, как выглядит полностью загруженная страница.
Анимированные скелетные экраны
Некоторые скелетные экраны включают волновые анимации с использованием градиентов или элементов, которые плавно появляются и также плавно исчезают. Такие анимации похожи на анимацию ожидания (или лоадеры) и означают, что система продолжает работать и загружать контент, снижая у пользователей ощущение длительного ожидания загрузки и удерживая их внимание на загружаемом контенте.
Обратите внимание, что анимация такого рода может отвлекать, раздражать или даже создавать проблемы с доступностью для некоторых пользователей.
В приложении DoorDash представлен короткий скелетный экран с анимацией в виде мерцания, которое движется слева направо
Скелетные экраны с отображением очертания страницы
Один из вариантов, который мы не рекомендуем использовать, — скелетный экран, на котором отображается только очертание приложения без вайрфрейма с блоками контента. Такие минималистичные скелетные экраны включают только хедер (шапку), подвал (футер) и фон. Этот стиль не содержит блоки, которые меняются на контент, и, как следствие, не даёт пользователям представление об общей структуре страницы. Мы не советуем применять такое отображение, поскольку, если людям придётся слишком долго ждать, они решат, что страница не работает, потому что экран будет оставаться преимущественно пустым.
В приложении NBC в качестве скелетного экрана появляется лишь очертание страницы, а волновой фоновый градиент используется, чтобы сообщить о том, что страница загружается. Однако этот скелетный экран по сути эквивалентен лоадеру, поскольку не содержит никакой информации о структуре страницы
Преимущества использования скелетных экранов
Скелетные экраны помогают пользователю понять, что страница загружается, и одновременно сообщают о том, как она будет выглядеть. Вот несколько причин, по которым стоит рассмотреть возможность применения скелетных экранов:
• Показать пользователю, что сайт работает. Когда человек заходит на сайт или в приложение и видит пустой экран во время загрузки страницы, он может решить, что с ней что-то не так, и уйти. Скелетные экраны помогают людям сосредоточиться на контенте, который загружается, и избавляют от необходимости смотреть на пустой экран во время ожидания.
• Создать иллюзию менее длительного периода ожидания загрузки. Долгая загрузка раздражает пользователей. Поскольку скелетный экран похож на вайрфрейм, он создаёт иллюзию того, что страница постепенно переходит в свой окончательный формат. Индикатор прогресса даёт людям ощущение, что загрузка не займёт много времени.
• Снизить когнитивную нагрузку на пользователей. Отображение сначала пустой страницы, а затем сразу финальной, заполненной контентом, будет перегружать людей. Скелетные экраны помогают им понять, как будет выглядеть страница, и дают им время на то, чтобы они могли мысленно представить её структуру, прежде чем на них обрушится
сразу весь поток информации. Например, когда пользователи видят большой квадрат с маленьким прямоугольником под ним, они знают, что затем появится изображение с подписью.
Что лучше: скелетные экраны или индикаторы прогресса и лоадеры?
Скелетные экраны, индикаторы прогресса и лоадеры показывают, что система загружает информацию, но они служат разным целям и лучше всего работают в различных ситуациях. Вот несколько рекомендаций, которые помогут принять решение о том, когда использовать каждый из этих элементов дизайна.
Длительность периода ожидания имеет значение
Лоадеры или анимация ожидания дают пользователям информацию о том, что система работает, но не указывают, как долго им придётся ждать. Поэтому их лучше применять тогда, когда загрузка страницы занимает от 2 до 10 секунд. Скелетные экраны также следует использовать в том случае, когда время ожидания составляет менее 10 секунд. С другой стороны, мы настоятельно рекомендуем выбирать индикаторы прогресса для любой страницы, загрузка которой занимает более 10 секунд, потому что они показывают людям состояние системы и сообщают о том, сколько ещё им придется ждать. Всё, что превышает порог ожидания, равный 10 секундам, требует явной оценки продолжительности ожидания.
Если период ожидания менее 10 секунд, подойдут как скелетные экраны, так и лоадеры. Как выбрать между ними? Лоадеры, как правило, лучше всего работают для отображения загрузки одного блока, например, видео или карточки, которая находится на странице. Скелетные экраны (за исключением экранов с отображением очертания страницы) лучше использовать при загрузке полного экрана, поскольку вайрфрейм даёт пользователям представление о том, как будет выглядеть страница, и, таким образом, минимизирует когнитивную нагрузку.
Никаких скелетных экранов или лоадеров при быстрой загрузке страницы
Если загрузка страницы составляет менее 1 секунды, скелетные экраны или лоадеры не нужны, поскольку они, скорее всего, не повлияют на опыт взаимодействия пользователя с интерфейсом. Скелетный экран в таких случаях будет только раздражать, поскольку мерцающая страница может вызвать у пользователей ощущение, что они не успевают за ней.
Индикаторы прогресса лучше всего подходят для показателей, связанных с процессом
Скелетные экраны применяют для отображения прогресса только тогда, когда процесс, который выполняет система, загружает всю страницу. Если происходит какой-то другой процесс, например, загрузка, выгрузка, преобразование файла, то нет смысла применять скелетный экран. Это может сбить пользователя с толку. Вместо этого покажите ему индикатор прогресса или мастер, который проведёт человека через все этапы процесса.
Не используйте скелетный экран с отображением очертания страницы
Скелетные экраны с отображением очертания страницы не дают никакой информации о макете страницы. Они показывают только хедер (шапку), подвал (футер) и пустой фон. Не следует использовать их в качестве индикатора прогресса, поскольку они не дают пользователям никакого ощущения того, что страница постепенно переходит в свой окончательный формат. Если в итоге людям придётся долго ждать, они решат, что страница не работает, и покинут её.
Заключение
Из-за длительной загрузки пользователи, как правило, становятся нетерпеливыми. Скелетные экраны облегчают боль от ожидания средней продолжительности, потому что постепенно отображают структуру страницы с помощью заполнителей и едва заметной анимации. Хотя скелетные экраны полезны, они не отменяют необходимость в оптимизации производительности. Скелетные экраны — просто один из дополнительных инструментов для улучшения ситуации, связанной с ожиданием, с которым иногда приходится сталкиваться пользователям во время загрузки контента.
Перевод статьи Skeleton Screens 101 из блога nngroup
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- nngroup
