«Ваш интерфейс — не фильм "Диснея"» Статьи редакции

UI-дизайнер о том, почему нужно отказаться от эстетической анимации

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

Автор «Блога о дизайне и интерфейсах» Максим Шайхалов подготовил для vc.ru перевод заметки Пакстон.

Один из наиболее очевидных признаков компетентного дизайнера — сдержанность интерфейса. Речь идет о знании возможностей выбранной платформы, но не использовании их (пока не возникает идеальный момент для этого).

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

Надуманный пример

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

Надуманный пример

Это выглядит, как отказ от визуального скевоморфизма и замена его анимационным скевоморфизмом, в котором наши цифровые объекты ведут себя так, словно они сделаны из желе или подвешены на невидимые резинки.

Анимация — как проклятие. Если вы перестараетесь, она потеряет всё своё влияние.

Принципы анимации

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

Кажется, что многие дизайнеры рассматривают интерфейсы как свое портфолио с примерам анимаций. Если вы не надеетесь получить работу в Pixar, вероятно, можно избегать таких анимационных приемов как Bounce или Ease-in-Out.

Что такое интерфейс? Поверхность раздела; граница раздела; поверхность контакта; стык, область контакта, взаимодействия; средство осуществления взаимного воздействия, взаимосвязи («Википедия»).

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

Движение в интерфейсе

Вот некоторые простые принципы, которые работали хорошо для меня, и которые я рекомендую:

  • Умейте обосновать использование каждой анимации с точки зрения пользы для пользователя. «Это выглядит прелестно» не подходит.
  • Сохраняйте продолжительность анимации меньше или равной 300 мс.
  • Избегайте линейных анимаций. Это делает движения медленными, неинтересными и механическими.
  • 99% анимации должно состоять из простых изингов Ease-In или Ease-Out.
  • Вам редко нужны более экзотические анимации, такие как Spring, Bounce и так далее.

Некоторые примеры UI

Уведомления

Уведомления. Пример 1

Простая анимация, которая длится только 300 мс. Здесь есть очень тонкий эффект наслоения. В результате чего текст сообщения появляется в течение 100 мс после начала появления красной карточки.

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

Быстрое масштабирование

Уведомления. Пример 2

Пример выше использует анимацию, увеличивающуюся от интенсивности:

  • при первом клике появляется уведомление;
  • при втором клике трясется текст;
  • если пользователь продолжает нажимать на кнопку, то дополнительный эффект можно использовать, чтобы привлечь внимание к этой проблеме.

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

Расширяющаяся карточка

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

Пример с расширяющейся карточкой

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

Иерархия важности

Одна из самых важных вещей, которые дизайнеры и разработчики должны решить — это какие элементы нашего интерфейса более важны. Мы делаем это множеством способов:

  • с помощью заголовков;
  • выделяя или делая текст полужирным;
  • используя цвет;
  • используя формы и образы;
  • используя движение.

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

Функциональная анимация против эстетической анимации

Программисты часто используют термин «кода с запашком». Это относится к особенностям программного кода, которые не могут быть напрямую оценены как плохие, но которые могут быть восприняты паучьим чутьем опытного программиста, как потенциально плохой код.

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

Анимация ради анимации является (почти всегда) плохим дизайном.

Помните, что принцип «лучше меньше да лучше» относится к анимации. Функциональная анимация всегда превосходит чисто эстетическую.

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

{ "author_name": "Филипп Концаренко", "author_type": "editor", "tags": [], "comments": 9, "likes": 17, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 12787, "is_wide": true, "is_ugc": false, "date": "Wed, 30 Dec 2015 11:58:39 +0300", "is_special": false }
0
9 комментариев
Популярные
По порядку
Написать комментарий...
6

Анимация должна показать широкому кругу неподготовленных пользователей, что и откуда появляется, чтобы прослеживалось логическое взаимодействие.
Самолеты - пример неудачный, ведь там специально обучают пользователя (летчика) пользоваться интерфейсом.
А вот интерфейс телевизора, встроенного в подголовник в салонах самолетов - наверняка с анимацией.
Хорошо про анимацию в интерфейсах рассказал Google в Material Design.

Ответить
4

Так там как раз самый Дисней ленд

Ответить
3

анимация как огонь - может греть, а может спалить все

Ответить
2

*Кажется, что многие дизайнеры рассматривают интерфейсы как свое портфолио с примерам анимаций.*
Именно так часто и происходит.

Ответить
2

Спасибо за идею карточек. У кого то есть ещё ещё на примете подобные не банальные решения-рецепты?

Ответить
0

Всё хорошо в меру.

Ответить
0

Наркотики, массовые расстрелы, войны, изнасилования, эпидемии, стихийные бедствия, политические убийства, тоже хороши в меру?

Ответить
0

Я думаю, что золотая середина это Material Design.
Там анимации не слишком много и достаточно для положительного user experience-a

Ответить
0

Более удачным кажется отъезжание вниз элементов списка при расширении карточки. Еще можно показать что раскрывшаяся карточка немного утоплена по сравнению с элементами списка.(очень легкие тени как в материал дизайн), это создаёт гораздо лучший эффект ориентации пользователя и понимания целостности интерфейса, чем раскрытие карточки над списком

Ответить
Читать все 9 комментариев
Можно ли выбрать здорового ребенка: стартап Genomic Prediction ищет рак и диабет у эмбрионов Статьи редакции

Тесты стоят тысячи долларов, но учёные сомневаются в их эффективности.

«Яндекс.Карты» и «Яндекс.Навигатор» появились в CarPlay и Android Auto Статьи редакции

Как работают обновлённые приложения и какие есть ограничения.

На рынке — бум семейного банкинга. Как дети учатся копить и инвестировать и какие инструменты им помогают

За один только 2020 год на Западе запустились сразу несколько ярких банковских продуктов для детей. Например, британский Starling объявил о выпуске детского счета Kite, JPMorgan Chase представил продукт для финансовой грамотности детей Chase First Banking, а Apple запустил Cash Family.

Как продвигать компьютерный сервис без специалистов по рекламе

Владелец компьютерной мастерской «ПеКарня» в Самаре Роман Услонцев рассказал об особенностях продвижения в своей нише и о том, как виртуальный маркетолог Макс помог снизить стоимость заявки в три раза.

Дамы и господа, а не развалить ли нам финансовую пирамиду ещё на старте?

Теперь, когда суд арестовал основателя финансовой пирамиды Finiko Кирилла Доронина и наконец-то всем стало очевидно, что это всё мошенничество… ну или почти всем:

Кейс: как мы первыми на Twitch провели тест-драйв автомобиля и получили ER 19%
Росфинмониторинг заказал разработку сервиса для отслеживания операций с биткоинами Статьи редакции

Система поможет отследить финансирование оборота наркотиков, терроризма и схемы отмывания доходов.

Насколько сложно простому игроку стать киберспортсменом?

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

«Россия» начала предлагать бортпроводникам по 25 тысяч рублей за «лояльность» на фоне сообщений о забастовках Статьи редакции

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

Объединённая сеть «Синема парк» и «Формула кино» не станет переименовывать кинотеатры в Okko Статьи редакции

В 2020 году «Сбер» выкупил 45% Rambler Group — тогда же ему перешёл и онлайн-кинотеатр Okko.

Акции китайских компаний в США – «ненастоящие»

За первое полугодие 2021 года китайские компании провели 34 IPO в США и привлекли $12,5 миллиардов. За аналогичный период прошлого года объемы привлеченного капитала на IPO составили скромные $1,9 миллиардов. Но все акции китайских компаний, размещаемых в США — это акции не китайских, а каймановых компаний. Почему так — разбираемся в материале.

null