Ваш интерфейс не фильм Диснея
Моя предыдущая короткая статья о беспричинной анимации действительно оказалась в тему. Отклик был феноменальным, и это было потрясающе читать о разочарованиях людей в чрезмерно анимированных интерфейсах.
Для ясности, я не против моушн-дизайна в интерфейсах. У меня проблемы с анимацией, которая служит только для того, чтобы мешать конечному пользователю.
Один из наиболее очевидных признаков компетентного дизайнера — сдержанность интерфейса. Речь идет о знании возможностей выбранной платформы, но не использовании их (пока не возникает идеальный момент для этого).
Вместо того чтобы просто стонать по поводу использования бесполезной анимации, я сделаю все возможное, чтобы предложить сценарии использования продуманной анимации.
Буду рад услышать ваши предложения и комментарии по этой теме.
Надуманный пример
Далее я покажу быстрый, надуманный пример, который продемонстрирует Диснейфикацию анимации в интерфейсах. Хотя это преувеличенный пример, на самом деле есть много интерфейсов в жизни, которые обладают такой показушной анимацией.
Надуманный пример
Это выглядит как отказ от визуального скевоморфизма и замена его анимационным скевоморфизмом. В котором наши цифровые объекты ведут себя так, словно они сделаны из желе, или подвешены на невидимые резинки.
Остановите бессмысленную анимацию
Анимация, как проклятие. Если вы перестарайтесь, она потеряет всё своё влияние.
Принципы анимации
Я слышал, что некоторые дизайнеры интерфейсов предлагают принципы анимации Диснея как обязательное чтение для своих коллег. К сожалению, это помогает продвигать идею интерфейса как развлечения. А это неизменно приводит к замедлению взаимодействия пользователя и интерфейса.
Кажется, что многие дизайнеры, рассматривают интерфейсы как свое портфолио с примерам анимаций. Если вы не надеетесь получить работу в Pixar, вероятно, можно избегать таких анимационных изингов как “Bounce” или “Ease-in-Out”.
Что такое интерфейс?
Поверхность раздела; граница раздела; поверхность контакта; стык, область контакта, взаимодействия; средство осуществления взаимного воздействия, взаимосвязи
Интерфейс является посредником и связующим звеном при обмене информацией. Именно это делает его таким важным. Главная проблема для дизайнеров — это определить, когда их дизайн становится на пути этого самого важного принципа пользовательского интерфейса.
Движение в интерфейсе
Вот некоторые простые принципы, которые работали хорошо для меня, и которые я рекомендую:
- Умейте обосновать использование каждой анимации с точки зрения пользы для пользователя. “Это выглядит прелестно” не подходит.
- Сохраняйте продолжительность анимации меньше или равной 300 мс.
- Избегайте линейных анимаций. Это делает движения медленными, неинтересными и механическими.
- 99% анимации должно состоять из простых изингов “Ease-In” или “Ease-Out”.
- Вам редко нужны более экзотические анимации, такие как Spring, Bounce и т.д.
Некоторые примеры UI
Пожалуйста, не стесняйтесь критиковать / дополнять эти примеры. Ваши замечания и предложения часто помогают улучшить мои собственные мысли по этим вопросам.
Уведомления
Уведомления. Пример 1
Простая анимация, которая длится только 300 мс. Здесь есть очень тонкий эффект наслоения. В результате чего текст сообщения появляется в течение 100 мс после начала появления красной карточки. Использование движения в этом примере имеет цель улучшения пользовательского опыта, поскольку она помогает обратить внимание на важное уведомление, которое не может быть проигнорировано.
Быстрое масштабирование
Уведомления. Пример 2
Пример выше использует анимацию, увеличивающуюся от интенсивности:
- При первом клике появляется уведомление
- При втором клике трясется текст
Если пользователь продолжает нажимать на кнопку, то дополнительный эффект можно использовать, чтобы привлечь внимание к этой проблеме.
Кроме того сама кнопка может изменять цвет, чтобы показать неудачу последующих попыток.
Расширяющаяся карточка
Это одна из тех простых, но очень эффективных реализаций просмотра карточек, которые обычно используются на телефоне. Мне очень нравится это взаимодействие, потому что оно позволяет пользователю сохранить контекст. Даже если наш взгляд на список перекрывается карточкой, мы знаем, что список находится тут же, позади развернутой карточки.
Пример с расширяющейся карточкой
Я намеренно слегка замедлил показ значка закрытия карточки. И я использовал transition который анимирует изменение позиции и прозрачности. Это привлекает внимание пользователя к важному элементу пользовательского интерфейса, который он должен заметить, чтобы потом закрыть карточку.
Иерархия важности
Одна из самых важных вещей, которые дизайнеры и разработчики должны решить — это какие элементы нашего интерфейса более важны, чем другие. Мы делаем это множеством способов:
- С помощью заголовков
- Выделяя или делая текст полужирным
- Используя цвет
- Используя формы и образы
- Используя движение
Вы не станете превращать каждое предложение документа в заголовок. Тот же принцип относится и к анимации. Рассматривайте каждый элемент анимации в вашем интерфейсе как заголовком в документе. Он должен быть использован, чтобы показать значение элемента. Злоупотребление сглаживает иерархию и ослабляет ваше сообщение пользователю.
Функциональная анимация против эстетической анимации
Программисты часто используют термин «кода с запашком». Это относится к особенностям программного кода, которые не могут быть напрямую оценены как плохие, но которые могут быть восприняты паучьим чутьем опытного программиста, как потенциально плохой код.
Если вы начинаете слышать как члены команды говорят об анимации интерфейса, используя такие термины, как «восхищение» пользователя, то ваша сигнализация на «дизайн с запашком» должна начать бить тревогу. Анимация ради анимации является (почти всегда) плохим дизайном.
Помните, что принцип «лучше меньше да лучше» относится к анимации. Функциональная анимация всегда превосходит чисто эстетическую.
Не позволяйте анимации мешать вашим пользователям. Это причина, почему навигационные интерфейсы самолета не использует каких бы то ни было анимаций. Добавление ненужной 300 мс анимации в интерфейс, вероятно, никого не убьет, но это будет раздражать ваших пользователей гораздо больше, чем «восхищать» их!
Последние мысли
Пожалуйста используйте анимацию в ваших интерфейсах. Используйте её как канал с высокой пропускной способностью, чтобы быстро передавать важную информацию. Поощряйте функциональную анимацию по сравнению с чисто эстетической, и цените те драгоценные миллисекунды, которые пользователи уделяют вашему интерфейсу.
Оригинал: Your UI isn’t a Disney Movie от Sophie Paxton. Перевел Максим Шайхалов.
Также «Ваш интерфейс — не фильм “Диснея”» можно прочитать на vc.ru