Вы когда-нибудь задумывались, почему при звонке в техподдержку, во время ожидания, вам включают музыку? Представьте свои ощущения, если вместо музыки была бы мёртвая тишина. По результатам исследования 70 процентов абонентов, которые слушают тишину в режиме ожидания, вешают трубку в течение 60 секунд. Из-за тишины ожидание кажется большим или возникает ощущение, что вызов оборвался. Идея музыки в том, чтобы заполнить ожидание и занять время клиента.

У аэропорта Хьюстона есть схожая проблема: пассажиры жалуются на долгое время ожидания багажа. Когда самолеты приземлялись возле терминала, пассажирам не требовалось много времени, чтобы добраться до багажной карусели. В среднем пассажиры ждали свои сумки 7 минут. Жалобы продолжали поступать даже после того, как аэропорт нанял больше сотрудников на разгрузку. Затем они решили отодвинуть место посадки подальше от терминала. Пассажирам пришлось идти дальше, и количество жалоб на длительное ожидание багажа снизилось до нуля.

Восприятие времени

Люди воспринимают время по-разному, в зависимости от того, насколько они обеспокоены и находятся ли они в пути или у себя дома. В ходе исследования, проведенного Google, обнаружено, что 75% пользователей считают, что сайт работает быстро, когда они находятся дома, но этот показатель снизился до 52%, когда они были вне родных стен. Молодым пользователям кажется, что сайты загружаются медленнее, чем тоже время загрузки воспринимают люди в возрасте. В целом, мы ощущаем задержку загрузки, которая примерно на 80 миллисекунд больше, чем фактическая скорость. Так что если вы ждёте, ожидание кажется ещё большим

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

Загрузка

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

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

Заполнение экрана

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

Постепенная загрузка

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

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

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

Навигация

По опыту Facebook, RedBooth, Spotify и Google Plus видно, что навигационное меню практически не используется. Facebook также обнаружил, что приложение с навигацией внизу, кажется более быстрым. Чем быстрее можно найти нужный пункт, тем лучше. Держите основные кнопки навигации на виду в одном месте. Из приведенного ниже примера видно, что наше приложение имеет оригинальный дизайн и соответствует данной концепции. Навигация снизу также удобна на мобильных устройствах, так как пользователь может нажимать на кнопки одной рукой, что опять-таки поддерживает приятное впечатление от использования сайта или приложения.

Обратная связь

Очень важно информировать пользователя о том, что произойдёт далее. Предоставлять обратную связь на действия пользователя. Это также создаёт впечатление, что приложение или сайт работает быстрее. Используйте анимации движения, состояние при наведении, различные колебания. Таким образом вы заверяете пользователя, что выполняемое действие в обработке.

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

Источник: https://medium.com/dev-channel/hacking-user-perception-to-make-your-websites-faster

ПереводUX

22.01.2019