Typer af interaktionsformer og deres egnethed til forskellige opgaver og brugere Kasper Hornbæk MMT, 18. april 2002 Introducer KH.
Interaktionsformer Fordele og ulemper ved fem almindelige interaktionsformer Påvirkning fra forskellige brugere og forskellige typer opgaver på brugbarheden af interaktionsformerne Udfordringer ved design af interaktionsformer og brugergrænseflader 2 Forelæning handler om: 1. Fordele og ulemper ved forskellige interaktionsformer. [Definition af interaktionsform] [Principper for disse former kan bruges ved andre typer systemer og kan blandes] 2. Hvordan påvirker forskellige brugere og forskellige opgaver brugbarheden af interaktionsformer? [Typer af brugere og opgaver] 3. Design af interaktionsformer og brugergrænseflader [Hvordan designes? Uddybe og eksemplificere Shneidermans eksempler omkring design af dialoger]
Shneiderman, s. 72 3 Fokuseret omkring Shneiderman s. 72 og fem interaktionsformer.
Forskelle mellem brugere Brugere er forskellige, fx Novicer/førstegangs brugere Kyndige, men uregelmæssige brugere af systemet Ekspert/hyppige brugere Dertil forskelle i fysiske, kognitive og perceptuelle evner, i personlighed, mellem kulturer, aldersgrupper, etc. 4 Først vil jeg gøre klar hvad vi i denne sammenhæng mener med at interaktionsformer er egnede til bestemte brugere (kort repetition af kapitel 1 og 2). Know thy user - Brugsvenlighed afhænger af brugere. Shneiderman skelner mellem tre slags brugere: (1) Novicer, fx en kiosk til bestilling af billetter på en banegård, www-side til download af en printerdriver (2) Kyndige,fx bestilling af bøger på nettet, (3) Ekspert brugere, fx mig til windows Andre forskelle at tage hensyn til
Forskelle i opgaver og brugssituationer Ofte er de opgaver som løses med en grænseflade forskellige Teknikker til analyse af opgaver omfatter Opgave profiler som viser hyppighed af forskellige opgaver for forskellige brugere Interview med brugere om opgaver Observation af brugernes arbejde 5 Opgaver som en grænseflade skal støtte er forskellige, fx skal nogle websider støtte både 1) indkøb, 2) præsentation af varemærke, 3) information til journalister Brugssituationen også forskellig, fx navigationssystemer til biler eller meget små skærme Studer hvilke opgaver brugere løser, fx ved en af følgende teknikker. OAI modellen.
Forskelle mellem interaktionsformer Gode brugergrænseflader afhænger derfor blandt andet af: Forståelse af brugere Forståelse af arbejdsopgaver Design, test og redesign Alligevel kan vi sige lidt om forskellen mellem interaktionsformer (Shneiderman kapitel 6 og 7) 6 Gode brugergrænseflader: Alligevel skal vi i dag prøve at sige noget generelt om forskellen mellem forskellige interaktionsformer, selvom vi kun overfladisk kan tale om brugere og opgaver.
Hvad er direkte manipulation? Direkte manipulation grænseflader har Interessante objekter og handlinger synlige Direkte manipulation af objekter i stedet for kompleks syntaks Hurtige, reversible og trinvise handlinger hvis resultater omgående er synlige 7 [Historisk baggrund] Xerox star, Apple Macintosh Interessante objekter og handlinger synlige. [Ex grænseflade til et bibliotek. OAI analyse af opgaver] Direkte manipulation af objekter. [Ex flytte objekter] Hurtige, reversible og trinvise handlinger. Synlige resultater. [Fornemmelse af at arbejde direkte på objekter]
Shneiderman, p. 201 8 Forklaring af Apple Macintosh MacPaint eksempel. Relation til de tre punkter.
Shneiderman, p. 215 9 Forklaring af eksempel med video indstilling Også problemer
Fordele ved direkte manipulation (I) Objekter og handlinger synligere -> Novicer støttes i at lære basale funktioner; kompetente brugere støttes i at huske funktioner; Direkte manipulation -> Fejlmeddelelser behøves sjældent, fejl undgås Reversible handlinger med feedback -> systemet kan udforskes og handlinger fortrydes, brugere har kontrol 10 Synligheden af objekter og handlinger: 1) Novicer støttes i at lære basale funktioner, 2) kompetente brugere støttes i at huske funktioner (genkendelse over genkaldelse), Direkte manipulation: 1) manipulation og objekter er integreret, 2) mindre syntax giver færre fejl, 3) Fejl kan forhindres Reversible handlinger: 1) Novicer støttes i udforskning og er mere trygge ved systemet, 2) bruge har kontrol og kan i et vist omfang gennemskue handlinger, dvs. formentlig højere subjektiv tilfredshed
Fordele ved direkte manipulation (II) Transparente systemer som fokuserer på opgaver og handlinger Direkte repræsentation mindsker gulf of execution og gulf of evaluation Forskning i problemløsning og læring fremhæver nytten af visuelle og direkte manipulerbare repræsentationer 11 Transparente systemer Normans syvtrinsmodel sidste gang. [Forklar 2*gulf.] Mindsker disse problemer Problemløsning: Nytte af konkrete objekter og tegninger, for eksempel ved matematiske problemer. For eksempel visuelle beviser for euklids teorem
Gulf of execution and evaluation 12
Tufte (1990), s. 84 13
100% Michottes studier af opfattelsen af årsagssammenhænge 50% Direct Launching Delayed launching No causality 100 200 Time (msec.) 14 handlinger så hurtige at man oplever at man direkte manipulerrer ting. Michotte og kausalitet]
Empiriske studier af direkte manipulation Margono & Shneiderman (1987) sammenligner DOS-prompt med Macintosh 30 novicer skaber, kopierer, omdøber og sletter filer Direkte manipulation hurtigere (4.8 vs 5.8 minutter), giver færre fejl (0.8 vs 2), og foretrækkes af forsøgspersonerne 15 Fordele fra empiriske studier. Sammenligner grænseflader for konkrete brugsvenlighedsparametre Eksperimenter som dette er en kilde til meget viden i HCI. Nærmere når vi tager kapitel 4.
Ulemper med direkte manipulation Rumlige og visuelle repræsentationer er ikke altid nyttige Brugeren skal lære betydningen af visuelle metaforer, ikoner, etc. Makroteknikker og historik er svage Uegnet til nogle brugere og brugssituationer 16 Rumlige/visuelle repræsentationer ikke altid nyttige. Fx svært at programmere eller søge efter web-sider. [Grafer versus text] Brugeren skal lære betydninger af ikoner og visuelle metaforer. Også forstå begrænsninger Makroteknikker/historik dårlig. For eksempel er undo i windows ikke direkte manipulation. Uegnet til nogle brugere: stærkt baseret på visuelle evner: synshandikap, ikke-visuelle personligheder, kræver meget skærmplads, hvad gør man ved mange objekter?
Shneiderman, p. 229 17 Shneiderman, box 6.1 Nogle spørgsmål?
Hvad er menu-grænseflader? Grænseflader hvor brugere vælger fra en liste af punkter For eksempel telefon-baserede systemer, mobiltelefoner, web-sider, dialogbokse, etc. 18 Af de grunde Systemer hvor brugere læser en list af punkter, vælger et, og observerer effekten af deres valg. Kan for eksempel lede til en ny menu.
Eksempel med word-menuer [Problem med paste] 19
Design spørgsmål (I) Hvordan vælges organisering af menugrænseflade? Relateret til opgaven Dybde versus bredde Klare, distinkte menu-dele 20 Denne interaktionsform afhænger af organisering af menuer. 1) Lad organiseringen være bestemt af opgaven [ex mobiltelefoner] 2) Foretræk brede menuer over dybe menuer [ex 8*2 vs 2*6] Også vigtig ved load tider 3) Skab klare distinkte kategorier [fx hvorfor er paste i edit menuen?] Skal være klart for brugeren hvor funktioner findes
21 [Forklar hvorfor det er et menu-system] Ser umiddelbart ud til at være et relativt fladt hierarki. Hvad med navngivning af de forskellige grupper, er ej distinkte Hvis jeg ville købe et modem hvad så? Spotmarked er ikke tæt på opgave? (Opgaver relateret) Hvad er bundlede varer?
Design spørgsmål (II) Hvordan præsenteres inden for en menu? Ordning, fx alfabetisk, numerisk, hyppigst brugt, eller vigtigste Navngivning af menupunkter Hvordan støttes brugere i at orientere sig i menuer? 22 Hvordan ordnes menupunkter inden for en kategori? Navngivning af menupunkter, sprogligt præcise og klare Orientering: Ikke for mange menupunkter, Eksempel på bread-crumbs, orientering på web-sider
23 Uklare kategorier: Musik/Film, Kunst/Kultur Er undermenupunkterne ordnet? Online handel? Tænker brugere på online handel som en opgave?
24 Bedre design men stadig svært (grundskole). I kan forestille jer hvor alvorligt det ville være at vælge de forkerte betegnelser
Støtte til orientering 25 Eksempel på bread-crumbs, orientering på web-sider Shneiderman nævner at størrelse kan varieres.
Fordele ved menu-grænseflader Genkendelse snare end genkaldelse Godt til novicer og brugere som sjældent benytter systemet Kan støtte beslutningstagning 26 -genkendelse snarere end genkaldelse Godt til sjældne brugere Kan støtte beslutningstagning, fx ved såkaldte wizards (installation af en printer)
Problemer med menu-grænseflader Ikke altid effektivt for eksperter Ikke egnet til alle opgaver Svært at præsentere mange valgmuligheder på begrænset plads 27 Ikke altid effektivt for eksperter. Skal støtte at man kan have genveje til menupunkter. Man skal også kunne indtaste valg inden menuen er vist (særligt vigtigt i telefoner) Ikke egnet til alle opgaver, søgning på nettet Svært at præsentere mange muligheder, fx som en del af en dialog hvor man skal vælge hvilket land man bor i.
Alpha slidere Shneiderman, s. 245 28 Viser 10000 skuespillere i en filmdatabase.
www.cs.umd.edu/hcil/fisheyemenu 29 Vis eventuelt en fiskeøjemenu
Shneiderman, s. 258 30
Formular/blanket grænseflader Brugeren udfylder felter i en grænseflade som minder om en formular eller blanket Eksempler på WWW eller ved registrering af programmer Brugsvenligt design blandt andet baseret på principper for menuer og design af papirformularer 31 Brugeren ser en række felter, udfylder felterne
Design spørgsmål Logisk og æstetisk organiseret Konsistente og forståelige betegnelser Nem bevægelse på formularen Forebyggelse af fejl, hvor muligt 32 Logisk/æstetisk layout. Svarer organiseringen til logiske dele af opgaven. Konsistente betegnelser Nem bevægelse. TAB+Retur. [Litteratursøgning på web-of-science] Forebyggelse af fejl, e.g. dropdown menuer
33 Vurderes i forhold til design principper: Æstetik/logik. (1) Hvorfor hent abonnoment? (2) Flyt adresse/flyt tilbage i anderledes orden (3) grimt mandag etc. Konsistent/forståeligt. (1) Uklare navne på knapper Nem bevægelse: tab, retur. Forebyg fejl: (1) lille kalender, (2) dato felt delvist fastlagt
En berømt fiasko 34
Shneiderman, s. 264 35
Kommandoline grænseflader Fordele: Flexibilitet Kraftfulde, fx ved makroprogrammering Brugeren har initiativet Ulemper: Kræver træning Brugere skal huske kommandoer Ikke egnet til novicer 36
Naturlig sprog grænseflader Fordele: Skal ikke lære syntaks Ulemper: Kan kræve yderligere dialog Kan være uforudsigelig Mangler kontekst Kan være besværlig 37
Design af dialoger Kombination af menu-valg, indtastning af data og direkte manipulation Selve dialogen kan designes ud fra tidligere nævnte retningslinier Overvej også hvor dialogen kommer frem 38.. Skal være nem at lukke, etv.
Mullet & Sano, p. 105 39
40 Sidst et eksempel på en kombination. Kommenter gerne Organisering: Enkel søgning skulle være øverst Rodet Navngivning: Fritekst, hvad betyder det Opgave egnet: Hvorfor er emnekoder det første felt?
41 Overflødig information? Organisering
42 Oversigt til højre, god overskuelighed Total kaos, hvorfor skal jeg vælge hvor jeg vil hente materialet Meningløs tænkning om opgave: Hvem vil finde et bibliotek hvor de vil hente en bog UDFRA telefonnummer
43
44 Endelig, Hvilke biblioteker har materialet GEM perspersonlige låneoplysninger har jeg aldrig set før. Hvorfor både nummer og navn?