Как помочь пользователю ждать. Научные исследования
Сервисы сейчас работают достаточно быстро — почти нигде нет прям экранов ожидания, где приходится ждать больше секунды или нескольких. Но иногда все-таки приходится: например, при онбординге, если сервис формирует персональную программу для студента. Я прочитала научные исследования, чтобы разобраться, как интерфейс может помочь пользователю ждать.
Выводы
Лучшее ожидание — это то, которого не было. Например, на сайтах поиска авиабилетов раньше была какая-нибудь забавная анимация самолетиков, пока шел поиск билетов, а теперь почти все сайты сразу показывают выдачу, даже если поиск еще не закончен на 100%.
Если ожидание короткое (меньше пары секунд), то вид лоадера особо не влияет. Впрочем, скелетоны работают чуть лучше (думаю потому, что создают впечатление более быстрой загрузки).
Если ожидание длинное, то лучше не акцентировать внимание людей на том, что они чего-то ждут. Если человек смотрит на прогресс-бар, особенно с процентами, то он сильнее концентрируется на том, что сайт заставляет его тратить время. Поэтому лучше использовать отвлекающие маневры — классную анимацию, меняющийся контент (например, отзывы других пользователей). Если с анимацией можно взаимодействовать — вообще бомба.
Однако, если пользователь предполагает, что ждать придется долго и ждать действительно надо долго (например, при антивирусной проверке), прогресс-бар лучше все-таки использовать, чтобы интерфейс был предсказуемее.
Теория
Исследование выделяет четыре ключевых фактора, которые влияют на субъективное ощущение времени:
Удовольствие (Heightened Enjoyment)
Если человек получает удовольствие от интерфейса или контента на экране, он будет меньше замечать время ожиданияПредсказуемость (Perceived Control)
Когда человек чувствует, что может как-то контролировать процесс или видит явные признаки прогресса (например, полоску загрузки), ожидание становится менее напряженнымИскажение времени (Time Distortion)
В некоторых случаях ожидание может восприниматься как более короткое или длинное, в зависимости от того, как активно человек вовлечен в происходящееСосредоточенность внимания (Focused Attention)
Если человек полностью погружен в другой процесс или отвлечен чем-то интересным (вне вашего сервиса), время идет быстрее
Попробуем посмотреть на примеры из индустрии.
Уровень 1.
Самый простой вариант — анимированные лоадеры. Они особенно не развлекают и не отвлекают пользователя и не дают ощущения предсказуемости.
Уровень 2. Анимировать лоадер
В Istoria внутри лоадера двигаются столбики гистограммы, а в Endel небольшая анимация и прогресс-бар.
Прогресс-бар без цифр добавляет предказуемости, хотя и не полностью. Небольшая анимация немного развлекает пользователя, но, скорее всего, не особо сильно.
Уровень 3. Выводить релевантный контент
В Falou и Coursiv на экране ожидания показывают отзывы довольных клиентов, которые время от времени меняются. Это классный ход, он переносит фокус внимания пользователя с ожидания на чтение отзывов.
Уровень 4. Интересная анимация
Я не успела записать, но в Duolingo сова читает книжку, а в Facetune в колбочке что-то варится
Какой же из этих вариантов лучше? Попробуем разобраться
Удовольствие
Люди не любят скучать, поэтому чем интереснее контент на экране, тем приятнее ждать.
Даже очень незамысловатый контент уже немного повышает время ожидания. Например простой логотип по сравнению с пустым экраном повысил время ожидания на 10% (1 секунду) в эксперименте Yuzhen Wang.
Людям меньше всего нравился пустой экран, побольше — лоадер, еще больше — заставка с логотипом.
Выглядит логично, единственное, что выбивается — реальные показатели времени, которое люди вытерпели на этих экранах. Меньше всего — 7,7 секунд люди готовы ждать, глядя на лоадер. Даже на пустой экран они готовы смотреть на полторы секунды дольше. Потом вернемся к этому эксперименту, чтобы понять, что не так с лоадером.
А что если будет не просто логотип, а анимация, как в Дуолингво?
В исследовании Chien-Hsiung Chen анимированный персонаж вместо прогресс-бара уменьшает субъективно прошедшее время почти на секунду (в случае долгого ожидания), а оценивают его пользователи на балл выше.
Но надо учитывать, что для 5-секундного ожидания эффект слабее, а для 2-секундного мультик вообще проигрывает прогресс-бару.
Если делать анимацию, то какую?
В исследовании Ning Zhang в развлекательных приложениях лучше работала энергичная анимация персонажа (у эксперементаторов он куда-то быстро летел). Она создавала ощущение, что время ожидания короче.
А если пользователям говорили, что это приложение полезное, нужное для чего-то, медленный персонаж (расслабленно крутящий обруч) работал лучше — помогал уменьшить стресс от ожидания.
Контроль
Кажется логичным, что экраны ожидания должны предоставлять пользователям максимум доступной информации о времени, так как это помогает уменьшить стресс от ожидания.
Базовые исследования, например статья Нормана 1985 года, показывают, что неопределенные ожидания воспринимаются дольше, чем те, в которых известна продолжительность. Но! Это же статья про очереди, время ожидания и контекст совсем другие. Есть и другие статьи, про экран ожидания автобуса, где пользователям гораздо приятнее знать время приезда, чем нет.
А вот в исследованиях диджитал среды, где ожидание обычно недолгое (до минуты), результат совсем другой!
Прогресс-бары эффективны для снижения неопределенности, но слишком много информации о времени ожидания может привести к обратному эффекту, привлекая внимание к процессу ожидания.
Возможно именно поэтому в первом исследовании люди дольше ждали, когда не было лоадера.
Воздействие этих видов лоадеров несколько зависит от гендера, это проверила Younghwa Lee.
Испытания проводились на созданном веб-сайте для скачивания музыки, где участникам предлагалось загрузить музыкальный трек. Время ожидания составляло 16 секунд, в течение которого на экране отображался прогресс загрузки.
Мужчины воспринимали время ожидания как более короткое, когда использовались явные прогресс-индикаторы.
Женщины, напротив, более чувствительно реагировали на гедонические аспекты прогресс-индикаторов (которые красивые и прикольные).
Искажение времени
Некоторые парки развлечений используют технику преувеличения ожидания: они говорят, что ждать придется долго, а запускают людей раньше, чем ожидалось. Люди чувствуют, что обманули систему, и рады. В онлайн-среде можно использовать аналогичный подход с прогресс-барами. Это подтверждено в исследовании Carine Lallemand, они проверяли удовлетворенность пользователей, которые видели
прогресс-бар, который быстро заполняется до 70–80%, а потом замедляется
прогресс-бар, который медленно заполняется до 50%, а потом ускоряется
равномерно заполняющийся прогресс-бар
Первый вариант работал лучше всего. Этот неожиданный переход вызывает эффект дистрактора, который отвлекает внимание и уменьшает количество ресурсов для отслеживания времени. Это приводит к искажению восприятия времени, когда пользователю кажется, что ожидание прошло быстрее, чем на самом деле.
Выводы еще раз
Наука объясняет, что мы воспринимаем время так:
Когда мы обращаем внимание на время, открывается «гейт» (ворота), и пропускает импульсы в счётчик.
Чем дольше ворота открыты (т.е. больше внимания уделяется времени) → тем дольше нам кажется событие.
Собственно сама модель называется Attentional Gate Model.
Именно из-за нее лучше не показывать проценты и прогресс-бары, а вместо этого всячески отвлекать пользователя от идеи ожидания.
Литература
Тема ожидания и прогресс-баров оказалась очень популярная. Я оставлю тут ссылки, если вам будет интересно изучить всякие нюансы самостоятельно. Какие-то из статей я кратко пересказала у себя в блоге @chem_dokazhech, можно искать по ключевым словам типа прогресс\лоадер\ожидание
Time swipes when you«re having fun: reducing perceived waiting time while making it more enjoyable — ждать с игрулей интереснее, чем без
The Online Waiting Experience: Using Temporal Information and Distractors to Make Online Waits Feel Shorter Distractors to Make Online Waits Feel Shorter — прогресс бар увеличивает предсказуемость, а анимация — развлекательность
Shape of progress bar effect on subjective evaluation, duration perception and physiological reaction — при длительном ожидании колечко лучше полосочки и с процентами лучше, чем без процентов
Time represented in space: Bar better than ring while waiting — при длинном ожидании полосочка лучше колечка
Investigating the Impact of Progress Indicator Design on User Perception of Delay — когда по круглому или прямогоульному прогресс-бару бежит такая типа анимация в виде полосочек это лучше, чем когда не бежит
Impact of mobile application loading icon type and animation frequency on user time perception and emotion — логотип вызывал более положительные эмоции, чем лоадеры. Быстрые крутилки (если не до маразма) лучше, чем медленные
Mobile-Application Loading-Animation Design and Implementation Optimization — с анимациями время шло быстрее, чем с прогресс-барами и лоадерами
Effects of Different Visual Feedback Types on Perception of Online Wait — Неявная обратная связь (например, просто движущаяся точка) воспринимается как более быстрая, чем явная (например, % прогресс). Музыка значительно сокращает восприятие времени
Enhancing User eXperience during waiting time in HCI: contributions of cognitive psychology — высокая когнитивная нагрузка (пользователю надо было держать данные в уме) увеличивает субъективную длительность и снижает удовлетворение
The effect of visual feedback types on the wait indicator interface of a mobile application — анимация снижает субъективное время, но при коротком времени ожидания не факт что увеличится удовлетворенность
Time swipes when you«re having fun: reducing perceived waiting time while making it more enjoyable — с мини-игрой (открывание картинки «стиранием») ждать приятнее, чем просто с прогресс-баром, при этом время не тянется дольше
The effect of skeleton screens: Users' perception of speed and ease of navigation — страницей со скелетонами пользоваться поприятнее и время летит немного быстрее
Надеюсь, эта статья поможет вам выбить бюджет на классную анимацию загрузки.
