English  |  Dansk

Denne artikel handler om hvilke overvejelser man skal gøre vedr. webdesign. Indholdet er skrevet ud fra mine egne erfaringer, og er en grundlæggende introduktion til emnet. Det handler om til- og fravalg, og der er ofte ikke en endegyldig rigtig måde, at gøre tingene på (heldigvis).

Det afgørende er at designeren forholder sig til nogle vigtige spørgsmål, og ud fra overvejelsene designer siden. Nedenstående er ikke ment som et udtryk for hvad der er "det perfekte", men skal læses som inspiration ud fra mine erfaringer, således at man i hvert enkelt tilfælde kan tage stilling til de konkrete emner.

Nogle vil argumentere, at ægte HTML-programmering er det vigtigste. Men virkeligheden er jo nok lidt mere nuanceret. Det er jo ligegyldigt om HTML-koden er perfekt, hvis ikke der kommer nogle besøgende, hvis ikke den besøgende på hjemmesiden får en god oplevelse, og hvis ikke besøgende iøvrigt er fra målgruppen. Alt dette og en masse andre ting er noget en webdesigner skal tage hensyn ved designet af siden.

Webstrategi

En webstrategi er det fundament, som et website bygger og bliver videreudviklet på. Det strategiske arbejde omfatter blandt andet definering af mål og succeskriterier, målgruppesegmentering, nøgleord og budskaber, intern organisering og arbejdsfordeling.

Formål og målgruppe

Det allerførste der skal gøres er, at definere formål og målgruppe for din hjemmeside. Nogle kalder dette idegrundlag eller koncept. Er dette arbejde først gjort, så er det relativt let at svare på alle de spørgsmål, der dukker op i arbejdet med at lave din hjemmeside.

Der findes masser af eksempler på at hjemmesider har mange formål og indeholder rigtig mange forskellige emner. Disse sider er gode nok hvis formålet er at det kun er ejeren af siden der skal bruge dem. Hvis man ønsker at siden skal være synlig på nettet i forhold til en veldefineret målgruppe, så skal indholdet begrænses. Dette kan være svært, men er en meget vigtig ting at gøre.

Nøgleord og budskab

Ud fra formål og målgruppe kan der udvælges nogle nøgleord. Nøgleord er en betegnelse for de ord eller fraser, som din målgruppe anvender, når de søger på nettet. Når du skal udvælge dine nøgleord skal du sætte dig i brugernes sted. Du skal forestille dig at du selv søgte efter det du har at tilbyde. Nøgleord kan være med udgangspunkt i et produkt, en mærkevare, et firma, et emne, en lokalitet, eller en person. Nøgleord skal bl.a. bruges til at gøre siden synlig på nettet, og kan bruges som udgangspunkt for en hjemmesideadresse. Et godt råd er at vælge 1-3 primære nøgleord.

Hvordan ser en god hjemmeside ud?

Et godt design har følgende karakteristika: Det er enkelt, flot, og det fremmer læselysten. Jakob Nielsen, der er en internationalt anerkendt internetekspert, sammenligner en hjemmesides design med kostumerne i en teater forestilling; Kostumerne skal naturligvis være flotte, men når publikum forlader teateret, så vil man helst have, at publikum taler om stykkets indhold, og ikke kun om kostumerne. Med andre ord: Designet skal være flot, men ikke distraherende. Læs mere om Jacob Nielsens holdinger og erfaringer på hans hjemmeside. Jeg vil dog godt tilføje, at jeg ikke altid er enig i Jacob Nielsens betragtninger, men det er meget inspirerende læsning.
Jakob Nielsen
Top ten webdesign mistakes

Hjemmesidens størrelse

Her er webdesignernes største dilemma; De sidder ofte ved store skærme med høj opløsning og designer hjemmesider der er meget flotte på disse skærme. Problemet er bare, at den besøgende har en mindre skærm. Det betyder, af den besøgende får en helt anden og dårligere oplevelse af hjemmesiden; for det første kommer designet ikke frem og giver det indtryk som designeren har intentioner om, og for det andet bliver den besøgende irriteret over at skulle scrolle til højre/venstre for at læse hvad der står på siden.

Netop med store skærme er der mange af de besøgende som har browseren som et minimeret vindue, og måske har "Oversigt" eller "Foretrukne" slået til. Så derfor er det et godt råd, enten at designe hjemmesiden så den kan tilpasse sig helt ned til 640x480 (skalerbar), eller lave en fast konstruktion der maximalt fylder denne størrelse. Der er flere, der sår tvivl om den gamle regel med at holde sig inden for 800x600.

Det norske magasin Gazette.no har lavet en undersøgelse, hvor det interessante er hvor stor skærmopløsning der bruger til at surfe fra. De fleste har udstyret i orden. 2 % surfer fra en 640x480 skærm, 37 % fra 800x600, 56% fra 1024x768 og 5 % fra 1600x1200. De fleste lader derimod ikke browseren fylde hele skærmbiledet når de er på nettet. Pladsen som du som web-designer har at boltre dig på, er derfor ikke så stor som vi ofte tror. I hele 36 % af tilfældene havde den besøgende ladet browseren få 640x480 eller mindre af skærmen.

Nogle bruger skalerbart design, dvs. hjemmesiden fylder hele skærmbilledet og tilpasser sig automatisk. På den anden side er der et hensyn at tage til at læserne læser tekst bedre, hvis det står i mindre kolonner. Ved skalerbart design vil ulempen således være, at det er svært at læse de meget lange linier ved maximerede vinduer. Omvendt kan man argumentere, at den besøgende jo blot kan minimere sit browservindue, og dermed lettere læste teksten.

Anbefalingen er, at man overvejer fordele og ulemper nøje i forhold til den individuelle hjemmeside (og der er ikke noget der er rigtigt eller forkert).

Skrifttype

Et godt råd er kun at bruge en eller maximum to skrifttyper på en hjemmeside. Hvis der anvendes flere, kan det godt se lidt forvirrende ud, og lidt uden sammenhæng (med mindre grundideen er, at anvende så mange skrifttyper som muligt...)

Farver

Hvilke farver er det vi mennesker er vant til at læse? - ja, sort på hvidt. Derfor anbefales det generelt, at er der tale om megen tekst, så brug sorte(mørke) bogstaver på hvid(lys) baggrund. Undersøgelser viser, at det er meget anvendt og fornuftigt at teksten på lys baggrund har en ramme, eller en ydre baggrund, der er mørk/mørkere.

Generelt er erfaringen at blåt og grønt virker beroligende, og derfor passer til en side med megen tekst, eller hvor man ønske denne stemning. Rødt og gult fanger opmærksomhed, men kan virke distraherende hvis det er for skinger og skarpt, og fjerne fokus fra teksen og indholdet. Valget af farver betyder noget for hvorledes din hjemmeside bliver opfattet. Med intelligent anvendelse af farver og former kan du sende ubevidste signaler til den besøgende på din hjemmeside, f.eks. give indtryk af en bestemt stemning, eller du kan henlede opmærksomheden på nogle bestemte ting frem for andre.

Rød	Kærlighed, aggression og advarsel
Gul	Nyskabelse, falskhed og advarsel
Orange	Glæde, sol ild og livskraft
Blå	Ro, stabilitet, dybde og tristhed
Hvid	Renhed, fred, uskyld og tomhed
Grå	Elegance, kedelig og depression
Sort	Sort, ondskab og pessimisme
Grøn	Håb, fornyelse og harmoni
Brun	Stabilitet, tryghed og udholdenhed
Turkis	Kølende, friskhed og klarhed

Kilde: Komputer for alle, 1-2003

Der er en glimrende artikel om farvecirklen på HTML.dk, der supplerer ovenstående.

Grafik og billeder

Erfaringer viser, at det ikke er en god ide at have for mange animerede gif-filer, hvor brugeren også skal læse tekst. Vedr. billedfiler, så skal du også vurdere hvor mange og hvor store disse filer er, idet brugeren ikke skal udsættes for en al for lang downloadtid - så risikere du at brugeren ikke gider vente på, at din side bliver færdig med at komme frem. Du kan finde mange flotte billedfiler rundt på internettet. Søg efter "gif" eller "jpg". Til at behandle billeder, som du måske selv har skannet ind, kan du f.eks. bruge Microsoft Photo Editor, som følger med Office 97.

Mht. grafik og billeder, så vær opmærksom på, at tekst der står i billedfiler ikke af læseren kan forstørres eller formindskes. Afhængig af formålet med billedfilen kan dette være en fordel eller en ulempe. Det kan være en fordel, hvis teksten skal passe ind i grafikken på en helt bestemt måde, men ulempen er, at læseren ikke har valgmulighed for at forstørre eller formindske teksten.

Slutteligt skal man være opmærksom på udskrivning af siderne på hjemmesiden. Hvis der er anvendt for megen grafik med mange farver, så kan det blive dyrt i farvepatroner, og printet er måske ikke så let læseligt.

Flash

Flash-teknikken er rigtig flot at se på, og der er mange grafiske muligheder. Der er dog en stor ulempe, nemlig, at det tager lang tid at downloade hjemmesiden, og det gider mange ikke vente på, og så er den besøgende på din hjemmeside allerede på vej til den næste hjemmeside, eller i bedste fald er den første oplevelse irritation over hjemmesiden.

Frames eller ikke frames?

I forbindelse med de indledende tanker om hjemmesiden, skal der tages stilling til, om der skal anvendes frames eller ikke frames.

Fordelene ved frames (som f.eks. danskebank.dk) er:

• at det er ret let at indsætte en ny underside.

  at man kan fastholde designet, så f.eks. logoet står øverst på siden, uanset hvor langt ned i dokumenterne man læser.

• at det er lettere at linke til andre hjemmesider, der kan integreres i egen hjemmeside (pas dog på, idet dette kan være ulovligt, uden forudgående tilladelse).
  

De væsentligste ulemper vedr frames er, at man ikke kan linke direkte ind på en underside, og at print ikke virker hensigtsmæssig.

Fordelen ved ikke at bruge frames (som CNN.com eller Jubii.dk) er:

• at der kan linkes direkte til undersiderne på dit site. Ved at linke til frames får man kun selve indholdet på undersiden. Søgemaskinerne kan godt finde på at gå direkte ind på dine undersider - så her er det en fordel uden frames. En måde at korrigere for dette er enten at indsætte links til forsiden på hver underside - eller indsætte korrekte meta-tags.
• at det er lettere at styre læsernes print fra siden, idet hele siden printes, og ikke kun en del af siden, f.eks. en enkelt frame.
  

Hvorvidt der anvendes frames må tage udgangspunkt i en konkret vurdering af den konkrete situation.

Navigering

Navigation er måden hvorpå de besøgende kan bevæge sig mellem siderne på et website. Jo større et website, jo større krav til en effektiv og fornuftig navigering.

Navigering har for det første til formål at hjælpe den besøgende med at finde frem til den information som ønskes, hurtigt og enkelt. På den anden side skal navigeringen også tage udgangspunkt i afsenderens ønsker, og xguidex den besøgende hen, hvor afsenderen ønsker det.

Netmagasinet ClickZ har lavet en oversigt over måder at strukturere navigationen på. Sæt dig ind i læserens sted, og brug de navigationsmetoder som virker bedst i det konkrete tilfælde.

• Central navigation: Central placering af hovedparten af navigeringsmulighederne. Et eksempel er Yahoo, hvor hovedområder og underafsnit står centralt placeret midt på siden.
• Global navigation: Global navigation indeholder links til sider, som skal kunne findes fra alle sider på sitet, f.eks. Forsiden og Kontakt. Global navigation bør placeres både øverst og nederst på alle sider.
• Feature navigation: Med denne type navigation kan man henlede opmærksomheden på noget helt bestemt på sitet. Dette kunne f.eks. være Dagens historie, eller Seneste nyheder
• Relateret navigation: I slutningen af siderne kan der stå henvisninger og links til relaterede sider på samme site, eller andre hjemmesider. På sites hvor det handler om vidensudveksling er dette en god ting, men på f.eks. en virksomheds site, er det måske ikke så god en ide at henvise til konkurrentens tilsvarende produkter.
• Emne navigation: Denne navigation er bestemt af hvilket dokument der vises. F.eks. hvis man i global navigation har valgt et bestemt emne/ område, så kan emnenavigationen indeholde links til alle dokumenter under samme emne.
• Struktur navigation: Denne navigation kan placeres øverst på siderne, og viser præcist hvor i strukturen på sitet den viste side er placeret. Den begynder altid med Forsiden, og kunne f.eks. være: Forsiden > Produkter > Specielle produkter. Man kan selvfølgelig argumentere hvorfor denne navigering er nødvendig, idet den besøgende ikke behøver at kende og forstå strukturen, men bare skal have tilfredsstillet ønsket om at finde netop det, som han har behov for.
• Drop-down navigation: Denne type navigering er pladsbesparende, idet indholdet først foldes ud og vises ved mouse-over eller klik. En ulempe er dog at det er java-script baseret og ikke alle er fortrolige med denne mere avancerede navigering.
• Sprog navigation: Hvis et site har mere end et sprog skal denne navigering gøre det let at skifte mellem sprogene.
• Geografisk navigation: Hvis et site har indhold, der er afhængig af hvilket geografiske område/land der dækkes, skal denne navigering gøre det let at skifte mellem områderne.
• URL-navigering: Dette handler om hvad der vises i internetadressen (Uniform ressource locater - URL). Det handler dels om selve strukturen med undermapper, men også om hvorledes man navngiver dokumenterne på sitet.
  

Navigeringsstruktur

Flere undersøgelser tyder på det samme; de besøgende foretrækker en bred navigering frem for en dyb. Det betyder, at der ikke skal klikkes masser af gange for at nå et bestemt dokument, men i stedet at man ud fra en menuliste hurtigt kan finde dokumentet.

Årsagerne kan være, at det er hurtigere at læse en lang menuliste og finde det man ønsker end at måtte læse stadig nye korte menuer. Ved en dyb navigering risikerer man at fare vild i strukturen, og skulle klikke tilbage osv. – og så bliver man irriteret.

Det afgørende vigtige er, at teksterne på menulisten er præcise og sigende. Klar og tydelig webdesign begynder med klar tænkning fra webdesignerens side. Man skal passe på ikke at blive påvirket af hvordan f.eks. virksomheder ofte bruger specialudtryk og fagudtryk, som kunderne nødvendigvis ikke bruger eller kender.

Menulisten bør grupperes fornuftig og intuitivt, sådan at menuvalgene indenfor en gruppe er med på at forklare indholdet i de andre.

Og brug så konsekvent de samme principper for menuliste og struktur på hele sitet, så den besøgende hurtigt føler sig hjemme.

Angivelse af links

Links bør ikke beskrives med "klik her". At læse på en skærm er vanskeligere og tager længere tid end på papir, og det betyder at teksten skal være kort og præcis. Dette fører til at de, med mindre nogen er specielt interesseret, scanner siden for information for hurtigt at finde frem til det de er ude efter. Ved at bruge "klik her" må læseren læse informationen, som ligger i teksten for at forstå hvad der linkes til. Nogen få gør det - de andre surfer videre.

En bedre måde at gøre det på er enten at anvende grafik i for af f. eks.en pil, eller at lade linket være på to-tre ord som opsummerer, hvor linket sender dig hen. Se her hvor let det er at gøre det lettere for den besøgende:

Forkert: Få yderligere information om Sony Ericsson klik her.

Rigtigt: Se mere information om Sony Ericsson.

Vurdering af dit webdesign

Du kan bl.a. bede om andres meninger om dit webdesign her:
Google Newsgroups (dk.edb.internet.webdesign.ris+ros)
Ratings.dk

Opdateret 1. april 2010