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

Posted on by riasevastopol

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

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

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

  • 36 потрясающих примеров применения параллакс-скроллинга

Nature Conservancy

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

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

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

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

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

  • 17 главных трендов в веб-дизайне 2015 года

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

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

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

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

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

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

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

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

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

  • 3 принципа оптимизации конверсии и юзабилити веб-дизайна

Вердикт

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

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

Скрольте дальше, чтобы определить хорошие и нехорошие стороны параллакса 🙂

Плюсы

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

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

Я еще не поделилась им в соцсетях, но вероятнее сделаю это».

  • Примеры применения пастельных тонов на посадочных страницах

Минусы

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

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

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

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

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

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

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

  • Как повысить конверсию, либо 5 способов преодолеть эффект трения

Заключение

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

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

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

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

По данным usertesting.comimage source Andres Campos Cid

Случайные статьи:

Adobe Muse уроки | 22. Эффекты прокрутки (параллакс)


Подборка похожих статей:

riasevastopol

More Posts