Всем привет, меня зовут Мельников Алексей и я – Motion designer. На данный момент я работаю в МТС Диджитал над анимацией UX/UI внутреннего продукта компании и эта статья – полет мысли, рассуждение над тем, как трансформируется профессия Motion-дизайнера и какие подходы к анимации не стоит применять, особенно, если вы работаете над интерфейсом.
Смею предположить, что основная часть людей, которые приходят в профессию – явно не планируют анимировать интерфейсы, так как об этом почти никто не говорит, на курсах этому не учат, да и вообще, профессия больше направлена в коммерческую сторону удовлетворения потребностей заказчика (чаще всего это реклама в том или ином виде).
Однако, мир не стоит на месте, на рынок выходят новые продукты, которые в конкурентной гонке цепляются за любого пользователя (деньги) и все чаще Motion design проникает глубже и глубже в продукты, повышая лояльность юзеров и увеличивая конверсию бизнесу (спойлер – это главная задача).
Так как же анимацией испортить продукт? - Думать об анимации, как о завершающем штрихе продукта – обертке, которая показывает, какие мы красивые. Но любят-то не за «одежку»! Любят за душу!
Давайте ближе к душе. Моушен в интерфейсах – это прежде всего проектирование и только потом работа с UI. Вы должны четко понимать, какую задачу вы решаете своей анимацией. Такими задачами могут быть:
1. Помощь юзеру в понимании взаимодействия с приложением (вылет элементов с определенной стороны подсказывает, где искать дальнейший контент. Ясная обратная связь на взаимодействие с интерфейсом – отвечает на вопрос: нужно ли мне нажать еще раз?).
2. Проектирование новых паттернов взаимодействия (потянули экран вниз – обновилась страница).3. Анимация мягких переходов между окнами (могут быть в пару кадров) позволяет избавиться от «рваных» перескакиваний (дизориентация, почему я здесь оказался?).4. Из пункта 3 вытекает создание бесшовности интерфейса. Юзер видит откуда и куда он попадает, качество пользовательского опыта растет.
5. Работа с анимацией всего UI, делая взаимодействия с интерфейсом плавными.
6. Объяснение новых функций через иллюстрированную анимацию (как работать с новыми разделами и т.д.).
7. Отражение сути бренда (концептуальные анимации, повышающие лояльность пользователя и создающие образ бренда).
8. Разбить время контакта с активностью. Если у вас есть долгие процессы, например, подгрузка чего либо, то анимацию этой самой загрузки можно «сократить». Мы уже привыкли, что у нас все работает быстро, поэтому нам легче воспринимать информацию короткими дозами. Разбейте одну длинную анимацию на несколько коротких (по секунде, например), тогда пользователь дольше удержит свое внимание на динамичном контенте. В этот же пункт добавлю, что нужно помнить о балансе в скорости анимации, чтобы не красть время у человека.
9. Анимации, когда нужно «вау, они могут так». Этот пункт специально оставил последним, потому что моушенам очень часто хочется сделать именно это! Очень часто это может сработать в обратную сторону, так как пользователю «очень интересно, но ничего не понятно» (у меня такие эмоции возникают при просмотре всяких крутых сайтов от дизайн-студий, где все летает, крутиться, перетекает и скачет, но я не понимаю, куда нажимать дальше или почему, чтобы добраться до вкладки «контакты» или «цена» мне нужно очень долго скроллить и смотреть всю эту красоту, ведь я уже и так понял – что вы «могете»).
Уверен, что в процессе работы количество таких задач намного больше, однако, если опираться на эти 9 пунктов, можно заметно улучшить конечный результат и не нагородить лишних ошибок.
Если вы только начинаете свой путь в мир анимированной графики, предлагаю проходить его вместе! У себя на канале Secret Motion я публикую интересные статьи, заметки, посты для прокачивания насмотренности и многое другое.
Успехов!
P.S. Те, кто дочитал до конца - знают, что в шапке Secret Motion у меня висит ссылка на крутые БЕСПЛАТНЫЕ (не пиратские) плагины, а также другие полезности для моушен-дизайнеров.
