Godt webdesign vs. dårligt webdesign

Godt webdesign er noget man kan måle. Det handler ikke (kun) om æstetik, men primært om, hvorvidt det fungerer og om brugerne oplever at det fungerer.

Funktionalitet kan gradbøjes og brugeroplevelsen er naturligvis kompleks, og farvet af mange ting, men begge dele er noget man kan forholde sig objektivt til. Og det bør man gøre, når man står overfor at skulle skabe eller forbedre et website eller en anden IT-løsning.

Ofte sker det imidlertid, at en dialog om design tager udgangspunkt i, hvad man selv synes og føler vedr. det æstetiske aspekt af designet. Sådan en dialog, der tager udgangspunkt i ens egen smag, afsporer designprocessen. Målet bør ikke være flot design, men godt design (der er dog en sammen­hæng, som vi vender tilbage til). Designet har altid til formål at løse en opgave, hvad enten brugerne skal kunne finde information, købe en vare eller noget tredje.

Men hvad er så godt og dårligt design, hvis det ikke (kun) handler om de smukkeste billeder, former og farver? Hvordan kan man forholde sig objektivt til funktionalitet og brugernes subjektive oplevelse af webdesign?

Lad os tage et par eksempler.

Jeg vil sammenligne forsiderne fra to forbrugerorienterede websites, der begge er drives af redaktionelt indhold: computermagasinet PCWorld og avisen The Boston Globe. Store medier, der begge har brugt kræfter på at bygge netudgaver af deres publikationer, dog med vidt forskelligt resultat.

Jeg vurderer kun designet som det fremstår, når man kommer direkte ind på forsiden – ikke interaktionen eller undersiderne. En brugertest ville afsløre flest detaljer, men det er også muligt at sige noget generelt om egnetheden af webdesign, på baggrund af videnskabelige undersøgelser, der har afdækket fakta om generel brugeradfærd. Det er sådan en form for heuristisk undersøgelse, de to websites underkastes her.

Dårligt design: PCWorld.com

Screenshot af PCWorld.com
PCWorld.com på mellemstor skærm. Bemærk den ukonventionelle opsætning og den horisontale scrollbar (klik for at forstørre).

Den amerikanske version af det globale computermagasin PCWorld, fik et nyt webdesign i september 2012. Den nye version af PCWorld.com har fået et tidssvarende look, er baseret på HTML5 og designet er responsivt; Det kan tilpasse sig forskellige skærmstørrelser, hvormed det bl.a. er mobil­venligt. Man har gjort sig umage, og relanceringen har næppe været helt billig. Desværre er det nye design en mindre katastrofe, hvad angår brugervenligheden. Websitet blevet svært at forstå og anvende.

  1. Det er svært at scanne forsiden med øjnene. Brugere skimmer websites før de læser, hvilket er svært her. PCWorld-logoet er placeret godt i toppen, men smelter næsten i ét med indholdet og hvor er hovedmenuen? Der er generelt kamp om pladsen. Siden er som et patchwork af små artikel­uddrag, links til kommercielt indhold og annoncer. Man har forsøgt at lave et hierarki på sidens øvre del, for at guide brugerne, men tilgangen er i det store hele fejlslagen. Det ville være bedre at give hvert uddrag mere plads, med de vigtigste fremhævet i toppen (under menuen). Brugere scroller gerne efter indhold, omend 80% af tiden bruges over sidens fold.

  2. Sidens top ligner reklamer. Sidens top, det mest dyrebare område, domineres af nogle store artikel-grafikker. Det er problematisk at placere indhold oven over hovedmenuen. Det er svært at se hvor det hører til, og det ligner nemt bannerreklamer, hvilket medfører at mange brugere vil ignorere det. Fænomenet kaldes banner blindness.

  3. Hovedmenuen er underprioriteret på bekostning af overblikket. Hovedmenuen er hjertet i ethvert indholdssite og bør placeres helt centralt. Eye-tracking studier viser, at brugernes øjne generelt skimmer websites oppefra og ned, fra venstre mod højre, i et F-formet mønster. Derfor er en mere konventionel placering af menuen øverst på siden og/eller helt til venstre mere brugervenligt. Sproget i menuen er gennemskueligt, bort set fra det første punkt, “WHAT’S HOT”. Man kunne tro at det var et link til nyheder, men hvorfor så ikke kaldet det “NEWS”? Endvidere er de fleste af menuens links skrevet med tynd skrifttype, i en farve der er lysere end størstedelen af sitets øvrige tekst, hvilket heller ikke hjælper til at fremhæve menuen.

  4. Søgefunktionen er placeret godt, men er alligevel utydelig. Brugere vil typisk forvente at finde søgningen øverst til højre, som set her. Imidlertid er søgefeltet lagt oven på et baggrundsbillede med tilhørende tekstboble, og er sidestillet med fire links der ikke har med søgning at gøre. To af dem peger tydeligvis til eksternt indhold på Facebook og Twitter. Det virker forvirrende. Objekter der er grupperet sammen opfattes typisk som samhørige, viser psykologiske studier. Deraf gestaltlovenes princip om nærhed. Det kan fremstå som om søgningen og billedet/teksten hænger sammen: Hvad er det man kan søge i? Det ville være mere logisk at placere søgefeltet nær menuen.

  5. Funktioner er utilgængelige i mellemstor skærmopløsning. Layoutet er ca. 70 pixels for bredt til at kunne vises i sin helhed, med en skærmopløsning på 1024×768 pixels (indbefatter bl.a. iPad). Det medfører at bladrefunktionen i den horisontale karrusel under menuen, ikke fungerer for disse brugere. Heller ikke hvis de scroller sidelæns. De sølle ekstra 70 pixels kunne undværes. Layoutet gør sig faktisk bedre på helt små skærmstørrelser.

  6. Hovedmenuen knækkes over i stor skærmopløsning. Det responsive design tager ikke kun højde for mobile brugere, men også brugere med store skærme. Disse brugere får vist en ekstra spalte til højre, hvor der ellers ville være tom plads. Desværre har man valgt, at flytte de tre første menupunkter over i denne spalte. Således bliver hovedmenuen splittet, og de punkter der før havde den mest prominente placering i menuen, er nu rykket ud til højre og vises som faneblade. Som sagt matcher det ikke mønsteret som brugernes øjne generelt scanner skærmbilledet i. Vi ved at venstre del af skærmen får over dobbelt så meget opmærksomhed.

Godt design: BostonGlobe.com

Screenshot af BostonGlobe.com
BostonGlobe.com på mellemstor skærm. Bemærk opsætningens umiddelbare enkelhed (klik for at forstørre).

Netudgaven af avisen The Boston Globe, har ligeledes fået en overhaling for nylig. Også denne hjemmeside er baseret på HTML5 og har responsivt design. Der er endvidere nogle grundlæggende ligheder med PCWorld.com, f.eks. det flerspaltede design og blandingen af artikeluddrag, kommercielt indhold og annoncer. Alligevel er det en helt anden verden. BostonGlobe.com er et eksempel på temmelig godt webdesign med kun få mangler.

  1. Designet ligner det det er – en avis. Det er nemt at gennemskue, hvad hjemmesiden går ud på, og forsiden er lettere at overskue. Med sit konventionelle layout er det tydeligt, at sidetoppen rummer navigationen, mens det nedenunder er selve indholdet. Dog kunne logoet med fordel have været anbragt til venstre, i stedet for i midten, jf. eye-tracking studierne. Vejrudsigten optager den mest prominente plads i designet, og burde måske placeres nede ved det øvrige indhold.

  2. Tydelig og gennemskuelig hovedmenu og søgefunktion. Med sin prominente placering på tvært af sidens top er hovedmenuen er let at finde og menupunkternes navne svarer ca. til sektionerne i en avis. Søgefunktionens placering er ligeledes optimal, og med sin nære placering til hovedmenuen fremstår den som en del af websitets navigation. Sidens top rummer endvidere arbitrære annoncelinks og links vedr. abonnement, men de er grupperet for sig og adskilt fra hovedmenuen, så de støjer ikke, modsat på PCWorld.

  3. Indholdet er forholdsvis tydeligt opdelt. Det er nemt at identificere tophistorien, idet den både er placeret mere prominent, øverst til venstre i indholdsspalten, og har et større billede. Ligeledes er der et hierarki i de øvrige artikeluddrag, hvormed man undgår at de slås om pladsen som hos PCWorld. Dog er Boston Globes brug af spalter ikke helt gennemskuelig. Venstre side, der som sagt får størst opmærksomhed hos brugerne, er godt udnyttet, men overskriften “Latest news” virker malplaceret i midterspalten (opløsninger på 768×1024 og derover). Hvis midten er seneste nyt, hvad er det til venstre så? Om ikke andet kunne venstrespalten få sin egen overskrift. Eye-tracking studier viser, at der både er fordele og ulemper ved flerspaltede webdesigns.

  4. Layoutet fungerer godt i alle gængse skærmstørrelser. Al funktionalitet bevares umiddelbart og sidens elementer folder sig nydeligt ind under hinanden på små skærme og ud igen på store. Logoet, hovedmenuen og søgefunktionen bevarer deres placering, samlet i toppen. Uanset om websitet tilgås på smartphone, tablet eller en stor skærm, er funktionen og overskueligheden bevaret.

Godt design handler ikke (kun) om æstetik

Ovenstående sammenligning skelner mellem godt og dårligt design, baseret på evidens. Hvis man lavede en brugertest med rigtige brugere, evt. eye-tracking, ville resultatet med al sandsynlighed lægge sig i forlængelse af den eksisterende viden om, hvordan hjemmesider opfattes. Man ville kunne måle, hvor godt de fungerer. Man må erkende at design ikke kan reduceres til æstetik – det skal først og fremmest løse en opgave.

Sammenhæng mellem usability og æstetik

Udseendet er imidlertid vigtigt. Det ved vi ligeledes fra usability-studier, der viser at brugernes subjektive oplevelse af det visuelle design, påvirker opfattelsen og motivationen til at bruge websitet. Brugernes oplevelse af webdesignets æstetik, ville ligeledes kunne undersøges i en brugertest, hvormed man også bliver i stand til at forholde sig til dette aspekt.

Man ser også, at websites med høj brugervenlighed opfattes flottere end sites med ringe brugervenlighed. Tænk på et website som Google. Er det specielt smukt og kunstfærdigt? Sandsynligvis har du ikke skænket det mange tanker, fordi Google simpelthen leverer varen, hurtigt og nemt. Det pudsige er dog, at websites der opfattes som flotte opfattes også brugervenlige.

Med andre ord må man både arbejde med usability og det rent grafiske. Inden for grafisk design arbejder man ligeledes med principper, der har til formål at understøtte funktionalitet (typografiske hierarkier, grids, farveteori etc.). Kombineret med den brugercentrerede tilgang er det et stærkt våben. The Boston Globe er et godt eksempel på, hvordan formen følger funktionen.

Helstøbte oplevelser med UX

Det lyder jo dejligt med alle disse objektive kendsgerninger, men man kan ikke nøjes med at sætte sig ind i de nyeste usability-studier, og regne med at alt derefter løser sig. Man er nødt til at lave noget brugerresearch, for at komme i dybden med brugernes subjektive, følelsesmæssige oplevelse af ens design. User experience (UX)-tilgangen bygger netop bro mellem de objektive og subjektive aspekter af brugeradfærden, og er den bedste simpleste vej til succes. Sådan bliver man i stand til at sætte sig ud over sin egen smag, både som designer og kunde. Det er brugerne det handler om.

For en god ordens skyld vil jeg nævne, at jeg ikke er affilieret med hverken PCWorld eller The Boston Globe, og at denne sammenligning kun er lavet som et hurtigt, uafhængigt case-studie.

Læs mere om vores usability- og UX-ydelser

Skriv et svar

Din e-mail-adresse vil ikke blive offentliggjort. Krævede felter er markeret med *

Disse HTML koder og attributter er tilladte: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>