6 eksempler på cookiebanner-design, der passer til hjemmesiden

Et godt cookiebanner-design giver folk forståelige valg, fungerer på en lille skærm og efterlader en tydelig vej tilbage til præferencerne. Hvert eksempel nedenfor viser, hvornår layoutet er nyttigt, én designbeslutning, der betyder noget, og én ting, du skal teste på en telefon eller i de besøgendes forløb.

De seks layouts er originale koncepter tegnet til denne artikel. De er ikke skærmbilleder fra kunders hjemmesider og heller ikke testede konverteringsvindere.

1. Den uafhængige webshop: et kompakt kort nederst

Et hvidt kort med en tynd kant sidder nederst på skærmen, tydeligt adskilt fra siden bag det. Forklaringen er kort, og hovedvalgene står samlet.

• Velegnet, når: produktfotos allerede bærer den visuelle personlighed, og mange besøgende lander direkte på produktsider.
• Designbeslutning: placer “Accepter alle” og “Afvis alle” side om side i samme størrelse og stil, og lad dem stables i samme bredde på mobil. Hold “Administrer præferencer” synlig som et tredje valg.
• Test: tjek på en rigtig produktside på en telefon, at kortet ikke dækker “Læg i kurv”, kurvens samlede beløb eller en chatknap. Tjek med et tastatur, at fokus aldrig forsvinder bag kortet; W3C’s vejledning om skjult fokus bruger cookiebannere som eksempel.

2. B2B-servicesiden: en diskret bjælke i fuld bredde

En afdæmpet bjælke langs bunden af siden bruger sidens neutrale farver og én accentfarve. Formålene forklares i det almindelige sprog, du ville bruge i en salgssamtale.

• Velegnet, når: de besøgende kommer for at forstå en ydelse og derefter når frem til en kontakt- eller demoformular, så banneret ikke bør konkurrere med tilbuddet.
• Designbeslutning: brug pladsen på klare beskrivelser af formålene, fx hvad statistik måler, og om du bruger annoncering, i stedet for på en stor overskrift.
• Test: følg lead-forløbet på en telefon, fra landingsside til indsendt formular. Overskriften og formularknappen skal kunne nås hele vejen, og formularens konverteringstag skal respektere det valg, der er truffet.

3. Det kreative bureau: udtryksfuld ramme, neutrale valg

En farverig hjemmeside kan stadig have en rolig samtykkeflade. Personligheden ligger i kortets baggrund, kant eller overskrift; knapteksterne forbliver enkle.

• Velegnet, når: brandet er markant, og en almindelig grå boks ville se malplaceret ud.
• Designbeslutning: brug brandfarven på rammen, ikke på én knap. Begge hovedvalg får samme behandling; vores gennemgang af dark patterns beskriver de fælder, du skal undgå.
• Test: tjek hver knaptekst på brandbaggrunden op mod W3C’s vejledning om kontrast, og se derefter banneret på en telefon oven på den mest urolige del af din forside.

4. Udgiveren: plads til detaljer uden en mur af tekst

Udgivere arbejder ofte med mange leverandører og formål. Det første lag gør beslutningen tydelig; en detaljevisning rummer oplysningerne om leverandører og formål.

• Velegnet, når: sitet er finansieret af annoncer, arbejder med flere annoncepartnere eller bruger et rammeværk som IAB TCF.
• Designbeslutning: hold skriften læsbar, og lad detaljevisningen gøre sit arbejde i stedet for at presse en lang leverandørforklaring ind i et lille kort. Hvis du bruger IAB TCF, former dets påkrævede tekster og knapper designet, så bekræft dem, før du styler.
• Test: åbn detaljerne på en telefon, find én leverandør, ændr ét formål, og gem. Åbn derefter indstillingerne igen, og tjek, at ændringen blev bevaret.

5. Den mobilorienterede virksomhed: stablede knapper og synligt fokus

Design først til den mindste skærm, du understøtter. Stabl knapperne i fuld bredde, og giv hver af dem plads.

• Velegnet, når: de fleste besøgende kommer via telefonen, fx fra kampagner på sociale medier eller for at booke en lokal ydelse.
• Designbeslutning: gør hvert valg til en behagelig trykflade, og gør det lige så let at nå muligheden for at afvise som at acceptere, uden at man skal scrolle inde i banneret. W3C’s minimumsstørrelse for trykflader er 24 × 24 CSS-pixels; større er lettere at ramme.
• Test: zoom ind, og drej telefonen til liggende format; alle valg skal stadig kunne nås. Gennemfør derefter banneret på en computer kun med tastaturet, og tjek, at fokus altid er synligt.

En pæn mockup er ikke en tilgængelighedstest. Det er den fungerende side på rigtige enheder, der skal tjekkes.

6. Det internationale site: et layout, der kan tåle oversættelse

Korte engelske knaptekster kan blive meget længere på et andet sprog. Lad der være fleksibel plads i stedet for en smal, fast bredde omkring den oprindelige tekst.

• Velegnet, når: sitet henvender sig til besøgende på flere sprog, fx en webshop, der sender varer i hele Europa.
• Designbeslutning: vælg et layout, hvor knapperne kan ombryde eller stables, når teksterne bliver længere, og oversæt hele panelet: formål, indstillinger, knapper og links til politikker.
• Test: se hvert understøttet sprog på en telefon, hvor browseren er indstillet til det sprog. En oversat overskrift over uoversatte knapper giver de besøgende en ufuldstændig oplevelse.

Sprog og geografi løser forskellige problemer. En tysktalende besøgende er ikke automatisk i Tyskland, og en besøgende i USA foretrækker måske spansk. Hold sprogvalget adskilt fra den regionale samtykkeopsætning.

En designgennemgang, du kan klare i ét hug

• Læs alle tekster på en telefon uden at zoome.
• Sammenlign, hvor synligt det er at acceptere og at afvise.
• Tjek tekstkontrasten på alle knapper og baggrunde.
• Gennemfør præferenceforløbet kun med tastaturet.
• Åbn indstillingerne igen, efter at banneret er lukket.
• Tjek hvert understøttet sprog for manglende eller afskåret tekst.
• Bekræft, at sitets vigtige knapper og funktioner stadig kan bruges.

Bed derefter en person, der ikke har designet banneret, om at forklare, hvad hvert valg betyder. Den samtale afslører ofte mere end endnu en runde farvejusteringer.