Долгое время анимация пользовательского интерфейса не получала должного осмысления в среде дизайнеров. Даже сегодня многие специалисты воспринимают анимацию как нечто, что делает дизайн более ярким и интересным, но всегда за счет ухудшения юзабилити. Если вы разделяете эту точку зрения, то эта статья для вас. В ней пойдет речь о том, как анимация может улучшить пользовательский опыт, а также будут приведены примеры таких анимаций.
Содержание статьи
1. Организует повествование
2. Обеспечивает обратную связь
3. Укрепляет связи
4. Делает скучные задачи интересными
6 лучших примеров анимации для лендингов
1. Не анимируйте несколько элементов за раз
2. Анимация не должна конфликтовать с индивидуальными особенностями лендинга
3. Следите за временем
4. Не забывайте о доступности
5. Проводите тест ваших дизайнерских решений
6. Разработку анимаций следует начинать на ранних этапах работы над дизайном
1. Организует повествование
Каждый дизайнер выступает в роли рассказчика, а дизайн как раз и является той историей, которой он делится с посетителями. Очевидно, что при помощи анимаций можно любой рассказ сделать ярче и интереснее.
Анимации могут вдохнуть в контент жизнь. Хороший пример такой анимации можно найти на Ikonet. Анимации не дают пользователям заскучать в процессе знакомства с посадочной страницей и самой компанией:
Анимация также может использоваться в целях привлечения внимания посетителя к тем элементам, которые они должны заметить или с которыми они могут взаимодействовать. Например, если у вас есть какой-либо важный текстовый раздел или призыв к действию, сделайте так, чтобы он выскользнул откуда-то со стороны, а не просто появился перед взором посетителей: так они сразу поймут, к чему именно вы пытаетесь обратить их внимание.
Взгляните на пример Preston Zeller, расположенный ниже. Характер появления элементов на странице делает эту область более заметной. Самое классное в этой анимации то, что она обращает внимание посетителей к определенным областям, не нарушая при этом пользовательский опыт.
Во время скроллинга элементы появляются на странице поочередно. В результате самая важная информация не остается без внимания
2. Обеспечивает обратную связь
В основе человеко-компьютерного взаимодействия лежат два основных принципа: пользовательский ввод и обратная связь. Все интерактивные объекты должны реагировать на ввод пользователя соответствующим звуковым или визуальным сигналом (в этом и выражается обратная связь).
Ниже вы можете наблюдать эффект кастомизированных чекбоксов. Едва заметная дрожь тумблера, которая сопровождает его переключение с одной позиции в другую, является анимацией и только усиливает чувство интерактивности объекта:
В ваших интересах снабжать объекты такого рода анимациями, которые активизируются в момент взаимодействия пользователя с объектом или простого наведения на него курсора мыши. С помощью таких анимаций вы как бы побуждаете людей к взаимодействию с лендингом. Обратите внимание на Berry Visual. Когда вы наводите курсор на «Send Message» (Отправить сообщение) или на гамбургер-меню, расположенное в верхнем правом углу экрана, возникает приятный анимированный эффект. Появляется ощущение, что эти элементы интерактивны:
Buf Antwerp — это еще один образец того, как анимированная реакция объекта на ввод может улучшить пользовательский опыт. Когда человек наводит курсор на плитку, появляется полупрозрачный оверлей с текстом поверх, который и сообщает пользователю дополнительную информацию об объекте.
3. Укрепляет связи
Не обойтись без анимаций и в тех местах лендинга, которые предполагают резкую смену контекста (например, когда пользователь кликает по якорной ссылке, и перед ним мгновенно возникает блок, на который она ведет). Поскольку такие резкие скачки из одной части лендинга в другую сложны для восприятия и анализа, пользователь может потерять ориентацию в пространстве посадочной страницы — мозг должен отсканировать весь контент, чтобы понять, как новый блок связан с предыдущим.
Рассмотрим пример резкого изменения:
Это изменение не кажется естественным и приводит к ненужной когнитивной нагрузке (мозг должен отсканировать весь лендинг, чтобы понять, что только что произошло)
Сравните этот образец с размещенным ниже, в котором плавный анимированный переход направляет пользователя к различным частям лендинга:
Простой анимированный переход не дает пользователю выпасть из контекста, позволяя без труда понять, что изменилось на экране
Понятно, что во втором примере анимация сглаживает резкость перехода от блока к блоку и соединяет их друг с другом. В результате посетители понимают, что эти две части посадочной страницы связаны:
При помощи анимации вы можете обозначить связь новых объектов с имеющимся контекстом, их положение в иерархии
4. Делает скучные задачи интересными
Добавить элементы игры в процесс совершения рутинных действий может оказаться делом непростым. Но задействовав эффект неожиданности, вы сможете превратить знакомое взаимодействие в нечто новое и, таким образом, незабываемое.
Заглянув на Tympanus’ 3D Room Exhibition, вы можете сказать, что он выглядит так же, как и любой другой сайт-галерея, на котором вы бывали раньше. Но как только вы начнете взаимодействовать со страницей, ваше мнение о лендинге изменится кардинально. Достаточно всего лишь переместить курсор, как страница придет в движение, и вы ощутите эффект 3D-пространства. Это чувство усиливается, когда вы будете переходить с одной страницы на другую; вам начнет казаться, что вы перемещаетесь между комнатами в трехмерном пространстве.
Теперь поговорим о чем-то гораздо более знакомом, чем 3D-эффекты: веб-формах. Скажите, вы знаете кого-нибудь, кому нравится их заполнять? Вряд ли. Между тем заполнение форм — одно из самых распространенных действий, которое предлагается выполнить посетителям лендингов. Как же изменить их отношение к этому?
Превратить это скучное занятие в забавное упражнение. Взгляните на персонажа (снежного человека) за авторством Дэрина Сенефа (Darin Senneff), известного веб-дизайнера. Когда пользователь начинает вводить пароль, он закрывает глаза.
Такой анимированный эффект делает процесс заполнения формы веселым и оригинальным. Особенно необычно его наблюдать впервые.
Процесс скроллинга можно сделать не только визуально интересным, но и полезным.
Ниже — Storytelling Map, интерактивное путешествие, в котором скроллинг страницы активирует следующую анимацию: на карте начинает появляться маршрут, прорисовка которого соответствует контенту, находящемуся в левой части страницы. У разработчиков получилось связать воедино связывает текст, визуальные эффекты и географию; посетители изучают информацию о местности и тут же видят ее в контексте карты.
6 лучших примеров анимации для лендингов
Определить области на странице и ситуации, где анимации могут быть полезны, — лишь половина дела. Не менее важно и качество исполнения самой анимации. О том, как анимировать объекты, словно вы — профессионал этого дела, читайте в этом разделе.
1. Не анимируйте несколько элементов за раз
Когда несколько объектов приходят в движение одновременно, это отвлекает пользователей. Поскольку и мозг, и глаза человека запрограммированы на то, чтобы, прежде всего, уделять внимание движущимся объектам, они так и будут переключаться с одного объекта на другой, а мозгу потребуется дополнительное время, чтобы разобраться в том, что, собственно, происходит (особенно если объекты двигаются очень быстро). Поэтому важно, чтобы элементы анимировались последовательно, друг за другом.
Крайне важно понять концепцию переходной хореографии,которая заключается в том, что согласованная последовательность движений удерживает фокус внимания посетителя при изменении интерфейса. Минимизируйте количество элементов, которые движутся независимо друг от друга; в одно и то же время должно происходить незначительное число событий (не более 2-3). Поэтому, если вы хотите анимировать более 3 объектов, группируйте их и анимируйте как единое целое, а не по отдельности.
Не анимируйте все сразу одновременно. Объекты начнут конкурировать друг с другом за внимание пользователя
2. Анимация не должна конфликтовать с индивидуальными особенностями лендинга
Каждый раз, когда вы добавляете в дизайн анимацию, вы дополняете ее образ. Как именно вы измените его, зависит от выбранного вами эффекта анимации.
Взаимодействие с определенным продуктом предполагает наличие у человека конкретных ожиданий и установок относительно того, как должен выглядеть и функционировать этот продукт. Представьте, что вы создаете лендинг для банковской службы, и вдруг решили использовать в форме сбора данных о пользователе подпрыгивающую анимацию. Многие пользователи побоятся предоставлять свои данные, потому что форма противоречит их ожиданиям: в банковской сфере форма должна выглядеть серьезнее и солиднее.
Пример подпрыгивающей анимации. Не стоит использовать такой род анимации в формах, которые предназначены для сбора персональной информации пользователей. Люди побоятся вводить свои личные данные в такую форму
Если вы хотите анимировать форму, чтобы привлечь к ней внимание посетителя лендинга, то в конструкторе LPgenerator доступны 2 события, при которых будет срабатывать анимация — при появлении элемента на экране при прокрутке лендинга, а также при наведении указателя мыши:
Чтобы настроить анимацию формы, кликните по полям формы и выберите пункт настроек «Анимация» в правой панели редактора
3. Следите за временем
Когда дело доходит до создания анимаций, выбор тайминга — это все. От этого зависит, окажется ли взаимодействие удачным или нет. При работе над анимацией треть времени уходит обычно на поиск нужных анимированных эффектов, а две другие — на выбор времени, чтобы сделать анимацию гладкой.
Анимация не должна быть долгой. Она не должна мешать выполнению пользователем основной задачи, потому что даже самая красиво выполненная анимация будет раздражать посетителей лендинга, если будет тормозить их. Оптимальная скорость для анимации пользовательского интерфейса составляет от 200 до 500 миллисекунд. Анимация, которая длится менее 1 секунды, считается мгновенной, тогда как анимация длительностью более 5 секунд может показаться затянувшейся.
Когда дело доходит до создания анимированного эффекта, есть один параметр, который оказывает непосредственное влияние на восприятие анимации: синхронизация. Он позволяет дизайнерам добиваться того, чтобы анимация выглядела как можно более естественной, натуральной.
4. Не забывайте о доступности
Анимация — это палка о двух концах. Она может улучшить юзабилити для одной группы пользователей, но одновременно создать проблемы для другой. Релиз новой редакции операционной системы Apple iOS 7 является примером последнего: iOS 7 была полна анимированных эффектов, и вскоре после ее выпуска пользователи iPhone сообщили, что анимированные переходы вызывают у них чувство тошноты.
Как дизайнер, вы никогда не должны забывать о том, как будут взаимодействовать с вашим дизайном люди с нарушениями зрения. Ознакомьтесь с рекомендациями WCAG по проектированию анимаций и убедитесь, что ваш дизайн не противоречит им. Отслеживайте, хочет ли пользователь минимизировать количество анимации или движения или нет.
Специальная функция CSS «prefers-reduced-motion» (предпочитает минимум движений) помогает отслеживать те ситуации, когда сам пользователь обращается с запросом минимизировать количество анимаций. Если такой запрос поступил, лучше отреагировать на него и уменьшить объем анимаций.
Кроме того, также следует время от времени проводить тестирование юзабилити, чтобы проверить, что у всех пользователей, включая людей с нарушениями зрения, не возникает проблем при работе с вашим сайтом.
5. Проводите тест ваших дизайнерских решений
Проводить эксперименты с разными эффектами анимации — занятие, несомненно, увлекательное. Однако уловить тот момент, когда анимаций достаточно, удается не всегда, и в итоге люди получают дизайн, который утомляет обилием эффектов и движения. Четких критериев того, когда следует остановиться, нет и не будет, и чтобы убедиться в эффективности анимаций, следует проводить тесты. Будьте готовы потратить время на прототипирование, тестирование и оптимизацию анимационных эффектов.
Ниже несколько советов, к которым следует прислушаться, если вы задумали провести тест своих работ:
- Тестируйте на разном «железе»
Качество отображения анимации во многом зависит от того, насколько она требовательна к аппаратным характеристикам компьютера: размеру экрана, производительности GPU и т.д. В результате обладатель более мощного устройства получит от просмотра анимации совершенно иной опыт, нежели человек, владеющий аппаратом с более скромными характеристиками. Учитывайте этот фактор при разработке, чтобы избежать так называемого ботлнекинга (ситуация, когда один из компонентов системы не дает другим компонентам раскрыть весь свой потенциал). Не вините слабые машины; лучше оптимизируйте анимацию так, чтобы она безупречно работала на всех видах устройств.
- Не забывайте про мобильные платформы
Сайты создаются и тестируются на десктопе; тест мобильного опыта и производительность анимации на смартфонах, фаблетах и планшетах часто оставляют на потом и, как правило, забывают. Отсутствие тестирования может стать причиной многочисленных сбоев у мобильных пользователей, а все потому, что некоторые эффекты могут хорошо отображаться на десктопе, но плохо — на мобильных. Чтобы избежать негативной реакции со стороны мобильных юзеров, как можно раньше убедитесь в том, что анимация хорошо работает и на мобильных, и на настольных устройствах.
- Просмотрите анимацию на медленной скорости
Трудно заметить несовершенство анимации (особенно сложной), когда она проигрывается на полной скорости. Когда вы замедляете анимацию (скажем, до одной десятой от нормальной скорости), все недоработки становятся более очевидными. Можете заснять свою анимацию в режиме замедленной съемки и показать ее другим людям, чтобы узнать их мнение.
6. Разработку анимаций следует начинать на ранних этапах работы над дизайном
Многие дизайнеры считают анимацию необязательной функцией, поскольку она перегружает пользовательский интерфейс, усложняет его. Это действительно так, но лишь в тех случаях, когда анимацию добавляют на самом последнем этапе разработки всего дизайна. В таких проектах анимация не присутствовала на начальных этапах, поэтому никакой важной функции она не выполняет — анимация ради анимации. Случайная анимация без какой-либо цели не принесет пользы посетителям, будет отвлекать и раздражать.
Чтобы анимация не была пустой и была полезной, задумайтесь над ее функцией, над тем, где она придется к месту, в самом начале процесса разработки дизайна.
Только в этом случае анимация будет естественной для пользовательского опыта.
Заключение
Качественная, продуманная анимация делает лендинг не только визуально привлекательным, но и более удобным. Если все сделать правильно, то из простой последовательности разделов ваша страница превратится в яркое хореографическое действо, которое сможет надолго запечатлеться в памяти посетителей.
Высоких вам конверсий!
По материалам: smashingmagazine.com Источник картинки: createcg.net
