Pet Peeve: Min yndlings-hade-designløsning

Kender du det når en bestemt designløsning irriterer dig og du elsker at hade den? Her deler jeg en af mine yndlings-hade-designløsninger.

Pet Peeve er et dejligt engelsk udtryk, der så fint dækker ovenstående, her defineret hos Wikipedia:

A pet peeve is a minor annoyance that an individual identifies as particularly annoying to himself or herself, to a greater degree than others may find it.

Det hele handler om den menneskelige kognition. Om at gøre tingene nemme at bruge. Det er noget jeg er skolet i og jeg har selv undervist i det 6 år på It-Universitetet. En af de ting vi altid talte om på det usability-kursus, var at gøre brugerens muligheder tydelige og at hjælpe brugeren til at træffe den korrekte og fejlfrie handling. For eksempel at trykke på “Fortsæt” i stedet for “Annuller”. For slet ikke at tale om situationer, hvor vi helst vil have at kunden trykker “Køb” fremfor “Slet”.

Derfor gør det ondt hver gang jeg ser digitale løsninger, hvor alle knapperne er lige store, har samme farve og er lette at tage fejl af. Jeg synes det er dårligt design!

Så tillad mig at udstille nogle løsninger, hvor jeg selv stopper op og bruger ekstra energi på at sikre, at jeg nu også trykker på den rigtige af de ens knapper.

Vi starter hos DK-hostmaster, når jeg skal godkende et nye domænenavn:

petpeve knapper dk-hostmaster

Tre knapper med totalt forskellige funktioner. Fuldstændigt ens designet og med ret meget tekst på – endda med svarmuligheder der er forklarede ovenfor i den omvendte rækkefølge. Måske er det med vilje gjort så tungt som muligt. Det havde været nu nemmere med en overskrift og så ja/nej. Og hvor bliver jeg træt hvis jeg trykker på den forkerte.

Videre til NemID og oprettelsen af medarbejdersignatur (aka rejsen til helvede og tilbage igen), knapperne til at fortsætte eller annullere:

petpeve knapper nemid 2 kopi

Hvor stor er chancen for at jeg hakker forkert lige der? På annuller skal jeg bare starte helt forfra. Det er ikke godt nok.

Skal vi lige tage en mere fra NemID:

petpeve knapper nemidEn klassiker. Men hvad er nu det? En eller anden helt har lavet den vigtigste knap med fed. Men chancen for at tage fejl i farten er stadig alt for stor. Og behøver der overhovedet være en “Afbryd”?

 

 

 

 

Så til et design jeg ellers er rigtig glad for og som jeg derfor bruger meget, nemlig Mailchimp. Men i deres nye design er jeg rigtigt ofte ved at tage fejl af de her grå knapper:

petpeve knapper mailchimp

Helt automatisk søger jeg mod “Delete” fordi jeg af vane søger den knap der står længst til højre. Så jeg skal altid lige forbi sletning, inden jeg kommer ned til Edit (som er den knap jeg oftest bruger her). Der meget åbne og luftige design understøtter ikke vaner og automatiske handlinger særligt godt.

Næste gang jeg blogger, så bliver det om Rejsekortets standere og kiosker, men vi kan da godt lige varme op med deres skærmdesign:

rk5 kopi

Ok, så I har lavet knapperne forskellige størrelser, men vi kan sgu stadig ikke læse hvad der står. Jeg skal altid stå og lede efter den rigtige knap efter jeg har valgt beløb. Så, kunne man dog ikke gøre Godkend bare lidt mere… Grøn? 

Ok, vi skal have skruet op for gestalterne her. Der skal være større forskel på knapperne.

Så jeg vil altid selv foreslå en løsning som denne:

Oles_knapper

Der er ikke noget at tage fejl af. Men det kan da være jeg skal understrege det med et par klare designråd omkring at designe Call To Action:

  • Lav tydelig forskel på knapper der har åbenlyse forskellige funktioner
  • Gør den primære Call to Action lettere at se og ramme, fx med farve, størrelse og kontrast
  • Gør knapper store og lette at ramme
  • Sørge for at teksten er nem at læse, især hvis det ikke bare er “Ok” eller “Fortsæt”
  • Ring til mig, hvis jeg skal rette dit åbenlyst dårlige design til 1.000,- kr i timen (nej vel?)

Eller noget i den retning. Send mig gerne andre eksempler eller kommenter herunder hvis du synes jeg tager fejl.

 

Kurser i konverteringsoptimering

  • Lær selv at konvertere flere besøgende til kunder
  • Optimér og split-test dit eget website i praksis
  • Ole Gregersen har designet kurset og underviser selv


Vis kurser i konverteringsoptimering