/
Drag and drop - Designmönster

Drag and drop - Designmönster

Användare behöver kunna organisera, flytta och prioritera objekt på ett effektivt sätt. Utan tydlig vägledning kan drag and drop leda till osäkerhet, felaktiga handlingar och bristande tillgänglighet. Funktionen måste därför vara tydlig, responsiv och förutsägbar, med alternativa interaktionssätt.

Användning

Mål

Säkerställa att användaren:

  • Förstår vilka objekt som är flyttbara

  • Har full kontroll över vad som händer vid förflyttning

  • Får direkt och tydlig feedback

  • Kan utföra samma handling med alternativa metoder

Använd när

  • Ordning eller prioritet behöver ändras ofta

  • Objekt flyttas mellan tydliga tillstånd eller ytor

  • Visuell manipulation ger bättre förståelse än knappar/menyer

  • Användarna är vana och arbetar frekvent i gränssnittet

 

Använd inte när

  • Drag and drop är enda sättet att utföra en kritisk åtgärd

  • Konsekvenserna av en förflyttning är otydliga eller riskfyllda

  • Precision är begränsad (t.ex. mobil eller hjälpmedel)

  • En enklare interaktion (t.ex. knappar) är tydligare

 

Riktlinjer

Beteende

  • Indikator:
    Tydliggör vilka objekt som är dragbara (t.ex. med drag handle).

Unknown Attachment

  • Initiering:
    Användaren ska aktivt behöva “ta tag” i objektet (undvik oavsiktlig dragning).

  • Feedback:

    • Visa vilket objekt som flyttas

    • Visa var objektet kan släppas

    • Markera ogiltiga släppytor

Unknown Attachment

Unknown Attachment

  • Direkt påverkan:

    • Uppdatera position i realtid

    • Låt andra objekt anpassa sig dynamiskt

  • Släpp (drop):

    • Bekräfta resultat visuellt direkt

    • Vid kritiska ändringar: möjliggör undo eller bekräftelse

  • Alternativ interaktion:

    • Stöd tangentbord (tab + piltangenter)

    • Möjliggör klickbaserad flytt

 

Visuell utformning

  • Använd konsekvent ikon för drag handle

  • Markera interaktivitet via hover och fokus

  • Visa tydlig “drag state”:

    • skugga / upphöjd yta

    • transparens eller färgändring

  • Visa placeholder eller infogningslinje

  • Differentiera visuellt mellan:

    • giltiga släppytor

    • ogiltiga släppytor

 

Innehåll / copy

  • Ge instruktioner vid behov:

    • “Dra och släpp för att ändra ordning”

  • Visa statusmeddelanden vid förändring:

    • “Flyttad till position 3”

  • Förklara begränsningar:

    • “Kan inte flyttas hit”

  • Håll copy kort, kontextuell och handlingsbar

 

Gör / Gör inte

Gör

  • Visa tydlig drag-indikator

  • Ge kontinuerlig visuell feedback

  • Uppdatera gränssnittet i realtid

  • Erbjud alternativ interaktion (tangentbord/klick)

  • Möjliggör undo vid behov

Gör inte

  • Göra hela ytor dragbara utan indikator

  • Fördröja feedback eller skapa “hopp” i layout

  • Göra drag and drop till enda interaktion

  • Dölja konsekvenser av en förflyttning

  • Tillåta oavsiktliga drag

 
Tillgänglighet

WCAG-relevanta principer:

  • 2.1.1 Keyboard – All funktionalitet ska vara tillgänglig via tangentbord

  • 2.5.1 Pointer Gestures – Komplexa gester ska ha alternativ

  • 3.2.2 On Input – Förändringar ska vara förutsägbara

  • 4.1.3 Status Messages – Förflyttningar ska kommuniceras

Riktlinjer:

  • Drag and drop får inte vara enda interaktion

  • Använd tydlig fokusmarkering

  • Ge textbaserad feedback för skärmläsare

  • Säkerställ att alla tillstånd är perceptuella utan enbart visuella signaler

  • Bekräfta förändringar via ARIA live-regioner

 

Sammanfattning

Drag and drop ska vara tydlig, responsiv och tillgänglig.

Visa vad som kan flyttas, ge direkt feedback och säkerställ alltid alternativa sätt att utföra samma handling.