En flydende handlingsknap (FAB) er et cirkuleret ikon, der flyder over brugergrænsefladen. Dens form, position og farve sikrer, at den skiller sig ud fra resten af ​​brugergrænsefladen. FAB blev populariseret ved udgivelsen af ​​Googles Material Design principper i 2014. Siden denne udgivelse er FAB brugergrænseflade elementet blevet bredt vedtaget i web og mobil design.

Selvom FAB kan ses som en lille, tilsyneladende ubetydelig UI-komponent, kan dens virkninger være vigtige. I betragtning af at mønsteret anvendes korrekt, er det meningen, at det er umiddelbart identificeret og tilgængeligt.

image15

Flytende handlingsknap i Android-app

1. Representerer en Hallmark Action

Ideelt set bør FAB fremhæve de mest relevante eller ofte anvendte handlinger, det bør bruges til de handlinger, der er de primære egenskaber ved din app. Hvis du skal bruge FAB i din app, skal appens design overvejes nøje, og brugerens mulige handlinger skal koges ned til en enkelt fremtrædende funktion. For eksempel kan en musikapp have FAB, der repræsenterer 'Play / Stop'. En Instagram-lignende app kan have et FAB, der repræsenterer 'Tag et billede'.

image3

En flydende handlingsknap repræsenterer den primære handling i en applikation. Pauser eller genoptager afspilning på denne skærm fortæller brugere, at det er en musikapp.

Ifølge forskning fra Steve Jones FAB demonstrerer en mindre negativ brugbarhed, når brugerne først bruger knappen. Når brugerne har fuldført en opgave med FAB, kan de imidlertid bruge det mere effektivt end en traditionel handlingsknap.

2. Vær en måde at finde værktøj

FAB er en naturlig cue for at fortælle brugerne, hvad de skal gøre næste gang. Forskning fra Google viser, at mange brugere stoler på FAB for at navigere, når de står over for ukendte skærme. FAB er således meget nyttigt som et skilt af hvad man skal gøre næste gang.

image14

Brugen af ​​en flydende handlingsknap i Twitter opfordrer dig til at indsende indhold

3. Giv et sæt af handlinger

I nogle tilfælde er det hensigtsmæssigt, at knappen spinder ud og udsætter et par andre muligheder, som det kan ses i Evernote-eksempelet nedenfor. FAB'en kan erstatte sig med en række mere specifikke handlinger, og du kan designe dem til at være kontekstuelle for dine brugere. Som en tommelfingerregel skal du angive mindst tre muligheder ved tryk, men ikke mere end seks (inklusive det oprindelige flydende handlingsknapsmål).

image12

Vær også opmærksom på, at disse handlinger skal være relateret til den primære handling, som FAB selv udtrykker, og være relateret til hinanden: Undgå at behandle disse åbenbare handlinger som uafhængige, som de kunne være, hvis de er placeret på en værktøjslinje.

image17

Må ikke: 'Hvor jeg er' handling er ikke relevant for at oprette indholds handlinger.

4. Vær opmærksom på indholdet

Konteksten spiller en vigtig rolle i brugerinteraktion. Nogle gange vil brugerne forbruge indhold, nogle gange vil de udføre handlinger. Det hele afhænger af kontekst. Brug af nogle kontekstuelle opførsel kan bringe det bedste fra FAB til UX af enhver app. Lad os overveje Google+ som et eksempel. Google+ viser knappen, når brugeren er involveret i strømmen, og gemmer den, når dette engagement er vendt. Disse to stater er afhængige af kontekst: Når brugerne er involveret i en social strøm, er en primær handling at rulle, hvorfor der ikke er behov for FAB, og når brugerne holder op med at rulle, vil de måske gerne poste noget.

image19

5. Forbind to stater sammen

FAB er ikke bare en runde knap, den har nogle transformative egenskaber, som du kan bruge til at lette dine brugere fra skærm til skærm. Når du formaterer den flydende handlingsknap, skal du foretage overgang mellem to stater på en logisk måde. Animationen i eksemplerne nedenfor opretholder brugerens orienteringsorientering og hjælper brugeren med at forstå ændringen, der netop er sket i visningens layout, hvad der har udløst ændringen, og hvordan man påbegynder ændringen igen senere, hvis det er nødvendigt.

image18

Billedkredit: Ehsan Rahimi

image16

Billedkredit: Dribbble

Konklusion

Nogle kan sige, at FAB er dårlig UX. Det er fristende at sige det, fordi brugere og designere ikke er vant til det. Vi er vant til kendte værktøjslinjer, og begrebet FAB er stadig ret nyt for os. Vi ved alle, hvordan de nye ting er svære, men samtidig tilskynder de til en mere omhyggeligt designet brugeroplevelse. Brugt korrekt, FAB kan være et forbavsende nyttigt mønster for slutbrugeren.