Превръщане на анимацията на микро-взаимодействието и потребителския интерфейс чрез сътрудничеството между разработчици и дизайнери

Можем да създадем възхитително преживяване за потребителите чрез микро-взаимодействие и UI анимация!

Здравейте, казвам се Кио Ким и работя като продуктов дизайнер в Capital One от около две години. Използвам микро взаимодействия и анимация по време на цялата си работа тук, включително в някои мобилни проекти, които може би сте използвали сами. Преди да започна работа в областта на техниката, моят фон беше във филма. Във филма акцентът е насочен към разказването и редактирането, за да се създаде история, която да ангажира публиката; и голяма част от това се постига чрез използването на преходи. Намирам тези умения за полезни днес, когато създавам опит и истории за цифрови инструменти.

Когато проектирам, мисля за фактори, които биха донесли на потребителите страхотно, възхитително преживяване с преходи и разказване на истории.

За да може един продукт да предложи на потребителите си приятно изживяване, той трябва да предложи повече от естетически приятен дизайн и впечатляващи анимационни ефекти.

Независимо дали продуктът е базиран на приложения, уеб базиран или някаква друга форма на дигитален продукт, той трябва да привлече потребителите, да им е приятно за използване и да им даде възможност да се занимават с него по пряк и смислен начин. начин.

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

Какво са те? Защо е полезно за потребителското изживяване? Защо дизайнерите и разработчиците трябва да ги включват в работата си? Как могат екипите за дизайн на продукти да работят заедно, за да ги подобрят?

Какво представляват микро-взаимодействията и защо трябва да се грижим за тях?

Какво представляват микро-взаимодействията или потребителските интерфейси? Хората често ги наричат ​​доста анимации, графики за движение или дизайн на движещи се изображения. Те обаче са много повече от това.

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

Ако вържем това обратно към принципите на добрия дизайн на системите, това подобрява и дава възможност за обратна връзка за потребителя. Ако се прави правилно, потребителите ще приемат микро взаимодействията като съобщение от потребителя, че той (системата) прави това, което трябва да прави в отговор на това, от което се нуждае потребителят.

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

Въпреки че тези „действия“ имат различни форми, някои общи примери включват:

  • Когато "преместим" артикул във виртуална количка за пазаруване.
  • Когато избираме между две опции на бутон за превключване, подобен на CTA.
  • Когато се „изтеглим“, за да опресним емисиите на новини и да видим най-новата актуализация.
  • Когато „превъртаме нагоре и надолу“ в дълъг канал или страница.

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

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

Има три принципа, които винаги вземам предвид при проектирането на микро взаимодействия.

  1. Непрекъснатост (и тънкост)

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

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

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

3. Трансформируемост

Течните преходи между множество екрани и добре дефинираните трансформации на различните обекти в тях са ключови аспекти на качествените микро взаимодействия. Те дават възможност на потребителя да развие интуитивно разбиране на връзките между екраните и елементите в тях.

Когато са проектирани следвайки тези принципи, микро взаимодействията осигуряват контекст за дизайн, като помагат на потребителите да знаят как да взаимодействат с него. Микро взаимодействието е моментно събитие, което завършва една-единствена задача. Вероятно най-малките интерактивни елементи на уебсайт или дизайн на приложения, микро взаимодействията са едни от най-жизненоважните, тъй като те обслужват различни основни функции.

Тригерите (докосване, прекарване на пръст, плъзгане и др.) Инициират всяко едно от действията, изброени в горния раздел (непрекъснатост, предвидимост и трансформируемост). Потребителят извършва действие на уебсайт или приложение за стартиране на процеса (дори ако той продължава след първоначалната стъпка). Това следва модел на призив за действие от потребител, правила за ангажиране, определени от интерфейса (какво ще се случи и как), обратна връзка от потребителя (работи ли или не) и модели или контури (прави ли действието случват се веднъж или се повтарят по график).

-Как разработчиците и дизайнерите могат да работят заедно, за да върнат микро-взаимодействията в живота

Както можете да видите, микро-взаимодействията имат критична роля при формирането на потребителското изживяване. Поради това те станаха все по-важна част от работата ми като дизайнер на продукти. Работейки върху различни проекти в множество платформи и приложения, забелязах, че не всеки разпознава стойността на тези елементи или как да ги създаде ефективно. По-важното е, че често членовете на екипа не знаят как да изразят идеите си един към друг относно проектирането на преходи и микро взаимодействия.

Разбрах, че всичко се свежда до комуникация - нещо се изгуби в превода, когато обясних идеите си за дизайн на моите разработчици. Може би сте чували този цитат от Конфуций и преди: „Кажете ми и аз ще забравя. Покажете ми и може би си спомням. Включете ме и ще разбера. ”И именно чрез участието ние, като екип от дизайнери и разработчици, създаваме страхотни преживявания.

Първо, нека да преминем през кратко описание на процеса на проектиране ...

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

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

Но какво ще стане, ако процесът на проектиране не играе на практика, както на теория? Какво става, ако представяме табло или непълен модел? Или някой друг от екипа проектира модела?

Когато това се случи, има вероятност да възникнат проблеми при представяне или развитие. Тези проблеми обикновено попадат в една от трите категории:

  1. Идеята за анимация не се съобщава достатъчно ясно.

Ако се опитвате да опишете анимационна концепция с думи или неподвижни изображения, може да видите гримаси по лицата на вашата аудитория. Това означава, че се опитват да разберат идеята ви, но всъщност не я реализират. Дори и да разберат основната концепция, картината, която са си представили в ума, вероятно не съответства на това, което предвиждате. Тъй като хората са склонни да възприемат движещи се изображения, неподвижни изображения и словесни описания по различни начини, разчитането на думи или изображения за предаване на идеята за анимация създава място за неправилно общуване и често излишно напрежение сред членовете на вашия екип.

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

Когато дизайнерите нямат умения за създаване на прототипи, те се ограничават до представяне на идеите си пред разработчиците чрез табло. Дори ако дизайнерът силно вярва в модела на микро-взаимодействие, той или тя не може да каже дали работи до пълния си потенциал, докато разработчикът не завърши прототипа. Това е проблематично по редица причини, като основната от тях е високата вероятност от неправилно общуване, което подобен подход въвежда в процеса. В допълнение, тя отваря вратата за съмнение от членовете на екипа и води до въпроси относно осъществимостта на идеята. Това може да бъде скъпо от гледна точка на времето от гледна точка на развитието.

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

Когато дизайнерите правят UI анимации или микро взаимодействия, те се опитват да включват сложни детайли на дизайна като персонализирани облекчения, скриптове, изрази и други ефекти. Когато представят тези идеи на разработчиците, те могат да чуят: „Не е възможно да се направи това в нашата времева линия“ или „Не можем да го направим точно така, но ще се опитаме.“ В този момент те могат да се опитат да направят хеш посочете различните детайли и технически проблеми с разработчиците. Тези дискусии обаче могат да се окажат безрезултатни, ако дизайнерът няма познания за работата на инструментите или езиците, които разработчиците използват. Тези фактори трябва да бъдат взети под внимание при формулирането и обсъждането на идеи, така че микро взаимодействията да са съвместими с настройките по подразбиране на разработчиците, увеличавайки вероятността крайният продукт да отговаря на дизайнерските (и на всички останали) стандарти.

Какви са някои решения на тези проблеми?

Въпреки че всички дизайнери и разработчици имат свой начин на комуникация относно своите анимационни концепции, искам да споделя един от методите, които моят екип използва. Този метод е доста успешен и доведе до по-малко срещи и драстично подобри комуникацията на нашия екип.

Сега вече не спорим дали да включим или не микро-взаимодействия, проучваме начини да ги направим още по-добри!

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

„Концепцията за взаимодействие с скелет и ръководството за взаимодействие не оставя място за интерпретация, което ми позволява да започнем работа незабавно и да бъда уверен в съответствието на визията на дизайнера.“ - Джес М Майчер / Водещ IOS инженер

Стандартният процес, който използваме, за да комуникираме за UX дизайни, не превежда добре за UI анимации. Първо, UX дизайните и потоците все още са проектирани екран по екран и са статични. UI анимациите са потоци сами по себе си, те са течни и се основават на времето. Когато създаваме статичен дизайн, правим груба телена рамка, за да можем да разберем идеята и да обсъдим потока. Това ни позволява лесно да преразгледаме и прецизираме дизайна, преди да създадем окончателната версия. След като всеки член на екипа се съгласи, че дизайнът е готов да предаде на разработчиците, дизайнерът предоставя на разработчика ръководство за стил и червена линия, съдържаща подробности, спецификации и друга важна информация за дизайна.

Ако използвахме подобен процес за анимации, процесът ни може да е много по-бърз и по-добър.

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

Концепцията за взаимодействие с скелет е подобна на телената рамка, която бихте създали при проектирането на потока, основната разлика е, че това е демонстрация на прототип за възпроизвеждане / кликване. Ако доведем това до среща, членовете на нашия екип няма да трябва да използват въображението си, за да разберат концепцията. Дизайнерът може да използва демонстрационната или статична дъска за игра, която може да се играе / може да се насочи директно към визуалните и анимационни елементи на дизайна. Това ще даде на всеки ясен и точен смисъл на неговата / нейната идея. От своя страна, партньорите могат да предоставят обратна връзка, която е силно специфична и, следователно, много ценна за дизайнера. В същото време екипите за управление и разработване на продукти ще получат информация, която ще им позволи да подобрят своите вътрешни комуникации и времеви оценки за проекта.

2. Ръководство за взаимодействие

След като екипът се съгласи на концепцията, дизайнерът създава ръководство за взаимодействие. Това е подобно на ръководството за стил по това, че очертава позицията, въртенето, мащаба и времето на елементите. Можем да добавим всеки детайл относно анимациите, което ще помогне на нашите партньори да го разберат ясно. Когато дизайнерът покаже ръководството за взаимодействие на партньорите си, той или тя може да бъде още по-ясно относно движението и измерването на анимационната концепция. Това е много полезно за финализиране на работата чрез сътрудничество. Освен това помага на дизайнерите да бъдат по-внимателни в дизайна си за анимация / микро взаимодействие.

3. Умения за създаване на прототипи за дизайнери

Според моя опит, за да се настроите за успешно сътрудничество в дизайна, продуктовият дизайнер трябва да бъде двигателят на анимацията, а разработчикът трябва да осигури поддръжката. Това означава, че продуктовият дизайнер носи по-голямата част от отговорността в партньорството. Те не само са отговорни за обяснението на идеите си много ясно, но и трябва да покажат, че са изпълними, като предоставят доказателство за концепция. Това също означава, че дизайнерите на продукти трябва да могат да създават свои собствени анимационни прототипи. Ако дизайнерът на продукти може да създаде прототип и да го представи по време на среща, следващата дискусия ще бъде по-ясна и по-малко отнемаща време, което ще доведе до цялостно по-ефективен комуникационен процес.

И така, с какви видове инструменти за създаване на прототипи дизайнерите трябва да се запознаят? Има много инструменти там, но не всеки знае какво работи най-добре за конкретни задачи за микро взаимодействие. Ето моите препоръки въз основа на моя личен опит с проектирането на тези елементи.

Ако сте запознати с кодирането:

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

Ако искате да проектирате взаимодействие между екранен бутон и модул:

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

Ако искате да създадете по-подробни взаимодействия:

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

Ако искате да създадете подробни взаимодействия + анимация:

  • След ефекти

В момента съм почитател на използването на After Effect за моето прототипиране. Дори и да не е интерактивен (т.е. с възможност за кликване), това е идеалният начин да представите концепция за анимация. Освен това няма ограничение на ефекта и вие сте в състояние да контролирате движението на детайлите. Възможно е дори да го използвате за осъществяване на взаимодействие в 3D пространство, например за AR и VR.

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

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

За да настроите микро-взаимодействията си за успех, уверете се, че вашият екип притежава тези характеристики и се ангажира с тези процеси. И късмет с вашето собствено пътуване за микро-взаимодействие!

ИЗЛОЖЕНИЕ ЗА ОТКРИВАНЕ: Тези мнения са на автора. Освен ако не е посочено друго в този пост, Capital One не е свързана с нито една от споменатите компании. Всички използвани търговски марки и друга интелектуална собственост са собственост на съответните им собственици. Тази статия е © 2017 Capital One.

За повече информация за API-тата, отворения код, събитията в общността и културата на разработчици в Capital One, посетете DevExchange, нашия портал за разработчици на едно гише: developer.capitalone.com.