Oživte mikro-interakce a animace uživatelského rozhraní prostřednictvím spolupráce mezi vývojáři a designéry

Prostřednictvím mikrointerakce a animace uživatelského rozhraní můžeme uživatelům vytvořit skvělý zážitek!

Ahoj, jmenuji se Kyo Kim a pracuji jako produktový designér v Capital One asi dva roky. Během své práce jsem používal mikro-interakce a animace, včetně některých mobilních projektů, které jste sami použili. Než jsem začal pracovat v technice, moje pozadí bylo ve filmu. Ve filmu je vše zaměřeno na vyprávění příběhů a editaci příběhu, který zaujme publikum; a hodně z toho je dosaženo pomocí přechodů. Tyto dovednosti považuji za užitečné dnes, když vytvářím zkušenosti a příběhy pro digitální nástroje.

Když navrhuji, přemýšlím o faktorech, které by uživatelům poskytly skvělý a příjemný zážitek s přechody a vyprávěním.

Aby produkt mohl svým uživatelům nabídnout příjemný zážitek, musí nabídnout více než esteticky příjemný design a působivé animační efekty.

Bez ohledu na to, zda se jedná o produkt založený na aplikaci, na webu nebo o jakoukoli jinou formu digitálního produktu, musí uživatele přilákat, být pro ně zábavný, a dát jim možnost se s ním přímo a smysluplně zapojit způsob.

Mikrointerakce mají schopnost zajistit, aby uživatelský zážitek byl příjemný a uspokojivý způsobem, který mnoho konstrukčních prvků nemůže. Než se dostaneme do mikrointerakcí v souvislosti s návrhem produktu, začneme se základními principy.

Co jsou? Proč je to dobré pro uživatelské prostředí? Proč by je měli designéři a vývojáři začlenit do své práce? Jak mohou týmy designu produktů spolupracovat na jejich zdokonalení?

Co jsou mikro-interakce a proč bychom se o ně měli starat?

Co jsou to mikrointerakce nebo UI animace? Lidé na ně často odkazují jako na pěkné animace, pohybovou grafiku nebo návrh pohyblivého obrazu. Jsou však mnohem víc.

Na rozdíl od jiných forem animace, které existují pouze za účelem vytvoření iluze pohybu, mikrointerakce přímo zapojují uživatele, což mu umožňuje provádět celou řadu úkolů a interaktivně a efektivně interagovat s produktem.

Pokud bychom to měli svázat zpět se zásadami dobrého návrhu systémů, zvyšuje to a umožňuje uživateli zpětnou vazbu systému. Pokud bude provedeno správně, uživatelé vezmou mikro-interakce jako zprávu od uživatele, že (systém) dělá, co by měl dělat, v reakci na to, co uživatel potřebuje.

I když nevíte, jaké mikro-interakce jsou, pravidelně s nimi komunikujete. Pokaždé, když používáte aplikaci nebo produkt založený na webu k provedení určitého úkolu - ať už jde o čtení zpráv, nákup, hraní hry, vytvoření profilu nebo úpravu nastavení a preferencí upozornění - každá jednotlivá provedená akce představuje mikro-interakce. Mikrointerakce jsou plynule propojeny do produktové platformy, díky čemuž jsou jejich funkce transparentní a přístupné, což účinně zlepšuje celkový dojem uživatele.

Ačkoli tyto „akce“ mají řadu různých podob, některé běžné příklady zahrnují:

  • Když „přesuneme“ položku do virtuálního nákupního košíku.
  • Když vybereme mezi dvěma možnostmi na přepínacím tlačítku podobném CTA.
  • Když „zatáhneme“, obnovíme zdroj zpráv a uvidíme nejnovější aktualizaci.
  • Když „posouváme nahoru a dolů“ v dlouhém zdroji nebo na stránce.

Když navrhujeme mikro-interakce, musíme prozkoumat, zda je to skutečně nezbytné a životně důležité pro uživatele. V opačném případě má potenciál rozptýlit formu uživatele efektivním používáním produktu nebo se stát vizuálním šumem.

Principy mikrointerakce

Při navrhování mikro-interakcí vždy beru v úvahu tři principy.

  1. Kontinuita (a jemnost)

Prvky mikro-interakce by měly být jemné, takže když uživatel provede akci, bude mít ve své zkušenosti neustálý tok. Pokud například vytváříme posouvající se animaci v dlouhém zdroji, měl by být uživatel schopen soustředit se spíše na obsah stránky než na samotnou posouvající se animaci.

2. Předvídatelnost

Kvalitní mikrointerakce mají prvek předvídatelnosti, který uživateli umožňuje účinně a efektivně procházet produktem. Uživatel může přesně předvídat účinky svých akcí, cítit se pohodlně s jejich zvrácením a být si jistý svou schopností provádět podle očekávání.

3. Transformovatelnost

Přechody tekutin mezi několika obrazovkami a dobře definované transformace různých objektů v nich jsou klíčovými aspekty kvalitních mikro-interakcí. Umožňují uživateli vyvinout intuitivní porozumění vztahům mezi obrazovkami a prvky v nich.

Při návrhu na základě těchto principů poskytují mikrointerakce kontext návrhu tím, že uživatelům pomáhají vědět, jak s ním interagovat. Mikrointerakce je okamžitá událost, která dokončí jediný úkol. Pravděpodobně nejmenší interaktivní prvky designu webových stránek nebo aplikací, mikro-interakce jsou některé z nejdůležitějších, protože slouží řadě základních funkcí.

Spouštěče (klepnutí, přejetí, přetažení atd.) Inicializují každou z akcí uvedených v části výše (kontinuita, předvídatelnost a transformovatelnost). Uživatel provede akci na webu nebo v aplikaci, aby zahájil proces (i když pokračuje po počátečním kroku). Toto se řídí vzorem výzvy k akci od uživatele, pravidly pro zapojení, jak je určeno rozhraním (co se stane a jak), zpětnou vazbou od uživatele (fungovalo nebo ne) a vzory nebo smyčkami (provádí akci) jednou nebo opakovat podle plánu).

- Jak mohou vývojáři a návrháři spolupracovat na oživení mikro-interakcí?

Jak vidíte, mikrointerakce mají rozhodující roli při utváření uživatelského prostředí. Z tohoto důvodu se staly stále důležitější součástí mé práce designéra produktu. Když jsem pracoval na různých projektech napříč různými platformami a způsoby použití, všiml jsem si, že ne každý uznává hodnotu těchto prvků nebo jak je efektivně vytvářet. Ještě důležitější je, že členové týmu často nevědí, jak si navzájem vyjádřit své nápady týkající se navrhování přechodů a mikro-interakcí.

Uvědomil jsem si, že se to všechno proměnilo v komunikaci - něco bylo ztraceno v překladu, když jsem svým vývojářům vysvětlil své návrhové nápady. Možná jste slyšeli tento citát od Konfucia dříve: „Povězte mi, a já zapomenu. Ukažte mi, a možná si pamatuji. Zapojte mě a já to pochopím. “A to je díky zapojení, kde my, jako tým designérů a vývojářů, vytváříme skvělé zkušenosti.

Nejprve si projdeme rychlý popis procesu návrhu ...

V ideální situaci, kdy designér přijde s nápadem na mikrointerakci, postupuje tradiční pracovní postup v tomto pořadí:

  1. Návrhář vyvíjí vizuální prvky a animační efekty potřebné k aktualizaci jeho myšlenky.
  2. Návrhář prezentuje finální model a jeho základní koncepty ostatním členům týmu.

Ale co když se proces navrhování v praxi nehraje, jako to teoreticky? Co když představujeme storyboard nebo nekompletní model? Nebo někdo jiný v týmu navrhuje model?

V takovém případě je pravděpodobné, že nastanou problémy s prezentací nebo vývojem. Tyto problémy obvykle spadají do jedné ze tří kategorií:

  1. Animační nápad není dostatečně jasně sdělen.

Pokud se pokoušíte popsat koncept animace se slovy nebo statickými obrázky, můžete vidět grimasy na tvářích publika. To znamená, že se snaží co nejlépe pochopit váš nápad, ale ve skutečnosti tomu nerozumí. I když rozumí základnímu konceptu, obraz, který vykouzl ve svých myslích, je pravděpodobně v rozporu s tím, co si představujete. Protože lidé mají tendenci vnímat pohyblivé obrazy, statické obrázky a slovní popisy různými způsoby, spoléhají se na slova nebo obrázky, aby zprostředkovali animační nápad, a vytváří tak prostor pro nedorozumění a často zbytečné napětí mezi členy vašeho týmu.

2. Návrhář neví, zda animace funguje dobře, dokud neprovede kontrolu a testování prototypu vývojáře.

Když designéři nemají dovednosti v oblasti prototypování, omezují se na vytváření nápadů vývojářům prostřednictvím scénáře. I když designér pevně věří v model mikrointerakce, nemůže říci, zda pracuje na jeho plný potenciál, dokud vývojář nedokončí prototyp. To je problematické z mnoha důvodů, přičemž primárním je vysoká pravděpodobnost nesprávné komunikace, kterou takový přístup zavádí do procesu. Kromě toho otevírá dveře pochybnostem členů týmu a vede k otázkám ohledně proveditelnosti myšlenky. To může být z hlediska rozvoje nákladné.

3. Návrhář a vývojář nejsou na stejné stránce

Když designéři vytvářejí animace uživatelského rozhraní nebo mikrointerakce, snaží se zahrnout složité detaily návrhu, jako jsou vlastní pomůcky, skripty, výrazy a další efekty. Při předkládání těchto nápadů vývojářům by mohli slyšet: „To není možné udělat v naší časové ose,“ nebo „Nemůžeme to udělat úplně stejně, ale zkusíme to.“ V tomto okamžiku se mohou pokusit hashovat s různými detaily a technickými problémy s vývojáři. Tyto diskuse však mohou skončit neúspěšně, pokud designér nemá pracovní znalosti o nástrojích nebo jazycích, které vývojáři používají. Tyto faktory by se měly brát v úvahu při formulaci a diskusi o nápadech, aby byly mikrointerakce kompatibilní s výchozím nastavením vývojářů, což zvyšuje pravděpodobnost, že finální produkt splní standardy návrháře (a všech ostatních).

Jaká jsou některá řešení těchto problémů?

Zatímco všichni návrháři a vývojáři mají svůj vlastní způsob komunikace o svých animačních koncepcích, chci se podělit o jednu z metod, které můj tým používá. Tato metoda byla docela úspěšná a vedla k méně schůzkám a drasticky zlepšila komunikaci našeho týmu.

Nyní se již nehádáme o tom, zda zahrnout či nezahrnout mikro-interakce, zkoumáme způsoby, jak je ještě vylepšit!

Skeleton Interaction Concept & Interaction Guide

„Koncepce interakce kostry a průvodce interakcemi neponechávají žádný prostor pro interpretaci, což mi umožňuje okamžitě začít pracovat a být si jistý, že se přizpůsobím vizi návrháře.“ - Jesse M Majcher / Lead IOS engineer

Standardní postup, který používáme ke komunikaci o návrzích UX, se u animací uživatelského rozhraní nepřekládá dobře. Za prvé, návrhy a toky UX jsou stále navrženy obrazovky po obrazovce a jsou statické. Animace uživatelského rozhraní jsou toky samy o sobě, jsou plynulé a založené na načasování. Když vytvoříme statický design, vytvoříme hrubý drátový model, abychom mohli pochopit myšlenku a diskutovat o toku. To nám umožňuje snadno revidovat a doladit design před vytvořením konečné verze. Jakmile každý člen týmu souhlasí s tím, že návrh je připraven předat vývojářům, návrhář poskytne vývojáři průvodce stylem a červenou čáru obsahující podrobnosti, specifikace a další důležité informace o návrhu.

Pokud bychom použili podobný postup pro animace, mohl by být náš proces mnohem rychlejší a lepší.

  1. Koncept interakce kostry (studie pohybu)

Koncept interakce kostry je podobný drátovému modelu, který byste vytvořili při navrhování toku, hlavním rozdílem je, že se jedná o demonstrační prototyp, který lze přehrát / kliknout. Pokud to přivedeme na schůzku, členové našeho týmu nebudou muset používat své představivosti, aby pochopili tento koncept. Návrhář může použít hratelnou / kliknutelnou demonstrační nebo statickou desku příběhu k přímému odkazu na vizuální a animační prvky návrhu. To každému dá jasný a přesný smysl pro jeho nápad. Na druhé straně mohou partneři poskytovat zpětnou vazbu, která je vysoce specifická, a tedy vysoce hodnotná pro projektanta. Týmy pro správu a vývoj produktů zároveň získají informace, které jim umožní zlepšit jejich interní komunikaci a odhadnout čas projektu.

2. Průvodce interakcemi

Jakmile tým na konceptu souhlasí, návrhář vytvoří průvodce interakcemi. Je to podobné jako průvodce stylem v tom, že nastiňuje polohu, rotaci, měřítko a načasování prvků. Můžeme přidat všechny podrobnosti o animacích, které našim partnerům pomohou to pochopit jasně. Když designér ukáže svým partnerům průvodce interakcí, může být ještě jasnější, pokud jde o pohyb a měření animačního konceptu. To je velmi užitečné pro dokončení práce prostřednictvím spolupráce. Pomáhá také designérům při promyšleném animování / mikro-interakčním designu.

3. Prototypovací dovednosti pro designéry

Podle mých zkušeností, aby se připravil na úspěšnou spolupráci v oblasti designu, by měl být návrhář produktu ovladačem animace a vývojář by měl poskytovat podporu. To znamená, že tvůrce produktu nese většinu odpovědnosti v partnerství. Nejenže jsou zodpovědní za vysvětlení svých nápadů velmi jasně, ale musí prokázat, že jsou proveditelné předložením dokladu o konceptu. To také znamená, že návrháři produktů musí být schopni vytvářet své vlastní animační prototypy. Pokud designér produktu může vytvořit prototyp a prezentovat jej během schůzky, bude následující diskuse jasnější a méně časově náročná, což povede k celkově efektivnějšímu komunikačnímu procesu.

S jakými prototypovými nástroji by se designéři měli seznámit? Existuje mnoho nástrojů, ale ne každý ví, co funguje nejlépe pro konkrétní úkoly mikrointerakce. Zde jsou moje doporučení založená na mé osobní zkušenosti s navrhováním těchto prvků.

Pokud jste obeznámeni s kódováním:

  • Mobilní: Xcode, Android studio
  • Mobilní nebo web: Framer
  • Web: Animace CSS

Pokud chcete navrhnout interakci mezi obrazovkovým push a modulem:

  • Invision a Marbel

Chcete-li vytvořit podrobnější interakce:

  • Princip, Adobe CC, origami Studio a Pixate

Pokud chcete vytvořit podrobné interakce + animace:

  • After Effects

V současné době jsem fanouškem používání After Effect pro můj prototyping. I když to není interaktivní (tj. Klikatelné), je to perfektní způsob, jak prezentovat koncept animace. Neexistuje také žádné omezení účinku a jste schopni řídit pohyb detailů. Je dokonce možné jej použít k interakci v 3D prostoru, jako u AR a VR.

Skvělé týmové interakce vytvářejí vynikající produkty

Mikrointerakce se staly stále důležitějším - ne-li kritickým - prvkem webu, mobilního designu a další. I když designéři i vývojáři uznávají hodnotu animací uživatelského rozhraní a jsou motivováni je vytvářet, často se snaží účinně a efektivně spolupracovat. Dodání skvělých mikrointerakcí včas vyžaduje silný tým; tyto týmy vyžadují jasné vymezení rolí, efektivní komunikační dovednosti a správné nástroje pro vytváření prototypů pro dané úkoly.

Chcete-li nastavit své mikro-interakce na úspěch, ujistěte se, že váš tým má tyto vlastnosti a zabývá se těmito procesy. A hodně štěstí s vaší vlastní cestou mikro-interakce!

PROHLÁŠENÍ O ZVEŘEJNĚNÍ: Tyto názory jsou názory autora. Pokud není v tomto příspěvku uvedeno jinak, společnost Capital One není spřízněna ani neschválena žádnou z uvedených společností. Všechny použité ochranné známky a jiné duševní vlastnictví jsou vlastnictvím příslušných vlastníků. Tento článek je © 2017 Capital One.

Pro více informací o API, open source, komunitních událostech a kultuře vývojářů v Capital One navštivte DevExchange, náš one-stop developer portál: developer.capitalone.com.