Иллюзия времени. Как его восприятие формирует UX

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

Набросок механизма часов

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

Я так не думал, пока мне не исполнилось двенадцать лет, когда мой дед наконец-то подарил часы. Он надел их мне на запястье и сказал слова, которые я никогда не забуду:

«Запомни, время это самый ценный дар из всех.»

Конечно, это не так драматично, как последние слова дяди Бена из «Человека-паука», но это влияет на мое восприятие дизайна по сей день. Время — наиболее ценный и ограниченный ресурс, который мы имеем. Вот почему хороший дизайн это экономия времени.

Время в цифровую эру

К цифровому опыту прилагается еще и одержимость. Одержимость скоростью и производительностью. Amazon подсчитал, что увеличение времени загрузки хоть на одну секунду может стоить компании 1,6 млрд $ в год. Google теряет около 8 миллионов запросов (и рекламы), когда скорость страницы уменьшается всего на четыре десятых секунды! — жесть!

Так что же нам делать?

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

Хотя все же есть один нюанс. Во-первых, быстрее не всегда означает лучше. Во-вторых, восприятие времени весьма субъективно, или как метко заметил Эйнштейн:

«Когда сидишь рядом с хорошенькой девушкой, час кажется минутой, а когда сядешь на горячую сковородку, то минута кажется часом.»

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

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

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

Время <> Интерактивный дизайн

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

Случай с Amazon проливает на это свет.

Исследование UIE сравнивает воспринимаемую скорость веб-страниц. Они выяснили, что Amazon со средним временем загрузки 36 секунд, был оценен быстрее, чем About.com с 8 секундами. Это существенно!

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

Но как это возможно?

Мы не программируем время в абсолютном его выражении. Это во многом зависит от эмоционального состояния отдельно взятого человека и контекста. Когда мы чувствуем радость и прогресс, как результат деятельности, мы едва замечаем время. Тоже самое относится к UI. Хорошо спроектированные интерфейсы, воспринимаются быстрее, даже если на самом деле они медленные.

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

1. Держите пользователей вовлеченными

Переход на Манхэттене. Снимок 60-х годов.

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

Есть вещи, о которых многие не задумываются:

«Около 90% этих кнопок бессмысленны на Манхэттене»

Тогда зачем они нужны? Почему бы их просто не убрать, если на самом деле они не работают?

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

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

А что насчет интернета?

В старые добрые времена, когда люди использовали Internet Explorer, чтобы зайти в интернет, нам всегда приходилось смотреть на белый фон, пока загружались страницы:

Internet Explorer Windows 98

Безграничная белизна представляла момент саморефлексии, пустоты и неопределенности.

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

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

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

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

2. Выполняйте действия с оптимизмом

Работник ЖД рад своему напитку

Сегодняшний веб и мобильные приложения заполнены микросостояниями. Будь то кнопка «лайк» в Instagram, или публикация твитов в Twitter, наши приложения должны постоянно находиться в контакте с нашими серверами.

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

Исследования 1968 года предполагает, что мы воспринимаем время по трем разным категориям:

100 миллисекунд

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

1 секунда

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

10 секунд

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

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

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

Twitter использует ту же самую технику.

Быстро реагирующие элементы в Twitter

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

3. Создавайте переходные интерфейсы

Первая анимированная картинка, сделанная в 1878

Движение стало одним из ключевых элементов современного UI дизайна. Если время и пространство — это неотъемлемая часть дизайна взаимодействия, то движение это способ его выражения. Мы больше не можем думать о движении, как об элементе украшения. Анимация — невероятно мощный инструмент для ведения пользователей по интерфейсу.

Связь с брендом в мобильном приложении

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

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

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

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

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

4. Избегайте значков загрузки

Заброшенная водяная мельница

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

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

То же самое относится к значкам загрузки и другим показателям деятельности.

Независимо от того, насколько они красивы и красочны, увидев их вы осознаете, что они как голодный Pac-Man хотят съесть ваше время:

В то время, как намерения, стоящие за процессом, хорошие, конечный результат фактически может оказаться плохим, потому что по определению кто-то должен ждать. — Люк Вроблевски

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

Вариант А

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

Вариант B

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

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

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

Но это нельзя просто применить к чат-приложениям. Это относится ко всем видам взаимодействия с участием макросостояний. Подход B, очевидно, лучше, но люди до сих пор часто идут путем А — им кажется, что так проще.

Основная мысль: Используйте загрузку разумно. Избегайте ее на весь экран, потому что это блокирует весь UI приложения.

5. Диалог долго ожидания

Люди спокойно ждут в очереди

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

Давайте возьмем посещения ресторана в качестве примера. В случае ожидания, есть несколько вопросов, которые мы себе задаем:

• Меня обслужили немедленно? Меня сразу заметили?

• Знаю ли я примерное время ожидания, и считаю ли его приемлемым?

• Понимаю ли, почему я должен ждать?

• Меня обслуживают в порядке очереди, или мне приходится ждать дольше других?

• Здесь вкусно пахнет едой?


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

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

Индикаторы текущего состояния

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

Помните процедуру установки старых приложений для Windows, которые начинаются невероятно быстро, а потом вдруг останавливаются на 99% на бесконечное количество времени? Если бы вы знали с самого начала, как на самом деле долго проходит вся процедура, то навели бы себе кофе. Но вы этого не сделали.

А все потому, что у вас были неправильные ожидания. Вместо того, чтобы потягивать вкусный латте, вы смотрели на экран, и отчаянно ждали 1%. Не очень приятно.

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

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

Повышая скорость индикаторов

Время субъективно. Что, если бы мы могли изменить восприятие скорости и времени с помощью нескольких простых элементов дизайна? Что бы из этого получилось? Исследование, проведенное Крисом Харрисоном попыталось ответить на этот вопрос. Вот что он нашел.

Progress Bar Study от Криса Харрисона

Частота и ритм вариаций, как известно, воздействуют на восприятие времени людьми. Исследование показало, что мигающий индикатор воспринимается быстрее, чем статический. Временная иллюзия стала еще более интенсивной, когда они добавили полосы, движущиеся в противоположном направлении. Все это делает восприятие на 11% быстрее.

Другие исследования показывают, что пользователи довольно восприимчивы к подаче. Они предпочитают прогресс бары, которые в начале и в конце совпадают с «правилом последнего впечатления» Даниэля Канемана.

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

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

Обратный отсчет/ETA

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

В печально известном исследовании Дэвид Майстера о линиях загрузки он показал, что точное знание времени ожидания, заставляет чувствовать, что загрузка идет быстрее. С другой стороны, неправильная информация может вызвать противоположное чувство:

«...Если постоянно повторять „всего несколько минут“, это добавит соли на рану, когда ожидание постоянно растягивается. Мало того, что клиенты вынуждены ждать, они перестают вам верить.»

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

Основная мысль: Ускорьте ваши прогресс бары и убедитесь, что вы не один из 99% придурков. Воспользуйтесь обратным отсчетом для более длительных ожиданий, чтобы пользователи могли более эффективно использовать свое время.

6. Загружайте контент постепенно

Строительные рабочие Golden Gate Bridge, Сан-Франциско, 1935

Несколько месяцев назад я был с визитом в Лондоне на конференции. Каждый раз, когда я туда езжу, обязательно хожу в одно из моих любимых кафе: Joe & the Juice. Мне просто нравится атмосфера. Приятная музыка, достаточно места для работы, свежевыжатый апельсиновый сок, хороший эспрессо, и очевидно — красивая кофеварка Slayer 3-group.

В этот раз мой визит немного отличался. Был солнечный пятничный день, и к моему разочарованию, Joe & the Juice был закрыт в связи с ремонтом. Все было завешено тканью, и висела табличка: «Мы ремонтируем для Вас». Я уверен, что вы видели такие. Смысл в том, чтобы люди знали, что готовится что-то новое.

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

Прогрессивная загрузка (слева) vs постепенная

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

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

Отвечающий за контент Facebook George Philipps

Он задает ожидания пользователей. Когда вы идете на facebook.com, все кажется легко, потому что уже что-то есть. После того, место для контента загружено, оно меняется на само содержание.

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

Переход от полного отсутствия содержания к фактическому содержанию в целом кажется быстрее.

Точно так же мы должны отдавать приоритет информации, которая расположена в верхней части сайта.

Основная мысль: Загружайте контент постепенно, чтобы основное восприятие пользователи могли получить как можно быстрее.