Параллакс-эффекты скролла добавляют визуальный интерес, но они часто создают проблемы юзабилити, например, медленно загружаемый или трудно читаемый контент. Подумайте, стоит ли их использовать.
Несколько лет назад мы с коллегой решились протестировать новый тренд дизайна, который завоевывал награды в области веб-дизайна и получал похвалу на форумах дизайнеров. Этим трендом был параллакс-эффект при скролле. Однако, мы не были им впечатлены. Что еще более важно, пользователи тоже (по причинам, которые я объясню ниже). Через пару лет тенденция параллакс-эффекта постепенно исчезла, вероятно потому, что все увидели те же результаты, что и мы: вред пользовательскому опыту или в лучшем случае сдержанная реакция пользователя. Результаты не оправдывают работу, направленную на создание и поддержание сложных параллакс-эффектов скролла, и поэтому популярность этого тренда уменьшилась. На какое-то время.
Перенесемся в сегодня. Параллакс-эффект скрола возвращается. Подобно продолжению фильма, наше сегодняшнее тестирование показывает знакомый актерский состав и сюжетную линию: он все также не впечатлил пользователей и сохранил ряд проблем юзабилити. В этом продолжении, однако, параллакс более сдержан, чем раньше. Если более ранние реализации параллакс-эффекта из-за проблем юзабилити были фильмом ужасов, то современная версия ближе к семейной комедии с рейтингом PG-13: не особенно увлекательная, но также вряд ли заставит людей закрыть вкладку.
Определение: анимация параллакс-эффекта создается двумя или более слоями интерфейса, движущимися с разными скоростями или в разных направлениях, чтобы создать эффект глубины.
(Чтобы понять, почему дизайн параллакса порождает эту иллюзию, попробуйте следующий эксперимент: держите обе руки перед лицом, одна рука вытянута, как можно дальше, а другая – на полпути между первой рукой и глазами. Теперь поворачивайте голову слева направо, держа руки неподвижно: будет казаться, будто две руки движутся относительно друг друга, особенно если вы закроете один глаз, чтобы получить 2D-вид).
GIF-файл ниже показывает пример параллакс-скроллинга на веб-сайте ресторана.
В этой статье мы обсудим, почему параллакс является популярным трендом, почему он может быть проблематичным, и как иногда его можно использовать для улучшения пользовательского опыта.
Почему дизайнеры используют параллакс-эффект
Если вы когда-нибудь играли в старые видеоигры, вы можете вспомнить параллакс-эффект. Игровые дизайнеры раздвигали объекты на переднем и заднем планах по отдельности, чтобы придать глубину игровой вселенной и погрузить в нее игроков. То же желание предложить «захватывающий» опыт в Интернете часто мотивирует дизайнеров веб-сайтов использовать параллакс-эффект. Они полагают, что такие эффекты создают запоминающийся дизайн и креативное, уникальное заявление о брендинге.
Другой причиной использования параллакса является привлечение внимания к определенным элементам страницы. Скорость движения привлекает внимание: объект, который движется с другой скоростью, чем все остальное в сцене, выделяется, как гепард, бегущий по открытым лугам; люди заметят его, не прилагая усилий для его поиска.
К сожалению, параллакс-эффекты сопряжены с некоторыми издержками. Дизайнеры должны знать их плюсы и минусы.
4 проблемы параллакс-эффекта
Для сайтов, рассматривающих возможность принятия (или повторного принятия) этого тренда, давайте рассмотрим некоторые из основных проблем UX с параллакс- эффектом.
- Контент, представленный в параллаксе, может быть сложным для управления. В то время, как параллакс должен привлекать внимание к анимированным элементам, часто эти элементы игнорируются. Большинство пользователей в нашем тесте не ждут загрузки эффектов параллакса: они быстро скроллят страницу, сканируя ключевые слова, представляющие интерес. Поскольку этот эффект требует времени, целевые пользователи, которые ищут конкретную информацию, могут пропустить важный контент, представленный при помощи параллакс-эффекта.
При использовании анимации параллакса загрузка страниц может занять больше времени. На сайте Apple некоторые пользователи скроллили страницу и почти ничего не видели на экране, потому что анимация параллакс-эффектов еще даже не запустилась. Пустые экраны – это не то, что хотели дизайнеры, и не то, за чем пришли пользователи.
Но слишком быстрый параллакс-эффект также может быть проблемой: когда анимация привязана к скорости скролла пользователей, у людей может не быть возможности читать анимированный текст, если они скроллят слишком быстро. Пользователь при скроллинге мобильного сайта New York Times, заметил панель прокрутки текста вверх и в стороне от таблицы, которую она читала. Она сказала: «О, это произошло так быстро, что я даже не смогла прочитать текст». Эффект замедлил ее способность интерпретировать таблицу и чувствовать контроль над процессом.
- Слишком сильное движение, особенно текста, может вызвать головокружение. Использование параллакса для анимации множества различных элементов страницы и блоков текста затрудняет чтение и даже может вызвать у людей тошноту. Если это кажется преувеличением, вспомните, что в 2013 году Apple выпустила обновление для iOS 7, которое позволило пользователям уменьшить движение (Reduce Motion), потому что анимация параллакса для переключения задач вызывала у многих людей симптомы головокружения и тошноты. Усвоим этот урок и будем надеяться, что в будущем параллакс-эффект не принесет вреда.
- Пользователь вообще может не заметить параллакс-эффект. К настоящему времени пользователи знают, что многие рекламодатели используют движение, чтобы привлечь внимание. Некоторые люди целенаправленно игнорируют движение на странице из-за ассоциации с нежелательной рекламой. На мобильных устройствах едва заметные параллакс-эффекты легко пропустить, потому что рука пользователя может блокировать анимацию, появляющуюся внизу. Пропуск эффектов параллакса не может быть вредным для опыта (до тех пор, пока контент не исчезнет), но дизайнеры должны подумать, стоит ли эти эффекты создавать и поддерживать.
- Параллакс не очень впечатляет пользователей. Оценят ли люди параллакс-эффект? Скорее всего только другие дизайнеры или разработчики. Когда вы знаете, как сложно создавать такие вещи, как параллакс-страницы с длинной прокруткой, вы можете оценить работу. Но, прямо скажем, среднестатистическим пользователям все равно. Сегодня реакция пользователей такая же, как и пять лет назад – равнодушие. Они не «удивлены». Участники пользовательского тестирования не останавливаются, чтобы прокомментировать, насколько круты эти эффекты; они не скроллят страницу вверх и вниз для развлечения, чтобы посмотреть, как эффект оживляет страницу. Они не делают паузу, чтобы наблюдать, как каждый эффект плавно переходит в основную область контента. Вместо этого подавляющее большинство людей сосредоточено на контенте, поэтому анимационные эффекты вторичны, если их вообще заметят. Тогда возникает вопрос для дизайнеров: является ли параллакс-эффект лучшим способом произвести впечатление на пользователей или заявить о себе?
(Примечание о проведении пользовательского исследования влияния параллакса или других анимаций: если вы предложите пользователям рассказать об анимации при скроллинге, вы можете услышать похвалу дизайна взаимодействия. Будьте внимательны, прежде чем отмечать такие комментарии: иногда пользователи говорят одно, но их поведение показывает совершенно другую реальность. Как только вы обратили внимание пользователей на функцию, вы смещаете их интерпретацию этой функции. Например, в самом конце двух сеансов тестирования один участник испытывал трудности с контролем анимированных текстовых блоков параллакса, а другие вовсе не замечали их. Но когда мы спрашивали людей о любом движении, которое они видели на странице они говорили: «О, это так круто» или «Это так мило, как оно появляется, когда вы двигаетесь вниз по странице». Но мы не должны забывать, что на самом деле произошло, когда они пытались найти ответ или прочитать статью: они испытывали неудобства или игнорировали параллакс).
Будьте сдержанны
Как я уже говорил в начале этой статьи, последняя итерация параллакса менее навязчивая, чем пять лет назад. Это хорошо. Помните, что параллакс – это форма анимации, а для большинства анимаций, чем меньше, тем лучше.
Нет задачи – нет проблемы. Параллакс наиболее безопасен в средах, где пользователи ищут отдых, не имея конкретной цели или задачи. В этих случаях параллакс можно использовать для поддержки повествования или для придания бренду индивидуальности. Если вы не уверены, подходит ли ваш сценарий использования под эту категорию, вы всегда можете обратиться к 3 Bs тест, чтобы увидеть, является ли параллакс хорошим выбором для вашего бизнеса и ваших пользователей.
Если у пользователя есть задача, ставьте на первое место контент. Тест юзабилити параллакса заключается в том, могут ли пользователи легко и быстро выполнить свою задачу. Для начала вот несколько предложений:
- Предоставляйте внутристраничные навигационные ссылки на длинных страницах с параллакс-эффектом скроллинга, чтобы прокрутка не была единственным способом навигации вниз по странице. Используйте заметный навигационный интерфейс, а не только маленькие вертикальные точки, которые пользователь может не заметить (и которые имеют плохой информационный запах).
- Сохраняйте параллакс-эффекты для фоновых или периферийных изображений, чтобы их можно было легко игнорировать и не отвлекаться от контента.
- После того, как пользователи прокрутят страницу вниз и по пути вниз активируют все параллакс-эффекты, оставьте эти объекты в их конечных положениях вместо того, чтобы реанимировать каждый объект при прокрутке вверх или прокрутке вниз. В целенаправленном контексте пользователи начинают перемещаться вверх и вниз по странице, потому, что они ищут информацию. Принуждение людей пересматривать параллакс-эффекты задерживает их доступ к этой информации и может быстро стать утомительным и раздражающим. Это, как слушать одну и ту же шутку снова и снова. Проявите сдержанность, и ваши пользователи от этого только выиграют.
В следующем примере параллакс-эффект скролла используется для описания iPad. Анимация тонкая, но привлекает внимание к основным функциям устройства. Они также остаются на месте – ключевые слова остаются обведенными, когда пользователи прокручивают страницу вверх или вниз. (Обратите внимание, что это та же самая страница, которая медленно загружалась из-за больших параллакс-эффектов при пролистывании изображений iPad на экране. Меньшие более тонкие эффекты вряд ли вызовут такие задержки).
Вывод
Тренды появляются и исчезают, но поведение человека остается в основном неизменным. Минусы параллакс-эффекта остаются теми же, что и раньше, потому что люди все еще сосредоточены на своих целях и не любят медленно загружающиеся сайты. К счастью, мы можем учиться на прошлых ошибках. Если ваша команда рассматривает возможность использовать параллакс-эффект, убедитесь, что он не будет мешать пользователям, замедлять их или лишать их способности быстро и легко найти то, зачем они пришли.
Ссылка:
Healey, C.G., Perception in visualization Department of Computer Science, North Carolina State University, available at: https://www.csc2.ncsu.edu/faculty/healey/PP/
Источник: https://ux.pub/chego-ne-xvataet-parallaks-effektu-issledovanie/