Dårligt design vs. godt design: 5 eksempler, vi kan lære af

Det er ikke kun sjovt at se på eksempler på dårligt design sammen med modeksempler på godt design, men det er også en vigtig læring for designere. De fremhæver faldgruber, som designere skal undgå, og lader os forstå, hvordan man kan omsætte designteorier til løsninger, der fungerer i den virkelige verden. Jared Spool, den amerikanske forfatter, forsker og brugervenlighedsekspert, sagde engang: “Godt design, når det er godt udført, bliver usynligt. Det er kun, når det er dårligt udført, at vi lægger mærke til det.” Så lad os se på fem eksempler på åbenlyst dårligt design, kaste lys over, hvordan godt design får det til at fungere, og destillere nogle erfaringer, så vi alle kan skabe gode og usynlige oplevelser for vores brugere.

Information overload

Det dårlige: Parkeringsskilte i Los Angeles

Parkeringsskilte i Los Angeles (LA) har i årtier været indbegrebet af informationsoverbelastning. De har altid været notorisk svære at forstå, fordi færdselsreglerne er komplekse, hvilket resulterer i et behov for at formidle mange oplysninger på et lille område.

Hvor forvirrende er disse skilte? Traditionelt set meget – se på dette eksempel fra 2010’erne:

Author/Copyright-indehaver: Jorge Gonzalez. Copyright-betingelser og licens: CC BY-SA 2.0

Med hensyn til parkeringsskilte fra LA er dette eksempel allerede ret simpelt.

Forestil dig, at du er bilist på denne vej en tirsdag morgen kl. 9.00. Kan du parkere på dette sted? Det, der lyder som et simpelt spørgsmål, kræver en masse mental bearbejdning at besvare.

Som designere står vi ofte over for situationer, hvor vi skal designe, så mange oplysninger kan vises på et lille sted. Parkeringsskiltene i LA er måske et ekstremt tilfælde, men mange gange betyder design af mobilapps, at man står over for de samme problemer. Er der en udvej – både for parkeringsskiltene og for designere i almindelighed?

Det gode: Nikki Sylianteng’s parkeringsskilt

Det lyder som en umulig opgave at designe et skilt, der viser alle oplysninger og samtidig er let at forstå. Men det er præcis, hvad Brooklyn-designeren Nikki Sylianteng gjorde.

Author/Copyright-indehaver: Nikki Sylianteng. Copyright terms and license: CC BY-NC-SA 4.0

Nikkis foreslåede parkeringsskilt blev til sidst brugt i LA som en del af en prøvekørsel.

En del af grunden til, at Nikkis design1 fungerer godt, er, at det er brugercentreret: Nikki indså, at bilisterne blot ønsker at vide, om de kan parkere på et sted. Ja eller nej – det er alt, hvad bilisterne har brug for, og det er alt, hvad parkeringsskiltet viser.

Hendes design gjorde også brug af visuelle elementer i stedet for tekst til at formidle information. Resultatet er utroligt intuitivt: grønt for OK, rødt for parkering forbudt. Det er endda designet til farveblinde med striber for parkering forbudt.

Nu, når du ser på skiltet, ved du, at det er forbudt at parkere tirsdag kl. 9.00 om morgenen. Striberne viser, hvad der er hvad med ét blik – enkelt.

Lessons Learnt: Best Practice

• Forstå, hvad dine brugere har brug for, og design derefter ud fra det. Dette er med til at reducere informationsoverbelastning.
• Har du mange oplysninger, som du skal formidle til dine brugere? Prøv at bruge visuelle elementer i stedet for tekst. Få mere at vide om datavisualisering her.

Mystery Meat Navigation

Det dårlige: LazorOffice.com

Myteriet Mystery Meat Navigation (MMN), som Vincent Flanders fra Web Pages That Suck2 udnævnte i 1998, henviser til tilfælde, hvor destinationen for et link ikke er synlig, før brugeren klikker på det eller peger cursoren mod det. Udtrykket “mystery meat” var en henvisning til kød, der serveres i amerikanske folkeskolecafeterier, og som er så forarbejdet, at man ikke længere kan se den nøjagtige type.

MMN er dårligt, fordi det reducerer navigationselementers opdagelsesmuligheder. Det øger den kognitive belastning for brugerne, fordi de nu skal gætte, hvordan de skal navigere, eller hvad de skal gøre ved at klikke på noget.

Mens de fleste MMN findes på ældre websteder, er de overraskende hyppigt forekommende på moderne websteder. Tag for eksempel Lazor Office, et designfirma, der skaber præfabrikerede huse.

Author/Copyright-indehaver: Lazor Office, LLC. Copyright-betingelser og licens: Fair Use

LazorOffice.com har et gitter af MMN-billeder på sin hjemmeside. Som du kan se, giver dette tableau meget lidt indikation om, hvor man skal gå hen. I stedet er der ni billeder, som bare ligger og efterlader nogle af os til at tænke over en gåde i stedet for at interagere med en side.

Under deres hjemmeside ligger et gitter af miniaturebilleder og venter på at blive vist. Er de klikbare? Tja, ja – hvis du flytter musemarkøren over et billede, ændres den til en pointer. Men hvad sker der, når du klikker på et billede?

“Klik for at finde ud af det!” er aldrig en god User Experience (UX)-løsning. Der er stor sandsynlighed for, at dine brugere vil opgive deres navigation og finde en alternativ løsning på en konkurrents websted.

Det gode: Kursuskort på Interaction Design Foundations websted

G heldigvis er MMN-problemer nemme at løse. Det vigtigste er at være opmærksom på, at du skal tydeligt mærke links. Ved blot at tilføje “View project”, der vises ved musens hover, forbedres brugervenligheden på Lazor Office’s side ovenfor.

Author/Copyright holder: Interaction Design Foundation ApS. Copyright terms and license: Fair Use

Vores kursuskort er så u-mysteriøse som links kan være.

For Interaction Design Foundations kursuskort har vi ikke kun “View Course” nederst på hvert kort for at angive den handling, der vil ske, men vi har også en hover-status med teksten “Go to course”. Mange websteder følger en lignende konvention, og det bør du også gøre for at maksimere brugervenligheden på dit websted.

Lesson Learnt: Best Practice

Mærk altid dine links! Du ville ikke bryde dig om at spise mystisk kød – og på samme måde ville dine brugere ikke bryde sig om at klikke på mystiske links.

Tilføjelse af friktion til brugerhandlinger

Det dårlige: iFly50.com

Som designere bør vi tilføje friktion til brugerhandlinger med ekstrem forsigtighed, medmindre formålet er at afskrække brugerne fra at udføre den pågældende handling. Nogle gange kan vi dog endda utilsigtet tilføje friktion til brugerhandlinger (oftest af æstetiske eller nyhedsårsager), der resulterer i skadelig UX.

Et eksempel er iFly50.com, der blev oprettet i anledning af KLM’s jubilæum for iFly-magasinet. iFly 50 er et websted med vertikal rulning, der viser 50 rejsedestinationer, og på nogle destinationer (som f.eks. den nedenfor) beder en knap nær bunden brugerne om at klikke og holde den nede i et par sekunder for at se flere billeder.

Author/Copyright-indehaver: Ejendoms- og ophavsretshaver: Koninklijke Luchtvaart Maatschappij NV (KLM Royal Dutch Airlines). Copyright-betingelser og licens: Fair Use

iFly 50 forventer, at dets brugere skal klikke og holde den inde i et par sekunder, hver gang de vil se flere fotos.

Den handling, der tilføjer et par sekunders friktion til hver handling, kan resultere i en enormt dårligere UX. Forestil dig, at du i stedet for at klikke for at indlæse en side med det samme, nu skal klikke og holde nede i to sekunder for hvert link, du klikker på i din browser. Du vil helt holde op med at udforske internettet efter et par klik og holdninger.

Mange gange har vi designere en tendens til at lade os rive med af de nyeste interaktionsstile eller handlinger, men det er afgørende, at du altid udviser forsigtighed, når dit design kan tilføje friktion til brugerhandlinger. Det meste af tiden fungerer afprøvede og testede konventioner (f.eks. enkle klik eller swipes) perfekt.

Det gode: Elastic Scrolling på iOS

Interessant nok kan det at tilføje friktion til brugerhandlinger med omtanke resultere i et godt design. En af Apples mest populære opfindelser i deres mobile styresystem, iOS, er oprettelsen af elastisk scrolling, hvor det i visse situationer (f.eks. i slutningen af en webside) bliver stadig vanskeligere at scrolle.

Author/Copyright holder: Interaction Design Foundation ApS. Copyright terms and license: I iOS’ elastiske scrolling tilføjes der bevidst friktion i visse situationer.

Du kan se dette i aktion ovenfor, hvor der opstår øget friktion, når brugeren scroller til enden af websiden. Friktion blev tilføjet for at angive situationer, hvor scrolling ikke længere er tilladt: og effekten er en intuitiv oplevelse.

Lærdom: Best Practice

Undgå så vidt muligt at tilføje enhver form for friktion til brugerhandlinger – og implementer det omhyggeligt, når du ikke har noget alternativ.

“Smart” design, der ignorerer brugervenlighed

Det dårlige: Bolden.nl

Sommetider kan smarte designs være skadelige for UX. Hvad der gør denne fejl mere farlig er, at vi designere elsker smarte designs. De er små grafiske vidundere, der bringer et smil frem på vores læber. Desværre er størstedelen af mennesker ikke designere. Endnu mere trist er det, at ikke alle smarte designs er gode designs, især ikke når de skaber problemer med tilgængelighed, opdagelsesmuligheder eller brugervenlighed.

Tag for eksempel det hollandske strategiske design- og udviklingsstudie Bolden’s website:

Author/Copyright holder: Bolden. Copyright-betingelser og licens: Fair Use

Kan du se, hvad deres hjemmeside forsøger at sige? Nej? Det skyldes, at du er nødt til at flytte musen til hjørnet af siden for at se budskaberne ordentligt.

Author/Copyright holder: Bolden. Copyright-betingelser og licens: Fair Use

Er dette et smart design? Ja, helt sikkert. Men er det et dårligt design? Absolut!

Dette er et godt eksempel på design til designeren snarere end til brugeren: webstedet reducerede i høj grad læsbarheden af sine overskrifter, da skaberne var fast besluttet på at levere et nyt design. Den, der har designet dette, har også udeladt tekst for at fortælle brugerne, at de skal flytte musen til hjørnerne, hvilket betyder, at opdagelsen af overskrifterne er afhængig af tilfældighederne. Desuden er kontrasten mellem teksten og baggrunden dårlig, selv når overskriften er afsløret, fordi man stadig kan se overlappende tekst. Alt dette er med til at skabe et uvenligt websted.

Det gode: CultivatedWit.com

Cultivated Wit’s hjemmeside er et godt modeksempel på, at smart design ikke behøver at gå ud over brugervenligheden.

Author/Copyright-indehaver: Cultivated Wit. Copyright-betingelser og licens: Fair Use

Cultivated Wit’s hjemmeside viser en illustreret ugle.

På Cultivated Wit’s hjemmeside blinker illustrationen af uglen, når musen bevæger sig hen over den:

Author/Copyright holder: Cultivated Wit: Cultivated Wit. Copyright-betingelser og licens: Fair Use

Surprise! Uglen blinker til dig, når du peger cursoren mod den. Bemærk også den kloge tildeling af whitespace.

Den vigtigste forskel her er, at dette ikke udgør en væsentlig del af webstedet, så det forringer ikke brugervenligheden, selv om brugeren ikke opdager dette smarte designelement.

Dertil kommer, at de har en tydelig pil, der peger nedad, for at antyde, at der ligger noget under folden. Og når du scroller nedad, vil du se dette:

Author/Copyright-indehaver: Cultivated Wit. Copyright-betingelser og licens: Fair Use

Og websteder kan være kloge uden at ofre UX.

Kopien (som er læselig og har god kontrast) skaber en følelse af humor – ikke ulig det, som Bolden forsøgte at opnå – uden at forringe webstedets UX. Det eneste lille problem er, at teksten “Join our email club” burde være mere synlig, men som helhed er Cultivated Wit’s website et godt eksempel på at levere et smart design uden at skabe dårlig UX.

Lesson Learnt: Best Practice

Smart design bør altid laves så idiotsikre som muligt og/eller testes på faktiske brugere. Nogle gange kan smarte designs give bagslag og skade brugervenligheden.

Superflødige animationer

Det dårlige: PayPal kvitteringskoncept på Dribbble

Animationer er et vigtigt element i interaktionsdesign, men de bør altid tjene et formål. De bør aldrig laves for animationens skyld. Desværre har designere en tendens til at have et kærlighedsforhold til animationer, til dels fordi animationer er så sjove at skabe, at vi måske ikke ved, hvornår vi skal stoppe.

Vladyslav Tyzuns animationskoncept for en PayPal-e-mailkvittering, der er lagt ud på Dribbble, er et eksempel på animation udført forkert:

Author/Copyright-indehaver: Vladyslav Tyzun. Copyright-betingelser og licens: Fair Use.

Animationen er smuk, men overflødig. I alt tager det hele 3,5 sekunder at se transaktionsdetaljerne. En simpel indblænding af kvitteringen ville være mere elegant, og fordi det tager mindre tid, ville det også være bedre for brugeren.

Dette problem bliver farligt, når designere tilsyneladende ikke kan få nok af animationer. Fra 2016 ville Vladyslavs animation modtage mere end 500 likes og 8.000 visninger. Dette viser en misforstået påskønnelse, som designere har af animation for animationens skyld. Hvis du har indsigt i designernes tendens til at foretrække svævende epos frem for mere direkte repræsentationer og fanger dig selv, før du giver efter for animationer, vil du spare dig selv for en masse tid og undgå mange hovedpiner. Husk, at brugerne kommer til websteder med et formål – vi ønsker at vise dem, hvad de er ude efter på kort tid, og ikke at fastholde dem i en stor rundvisning i galleriet.

Det gode: Stripe Checkout’s Animation

Når vi laver animation målrettet, kan resultaterne dog være fantastiske. Se Stripe Checkout’s animation, når brugeren modtager en bekræftelseskode:

Author/Copyright-indehaver: Stripe, Inc. Copyright-betingelser og licens: Fair Use.

Stripe bruger animationer til at få tingene til at virke hurtigere, end de er: Den giver brugerne opdateringer (som “Sendt”), selv om de måske ikke har modtaget SMS’en endnu. Dette forhindrer brugerne i at føle sig frustrerede over at skulle vente og giver dem sikkerhed for, at SMS’en er på vej lige nu.

Rachel Nabors, der er ekspert i webanimationer ved W3C, foreslår fem principper, som man skal huske på ved udformning af animationer3:

1. Animer bevidst: Gennemtænk hver animation, før du skaber den.
2. Det kræver mere end 12 principper: Disneys 12 animationsprincipper fungerer til film, men ikke nødvendigvis til websteder og apps.
3. Først nyttigt og nødvendigt, så smukt: Æstetik bør træde i baggrunden i forhold til UX.
4. Gå fire gange hurtigere: Gode animationer er diskrete, hvilket betyder, at de kører hurtigt.
5. Installer en kill switch: For store animationer som f.eks. paralekseffekter skal du oprette en opt-out-knap.

Lesson Learnt: Best Practice

Gør altid din animation målrettet: For meget kan dræbe et produkts UX. Skønhed skal trække sin vægt og være funktionel.

Den vigtige pointe

Er det ikke sjovt at se på eksempler på dårligt design? Heldigvis er det også lærerigt. Her er de vigtigste erfaringer og bedste praksis fra de fem eksempler på godt og dårligt design:

1. Forstå, hvad dine brugere har brug for, og giv dem derefter den information.
2. Hvis du har mange oplysninger, du skal formidle, så prøv at bruge visuelle elementer i stedet for tekst.
3. Mærk altid dine links! Brugerne bryder sig ikke om mystiske links.
4. Undgå at tilføje nogen form for friktion til brugerhandlinger, medmindre det er meningen, at de skal afskrække fra handlingen.
5. Test dine smarte designs, og inddrag dem med forsigtighed.
6. Animation er som en forbandelse. Hvis du bruger den for meget, mister den al sin virkning.4

Næste gang du rynker panden over et eksempel på dårligt design, så stop op og tænk dig om: forstå, hvorfor designet mislykkedes, find eksempler på design, der gjorde tingene rigtigt, og noter dig mentalt den lektie, du har lært. Og del derefter kærligheden: del din lektie med andre designere i vores diskussionsforum!