Perception og disposition af grænseflader

Præsentationer af emnet: "Perception og disposition af grænseflader"— Præsentationens transcript:

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å

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