644 подписчика

Скелетные экраны загрузки

23 октября 201823 окт 2018

470

2 мин

Если вы когда-нибудь открывали Google Docs или мобильную версию Фейсбука, то видели, что сначала вместо контента отображаются серые полосы и круги. Такой паттерн называется “скелетный экран” (skeleton screen). Это один из способов отобразить загрузку страницы и уменьшить субъективное время ожидания у пользователей, то есть создать впечатление, что страница загрузилась быстрее, чем это было самом деле. Также для этой цели можно использовать, например, прогресс-бары и крутящиеся индикаторы загрузки (спиннеры). Но по мнению Люка Вроблевски и других специалистов по UX, скелетный экран — самый эффективный индикатор загрузки, он делает процесс ожидания практически незаметным.

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

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

Практические выводы, которые мы можем сделать:

на мобильных веб-страницах скелетные экраны потенциально более эффективны, чем крутящийся индикатор загрузки;
по-видимому, скелетные экраны наиболее эффективны, когда время ожидания составляет около 5 секунд (на основе второго исследования);
если загрузка страницы занимает много времени — например, грузятся большие объемы данных или какая-то сложная интерактивность — лучше использовать другие индикаторы загрузки, например, прогресс-бар с дополнительным.