Informatik

Et godt interaktionsdesign af både websider og apps skal tage mange designmæssige hensyn. Hvilke knapper der bruges, hvor knapperne placeres på siden, hvilke fonte der benyttes osv. I det følgende vil vi i kort form gennemgå nogle af de vigtigste designprincipper til et succesfuldt interaktionsdesign. 

Typografi

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

Kontrast

Et andet element i god interaktionsdesign er brugen af kontrast. Sammen med typografien kan kontrast bruges til at skabe det hierarki, der guider brugeren på sitet. Vi kan skelne mellem størrelseskontrast, formkontrast, placeringskontrast, farvekontrast og styrkekontrast. 

Størrelseskontrasten handler om 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.

Farvekontrast opnås ved at vælge farver langt fra hinanden på farvecirklen, fx gul og grøn. Farver kan bruges til at understøtte det udtryk man forsøger at kommunikere. En mørk farve påvirker en lys til at se lysere ud og omvendt. Farver forbindes med forskellige ting. Det er subjektivt, hvilke værdier der læses ind i de forskellige farver, så man kan kun opstille retningslinjer. Når man arbejder med komplementærfarver skal man passe på ikke at overdrive, fx ved at bruge store farveflader med komplementærfarve overfor hinanden. Det kan give et lidt for voldsomt udtryk.

Styrkekontrasten (lys-mørke) bruges fx i typografien. Et klassisk eksempel er sort skrift på hvid baggrund, men der kan også bruges mindre stærke kontraster som mørkerød overfor lyserød, 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. 

Øvelse i kontrast

1. Søg på nettet efter logoer fra tre forskellige burgerbarer. Hvilke farver bruges i de fleste logoer? 
2. Undersøg hvilke farver, der er brugt i Danske Banks logo og beskriv de følelser, der kan knyttes til farverne. 
3. Sammenlign logoerne fra DR og TV2. Hvilke farver bruges, og hvad kan begrundelsen for farvevalget være? 

Gestaltlovene

I design af brugergrænseflader arbejder vi også med gestaltlovene, som forklarer hvordan vi opfatter former og dermed skal organisere hjemmesider og apps. Det er gelstaltlovene, som forklarer, hvorfor vi ser en dalmatiner nedenfor i stedet for en masse prikker. De kan koges ned til 5 love: loven om nærhed, loven om lighed, loven om lukkethed, loven om figur og baggrund samt loven om forbundenhed. 

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.

Øvelse i gestaltlovene

Gå ind på en hjemmeside efter eget valg og find eksempler på alle 5 gestaltlove. Diskuter i gruppen om der er nogle af lovene, som er sværere at finde og at bruge i egen designproces.

Øvelse i interaktionsdesign 

1. Besøg en hjemmeside, som I mener fungerer godt (fx danskebank.dk) og foretag en analyse af siden vha. principperne for interaktionsdesign.

Overholder sitet de 5 E’er?

Lever sitet op til Normans designprincipper for Synlighed, Begrænsning, Affordance, Mapping, Konsistens, Feedback og hvordan? 

Hvad er den primære (sekundære og tertiære) funktion og er den i fokus?

Hvem er den primære (sekundære og tertiære) bruger? 

Er der grafisk vejledning af brugeren? 

• Er der tydeligt grafisk hierarki (er typografi, kontraster og farver udnyttet)? 
• Er loven om nærhed brugt?
• Er gestaltloven om lighed brugt?
• Er gestaltloven om lukkethed brugt? 
• Er der andre gestaltlove (forbundethed samt loven om figur og baggrund) i spil på sitet?

Er der brugt unødvendige lyd, blink og rulletekster?

Er der irrelevant information eller effekter på siden? 

2. Besøg en hjemmeside, som I mener fungerede mindre godt (fx lingcars.com). Undersøg de samme punkter fra listen i opgave 1. 

Alle svarene indskrives i din logbog. Hvis flere har arbejdet sammen, så husk at alle skal skrive svaret i sin logbog.