Perception og disposition af grænseflader

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

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

3. 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”)

4. 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

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

6. 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)

7. 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

8. Principper • Klarhed i design • Harmoni • Aktivitet • Begrænsningens kunst

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

10. 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

11. 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

12. 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

13. 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

14. 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” • >>>>>>><<<<<<<

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

16. 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

17. 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

18. 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

19. 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