Skeleton Theme

Для иллюзии быстрой загрузки страниц: правила создания скелетного экрана на сайтах и в приложениях

Перевод исследования продуктового дизайнера компании Clio Билла Чанга.

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

Вскоре после публикации у меня состоялась интересная дискуссия с коллегами — дизайнерами и инженерами — на тему «как узнать, действительно ли эффективен скелетный экран загрузки?»

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

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

Но действительно ли они работают?

Вкратце о результатах моего исследования

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

• Скелетные экраны загрузки не должны блокировать постепенную загрузку контента (когда данные полностью загружены, контент должен немедленно появляться). Подавляющее большинство скелетных экранов, используемых сегодня, на самом деле просто заставки, а не скелетные экраны, описанные Люком Вроблевски (родоначальник скелетных экранов).

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

• Скелетные экраны с движением слева направо (например, волновая или мерцающая анимация, наподобие используемых в Facebook или Google), воспринимаются более короткими по продолжительности, чем импульсные (переход из прозрачного состояния в непрозрачное).

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

• Результаты этого исследования не позволяют нам сделать окончательные выводы, но дают подсказки о том, как лучше проектировать паттерны загрузки.

Обзор скелетных экранов

Люк Вроблевски впервые использовал термин «скелетный экран» в статье, где говорится о том, что дизайнеры отказываются от использования спиннеров (анимированные графические элементы, вращающиеся вокруг центральной точки) в пользу визуальных плейсхолдеров.

Он ссылался на свою работу над нативным мобильным приложением Polar, в частности, на чрезмерное время ожидания при загрузке веб-страниц приложения, на которое жаловались пользователи. Первоначально для того, чтобы обозначить процесс загрузки страницы, использовались спиннеры.

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

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

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

Эксплицитные парадигмы загрузки

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

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

Что такое скелетный экран

Скелетные экраны — это пустые страницы, которые постепенно заполняются контентом, например, текстом и изображениями.

Фигуры, заполненные серым или нейтральным цветом (их обычно называют плейсхолдерами), появляются мгновенно, как только пользователь начал взаимодействие с призывом к действию или ссылкой. Затем плейсхолдеры — «кости» скелетного экрана — заменяются фактическим контентом сайта. Задача скелетных экранов — создать иллюзию мгновенной загрузки.

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

Facebook

LinkedIn

Google Drive

YouTube

Общие черты

Во всех приведенных выше примерах используются общие элементы визуального дизайна:

• Используется движение внутри объектов скелетного экрана.

• Объекты скелетного экрана выкрашены в светло-серый или нейтральный цвет.

Есть и различие — на Facebook, Linkedin и YouTube скелетные экраны выступают в качестве экранов загрузки, тогда как Google Drive использует спиннер для загрузки основной структуры папок, а объекты скелетного экрана только для слотов быстрого доступа.

Исследование

Моё исследование состоит из двух основных фаз.

Первая противопоставляет общую парадигму загрузки (спиннер) скелетному экрану и более подробно описана в разделе «Парадигма против парадигмы».

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

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

Предыдущие исследования

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

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

Принципы тестирования

Я хотел протестировать скелетные экраны на мобильном устройстве, потому что оно лучше всего подходит для создания «полусфокусированного» состояния, в котором большинство из нас находятся, когда мы используем смартфон (половина внимания сосредоточена на устройстве, а вторая половина сосредоточена на пересечении улицы или поедании бейгла).

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

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

Исследование: парадигма против парадигмы

Гипотеза: отображение скелетного экрана уменьшит воспринимаемое участниками время ожидания.

Методология

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

• я перебивал участника теста вопросами во время тестирования;

• вопросы, которые я задавал, были утомительными, поскольку я провёл двенадцать индивидуальных тестов с каждым участником и должен был задавать одни и те же вопросы после каждого «раунда»;

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

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

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

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

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

Приложение для тестирования

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

Когда участник завершал тест, результаты отправлялись в базу данных Firebase, откуда я мог ежедневно выводить результаты в файл CSV (данные, разделённые запятыми) для анализа.

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

• Нажать на кнопку, чтобы начать тест.

• Подождать, наблюдая за скелетным экраном, спиннером или пустым экраном.

• Посмотреть на загруженную страницу.

• Ответить на два вопроса: сколько секунд заняла загрузка страницы, какие остались ощущения от ожидания загрузки страницы.

• Повторить этот тест ещё восемь раз (всего девять тестов за сеанс)

• В конце я задал вопросы, чтобы собрать более подробную информацию. Обычно я начинал разговор, спрашивая: «Сегодня вы видели разные способы загрузки мобильной страницы. Какой вам понравился больше всего?»

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

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

Результаты

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

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

Результаты измерения воспринимаемой продолжительности (как долго участник ощущал ожидание)

Результаты измерения эмоциональной реакции (ощущения участника после просмотра метода загрузки)

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

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

Анализ и интерпретация

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

В некоторых случаях скелетный экран эквивалентен спиннеру (например, в тестах длительностью 5,5 секунд) и превосходство скелетных экранов над спиннерами незначительно.

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

В обоих измерениях (воспринимаемая производительность и эмоциональное воздействие) любой индикатор загрузки превосходит пустой экран.

Исследование: разные вариации скелетного экрана

Гипотеза: использование скелетного экрана уменьшит воспринимаемое участниками время ожидания загрузки.

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

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

Методология

Чтобы определить эффективность разных вариантов визуального представления скелетных экранов, я потратил время на поиск самых популярных вариантов, используемых сегодня на рынке. Вот они:

• Статические плейсхолдеры.

• Импульсные плейсхолдеры (переход объектов скелетного экрана из прозрачного состояния в непрозрачное, медленное перемещение туда-сюда).

• Волновая (или мерцающая) анимация (перемещение справа налево или наоборот), анимация, наложенная поверх плейсхолдеров.

Когда погода ухудшилась (вначале я проводил тестирование на улице в центре Ванкувера, Британская Колумбия), я обратился к 80 уникальным пользователям мобильных устройств на сайте UserTesting.com

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

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

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

Участникам не сказали, что продолжительность каждого примера, который они видели, была одинаковой (пять секунд). После просмотра двух методов презентации я спрашивал участника: «Какая из двух загрузок страницы, которые вы наблюдали, была быстрее?»

Тесты

Вот порядок тестов, которые я провёл:

• Я начал с тестирования статических и импульсных скелетных экранов, чтобы определить, повлияло ли движение (или его отсутствие) на восприятие пользователя.

• Затем я сравнил импульсную и волновую (или мерцающую) анимации.

• В третьем тесте я сравнил быстрые волновые переходы и медленную и размеренную волновую анимацию.

• Я сравнил движение слева направо и движение справа налево.

Пример загрузки с импульсным скелетным экраном

Пример медленной и устойчивой волновой анимации (также известной как мерцание)

Результаты

Статические и анимированные скелетные экраны

60% участников теста ответили, что анимированные скелетные экраны загрузились быстрее.

Размер выборки: 20 уникальных участников.

Импульсная анимация и волновая анимация

65% участников теста ответили, что волновая анимация загрузилась быстрее импульсной.

Размер выборки: 20 уникальных участников.

Быстрая и медленная и размеренная волновая анимация

60% участников теста ответили, что медленная волновая анимация короче во времени.

Размер выборки: 20 уникальных участников.

Волновая анимация слева направо и справа налево

68% участников теста ответили, что волновая анимация слева направо короче во времени.

Размер выборки: 20 уникальных участников.

Анализ и интерпретация

Результаты этой группы тестов показательные, но не окончательные.

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

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

Какие скелетные экраны лучше

С правильно настроенным движением

Хотя необходимо дальнейшее изучение эффективности скелетных экранов, исследование предоставило несколько подсказок, как сделать скелетные экраны максимально эффективными:

• Сделать выбор в пользу волновой, а не импульсной анимации (или мерцания, подобно той, которая используется в Facebook).

• Движение не должно быть слишком быстрым, чтобы не привлекать внимание к объектам скелетного экрана. Лучше сделать его медленным и размеренным (как в приложении Google для iOS).

• Стоит выбрать анимацию, которая перемещается слева направо (было бы интересно посмотреть, как этот паттерн воспримут в культуре чтения справа налево).

Используйте доминирующие цвета

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

Помните, скелетные экраны — это не экраны-заставки

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

При проектировании скелетных загрузок старайтесь постепенно загружать контент, заменяя объекты-плейсхолдеры скелета контентом, как только он станет доступным. Люк Вроблевски называет это «постепенной загрузкой контента».

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

Почему я решил написать эту статью

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

Как представитель поколения, которому приходилось вставлять тринадцать дискет для установки Windows 95, вы можете подумать, что LTE и оптоволоконные соединения могут заставить меня ностальгировать по более простым временам, когда я мог сходить на кухню за пирогом, пока загрузится страница моего любимого сайта Geocities со всеми GIF-файлами.

Но, увы, нет.

Я так же нетерпелив, как подростки в автобусе, жалующиеся на загрузку контента Instagram со скоростью 12 Мбит в секунду. Меня коробит, когда анимация мобильной навигации меньше 30 кадров в секунду.

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

Понимание того, как люди воспринимают время в контексте темпов развития технологий вокруг нас — поучительный опыт. Как сказал Питер Конрад: «Современность — это ускорение времени». Исходя из личных наблюдений, истина этого утверждения кажется очевидной.

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