Microinterakcie, časť druhá: Tvorba



Takmer rok a pol dozadu som začal prvý seriál na tomto blogu o mikrointerakciách. Bol to najmenej úspešný článok, aký som kedy publikoval (návštevnosť voči času na stránke). Už som v ňom nechcel pokračovať. Tento blog je mojím poznámkovým blok(g)om, a preto svoje pôvodné úmysly úplne nekonzistentne ignorujem a budem pokračovať v tomto seriáli aj napriek nepriazni čísel. Pôvodne mal mať dve časti: prvá tzv. "microcopy" a časť druhá zameraná na tvorbu.


Takto som mikrointerakcie popísal naposledy:
Mikrointerakcie sú malé detaily vyrobené pre potešenie. Sú to tie detaily, ktoré vyčarujú úsmev na tvári, pri ktorých si v duchu poviem: „Paráda!“ A ak si nič nepoviem, vždy som rád, že tam sú. Sú to používateľské scenáre, určené pre jednu jedinú vec, ktorú robia naozaj dobre.
Pri tvorbe mikrointerakcií mi rezonujú v hlave tieto slová: "pre potešenie", "som rád, že tam sú", "jeden účel a poriadne". Rád sa nad mikrointerakciami zamýšľam spôsobom, že nijako neovplyvnia hlavný používateľský cieľ (t.j. makro). Sú to skvelé detaily produktov, ktoré nemusíme spomenúť v sekcií "features". Dizajn mikrointerakcií môže prebehnúť aj v neskoršej fáze návrhu produktov. Vo väčšine prípadov takto prilepované dizajnové elementy nedopadnú dobre a často smerujú k "feature creep". Pri mikrointerakciách je to inak. Nikdy ich nie je dosť.
Mikrointerakcie vytvárajú momenty, ktoré nie sú nevyhnutné, ale stelesňujú podstatu UX: priniesť potešenie z používania služby alebo produktu.




Dan Saffer vo svojej knihe venovanej mikrointerakciám rozdeľuje ich proces tvorby na štyri hlavné časti:
  1. Spúšťače (angl. triggers)
  2. Pravidlá (angl. rules)
  3. Spätná väzba (angl. feedback)
  4. Cykly a módy (angl. loops & modes)
Spúšťače (1.) majú byť prvým krokom používateľa pri mikrointerakcií. Pre dizajnéra sú to jednoznačne pravidlá (a cieľ, 2.), lebo definujú problém, jeho rozsah a komplexnosť. Nie jeho riešenie.

Poznámka: Ak vás teória nezaujíma, celú časť o pravidlách, spúšťačoch, spätnej väzbe a cykloch preskočte rovno na riešenia z praxe v časti "UX riadené mikrointerakciami".

Pravidlá a cieľ

Každá mikrointerakcia musí mať schému, model, podľa ktorého sa riadi. Tento model je súhrnom pravidiel a musí byť veľmi ľahko čitateľný. Používatelia by mali byť schopní vytvoriť si mentálny model mikrointerakcie veľmi jednoducho a bez minimálnej pochybnosti. No a pohonom pre vytvorenie takéhoto modelu je stanovenie cieľov.

Cieľ má byť finálny a nie medzikrok nejakého procesu. Napríklad, cieľom mikrointerakcie pre diktovanie textu na mobilnej klávesnici nie je nadiktovať text, ale jeho správne vloženie do políčka, kde píšeme.



Podľa Saffera pravidlá stanovujú toto:
  • Ako odpovedá mikrointerakcia na spúšťač? (viacej v časti o spúšťačoch)
  • Akú má používateľ kontrolu nad interkaciou?
  • Aká je postupnosť krokov v čase?
  • Aké dáta / informácie / zdroje interakcia vyžaduje a odkiaľ? aké dáta môžem zbierať?
  • Aké sú používateľove vstupy? Aké sú štandardné voľby (angl. "defaults")?
  • Aké môžu nastať chyby? Ako ich opraviť?
  • Aké algoritmy interakcia využíva?
  • Akú spätnú väzbu viem poskytnúť a kedy ju poskytnúť? (viacej v časti spätná väzba)
  • Ako často sa interakcia opakuje? (viacej v časti o cykloch)
  • V akom stave sa mikrointerakcia nachádza? V akom používateľ? Čo sa stane, keď interakcia skončí? (viacej v časti o módoch)
Všetky tieto otázky pomáhajú pri tvorbe mikrointerakcií: Odpovedaním na ne sa mi vždy vyjaví niekoľko možných riešení tam, kde riešenia nie sú nevyhnutné, ale určite by ich každý privítal. Pár pomôcok, ako uspieť v tvorbe pravidiel mikrointerakcií:
Nezačínaj od nuly! Vždy existuje niečo, od čoho sa možno odraziť.


Ak nastane niekde chyba, porozmýšľaj, či sa nedá opraviť automaticky!


Prenes dáta dopredu, ale zároveň zjednodušuj komplexnosť!


Motiváciu pre tvorbu mikrointerakcie odôvodni biznis-cieľom a používateľským cieľom, obe s rovnakou váhou!


Spúšťače

Manuálne - spustené priamou interakciou (teda sami sme zodpovední, kedy sa spustia). Napríklad známe "Potiahni pre obnovenie" (angl. pull to refresh), "Potiahni pre odomknutie" (angl. slide to unlock), alebo jednoducho akýkoľvek interaktívny prvok (tlačidlo, prepínač, odkaz).

Neviditeľné - manuálne spúšťače bez "affordance", t.j. ilustrácie interakcie. Dozvieme sa o nej len vďaka náhode, alebo nám o nej niekto povie a pod.). Napríklad tzv. skrytá funkcionalita, skryté vlastnosti (angl. "easter eggs"), gestá, hlasové povely. Dobrý príklad je vymazanie dočasnej pamäte v Chrome pri pravom kliknutí na obnovenie stránky, alebo Photoshop a "Uložiť pre Web..." + [ALT]:



Systémové - spustené bez priamej interakcie, na základe nejakej podmienky (teda ich nemôžme ovplyvniť). Napríklad zvuk, ktorý sa prehrá pri prijatí správy, spustení počítača a pod.

Spätná väzba

Každý krok navrhnutý v pravidlách by mal nejako naznačiť, čo sa deje. Neskôr možno prefiltrovať, ktoré zo spätných väzieb nie je potrebné zobraziť, aby ich nebolo až príliš veľa. Štandardne sa jedná o spätnú väzbu:
  • po manuálnom spúšťači ("Aha, niečo som urobil!")
  • po systémovom spúšťači, ak radikálne ovplyvnil systém (alebo mikrointerakciu samotnú) ("Aha, niečo sa stalo samo!")
  • po porušení pravidiel ("Aha, niečo som spravil nečakane!")
  • po systémovej chybe alebo zmene ("Aha, niečo sa pokazilo / začalo / skončilo!")
  • počas procesu ("Aha, niečo sa deje!")
Kanál pre spätnú väzbu je vizuálny (animácia, farebnosť, škálovanie...), zvukový (angl. "shwoosh" pri odoslaní emailu na OSX) alebo haptický (vibrácia, odpor tlačidiel, ovládača a pod.). Interakcia s manuálnym spúšťačom takmer vždy vyžaduje vizuálny kanál pre spätnú väzbu.



Spätná väzba môže byť občas prehnaná a preto ponúkam zopár pômôcok pri jej tvorbe:
Menej je viac - zvoľ dostatočný, ale nie prehnaný spôsob, ako upozorniť používateľa!


Hovor ľudsky a premysli si, či je spätná väzba naozaj potrebná!


Absolútne zrejmé riešenia vždy vyhrajú. Staň sa Captain Obvious!


Cykly a módy

Módom sa treba vo všeobecnosti vyhýbať. Ľudia s nimi majú problémy a nielen v digitálnom svete. Vo svete mikrointerakcií hovoríme o funkcionalite, ktorá sa nám zjaví na základe nejakého pravidla. A zostaneme uväznený v tejto vetve daného pravidla až do:
  1. konca interakcie (jednorazovo, tzv. kvázi-módy), napríklad: stlačenie "SHIFT" na klávesnici
  2. manuálneho ukončenia módu (dlhodobo), napríklad: "Ok Google!" na Androide
Nekonečné módy musia byť nejakým spôsobom načasované (napríklad po "Ok Google!" sa po čase samé vypne). Na to slúžia cykly. Sú limitované počtom cyklov ("FOR"), podmienkou ("WHILE"), alebo nie sú limitované vôbec.
Všimli ste si na Facebooku tieto nenápadné správy, že pred niekoľkými rokmi ste zdieľali nejaký obrázok? To je dlhodobý cyklus mikrointerakcie a veľmi dobre premyslený dizajnový ťah (čo sa dialo takto pred rokom?). Rovnako všetky na mieru ušité odporúčania tovaru sú dlhodobé cykly. Viac o dlhodobých cykloch napísali v Adaptive Path.



Pomôcky pri návrhu a tvorbe cyklov a módov:
Pri dlhých cykloch si daj pozor na rozklad UX po čase!

Ak sa dá, vyhni sa módom! Módy sú zlé, okej?


UX riadené mikrointerakciami

V našej agentúre tu vo Vancouveri riešime UX na úrovni mikrointerakcií - optimalizácia konverzií je zameraná na zlepšenie čiastočných procesov. Najjednoduchšia a zároveň často najúčinnejšia zložka z persuazívneho dizajnu je využitie spolupatričnosti, tzv. sociálny dôkaz (angl. "social proof"). Pridanie vierohodného čísla je vždy skvelým zlepšením pre konverzie.


Ďalšou otestovanou a zároveň jednoduchou fintou je znefunkčnené tlačidlo pre odoslanie formulára až do momentu, keď je všetko vyplnené. Táto mikrointerakcia je ale zložitejšia, ako by sa mohlo zdať. Je dôležité uviesť, prečo je tlačidlo znefunkčnené a ako to napraviť. Sledujúc pravidlá spomínané vyššie odhalíme mnoho ďalších malých doplnkov, ktoré bude nutné nejakým spôsobom zapracovať, aby bola mikrointerakcia dokonalá. My sme to nespravili a nami navrhnuté mikrointerakcie napokon nedopadli najšťastnejšie (ani v jednom prípade).


Ďalšou mikrointerakciou, ktorú štandardne navrhujem na B2B stránky je kontaktný formulár, ktorý vám povie, či je kancelária otvorená práve v túto chvíľu, alebo nie. Tlačidlo väčšinou umiestnim blízko tváre osoby, s ktorou bude obchodný hovor prebiehať. Opäť dávam do pozornosti, že to nie je tak jednoduché, ako to vyzerá a vždy je za mirkointerakciou dosť technickej, prípadne dizajnérskej práce.


Skvelé miesto na instantnú nečakanú srandu je na konci rôznych sekundárnych konverzií (napríklad prihlásenie na odber noviniek). Jedná sa o stránku s poďakovaním a tá garantuje vysokú mieru záujmu. Tak prečo v pôžitku nepokračovať aj ďalej? Tak napríklad: ak je potrebné verifikovať email, vieme predpokladať, aké budú ďalšie kroky...


Súčasťou prvého zážitku z digitálneho produktu sú všetky nečakané stavy (tzv. defenzívny dizajn). V prípade prázdnych obrazoviek skôr známych ako "empty / blank state" je práve predpoklad ďalšieho kroku tým správnym riešením. Prvý príklad je aplikácia Inbox od Google a druhý je trochu nedotiahnutý (nepamätám si z akej aplikácie). Vyzýva do akcie, ale chýba mu možnosť, ako tú akciu vykonať zo súčasnej obrazovky...


Medzi ďalšie nepríjemné zážitky z defenzívneho dizajnu patrí napríklad známa webová chybová stránka 404. Na nej je takmer nevyhnutné komunikovať priamo (aby každý vedel, že skončil na nesprávnom mieste) a v súlade s nastaveným "tónom" komunikácie. O správnom postupe pri riešení chýb v UX som písal v článku "Tvoja vina".


Do tretice v oblasti "bolestivých" stavov sú formuláre. Chybové hlásenia sa dajú zľahčiť práve trefnou komunikáciou.


Medzi drobnosti zamerané na lojálnosť patria aj easter eggs (viď neviditeľný spúšťač o kus vyššie). Sú to detaily, ktoré je niekedy ťažké odhaliť pokiaľ neviem, čo hľadať. Z amerického veľkonočného hľadania vajíčok je odvodený dnes už "terminus technicus" pre plánovane skrytú funkcionalitu: Prázdne hľadanie na Google play zobrazí jednorožce a google.com vie odpoveď na život, vesmír a tak všetko.


Lojálnosť je dlhodobá a ťažko overiteľná veličina, ale kontextuálna reklama a overenie jej účinnosti je hračka. Takto to robí Basecamp, ak rozšírite a zmenšíte okno prehliadača.


Rovnako dobrú reklamu svojmu HR robí vimeo.com:


Veľa produktových dizajnérov mikrointerakcie podceňuje a nevidí v nich "biznis" hodnotu. Máloktorí si uvedomujú to, že pridanie nových funkcií (angl. features) môže byť menej dôležité pre biznis, ako pridanie správne navrhnutých mikrointerakcií (napríklad: príjemný registračný proces, alebo zotavenie sa z chýb pri nákupom procese). Optimalizácia týchto kľúčových momentov pridaním mikrointerakcií môže mať prínos nielen pre konverzie, ale najmä pre lojálnosť zákazníka.

Skvelé príklady mikrointerakcií zbiera Saffer na svojej stránke littlebigdetails.com a celkovo tému dobre zhrnul v prezentácií na slideshare. Schému na tvorbu mikrointerakcií pripravili študenti zo SCAD pod taktovkou prof. M. Felixa.



0 komentárov :

Zverejnenie komentára