UI-анимация: как помогает пользователю?

Настя Луговая
UI/UX-дизайнер

Время чтения статьи: ~ 4 минуты

21.10.2022

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

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

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

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

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

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

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

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

Что такое SOLID, какие основные принципы применяются в программировании

5 принципов SOLID в программировании

Читать

Сергей Галактионов
CTO

Всем привет! Меня зовут Сергей Галактионов, я технический директор компании PROFSOFT и преподаватель направления backend в Profsoft Academy

Школы IT: что делать, куда идти?

Читать

Сергей Галактионов
CTO

Из чего оно состоит и как использовать результаты

Исследование приложений: что и зачем проверять перед началом разработки

Читать

Тимур Кубинев
Digital-маркетолог