Riktlinjer för paginering
- Rebecka Näsström
För att arbeta på liknande sätt med paginering av innehåll i våra olika tjänster finns riktlinjer för vilken paginering som används var, och på vilket sätt.
Tre olika case har identifierats:
Paginering då användaren kan bläddra mellan flera sidor
“Visa fler”-funktionalitet för att ladda några resultat i taget
Paginering för datatabeller
Paginering av innehåll bygger på användning av respektive komponent. 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:
Paginering vid flera sidor
Om paginering behövs på exempelvis en sökträffsida för att ta sig till nästa sida med träffar skulle en List pagination där bläddring bland flera sidor kunna användas.
Hur komponenten fungerar:
Den aktuella sidan markeras med en cirkel
Användaren kan gå till nästa, eller andra sidor, genom att klicka på önskat sidnummer eller högerpilen.
I de fall det finns en föregående sida visas det med vänsterpil som tar användaren till föregående sida i ordningen.
Finns flera sidor visas alltid första och sista sidan. I mitten visas aktuell sida och de två närmaste sidorna. Att det finns fler sidor framåt och bakåt illustreras med två punkter.
Ovanför pagineringsknapparna finns en text som visar vilka objekt i ordningen som visas av totalt hur många.
Som regel visas 10 objekt samtidigt på en sida.
Pagineringen läggs längst ner, under innehållet.
“Visa fler”
Istället för att lista alla träffar i exempelvis en träff- eller söklista 1-XXX, så används en knapp med texten ”Visa XX till”. Pagination button (visa NN till) är en Button med secondary-styling.
Som regel visas 10 objekt först, och 10 till kan laddas in genom att klicka på pagineringsknappen. Knappen läggs längst ner, centrerat under innehållet.
Paginering för datatabeller
I datatabeller med många rader kan det vara nödvändigt att visa ett visst antal rader i taget och låta användaren styra vad och hur mycket hen ser. Data table pagination låter användaren välja hur många rader som ska visas per sida, visar hur många rader tabellen innehåller möjlighet att välja vilken sida som ska visas.
Komponenten består av:
en selectlista med label, som låter användaren styra hur många tabellrader som ska synas per sida
en label som visar vilka rader och antalet rader som visas av hur många
en höger- och vänsterpil som låter användaren bläddra mellan sidor
Pagineringen läggs som regel till höger under datatabellen, men får även läggas i det övre högra hörnet.