4 způsoby použití funkční animace v návrhu UI
Před pouhým desetiletím se vyhnuli uživatelským rozhraním, které používají animace, nejčastěji spojené s vyskakovacími okny a blikajícími reklamami, ale to se změnilo. Dnešní detaily interakčního designu a animace zásadně ovlivňují moderní webové stránky a moderní aplikace. Tento posun myšlení je jasně vyjádřen v prohlášení Zurb:
Již neprojevujeme statické obrazovky. Navrhujeme způsob, jakým uživatel získá z těchto obrazovek skutečný obsah.
Chceme-li navrhnout lepší digitální produkty, musíme od samého začátku obejmout interaktivitu aplikace a webových stránek.
Proč animace funguje
Pohyb má svou povahou nejvyšší úroveň v uživatelském rozhraní. Ani kopírování textu, ani statické obrázky nemohou konkurovat pohybu. Naše oči jsou pevně propojené s pozorováním pohyblivých objektů - je to téměř reflex. Tuto funkční animaci můžeme využít.
Co je to funkční animace?
Funkční animace je jemná animace vložená do uživatelského rozhraní jako součást funkčnosti tohoto návrhu. Má velmi jasné a logické účely:
- Snižte kognitivní zátěž
- Zabraňte změnám slepoty
- Vytvořte lepší vzpomínku v prostorových vztazích
V konceptu orientovaném na člověka, kde je uživatel hlavním zaměřením, musí být uživatelské rozhraní intuitivní, citlivé a lidské. Funkční animace vám pomůže dosáhnout těchto cílů.
Jak funkční animace zlepšuje UX
Naše zkušenosti a dojem z aplikace nebo webu jsou ovlivněny kombinací faktorů, přičemž interakce hraje zásadní roli. Přidání pohybu do našeho návrhu může být smysluplné a funkční, když najdeme správné okolnosti. Dobře promyšlená a testovaná funkční animace má potenciál splnit několik funkcí, včetně:
1. Vizuální zpětná vazba
Dobrý design interakcí poskytuje zpětnou vazbu. Zpětná vazba potvrzuje, že systém přijal akci uživatele a demonstruje výsledek interakce, zda byl úspěšný nebo ne. Animace v této skupině musí být velmi jemná a měla by být navržena citlivě.
Zpětná vazba tlačítka
V reálném životě tlačítka reagují na naši interakci a tak očekáváme, že věci budou fungovat. Aby bylo možné předvídat uživatelské rozhraní, mělo by se jednat stejným způsobem.
Zdroj: Jaron Pulver
Zobrazení výsledku akce
Postupujte podle principu , neříkejte , můžete použít animovanou zpětnou vazbu, abyste zdůraznili, že se něco pokazilo. Například vizuální posun animace při nesprávném zadání hesla. Je to jako třesoucí se hlavy, jako by říkala "ne, zkuste to znovu". Uživatel si všimne animace a okamžitě rozumí aktuálnímu stavu.
Můžete také posílit akce, které uživatel provádí. V níže uvedeném příkladu, když uživatel klepne na tlačítko Odeslat, krátce se objeví spinner předtím, než aplikace zobrazí stav úspěšnosti. Animace zaškrtnutí způsobí, že uživatel pocítí úspěšné dokončení procesu.
Obrázek kreditu: Colin Garven
2. Zmírnění změn státu
Další dobrá místa pro přidání animace v designu jsou momenty změn. Stavové změny v uživatelském rozhraní, zejména na webu, často zahrnují těžké škrty, které mohou ztěžovat jejich sledování. Nic se necítí více nepřirozené než náhlá změna. Náhlé změny v rozhraní jsou pro uživatele obtížné zpracovat. Tyto okamžiky změny by měly být změkčeny přidáním nějaké animace uživatelskému rozhraní.
Vytváření připojení
Animované přechody by měly působit jako prostředníci mezi různými stavy uživatelského rozhraní a pomáhat uživatelům pochopit, co se děje při změně stavu obrazovky. Uživatel jednoduše sleduje pohyb a porozumí tomu, jak jsou tyto dvě uživatelské stavy příbuzné.
Image credits: Anish Chandran
Také funguje dobře při přidávání zobrazení miniatur a detailů:
Karta se od svého původního postavení zdokonaluje do pozic v modálu, takže je jasné, že je to stejná položka, jen s více detaily.
Image credits: Charles Patterson
Pozor na změny
Animace může pomoci tomu, aby oko vidělo, odkud se objevuje nový předmět na jeho odhalení nebo kde se skrývá nějaký skrytý objekt, a může být znovu nalezen. Můžeme jej použít k upozornění na změny, které skrývají nebo odhalují informace, například otevírání bočních zásuvek obsahu. V níže uvedeném příkladu hlavní navigace se po kliknutí na ikonu hamburgeru stává mimo cestu. Tento pohyb vás informuje, že hlavní nabídka nezmizí.
Image credits: Tamas Kojo
3. Viditelnost stavu systému
Jako jeden z původních 10 heuristik Jakoba Nielsena pro použitelnost zůstává viditelnost stavu systému jedním z nejdůležitějších zásad v návrhu uživatelského rozhraní. Pro uživatele je velmi důležité znát a porozumět aktuálnímu kontextu systému v daném okamžiku.
Indikátory pokroku
Procesy nahrávání a stahování dat jsou skvělými příležitostmi pro funkční animaci. Animované zatěžovací lišty určují, jak rychle bude akce zpracována. Animace může být užitečná v případě selhání. Dokonce i nepříjemné oznámení, jako například stahování dat, by mělo být doručeno příjemným způsobem.
Image credits: xjw
Táhněte za obnovení
Čas čekání uživatele začíná okamžikem zahájení akce a nejhorší případ je, když nemá žádnou indikaci, že ji systém obdržel. Aktivita tahu k obnovení by měla mít okamžitou reakci . Je nezbytné poskytnout nějakou vizuální zpětnou vazbu ihned po obdržení požadavku od uživatele, který naznačuje, že proces byl zahájen. Animace vám s tím pomůže.
Image credits: Tony Babel
4. Vysvětlující animace
Někdy uživatelé potřebují trochu víc nápovědy k pochopení toku uživatelů nebo interakci s určitými prvky rozhraní. To platí zejména pro uživatelská rozhraní, která obsahují nové nebo neznámé funkce nebo interakce pro uživatele.
Na palubě
Uživatelé na palubě vyžadují bezchybný UX a animace v toku na palubě mají obrovský vliv na to, jak první uživatelé budou pracovat s aplikací. Animace vám poskytuje neomezenou svobodu k tomu, abyste co nejdůležitějším způsobem oznamovali, ať už je to jak složité, tak suché téma.
Image credits: Anastasiia Andriichuk
Vizuální rady
Animace vám může nabídnout užitečné vizuální pokyny. Vysvětlující animace se nejčastěji objevuje po prvním otevření stránky a animace ukazuje, jak se mají některé prvky stránky použít. Tento typ animace lze nalézt ve hrách, které se často velmi dobře zabývají progresivním odhalením a odhalují mechaniku hry, když se dále pohybujete do hry. Takové náznaky se spouštějí pouze tehdy, když uživatel dosáhne příslušného bodu svých zkušeností.
Závěr
Animace je výkonným nástrojem při sofistikovaných způsobech.
Potřebujeme od začátku přijmout tento návrh a myslet na něj jako na přirozenou součást našeho designu, protože design je víc než vizuální prezentace. Jak říká Steve Jobs o designu: Není to jen to, co to vypadá a cítí. Design je, jak to funguje.