Handel
Kurv-drawer
En kurv-drawer viser indkøbskurven i et panel, der glider ind fra siden — så brugeren kan gennemgå og justere kurven og finde vej til checkout uden at forlade siden. Et velbygget panel er teknisk en modal dialog. Her er evidensen for, hvad det skal kunne, og hvordan det gøres tilgængeligt.
Definition
En kurv-drawer er et panel, der åbner over indholdet og viser kurvens indhold, totaler og et vej-til-checkout.
Hvorfor det virker
Tydelig feedback er den mest basale UI-regel. NN/g bruger netop »blev varen lagt i kurven?« som eksempel på den usikkerhed, feedback skal fjerne — uden den klikker brugere på samme knap flere gange, fordi de er i tvivl. Et panel, der åbner ved add-to-cart, er en direkte, synlig bekræftelse.1
Kurven er et beslutningsrum, ikke bare et lager: brugere bruger den som et venteområde, hvor de sammenligner, justerer antal og træffer de endelige valg. Et drawer skal understøtte den adfærd.2
Rediger- og fjern-funktioner fejler på tværs af branchen: 86% af sites gør det svært at ændre antal (50%) eller fjerne varer (36%), og 58% har et kurv-design, der aktivt hindrer sammenligning. At få det rigtigt er derfor en reel mulighed for at skille sig ud.3
Uklarhed om totalprisen driver frafald: 23% af amerikanske online-shoppere har forladt en ordre alene, fordi de ikke fik et upfront-estimat af den samlede pris. Den gennemsnitlige dokumenterede kurv-frafaldsrate er 70,22%.4
Hvornår du bruger det — og hvornår ikke
Hvornår du bruger det
- Kunder lægger ofte flere varer i kurven ad gangen.
- At bevare konteksten på produktsiden øger flow.
- Der er plads til et tydeligt “gå til kassen”.
Hvornår du bør undgå det
- De fleste køb er enkeltvarer, der går direkte til kassen.
- Kurven kræver så meget info, at en fuld side er bedre.
Best practices
Giv øjeblikkelig, synlig add-to-cart-feedback
Feedback forhindrer usikkerhed og gentagne klik — et panel, der åbner, er en tydelig bekræftelse.1
Tving ikke en fuld redirect til kurv-siden
Et in-page drawer bekræfter handlingen og bevarer konteksten, så brugeren nemt kan shoppe videre eller gå til checkout.3
Vis vare, subtotal og en tydelig vej til checkout
For lidt information om den tilføjede vare kan få brugere til at miste tillid og blive distraheret fra deres mål.3
Tillad at redigere antal og fjerne direkte i panelet
Brug tydelige »Fjern«-links (ikke »Slet«), og gør det muligt at sætte antal til nul. 86% af sites gør dette svært.2
Vis totalpris eller estimat så tidligt som muligt
Manglende upfront-total er en dokumenteret frafaldsårsag (23%).4
Åbn ikke panelet aggressivt og uopfordret
Lad brugeren styre interaktionen; åbner panelet automatisk, så gør det diskret og gør det let at lukke.2
Byg panelet som en tilgængelig modal dialog
Flyt fokus ind ved åbning, hold fokus fanget (Tab/Shift+Tab), luk med Escape, og send fokus tilbage til kurv-knappen. Brug role="dialog", aria-modal="true" og en tilgængelig titel.5
Typiske fejl
Ingen eller uklar add-to-cart-feedback
Bryder synlighed af systemstatus og fører til gentagne klik.
Tvunget fuld redirect ved hver add-to-cart
Afbryder shopping-flowet unødigt; et drawer bevarer konteksten.
Svær antalsredigering eller fjernelse
Dokumenteret hos 86% af sites — en klar mulighed for at gøre det bedre.
Skjult totalpris
Manglende upfront-total indtil sent i flowet får 23% til at forlade ordren.
Utilgængeligt panel
Ingen fokusstyring, ingen fokusfælde, kan ikke lukkes med Escape, og fokus vender ikke tilbage til udløser-knappen.
Eksempler i praksis
Shopify »Dawn«-temaet
Shopifys officielle referencetema implementerer et slide-out drawer bygget som en dialog med role="dialog", aria-modal="true", en luk-knap, et live-område og en checkout-knap, der deaktiveres ved tom kurv.
Mini-kurv på webshops
Mange webshops viser kurven i et side-panel med vare, subtotal og »gå til kassen« — bekræft konkret adfærd mod den enkelte butik, da implementeringer varierer.
Ofte stillede spørgsmål
Hvad er forskellen på en kurv-drawer og en almindelig kurv-side?
En kurv-drawer viser kurven i et panel, der glider ind over den nuværende side, så brugeren kan gennemgå og justere uden at navigere væk. En kurv-side er en selvstændig side. Mange butikker bruger begge: drawer til hurtig bekræftelse, kurv-side til dybere gennemgang.
Skal jeg sende brugeren til kurv-siden, hver gang de lægger noget i kurven?
Nej, det er sjældent nødvendigt. Et in-page drawer eller overlay bekræfter handlingen og bevarer konteksten, så brugeren nemt kan shoppe videre eller gå til checkout.
Skal panelet åbne automatisk, når man lægger en vare i kurven?
Det kan fungere som tydelig feedback, men undgå at være for påtrængende. Lad brugeren styre interaktionerne; åbner du automatisk, så gør det diskret og gør panelet let at lukke (klik udenfor, Escape, luk-knap).
Hvad skal drawer’en som minimum vise?
De tilføjede varer (billede + navn), antal, subtotal og en tydelig vej til checkout — samt mulighed for at fortsætte med at shoppe. For lidt information kan få brugere til at miste tillid.
Skal man kunne ændre antal og fjerne varer direkte i drawer’en?
Ja. NN/g anbefaler tydelige »Fjern«-links (ikke »Slet«) og at gøre det muligt at sætte antal til nul. Baymard finder, at 86% af sites gør redigering/fjernelse svær — så det er en klar mulighed for at skille sig ud.
Hvordan gør jeg drawer’en tilgængelig?
Byg den som en modal dialog: flyt fokus ind ved åbning, hold fokus fanget i panelet (Tab/Shift+Tab), luk med Escape, og send fokus tilbage til kurv-knappen ved lukning. Brug role="dialog", aria-modal="true" og en tilgængelig titel.