Laddning av innehåll

För att arbeta på liknande sätt med laddning av innehåll i våra olika tjänster har vi tagit fram riktlinjer för hur vi kan visualisera och informera om laddning.

Vi har identifierat fyra olika case:

• Knapp när en användare ska skicka något (där vi inte vill att knappen ska klickas på många gånger)

• När innehåll ska laddas in på specifik plats (i en behållare som t ex tabell)

• En hel sida ska laddas in

• Visualisera laddningsförlopp/procentuell laddning (progress bar)

De flesta exempel för laddning av innehåll bygger på användning av komponenten Spinner. För att skapa tillgängliga gränssnitt är det viktigt att följa rekommendationerna för tillgänglighet som beskrivs på komponentsidan.

Innehåll:

Knapp - loading button

Komponenten loading button kan användas när användaren klickat på en knapp för att indikera att tjänsten eller systemet laddar.

Vid användning av en loading button är tillgänglighet viktig. För användare som har nedsatt syn så är det viktigt att skärmläsare kan berätta att en laddning pågår. För att göra detta så kan aria-attributet aria-live="polite" användas. Det är ett attribut som används för att beskriva dynamiskt innehåll. Undvik att använda =”assertive” så långt som möjligt, denna ska enbart användas om det är kritisk information som måste förmedlas till användaren direkt.

Läs mer på: https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements

Exempel på användning

Användaren klickar på knapp för att skicka eller spara ett formulär eller annan information där resultatet visas på ny sida.

Designexempel

Innehåll laddas in på specifik plats

Ibland behöver vi visualisera att innehåll laddas in på en annan plats än där användaren klickade. Spinnern placeras där innehållet kommer att visas när det har laddat klart.

Exempel på användning

Kan användas för att visualisera laddning av exempelvis sökresultat eller innehåll i datatabeller.

Designexempel

Hel sida laddas

I vissa fall kan det ta lite tid för innehåll att laddas in på en sida, t. ex. om man har sämre internetuppkoppling. Då kan det vara bra att göra det tydligt för användaren att systemet arbetar för att visa innehållet. Komplettera spinnern med en text som beskriver vad som händer: “Innehållet laddar” eller “Du loggas in”.

Exempel på användning

Kan användas för att visualisera laddning av en hel sida med innehåll.

Designexempel

Visualisera laddningsförlopp/procentuell laddning

I vissa processer kan vi behöva visualisera ett förlopp eller procentuella värden. Då fungerar det bra att använda en progress bar.

Exempel på användning

Kan användas för att visa ett förlopp, exempelvis uppladdning av en fil.