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.

 

Mobile Pay vs. Swipp – når man bare er næst-bæst

Det er ikke uden grund at Swipp ikke har opnået samme popularitet som Danske Banks Mobile Pay. Bare at logge på viser den klare klasseforskel. Lad mig vise dig hvorfor.

Bruger du mobile pay? – det gør jeg også!
Det er dejligt enkelt. Brugervenligt, lækkert designet og bare genialt til de der små betalinger, fx mellem venner på tur.

Der findes et alternativ, som 81 andre banker bruger. Det hedder Swipp. Jeg er Nordea kunde, så jeg har ikke kunnet undgå at opdage det, for det er mast ind på forsiden i min netbank – “Her, brug for helvede vores opkomling”, synes det at skrige. Nej, jeg skal bare ind i min netbank, tak for det ekstra klik Nordea…

Nå ok, jeg giver det en chance. Det skal prøves. Det går ikke godt. så tillad mig med det samme at sammenligne Mobile Pay og Swipp. Ja og lad mig nøjes med bare at logge på.

Swipp login: 15 tryk.

Mobile Pay login: 5 tryk.

I rest my case. Men lad os da se hvorfor det går så galt.

mobile-swipp1
Mobile Pay: Elegant og enkelt.
mobile-swipp4
NemID, tungt og klodset
mobile-swipp3
Det er forfra hver gang…

 

 

 

 

 

 

 

 

Først den smukke løsning. For det første Mobile Pay en adskilt app – det har altså ikke noget med Danske Bank’s netbank at gøre. Så jeg klikker på appen. Så får jeg med det samme tastatur og en enkelt kode på 4 tal jeg skal indtaste. Store tydelige dejlige knapper. 4 tal, så er jeg igang.

Så er der Swipp’s 15 tryk:

1: Tryk på app

2: Vælg Swipp

3: Tryk i tekstfeltet i nemID!
(forudsat at du har gemt dit CPR, ellers skal det også indtastes)

4-13: Skriv 8-cifret nemID kode
(inkl. skift mellem tal og bogstaver = 10 anslag)

14: Tryk ok på tastuturet

15: Tryk login på NemID (og de insisterer på at lave knapperne næsten ens)

WTF! Oveni det, så foregår det på telefonen lille tastatur. For ikke at tale om NemID 1998-agtige design, der er så trist at jeg hellere vil bruge tiden på at oprette en ny medarbejder-signatur på Virk.dk (sorry, det er en joke, det kunne jeg aldrig drømme om at prøve på igen.)

Det er godt nok tungt.

Jeg går så udfra at jeg ikke skal taste det hver gang jeg står ved pølleren og skal betale for en hoddog – men nej, jeg bliver logget ud og skal starte forfra hver gang.

Det er op ad bakke. Så er det sgu ikke nogen overraskelse at det går lidt sløvt med at få bruger ned med på vognen. Helt ærlig Swipp – de andre havde bygget Mobile Pay før jer, I skulle bare kopiere. (Og så det navn, det er altså også tosset).

Men hvorfor dog være best-in-class, når man kan være “næst-bæst”.

Mobile Pay – tastaturet står klar og venter på min indtastning. Når jeg har tastet de fire tal, hopper den videre til det næste.

Enkelt og velfungerende.

Tak til Mobile Pay, I har fortjent alle priserne.

(tilføjet efterfølgende)

mobile-swipp5Der er en nederen ting mere med Swipp, som tager pusten fra mig. Når jeg vil sende til andre der ikke har Swipp, så får jeg en besked der igen indfører en masse friktion og usikkerhed. Brugen af mine kontakter er også uelegant eksekveret.

I Mobile Pay opleves det som om appen er ligeglad og bare sender pengene. Igen meget nemmere.

Sorry Swipp, men hvis jeg kunne ville jeg slette dig.

 

 

Ny optimeringsproces (1 af 5)

Tillad mig at dele en konverteringsoptimeringsproces. Jowjow!

En model, der indeholder alle de opgaver, metoder og værktøjer, som er relevante i en konverteringsoptimeringsproces.

Det er en model over en proces som reelt eksisterer i alle virksomheder, problemet er blot, at det sjældent foregår systematisk, metodisk eller særligt effektivt. Men der er en sammenhæng mellem faserne, et naturligt forløb, som bør overholdes for rigtigt at få værdi ud af konverteringsoptimeringen. Det er netop det denne proces kan. Her er den, du genkender sikker allerede dele som du udfører idag:

Optimeringsproces fra Weboptimering.nu

Over de næste 4 blogindlæg, vil jeg beskrive de enkelte faser:

Analyse
Kend dine kunders behov, spørgsmål og motivation – og beskriv dem i kundeportrætter. Brugertest på alle platforme og find problemer i interaktionen. Gennemfør review at analytics og vurdér konvertering på tværs af segmenter, kanaler, browsere og meget mere. Ud af analysen bygges fundamentet for strategisk optimering.

Hypotese og plan
Omsæt identificerede problemer til handling: Hvad skal ændres og med hvilken effekt. Prioriter indsatsen og læg en testplan.

Redesign
Design er en iterativ proces, hvor de mange muligheder løbende skal kvalitetssikres op mod testhypotese og testmål.

Splittest
Opsæt og kør splittest, inkl. segmentering og korrekt tracking. Forstå faldgruber og fejlkilder og brug resultaterne rigtigt. Alle kan splitteste, men man gør det ikke på en systematisk og valid måde.

Naturlig vil vi stille spørgsmål som:

  • Hvilke værktøjer indgår?
  • Hvilke produkter/dokumenter kommer der ud af fasen?
  • Hvilke udfordringer skal man forberede sig på?
  • Hvilke kompetencer er der brug for?
  • Hvilke resultater kan jeg forvente?

Spørgsmål som alle bør stille sig selv, hvis denne proces skal implementeres. Og det skal den, for det er og bliver måde fremtidens web, marketing, UX og whatever-team optimerer virksomhedens online forretning.

Har det din interesse?
Så følg mig på twitter @OlegUsability og følg med her på bloggen.

Udover at dele mine erfaringer og betragtninger med dig, tillader jeg mig at tilbyde dig 3 ting:

1) En konference om emnet: ConversionBoost.dk, 17. marts 2015

2) Undervisning i optimeringsprocessen, enten for din virksomhed via Weboptimering.nu eller som enkeltperson igennem UXmentor.dk (begge steder er kurserne på vej).

3) Konsulentbistand – ja, der kommer jeg til dig og lærer dig og din organisation hvordan. Eller gør arbejdet for jer.

Med andre ord, jeg lever og ånder den model – også for dig!

Vi ses – om ikke andet, så til den første fase her på bloggen: Analyse, hvor det skal handle om at indsamle viden om kunder og interaktioner, igennem interview, brugertest og analytics review.