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

Обычная UI-анимация делает опыт пользователя просто красивым и не добавляет ему никакой ценности. Поэтому UI-моушн обычно рассматривается лишь как часть UX.

Вот лишь часть примеров, где применяется именно UX-анимация в приложении:

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

ПРАВИЛЬНАЯ СКОРОСТЬ

Частота кадров — это количество кадров в одну секунду анимации. Человеческому глазу требуется не меньше 24 кадров в секунду, чтобы воспринимать ее как плавное движение. Частота кадров CSS-анимаций во многом зависит от скорости браузера и устройства. Почему это важно? 

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

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

Комфортная для пользователя скорость анимации интерфейса — от 200 до 500 мс. Эти данные основаны на физиологических качествах нашего мозга. Любая анимация короче 100 мс — мгновенна. Скорее всего, она не будет воспринята мозгом вообще.

ОТЗЫВЧИВОСТЬ

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

СОПРОТИВЛЕНИЕ

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

Отличным примером является технология 3D Touch, где интерфейс практически «сопротивляется» действию, пока вы не нажмете достаточно сильно. Это сопротивление демонстрируется с помощью анимации, при этом иконка выделяется сильнее или слабее в зависимости от давления, которое вы оказываете.

Во многих приложениях есть такое действие — “потяните, чтобы обновить” (pull-to-refresh). Пользователь должен потянуть интерфейс вниз, чтобы получить новейший контент, и это — отличный пример сопротивления. Ему нужно потянуть с некоторым сопротивлением, пока он не дойдет до порога, когда страница перезагружается. Это отличный пример, когда анимация прямо улучшает UX. 

ВЗАИМОДЕЙСТВИЯ В РЕАЛЬНОМ И НЕРЕАЛЬНОМ ВРЕМЕНИ

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

Состояние в UX — это нечто постоянное. Действие — это что-то временное, основанное на движении. Любой объект может быть в определенном состоянии или же совершать определенное действие.

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

АССОЦИАТИВНОСТЬ

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

ЕСТЕСТВЕННОСТЬ

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

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

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

Для создания качественного UI/UX для вашего приложения или сайта — обращайтесь за помощью к нам. Свяжитесь с нами по кнопке ниже, и мы с удовольствием обсудим ваш проект.

,