Создаём свой первый сайт: 10 распространённых ошибок
Previous
выбрать за меня
О том, как важно слышать или эффективный мониторинг социальных медиа
Next
анимация, веб-дизайн, юзабилити
Юзабилити

Функциональная анимация в веб-дизайне: 9 основных групп

Хороший UX-дизайнер усматривает логику практически во всех решениях, относящихся к дизайнерским концептам, — будь то информационная архитектура, иерархия контента на веб-странице или анимация. Последнее, к слову, заслуживает особого внимания.

Зачастую анимационные элементы добавляются в макеты веб-дизайна без каких-либо на то оснований. «Это будет инновационно, забавно, интересно!» — именно такие доводы обычно приводятся в пользу анимации. Но внешний эффект какой-то детали вовсе не повод, чтобы «украсить» ею сайт.

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

Что такое функциональная анимация?

Под функциональной анимацией обычно подразумеваются тонкие анимационные вкрапления в UI.

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

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

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

1. Привлечь внимание

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

Классический пример — кнопка, предоставляющая доступ к скрытому контенту.

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

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

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

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

2. То же место, новое действие    

Всем известное правило юзабилити: между веб-дизайном и контентом должна просматриваться определенная связь. Отсюда и предсказуемость функционала, который несложно будет освоить. Это правило вполне применимо к «кнопкам действия».

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

Кнопки «Save» и «Edit» — пожалуй, наиболее заметный пример переключающихся кнопок.

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

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

Логическая цель: подчеркнуть функциональное изменение кнопки действия.

3. Масштабирование

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

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

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

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

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

4. Визуальный намек

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

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

Логическая цель: Некоторые детали веб дизайна могут служить намеком и указывать на наличие скрытого функционала или действия.

5. Выделение элемента

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

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

Один из способов минимизировать так называемый визуальный шум в интерфейсе веб-сайта — убрать все лишнее. Но это не всегда просто.

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

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

Логическая цель: Привлечь внимание пользователя и выделить определенный веб-элемент на фоне остальных.

6. Симуляция

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

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

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

Логическая цель: симуляция физических объектов, о которых сложно рассказать как-то иначе.

7. Визуальный фидбек

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

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

Логическая цель: предоставить определенное подтверждение для действия пользователя.

8. Статус системы

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

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

Такая разновидность анимации, как правило, функционирует по следующей схеме:

  1. Появляется индикатор того, что процесс инициирован.
  2. Появляется индикатор того, что процесс в действии.
  3. Оценка времени завершения процесса.
  4. Индикатор отмены процесса.

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

Логическая цель: Передать ощущение контроля в линейном процессе

9. Маркетинговый инструмент

Это семейство всецело относится к маркетингу. Здесь достаточно много забавных анимаций.

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

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

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

Логическая цель: подчеркнуть ценности компании и сильные стороны продукции.

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

Реакция на статью
поделюсь
100%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Комментарии
Оставить отзыв

    You must log in to post a comment

    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Позвольте нам обновлять ваши знания раз в неделю.