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

[DmitryOlkhovoi]

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

[ad1Dima]

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

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

[Shultc]

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

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

[ad1Dima]

Кнопочный телефон — прекрасный пример UX, когда со временем можно запомнить шорткаты. Как вы сами отметили, анимацию это не отменяет. В первых версиях win10 рабочие столы переключались без анимации и практически моментально. Это абсолютно сбивало с толку: куда я попал, откуда пришёл.

ну а насчёт десятка действий: либо UX плохо спроектирован, что вам нужно делать десятки действий с изменениями состояний, которые требуют анимацию. Либо в UI тупо лишние анимации запиханы. Анимации должны визуализировать изменение состояния текущего экрана/объекта. В iOS, например, анимации по-умолчанию занимают 0.3 сек (или меньше): переход на новый экран, открытие клавиатуры. Больше делать просто нельзя.

[BFS]

В идеальном мире так и должно быть. На практике же так далеко не всегда. Опять же, «быстрый» и «понятный», понятия субъективный, для меня, например, все анимации на андроиде нужно ускорить в 2-3 раза чтобы было быстро. А вот сделать понятным зачастую вообще нельзя, потому что разработчик/дизайнер почему-то решил, что надо «акцентировать внимание» на иконке, в то как контент важнее.

[bask]

Подскажите, каким инструментом вы пользовались для создания таких гифок?

[kaftanati]

Автором публикации был применен инструмент Ctrl-C / Ctrl-V.

[serg199627]

И не только там он применял данныйИНСТРУМЕНТ

[Barka]

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

[serg199627]

Существует антиплагиатор, чтобы чекать все сайты. Клон хабра? Пфф, это просто личный блог не более

[Barka]

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

[serg199627]

Я не говорю о прибыли и т.п. Я Вам посоветовал антиплагиатор для того, чтобы пользователи Хабра не читали одни и те же статьи

[Grammka]

А кому нужна эта хурумба, если есть хабр? Я этой статьи не встречал, спасибо автору.

[serg199627]

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

[Shultc]

Зачем?

[serg199627]

Ну так правильно, пусть все одно и тоже пишут… Зачем писать 10 раз одно и тоже?

[Iceg]

говноперевод на каком-то левом ресурсе про пельмени жареные. О чём речь вообще?

[Tato]

Данный материал взят автором с доки гугла, вот тут material.google.com

[AndreyDmitriev]

Любопытно, а какие нынче существуют библиотеки для создания такого дизайна применительно к десктопным приложениям (под Windows)? Ну, скажем для C# + WPF? Я это к тому, что изобретать свой велосипед для сложной анимации, самостоятельно просчитывая все эти переходы — довольно накладно. Сложного особо ничего нет, но рутинной работы довольно много.

[Barka]

Могу подсказать бесплатное решение для Unity — UI Tween, почти все что нужно в нем есть. Но некоторые вещи мне пришлось дописывать.

[Iceg]

Ещё вопрос, стоит ли делать дектопное win-приложение с такими анимациями. Из cons как минимум размер экрана — когда на смартфоне плашка разворачивается на весь экран с анимацией это не так напряжно, когда она пролетит весь 17..24-дюймовый экран. Ладно сворачивание окна, но если такие спецэффекты будут хотя бы у половины взаимодействий, это пипец, кмк.

Хотя, попробовать такое приложение было бы интересно — может, я ошибаюсь.

[kaftanati]

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

Я б не рискнул тащить все эти динамические улучшалки в enterprise.

[ecroFeG]

Ник Бабич в тренде. Иногда складывается ощущение, что он один публикуется на https://uxplanet.org/ ))

[RomanArzumanyan]

Потом от всего этого счастья вытекают глаза, ты открываешь консоль, и мир снова становится маленьким и безопасным.

[Smagold]

Каждый раз при взгляде на анимации из Material замечаю, насколько же все это неюзабельно выглядит. Взять хотя бы тот «выскакивающий» плеер — пользователь нажал на одну единственную кнопку, и из нее вылетел целый блок функциональных элементов, я бы после такого «user experience» постарался все закрыть поскорее и больше к такому устройству не прикасаться вообще. Слишком уж агрессивны все эти анимации, и не везде уместны. Единственное, что мне нравится из Material — динамичные иконки, та же кнопка меню-гамбургер, меняющаяся на крестик.
Имхо, самые хорошие анимации — в Ubuntu и Mac OS, интуитивно понятные и в меру используемые.

[AVolt]

Ох уж эта анимация. Перегружает интерфейс, а зачастую и тормозит. Особенно в браузере я считаю ее неуместной. Пример — Google play music. Какие-то надвигающиеся или выпадающие меню, куча элементов которые зачем-то двигаются независимо друг от друга и хаотично меняют размер и форму. Зачем это все? Вот в Яндекс музыке анимация по минимуму, и пользоваться удобнее.

[BFS]

Все же, эти анимации слишком уж сильно зависят от восприятия и каждого конкретного пользователя. Пока на том же андроиде работает стандартная анимация открытия окна, выдвигающейся шторки я успеваю несколько раз подумать «Ну какого черта, ну быстрее, почему так медленно?». После того, как включу в опциях разработчика коэффициент 0.5 или даже 0.3 для анимации становится более-менее юзабельно. Но тогда эффект грязных пальцев который ripple или circular reveal сразу надо выпиливать навсегда, а для этого простого решения нет. Собственно, ripple и circular reveal хорошо бы убрать даже при обычной скорости анимации.

[kybarg]

Спасбо большое за ваши публикации! Я вижу что Material Design повлиял на вас так же сильно как и на меня. Google открыла глаза на простые на первый взгляд вещи. которые раз убеждаюсь, что дизайн — это первое с чео нужно начинать разработку.