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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Есть и различие — на 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 уникальных участников.

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

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

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

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

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

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

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

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

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

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

Но, увы, нет.

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

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

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

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

#скелетныйэкран #анимация