Psykologi, Human Factors og HCI John Paulin Hansen ITC, Usability E2003.

Præsentationer af emnet: "Psykologi, Human Factors og HCI John Paulin Hansen ITC, Usability E2003."— Præsentationens transcript:

1 Psykologi, Human Factors og HCI John Paulin Hansen ITC, Usability E2003

2 ”Dont make me think” Selvindlysende Selvforklarende Kognitiv belastning Forstyrre opmærksomheden

3 Spatiale relationer ”Ud på nettet”,” ind på sitet”, ”hopper til siden” Men til forskel fra fysiske rum så har man ingen: –Størrelsesfornemmelser (10 eller 1000 sider?) –Retningsfornemmelser (op eller ned i hierarkiet?) –Stedsans (nedbrydes bl.a. pga. hyberlinks)

4

5

6 Direkte aktivering

7 10 minutters tekst- forfatter øvelse Skriv en t-shirt text til en usability konsulent Skriv en ident-linie til hendes mail Skriv et slogan for hendes usability afdeling Nøgleord: Selvindlysende - selvforklarende

8 Nielsens Heuristisk metode 4 usability-specialister eksaminerer et system for : 1.Visibility of system status 2.Match between system and the real world 3.User control and freedom 4.Consistency and standards 5.Error prevention 6.Recognition rather than recall 7.Flexibility and efficiency of use 8.Aesthetic and minimalist design 9.Help users recognize, diagnose, and recover from errors 10.Help and documentation

9 Pearrows tilføjelser vdr. web Chunking Omvendte nyhedspyramide Vigtige informationer over foldningen Undgå overdreven brug af features Gør siderne scan-bare Minimer download og respons-tiden

10 Steve Krug: Don’t Make Me Think ”Even if every Web site could afford a usability expert (which they can't), there just aren't enough of us to go around. So I tried to boil down what I've learned over the years (principles like "Don't make me think" and "Get rid of half the words on each page, then get rid of half of what's left") into a short, profusely illustrated book‹one that even the guy who signs the checks (the one who looks at the site when it's ready to launch and says "I hate green. And there should be more big pictures.") might read.” Foreword, November 2000

11 Krug´s heuristikker (1) Skab et klart visuelt hierarki: –Prominent placering til det vigtigste på siden –Visuelle relationer er logiske relationer –Visuelle underinddelinger skaber grupperingerne Brug konventioner Opdel siden i klart definerede arealer Gør det tydeligt, hvad der kan klikkes på Undgå visuel støj Undgå tvetydigeheder ved valgmuligheder

12 Skab fokus punkter

13 Visuelt hierarki

14 Byg visuelle hierarkier

15 Perceptuel lagdeling Gruppér informationer i familier på max. 7 +/-2 medlemmer Bestemt rangordenen imellem de enkelte familier 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

16 Struktur er det første man ser - hvis den ikke er der!

17 Krug´s heuristikker (2) Udelad unødvendige ord (”happy talk” og instruktioner) Vedvarende navigationsredskaber Site ID på alle sider Hver side skal have et navn, som er tydeligt og i overensstemmelse med den henvisning (linket) der førte til siden ”Du er her” indikatorer på alle sider (brødkrumme-stier øverst på siden)

18 Krugs navigations test Hvilket site er dette ? (Site ID) Hvilken side er jeg på ? (Sidens navn) Hvad er de væsentlige sektioner på dette web- sted ? (Tabs eller andre angivelser) Hvad kan jeg gøre på det niveau jeg befinder mig? (Lokal navigation) Hvor er jeg i den store sammenhæng? (brødkrumme-stier eller andre ”Her-er-du”) Hvordan kan jeg foretage søgninger?

19 5 eksistentielle spørgsmål til en hjemmeside Hvad er dette ? Hvad har de her? Hvad kan jeg gøre her? Hvorfor skal jeg bruge dette site og ikke et andet? Hvor starter man på sitet? – svar inden for 5 sekunder

20 Krugs navigations test Print en tilfældig side ud Lad testpersonen hole den i en armlængdes afstand, så den ikke kan læses tydeligt Bed vedkommende indkredse så hurtigt som muligt: –Id –Sidens navn –Sektioner –Lokale navigationer –”Her-er-du” –søgemulighederne

21 Direkte adgang

22 Navigation (1)

23 Navigation (2)

24 Navigation (3)

25 Navigation (4)

26 Navigation, brugere og indhold