Perception og disposition af grænseflader - eller: ”Hvordan man styrer brugerens blik i fem sekunder” John Paulin Hansen, ITU, Marts 2000

Perception Måles i mili-sekunder Bottom up (opfatte) Top down (søge)

Grafikkens elementer (1) Skala: den relative størrelse af et element Kontrast: synlige forskelle mellem visuelle dimensioner (form, størrelse, farve, tekstur, position, orientering og bevægelse) Proportioner: det relative forhold mellem elementer (eksempelvis ”det gyldne snit”)

Grafikkens elementer (2) Differentiering mellem elementer ved brug af kontrast Fremhævelse ved brug af skala og kontrast Aktivitet: bevægelse af øjet gennem kompositionen ved brug af skala og kontrast Interesse: skabelsen af spænding gennem modstillinger

De visuelle variable Størrelse Mætning Farve Orientering Tekstur Form Position (2d og 3d)

Perception associativ: samvirkning uden forstyrrelse (ex. mætning og orientering) selektiv: søgning efter mål (form er uegnet) ordnet:fastlæggelse af forhold (størrelse, mætning eller position) kvantitativ: fastlæggelse af størrelser (kun størrelse og position)

De visuelle variables længder Form er uendelig Position er også uendelig, men i praksis begrænset af display størrelse - dog vældig god til fine variationer Orientering skaber ofte forvirring, hvis den bruges på mere end 4 positioner Mætning og tekstur kan anvendes til maks. 10 Farve og størrelse på lidt mere end 10

Principper Klarhed i design Harmoni Aktivitet Begrænsningens kunst

Typiske fejl For ringe kontrast For stor kontrast Spatial spænding Overdrevet pladsforbrug Klodsede proportioner Find fem fejl på Charlottenborg

Tip: Perceptuel lagdeling Gruppér informationer i familier på max. 7 +/-2 medlemmer Bestemt rangordenen imellem de enkelte familer Slå de 3 -5 mindst betydningsfulde familier sammen eller ihjel Skab en klar visuel adskillelse mellem de vigtigste familier og en klar visuel sammenhæng indenfor familierne Brug knibeøvelsen til at sikre at hver familie ses som en enhed forskellig fra de andre

Tip: Skærp kontraster Bestem hierarkiet mellem informations familierne Bestem minimum og maksimum på de anvendte visuelle variable Lav en logaritmisk skala mellem minimum og maksimum Læg familierne på denne skala Lav knibeøvelsen og se om det passer

Tip: Integrer figur og grund Bestem den overordnede plads som figur-grund kombinationen skal være på Giv figur og grund lige meget vægt Giv dem nok margin til at undgå visuel spænding Placer figuren korrekt på grunden - som regel i midten

Organisation og visuel struktur Tilrettelægge de visuelle stier for brugeren Strukturen ses først Struktur skaber visuelle enheder efter gestalt lovene Struktur øger læsbarheden, fx i et skema Struktur giver kontrol over informations-rækkefølgen, fx fra billede til overskrift til brødtekst

Gruppering Spatial logik: Knapper der sidder sammen virker sammen Hierarki: Størst og øverst er først og vigtigst Fra øverster venstre til nederste højre element Balance i et layout som i den fysiske verden ”Millimeter matters” >>>>>>><<<<<<<

Typiske fejl Tilfældigt layout Modstridene symmetrier Meningsløse interne visuelle relationer Falske strukturer Find fem fejl på www.dsb.dk

Tip: Brug symmetri til at skabe balance Fastlæg symmetri -akserne (- vertikale akser virker stærkere end horisontale akser) Centrer informationsenhederne på akserne (- ikke spejling men ligevægt) Kontroller at symetriakserne selv er centreret indenfor den overordnede display kontekst (fx. browservinduet eller framen) Lav knibeøvelsen

Tips: Brug linjeopstilling til at skabe visuelle relationer Find de væsentlige rammer i layoutet Kig efter elementer indenfor rammerne som næsten står på linie - og sæt dem på linie Sæt rammerne på linie Sæt de fritstående elementer på linie med noget andet Sæt de elementer, der ikke vil indordne sig, så de i det mindste står i forhold til en overordnet fladedisposition

Tips: Lav optiske justeringer Fastlæg den objektive linie eller margin Forskyd elementerne i forhold til marginen i henhold til skarpheden af den vinkel, der støder ind i marginen Lav en close-up knibeøvelse på justeringen

Tips: Sæt de hvide flader Fastlæg informationselementernes hierarki Sæt ekstra hvidt ind mellem de enheder, der skal opfattes adskilt Sæt ekstra hvidt rundt om de individuelle elementer, der har brug for mest opmærksomhed Husk at den hvide flade i et browservindue sjældent kan kontrolleres fuldstændigt