Tlačítko s pohyblivou činností (FAB) je kruhovou ikonou, která se pohybuje nad uživatelským rozhraním. Jeho tvar, poloha a barva zajišťují, že se vynikne ze zbytku uživatelského rozhraní. Společnost FAB byla popularizována zveřejněním zásad společnosti Google pro návrh materiálů v roce 2014. Od této verze se uživatelský interface FAB široce používal v designu webových a mobilních aplikací.

Přestože FAB může být považována za malou, zdánlivě nevýznamnou složku uživatelského rozhraní, její účinky mohou být důležité. Vzhledem k tomu, že vzor je používán správně, má být okamžitě identifikovatelný a přístupný.

image15

Plovoucí akční tlačítko v aplikaci Android

1. Představte akci Hallmark

V ideálním případě by měl FAB zvýraznit nejrelevantnější nebo nejčastěji používané akce, měla by být použita pro akce, které jsou primární charakteristikou vaší aplikace. Pokud použijete FAB ve vaší aplikaci, musí být návrh aplikace pečlivě zvážen a případné akce uživatele musí být převedeny na jednu prominentní funkci. Například, hudební aplikace může mít FAB, který představuje 'Play / Stop'. Aplikace typu Instagram může mít FAB, který představuje 'Fotografování'.

image3

Tlačítko s plovoucí akcí představuje primární akci v aplikaci. Pozastavení nebo obnovení přehrávání na této obrazovce informuje uživatele, že jde o hudební aplikaci.

Podle výzkumu Steve Jones , FAB vykazuje mírný negativní dopad na použitelnost, když uživatelé poprvé použijí tlačítko. Nicméně, jakmile uživatel úspěšně dokončí úlohu pomocí FAB, jsou schopni jej používat efektivněji než tradiční tlačítko akce.

2. Buďte vyhledávacím nástrojem

FAB je přirozená značka, která uživatelům říká, co mají dělat dál. Výzkum od Googlu ukazuje, že když se setkávají s neznámými obrazovkami, mnoho uživatelů se spoléhá na FAB pro navigaci. FAB je tedy velmi užitečný jako ukazatel toho, co dělat dál.

image14

Použití tlačítka Floating Action v Twitteru vás vyzývá, abyste zveřejnili obsah

3. Poskytněte soubor akcí

V některých případech je vhodné, aby se tlačítko roztočilo a ukázalo několik dalších možností, jak je vidět v příkladu Evernote níže. FAB se může nahradit řadou konkrétnějších akcí a můžete je navrhnout tak, aby byly kontextové pro vaše uživatele. Jako zásadní pravidlo poskytněte alespoň tři možnosti při tisku, ale ne více než šest (včetně původního cílového tlačítka s plovoucí akcí).

image12

Mějte také na paměti, že tyto akce musí souviset s primární činností, kterou FAB sám vyjadřuje, a být navzájem propojeny: s těmito odhalenými akcemi nepovažujte za nezávislé, jak by mohly být, pokud jsou umístěny na panelu nástrojů.

image17

Nečiní: akce , kde jsem ", není pro vytváření akcí pro obsah relevantní.

4. Být vědomi kontextu

Kontext hraje důležitou roli v interakci s uživatelem. Někdy uživatelé chtějí konzumovat obsah, někdy chtějí provádět akce. Vše závisí na kontextu. Použití některých kontextových chování by mohlo přinést to nejlepší z FAB do UX jakékoli aplikace. Vezměme za příklad Google+. Služba Google+ zobrazuje tlačítko, když se uživatel střetává s datovým tokem a skrývá ho, když je tento záměr zrušen. Tyto dva stavy se opírají o kontext: když uživatelé pracují se sociálním tokem, je primární akce procházet, proto není potřeba FAB a když uživatelé přestanou posunovat, možná by chtěli něco uveřejnit.

image19

5. Připojte dva státy dohromady

FAB není jen kulaté tlačítko, má některé transformační vlastnosti, které můžete použít k usnadnění uživatelům z obrazovky na obrazovku. Při morfování tlačítka s pohyblivou akcí provedete logický přechod mezi dvěma stavy. Animace v níže uvedených příkladech zachovává smysl pro orientaci uživatele a pomáhá uživateli pochopit změnu, která se právě stala v rozvržení zobrazení, co způsobilo změnu a jak později znovu iniciovat změnu.

image18

Obrázek kreditu: Ehsan Rahimi

image16

Obrázek kreditu: Dribbble

Závěr

Někteří mohou říkat, že FAB je špatný UX. Je to lákavé říct, protože uživatelé a návrháři nejsou na to zvyklí. Jsme zvyklí na známé panely nástrojů a koncept FAB je pro nás stále poměrně nový. Všichni víme, jak jsou nové věci těžké, ale současně povzbuzují pečlivěji navržený uživatelský zážitek. Při správném použití může být FAB pro koncového uživatele ohromně užitečný vzor.