Внедрение Micro-Interaction & UI Animation в жизнь благодаря совместной работе разработчиков и дизайнеров

Мы можем создать восхитительный опыт для пользователей с помощью микро-взаимодействия и анимации пользовательского интерфейса!

Привет, меня зовут Кё Ким, и я работаю дизайнером в Capital One около двух лет. В своей работе я использовал микровзаимодействия и анимацию, в том числе в некоторых мобильных проектах, которые вы могли бы использовать сами. До того, как я начал работать в сфере технологий, я работал в кино. В фильме основное внимание уделяется рассказыванию историй и редактированию, чтобы создать историю, которая привлекает аудиторию; и многое из этого достигается с помощью переходов. Я нахожу эти навыки полезными сегодня, когда создаю опыт и истории для цифровых инструментов.

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

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

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

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

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

Что такое микро-взаимодействия и почему мы должны заботиться о них?

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

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

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

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

Хотя эти «действия» принимают различные формы, некоторые распространенные примеры включают в себя:

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

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

Принципы микровзаимодействий

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

  1. Непрерывность (и тонкость)

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

2. Предсказуемость

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

3. Преобразуемость

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

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

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

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

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

Я понял, что все сводилось к общению - что-то было потеряно в переводе, когда я объяснил свои дизайнерские идеи моим разработчикам. Возможно, вы слышали эту цитату из Конфуция раньше: «Скажи мне, и я забуду. Покажи мне, и я могу вспомнить. Вовлеки меня, и я пойму ». И именно благодаря участию мы, как команда дизайнеров и разработчиков, создаем отличные впечатления.

Во-первых, давайте кратко рассмотрим процесс проектирования ...

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

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

Но что, если процесс проектирования на практике не будет таким, как в теории? Что, если мы представляем раскадровку или неполную модель? Или кто-то еще в команде разрабатывает модель?

Когда это происходит, проблемы могут возникнуть в презентации или разработке. Эти проблемы обычно попадают в одну из трех категорий:

  1. Идея анимации не представлена ​​достаточно ясно.

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

2. Дизайнер не знает, работает ли анимация, пока не проверит и не протестирует прототип разработчика.

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

3. Дизайнер и разработчик не на одной странице

Когда дизайнеры создают анимацию пользовательского интерфейса или микровзаимодействия, они пытаются включить сложные детали дизайна, такие как пользовательские упрощения, сценарии, выражения и другие эффекты. Представляя эти идеи разработчикам, они могут услышать: «Невозможно сделать это в наши сроки» или «Мы не можем сделать это точно так же, но попробуем». В этот момент они могут попытаться хэшировать Различных деталей и технических проблем с разработчиками. Тем не менее, эти обсуждения могут оказаться бесплодными, если у разработчика нет практических знаний об инструментах или языках, которые используют разработчики. Эти факторы следует учитывать при формулировании и обсуждении идей, чтобы микровзаимодействия были совместимы с настройками разработчиков по умолчанию, что повышает вероятность того, что конечный продукт будет соответствовать стандартам дизайнера (и всех остальных).

Каковы некоторые решения этих проблем?

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

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

Концепция взаимодействия скелетов и руководство по взаимодействию

«Концепция взаимодействия скелета и руководство по взаимодействию не оставляют места для интерпретации, что позволяет мне немедленно начать работу и быть уверенным в соответствии с замыслом дизайнера». - Джесс М. Майчер / ведущий инженер IOS

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

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

  1. Концепция взаимодействия скелета (исследование движения)

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

2. Руководство по взаимодействию

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

3. Навыки создания прототипов для дизайнеров

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

Итак, с какими инструментами прототипирования должны познакомиться дизайнеры? Существует много инструментов, но не все знают, что лучше всего подходит для конкретных задач микро-взаимодействия. Вот мои рекомендации, основанные на моем личном опыте проектирования этих элементов.

Если вы знакомы с кодированием:

  • Мобильный: Xcode, Android studio
  • Мобильный или Интернет: Framer
  • Веб: CSS анимация

Если вы хотите спроектировать взаимодействие между экраном, похожим на экран, и модулем:

  • Инвизи и Марбель

Если вы хотите создать более подробные взаимодействия:

  • Принцип, Adobe CC, оригами Studio и Pixate

Если вы хотите создать подробные взаимодействия + анимация:

  • Постэффекты

В настоящее время я фанат использования After Effect для своего прототипирования. Даже если он не интерактивный (то есть интерактивный), это идеальный способ представить концепцию анимации. Кроме того, нет ограничения по эффекту, и вы можете контролировать движение деталей. Его даже можно использовать для взаимодействия в трехмерном пространстве, например, для AR и VR.

Восхитительные командные взаимодействия делают для восхитительных продуктов

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

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

РАСКРЫТИЕ ЗАЯВЛЕНИЯ: Эти мнения принадлежат автору. Если в этом посте не указано иное, Capital One не связан ни с одной из упомянутых компаний. Все торговые марки и другая интеллектуальная собственность, используемая или отображаемая, являются собственностью их соответствующих владельцев. Эта статья © 2017 Capital One.

Чтобы узнать больше об API, открытых источниках, мероприятиях сообщества и культуре разработчиков в Capital One, посетите DevExchange, наш универсальный портал для разработчиков: developer.capitalone.com.