Втілення в життя анімації мікро-взаємодії та інтерфейсу користувача за допомогою співпраці розробника та дизайнера

Ми можемо створити приємний досвід для користувачів завдяки мікро-взаємодії та анімації інтерфейсу користувача!

Привіт, мене звати Кіо Кім, і я працюю дизайнером продуктів у Capital One близько двох років. Я використовую мікровзаємодії та анімацію протягом усієї своєї роботи тут, у тому числі в деяких мобільних проектах, які ви могли використовувати самі. Перш ніж я почав працювати в техніці, мій досвід був у фільмі. У фільмі основна увага приділяється розповіді та монтажу, щоб створити історію, яка приваблює аудиторію; і багато з цього здійснюється за допомогою переходів. Ці навички я вважаю корисними сьогодні, коли створюю досвід та історії для цифрових інструментів.

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

Щоб продукт міг запропонувати своїм користувачам приємне враження, він повинен запропонувати більше ніж естетично приємний дизайн та вражаючі анімаційні ефекти.

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

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

Хто вони? Чому це корисно для користувачів? Чому дизайнери та розробники повинні включати їх у свою роботу? Як команди дизайнерів продуктів можуть спільно працювати над їх покращенням?

Що таке мікро-взаємодії та чому ми повинні піклуватися про них?

Що таке мікро-взаємодія або анімація інтерфейсу користувача? Люди часто називають їх гарними анімаціями, графікою руху або дизайном рухомих зображень. Однак їх набагато більше.

На відміну від інших форм анімації, які існують виключно для створення ілюзії руху, мікро взаємодія безпосередньо залучає користувача, що дозволяє йому / їй виконувати різноманітні завдання та взаємодіяти з продуктом інтуїтивно та ефективно.

Якщо ми зв'язали це з принципами гарного дизайну систем, це посилює та забезпечує зворотній зв’язок із системою для користувача. Якщо це зроблено правильно, користувачі прийматимуть мікро-взаємодію як повідомлення від користувача, що він (система) робить те, що повинен робити у відповідь на те, що потрібно користувачеві.

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

Хоча ці "дії" мають декілька різних форм, деякі поширені приклади включають:

  • Коли ми “переміщуємо” товар у віртуальний кошик.
  • Коли ми вибираємо між двома варіантами кнопки перемикання, подібної до CTA.
  • Коли ми “відтягуємось”, щоб оновити стрічку новин і переглянути останнє оновлення.
  • Коли ми “прокручуємо вгору та вниз” у довгому каналі чи на сторінці.

Розробляючи мікро-взаємодію, ми повинні вивчити, чи вона справді необхідна та життєво важлива для досвіду користувача. Інакше це може потенційно відволікати форму користувача, використовуючи ваш продукт ефективно, або ставати візуальним шумом.

Принципи мікро взаємодій

Є три принципи, які я завжди враховую, розробляючи мікро-взаємодії.

  1. Безперервність (і тонкість)

Елементи мікро-взаємодії повинні бути тонкими, щоб, коли користувач здійснює дію, в його досвіді спостерігався постійний потік. Наприклад, якщо ми створюємо анімацію прокрутки в довгому каналі, користувач повинен мати можливість зосередитися на вмісті сторінки, а не на самій анімації прокрутки.

2. Прогнозованість

Якісні мікро-взаємодії мають елемент передбачуваності, що дозволяє користувачеві ефективно та ефективно орієнтуватися на продукт. Користувач може точно передбачити наслідки своїх дій, відчувати себе комфортно назад і впевнений у своїй здатності виконувати так, як очікувалося.

3. Трансформативність

Рідкі переходи між декількома екранами та чітко визначені перетворення різних об'єктів всередині них є ключовими аспектами якісних мікро взаємодій. Вони дають можливість користувачеві розвинути інтуїтивне розуміння взаємозв'язків між екранами та елементами всередині них.

Розроблені відповідно до цих принципів, мікро-взаємодія забезпечує контекст для дизайну, допомагаючи користувачам знати, як взаємодіяти з ним. Мікро взаємодія - це моментна подія, яка завершує єдине завдання. Напевно, найменші інтерактивні елементи веб-сайту чи дизайну додатків, мікро-взаємодії - одні з найважливіших, оскільки вони виконують різноманітні основні функції.

Тригери (торкніться, проведіть пальцем, перетягніть і т. Д.) Ініціюють кожну з дій, перелічених у розділі вище (безперервність, передбачуваність та трансформативність). Користувач виконує дію на веб-сайті чи програмі, щоб розпочати процес (навіть якщо він триває після початкового кроку). Це слідує за схемою із закликом до дії користувача, правилами взаємодії, що визначаються інтерфейсом (що буде і як), зворотним зв’язком від користувача (чи працював він чи ні), а також зразками чи циклами (чи робить дія трапляються один раз або повторюються за графіком).

-Як розробники та дизайнери можуть працювати разом, щоб реалізувати мікро взаємодії

Як бачимо, мікро-взаємодії відіграють вирішальну роль у формуванні досвіду користувачів. Через це вони стали все більш важливою частиною моєї роботи як дизайнера продуктів. Працюючи над різними проектами на різних платформах та використання, я помітив, що не всі усвідомлюють цінність цих елементів або як їх ефективно створювати. Що ще важливіше, часто члени команди не знають, як висловити свої ідеї один одному щодо проектування переходів та мікро-взаємодій.

Я зрозумів, що все це зводилося до спілкування - щось було втрачено в перекладі, коли я пояснював свої розробники ідеї. Ви, можливо, чули цю цитату від Конфуція раніше: «Скажи, і я забуду. Покажіть мені, і я можу згадати. Залучіть мене, і я зрозумію. "І саме завдяки залученню ми, як команда дизайнерів і розробників, створюємо чудовий досвід.

Спочатку перегляньмо короткий опис процесу дизайну ...

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

  1. Дизайнер розробляє візуальні елементи та ефекти анімації, необхідні для актуалізації своєї ідеї.
  2. Дизайнер представляє остаточну модель та її основні концепції іншим членам команди.

Але що робити, якщо процес проектування не виходить на практиці, як це робиться в теорії? Що робити, якщо ми представляємо рекламну дошку чи неповну модель? Або хтось інший в команді розробляє модель?

Коли це станеться, ймовірно, можуть виникнути проблеми в презентації чи розвитку. Ці проблеми зазвичай належать до однієї з трьох категорій:

  1. Ідея анімації повідомляється недостатньо чітко.

Якщо ви намагаєтесь описати анімаційну концепцію словами чи нерухомими зображеннями, ви можете побачити гримаси на обличчях своєї аудиторії. Це означає, що вони намагаються зрозуміти вашу ідею, але вони не дуже її отримують. Навіть якщо вони розуміють основну концепцію, картина, яку вони створили у своїх думках, ймовірно, не відповідає тому, що ви передбачаєте. Оскільки люди схильні сприймати рухомі образи, нерухомі зображення та словесні описи по-різному, покладаючись на слова чи образи, щоб передати ідею анімації, створюється місце для неправильного спілкування та часто непотрібної напруги серед членів вашої команди.

2. Дизайнер не знає, чи добре працює анімація, поки вони не перевірять і не перевіряють прототип розробника.

Коли дизайнери не мають навичок складання прототипів, вони обмежуються роздачею своїх ідей розробникам за допомогою розкадровки. Навіть якщо дизайнер сильно вірить у модель мікро-взаємодії, він не може сказати, чи працює він на повний потенціал, поки розробник не завершить прототип. Це проблематично з ряду причин, основною з яких є велика ймовірність неправильного спілкування, що такий підхід вводить у процес. Крім того, це відкриває двері до сумнівів у членів команди та призводить до питань щодо доцільності ідеї. З точки зору розвитку це може бути дорого за часом.

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

Коли дизайнери роблять анімацію або мікро-взаємодію з інтерфейсом, вони намагаються включати складні деталі дизайну, такі як користувацькі полегшення, сценарії, вирази та інші ефекти. Представляючи розробникам ці ідеї, вони можуть почути: "Це неможливо зробити це на нашій шкалі часу", або "Ми не можемо зробити це точно так само, але ми спробуємо". На цей момент вони можуть спробувати хеш. викласти різні деталі та технічні проблеми з розробниками. Однак ці дискусії можуть закінчитися безрезультатними, якщо дизайнер не має належних знань про інструменти та мови, які розробники використовують. Ці фактори слід враховувати при формулюванні та обговоренні ідей, завдяки чому мікро взаємодія сумісна з налаштуваннями розробника за замовчуванням, збільшуючи ймовірність того, що кінцевий продукт буде відповідати стандартам дизайнера (та всіх інших).

Які варіанти вирішення цих питань?

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

Тепер ми вже не сперечаємось щодо включення чи ні мікровзаємодії, ми вивчаємо способи зробити їх ще кращими!

Концепція взаємодії скелету та посібник із взаємодії

"Концепція взаємодії скелетів та посібник щодо взаємодії не залишають місця для інтерпретації, що дозволяє мені почати роботу негайно та бути впевненим у відповідності баченню дизайнера".

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

Якби ми використовували подібний процес для анімації, наш процес може бути набагато швидшим та кращим.

  1. Концепція взаємодії скелету (вивчення руху)

Концепція взаємодії скелетів схожа на каркасну рамку, яку ви створили б при проектуванні потоку. Основна відмінність полягає в тому, що це демонстраційний прототип, який можна відтворити / натискати. Якщо ми принесемо це на зустріч, членам нашої команди не доведеться використовувати свої уяви, щоб зрозуміти концепцію. Дизайнер може використовувати демонстраційну / натискає демонстраційну або статичну дошку історії, щоб безпосередньо посилатися на візуальні та анімаційні елементи дизайну. Це дасть кожному чітке та точне розуміння своєї ідеї. У свою чергу, партнери можуть надати відгуки, які є дуже специфічними та, таким чином, дуже цінними для дизайнера. У той же час команди з управління продуктами та розробками отримуватимуть інформацію, яка дозволить їм покращити свої внутрішні комунікації та оцінку часу для проекту.

2. Посібник із взаємодії

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

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

На мій досвід, щоб налаштувати себе на успішне дизайнерське співробітництво, дизайнер продукту повинен бути рушієм анімації, а розробник повинен надавати підтримку. Це означає, що основна відповідальність у партнерстві несе дизайнер продукту. Вони не тільки несуть відповідальність за пояснення своїх ідей дуже чітко, вони повинні показати, що вони здійсненні, надаючи доказ концепції. Це також означає, що дизайнерам виробів необхідно вміти робити власні прототипи анімації. Якщо дизайнер продукту може створити прототип і представити його під час зустрічі, обговорення, що випливає, буде більш зрозумілим і менш трудомістким, що призведе до більш ефективного процесу спілкування в цілому.

Отже, з якими інструментами для складання прототипів повинні ознайомитися дизайнери? Існує багато інструментів, але не всі знають, що найкраще підходить для конкретних завдань з мікро взаємодії. Ось мої рекомендації на основі мого особистого досвіду проектування цих елементів.

Якщо ви знайомі з кодуванням:

  • Мобільний: Xcode, Android студія
  • Мобільний або Інтернет: Framer
  • Web: CSS анімація

Якщо ви хочете розробити взаємодію між екраноподібним натисканням та модулем:

  • Інвізія та Марбель

Якщо ви хочете створити більш детальні взаємодії:

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

Якщо ви хочете створити детальну взаємодію + анімацію:

  • Після ефектів

На даний момент я прихильник використання After Effect для мого прототипування. Навіть якщо він не інтерактивний (тобто його можна натискати), це ідеальний спосіб представити анімаційну концепцію. Також немає обмеження ефекту, і ви можете контролювати рух деталей. Можна навіть використовувати його для взаємодії в тривимірному просторі, як для AR та VR.

Чудове взаємодію команди Зробити для чудових продуктів

Мікро-взаємодії стали все більш важливим - якщо не критичним - елементом веб, мобільного дизайну тощо. Навіть якщо і дизайнери, і розробники визнають цінність анімації інтерфейсу користувача і вмотивовані їх створювати, вони часто намагаються співпрацювати ефективно, ефективно. Потрібна сильна команда, щоб вчасно доставити великі мікро-взаємодії; такі команди вимагають чіткого розмежування ролей, ефективних навичок спілкування та правильних інструментів складання прототипів для виконання завдань.

Щоб налаштувати мікро-взаємодії на успіх, переконайтеся, що ваша команда володіє цими характеристиками та займається цими процесами. І удачі у вашій власній мандрівці мікро-взаємодії!

ЗАЯВЛЕННЯ РОЗКРИТТЯ: Ці думки є авторами. Якщо не зазначено інше на цій посаді, Capital One не є афілійованою компанією, а також не схвалюється жодною із зазначених компаній. Усі торгові марки та інша інтелектуальна власність, яка використовується або відображається, є власністю відповідних власників. Ця стаття © 2017 Capital One.

Щоб дізнатися більше про API, відкритий код, події спільноти та культуру розробників у Capital One, відвідайте DevExchange, наш портал для всіх розробників: developer.capitalone.com.