Pohyb a mikrointerakce

Tato část je zaměřena na pohyb a mikrointerakce. Přidáním pohybu a mikrointerakcí můžeme naše webové stránky nebo aplikaci trochu oživit.

Pohyb

Přidáním pohybu můžeme občas zlepšit uživatelský zážitek z navštívení našich webových stránek nebo aplikace. Můžeme například vytvořit přechod z jedné stránky na druhou (pokud děláme single page aplikace), přidat animaci při zobrazení obrázku po kliknutí na něj, a tak dále. Měli bychom ale být s pohybem opatrní a nepřidávat jej úplně všude. Tím bychom uživatelský zážitek z používání webových stránek nebo aplikace spíš zhoršili. Pohyb by neměl být příliš rozptylující.

Pohyb je obzvlášť dobrý pro prevenci dezorientace uživatelů. V následují ukázce pohyb uživateli pomáhá nezapomenout, kterou kartu měl otevřenou naposled.

Algoritmy a Datové Struktury v JS

navštívit

Návrhové vzory v JS

navštívit

Album Image Finder

navštívit

MySQL Tahák

navštívit

Hodně designérů nechává přidání pohybu až na konec. To už ale občas nejde aniž by bylo nutné nějaké věci předělat. Proto bychom na něj měli začít myslet dříve při našem návrhu. Návrh pohybu je ale také často časově náročný, takže si musíme ujasnit, jestli nám to za to vůbec stojí. U webových stránek jej často ani moc nepotřebujeme, možná spíš u webových aplikací.

Mikrointerakce

Mikrointerakce jsou takové menší animace, které se spustí, když uživatel provede nějakou akci. Jako ukázku jsem tu přidal tlačítko, na které když kliknete, tak se spustí animace nahrávání.

Struktura mikrointerakcí

I když mikrointerakce představují v podstatě jen menší animace, mají strukturu. Při spuštění mikrointerakce probíhají tyto kroky:

1. Trigger: uživatel provede nějakou akci
2. Rules: určí se co se má stát (něco se má vyplnit, něco schovat, atp.) - uživatel to nevidí, jsou to jen pravidla
3. Feedback: uživateli se zobrazuje něco, co jej informuje o tom, že mikrointerakce probíhá
4. Loops + Modes: některé mikrointerakce se různě mění nebo opakují, například podle toho, jak akci uživatel provádí

Proč jsou mikrointerakce důležité

Mikrointerakce nám mohou připadat jako malé detaily. Tyto detaily ale mohou mít velký vliv. Díky mikrointerakcím může být používání našich webových stránek nebo aplikace o něco zábavnější. Také díky nim uživatel získá více zpětné vazby když provede nějakou akci a pomáhají předcházet chybám. Mikrointerakce můžeme použít třeba i pro validaci v registračním formuláři. Než abychom čekali až uživatel formulář odešle, tak mu již v průběhu jeho vyplňování můžeme kontrolovat jestli zadává správné údaje a informovat jej o tom.