Как выжать максимум из философии восприятия скорости загрузки страницы

Как выжать максимум из философии восприятия скорости загрузки страницы

От автора: если во главу веб-дизайна ставится пользовательский опыт, можно ли утверждать, что скорость его главное правило? Пользователи очень быстро перемещаются по сайту, ожидая того же от сайта. Мы живем в мире, где важна каждая миллисекунда! Однако есть один интересный момент: удерживает посетителей не столько время загрузки страницы, сколько восприятие скорости загрузки.

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

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

Еще раз, восприятие – это и есть реальность. Что можно сделать, чтобы наши сайты казались еще быстрее?

Разукрась меня в синий цвет

Цвет оказывает влияние на человека. Уверен, вы знаете, что цвет – один из факторов, влияющих на восприятие скорости сайта.

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

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

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

И наоборот, следить за стрелкой часов, сидя в аэропорту после отмененного рейса, очень нудное занятие. Вернемся к веб-дизайну. Давайте поговорим о том, как заставить этот парадокс работать на вас.

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

Голубой – цвет доверия и власти. Он помогает поднять уверенность в человеке.

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

Индикаторы прогресса

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

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

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

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

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

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

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

Не стесняйтесь

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

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

Более того, исследование показало, что скорость появления CTA элемента на странице – один из факторов, влияющих на восприятие скорости загрузки.

Проверьте, чтобы ваши CTA элементы были немаленькими и читаемыми. Не «хороните» их в нижней части сайта под грудой контента. Упростите задачу для пользователя, чтобы он знал, что ему нужно делать. Пользователи ищут что-то, иначе они бы не зашли на ваш сайт. Сделайте так, чтобы CTA элементы появлялись каким-либо образом во время загрузки страницы. Это ускорит восприятие загрузки вашего сайта.

Восприятие и есть реальность

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

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

Заключение

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

Сочетайте реальную скорость загрузки с воспринимаемой во время разработки сайта, так вы только выиграете!

Автор: Claudia Elliott

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree