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. Teknisk er et velbygget panel en modal dialog.

4 min læsning

Definition

En kurv-drawer er et panel, der åbner over indholdet og viser kurvens indhold, totaler og et vej-til-checkout.

Hvorfor det virker

NN/g kalder passende feedback på en handling for måske den mest basale retningslinje i UI-design og bruger »blev varen lagt i kurven?« som eksempel på den usikkerhed, feedback skal fjerne. Uden feedback 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.¹

Brugere bruger kurven som et venteområde, hvor de sammenligner, justerer antal og træffer de endelige valg. Et drawer skal understøtte den adfærd.²

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.³

Uklarhed om totalprisen driver frafald: 12% af dem, der forlader et checkout, gør det, fordi de ikke kunne se eller regne den samlede pris ud på forhånd. Den gennemsnitlige dokumenterede kurv-frafaldsrate er 70,22%.⁴

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, og et panel, der åbner, er en tydelig bekræftelse.¹
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.³
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.³
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.²
Vis totalpris eller estimat så tidligt som muligt
Manglende upfront-total er en dokumenteret frafaldsårsag (12%).⁴
Å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.²
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.⁵

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
Baymard dokumenterer problemet hos 86% af sites.
Skjult totalpris
Manglende upfront-total indtil sent i flowet får 12% af dem, der forlader et checkout, til at gøre det.
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«. Implementeringerne varierer, så tjek den konkrete adfærd i den enkelte butik.

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 giver 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, en tydelig vej til checkout og 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å her kan du skille dig 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.