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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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