Sidjämförelse

Exempel

Image Removed

Back to top-button är en variant av en facettknapp. 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

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 . 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 den komponenten vid sidan av griden, vilket gör att den även följer med över simfoten menar i en mobil hade den då täckt länkar i sidfoten vilket har lett till att i mobil så fastnar den ovanför sidfoten dvs att det är en diff mellan desktop och mobil i beteende. 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 modeller funktion beroende på om det är den mobila sajtfoten som visas mobil eller desktop-varianten. Som du kan se har vi olika design och funktion på mobil sajtfot och dator-sajtfot, och pilen anpassar sig efter dessa två modeller.

• Vid klick av komponenten så sveper den upp snabbt i en scroll animation scrollanimation och hoppar inte bara hoppar upp till kanten, detta . Detta för att ge användaren visuell feedback på vad som hänt.

Do’s and Don’ts

-

Tillgänglighet

-

Research på komponenten

-

Relaterade resurser/komponenter

-

Status

Status

Publicerad

2020-03-02

Senast uppdaterad

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.