Скелетная загрузка как сделать
Как создать каркасные загрузчики в CSS. Skeleton loader.
Оптимизируйте восприятие времени загрузки с помощью каркасной загрузки контента
Движение играет важную роль в приложениях. Это может помочь сделать интерфейсы более выразительными и интуитивно понятными, а также предоставить ключевую информацию, такую как обратная связь, которая может направить внимание пользователя на важные части страницы.
Когда дело доходит до загрузки анимации, движение также может сыграть большую роль в улучшении восприятия. С правильным балансом скорости, направления или замедления, движение может сделать загрузку более производительной.
Как каркасные загрузчики улучшают восприятие
Хороший пример ощутимого улучшения производительности происходит в загрузчиках Skeleton. Каркасный или как его еще называют скелетный загрузчик может выполнять роль заполнителя для информации, которая все еще загружается, помогая пользователю сосредоточиться на прогрессе, а не на времени ожидания.
Это то, что мы рассмотрим в этой статье. Мы рассмотрим улучшение анимации загрузки панели мониторинга от простого загрузчика до анимации загрузки заполнителя.
Анимация
Анимация довольно простая, но очень эффективная. Мы хотим анимировать градиент слева направо. Мы также хотим убедиться, что градиент проходит через свой контейнер, чтобы исчезнуть, прежде чем появится снова.
Работая над движениями, мы обычно должны стремиться к продолжительности где-то между 300-500 мс. Что-нибудь ниже этой продолжительности, анимация становится слишком быстрой для восприятия; большее время может показаться вялым, заставляя пользователей чувствовать, что они ждут больше, чем на самом деле. Также важно отметить, что чем сложнее и больше анимация, тем медленнее она должна быть.
Мы также хотим использовать приятное смягчение движения, чтобы анимация была более естественной. Ничто в реальном мире не движется с постоянной линейной скоростью.
Чтобы полностью понять, как будет работать анимация, лучше всего объяснить ее с помощью другой анимации:
Анимация градиента
Здесь мы анимируем градиент слева направо, начиная с внешней стороны контейнера.
Написание CSS
В HTML мы будем работать только с одним элементом-заполнителем. Вот с этим:
Вся анимация будет идти внутри ::before элемента. Это псевдоэлемент, который часто используется для добавления косметики в выбранный элемент. Подумайте о псевдоэлементе как о добавленном ключевом слове к селектору, который позволяет стилизовать определенные его части. Но прежде чем заняться этим, давайте определим некоторые стили для родителя:
Давайте проанализируем этот псевдоэлементный код:
Все это должно привезти к следующей анимации:
Все что вам нужно знать о скелетной загрузке приложений, результаты исследования
Откуда мы знаем, что скелетная загрузка действительно работает?
Несколько лет назад я написал о проектировании для повышения производительности и скорости, в которой изложил методы создания иллюзии быстрой загрузки страниц в приложениях и Интернете.
Вскоре после публикации статьи, у меня состоялась интересная дискуссия с коллегами дизайнерами и инженерами, в основном касательно одного вопроса: «Откуда мы действительно знаем, что скелетная загрузка работает?» Хороший вопрос, ведь не существует авторитетных исследований эффективности этого паттерна (которые, как нам казалось, имело бы смысл провести).
Скелетная загрузка разных форм и размеров повсеместно встречается в интернете и приложениях – везде, где люди вынуждены ждать.
Но действительно ли она работают?
Читайте также:
Исследование
Скелетные экраны: обзор
Люк Вроблевски впервые придумал термин «скелетный экран» статье, в которой говорится, что дизайнеры избегают использовать спиннеры (как правило, анимированные графические элементы, вращающиеся вокруг своей центральной точки) в пользу визуальных плейсхолдеров. Он ссылался на свою работу над нативным мобильным приложением Polar. В частности на чрезмерное время ожидания, на которое жаловались пользователи при загрузке веб-представлений приложения. Первоначально для указания того, что страница загружается, использовались спиннеры.
«Мы заставили людей следить за часами… в результате время шло медленнее, и наше приложение тоже. Мы сосредоточились на показателе, а не на прогрессе».
Чтобы уменьшить фокус на процессе загрузки вместо фактического контента, который загружается, Вроблевски представил новый паттерн дизайна – скелетный экран. По его собственным словам, это «по сути пустая версия страницы, в которую постепенно загружается информация». Вроблевски показал эти визуальные плейсхолдеры в виде светло-серых прямоугольников, которые мгновенно появлялись в тех областях, где контент еще не был загружен.
Перемещение нашего внимания от фактической загрузки к загружаемому контенту– это обманный маневр. Но каково фактическое воздействие?
Парадигмы загрузки
Первоначально спиннеры использовались в приложении Polar для связи с пользователями, когда веб-страница загружалась с сервера. Давайте внесем ясность: в своей публикации Люк не выбирает обычную практику использования спиннеров – вместо этого он комментирует (возможно, косвенно) естественную склонность человека ненавидеть время простоя и необходимость управлять восприятием человека.
Спиннеры и индикаторы выполнения являются эффективными парадигмами загрузки, поскольку они фокусируют пользователя на периоде загрузки и, чаще всего, блокируют взаимодействие пользователя, пока макет не загрузит достаточно, чтобы стать полезным.
Определение скелетного экрана
Скелетные экраны – это пустые страницы, которые постепенно заполняются контентом, например, текстом и изображениями, по мере их появления (т. е. когда позволяет сетевая задержка). Фигуры, заполненные серым или нейтральным цветом, обычно называемые плейсхолдерами (заполнителями), мгновенно появляются после взаимодействия пользователя с призывами к действию или ссылками. Затем плейсхолдеры (так называемые «кости» скелета) заменяются фактическим контентом сайта, и иллюзия завершена. Вот что делают каркасные экраны – создают иллюзию мгновенного перехода.
Примеры каркасных экранов
Google Drive
YouTube
Общие черты
Все приведенные выше примеры используют общие подходы визуального дизайна:
Исследование
Мое исследование состоит из двух основных фаз:
Первая фаза противопоставляет общую парадигму загрузки (спиннер) и скелетный экран и более подробно описана в разделе «Парадигма против парадигмы».
Вторая фаза исследует изменения на скелетных экранах, измеряя эффективность каждого варианта. Я планировал этот этап прежде, чем полностью узнал результаты первой фазы, поскольку мое предположение заключалось в том, что тенденция использования каркасных экранов будет продолжаться независимо от его оценочной эффективности, и я хотел бы найти оптимальный вариант для своей собственной работы. См. раздел «Переменные реализации» для получения дополнительной информации об этом этапе исследования.
Предыдущие исследования
Появилось небольшое исследование, которое показывает эффективность скелетных экранов при уменьшении воспринимаемого времени ожидания. В 2017 году агенство Viget выпустило исследование, которое выступает против хваленой ценности скелетных экранов в сравнении со спиннерами и пустым экраном (острожно спойлер: скелетные экраны показали худший результат с точки зрения воспринимаемой продолжительности времени). Тем не менее, даже имея на руках исследование Viget, я хотел еще немного поработать.
Принципы тестирования
Я хотел протестировать скелетные экраны на физическом мобильном устройстве, так как это лучше всего представляет собой «полуфокусированное» состояние, в котором большинство из нас находятся, когда мы используем смартфон (половина внимания сосредоточена на устройстве, а вторая половина сосредоточена на пересечении улицы или поедании бублика). Я также хотел, чтобы участники тестов (предпочтительно) не работали в технологической сфере. Поэтому я вышел на улицу в центре Ванкувера и стал общаться с местными жителями любого возраста и пола.
Во второй части этого исследования я использовал тестировщиков с сайта UserTesting.com (к сожалению, из-за изменившейся погоды становилось все труднее сидеть и ждать участников исследования на улице).
Парадигма против парадигмы
Гипотеза: отображение скелетного экрана заставит людей воспринимать период загрузки более коротким по продолжительности.
Методология
Обдумывая, как лучше всего подходить к участникам, я понял, что предыдущие тесты, которые я пытался провести, чтобы опровергнуть эту гипотезу, изобиловали проблемами, которые можно легко минимизировать, а именно:
Чтобы минимизировать некоторые из этих проблем, я решил, что лучшим решением будет приложение на физическом телефоне, представленное участнику теста для самостоятельной работы. Предварительное тестирование приложения оказалось положительным после нескольких итераций и уточнений.
Я подошел на улице к 126 уникальным участникам теста из разных слоев общества, в основном не имеющих технологического образования. Размер выборки составлял 80 человек, все имели опыт работы с мобильными устройствами.
Приложение для тестирования
Приложение было написано на языке программирования Swift и загружено на iPhone 7 (по моему мнению, это форм-фактор, который, комфортно держать большинству людей). Когда участник завершал тест, результаты отправлялись в базу данных Firebase, откуда я мог ежедневно выводить результаты в файл CSV (данные, разделенные запятыми) для анализа.
Участников просили прочитать инструкции, представленные в приложении, и не спешить с выполнением представленных задач. Прежде чем начать тесты, я провел участников через очень быструю разминку, чтобы они знали, чего ожидать. Вот что они должны были делать:
Чтобы минимизировать любую предвзятость, когда наблюдение одного паттерна перед другим может исказить воспринимаемую продолжительность, приложение автоматически рандомизировало порядок, в котором появлялись различные парадигмы загрузки.
Приложение также рандомизировало фактическую продолжительность, представленную для каждой парадигмы загрузки, поэтому не казалась, что продолжительность постепенно становилась длиннее или короче.
Результаты
При сравнительном тестировании каркасных экранов, спиннеров и пустых страниц в случайном порядке скелетные экраны показали лучшие результаты с точки зрения воспринимаемой продолжительности (см. таблицу ниже для краткого изложения средних результатов теста с размером выборки 80 человек). Фактическая продолжительность загрузки, показанная участникам теста, была рандомизирована, чтобы они не могли интерпретировать постепенное увеличение продолжительности. Хуже всего себя показал пустой экран.
Скелетные экраны также лучше всего показали себя на эмоциональном уровне. Участники были счастливее всего с загрузкой скелетного экрана и наименее счастливы с пустым экраном. После просмотра каждой комбинации продолжительности и метода загрузки участникам было предложено оценить ощущения после каждого просмотра с помощью эмодзи, 0 = очень доволен и 4 = максимальное разочарование. Вот что они видели после каждого теста:
Анализ и интерпретация
Когда каркасные экраны используются между загрузками страниц на мобильных устройствах, воспринимаемое истекшее время (продолжительность) короче по сравнению со спиннером или пустым экраном. В некоторых случаях скелетный экран эквивалентен спиннеру (например, в тестах длительностью 5.5 секунд) и превосходство скелетных экранов над спиннерами незначительно. Можно предположить, что различные методы представления спиннера могут существенно повлиять на результаты. В наших тестах я использовал, как я думал, стандартный спиннер и наиболее нативный для платформы (в этом случае iOS).
В обоих измерениях (воспринимаемая производительность и эмоциональное воздействие) любой индикатор загрузки превосходит пустой экран.
Переменные реализации
Гипотеза: визуальная презентация скелетных экранов заставит людей воспринимать время загрузки, как более короткое по продолжительности.
В начале этого исследования я выдвинул гипотезу о том, как вариации скелетного экрана могут повлиять на воспринимаемую продолжительность (до того, как я узнал были ли скелетные экраны результативнее спиннеров).
Ранние намеки на то, что визуальная презентация скелетных экранов может повлиять на воспринимаемую продолжительность, исходили из таких источников, как это исследование 2010 года (в этом исследовании индикаторы текущего состояния, оказались превосходными с точки зрения воспринимаемой продолжительности ожидания). Другая статья уделяет внимание контрасту объектов и их влиянию на восприятие человеком скорости загрузки.
Методология
Чтобы определить эффективность любого визуального представления скелетных экранов, я потратил время на сбор самых популярных подходов, используемых в настоящее время на рынке. Вот несколько общих подходов:
С изменением погоды (я делал все предыдущие тесты на улице в центре Ванкувера, Британская Колумбия) я обратился к 80 уникальным пользователям мобильных устройств на UserTesting.com, чтобы проверить эти переменные реализации. Участники были в основном жителями Северной Америки, и их попросили провести тесты на смартфонах. Чтобы провести тест, я делал макет страницы мобильного продукта для маркированного бренда обуви, чтобы сравнение выглядело как настоящий пример.
Участникам была показана одна презентация, затем сразу же другая. Порядок, в котором я показывал каждый метод презентации, менялся в каждом представленном наборе. Например, если я тестировал статический или импульсный сскелетный экран, то первые 10 участников сначала видели статическую версию, а следующие 10 сначала видели импульсную версию. Это было сделано для минимизации вероятности возникновения предвзятости.
Участникам не сказали, что продолжительность каждого примера, который они видели, была одинаковой (5 секунд). После просмотра двух методов презентации я спрашивал участника: «Из двух переходов страницы, которые вы наблюдали, какой был быстрее?»
Тесты
Я последовательно накладывал слои методов реализации, чтобы перейти от макропеременных к микропеременным. Вот порядок тестов, которые я провел:
Результаты: Статические vs анимированные скелетные экраны
60% участников теста предположили, что анимированные скелетные экраны загружаются быстрее всего. Размер выборки: 20 уникальных тестеров
Результаты: импульсная анимация vs волновая анимация
65% участников теста предположили, что волновая анимация короче импульсной. Размер выборки: 20 уникальных тестеров
Результаты: Быстрая vs медленная и размеренная волновая анимация
60% участников теста предположили, что медленная волновая анимация короче. Размер выборки: 20 уникальных тестеров
Результаты: Волновая анимация слева направо vs справа налево
68% участников теста предположили, что волновая анимация слева направо короче. Размер выборки: 20 уникальных тестеров
Анализ и интерпретация
Результаты этой группы тестов являются показательными, но не окончательными. Говоря вслух о своих оценках участники теста были довольно нерешительными, когда речь заходила о более тонких тестах (например, сравнение быстрой или медленной волновой анимации). Однако, когда дело доходило до тестов с более очевидными различиями (например, сравнение импульсной и волновой анимации) участники теста были твердо убеждены, что один вариант был короче по продолжительности, чем другой (хотя, везде длительность была одинакова).
Как мы должны проектировать скелетные экраны?
Ключевая роль движения
Хотя необходимы дальнейшие изучения эффективности скелетных экранов, данное исследование предоставило нам несколько подсказок, как мы можем максимально использовать эту уникальную модель, а именно:
Дизайнеры должны предпочесть волновой эффект (или мерцание, подобно Facebook) импульсному
Движение не должно быть слишком быстрым, чтобы привлекать внимание к объектам каркаса (медленным и размеренным, как в приложении Google для iOS)
Дизайнеры должны предпочесть анимацию, которая перемещается слева направо (было бы интересно посмотреть, как этот паттерн воспримут в культуре чтения справа налево)
Использование доминирующих цветов
Использование каркасных объектов на основе доминантных цветов – это уникальный метод обеспечения будущего контекста для объектов, которые загружаются. Google Картинки использует этот шаблон, равно как и Pinterest.
Скелетные экраны – это не экраны-заставки
Прежде, чем мы углубились в подробности этого исследования, я упомянул, что подавляющее большинство скелетных экранов, используемых сегодня, действуют исключительно как экран-заставка. При проектировании опыта загрузки старайтесь постепенно загружать контент, заменяя объекты-плейсхолдеры скелета контентом, таким, как реальный текст и изображения, как только они станут доступны. Люк Вроблевски (родоначальник скелетных экранов) подробно рассказывает об этом в своих «Беседах в Google 2018». Люк называет это «постепенной загрузкой контента». В будущих исследованиях следует сравнить истинный постепенно загружаемый скелетный экран с другими индикаторами загрузки, при этом используя больший размер выборки.
Восприятие времени
Почему простое восприятие сайта или приложения, загружаемого на несколько сотен миллисекунд быстрее, побуждает провести исследование скелетных экранов, которые кажутся безобидными?
Как представитель поколения, которое вставляло 13 гибких дисков для установки Windows 95, вы можете подумать, что LTE и оптоволоконные соединения, которыми мы наслаждаемся сегодня, могут заставить меня ностальгировать по более простым временам, когда я мог сходить на кухню за пирогом, пока загрузятся страница моего любимого сайта Geocities со всеми GIF-файлами.
Я так же нетерпелив, как подростки в автобусе, жалующиеся на загрузку фида Instagram со скоростью 12 Мбит/с. Меня коробит, когда анимация мобильной навигации меньше 30 кадров в секунду и дергается. Интересно, почему платежный терминал в продуктовом магазине делает задержку в 2 секунды, прежде чем я смогу использовать свои часы для оплаты. Наш мир и общество теперь движутся быстрее, чем большинство из нас может воспринимать. Вам кажется, что наше восприятие времени ускоряется, а мы не способны акклиматизироваться? Вы не одиноки.
Понимание того, как люди воспринимают время в контексте темпов развития технологий вокруг нас, было поучительным опытом. Как сказал Питер Конрад: «Современность – это ускорение времени». Исходя из личных наблюдений, истина этого утверждения кажется очевидной. Терпение нашей культуры ежедневно сокращается, наши темпы ходьбы, похоже, ускоряются почти до бега трусцой, а наша ослабляющая толерантность ко всем вещам, даже слегка праздным по своей природе, уступила место целой отрасли профессиональных ученых. Идея написания этой статьи родилась из моего собственного страха, когда я увидел наше коллективное нетерпение.
В этом человеческом упреке в медлительности, несомненно, возникнут новые тревоги и иррациональные импульсы. И, возможно, новые способы побороть наш страх, что время убегает, как песок сквозь пальцы, пока мы сидим и спокойно размышляем о каркасных экранах.
С благодарностью
Это исследование было бы невозможно, если бы не усердная работа моего друга Karl Schmidt – разработчика iOS, который вызвался создать приложение для автоматизации сбора результатов исследований.
Спасибо дизайнерам Jaybe Allanson, Mitch Lenton и UX исследователю Ben Cole за их рекомендации по сбору данных, использованных в исследовании. Отдельное спасибо Michael Chung и Nikki An за просмотр статьи перед публикацией.
Для иллюзии быстрой загрузки страниц: правила создания скелетного экрана на сайтах и в приложениях
Mar 1, 2019 · 12 min read
Перевод исследования продуктового дизайнера компании Clio Билла Чанга.
Несколько лет назад я написал статью, где изложил методы создания иллюзии быстрой загрузки страниц в приложениях и интернете.
Вскоре после публикации у меня состоялась интересная дискуссия с коллегами — дизайнерами и инженерами — на тему «как узнать, действительно ли эффективен скелетный экран загрузки?»
Этот вопрос был очень актуален, потому что не было точных исследований, подтверждающих эффективность данного паттерна (которые, как нам показалось, нужно было провести).
Скелетные экраны загрузки разных форм и размеров встречаются в интернете и приложениях — везде, где люди вынуждены ждать, пока идёт загрузка.
Но действительно ли они работают?
Вкратце о результатах моего исследования
Обзор скелетных экранов
Л ю к Вроблевски впервые использовал термин «скелетный экран» в статье, где говорится о том, что дизайнеры отказываются от использования спиннеров (анимированные графические элементы, вращающиеся вокруг центральной точки) в пользу визуальных плейсхолдеров.
Он ссылался на свою работу над нативным мобильным приложением Polar, в частности, на чрезмерное время ожидания при загрузке веб-страниц приложения, на которое жаловались пользователи. Первоначально для того, чтобы обозначить процесс загрузки страницы, использовались спиннеры.
Мы заставили людей следить за часами. В результате время шло медленнее, и пользователям казалось, что наше приложение тоже работает медленнее. Мы сосредоточились на индикаторе загрузки, а не на процессе.
Чтобы сосредоточить внимание пользователей не на процессе загрузки, а на контенте, который загружается, Вроблевски представил новый паттерн дизайна — скелетный экран. По его словам, это «по сути пустая страница, в которую постепенно загружается информация».
Вроблевски представил эти визуальные плейсхолдеры в виде светло-серых прямоугольников, которые мгновенно появлялись там, где контент ещё не был загружен.
Переключение внимания пользователя от фактического процесса загрузки к загружаемому контенту — это отвлекающий маневр. Но какое воздействие он оказывает на пользователей?
Эксплицитные парадигмы загрузки
Первоначально спиннеры использовались в приложении Polar для коммуникации с пользователями, когда веб-страница загружалась с сервера. Примечание: в своей публикации Вроблевски делает акцент не на использовании спиннеров — вместо этого он говорит о нелюбви пользователя к простою приложения и необходимости управлять восприятием человека.
Спиннеры и индикаторы выполнения — это эксплицитные парадигмы загрузки, они фокусируют внимание пользователя на процессе загрузки и чаще всего ограничивают его действия, пока не будет загружено достаточно информации для продолжения работы.
Общие парадигмы загрузки в интернете и в приложениях сегодня. Слева направо: пользовательская анимация загрузки, спиннер и индикатор выполнения
Что такое скелетный экран
Скелетные экраны — это пустые страницы, которые постепенно заполняются контентом, например, текстом и изображениями.
Фигуры, заполненные серым или нейтральным цветом (их обычно называют плейсхолдерами), появляются мгновенно, как только пользователь начал взаимодействие с призывом к действию или ссылкой. Затем плейсхолдеры — «кости» скелетного экрана — заменяются фактическим контентом сайта. Задача скелетных экранов — создать иллюзию мгновенной загрузки.
Примеры скелетных экранов
Загрузка новостной ленты Facebook в 2018 году
Загрузка главной страницы LinkedIn в 2018 году
Google Drive
Частично загруженная страница Google Drive в 2018 году. Обратите внимание на то, как скелетные экраны используются в слотах быстрого доступа
YouTube
Загрузка домашней страницы YouTube в 2018 году
Общие черты
Во всех приведенных выше примерах используются общие элементы визуального дизайна:
Есть и различие — на Facebook, Linkedin и YouTube скелетные экраны выступают в качестве экранов загрузки, тогда как Google Drive использует спиннер для загрузки основной структуры папок, а объекты скелетного экрана только для слотов быстрого доступа.
Этот мой стенд с призывом «Помогите мне с исследованием!» в центре Ванкувера, Британская Колумбия, Канада
Исследование
Моё исследование состоит из двух основных фаз.
Первая противопоставляет общую парадигму загрузки (спиннер) скелетному экрану и более подробно описана в разделе «Парадигма против парадигмы».
Вторая исследует вариации скелетных экранов, измеряя эффективность каждой из них.
Я запланировал второй этап ещё до того как полностью получил результаты исследования первой фазы, поскольку предполагал, что разработчики продолжат использовать скелетные экраны независимо от оценки их эффективности. Также я хотел найти оптимальный вариант для собственной работы.
Предыдущие исследования
В 2017 году было проведено небольшое исследование, которое оценило эффективность скелетных экранов в создании иллюзии меньшего воспринимаемого времени ожидания. Агенство Viget выступило против нашумевшей ценности скелетных экранов в сравнении со спиннерами и пустым экраном загрузки (спойлер: скелетные экраны показали худший результат с точки зрения воспринимаемой продолжительности времени).
Тем не менее, даже имея на руках результаты исследования Viget, я хотел подробнее изучить данную тему.
Принципы тестирования
Я хотел протестировать скелетные экраны на мобильном устройстве, потому что оно лучше всего подходит для создания «полусфокусированного» состояния, в котором большинство из нас находятся, когда мы используем смартфон (половина внимания сосредоточена на устройстве, а вторая половина сосредоточена на пересечении улицы или поедании бейгла).
Также я хотел, чтобы участники тестов (предпочтительно) не работали в сфере технологии. Поэтому я вышел на улицу в центре Ванкувера и подходил к местными жителям любого возраста, пола и социального статуса.
Во второй части исследования я пригласил участников с сайта UserTesting.com (к сожалению, из-за изменившейся погоды становилось всё труднее сидеть и поджидать участников исследования на улице).
Исследование: парадигма против парадигмы
Гипотеза: отображение скелетного экрана уменьшит воспринимаемое участниками время ожидания.
Методология
Обдумывая, как лучше взаимодействовать с участниками, я понял, что предыдущие тесты, которые я пытался провести, чтобы опровергнуть эту гипотезу, изобиловали проблемами:
Чтобы избавиться от некоторых проблем, я решил, что буду использовать приложение на мобильном телефоне, предоставленное участнику теста для самостоятельной работы. Предварительное тестирование приложения получилось успешным после нескольких итераций и доработок.
Когда я подходил к потенциальному участнику теста на улице, я просил его выполнить задания в соответствии с указаниями на устройстве, и уверял, что он может в любое время остановиться, чтобы задать вопросы или отдохнуть.
Когда он завершал тест, я спрашивал о том, какой вариант больше ему понравился. В качестве награды я предлагал пончик. После теста счастливый участник шёл дальше по своим делам, зная, что какой-то странный парень тестирует разные варианты загрузки на незнакомцах.
Я подошел на улице к 126 уникальным участникам теста из разных слоев общества, в основном не имеющих образования в сфере технологий. Размер выборки составил 80 человек, все имели опыт работы с мобильными устройствами.
Приложение для тестирования
Приложение было написано на языке программирования Swift и загружено на iPhone 7 (по моему мнению, это устройство, которое, комфортно держать в руках большинству людей).
Когда участник завершал тест, результаты отправлялись в базу данных Firebase, откуда я мог ежедневно выводить результаты в файл CSV (данные, разделённые запятыми) для анализа.
Я просил участников прочитать инструкции, представленные в приложении, и не спешить с выполнением задач. Прежде чем начать тесты, я провёл участникам очень быстрый инструктаж, чтобы они знали, чего ожидать. Вот его содержание:
Чтобы минимизировать любую предвзятость, когда наблюдение одного паттерна перед другим может исказить воспринимаемую продолжительность, приложение автоматически рандомизировало порядок, в котором появлялись разные варианты загрузки.
Приложение также рандомизировало фактическую продолжительность, представленную для каждой парадигмы загрузки, поэтому у участников не было ощущения, что продолжительность постепенно увеличивается или уменьшается.
Было проведено девять тестов, по три разных продолжительности для каждой из трёх парадигм загрузки. Строчки: пустая страница, скелетная загрузка, спиннер. Столбцы: (реальная продолжительность) 1,5 секунды, 5,5 секунды, 10,5 секунд
Скриншот тестируемого приложения Sketch
Результаты
При сравнительном тестировании скелетных экранов, спиннеров и пустых страниц скелетные экраны показали лучшие результаты с точки зрения воспринимаемой продолжительности (таблица ниже с кратким изложением средних результатов теста с размером выборки 80 человек).
Фактическая продолжительность загрузки, показанная участникам теста, была рандомизирована, чтобы исключить вариант, при котором участник будет думать, что время продолжительности загрузки постепенно увеличивалось. Наихудший результат показал пустой экран.
Результаты измерения воспринимаемой продолжительности (как долго участник ощущал ожидание)
Результаты измерения эмоциональной реакции (ощущения участника после просмотра метода загрузки)
Скелетные экраны также показали лучший результат с точки зрения эмоциональной оценки. Участники со скелетной загрузкой экрана были довольнее, чем участники, которым достался пустой экран.
После просмотра каждой комбинации продолжительности и метода загрузки участникам было предложено оценить ощущения после каждого просмотра с помощью эмодзи: 0 — очень доволен, 4 — максимальное разочарование. Вот что они видели после каждого теста:
После просмотра каждой комбинации продолжительности и способа загрузки участникам было предложено оценить свои ощущения с помощью эмодзи. Надпись на экране: «Как вы себя чувствовали?»
Анализ и интерпретация
Когда скелетные экраны используются при загрузке на мобильных устройствах, воспринимаемая продолжительность короче по сравнению со спиннером или пустым экраном.
В некоторых случаях скелетный экран эквивалентен спиннеру (например, в тестах длительностью 5,5 секунд) и превосходство скелетных экранов над спиннерами незначительно.
Можно предположить, что разные методы представления спиннера могут существенно повлиять на результаты. В наших тестах я использовал, как я думал, стандартный и наиболее нативный для платформы (в этом случае iOS) спиннер.
В обоих измерениях (воспринимаемая производительность и эмоциональное воздействие) любой индикатор загрузки превосходит пустой экран.
Исследование: разные вариации скелетного экрана
Гипотеза: использование скелетного экрана уменьшит воспринимаемое участниками время ожидания загрузки.
В начале этого исследования я выдвинул гипотезу о том, что вариации скелетного экрана могут повлиять на воспринимаемую продолжительность (до того, как я узнал, были ли скелетные экраны результативнее спиннеров).
Я выдвинул её, опираясь на исследование 2010 года (в том исследовании индикаторы состояния оказались лучше с точки зрения воспринимаемой продолжительности ожидания).
Методология
Чтобы определить эффективность разных вариантов визуального представления скелетных экранов, я потратил время на поиск самых популярных вариантов, используемых сегодня на рынке. Вот они:
Когда погода ухудшилась (вначале я проводил тестирование на улице в центре Ванкувера, Британская Колумбия), я обратился к 80 уникальным пользователям мобильных устройств на сайте UserTesting.com
Участники были в основном жителями Северной Америки, я попросил их пройти тестирование на смартфонах. Чтобы провести тест, я сделал макет страницы мобильного продукта для обувного бренда.
Участникам была показана одна презентация, затем сразу другая. Порядок, в котором я показывал каждый вариант скелетного экрана, менялся в каждом представленном наборе.
Например, если я тестировал статический или импульсный скелетный экран, то первые десять участников сначала видели статическую версию, а следующие десять сначала видели импульсную. Это было сделано для минимизации вероятности возникновения предвзятости.
Участникам не сказали, что продолжительность каждого примера, который они видели, была одинаковой (пять секунд). После просмотра двух методов презентации я спрашивал участника: «Какая из двух загрузок страницы, которые вы наблюдали, была быстрее?»
Тесты
Вот порядок тестов, которые я провёл:
Пример загрузки с импульсным скелетным экраном
Пример медленной и устойчивой волновой анимации (также известной как мерцание)
Результаты
Статические и анимированные скелетные экраны
60% участников теста ответили, что анимированные скелетные экраны загрузились быстрее.
Размер выборки: 20 уникальных участников.
Импульсная анимация и волновая анимация
65% участников теста ответили, что волновая анимация загрузилась быстрее импульсной.
Размер выборки: 20 уникальных участников.
Быстрая и медленная и размеренная волновая анимация
60% участников теста ответили, что медленная волновая анимация короче во времени.
Размер выборки: 20 уникальных участников.
Волновая анимация слева направо и справа налево
68% участников теста ответили, что волновая анимация слева направо короче во времени.
Размер выборки: 20 уникальных участников.
Анализ и интерпретация
Результаты этой группы тестов показательные, но не окончательные.
Говоря вслух о своих оценках, участники теста были довольно нерешительными, когда речь заходила о более тонких деталях тестирования (например, сравнение быстрой и медленной волновой анимации).
Когда дело доходило до тестов с более очевидными различиями (например, сравнение импульсной и волновой анимации), участники теста были твёрдо убеждены, что один вариант был короче по продолжительности, чем другой (хотя везде продолжительность была одинакова).
Какие скелетные экраны лучше
С правильно настроенным движением
Хотя необходимо дальнейшее изучение эффективности скелетных экранов, исследование предоставило несколько подсказок, как сделать скелетные экраны максимально эффективными:
Используйте доминирующие цвета
Использование скелетных объектов на основе доминантных цветов — уникальный метод обеспечения будущего контекста для объектов, которые загружаются. «Google Картинки», Pinterest используют этот шаблон.
Поиск «Google Картинки» использует плейсхолдеры с доминантными цветами
Помните, скелетные экраны — это не экраны-заставки
Прежде чем мы углубились в подробности этого исследования, я упомянул, что подавляющее большинство скелетных экранов, используемых сегодня, действуют исключительно как экран-заставка.
При проектировании скелетных загрузок старайтесь постепенно загружать контент, заменяя объекты-плейсхолдеры скелета контентом, как только он станет доступным. Люк Вроблевски называет это «постепенной загрузкой контента».
В будущих исследованиях следует сравнить истинный постепенно загружаемый скелетный экран с другими индикаторами загрузки, при этом используя больший размер выборки.
Почему я решил написать эту статью
Почему простое восприятие сайта или приложения, загружаемого на несколько сотен миллисекунд быстрее, побудило меня провести исследование скелетных экранов?
Как представитель поколения, которому приходилось вставлять тринадцать дискет для установки Windows 95, вы можете подумать, что LTE и оптоволоконные соединения могут заставить меня ностальгировать по более простым временам, когда я мог сходить на кухню за пирогом, пока загрузится страница моего любимого сайта Geocities со всеми GIF-файлами.
Я так же нетерпелив, как подростки в автобусе, жалующиеся на загрузку контента Instagram со скоростью 12 Мбит в секунду. Меня коробит, когда анимация мобильной навигации меньше 30 кадров в секунду.
Я задаюсь вопросом, почему платёжному терминалу в продуктовом магазине требуется две секунды для загрузки, и мне приходится ждать, прежде чем я смогу нажать на свои часы, чтобы заплатить. Наш мир и общество теперь движутся быстрее, чем большинство из нас может воспринимать.
Понимание того, как люди воспринимают время в контексте темпов развития технологий вокруг нас — поучительный опыт. Как сказал Питер Конрад: «Современность — это ускорение времени». Исходя из личных наблюдений, истина этого утверждения кажется очевидной.
Терпение нашей культуры ежедневно сокращается, наши темпы ходьбы, похоже, ускоряются почти до бега трусцой, у нас всё хуже получается ждать даже там, где это естественно. Идея написания этой статьи родилась из моего собственного страха, когда я увидел наше коллективное нетерпение.