Side panel - Designmönster

Användare behöver ibland tillgång till kompletterande information eller funktioner utan att lämna sin nuvarande kontext. Utan en strukturerad lösning riskerar gränssnitt att bli överbelastade eller kräva onödig navigering. Side panel möjliggör att visa sekundärt innehåll kontextuellt, utan att störa huvudflödet.

Användning

Använd när

• Kompletterande information behövs för att slutföra en uppgift

• Användaren arbetar i ett flöde där kontext måste bevaras

• Innehållet är sekundärt men fortfarande viktigt

• Det finns behov av att visa:

  • detaljerad information

  • formulär eller redigering

  • relaterade data eller inställningar

Exempel:

• Visa patientinformation vid ifyllnad av formulär

• Redigera objekt från en lista utan att lämna sidan

• Visa mer information kopplat till ett val

Använd inte när

• Informationen är kritisk för att förstå sidan från start

• Innehållet kräver fullt fokus eller mycket utrymme

• En ny sida ger bättre struktur och överblick

• Användaren riskerar att missa viktig information

Riktlinjer

Beteende

• Panelen öppnas och stängs

  • Side panel är alltid stängningsbar (closeable) oavsett hur den presenteras

  • Den kan vara:

    • Förvald öppen (t.ex. i en delad vy)

    • Dold initialt och öppnas via en trigger

  • Panelen ska kunna stängas via:

    • Stäng-kryss i högra hörnet

    • ESC (tangentbord)

    • Eventuell Avbryt/Stäng-knapp

• Trigger-baserad interaktion

  • Panelen öppnas efter en tydlig användarhandling

  • Exempel på triggers:

    • Klick på “Redigera”

    • “Visa mer information”

  • Det ska vara tydligt vad som kommer hända innan panelen öppnas

• Layoutbeteende (hur panelen påverkar innehållet)
  Side panel kan bete sig på två sätt beroende på kontext:
  1. Push (platt panel)

  • Panelen skjuter undan huvudinnehållet

  • Behåller hela gränssnittet synligt

  • Lämplig när:

    • användaren behöver arbeta parallellt med innehåll i båda ytorna

    • kontinuerlig referens är viktig (t.ex. formulär + information)
      2. Overlay (elevated panel)

  • Panelen lägger sig ovanpå huvudinnehållet

  • Skapar tydligare fokus på panelens innehåll

  • Lämplig när:

    • innehållet i panelen kräver mer uppmärksamhet

    • interaktionen är mer tillfällig

• Synlighet och tillstånd

  • Panelens tillstånd (öppen/stängd) ska vara:

    • tydligt

    • förutsägbart

  • Öppning och stängning ska ske utan oväntade förändringar i layout eller fokus

  • Systemet ska vid behov komma ihåg panelens tillstånd (t.ex. i längre arbetsflöden)

• Påverkan på användarflöde

  • Panelen ska inte blockera huvudinnehållet mer än nödvändigt

  • Användaren ska enkelt kunna växla mellan panel och huvudvy

  • Kritiska arbetsflöden ska inte brytas av panelens beteende

Visuell utformning

• Placeras vanligtvis till höger (eller konsekvent vald sida)

• Ska tydligt särskiljas från huvudytan (t.ex. skugga, kant, bakgrund)

• Ha en tydlig rubrik som beskriver innehållet

• Innehålla:

  • scroll vid behov

  • tydlig stäng-funktion

• Bredd ska vara anpassad:

  • inte för smal (läsbarhet)

  • inte för bred (tappar kontext)

Open

Platt side panel som skjuter innehållet åt sidan.

 

Open

“Elevated” side panel som ligger ovanpå innehållet.

 

Innehåll / copy

• Innehållet ska vara:

  • kontextuellt

  • relevant för aktuell uppgift

• Undvik att duplicera innehåll från huvudvyn

• Rubriker ska vara tydliga och handlingsorienterade:

  • “Redigera patient”

  • “Detaljer”

• Instruktioner ska vara korta och konkreta

Gör / Gör inte

Tillgänglighet

WCAG-relevanta principer:

• 2.4.3 Focus Order – Fokus ska flyttas logiskt vid öppning

• 2.1.1 Keyboard – Panelen ska vara fullt navigerbar via tangentbord

• 1.3.1 Info and Relationships – Struktur ska vara semantiskt korrekt

• 4.1.3 Status Messages – Öppning/stängning ska kommuniceras

Riktlinjer:

• Flytta fokus till panelen när den öppnas

• Tillåt stängning via ESC

• Säkerställ att fokus återgår till trigger-elementet

• Använd korrekt semantik (t.ex. landmark/region)

• Undvik att låsa användaren utan tydlig exit

Sammanfattning

Side panel används för att visa sekundär, kontextuell information utan att bryta användarens flöde.

Den ska vara tydlig, lätt att öppna/stänga och aldrig innehålla kritisk information som krävs vid första anblick.