Brugervenligt layout. 4 principper for brugervenligt webdesign
juni 23rd, 2008. Kategori: Brugervenlighed, DesignMan kan overordnet dele brugervenligt webdesign op i to områder: brugervenligt layout og brugervenlige tekster.
I denne artikel fokuserer jeg på brugervenligt layout. Jeg har jeg samlet de 4 vigtigste principper for brugervenlighed i layout og webdesign. Valget af de 4 principper er 100% subjektivt og er baseret på studier af brugervenlighedseksperter som Jakob Nielsen, Rolf Molich og Steve Krug, krydret med egne erfaringer.
4 principper for brugervenligt layout
I et brugervenligt layout er det vigtigt at:
- Sørge for tydelige hierarkier
- Dele siden op i tydeligt definerede områder
- Benytte konventioner, der er opstået omkring Internettet
- Minimére støj
Tydelige hierarkier
Med et tydeligt hieraki viser vi, hvad der er vigtigt og mindre vigtigt. Det gør det lettere for brugeren at overskue siden. Brugeren skal hverken bruge energi på at finde det væsentlige, eller på at afgøre hvad, det væsentlige er. Han kan gå direkte i gang med at undersøge, om det vi tilbyder, er det han leder efter.
Et tydeligt hierarki vil gøre brugeroplevelsen bedre og mere flydende, og typisk efterlade brugeren med mere energi og fokus til de væsentlige opgaver på siden.
Steve Krug: ”A good visual hierarchy saves us work by preprocssing the page for us, organizing and prioritizing its contents in a way that we can grap almost instantly.”
Hierarkier skaber vi f.eks. med bevidst brug af grafiske og typografiske kontraster. F.eks. størrelseskontrasten, som er den mest åbenlyse. Men også farvekontraster er gode til at skabe hierarkier med.
Kun tydelige kontraster skaber tydelige hierarkier. Brug af subtile kontraster kan være gode til signalere eksklusivitet og seriøsitet, men i forhold til at skabe tydelige hierarkier i et brugervenligt webdesign, er de ikke meget bevendt.
Tydeligt definerede områder
En side bliver mere overskuelig, hvis siden er opdelt i flere mindre og veldefinerede områder. Inden for hvert område anbringer man så beslægtede former for information. I et brugervenligt layout skal vi opdele en sides mange elementer i 4-7 overordnede kategorier.
7 er et magisk tal i menneskelig perception. Mennesker er maksimalt i stand til at overskue 7 elementer. Hvis der optræder flere skal vi f.eks. tælle for overskue, hvor mange der er. Det vil sige, at hvis vi arbejder med områder med mere end 7 elementer er det mest brugervenligt at dele op i kategorier. Det er også derfor man anbefaler at menuer max indeholder 7 punkter.
Eyetracking studier viser, at brugerne meget hurtigt bestemmer hvilke sektioner på en webside, der indeholder de brugbare informationer. De øvrige områder bliver ofte ignoreret. Et godt eksempel fra vores hverdag er vores evne til at ignorere bannerreklamer i toppen af en side. Den slags ”ubevidste” valg træffer vi mange af, især hvis siden samtidig følger konventionerne.
Når man skal inddele websiden i tydeligt definerede områder er gestaltlovene et godt redskab at bruge.
Konventioner på nettet
I det brugervenlige webdesign, er det vigtigt at benytte sig af de konventioner, der findes på nettet. Nogle af de mest udbredte konventioner er:
- Understreget tekst er links
- Vandrette lister i toppen af sitet og lodrette lister i venstre side er menuer
- Når man klikker på logo/navn kommer man til forsiden
- Kontaktoplysninger kan findes i footeren
Der er måske ikke meget prestige for webdesignere i at følge konventionerne, da layoutet og det grafiske udtryk kan blive opfattet som kedeligt. Det webdesigneren laver i dag, ligner det han designede i går. Og ofte har kunderne også en forventning om, at professionelle webdesignere skal levere designs, der er anderledes og iøjnefaldende.
Men som brugere er vi som regel glade for traditionelle løsning, da de er lette at afkode. Funktionerne er lette at finde og vi føler os generelt trygge ved et websted med få overraskelser. Den grafiske oplevelse er oftest underordnet for brugeren. Flot grafisk design kan være lækkert, men det væsentligste er, at det ikke står i vejen for brugeroplevelsen på siden.
Ifølge Jakob Nielsen (http://www.useit.com/alertbox/20040913.html) sikrer brug af konventioner og standarder at brugerne:
- ved hvilke funktioner de kan forvente
- ved hvordan disse funktoner vil se ud på grænsefladen
- ved hvor man kan finde funktionerne på siden og på sitet
- ved hvordan man skal bruge funktionerne for at nå sine mål
- behøver ikke at bruge tid på at gennemskue ukendte designelementer
- overser ikke vigtige funktioner, fordi de ikke ligner standard design elementer
Disse fordele øger brugerens muligheder for at opnå deres mål med besøget. Og det giver dem en fornemmelse af at beherske hjemmesiden og øger dermed deres tilfredshed med websitet.
Minimér støj
Jo flere forskellige elementer, der er på siden, jo højere er risikoen for støj. Støjen kan komme fra flere typer af elementer. Det kan f.eks. dreje sig om:
- Grafisk støj.
Undgå unødig pynt. Grafik skal have en mening. - Multimedie-elementer.
Det kan være musik, flash eller film, der starter op uden brugeren har klikket på dem. - For mange informationer.
Der kan simpelt være for mange informationer på for lidt plads. Hvis et website er informationstungt er det vigtig at finde nogle gode overskuelige strukturer. Hvis for meget information bliver præsenteret for brugeren på engang risikere vi, at han mister overblikket. Hvis det ikke er muligt at bortsortere informationer, er det vigtigt at opdele informationerne i kategorier (se ovenfor). - For mange funktioner.
Undgå funktioner for funktionernes egen eller din skyld.
Rolf Molich om brugervenligt webdesign: ”… mine samtaler med typiske brugere viser, at brugere typisk kun udnytter 20-30 % af funktionaliteten. Resten er set fra brugerens synspunkt overflødigt – eller direkte forstyrrende for den enkle betjening og det hurtige overblik.”
Mere om brugervenligt layout
Der findes et hav af ressourcer til mere viden om brugervenligt webdesign. Læs Steve Krugs bog: “Don’t make me think” eller Rolf Molichs: “Brugervenligt webdesign”.
Når man snakker brugervenligt webdesign slipper man selvfølgelig heller ikke uden om Jacob Nielsens alert box.
Min sammenfatning om brugervenligt layout og brugervenligt webdesign stammer fra min hovedopgave om Tilgængelighed på Internettet (pdf 0.7 mb).
9 Responses to “Brugervenligt layout. 4 principper for brugervenligt webdesign”
By Kim Andersen on jun 23, 2008
Super god artikel Niels!
Man kan jo faktisk bruge denne artikel som en tjek-af-liste, når man skal udvikle. I hvert fald til de fleste opgaver.
Jeg ved godt det er brugervenligt, men må indrømme at der somme tider skal noget, ikke unødig, men måske mindre relevant grafik til på et design, for at det ikke bliver for kedeligt.
Det kan også godt være det bare er mig, der har samme opfattelse som du også skriver at mange kunder/virksomheder/klienter har. Nemlig at en designer skal levere et nyt, spændende og endnu mere iøjnefaldende design fra den ene dag til den anden…
By Niels on jun 23, 2008
Ang. pynten er jeg tildels enig, Kim. Men hvis det er for at undgå at det bliver for kedeligt, har så grafikken jo også en vis mening. 😉
Eller du kan bruge grafikken til at formidle et visuelt budskab/identitet, og så har grafikken også mening. Det væsentlige er vel at man ikke bare bevidstløst smækker grafik på for bare at pynte.
Men hvis man skal skære helt ind til benet, så tror jeg faktisk hovedparten af brugerne er ret ligeglade. Det overskyggende vigtige for dem er at informationerne er let tilgængelige.
By Martin on jun 23, 2008
Super god gennemgang Niels, selvom brugervenlighed hænger mig lidt ud af halsen efter en kandidatafhandling der delvist omhandlede det, ja så var det spændende at læse denne gennemgang.
Du har skåret ind til benet og fået det relevante med… thumbs up!
Det gode gamle KISS princip gælder jo som altid, desværre er der mange webbureauer der har glemt alt om dette
By Michael on jun 23, 2008
Fantastisk artikel, Niels. Den ryger straks videre til mine kollegaer på arbejdspladsen – et webbureau 😉
Har faktisk fået brugervenlighed, som et fokusområde, da jeg bl.a. selv synes det kan være spændende nok – i hvertfald på den designmæssige del.
Jeg hæfter mig også tit ved, at gode informative sider taber brugeren på gulvet. Et eksempel, som jeg elsker at kritisere, er skat.dk – Har den holdning, at det kunne være 10 gange mere simpelt. Det undrer mig især, når de gerne vil have, at enhver skal benytte den service fremfor de gode gamle papirform 😐
Anyway, jeg vil foreslå at vi køber den bog af Steve Krugs på min arbejdsplads. Kender personligt ikke til den, så tror bestemt det kunne være spændende læsning. Her kan jeg iøvrigt foreslå “Deliver First Class Web Sites – 101 Essential Checklists” af Shirley Kaiser. En bog med rigtig mange gode pointer – en seriøs bog 🙂
By Niels on jun 23, 2008
Steve Krugs bog er fantastisk. Han bliver “beskyldt” for at hans bog henvender sig til begyndere i brugervenlighed. Blandt andet fordi han koger tingene ned til det væsentlige. Og selv følger sine egne råd.
Jeg tror, at der hvor det nogle gange kikser for os små designere, er der kan være for mange regler at forholde sig til. Jeg f.eks. er også vild med Jakob Nielsen råd om brugervenlighed. Men han har mange, og der er nogle gange langt mellem, dem jeg kan bruge til noget.
Lyder også lidt som om det måske er de vanvittige mange gode råd og intentioner, Martin er ved at kløjs i. 😉
Og tak for tippet. Shirley Kaiser er røget på ønskelisten. 🙂
By Martin on jun 24, 2008
Kan også kun anbefale Don’t make me think – absolut en af de bedste bøger om usability. En anden bog som næsten er et must er
Information Architecture for the World Wide Web .
Og skal man ha lidt tekstuel brugervenlighed med er Hot Text, Webwriting that Works fantastisk.
Brugervenlighed er et utroligt spændende område, men efter et 8 måneders forløb ja så selv her et år efter så er det noget der godt kan hænge en ud af halsen.