Практический online-курс

Параллакс-скроллинг на посадочных станицах: увлекает или раздражает?

Параллакс-скроллинг на посадочных станицах

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

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

С развитием технологии javascript стала возможной имитация 3D-пространства в веб-дизайне благодаря превращению элементов страниц в слои и их привязке к движениям мыши — в результате background движется медленнее чем foreground, что невероятно ухудшает производительность сайта. Хотя это далеко не единственная проблема параллакс-скроллинга.

Nature Conservancy

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

Однако, пережив бурный всплеск интереса в 2014 году, сегодня эта модная тенденция пошла на спад. Многие дизайнеры предпочли вернуться к более традиционным видам оформления веб-страниц, но не потому, что «крутой» эффект им больше не нравится.

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

Чтобы проверить это, специалисты компании Usertesting решили протестировать пользовательский опыт посетителей сайта Nature Conservancy, а также обучающего лендинга британского сервиса IT-поддержки Akita, оба из которых применяют параллакс-скроллинг на своих страницах.

Nature Conservancy и Akita

Заглавные страницы лендингов Nature Conservancy и Akita.

Пользователи не знали, что им делать

Несмотря на наличие явного указателя — кнопки «Start the journey» или стрелки «Scroll down» — большинство людей, оказавшихся на сайте с параллакс-эффектом, не знали, что им следует делать. Они попросту не замечали его или игнорировали, и в итоге нашли взаимодействие со страницей сложным и запутанным.

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

CTA-элемент

CTA-элемент с указанием нужного действия: «Scroll down» для Nature Conservancy и «Start the journey» для Akita

Интересно, что почти всем пользователям понравился скроллинг, но только поначалу. Большинство людей потеряли всякое желание продолжать просмотр через 1-2 минуты теста. Также были и такие, которые совершенно не поняли «фишку», посчитав сайт глупым и сбивающим с толку.

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

Порекомендовали ли бы они такой сайт?

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

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

Вердикт

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

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

Скрольте дальше, дабы узнать хорошие и плохие стороны параллакса :)

Плюсы

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

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

Минусы

  1. Динамика утомляет. Если в первые несколько минут движение по лендингу было интересным, то очень скоро оно надоедало и начинало раздражать пользователей.
  2. Высокая скорость. Хотя многие испытуемые сами того не заметили, но было видно, как они упускали большие куски контента просто потому, что слишком быстро скролили страницу.
  3. Сложность дизайна. Почти все пользователи отметили, что сайт показался им слишком запутанным и сложным для восприятия главной идеи.
  4.  Длина лендинга. Для просмотра всего лендинга потребовалось слишком много времени — к концу некоторые даже сказали, что предпочли бы лаконичный традиционный сайт.
  5. Доступность информации. Большинство тестируемых призналось, что им было трудно воспринимать информацию — одна из участниц на протяжении всего времени «боролась» с отвлекающими элементами, тогда как другие пожаловались на исчезающий после прокрутки текст, не дающий возможность перечитать непонятную фразу.
  6. Скроллинг. «Фишка», которая должна была сделать сайт интересным и увлекательным, под конец вызывала досаду у многих пользователей — либо сам скроллинг работал некорректно, либо испытуемые не были уверены, как именно им следует скролить историю:

«Мне очень нравятся визуальные эффекты, но этот сайт меня запутал. Вы мне предлагаете отправиться в путешествие по всему миру, но у меня ощущение, будто я еду на поезде через ваш сайт, и с каждой новой картинкой или куском информации я забываю, что было до этого. Я спрашиваю себя: где список информации, на который я просто могу посмотреть?

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

А что с мобильной версией?

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

Ответ: он не работает.

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

мобильных устройствах

Заключение

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

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

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

Высоких вам конверсий!

По материалам usertesting.comimage source Andres Campos Cid 

20-05-2015

Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".