Laddning av innehåll
För att arbeta på liknande sätt med laddning av innehåll i våra olika tjänster finns riktlinjer för hur vi kan visualisera och informera om laddning.
Fyra olika case har identifierats:
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 https://inera.atlassian.net/wiki/spaces/USI/pages/233121313. 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. Laddningen kan också förhindra att användaren skickar samma sak flera gånger i rad.
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
1177
Inera
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
1177
Inera
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
1177
Inera
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.