Ryd op på forsiden og optimér dit website

Nutidens internetbruger er kritisk, kynisk og utålmodig. Det betyder, at hvis en besøgende på dit site ikke er i stand til at gennemskue sitets formål inden for få sekunder, så smutter han igen og kommer måske aldrig tilbage.

Uanset om du har en webshop, en blog eller et almindeligt virksomhedswebsite så er brugerens evne til at danne sig et overblik lynhurtigt altafgørende for, om han gider bruge mere tid på dit site.

Jeg blev inspireret til denne blog post af SecPoint IT Security’s hjemmeside, som de har lagt på Web Critique for at få noget feedback på sitet. De havde en ret uoverskuelig forside, og det var tydeligt, at hovedårsagen var at forsiden var proppet med informationer og budskaber, som på en gang blev skudt i hovedet på brugeren. Det er blevet klart bedre efter, at de fik lidt forslag til forbedringer, men det kan stadig optimeres.

Men hvordan undgår man at ens forside bliver uoverskuelig og skræmmer de besøgende væk?

Vi starter sgu med et eksempel

Jeg har leget en smule med Cyberimport.dk's forside i Photoshop, og er kommet med et bud på, hvordan den kunne forenkles betydeligt ved at fjerne elementer, som ikke er essentielle.

Prøv at skifte frem og tilbage mellem før- og efter-billedet. Klik for at se billedet i fuld størrelse.

Skift til det mere enkle efter-billede

Hvad er der sket?

Den vandrette topmenu er blevet "lettere" visuelt, og der er blevet mere luft under billedet øverst, hvilket gør det nemmere for øjet at dele siden op.

Derudover er sidebaren til højre forenklet ved at fjerne log ind-boksen som efter min mening fylder alt for meget. Det giver sitet et mindre teknisk udtryk, og man undgår at besøgende tror de skal have en bruger for at handle.

En side = et formål

Morten Vadskær skriver i sin e-bog Konverteringskarma: ”En side = et formål”. Det er et rigtig godt udgangspunkt!

Hver eneste side på dit site skal have et formål og helst kun ét (..eller ganske få). Men når vi kommer til forsiden får vi problemet: forsiden vil typisk have flere formål og dermed indeholde flere budskaber. Det er også okay, for brugere kan komme af forskellige årsager, og forsiden skal kunne guide dem alle på rette vej. MEN! Det er vigtigt at du gør dig nogle overvejelser om, hvorfor flest kommer til sitet. Det kan du få en idé om ved at kigge på dine Analytics-tal. De forskellige budskaber, du har på forsiden, skal prioriteres så de passer til dine brugeres behov.

Har du fx ét produkt, som står for 60% af dit salg (meget voldsomt eksempel, men det kunne ske), så er det en god idé at det er meget let at finde dette produkt fra forsiden.

Omvendt skal du lade være med at fylde din forside med en masse ”om os” information. Du er sikkert meget stolt over, at forretningen har eksisteret siden 1987, men de fleste af dine kunder er nok i første omgang ligeglade. De vil gerne kunne finde den type information, men ikke nødvendigvis lige når de ankommer.

Less is more

Det er altså vigtigt, at du med analyse og sund fornuft finder frem til hvilke budskaber, der er essentielle, og hvilke der kan smides ud. Ikke alle budskaber kan vurderes med Analytics. Et link til trustpilot kan fx sagtens have værdi, selvom brugerne ikke klikker på det. Det skaber tryghed, at du ikke er bange for at vise brugeranmeldelserne frem, og det kan du ikke måle på.

Men start på din egen forside og tænk: ”Hvad kan jeg fjerne?”

Ikke bare hver side, men faktisk hvert eneste element skal have et formål. Ellers er det bare støj der stjæler fokus. Når jeg siger element tænker jeg på alle visuelle elementer et design kan indeholde. Det kunne fx også bare være en baggrundsfarve eller en linje, som tager fokus.

Når du har lokaliseret det mest formålsløse element, så fjern dette element (eller måske kan du nøjes med at gemme det lidt, hvis du er en tøsedreng) og hold øje med dine Analytics-tal. Det er primært afvisningsprocenten, vi forsøger at trække ned. Men der kan sagtens være andre positive effekter.

Hvad er vigtigt for at en forside er god?

Hvad mener du er vigtigst for at lave en god forside?

Sidder du med et godt tip til, hvordan man kan bringe afvisningsprocenten ned på sin forside? Eller måske har du erfaring med nogle ændringer som virkede/ikke virkede?

Smid en kommentar og lad os høre!

Det med småt :)

Det er naturligvis vidt forskelligt, hvad der virker på forskellige mennesker og forskellige websites.

Jeg har aldrig arbejdet med Cyperimport, så jeg aner ikke om mine forslag ville virke og kan derfor ikke tage ansvar for følgerne af en implementering :)

Se bare mine forslag som eksempler på, hvordan du kunne gribe en oprydning an.

Tags: Webdesign Brugervenlighed 

7 regler om typografi på nettet plus en goodie

Webdesign er meget mere end lækker grafik. Det er også brugervenlighed, og et af de vigtigste elementer, når vi snakker brugervenlighed, er typografi.

Hvad er typografi på nettet?

Typografi er måden, hvorpå din tekst er sat op og ser ud online. De ting, du skal tage stilling til, er altså bl.a. skrifttype, margin, farve og linjeafstand.

Dårlig typografi kan få din side til at se rodet, forældet eller ulæselig ud. Måske endda alle tre ting på en gang. Derfor får du her en hurtig gennemgang af de allervigtigste regler, du bør følge, når du sætter tekst på din hjemmeside.

Grundlæggende typografiregler som du bør have styr på:

• Brug en farve som kan læses

  Sort på hvid anbefales. Mørkegrå kan også bruges. Den giver et lidt mere stilet look, men er allerede sværere at læse.

• Giv links en anden farve

  Blå er Googles standard, men det er her, du kan være en smule kreativ. Vælg en farve der matcher din hjemmesides design. Husk at den skal kunne læses tydeligt!

• Understregning betyder link!

  Brug ikke understregning til andet end links.

• Der skal være konsistens i din typografi

  Bruger du Arial som skrifttype på din forside, så skal du også bruge den på alle undersider. Du kan måske bruge en anden skrifttype til dine overskrifter, men pas på det ikke bliver rodet.

• Sørg for at have godt med luft omkring din tekst

  Luft gør det nemmere at læse teksten. Vær ikke bange for at bruge lidt ekstra plads. Brug margener (margin) og linjeafstand (line-height) til at skabe luft.

• Punktopstillinger er guf!

  På nettet er tekst som er opstillet i punkter meget effektivt, da det er nemt at skimme hurtigt.

• Brug venstrejusteret tekst

  Centreret tekst er svært at læse, og i langt de fleste tilfælde er det ganske enkelt grimt.

Flot onlinetypografi - Hvordan kommer jeg i gang?

Jeg har lavet en lille goodie i form af en lille stump CSS. Det er et rigtigt godt og sikkert sted at starte, når du skal sætte din tekst pænt og læseligt op på din hjemmeside.

Det hele er naturligvis vejledende og er beregnet til et blog- eller artikellayout. Ja, faktisk ligger det meget tæt op af typografiindstillingerne på bloggen her. Det betyder dog ikke, at du ikke kan bruge det andre steder med lidt redigering. Hvis du fx har en webshop eller en anden side med kortere tekster, kan det godt forsvares at ændre tekststørrelsen (font-size) til 12px, men så skal det helst heller ikke være mindre.

Skriv hvad jeg har glemt

Der er sikkert flere vigtige ting man kunne tage med. Smid en kommentar hvis du har et godt råd, du gerne vil dele!

Tags: Webdesign Brugervenlighed 

Hvordan giver jeg rigtig værdifuld feedback?

Først og fremmest tusind tak fordi du gider bruge tid på at hjælpe hjemmesideejere og webdesignere med deres hjemmesider! Det er rigtig godt for dansk webdesign og e-business!

Nå videre!

Værdifuld feedback er en relativ størrelse. Det kan være meget forskelligt, hvad den enkelte webmaster er interesseret i. Derfor kan det jeg skriver her være bull shit for nogen, men det er i hvert fald sådan jeg gerne selv vil have feedback præsenteret.

Hvad ønskes der feedback på?

Husk at læse hvad webmasteren ønsker feedback på. Du må gerne komme med idéer til forbedringer på andre områder, men vær opmærksom på hvad der er blevet skrevet.

Sig det som det er

Ærlighed er nok det vigtigste punkt. Du skal ikke pakke din kritik ind i sukker. Så kan den ikke bruges til noget. Det skal naturligvis være konstruktiv kritik, men hvis du synes, en hjemmeside ligner din lokale bagers hjemmeside fra ’97 så sig det! Herefter kan du forklare, hvad der skal laves om for at rette op på problemet.

Vær ydmyg over for opgaven

Hav i baghovedet at der faktisk bliver lyttet til dig, og at dine idéer måske bliver implementeret på en webshop, som ejeren lever af. Hvis du puster dig op, uden at vide hvad du snakker om, kan det koste ejeren penge…

Alle har selvfølgelig lov til at give feedback og komme med deres idéer. Selvom du ikke er stensikker eller ekspert, skal du endelig komme med dine inputs alligevel. Bare husk at du ikke skal udgive dig for at være ekspert, hvis du ikke er det. Det virker useriøst og uprofessionelt.

Strukturer din kommentar

Stil den fx op i punkter, hvis det giver mening. Husk at brug linjeskift indimellem. Det kan være svært at overskue en mega tekstblok uden rød tråd.

Husk smilet og optimismen

Selvom en hjemmeside er tudegrim og ineffektiv, er alt håb for projektet jo ikke ude. Start med at forklare webmasteren at hans hjemmeside er helt ved siden af. Forklar ham så hvordan det burde gøres. Så må du til sidst opfordre ham til at starte forfra, hvis det er det, du mener, er det rigtige. Også en hård Tough-Love-kommentar kan godt afsluttes med ”Det skal nok lykkes!” eller ”Held og lykke med projektet.”

Hvad er værdifuld feedback for dig?

Jeg kan som sagt kun tale for mig selv. Hvordan vil du gerne have feedback?

Tags: Feedback Webdesign 

Sådan bliver du webdesigner og ikke dekoratør

Når du går i gang med et hjemmesideprojekt, er det vigtigt, at du holder fokus på det væsentlige: Sidens formål. Det gælder uanset om siden skal skabe salg, kendskab eller registrerede brugere.

Din opgave er at få hver bruger som besøger hjemmesiden til at udføre den handling, som tjener siden formål. Din opgave er IKKE at få din klients indhold til at se så flot ud som muligt!

En tudegrim side kan i teorien være ligeså effektiv som kunstværk af en hjemmeside. Faktisk svækker det let kommunikationen, hvis en side er overdekoreret.

"Jamen det er sjovt at dekorere!"

Vi kan allesammen så godt lide at lege med effekter i Photoshop, og da jeg første gang opdagede Blending Options, blev alt sejere med en god gang Drop shadow og Outer glow.

Siden er jeg blevet voksen ældre og har fundet ud af, at disse effekter skal bruges til at hjælpe mine brugere til at finde frem til det, de kan bruge til noget.

Hvis hele hjemmesiden er gejlet op med farver og effekter, har brugeren ikke en chance for at finde ud af, hvor han skal starte.

Det er altså vigtigt hele tiden at tænke: "gavner dette sidens formål?" Det skal tænkes når du designer logo, vælger baggrundsfarve og når du indsætter en gif-animation af et roterende snabel-a.

Jo mere irriteret, du bliver af denne flotte animation, jo tydeligere fremstår min pointe :)

Hvis det ikke gavner sidens formål, skal det ikke være der, for så er det bare støj.

Udseende er ikke et mål i sig selv

Dekoratører har til opgave at få ting til at se pæne ud. Det har designere ikke. Dit mål er at skabe salg, kendskab, abonnenter, registrede brugere, eller hvad din sides mål nu er.

Pæne hjemmesider er oftest mere effektive, da de giver et billede af en moderne og kvalitetsbevidst virksomhed. Man skal bare huske, at de er mere effektive pga. det signal designet sender - ikke fordi de er pæne.

Man skal bare aldrig gå på kompromis med vigtige funktioner for udseendets skyld.

Sidder du med nogle gode eksempler på hjemmesider, som er overdekorerede eller måske eksempler på godt design så smid en kommentar.

Tags: Webdesign Brugervenlighed