4 Вида анимации для улучшения юзабилити лендинга

Posted on by riasevastopol

В то время, когда анимация употребляется на лендинге лишь для красоты, имеется риск навредить процессу конвертации, потому, что любое лишнее перемещение на экране отвлекает визитёров. Однако, кое-какие виды анимации при верном применении смогут существенно упростить UX (от англ. user experience — пользовательский опыт) и повысить ваши показатели.

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

Новые возможности веб-разработки разрешают достаточно скоро достигнуть занимательных эффектов. CSS3 (Cascading Style Sheets 3 — каскадные таблицы стилей третьего поколения) имеет целую библиотеку анимационных функций, каковые легко подключаются к элементам страниц кроме того самого несложного лендинга, а не только продвинутых мобильных и веб-приложений.

В этом посте мы разглядим 4 фундаментальные принципа применения анимации в цифровом дизайне.

  • Живая целевая страница либо GIF на лендинге

1. Анимация как метод удержать внимание

Повышение времени загрузки страницы хотя бы на 1 секунду может привести к понижению конверсии на 7%. Занимательная анимация удерживает внимание визитёра, развлекая его в ходе ожидания, и мешает его уходу.4 Вида анимации для улучшения юзабилити лендинга

Пример 1: Составные переходы

Люк Врублевский (Luke Wroblewski), фаворит в области интерактивного дизайна, на презентации для Intel поведал, как создать видимость активности лендингов и приложений, пока те загружаются.

Как пример он привел приложение Гугл Search, применяющее плавный переход для отображения результатов поиска в 3 этапа:

  1. Страница «выезжает» справа
  2. Полоса загрузки (loading bar) двигается слева
  3. Контент неспешно проявляется на странице

Компания Nielsen Norman Group, занимающаяся изучением пользовательского опыта, изложила главные правила анимации веб-страниц:

  1. Стремительная анимация «ворует» внимание визитёров.
  2. Медленные переходы не так привлекательны, но они разрешают пользователю сохранить фокус на делаемой задаче.
  3. Сочетание стремительных и медленных переходов самый действенно в те моменты, в то время, когда ничего не происходит. Гугл Search умело применяет этот принцип.

Пример 2: Каркасная анимация

Второй пример из презентации Люка Врублевского — каркасная анимация (skeleton screen), неспешно заполняющая страницу по мере загрузки контента. Это удерживает интерес визитёра при медленной скорости загрузки.

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

Пример 3: Загрузка веб-страницы по частям

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

BigPipe посредством PHP и JavaScript «разламывает» страницу на «pagelets», загружаемые в один момент, но самостоятельно друг от друга. В следствии содержимое страницы отображается в виде блоков. На иллюстрации ниже видно, как Facebook поделил основную страницу на такие параллельно загружающиеся разделы.

Если вы проследите за загрузкой домашней страницы Facebook, то заметите этот эффект в действии:

  1. Лента новостей появляется прежде всего.
  2. Сразу же справа от нее появляется раздел «В тренде» и колонки с рекламой.
  3. В левой части страницы появляется меню.
  4. Окно чата всплывает снизу справа.

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

  • Как устранить негативный эффект продолжительной загрузки при помощи прогресс-индикаторов?

2. Анимация как направляющий фактор

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

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

На сайте Festival of Marketing подобная кнопка при прокрутке страницы появляется в левой части экрана, и с этим связаны две неприятности:

1. Взор визитёров солидную часть времени сосредоточен именно на левой части экрана (в большинстве случаев, люди просматривают контент слева направо), тем самым анимации задан неоправданный приоритет.

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

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

Кнопка «Наверх» не очень сильно вторгается в поле зрения визитёра: она не быстро «выпрыгивает», а неспешно проступает в правой части сайта. В следствии, пользователь нормально успевает прочесть контент до конца.

  • Секреты юзабилити: анимация для понимания и внимания

3. Анимация как иллюстрация

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

Пример 1: Анимированные прокрутки на странице

Клик по ссылке не всегда ведет на новую страницу — время от времени вас в другую ее часть. В случае если ничего не дает визитёру осознать, что страница машинально прокрутилась вниз, это может сбить его с толку. Решить проблему возможно посредством анимации. Сравните два изображения:

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

Пример 2: Раскрывающиеся формы

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

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

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

  • Из-за чего несложный интерфейс ведет к нехорошему юзабилити?

4. Анимация как обратная сообщение

Анимация может дать визуальную обратную сообщение, показывая, что лендинг трудится исправно. Как утверждает Кэти Шервин (Katie Sherwin) из Nielsen Norman Group, это «информирует пользователей о текущем рабочем состоянии совершает процесс более комфортным за счет уменьшения неопределенности».

Следующие 2 вида анимации обеспечат мгновенную удовлетворение посетителей и обратную связь при сотрудничестве с сайтом.

Пример 1: Анимированная корзина

Анимированные элементы обратной связи прекрасно дополняют сложный интерфейс. Движущиеся объекты завлекают внимание пользователя, информируя ему о выполненном действии.

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

Пример 2: Подтверждение действия

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

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

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

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

  • Микровзаимодействия: 14 примеров хорошего micro UX

Заключение

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

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

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

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

По данным conversionxl.comimage source: Ben Heine

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

Анимация делает лендинг более интересным


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

riasevastopol

More Posts