Игры с пользовательским восприятием и скорость работы веб-сайтов и приложений

https://medium.com/dev-channel/hacking-user-perception-to-make-your-websites-and-apps-feel-faster-922636b620e3
  • Перевод


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


ПРИМЕЧАНИЕ. Статья вдохновлена беседой с Адой Кэннон, которая защищает интересы разработчиков в проекте интернет-браузера Samsung Internet и в серии наших роликов Google Chrome Developers YouTube «Дизайнер и разработчик». Прослушать более полную запись разговора можно, скачав ее или подписавшись на наш подкаст на платформе iTunes или  Google Play Музыка.

Никогда не задумывались, почему когда вы звоните куда-нибудь в поддержку, вам на время ожидания включают музыку? А вы представьте свои ощущения, если бы вместо музыки была бы мертвая тишина. Канал CNN провел опрос, который показал, что если вызов абонента поставить на удержание, то в 70 процентов случаев звонящий положит трубку в первые 60 секунд тишины: ему может показаться, что вызов оборвался, да и само ожидание кажется дольше. Поэтому смысл «музыки» в том, чтобы заполнить чем-то ожидание и занять время абонента.

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

Переведено в Alconost

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


То, как человек воспринимает время, зависит от уровня тревоги, от того, движется человек или находится дома. В исследовании, которое мы провели в Гугле, выяснилось: если пользователи были дома, 75 процентам из них казалось, что сайт работает быстро, но вне дома этот показатель снизился до 52%. Пользователям помоложе загрузка сайтов кажется более медленной, чем людям старшего возраста. В целом воспринимаемая нами задержка при загрузке на 80 миллисекунд больше, чем в действительности. А если вас заставляют просто ждать, создается впечатление, что время течет еще медленнее.

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

Загрузка


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

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



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


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



Пошаговая загрузка


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



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




Пошаговая анимация в примерах «материального» дизайна

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




Пошаговая анимация сглаживает важные переходы

Навигация


Фейсбук, RedBooth, Spotify и Google Plus провели исследования, в которых выяснилось, что если не показывать пункты меню, пользователь не будет их искать и использовать. Кроме того, в Фейсбуке узнали, что приложение с нижней навигационной панелью кажется более быстрым. Потому что, во-первых, с глаз долой — из сердца вон, а во-вторых — чем быстрее можно найти нужный пункт, тем лучше. Поэтому держите основные кнопки навигации на виду в одном и том же месте. Из приведенного ниже примера с приложением в «материальном» дизайне Owl можно увидеть, что такой подход не мешает делать оригинальный дизайн. Кроме того, на мобильных устройствах навигация снизу удобнее: пользователь может перейти в нужный раздел одной рукой, и работа с приложением кажется более быстрой и естественной.



Реакция и информирование


Очень важно подсказывать пользователю, что произойдет далее, но нужно давать реакцию и на действия, выполненные пользователем — так ему будет казаться, что приложение (или сайт) работает быстрее. Чтобы информировать пользователя о том, что нужное действие выполняется, можно использовать анимации движения, наведения и «ряби».



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

О переводчике

Перевод статьи выполнен в Alconost.

Alconost занимается локализацией игр, приложений и сайтов на 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.

Подробнее
Alconost
81,00
Локализуем на 68 языков, делаем видеоролики для IT
Поделиться публикацией

Комментарии 4

    +1
    Главное не делать так, что элементы меняют расположение при загрузке. Хотя мне кажется некоторые сайты специально делают так, подгружая рекламу на место кнопки, чтобы пользователь случайно на неё кликал.
      0
      Вам не кажется.
      +1

      У птиц колени вперед не гнутся.

        0
        не то, что бы «колени», но «пятки» назад должны быть, да…

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

      Самое читаемое