FAB (floating action button) eller back to top-button är en variant av en icon button. Knappen är rund med uppåtpil som vid klick tar användaren högst upp i innehållet på den aktuella sidan.
Innehållsförteckning
Komponentkällor
1177
Inera
Designspecifikation
Varianter för 1177
FAB för 1177 har två olika varianter, en för invånare (röd) och en för vårdpersonal (blå).
Beteende för komponenten
Komponenten dyker upp automatiskt när man scrollar på sidan. Det finns inga speciella villkor kopplade till den, utan den visas på alla sidor när den behövs.
I desktop har vi möjlighet att lägga komponenten vid sidan av griden, vilket gör att den även följer med över sidfoten. I mobil stannar knappen ovanför sidfoten, då den annars skulle täcka länkarna som finns där. Det är alltså skillnad mellan beteende för desktop och mobil.
Principen är att pilen aldrig ska täcka något innehåll/länk/funktion och därför finns olika funktion beroende på om det är mobil eller desktop.
Vid klick av komponenten så sveper den upp snabbt i en scrollanimation och hoppar inte bara upp till kanten. Detta för att ge användaren visuell feedback på vad som hänt.
Best practice:
Se till att FAB hamnar med lagom avstånd från footer när användaren har scrollat hela vägen ner på en sida.
FAB ska inte följa med och hamna över footer när användaren har scrollat längst ner på sidan.
Tillgänglighet
Tänk på att ”Back to top”-knappar inte ska vara dolda för en användare med skärmläsare, den måste vara nåbar med tangentbordsnavigering då alla interaktiva element ska gå att navigera till med tangentbord.
Länktexten ska vara beskrivande och det ska gå att förstå vart den leder enbart baserat på länktexten eller i kombination med dess programmatiska sammanhang.
Knappen får inte vara positionerad på ett sådant sätt så att den döljer viktiga element på sidan.
Ifall den används i samband med en touch-skärm (mobil/surfplatta) så ska den vara tillräckligt stor för att användaren lätt ska kunna trycka på den med sitt finger.
Feedback
Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.
Publicerad | |
|---|---|
Senast uppdaterad |