Gid du var en guldfisk! Så havde jeg nemlig hele 9 sekunder til at fange din opmærksomhed

girl-609615_640

Desværre er mennesker mere utålmodige end guldfisk. Hvis du ikke straks opdager, at denne artikel gør dig bedre til at arbejde med webdesign og content design, er du allerede svømmet videre.

Du holder ud… og får til gengæld masser af viden og konkrete tips til design af websider, blogindlæg, nyhedsbreve, ebøger og andet indhold til inbound marketing. Sådan. Så har jeg skrevet det vigtigste først.

Jeg har i øvrigt gjort mig umage med at skrive denne tekst på en helt særlig måde!
Ordene er placeret med omhu i sætningerne og  fremhævet, så du hurtigt kan finde noget interessant – eller hoppe af og lægge en kabale.

Denne artikel er skrevet, så du kan scanne

Når mange ens elementer er placeret ved siden af hinanden og alt er lige gyldigt, bliver det hele ofte ligegyldigt. Øjnene flakker rundt, når man ikke kan finde det interessante – i en tekst, på en side, i supermarkedet…

Mange af os giver hurtigt op, hvis det interessante og væsentlige ikke straks springer i øjnene. Derfor er det godt at designe, så tingene IKKE er ens.

Lange artikler bør brydes med overskrifter, billeder, citater, bokse så det vigtige springer i øjnene.

Du kan se hvorfor ved at studere billedet herunder.

  • Find vinduet, hvor der sker noget spændende

windows-795

Fandt du hurtigt dét, der var særligt interessant? Eller konkluderer du det samme som mig – at der ikke er noget. At det er 24 kedelige vinduer.

Forestil dig, at nogen havde placeret et menneske i et af vinduerne. Eller en sjov hund. Eller hvis et barn sad med fødderne dinglende ud over kanten. Så ville dét vindue få mere opmærksomhed end de andre.

Billedet viser et design, der ikke gør det tydeligt, hvor det spændende er: Det interessante, Det relevante. Det hele er lige gyldigt. Ligegyldigt. Uinteressant.

Flot webdesign er ofte dårligt design

Content design og webdesign skal ikke alene laves ud fra mavefornemmelse og æstetisk sans. Der er nogle få, meget enkle, men også meget afgørende principper, du skal sætte dig ind i, hvis du vil lave godt design. Altså smart design. Effektivt design.

Om design er godt eller kun pænt handler om objektive forhold. Eksempelvis om skriftstørrelsen er stor nok. Om den er tydelig og nem at læse. Om det interessante er nemt at finde…

Design efter love, der er næsten 100 år gamle

Gestaltlovene er en række principper (love), der beskriver, hvordan vi opfatter visuelle elementer. Hvordan vi skaber sammenhæng i det vi ser. Og hvordan vi får øje på det, der er interessant og relevant for os. Gestaltlovene er gamle, men særdeles vigtige i dag, hvor vi konstant bombarderes med information, som vi skal sortere i.

Selv moderne principper for godt webdesign er baseret på gestaltlovene om:

  • Figur og Baggrund
  • Nærhed
  • Lighed
  • Lukkethed
  • Forbundethed

Loven om figur og baggrund

Hvis flere elementer er ens, har vi svært ved at vælge og keder os hurtigt.
Hvis baggrunden på et website larmer mere end forgrunden, vil brugeren også have svært ved at orientere sig.

Skab derfor god kontrast mellem vigtigt og mindre vigtigt, mellem forgrund og baggrund.

Gør altid det væsentligste mest tydeligt. Designer du sider til folk, der leder efter konkret information, skal du hjælpe dem ved at lave fremhævede navigationspunkter – sigende overskrifter i passende størrelse, fremhævede ord/sætninger, farvet baggrund etc.

Men sørg for at prioritere det rigtige og på den rigtige måde.
Brug ikke en meget urolig baggrund under tekst.

goer_teksten_tydelig

Loven om nærhed

Anbringer du noget tæt på hinanden, vil folk tro, det hører sammen.
Og omvendt – placeres det langt fra hinanden, hører det ikke sammen.

Ord, der står i toppen af en side på lige linje, opfatter vi som en menu.

Tekstmæssigt kan det give forvirring – og ufriviligt sjove resultater – hvis ord hører sammen, men ikke er placeret tæt nok på hinanden.

  • Bedstemorboller
  • Bedste mor boller
  • Bedstemor boller

Hvad der naturligt hører sammen, skal du med andre ord sørge for står tæt på hinanden. Det gælder både enkelte ord, afsnit, billeder…

Ting, der skal adskilles, skal være omgivet af luft. Det, vi også kalder white space.

goer-teksten-tydelig1

Loven om lighed

Loven om lighed minder en hel del om Loven om nærhed, men her er der primært fokus på, om elementerne ligner hinanden – ikke om de nødvendigvis er placeret i nærheden af hinanden.

Du kan skabe samhørighed ved at give elementer den samme størrelse, den samme farve, den samme form.

Vil du gøre det nemt for besøgende at forstå dit design og eksempelvis dine call-to-action-knapper, skal du give dem et gennemgående design. Lad være med at skifte farve, form, størrelse og placering bare fordi du synes, der skal variation til.

Giv købsknapper den farve, du har besluttet, de skal have. Endnu bedre: giv dem den farve, du har testet dig frem til er den optimale.

Når folk ser et figurer som disse, ser de som regel “to cirkler”, “tre hjerter” og “tre trekanter”. De ser ikke bare “Otte figurer”. Det kan du arbejde bevidst med for at skabe sammenhæng og overblik.

goer-teksten-tydelig1-kopi

Loven om lukkethed

Loven om lukkethed handler om, at hvis elementer står i samme ramme – f.eks. i bokse med forskellig farve – så vil man regne dem for at høre sammen.

Det kan du udnytte ved aktivt at lave områder, der samler ting og dermed gør det tydeligere, at de hører sammen. Så gør du indholdet nemmere at overskue.

goer-teksten-tydelig2

 

Loven om Forbundethed

Ved at bruge loven om forbundethed gør du det tydeligt – ved brug af streger, farver og symboler – at noget hører sammen.

Du kan blandt andet organisere indhold ved at samle det med en farvet baggrund. Er der tale om en lang side på et website, kan du eksempelvis dele den op i passende områder og give hver område en baggrundsfarve og/eller et baggrundsbillede.

Design, så dit indhold bliver interessant

Bruger du gestaltlovene aktivt, når du designer, kan du gøre dit indhold mere interessant og overskueligt, end hvis du udelukkende designer efter, hvad du synes er pænt. Brug hellere de objektive kriterier for, hvordan tingene virker.

Du kan – med gestaltlovende – gøre det nemt og lynhurtigt at scanne dit indhold og finde det interessante og relevante. Lykkes det for dig, skaber du et positivt indtryk.

Digitale tekster er ikke som tekst på papir

At designe digitale tekster er noget helt andet end at designe tekster til papir. De skal derfor også skrives anderledes.  I mange tilfælde kan du med stor fordel glemme alt om at skrive med en rød, gennemgående tråd.

Vi hopper i tekster, når vi læser online. Derfor skal alle afsnit helst skrives, så de kan forståes uden at have læst foregående afsnit.

Skriv overskuelige afsnit. Ikke kun fordi det stadig er sværere at læse tekst på en skærm, men også fordi vi forventer, at tekst på skærm er hurtig at læse. Hurtig at overskue. Tekster på skærm skal derfor ikke præsenteres som i en bog, en brochure eller et brev.

Tag hensyn til, at vi læser på tre forskellige måder

Når vi læser online, har vi tre forskellige formål:

  • Vi scanner for at finde konkret information, som helst skal springe i øjnene.
  • Vi skipper – læser brudstykker af en tekst, når vi ikke ved, om vil fordybe os.
  • Vi læser – når vi fordyber os i noget meget interessant.

Tekster online skal derfor designes til formålet. Du skal vide, om du er i gang med at designe noget, der bliver læst, scannet eller skippet.

  • Design blogindlæg til fokuserede læsere, der fordyber sig
  • Design salgssider til utålmodige læsere, der zapper ukoncentreret og uengageret
  • Design informative sider til søgende læsere, der scanner efter information

Udover at bruge gestaltlovene som noget helt fundamentalt, kan du også med fordel bruge de følgende principper:

1) Simplicity

Undgå at distrahere besøgende. Fjern alt, der udelukkende er med for at pynte. Alt, der ikke har nogen funktion. Spørg konstant dig selv: “Hvorfor er det her med?” Hvis svaret er: “Fordi det er pænt!” så fjern det.

Når du laver design, der skal skabe resultater, skal du gøre det, der er nyttigt. Og naturligvis må det også gerne være pænt og smart!

  • Design dine sider, så besøgende kan finde rundt
  • Design dine sider, så det væsentlige er nemt at få øje på
  • Design, så dine sider er nemme at bruge.

Simplicity opnåes på følgende måder:

  • Farver: brug max fem farver. Baggrundsfarve og tekst – ofte sort på hvidt. Brug derudover en farve til link – og brug den samme farve til alle link.
  • Skrifttyper: brug max to forskellige i max tre forskellige størrelser. (Sans til overskrifter og sans serif til brødtekst).
  • Grafiske løsninger: Brug dem ikke til at pynte men til at gøre det nemmere for brugeren at finde noget bestemt (ikoner, symboler) til at navigere i indholdet. Eller til udføre en bestemt opgave (knapper, pile).

2) Visuelt hierarki

Prioriter dit indhold. Ikke efter hvad DU synes er interessant og relevant, men efter hvad du ved besøgende vil kigge efter. Fremhæv de ord og sætninger, der gør det nemt for besøgende at scanne og vælge.

Fremhæv det vigtige

great_smallStørst er sædvanligvis vigtigere – og mere interessant – end lille. Dog ikke altid.

Meget lille ved siden af meget stor kan også være interessant. Men størst er nemmest at få øje på.

Kontraster i størrelse gør det nemt at navigere i tekst.

Hvis din brødtekst er 16 px (og mindre er ofte noget skidt online), kan største overskrift være cirka 2.5 gange større

  • Brødtekst: 16 px
  • H1 40 px (brødtekst gange 2.5)
  • H2 32 px (brødtekst gange 2)
  • H3 24 px (brødtekst gange 1.5)

 

Farver kan også bruges til at fremhæve

orange-brikEn enkelt afvigende farve – brugt ét sted på skærmbilledet – vil tiltrække opmærksomhed.
Det må gerne være en kontrastfarve (komplementærfarve)

Men brug ALDRIG farver på tekst, medmindre det er et link. Du irriterer folk, hvis du farver tekst, der ikke er et link til noget drønspændende. Understregning af tekst har samme effekt.

Visuelt hieraki handler meget om kontraster – om forskelle, som gerne må være særdeles tydelige:

  • Stor/lille
  • Mørk/lys
  • Komplementærfarver
  • Forskellige skrifttyper (sans og sans serif)

Ved at bruge visuelt hieraki, tiltrækker du besøgendes opmærksomhed til det, der er vigtigst.

Beslut dig for, hvad der er vigtigst og fremhæv dét.
Er der mange lige store elementer på et skærmbillede, har du ikke prioriteret, men tvært imod gjort det svært for besøgende at vælge.

Det er et godt udgangspunkt kun at arbejde med få valgmuligheder (under otte) og max tre niveauer, når du arbejder med størrelser:

  • Niveau 1: Det vigtigste indhold. Det gælder både tekst og billeder. Beslut dig for, hvilken størrelse du vil bruge på niveau 1. Eksempelvis billeder 795 px brede og tekst
  • Niveau 2: Brug det til at organisere indhold i sektioner eller grupper, der hører sammen. Du skal bruge en lidt mindre størrelse end til niveau 1, men stadig væsentligt større end niveau tre. Brug niveau 2 til at hjælpe folk med at navigere i indholdet og finde det interessante.
  • Niveau 3: eksempelvis brødteksten i et tekstbaserede layout. Det kan være lange tekster (eks. blogindlæg) eller korte. Tekst på niveau tre er den mindste størrelse, men den skal stadig være nem at læse.

Brug kun to typer skrift

En type til overskrift og en anden til brødtekst og andre typer tekst. Eksempelvis sans til overskrifter og sans serif til brødtekst. Vil du bruge en tredie skrift, så brug den eksempelvis til navigation eller citater.

  • Sans – med fødder. Eksempelvis Times New Roman
  • Sans serif – uden fødder. Eksempelvis Arial, Helvetica, Verdana

Vælg altid den mest letlæselige skrifttype til de mindste skrifttyper – eksempelvis brødteksten

  • Brug serif-tekst til brødtekst og små skrifttyper
  • Brug evt. Sans serif til overskrifter

Vælg dine skrifttyper, før du begynder at designe sider – og hold dig konsekvent til de skrifttyper, du har valgt.

Eksempel på billedstørrelser til tre niveauer:

  • Niveau 1 – fuldbredde billeder – 1080-1280 px
  • Niveau 2 – blogindlæg – 700-795 px
  • Niveau 3 – ikoner og små billeder – 100-510 px

Brug billeder til at fremhæve det vigtige, til at fremme forståelse, til at vække opmærksomhed, til at navigere i indhold, til at skabe følelser og stemninger.

Sørg for, at billederne er tydelige, skarpe og relevante for indholdet. Lad være med at bruge dårlige billeder – uskarpe billeder, dårlige motiver etc. Er billederne værd at bruge, så gør dem store.

Billeder skal også have den rette størrelse. Et portræt kan have størrelse som en tændstikæske. Det kan et billede med masser af detaljer ikke.

Husk, at formålet med design er at kommunikere og eventuelt få besøgende til at udføre noget bestemt. Gerne på en måde, som brugeren synes er nem, hurtig, naturlig, behagelig eller ligefrem sjov.

3) Skab ro med whitespace

Whitespace er luft. Rolige flader uden tekst.
Det behøver ikke være hvidt. En ensartet flade i et billede kan også fungere som white space.

Luft omkring elementer er med til at forstærke det visuelle hieraki.

Ting der er placeret tæt på hinanden opfattes som hørende sammen. Effekten kan forstærkes med white space.

Brug store og gode billeder.

Har du mange små billeder – eller mange elemeter i det hele taget – skaber det et uoverskueligt kaos. Sørg for, at dine billeder har en passende størrelse. Det samme gælder dine tekster. Naturligvis kan tingene blive overdrevent og unødvendigt store, men vær også opmærksom på, at mange små elementer – uden whitespace – skaber et rodet indtryk og gør det svært at vælge.

Er det svært at vælge, vil det som regel betyde, at folk vælger dig helt fra. De giver op, forsvinder og vender ikke tilbage.

Inddel delementer i et visuelt hieraki og lad være med at pakke alt for mange elementer sammen på et skærmbillede.

Fjern information, der ikke er relevant for brugeren og beslutningsprocessen.

Se eksempler på kunst, lavet med whitespace

4) Enkel og overskuelig navigation

Gode navigationsmuligheder på dit website er altafgørende. Og god navigation handler ikke kun om at have en menu.

Navigation skal ikke kun gøre det nemt for en besøgende at finde, hvad vedkommende leder efter, men også gerne friste til at se indhold, vedkommende ikke leder efter, men finder interessant, når det dukker op. (Læs om serendipity)

Det ideelle webdesign gør det hurtigt og nemt for besøgende finde rundt på dit website – komme fra A til B med så få klik som muligt. Uden at skulle lede. Uden at gå forgæves.

Et par tip til god navigation:

  • Gør din primære menu meget enkel, overskuelig og med så få punkter som muligt. Max. 5-7 på hvert niveau.
  • Placer den primære menu i toppen af siden på alle sider
  • Hav en søgefunktion på dit website, hvis du har meget indhold
  • Hav helst ikke mere end to niveauer (undermenuer) i din menu. Menupunkter i 3. niveau bliver sjældent set.
  • Brug link forskellige steder i indhold til at friste besøgende til at læse mere og til at dem fremad på deres købsrejse.

5) Brug en konsekvent gennemgående stil

Træf nogle designmæssige valg på forhånd – før du går i gang med at designe – og brug dine valg konsekvent. Brug gennemgående skrifttyper, farver etc.

Lav eksempelvis et moodboard, hvor du registrerer, hvordan ting skal se ud. Hvilke skrifttyper og i hvilket størrelser. Hvordan skal faktabokse se ud. Citater. Testimonials etc.

At træffe nogle valg på forhånd og følge dem giver et bedre og lettere forståeligt design. Det gør det også betydeligt hurtigere at designe indholdet, når du ikke konstant sidder og overvejer, hvad der er pænt.

Du behøver naturligvis ikke designe alle sider, så de ligner hinanden på en prik, men brug en gennemgående stil til forskellige typer sider og skab variation i detaljerne.

En konsekvent designstil gør det nemmere og hurtigere for besøgende at finde rundt og forstå dit indhold.

Brug ikke samme farve til gratis og til køb

Bruger du grøn til købsknapper og pink til at downloade gratis materiale, vil besøgende hurtigt forstå princippet. Byt ikke om på de farver, du har valgt. (Grøn og pink er tilfældige farver. Det er ikke forslag til, at du skal bruge netop de farver!)

Bryder du princippet og bytter om på farverne, risikerer du at forvirre og irritere.
Send altså entydige signaler – og brug dem konsekvent.

6) Tilgængelighed

Sørg for, at dit website er brugbart på både computer, tablet og smartphone.

Det er meget sandsynligt, at langt over 50% af besøgende på dit website kommer via smartphone. Design derfor først og fremmest til smartphone.

Bruger du et såkaldt responsivt design, skal du være meget opmærksom på, hvordan du placerer de forskellige elementer, så de dukker på i rigtig rækkefølge på både computer, tablet og smartphone.

responsive_webdesign_dreamstime_m_28726979

Design ikke kun til computer

En smarthone er god til at vise, om dit webdesign er optimalt – om indholdet præsenteres optimalt. Er indholdet overskueligt på smartphone, er det også overskueligt på en computer.

Er skrifttyperne så store, at det er nemt at læse dit indhold på en smartphone, er det også nemt at læse på en computer.

Tjek, om der er tilpas stor kontrast mellem lyse og mørke farver? Ellers er det måske svært at læse dit indhold på en smartphione udendørs i dagslys.

Sort på hvidt er nemt at læse. Lysegrå skrift på hvidt er svær at læse.

Kan dine billeder ses på smartphone?

Design dine sider, så de består af elementer, der hver især helst ikke fylder mere end et skærmbillede på en smartphone, der vender på højkant.

Din side må gerne bestå af mange elementer – en meget lang side er ok! Men alle enkelte elementer (tekstbokse, tekstafsnit, ,billeder etc.) skal gerne kunne overskues på en smartphone.

7) Overhold konventioner

Der er en lang række konventioner, som internet-brugere har vænnet sig så meget til, at du irriterer og forvirrer dem, hvis du ikke følger dem:

  • Farvet tekst er et link
  • Understreget tekst er et link
  • Hav et logo i toppen af siden – til venstre eller i midten
  • Logo linker til forsiden
  • Link åbner i samme vindue
  • Kontaktoplysninger i footer

Ldreamstime_xs_18884743ad dig ikke friste til at bryde konventionerne i et forsøg på at lave et anderledes og unikt design.

Noget af det dummest du kan gøre er at snyde folk til at tro, at teksten er link til noget spændende.

Lige så slemt er det, når eksempelvis et billede helt uventet viser sig at linke til noget. Eksempelvis til en større version af samme billede.

8) Tillidsvækkende

dreamstime_xs_28785517Vil du sælge noget til nogen, skal du skabe tillid.

Sørg for, at folk ikke skal have besvær med at finde relevant og tillidsvækkende information.

Sørg for, at de ikke farer vild.

Gør det nemt at finde information om dig, nemt at få en fornemmelse af hvem du er. Skjul ikke dit portrætfoto og dine kontaktoplysninger.

Selvom du måske foretrækker at blive kontatet via mail, bør du ikke undlade at oplyse dit telefonnummer. Noter hellere nummeret med en opfordring til hellere at sende mail. Vis folk tillid, hvis du har rent mel i posen og gerne vil skabe tillid til dig.

Gem heller ikke priser væk.

8) Bruger-centreret og resultatorienteret

Design dine sider med fokus på besøgende interesser og behov – og med udgangspunkt i, hvordan besøgende rent faktisk reagerer på dit website.

Forestil dig, at du er en af dine besøgende – en potentiel kunde. Lever dit website op til dine ønsker? Frister det til at læse og se mere, end du oprindeligt kom efter. Giver det grund til at komme igen en anden gang.

Men design også med fokus på, hvad du vil opnå. Både på overordnet niveau – med din business, dit indhold, dine sider, dine indlæg. Men også gerne helt ned på makro-niveau. Skærmbillede for skærmbillede,

Test dine sider

Studér trafikken til dit website. Hold øje med, hvad der fungerer og ikke fungerer. Test igen. Lær af dine fejl. Brug tallene til at forbedre dit design.

 

Pin It on Pinterest