Et godt interaktionsdesign består af flere elementer, fx typografi og fonte

Man kan opbygge hjemmesiden hierarkisk vha. typografien og dermed lede læseren gennem sidens budskaber. Det gøres med overskrifter, fed tekst, store/små bogstaver, farver eller kursiveret tekst. 

Når man kender det budskab, der skal kommunikeres, og når man kender målgruppen, kan fonten vælges. Undgå at skifte fonte undervej (gerne mellem overskrift og brødtekst). Hvis der er noget som skal fremhæves, gøres det med fed eller kursiv.

Overskrift

Fed tekst

STORE BOGSTAVER 

små bogstaver

Kursiv 

Størrelseskontrasten handler om elementers størrelsesforskelle. Den er let både at bruge og forstå. Store elementer er vigtige. Små elementer er mindre vigtige.

Størrelseskontrasten er god til at skabe et hierarki på siden. Ses også i typografien, hvor stor tekst betyder overskrifter og lille tekst brødtekst.

Formkontrast er den kontrast der opstår, når elementer i designet har forskellig form. Firkantede vs. runde, geometriske vs. organiske. 

Der er ikke nødvendigvis et hierarki med formkontrast, men det bruges til at skabe forskel i betydning. Ses også i typografien, når der bruger forskellige skrifttyper, i brødtekster og overskrifter.

Placeringskontrast er kontrasten der opnås ved at placere sine elementer forskellige steder på siden, fx ved at placere de vigtigste elementer i toppen. Kan også bruges til at skabe fokus eller variation ved at centrere nogle elementer og holde stram venstre kant på andre.

Komplementærkontrast opstår, når der bruges 2 farver fra hver sin side af en farvecirkel. Det klassiske eksempel er rød og grøn eller rød og magenta afhængigt af, hvilken farveteori man vælge at følge. 

Når man arbejder med komplementærkontrast skal man passe på ikke at overdrive, fx ved at bruge store farveflader med komplementær farve overfor hinanden. Det kan give et meget voldsomt udtryk og være ubehageligt at se på.

Varme/kuldekontrast opstår mellem varme og kolde farver. Det klassiske eksempel er en varm rød favre overfor en kølig blå farve.

Men på en farvecirkel kan farver ligge meget tæt, og stadig have forskellig temperatur. Derfor kan denne kontrastform nogle gange være temmelig subtil. Et eksempel er rødlige nuancer, der kan skifte fra varm til kold, hvis man tilføre lidt blå til den røde farve.

Styrkekontrasten (lys-mørke) bruges fx i typografien. Et klassisk eksempel er sort på hvidt, men der kan også bruges mindre stærke kontraster som mørkegrå på hvid, sort på lysegrå, lysegrå på sort, etc.

Styrkekontrasten kan også bruges til at gøre mindre vigtige tekst mindre fremtrædende ved f.eks. at gøre dem lysere grå, ligesom den kan bruges på grafik, farver og billeder. 

Mæthedskontrasten handler om, hvor farvemættede vores grafiske elementer er, fx holdes økonomiske virksomheders hjemmesider ofte i neutrale nuancer for at give virksomheden et afdæmpet og troværdigt image.

Der kan skabes opmærksomhed ved at bruge nogle få stærkt farvede elementer, fx i overskrifter, farvede listepunkter eller anden kraftig farvet grafik.

Udover blikfang og hierarki, vil anvendelse af få klare farve tilføre sitet noget dynamik.

Sort/hvidkontrast minder om mæthedskontrasten, men i sort/hvidkontrasten er det ene element altid holdt helt i gråtoner (farvemæthed på 0). 

Det opstår, når der bruges sort/hvid grafik eller billeder overfor farvede ditto, fx når der sættes et sort/hvid foto sammen med et farvefoto, eller når der i et website holdt i grå-skala nuancer, placerer nogle nogle stærkt farvede elementer.

Loven om nærhed (og dermed også afstand) er den lov, der ofte overskygger de andre. Loven siger, at ting der er tæt på hinanden, ser ud til at være mere beslægtede end ting, der er anbragt længere fra hinanden.

Eksempler på denne lov kan findes overalt, og er en af de helt grundlæggende principper i design og andre former for kommunikation: Så snart objekter (tekst, billeder, grafik osv.) er tæt på hinanden, vil de blive opfattet som en sammenhæng. Faktisk er nærhed og afstand så grundlæggende for den måde, vores hjerner sætter ting i orden, at denne lov ofte vil tilsidesætte ligheden mellem farve, form og andre faktorer, der ellers kan differentiere en gruppe af objekter. Dette er også grunden til at whitespace i design er så effektivt og behageligt at kigge på.

Loven om lighed. Det ligger i menneskets natur, at gruppere ting der er ens. Derfor er Gestaltloven om lighed en anden måde at gruppere objekter eller information, og en lov der også hyppigt bliver brugt i stort set alle former for visuel kommunikation. 

Som nævnt ovenover, er det ofte loven om nærhed, der har første prioritet, men derfor er loven om lighed alligevel vigtig at have med, for at skabe overskuelighed og kontinuitet i et design.

Loven om lukkethed siger, at vi har en tendens til at gruppere genstande, der synes at være lukket af fra resten. Dette kan være genstande der er omringet af en kant (border), eller som har en anden baggrund, som illustrationen. 

Her vises to “grupper” af cirkler, selvom den eneste forskel der imellem dem er, at den ene halvdel har en anden baggrund bag dem, og bliver dermed “lukket af”.

Loven om forbundethed. Lidt ligesom lukkethed, handler loven om forbundethed om at tydeliggøre at nogle ting er forbundet, og adskilt fra andet. Dette kan dog gøres på andre måder end at lukke dem sammen i en kasse. 

Loven kommer til udtryk i et design, når øjet bliver ført via en sti, linje, kurve eller brug af sammenhængende farver.

Loven om figur og baggrund bliver dog oftest brugt til at skabe en god balance mellem forgrund og baggrund. 

Har man f.eks. med tekst og layout at gøre, er det vigtig at baggrunden ikke bliver forstyrrende og dermed fjerner fokus fra teksten. Dette er også grunden til, at tekst som regel bliver skrevet med sort skrift på hvid baggrund.

1. Kend din målgruppe, din bruger og din brugers præferencer

Vær bevidst om, hvad dit IT-produkt skal kommunikere.

Få tidligt klarlagt brugsmønstre

2. Primære funktioner skal være i fokus. 

Opbyg funktionerne overskueligt. 

Lav logisk mapping. 

Brug ikoner og standardiserede funktioner 

3. Vejled brugeren 

Lav et grafisk hierarki (udnyt kontraster, farver).

Brug gestaltlovene om lighed og om lukkethed.

4. Test dit design. 

Gennemfør brugerinterviews og få feedback.

Lav rollespil i projektgruppen

5. Undgå blink og rulletekster

Fjern irrelevant information

Vær varsom med at bruge lyd, blink og effekter