Функциональная анимация в UX дизайне. Что делает ее эффективной?

Original author: Nick Babich
  • Translation
Предлагаю читателям «Хабрахабра» перевод статьи «Functional Animation In UX Design: What Makes a Good Transition?» за авторством Nick Babich.



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

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

Хороший дизайн анимации обладает следующими шестью признаками:

1. Отзывчивый


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



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


Объекты должным образом реагируют на действия пользователя.

2. Ассоциативный


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

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


Плохо.

Во втором, меню появляется прямо из точки касания, что создает крепкую связь между ними.


Хорошо.

Другой пример – «action button», функциональность которой изменяется при определенных условиях. «Play» и «Stop», вероятнее всего, самый распространенный пример переключаемых кнопок. Преобразование одной кнопки в другую означает, что эти два действия связаны, и нажатие на одну делает видимой другую. Вы должны анимировать подобные переходы так, чтобы они были плавными и неразрывными.


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

3. Естественный


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

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


Хорошо. В движении элемента вверх по экрану должно ощущаться усилие при разгоне.

4. Преднамеренный


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

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

MacOS использует функциональную анимацию при минимизации окна. Эта анимация связывает одно состояние окна с другим.



Еще один хороший пример перехода — это выбор пользователем элемента из списка с последующим преобразованием его в более детальное представление. Этот прием позволяет пользователю сохранить контекст.



5. Быстрый


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

Не используйте медленные анимации, они создают ненужные задержки и увеличивают продолжительность.


Плохо.

Колебание и замедление движения множества элементов, также могут увеличивать продолжительность.


Плохо.

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


Хорошо.

Сделайте переходы короткими, так как пользователи будут видеть их часто. Длительность анимации должна составлять 300 или менее миллисекунд.


Хорошо.

6. Понятный


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


Плохо.

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


Хорошо.

Заключение


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

Проектируйте с заботой. Внимание к каждой детали – ключ к созданию простого в использовании приложения.
Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 28

    +5
    На анимации смотреть приятно, но бывает перебор и ты ждешь когда же оно натанцуется и даст тебе, что-нибудь сделать
      +2
      5. Быстрый
      Когда элементы изменяют свою позицию или состояние, перемещение их должно быть достаточно быстрым, чтобы не ждать его окончания, но и достаточно медленным, что бы переход был понят правильно.
      Не используйте медленные анимации, они создают ненужные задержки и увеличивают продолжительность.
      6. Понятный
      Анимация не должна быть сложной и многосоставной, так как перемещение и пересечение нескольких элементов по разным направлениям могут сбивать с толку.

        0
        Иногда мешает само наличие анимации. Да анимация может быть «быстрой» (п.5). Но когда тебе нужно сделать несколько десятков одинаковых действий подряд, то любую анимацию нужно будет ждать.

        Знаете, я на своём старом-старом кнопочном телефоне моментально попадал в любой пункт меню: Для этого было достаточно нажать на кнопку «Меню» и дальше набрать комбинацию цифр вроде «1-7-3-5». Потому что каждому пункту и под-пункту в меню соответствовал порядковый номер, по которому можно было до него достучаться. Когда у молодого меня этот телефон только оказался, я долго любовался красивыми иконками в меню. Возможно там даже была какая-то анимация. Но со временем это всё заменилось на «Меню-3-1-8-1», потому что я начал серьёзно пользоваться этим устройством.
          0
          Кнопочный телефон — прекрасный пример UX, когда со временем можно запомнить шорткаты. Как вы сами отметили, анимацию это не отменяет. В первых версиях win10 рабочие столы переключались без анимации и практически моментально. Это абсолютно сбивало с толку: куда я попал, откуда пришёл.

          ну а насчёт десятка действий: либо UX плохо спроектирован, что вам нужно делать десятки действий с изменениями состояний, которые требуют анимацию. Либо в UI тупо лишние анимации запиханы. Анимации должны визуализировать изменение состояния текущего экрана/объекта. В iOS, например, анимации по-умолчанию занимают 0.3 сек (или меньше): переход на новый экран, открытие клавиатуры. Больше делать просто нельзя.
          0
          В идеальном мире так и должно быть. На практике же так далеко не всегда. Опять же, «быстрый» и «понятный», понятия субъективный, для меня, например, все анимации на андроиде нужно ускорить в 2-3 раза чтобы было быстро. А вот сделать понятным зачастую вообще нельзя, потому что разработчик/дизайнер почему-то решил, что надо «акцентировать внимание» на иконке, в то как контент важнее.
        0
        Подскажите, каким инструментом вы пользовались для создания таких гифок?
          +7
          Автором публикации был применен инструмент Ctrl-C / Ctrl-V.
            –4
            И не только там он применял данныйИНСТРУМЕНТ
              0
              Здорово, что есть клоны хабра, но могу Вас уверить, о подобном ресурсе узнал из Вашего коментария. В следующий раз проигнорирую его еще раз и буду чекать наличие перевода исключительно на хабре.
                –2
                Существует антиплагиатор, чтобы чекать все сайты. Клон хабра? Пфф, это просто личный блог не более
                  +2
                  Антиплагиатор? О чем Вы? Я что претендую на авторские права или какую то прибыль? Я всего лишь хочу сделать полезный контент ближе к русскоговорящему сообществу. Мне жаль, что Вы видите в этом злой умысел.
                    –4
                    Я не говорю о прибыли и т.п. Я Вам посоветовал антиплагиатор для того, чтобы пользователи Хабра не читали одни и те же статьи
                      +3
                      А кому нужна эта хурумба, если есть хабр? Я этой статьи не встречал, спасибо автору.
                        –4
                        Никто и не претендует на место хабра, это просто блог. Я всего лишь указал автору что эта статья была переведена ранее.
                          +1
                          Зачем?
                            –4
                            Ну так правильно, пусть все одно и тоже пишут… Зачем писать 10 раз одно и тоже?
                +2
                говноперевод на каком-то левом ресурсе про пельмени жареные. О чём речь вообще?
              0
              Данный материал взят автором с доки гугла, вот тут material.google.com
              0
              Любопытно, а какие нынче существуют библиотеки для создания такого дизайна применительно к десктопным приложениям (под Windows)? Ну, скажем для C# + WPF? Я это к тому, что изобретать свой велосипед для сложной анимации, самостоятельно просчитывая все эти переходы — довольно накладно. Сложного особо ничего нет, но рутинной работы довольно много.
                +1
                Могу подсказать бесплатное решение для Unity — UI Tween, почти все что нужно в нем есть. Но некоторые вещи мне пришлось дописывать.
                  +1
                  Ещё вопрос, стоит ли делать дектопное win-приложение с такими анимациями. Из cons как минимум размер экрана — когда на смартфоне плашка разворачивается на весь экран с анимацией это не так напряжно, когда она пролетит весь 17..24-дюймовый экран. Ладно сворачивание окна, но если такие спецэффекты будут хотя бы у половины взаимодействий, это пипец, кмк.

                  Хотя, попробовать такое приложение было бы интересно — может, я ошибаюсь.
                    0
                    Буквально сегодня столкнулся с примером таких микро анимаций — KIS 2016. Не спорю, все выполнено аккуратно и гармонично. Но пучок анимаций на одно диалоговое окно несколько «снижают статус» у антивируса — становят на одну полку со всякими download-менеджерами, левыми браузерами, которые уже давно злоупотребляют дерганными анимациями и мельтешащими цветами.

                    Я б не рискнул тащить все эти динамические улучшалки в enterprise.
                  0
                  Ник Бабич в тренде. Иногда складывается ощущение, что он один публикуется на https://uxplanet.org/ ))
                    0
                    Потом от всего этого счастья вытекают глаза, ты открываешь консоль, и мир снова становится маленьким и безопасным.
                      0
                      Каждый раз при взгляде на анимации из Material замечаю, насколько же все это неюзабельно выглядит. Взять хотя бы тот «выскакивающий» плеер — пользователь нажал на одну единственную кнопку, и из нее вылетел целый блок функциональных элементов, я бы после такого «user experience» постарался все закрыть поскорее и больше к такому устройству не прикасаться вообще. Слишком уж агрессивны все эти анимации, и не везде уместны. Единственное, что мне нравится из Material — динамичные иконки, та же кнопка меню-гамбургер, меняющаяся на крестик.
                      Имхо, самые хорошие анимации — в Ubuntu и Mac OS, интуитивно понятные и в меру используемые.
                        0
                        Ох уж эта анимация. Перегружает интерфейс, а зачастую и тормозит. Особенно в браузере я считаю ее неуместной. Пример — Google play music. Какие-то надвигающиеся или выпадающие меню, куча элементов которые зачем-то двигаются независимо друг от друга и хаотично меняют размер и форму. Зачем это все? Вот в Яндекс музыке анимация по минимуму, и пользоваться удобнее.
                          0
                          Все же, эти анимации слишком уж сильно зависят от восприятия и каждого конкретного пользователя. Пока на том же андроиде работает стандартная анимация открытия окна, выдвигающейся шторки я успеваю несколько раз подумать «Ну какого черта, ну быстрее, почему так медленно?». После того, как включу в опциях разработчика коэффициент 0.5 или даже 0.3 для анимации становится более-менее юзабельно. Но тогда эффект грязных пальцев который ripple или circular reveal сразу надо выпиливать навсегда, а для этого простого решения нет. Собственно, ripple и circular reveal хорошо бы убрать даже при обычной скорости анимации.
                            –1
                            Спасбо большое за ваши публикации! Я вижу что Material Design повлиял на вас так же сильно как и на меня. Google открыла глаза на простые на первый взгляд вещи. которые раз убеждаюсь, что дизайн — это первое с чео нужно начинать разработку.

                            Only users with full accounts can post comments. Log in, please.