Визуальные эффекты в Progress Bars и их влияние на юзабилити

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

изображение flickr.com

Когда на вашем сайте происходит загрузка какого-либо файла, пользователи, как правило, видят «progress bar» – индикатор процесса загрузки, который позволяет пользователям сориентироваться и почувствовать, как скоро произойдет загрузка. От характеристик анимации прогресс бара зависит то, как пользователи ощущают скорость загрузки.
Вот несколько способов создать иллюзию высокой скорости загрузки:

Обратное движение

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

Увеличьте частоту

Еще один путь создать иллюзию быстрой скорости – увеличить скорость движений (мерцаний, оборотов) вашего индикатора.
Особенно хорошо этот метод работает с круговыми индикаторами прогресса, когда пользователь не видит, на каком именно этапе загрузки он находится в данный момент. Обычно эти индикаторы изображаются в виде круглого значка, а движение по окружности свидетельствует о процессе загрузки. Такие индикаторы используются для того, чтобы дать юзерам понять, что процесс идет, но вот на какой он стадии и сколько осталось до конца – остается под вопросом. Увеличив скорость вращения, вы можете создать иллюзию более быстрой загрузки.


Ускорение

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

И на закуску видео, посмотрев которое можно увидеть, какие визуальные эффекты способствуют созданию иллюзии высокой скорости работы progress bars:

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

источник

Похожие материалы:
Время загрузки сайта – критический показатель успешности вашего ресурса
Навигация на сайте: горизонтальная или левосторонняя?
Визуальные приемы, которые позволяют повысить конверсию