{"id":149,"date":"2008-06-23T07:45:14","date_gmt":"2008-06-23T06:45:14","guid":{"rendered":"http:\/\/www.nielsgamborg.dk\/wordpress\/brugervenlighed\/brugervenligt_layout.htm"},"modified":"2008-06-23T07:45:14","modified_gmt":"2008-06-23T06:45:14","slug":"brugervenligt_layout","status":"publish","type":"post","link":"https:\/\/nielsgamborg.dk\/wordpress\/brugervenlighed\/brugervenligt_layout.htm","title":{"rendered":"Brugervenligt layout. 4 principper for brugervenligt webdesign"},"content":{"rendered":"<p>Man kan overordnet\u00a0dele brugervenligt webdesign\u00a0op i to omr\u00e5der: <strong>brugervenligt layout <\/strong>og <a title=\"Brugervenlige tekster\" href=\"http:\/\/www.nielsgamborg.dk\/?p=brugervenlige_tekster\">brugervenlige tekster<\/a>.<\/p>\n<p>I denne artikel fokuserer jeg p\u00e5 brugervenligt layout.\u00a0Jeg har\u00a0 jeg samlet de 4\u00a0vigtigste principper for brugervenlighed i\u00a0layout og webdesign. Valget af de 4 principper\u00a0er 100% subjektivt og er baseret p\u00e5 studier af brugervenlighedseksperter som Jakob Nielsen, Rolf Molich og Steve Krug, krydret med egne erfaringer.<!--more--><\/p>\n<h3>4\u00a0 principper for brugervenligt layout<\/h3>\n<p>I\u00a0et brugervenligt layout er det vigtigt at:\u00a0<\/p>\n<ul>\n<li>S\u00f8rge for tydelige hierarkier<\/li>\n<li>Dele siden op i tydeligt definerede omr\u00e5der<\/li>\n<li>Benytte konventioner, der er opst\u00e5et omkring Internettet<\/li>\n<li>Minim\u00e9re st\u00f8j<\/li>\n<\/ul>\n<h3>Tydelige hierarkier<\/h3>\n<p>Med et tydeligt hieraki viser vi, hvad der\u00a0er vigtigt og mindre vigtigt. Det\u00a0g\u00f8r det\u00a0lettere for brugeren at overskue siden.\u00a0 Brugeren skal hverken bruge energi p\u00e5 at finde det v\u00e6sentlige, eller p\u00e5 at afg\u00f8re hvad, det v\u00e6sentlige\u00a0 er. Han kan g\u00e5 direkte i gang med at unders\u00f8ge, om det\u00a0vi tilbyder, er det han leder efter.<\/p>\n<p>Et tydeligt hierarki vil g\u00f8re brugeroplevelsen bedre og mere flydende, og typisk efterlade brugeren med mere energi og fokus til de v\u00e6sentlige opgaver p\u00e5 siden.<\/p>\n<p>Steve Krug: \u201d<em>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<\/em>.\u201d<\/p>\n<p>Hierarkier skaber vi f.eks. med bevidst brug af grafiske og typografiske <a title=\"Kontraster i webdesign\" href=\"http:\/\/www.nielsgamborg.dk\/?p=kontrast\">kontraster<\/a>. F.eks. <a title=\"St\u00f8rrelseskontrast\" href=\"http:\/\/www.nielsgamborg.dk\/?p=kontrast&amp;u=formkontraster\">st\u00f8rrelseskontrasten<\/a>, som er den mest \u00e5benlyse. Men ogs\u00e5 farvekontraster er gode til at skabe hierarkier med.<\/p>\n<p>Kun tydelige kontraster skaber tydelige hierarkier. Brug af subtile kontraster kan v\u00e6re gode til signalere eksklusivitet og seri\u00f8sitet, men i forhold til at skabe tydelige hierarkier i et brugervenligt webdesign, er de ikke meget bevendt.<\/p>\n<h3>Tydeligt definerede omr\u00e5der<\/h3>\n<p>En side bliver mere overskuelig, hvis siden er opdelt i flere mindre og veldefinerede omr\u00e5der. Inden for hvert omr\u00e5de anbringer man s\u00e5 besl\u00e6gtede former for information. I et brugervenligt layout skal vi opdele en sides mange elementer i\u00a04-7 overordnede kategorier.<\/p>\n<p>\u00a07 er et magisk tal\u00a0i menneskelig perception.\u00a0\u00a0Mennesker\u00a0er maksimalt i stand til at overskue 7 elementer. Hvis der optr\u00e6der flere skal vi f.eks. t\u00e6lle for overskue, hvor mange der er. Det vil sige, at hvis vi arbejder med omr\u00e5der med mere end 7 elementer er det mest brugervenligt at dele op i kategorier. Det er ogs\u00e5 derfor man anbefaler at menuer\u00a0max\u00a0indeholder 7 punkter.<\/p>\n<p>Eyetracking studier viser, at brugerne meget hurtigt bestemmer hvilke sektioner p\u00e5 en webside, der indeholder de brugbare informationer. De \u00f8vrige omr\u00e5der bliver ofte ignoreret. Et godt eksempel fra vores hverdag er vores evne til at ignorere bannerreklamer i toppen af en side. Den slags \u201dubevidste\u201d valg tr\u00e6ffer vi mange af, is\u00e6r hvis siden samtidig f\u00f8lger konventionerne.<\/p>\n<p>N\u00e5r man skal inddele websiden i tydeligt definerede omr\u00e5der\u00a0er <a title=\"Gestaltlovene\" href=\"http:\/\/www.nielsgamborg.dk\/?p=gestaltlovene\">gestaltlovene<\/a>\u00a0 et godt redskab at bruge.<\/p>\n<h3>Konventioner p\u00e5 nettet<\/h3>\n<p>I det brugervenlige webdesign, er det vigtigt at benytte sig af de konventioner, der findes p\u00e5 nettet. Nogle af de mest udbredte konventioner er:<\/p>\n<ul>\n<li>Understreget tekst er links<\/li>\n<li>Vandrette lister i \u00a0toppen af sitet og lodrette lister i venstre side er menuer<\/li>\n<li>N\u00e5r man klikker p\u00e5 logo\/navn kommer man til forsiden<\/li>\n<li>Kontaktoplysninger kan findes i footeren<\/li>\n<\/ul>\n<p>Der er m\u00e5ske ikke meget prestige for webdesignere i at f\u00f8lge konventionerne, da layoutet og det grafiske udtryk \u00a0kan blive opfattet som kedeligt. Det webdesigneren laver i dag, ligner det han designede i g\u00e5r. Og ofte har\u00a0kunderne ogs\u00e5 en forventning om, at professionelle webdesignere skal levere designs, der er anderledes og i\u00f8jnefaldende.<\/p>\n<p>Men som brugere er vi som regel glade for traditionelle l\u00f8sning, da de er lette at afkode. Funktionerne er\u00a0lette at finde og vi f\u00f8ler os generelt trygge ved et websted med f\u00e5 overraskelser. Den grafiske oplevelse er oftest underordnet for brugeren. Flot grafisk design kan v\u00e6re l\u00e6kkert, men det v\u00e6sentligste er, at det ikke st\u00e5r i vejen for brugeroplevelsen p\u00e5 siden.\u00a0<\/p>\n<p>If\u00f8lge Jakob Nielsen (<a href=\"http:\/\/www.useit.com\/alertbox\/20040913.html\">http:\/\/www.useit.com\/alertbox\/20040913.html<\/a>) sikrer brug af konventioner og standarder at brugerne:<\/p>\n<ul>\n<li>ved hvilke funktioner de kan forvente<\/li>\n<li>ved hvordan disse funktoner vil se ud p\u00e5 gr\u00e6nsefladen<\/li>\n<li>ved hvor man kan finde funktionerne p\u00e5 siden og p\u00e5 sitet<\/li>\n<li>ved hvordan man skal bruge funktionerne for at n\u00e5 sine m\u00e5l<\/li>\n<li>beh\u00f8ver ikke at bruge tid p\u00e5 at gennemskue ukendte designelementer<\/li>\n<li>overser ikke vigtige funktioner, fordi de ikke ligner standard design elementer<\/li>\n<\/ul>\n<p>Disse fordele \u00f8ger brugerens muligheder for at opn\u00e5 deres m\u00e5l med bes\u00f8get. Og det giver dem en fornemmelse af at beherske hjemmesiden og \u00f8ger dermed deres tilfredshed med websitet.<\/p>\n<h3>Minim\u00e9r st\u00f8j<\/h3>\n<p>Jo flere forskellige elementer, der er p\u00e5 siden, jo h\u00f8jere er risikoen for st\u00f8j. St\u00f8jen kan komme fra flere typer af elementer. Det kan f.eks. dreje sig om:<\/p>\n<ul>\n<li>Grafisk st\u00f8j.<br \/>\nUndg\u00e5 un\u00f8dig pynt. Grafik skal have en mening.<\/li>\n<li>Multimedie-elementer.<br \/>\nDet kan v\u00e6re musik, flash eller film, der starter op uden brugeren har klikket p\u00e5 dem.<\/li>\n<li>For mange informationer.<br \/>\nDer kan simpelt v\u00e6re for mange informationer p\u00e5 for lidt plads. Hvis et website er informationstungt er det vigtig at finde nogle gode overskuelige strukturer. Hvis for meget information bliver pr\u00e6senteret for brugeren p\u00e5 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).<\/li>\n<li>For mange funktioner.<br \/>\nUndg\u00e5 funktioner for funktionernes egen eller\u00a0din skyld.\u00a0<\/li>\n<\/ul>\n<p>Rolf Molich om brugervenligt webdesign: \u201d\u2026<em> mine samtaler med typiske brugere viser, at brugere typisk kun udnytter 20-30 % af funktionaliteten. Resten er set fra brugerens synspunkt overfl\u00f8digt \u2013 eller direkte forstyrrende for den enkle betjening og det hurtige overblik<\/em>.\u201d<\/p>\n<h3>Mere om brugervenligt layout<\/h3>\n<p>Der findes et hav af ressourcer til mere viden om brugervenligt webdesign. L\u00e6s Steve Krugs bog: &#8220;<a title=\"Anmeldelse af \" href=\"http:\/\/www.nielsgamborg.dk\/wordpress\/brugervenlighed\/dont-make-me-think-anmeldelse-af-bog-om-brugervenlighed.htm\">Don&#8217;t make me think<\/a>&#8221; eller Rolf Molichs: &#8220;Brugervenligt webdesign&#8221;.<\/p>\n<p>N\u00e5r man snakker brugervenligt webdesign slipper man selvf\u00f8lgelig heller ikke uden om Jacob Nielsens <a href=\"http:\/\/www.useit.com\/\">alert box<\/a>.<\/p>\n<p>Min sammenfatning om brugervenligt layout og brugervenligt webdesign\u00a0stammer fra min hovedopgave om <a title=\"Tilg\u00e6ngelighed p\u00e5 Internettet. En rapport.\" href=\"http:\/\/www.nielsgamborg.dk\/download\/tilgaengelighed.pdf\">Tilg\u00e6ngelighed p\u00e5 Internettet<\/a> (pdf 0.7 mb).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Man kan overordnet\u00a0dele brugervenligt webdesign\u00a0op i to omr\u00e5der: brugervenligt layout og brugervenlige tekster. I denne artikel fokuserer jeg p\u00e5 brugervenligt layout.\u00a0Jeg har\u00a0 jeg samlet de 4\u00a0vigtigste principper for brugervenlighed i\u00a0layout og webdesign. Valget af de 4 principper\u00a0er 100% subjektivt og er baseret p\u00e5 studier af brugervenlighedseksperter som Jakob Nielsen, Rolf Molich og Steve Krug, krydret [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,4],"tags":[59,60,78,160,293],"_links":{"self":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts\/149"}],"collection":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/comments?post=149"}],"version-history":[{"count":0,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/posts\/149\/revisions"}],"wp:attachment":[{"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/media?parent=149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/categories?post=149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nielsgamborg.dk\/wordpress\/wp-json\/wp\/v2\/tags?post=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}