"Nejlepší produkty dělají dvě věci dobře: funkce a detaily. Funkce jsou to, co lidi přitahují k vašemu produktu. detaily jsou to, co je drží tam, "říká Dan Saffer. Důležitost detailů nemůže být příliš zdůrazněna. Podrobnosti umožňují uživatelům milovat nebo nenávidět aplikaci nebo webové stránky. Mikrointerakce jsou ty detaily. Mohou být snadno přehlíženy v celosvětovém designu, ale skutečně drží celý zážitek společně.

V tomto článku vysvětlím, co je mikrointerakce, proč jsou důležité a poskytují některé skvělé příklady.

Co je Microinteraction?

Mikrointerakce jsou jemné momenty zaměřené na dosažení jediného úkolu. Téměř všechny aplikace kolem nás jsou vyplněny mikrointerakcí.

Nejvíce známý příklad mikrointerakce existuje dřív, než byly počítače někdy vynalezeny. Přepínač zapnutí / vypnutí je často prvním uživatelem mikrointerakcí, které se s produktem setká.

Některé další příklady specifických mikrointegrací zahrnují:

  • Oznámení o vibracích společně s ikonou tichého režimu na displeji, když přepnete iPhone na ztlumení.
  • Rozbalovací vzorec vytištění-obnovení. Připojením uživatele touhy najít více obsahu s akcí osvěžení, zkušenost se stává hladší.

pull-down-obnovit-iphone-app-interface-ux-design-ramotion
Obrázek kreditu: Ramotion

  • Tlačítko "jako" v sociálních sítích, které upozorňuje na změny pomocí interaktivních animací. Taková zpětná vazba informuje uživatele o tom, že se nachází v seznamu těch, kteří se o tuto pozici líbili.

poháněný-07032014-cb_2x
Obrázek kreditu: Dribbble

Proč fungují

Stručně řečeno, mikrointerakce zlepšují UX tím, že uživatelské rozhraní vytváří menší stroj a lidské. Mnohokrát přemýšlíme o vzhledu a vnímání a jak se to týká designu. Když přemýšlíme o mikrointerakcích, v podstatě vytvářejí rovnováhu mezi tím, jak uživatelé mají pocit o produktu, službě nebo značce. Mikrointerakce jemně doladí design zaměřený na člověka:

  • Poskytnutí okamžité zpětné vazby - vizuální zpětná vazba apeluje na přirozenou touhu uživatele k potvrzení. Uživatel okamžitě ví, že jejich akce byla přijata a chtějí být potěšeni vizuální odměnou.
  • Chování jako prostředník pro interakci - Mikrointerakce mají sílu povzbuzovat uživatele, aby skutečně komunikovali. Mohou uživatelům řídit, jak pracovat s aplikací.
  • Přináší radost - Mikrointerakce jsou perfektní šanci na trochu nadšení v designu, aniž by se zhoršily hlavní zkušenosti.

Další výhody

Vzhledem k tomu, že mikrointerakce jsou krátké povahy, musí být navrženy pro opakované použití. Dobře navržené mikrointerakce jsou schopny vytvořit:

Zvyknout smyčku

Mikrointerakce jsou klíčovými součástmi smyček pro zvyky. Návyky se vytvářejí, když lidé opakovaně provádějí stejné akce. Typická smyčka se skládá ze tří prvků:

  1. Cue - spouštění, které iniciuje akci
  2. Rutina - V reakci na nápovědu provedete akci
  3. Odměna - Výhoda, kterou získáte z dokončení rutiny, důvod pro dokončení akce

Čím silnější je odměna, tím silnější je zvyk.

Oznámení Facebook o nové žádosti o přátelství je dobrým příkladem smyčky zvyku: červený odznak a bílá ikona ( zkratka ) ukazují, že existuje nová žádost, díky níž uživatel klepne na ikonu ( rutinní ) a zobrazí informace o osobě ( odměně ). Po uplynutí určitého okamžiku uživatelé automaticky kliknou na ikonu, když vidí červený odznak.

Momenty podpisu

Pokud se to udělá dobře, mikrointerakce mohou být momenty podpisu, které zvyšují loajalitu zákazníků. Momenty podpisu jsou mikrointerakce, které byly zvýšené, aby byly součástí značky. Přemýšlejte o tlačítku Facebook Like. Stává se přirozenou součástí rozhraní Facebooku. Pokud Facebook náhle odstraní tuto funkci, uživatelé si to všimnou a budou si myslet, že aplikace je porušena.

Identifikace příležitostí

Součástí krásy mikrointerakcí je, že mohou být vkládány na různých místech kolem jakéhokoli potenciálního účinku. Mikrointerakce jsou dobré pro:

Zvýraznění změn

Mikrointerakce mohou řídit pozornost uživatele . V mnoha případech jsou animace využívány k přitahování pozornosti uživatelů k důležitým informacím (např. Oznámení).

notification_animation03
Image credits: Dribbble

Minimalizace úsilí uživatele

Automatické dokončování je skvělým příkladem mikrointerakce. Typy mají vysoké náklady na interakci; je to náchylná k chybám a časově náročné i při plné klávesnici (a ještě více na dotykovém displeji). Automatické dokončování pomáhá uživateli poskytovat správnou odpověď rychleji a bez typografických chyb. Jak píšete každý dopis, systém provede své nejlepší odhady ohledně slov, které se snažíte najít.

ozdobný
Image credits: fancy.surge.sh

Poskytování zpětné vazby k zobrazení toho, co bylo dosaženo

Mikrointerakce mohou posílit akce, které uživatel provádí. Podle zásady " zobrazit, neříkej" můžete použít animovanou zpětnou vazbu, abyste ukázali, co bylo dosaženo. v Příklad Stripe , když uživatel klepne na tlačítko "Platba", objeví se krátce před tím, než aplikace zobrazí stav úspěšnosti. Animace značky Checkmark umožňuje uživateli pocit, že platbu snadno uskutečnila a uživatelé oceňují takové důležité detaily.

Poskytněte informace o stavu

První heuristický princip použitelnosti Jakoba Nielsena uvádí: systém by měl vždy informovat uživatele o tom, co se děje. Indikátor psaní v chatu je skvělým příkladem mikrointerakcí, které poskytují informace o stavu. Zobrazuje se na obrazovce vašeho kamaráda, když vytváříte zprávu v chatu.

psaní na stroji
Image credits: Dribbble

Ověřte uživatelská data

Jedním z nejdůležitějších a často přehlížených aspektů aspektů návrhu formuláře je zpracování chyb . Lidská přirozenost však dělá chyby a vaše forma pravděpodobně není osvobozena od lidské chyby. Uživatelé se nelíbí, když projdou procesem vyplňování formuláře, jen aby zjistili při podání, že se dopustili chyby. Toto je místo, kde validace mikrointerakcí hraje, že je součástí uživatelsky přívětivé formy. Validace v reálném čase okamžitě informuje uživatele o správnosti poskytnutých dat. Tento přístup umožňuje uživatelům opravit chyby, které zrychlují, aniž by museli čekat, až stisknou tlačítko Odeslat, aby zobrazily chyby. Když to uděláte správně, může to být jednoznačná interakce.

form_validation

Kredity: Dribbble

Závěr

Návrh je v detailech. Dokonce i drobné detaily si zaslouží velkou pozornost, protože všechny tyto malé momenty vytvářejí pocit, shromažďují se a vytvářejí krásný holistický produkt.

"Rozdíl mezi produkty, které milujeme, a ty, které jednoduše tolerujeme, jsou často mikrointerakcí, které s nimi máme." - Dan Saffer

Pokud vám záleží na zkušenostech uživatelů, musíte se o mikrointerakce starat. Protože váš produkt je jen tak dobrý jako nejmenší mikrointerakci, kterou lidé s ním mají.