4 способа сделать так, чтобы загрузка казалась быстрее

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

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

1. НИКОГДА НЕ ЗАСТАВЛЯЙТЕ ПОЛЬЗОВАТЕЛЕЙ ЖДАТЬ, НЕ ПРЕДОСТАВЛЯЯ ИМ ФИДБЕК

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

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

2. ИЗБЕГАЙТЕ ИНДИКАТОРОВ СТАТИЧЕСКОГО ПРОГРЕССА

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

3. ИСПОЛЬЗУЙТЕ АНИМАЦИОННЫЕ ПОКАЗАТЕЛИ ЗАГРУЗКИ

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

СПИНЕРЫ ЗАГРУЗКИ ДЛЯ БЫСТРЫХ ОПЕРАЦИЙ

Простейшей формой анимированных индикаторов является спинер зарузки. Этот вид визуального фидбека просто говорит о том, что пользователь должен подождать, но не указывает, на сколько долго. Как правило, вы должны использовать этот индикатор прогресса для быстрых действий (2-10 секунд).

Спинеры зарузки часто используются вместе с жестом «pull-to-refresh». Он выполняет поль посредника между двумя состояниями UI и помогает пользователям понять, что происходит при изменении экрана.

АНИМАЦИЯ С ПРОЦЕНТАМИ ДЛЯ ДОЛГОСРОЧНЫХ ОПЕРАЦИЙ

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

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

4. ОБМАН ВОСПРИЯТИЯ ВРЕМЕНИ ПОЛЬЗОВАТЕЛЕМ

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

ИНДИКАТОРЫ ВЫПОЛНЕНИЯ

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

• Индикатор выполнения никогда не должен останавливаться, иначе пользователи будут думать, что сайт застыл. Наихудший возможный случай - когда индикатор выполнения приближается к 99% и внезапно останавливается. Такое поведение злит большинство пользователей.
• Вы можете замаскировать небольшие задержки в вашем индикаторе выполнения, перемещая его быстро, но постепенно.
• Вначале медленно перемещайте индикатор выполнения и постепенно ускоряйте его ближе к концу, чтобы дать пользователям понимание времени завершения.

SKELETON SCREENS

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

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

БЕКГРАУНД ОПЕРАЦИИ

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

ПРОГРЕССИВНАЯ ЗАГРУЗКА ИЗОБРАЖЕНИЙ

Поскольку современные приложения и сайты требуют загрузки все большего к-ва изображений, хорошо подумать о процессе загрузки, поскольку это влияет на производительность и сам UX. Используя blur effect, вы можете создать эффект прогрессивной загрузки изображения.

Одним из хороших примеров является Medium, который размывает изображение в содержимом сообщения, пока оно полностью не загрузится. Сначала сайт загружает небольшое размытое изображение (thumbnail), а затем делает переход к большому изображению. Thumbnails очень маленькие (всего несколько килобайт), которые в сочетании с размытым эффектом, выглядят лучше, че пустая картинка.

ВИЗУАЛЬНОЕ ОТВЛЕЧЕНИЕ

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