Как гипнотический эффект параллакса влияет на пользовательский опыт

Рассмотрим примеры сайтов с эффектом параллакса. Ведь он становится популярным в веб-дизайне. Страницы, на которых он применён, создают ощущение действия с помощью техник, использующих глубину страницы и анимацию. Этот эффект был впервые применён аниматорами в 1940-х годах, и был популяризирован в 1980-х как способ добавить глубины двухмерным компьютерным играм. В настоящее время параллакс используют для улучшения пользовательского опыта.





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

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

ФОТО: hypnotic-effect-parallax-scrolling.gif

Преимущества

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

Создание сайта с эффектом параллакса может улучшить следующее:

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

Все эти факторы совмещают для создания захватывающего опыта пользования сайтом.

Недостатки и что с ними делать

Кроме достоинств у эффекта параллакса существуют некоторые недостатки, а именно:

  • время загрузки страницы
  • просмотр сайта на мобильном устройстве
  • поисковая оптимизация

Время загрузки страницы

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

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

Просмотр сайта на мобильном устройстве

Пока эффект параллакса плохо отображается на экранах мобильных устройств. Если вы создаёте такой сайт, вам необходимо ещё создать отдельный, оптимизированный для просмотра на экранах мобильных устройств, сайт или, по крайней мере, мобильное приложение вместо неадаптивного и неэффективного мобильного сайта.

Поисковая оптимизация

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

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

Примеры сайтов с эффектом параллакса

Как и в любом выборе дизайна, здесь есть свои «за» и «против» применения эффекта параллакса, так что посмотреть, какие решения сработали — хорошая идея:

  1. Карта истории игры «Mario Kart»
  2. Сайт ресторана «Smokey Bones»
  3. Сайт музыкального фестиваля «BeerCamp»
  4. Сайт компании «Unfold»

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

Источник: uxmag.com





Автор: Перевод: Константин Войцеховский

Забавное видео

В 2 года родители подарили малышу баскетбольное кольцо и мяч, посмотрите, что умеет этот малыш сейчас!


Нужны деньги до зарплаты?

более 30 сервисов

Кредиты онлайн на карту за 15 минут

от 0,01%

ставка

до 180 дней

макс срок

до 20 000 грн.

макс сумма