Oppsummering TDT4180, designdelen (1)

Oppsummering TDT4180, designdelen (1) Følgende kapitler i Shneiderman er pensum: Kap. 1: Human Factors of Interactive Software Kap. 2: Theories, Principles and Guidelines Kap. 3: Managing Design Processes unntatt kap. 3.9 Kap. 4: Expert Reviews, Usability Testing, Surveys and Kap. 5: Software Tools unntatt kap. 5.4 Kap. 6: Direct Manipulation and Virtual Environments Kap. 7: Menu Selection, Form Fillin and Dialog Boxes Kap. 8: Command and Natural Languages Kap. 9: Interaction Devices Unntatt kap. 9.3.5 Kap. 10: Collaboration Kap. 12: Presentation Styles: Balancing Function and Fashion 1

Oppsummering TDT4180, designdelen (2) Følgende utover Shneiderman er pensum: Utdypning i forhold til kapittel 1: * ISO9241 Ergonomic requirements for office work with visual display terminals, part 11: Guidance on usability Tilgjengelig via it s learning 3.1, 3.2, 3.3, 3.4 Definitions, s. 2 B3: Choosing usability criteria, s. 10 Utdypning i forhold til kapittel 3: * ISO13407 Human-centred design processes for interactive systems Tilgjengelig via it s learing 5: Principles of human-centred design, s. 2-3 7: Human-centred design activities, s. 4-10 Utdypning i forhold til kapittel 12: * Forelesningsnotater, spesielt forelesning nr. 10: - Om Norman s prinsipper: Affordance, Constraint, Mapping, Feedback. - Om gestaltprinsippene for visuell persepsjon. 2

Kap. 1: Human Factors of Interactive Software Sentrale delkapitler: 1.2 Usability requirement 1.3 Usability measures 1.6 Goals for our profession, spesielt kap. 1.6.1. Sentrale begreper: Brukbarhet (usability). Definisjon (s. 16 i boka og forelesningsnotat 1) HCI/MMI fagets historie og egenart i korte trekk Historien til det grafiske grensesnittetet (GUI) 3

Definisjon av Brukbarhet: ISO 9241 Brukbarhet er... the effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments På norsk: Anvendbarhet, Effektivitet og Tilfredsstillelse for bestemte brukere med bestemte mål i bestemte omgivelser 4

I begynnelsen var datamaskinen en regnemaskin Yrkesgrupper Fysikere Matematikere Programmerere + etterhvert systemkonsulenter 5

Ca. 1980 kom fokus på brukeren,... ble psykologer og grafiske designere involvert i studier av menneske maskin interaksjon Brukervennlighet Menneske maskin interaksjon 6

...så kom fokus på organisasjonen, Antropologer og sosiologer CSCW / Participatory design Organisasjon - system interaksjon 7

så kom fokus på samfunn og infrastruktur. Ca 1990+ Antropologer og sosiologer Samfunn - infrastruktur interaksjon WWWeb Samfunn - infrastruktur interaksjon 8

Visjoner og prototyper 1975-85 Xerox PARC Xerox 8010 Star 1981 Apple Lisa 1983 Apple Macintosh 1984 9

Kap. 2: Theories, Principles and Guidelines Sentrale delkapitler: 2.3.3 Choose an interaction style. 2.3.4 Use the eight golden rules of interface design. 2.4.1 Levels of analysis theories 2.4.4 Consistency through grammars Sentrale begreper: Modeller av brukergrensesnitt på 4 nivåer (konseptuelt, semantisk, syntaktisk og leksikalsk). s. 86. Mental modell vs. konseptuell modell Interaksjonsstil / dialogform Guidelines og prinsipper. 10

Tre modeller av et system Designer/Utvikler: Konseptuell modell Utviklers intensjon Spesifikasjon UML Bruker: Mental modell Det brukeren oppfatter bekreftes/avkreftes System: Teknisk modell Implementasjon UML 1-til-1 kode 11

Grammatikker - språk Kari spiser fisk Leksikalsk nivå: Ordene Kari, spiser, fisk. Satt sammen fra et alfabet a, b, c Syntaktisk nivå: <setning> = <subjekt> <verb> <predikat> Semantisk nivå Spise(Kari, fisk): Pre: på_bordet(fisk) & sulten(kari) Post: i_magen(fisk) & mett(kari) 12

Interaksjonsstiler Mange stiler og sub-stiler web-grensesnitt kombinerer mange andre spill finnes i mange varianter brett-, puslespill opplevelse, eventyr, action, inkl. MUD (1.person, fugleperspektiv) strategi naturlig språk telefon-grensesnitt Finn den rette stilen Forstå den: karakteristika, fordeler og ulemper Design iht. den 13

Kommando språk >form a,2,sirkel >farge a,2,blaa > 14

Form Fill-in Fyll inn innslag: X-koord.:_a_[a-b] Y-koord.:_2_[1-2] Form:sirkel_ Farge:blaa Trykk Enter for å fullføre 15

Menybasert: Spørsmål svar dialog Velg Farge: 1: Rød 2: Blå 3: Gul >2 16

Menybasert: Nedtrekk Form Farge Rød Blå Gul 17

Ikonbasert - Valgt objekt Form Farge 18

Verktøybasert Form Farge 19

Direkte manipulasjon - drag n drop Form Farge Form Markør Avslutt 20

Flere typer design-kunnskap Overordnede prinsipper Virker som selvfølgeligheter Vanskelig å operasjonalisere Design patterns Konvensjoner og reoccurring solutions Styleguides og standarder Konkrete regler for bruk av design-elementer Spesifikke for interaksjonsstil og plattform Regler for klasser av applikasjoner 21

Sjekklister for brukbarhet Jacob Nielsen s 10 punkts liste Basert på gjennomgang av systemer Finnes på www.useit.com Bruce Tognazzini s First Principles 17 prinsipper /punkter Finnes på www.asktog.com Don Norman s prinsipper fra Design of Everyday Things Disse + B. Laurel i NielsenNorman Group 22

8 golden rules 1. Lag konsistente grensesnitt. 2. Gi trente brukere shortcuts. 3. Gi informative tilbakemeldinger. 4. Lag tydelige arbeidssteg i dialogene. 5. Unngå feil og gi evt. enkle feilmeldinger. 6. La det være mulig å angre. 7. La brukeren ha kontroll. 8. Reduser behovet for å huske (korttidsminnet) 23

Kap. 3: Managing Design Processes Sentrale delkapitler: 3.2 Organizational design to support usability 3.4 Development Methodologies 3.5 Ethnographic observation 3.6 Participatory Design 3.7 Scenario Development Sentrale begreper Bruker-sentrert systemutvikling Iterative prosesser Feedback løkker i prosessene Brukermedvirkning Empiriske metoder 24

Fra ISO 13407 En bruker-sentrert designprosess har typisk: Aktiv involvering av brukere, og en klar forståelse av bruker og oppgavene. En avveid allokering av ressurser mellom teknikk og bruker. En iterativ prosess Tverrfaglige utviklingsteam. Sterkt fokus på at utvikler må forstå og kunne formulere produktets brukssammenheng (context of use). Fokus på kommunikasjon med bruker gjennom konkrete prototyper etc. 25

ISO 13407 prosess Identifisere behov for brukersenteret design Forstå og spesifisere brukssammenheng Evaluere design mot krav Systemet tilfredstiller bruker og organisasjons krav Spesifisere bruker og organisasjons krav Utvikle designløsninger 26

Metoder og teknikker Løkker med feedback fra bruk I alle faser av produktutviklingen Planlegge iterative prosesser Forstå brukere og oppgaver Brukermedvirkning Gir eiendomsforhold til produkt Konkret tenkning Piler og bokser må suppleres med konkrete eksempler 27

Iterativt Design Design/Redesign -> Prototyp Analyse av videologg........................... Brukbarhetstesting................ 28

Feilrate (eksempel) 50 40 30 20 10 0 Iterasjon 1 Iterasjon2 Iterasjon 3 Iterasjon 4 Iterasjon 5 29

Sammenheng mellom teknikker Scenariebygging Scenarier/Storyboards Prototypbygging Bilder, Video Språk/begreper Konseptutvikling Konseptuell modell/ metafor Papirprototyp/ Flash prototyp Evaluering Hos utvikler Mot bruker (empirisk) Feltstudie Brukbarhetstesting m/ analyse 30

Sammenheng mellom teknikker Scenariebygging Scenarier/Storyboards Prototypbygging Bilder, Video Språk/begreper Konseptutvikling Konseptuell modell/ metafor Papirprototyp/ Flash prototyp Evaluering Hos utvikler Mot bruker (empirisk) Feltstudie Brukbarhetstesting m/ analyse 31

Empiriske metoder Oppgaveanalyse, observasjon Følg en potensiell brukers hverdag med videokamera Intervju, analyse av eksisterende praksis Prototyping - Brukbarhetstesting Papirprototyper, Wizard of Oz Vertikale og horisontale prototyper Videokamera, verbale protokoller Logging av bruk Automatisk logging 32

Brukermedvirkning Inkludere brukere i designteamet Frikjøpe brukere. Fulle rettigheter Design på arbeidsplassen Ta med utviklere dit ting skal skje Tenke sosio-teknisk: Utvikle samtidig teknologi, brukere, og organisasjoner 33

Metodikk med multidisiplinær bakgrunn: Kognitiv Psykologi Antropologi Kunst og Grafisk design Teater, Film og TV Arkitektur og Industridesign 34

Scenariebygging Utvikle konkrete scenarier med: Mennesker Fysiske omgivelser og dingser Et tenkt produkt? 35

Storyboard - Fortell en historie 36

Scenario, Storyboard Hvem Hva Hvor Når 37

Eksempel: Klimakontroll i et hus. Karakterer: Anne 12 år, skoleelev. Per 44 år, huseier. Arnhild 75 år, bestemor. Scenarier: Anne kommer hjem fra skolen og fryser. Familien skal på påskeferie. Arnhild vil spare strøm. 38

Kap. 4: Evaluating Interface Designs Sentrale delkapitler: 4.1 Introduction 4.2 Expert reviews 4.3 Usability testing and labs. 4.4 Surveys 4.5 Acceptance tests 4.6 Evaluation during active use Sentrale begrep: Empiri / Empiriske data Formale metoder vs. empiriske metoder Kvalitativ vs. kvantitativ metode Kontrollert eksperiment vs. feltstudie 39

Evalueringsteknikker Formale metoder vs. empiriske metoder Gjøres evalueringen med faktiske brukere? Feltstudier vs. eksperimenter Gjøres evalueringen under kontrollerte forhold i en lab eller ute i felten der brukere jobber og lever? Kvalitativt vs. kvantitativt Er resultatene primært i form av tall eller i form av tekst/bilder? 40

41

Formale vs. empiriske evalueringer Innhentes nye data, eller gjøres evalueringen inne på kontoret? Formale evalueringer: Bruk av generell teori, guidelines etc. Empiriske evalueringer: Observasjoner eller eksperimenter med faktiske brukere. Nye data. 42

Feltstudier vs. eksperimenter Grad av kontroll Naturvitenskapelig metode: Kontrollere alle parametere unntatt én Målbarhet Repeterbarhet, objektivitet HF/SVT metode: Studere sosiale systemer i naturlige omgivelser Meningsdimensjonen Observatøren som instrument 43

Kvalitativt vs. kvantitativt Typen av data: Tall vs. tekst/bilder Kvantitativt, eksempler: Tid for å utføre en oppgave Antall hit på en hjemmeside Gj.snitt alder i en brukergruppe Kvalitativt, eksempler: Bruk av metaforer i talk aload protokoll E-mail/News arkiv Skisser på servietter 44

Formale evalueringsmetoder Ekspertvurderinger Heuristisk evaluering Guideline-sjekk Konsistens-sjekk Kognitiv gjennomgang Formell brukbarhetsinspeksjon Matematiske modeller Keystroke-level models GOMS 45

Kognitiv gjennomgang Engelsk: Cognitive Walkthrough En eller flere eksperter går igjennom grensesnittet sett i forhold til de konkrete oppgavene som brukeren skal utføre. Ekspertene går igjennom grensesnittet som om de møter det for første gang. (Ligner brukbarhetstest, men tørrsvømming med tenkte brukere) Krever at ekspertene har evne til å sette seg i brukerens sted. Kunnskap om brukere og brukssammenheng er nødvendig. 46

Formell brukbarhets inspeksjon Engelsk: Formal usability inspection Utviklere og grensesnitteksperter møtes i et rom. Utviklere forsvarer grensesnittet. Gjennomgang med diskusjoner. Tar mye tid, men har også en positiv læringseffekt. 47

Empiriske evalueringsmetoder Intervjuer Fokusgrupper Spørreskjemaer Brukbarhetstester Testing av prototyper Akseptansetest Felt-tester Observasjon og logging av faktisk bruk Online hjelp og feilrapportering. 48

Intervju Utvelgelse av intervjuobjekter Typer av intervju: Strukturert intervju Semi-strukturert intervju Åpent intervju Intervju-guide Datainnsamlingsteknikker Analyse av intervjuet 49

Observasjon Hva er vi interessert i å vite mer om? Hvor skal vi observere? Når skal vi observere? Hva skal vi ha fokus på? Hvordan skal vi gjøre datainnsamlingen? Hvordan skal vi tolke dataene? 50

Spørreskjemaer Identifiser brukergruppen. Bruk tid på å lage et godt skjema. Ta gjerne utgangspunkt i f.eks. skjemaet i læreboka. Bruk tid på å analysere resultatet. Gjør helst noe intervju og observasjon først for å unngå hull i spørreundersøkelsen. 51

Eksempel 52

Fokusgrupper og workshops Samle et antall brukere for noen timer eller en hel dag. Gå igjennom systemene og få tilbakemeldinger. Viktig: Ha en detaljert plan klar på forhånd over hva som skal skje. Ha også en plan B i nødfall. 53

Brukbarhetslaboratoriet: 54

Arbeidsstegene i brukbarhetstesting 1. Uvikling av målsettinger og hypoteser for testen og utvikling av testplan (hvor, når osv.) 2. Pilot-test 3. Skaffe brukere gjennom tilfeldig eller stratifisert utvalg 4. Forbrede materiale og kontekst 5. Velge forsøksleder 6. Utføre testen (10 punkter) 7. Omforming av data til funn og anbefalinger 55

Ti punkter om å utføre brukbarhetstesting 1: Introduser deg selv 2: Beskriv hensikten med testen 3: Fortell deltakerene at de kan avbryte når de vil 4: Beskriv utstyret i rommet og begrensningene til prototypen 5: Lær bort hvordan man tenker høyt 6: Forklar at du ikke kan tilby hjelp under testen 7: Beskriv oppgaven og introduser produktet 8: Spør om det er noe de lurer på og kjør testen 9: Avslutt testen med å la brukeren uttale seg før du samler evnt. løse tråder 10: Bruk resultatene 56

Logging av bruk Krever en installasjon med automatisk logging. Genererer anonymiserte loggdata. Krever analyseverktøy for å se sammenhenger. Kan gi viktig feedback på en tidlig versjon av et system. 57

Brukernære metoder i systemutvikling Navn Formål Type data God på Dårlig på Spørreskjema Få svar på spesifikke spørsmål I hovedsak kvantitative Kan nå mange pesoner Vi må vite hva vi skal spørre om Intervju Utforske. Få innblikk i et tema. Kvalitativt Gi innsikt i et problem. Dialog med bruker. Tar tid, og viser ikke faktisk arbeidskontekst. Fokusgrupper og workshops Dialog med gruppe av brukere Kvalitativt Komme dypt i å forstå et problem. Brukerinvolvering Ressurskrevende. Observasjon Studie av faktisk brukskontekst Kvalitativt Forstå brukerens faktiske hverdag. Tar tid. Krever ofte tillatelse, f.eks. på sykehus. Brukbarhets-testing. Evaluering av prototyp eller produkt Kvalitativt og kvantitativt Evaluere brukskvalitet av prototyp/produkt. Krever at man har prototyp. Skjer ikke i faktisk kontekst. Logging av bruk Evaluering av faktisk bruk Kvantitativt Faktisk bruk. Mange personer. Gir ikke innsyn i årsaker til problemer. 58

Kriterier for valg av metode Fase i prosjektet (tidlig, midt, sent) Velkjent type prosjekt vs. nytt og uprøvd. Antall brukere og installasjoner. Kritiske grensesnitt? (for eksempel sykehus og romfart). Totalbudsjett for prosjekt og budsjett for evaluering. Tid tilgjengelig (kalendertid og persontid). Erfaringsnivå i utviklingsteamet. 59

Fase i prosjektet Tidlig, f.eks.: Feltstudier og spørreskjemaer Intervjuer og fokusgrupper Midt, f.eks.: Papirprototyper m/ Wizard of Oz tester Kjørende prototyper m/brukbarhetstester Ekspertgjennomganger Sent, f.eks.: Felttester Akseptansetest Logging av bruk, intervjuer, online hjelp. 60

Velkjent type prosjekt vs. nytt Velkjent: Standardiserte tester. Veletablert hvem som er brukere Ny type produkt Åpent i forhold til brukere og bruk Mer utforskende tester Mer intervju og feltstudier 61

Antall brukere og installasjoner. Mange brukere: Viktig å få oversikt over brukergruppene. Spørreskjemaer. Brukbarhetstest med representative brukere. Få brukere: Observasjon, fokusgrupper og tester. Direkte dialog med brukere, og større mulighet for å involvere de aktivt i utviklingsprosessen. 62

Kritiske grensesnitt Eksempler: Sykehus, Prosesser i industri, El. nettet, telenettet. Krever: Omfattende tester av kritiske deler av grensesnittet. Analyse av risiko ved operatørfeil, og allokering av ressurser tilsvarende. Dyp forståelse av arbeidsprosess og mulige feilsituasjoner. Utstrakt bruk av scenarie (daglig drift + worst case ). 63

Totalbudsjett for prosjekt og budsjett for evaluering. Mye penger: Kombiner mange metoder for å kunne få verifisert funn via mange kanaler (s.k. metodetriangulering ). Planlegg evalueringer som en integrert del av utviklingsprosessen. Lite penger: Sørg for et minimum av intervjuer, papairprototyping og wizard-of-oz tester. Fokuser på å identifisere brukersentrerte aktiviteter som gir mest uttelling i forhold til en risikoanalyse av prosjektet. 64

Tid tilgjengelig (kalendertid og Kalendertid: persontid) God tid: Planlegg inn flere iterasjoner og bruk flere metoder. Kort time-to-market : Gjør en risikoanalyse og planlegg deretter. Persontid: Mye ressurser: Gjør flere ting samtidig (intervjuer, observasjon, spørreskjemaer) Lite ressurser: Prioriter utifra prosjektets egenart. 65

Erfaringsnivå i utviklingsteamet Mye erfaring: Åpner for et spektrum av metoder. Lite erfaring: Bruk tid på å lære noen grunnleggende metoder som intervjuteknikk, observasjon med video, papirprototyping og enkel brukbarhetstesting. 66

Kriterier for valg av metode Fase i prosjektet (tidlig, midt, sent) Velkjent type prosjekt vs. nytt og uprøvd. Antall brukere og installasjoner. Kritiske grensesnitt? (for eksempel sykehus og romfart). Totalbudsjett for prosjekt og budsjett for evaluering. Tid tilgjengelig (kalendertid og persontid). Erfaringsnivå i utviklingsteamet. 67

Kap. 5: Software Tools Sentrale delkapitler: 5.2 Specification methods 5.3 Interface-building tools Sentrale begrep: Utviklingsverktøy Prototypng / rapid prototyping Tilstandsmaskiner Dialog-grammatikker 68

Typer av formalismer Grammatikker Leksikalsk nivå Syntaktisk nivå Semantisk nivå Tilstandsmaskiner State-Transition Diagrams Oppgave-hierarkier Objekt-baserte modeller 69

Grammatikker - kommandospråk >dir *.exe <kommando> = <fil_liste> <kopier>,,,, <fil_liste> = dir <fil> <fil> = <fil_navn>. <fil_<type> <fil_navn> = * <string8> <fil_type> = * <string3> o.s.v. 70

Grammatikker - GUI Form Farge Form og farge editor basert på valg av verktøy. <editere> = <forandre_form> <forandre_farge> <forandre_form> = <velg_form> (<velg_objekt>)+ <forandre_farge> = <velg_farge> (<velg_objekt>)+ Kommentar: (<noe>)+ betyr <noe> en eller flere ganger. 71

Grammatikk diagram <editere> = <forandre_form> <forandre_farge> <forandre_form> = <velg_form> (<velg_objekt>)+ <forandre_farge> = <velg_farge> (<velg_objekt>)+ editere forandre_form forandre_form forandre_farge velg_form velg_objekt forandre_farge velg_farge velg_objekt 72

Tilstandsdiagrammer Av/På knapp ( toogle ) Av Klikk / skift ikon, start lyd Klikk / skift ikon, stopp lyd På 73

Tilstandsdiagrammer GUI Form Farge Tilstandsdiagrammer tvinger fram beslutninger om viktige detaljer. Ting blir fort komplisert. Klikk i objekt / Forandre objekt Klikk ikon / vis verktøy Pil Klikk utenfor / vis pil Verktøy Klikk ikon / skift verktøy 74

Example Hierarchical Task Analysis (graphical) Borrow a book from the library 0 plan 0: do 1-3-4. If book isn t on the shelf expected, do 2-3-4. go to the library find required book take book retrieve book from shelf to counter 1 2 3 4 plan 2: do 2.1-2.4-2.5. If book not identified from information available, do 2.2-2.3-2.4-2.5 access catalog access search screen enter search criteria identify required book note location 2.1 2.2 2.3 2.4 2.5 75

Hvorfor modellere interaksjon? Primært Kunne teste ut en design ide empirisk - mot virkeligheten Sekundært Utforske design rommet /frihetsgradene Kommunisere med andre utviklere Kommunisere med oppdragsgiver Kommunisere med sluttbrukere Teste tekniske problemer 76

Konsekvenser for modellen/prototypen Den trenger ikke å overleve lenger en brukbarhetstesten Den behøver ikke være robust, detaljert, rask realistisk, vakker, utvidbar, eller komplett Alle triks er lov! Dens verdi skal være lav Just enough prototyping Gillian Crampton Smith 77

Horisontale vs. Vertikale prototyper Horisontale: Vise totalsystemet uten særlig mye interaktivitet og funksjonalitet. Vertikale: Gå i dybden på en detalj, d.v.s implementere nok interaktivitet og funksjonalitet til å kunne teste dette. 78

Interaktive prototyper Fortrinnsvis vertikale prototyper, evt. kombinasjon. Lag en quick and dirty implementasjon av interaktivitet v.h.a. et egnet verktøy. Spesialsydd for å teste ut designidéer. Behøver ikke kunne leve sitt eget liv. 79

Papirprototyper Meget hurtig Design av grensesnittet slik brukeren opplever det Ikke riktig responstid, lyder og animasjoner Krever god forestillingsevne hos brukere (bedres med rollespill!) 80

Wizard-of-OZ modeller Utseendemodell animert med mennesker og tilgjengelig teknologi bak kulissene. Realistisk gjengivelse hvis alt fungerer Kostbar men svært realistisk simulering 81

Lag og kast vs. Evolusjonær utvikling Det er mulig å utvikle et system evolusjonært, og la hver versjon bli testet. Fordeler i forhold til Lag og kast prototyper: Man kaster ikke bort arbeidet med prototypene. Man kan bygge videre mot ferdig produkt. Ulemper: Koden blir fort veldig uryddig. Det tar lenger tid å utvikle med tanke på at koden skal kunne utvides. Begrenser valgmuligheter i forhold til verktøy. 82

Lo-fi vs. Hi-fi prototyper Lo-Fi (Low fidelity): Enkle prototyper uten mye detaljer verken grafikk eller interaksjon Brukes tidlig i prosjekter Enkle å lage, men mangler detaljrikdom Hi-Fi (High fidelity): Komplekse prototyper med mer detaljer Brukes senere i prosjekter Koster med å lage. Lages ofte v.h.a. prototypingsverktøy. Ligner med på det ferdige produktet. 83

Prototypingsverktøy Macromedia Director/Flash Visual Basic Web verktøy: eks. Dreamweaver. HyperCard, SuperCard Smalltalk JBuilder, Delphi++ 84

Kap. 6: Direct Manipulation and Virtual Environments Sentrale delkapitler: 6.2 Examples of direct-manipulation systems Sentrale begrep: Direkte-manipulasjon Xerox Star 85

Direkte manipulasjon - drag n drop Form Farge Form Markør Avslutt 86

Xerox Star 87

Kap. 7 & 8 Kap. 7: Menu Selection, Form Fillin and Dialog Boxes Kap. 8: Command and Natural Languages Dekkes i stor grad av foilene om interaksjonsstiler I tillegg om organisering av tid/rom i grafiske grensesnitt. 88

Tid/Rom multipleksing Aktive elementer kan fordeles i rom eller tid. Rom-multipleksing (f.eks. tastatur): Ett element pr. funksjon, mange elementer, få klikk. Tidsmultipleksing (f.eks. morsekode): La samme element brukes til flere ting, få elementer, mange klikk. 89

Tid/Rom multipleksing Tidsmultipleksing: + Få elementer på skjermen, sparer plass - Krever flere operasjoner - Valgmulighetene er ikke umiddelbart synlige Rom-multipleksing - Tar mye plass på skjerm + Krever få operasjoner + Alle valg er synlige (synlighet) 90

Tid/Rom multipleksing: Lysbryter Tidsmultipleksing: Toggle bryter. Av/På Rom-multipleksing: Av og På knapp. Av På 91

Datatyper og GUI-elementer Boolean avkryssningsboks, krever tydelig ledetekst radioknapper/nedtrekksliste/liste med symmetriske valg (ja/nei, av/på,...) Heltall tekstfelt, krever validering radioknapper, relevant valg + Andre... -knapp combobox, tekstfelt med validering + relevante valg tall med opp/ned-knapper slider, relevant verdiområde og granularitet 92

Datatyper og GUI-elementer... Desimaltall tekstfelt, krever validering slider, relevant verdiområde og granularitet Dato tekstfelt med validering (merk datoformat) uavhengig innfylling av år, måned og dag som tall nedtrekksdialog for kalender Tekst tekstfelt, evt. validering og komplettering combobox, tekstfelt + relevante valg merk at tekstvariabler ofte brukes til å begrensede sett 93

Datatyper og GUI-elementer... Egne objekter bruk av navn (er egen ID) som nøkkel liste av relevante objekter, f.eks. alle av en klasse, naboer et nettverk, parent-kjede, etc. combobox med komplettering gir stor fleksibilitet Strukturer aggregeringshierarki, tre-komponent 1-n relasjon, lister side om side klassifiseringshierarki, felles visning med ulike ikoner 94

Auditorieøving Byggestener: Ja Tekst.. 17 Gitt følgende problem: Du skal lage et brukergrensesnitt for å styre temperaturen i et hus. Huset har tre rom: Stue, Soverom, Bad. Temperaturen kan settes uavhengig i hvert rom i hele grader mellom 15 og 25. Systemet måler temperatur pr. rom mellom 0 og 50 grader. For hvert rom skal den automatiske temperatur-reguleringen kunne slåes av og på. Brukeren skal kunne sette ønsket temperatur, se temperatur og slå av/på regulering for alle rommene. Klassen løser oppgaven etter tre forskjellige kriterier: A: Rom-multipleksing. Færrest mulig museklikk. B: Tids-multipleksing. Minst antall grensesnittelementer. C: Brukervennlighet. Mest intuitivt grensesnitt. 95

Eksempler på A, B og C De følgende eksemplene er hentet fra auditorieøving i SIF8040 fredag 07.03.2003. Løsningene er basert på skisser som kom fram, men er så detaljert ut av foreleser. De illustrerer litt av de utall av mulige løsninger som finnes på de fleste brukergrensesnitt-problemer. 96

A: Rom-multipleksing Temperatur: 24C Termostat: + - Stue 23C Automatisk: Soverom Temperatur: 20C Termostat: + - 19C Automatisk: Temperatur: 21C Termostat: + - Bad 27C Automatisk: 97

B: Tids-multipleksing Slipp knapp / skift rom sirkulært Bruksanvisning 1. Trykk for å velge rom. 2. Hold inne for å sette temperatur. 3. Trykk deg fram til riktig temperatur. Velg rom Bad Temperatur: 24C Termostat: 23C Vent på input Hold knapp > 1 sekund / Knappetekst Velg temp. Sett temp. Vent > 5 sek. / Knappetekst Velg rom Forenkling: Uten valg av automatisk Slipp knapp / skift temperatur (+1 sirkulært) 98

C: Brukervennlighet Stue Soverom Bad Temperatur: 24C Stue Trykk Bad Bad Termostat: + - 23C Automatisk: Trykk Stue Soverom Trykk Soverom Trykk Bad Trykk Stue Bad Trykk Soverom 99

Kap. 9: Interaction devices Dette er lesestoff som i stor grad er dekket i andre fag. Studentene skal kjenne til de vanligste av disse enhetene. Unntatt 9.3.5. Fitts Law som ikke er gjennomgått. 100

Mixed Realities TV studios Head up displays Simulators Telerobotic operations Net: Working and Playing Design and Construction Medicine Training 101

Kap. 10: Collaboration Sentrale delkapitler: 10.2 Goals of cooperation Tabellen side 481 10.3 Asynchronous Interactions: Different Time, Different Place. 10.4 Synchronous Distributed: Different Place, Same Time. Sentrale begreper Synkront vs. Asynkront Lokalt vs. distribuert 102

CSCW Computer Supported Cooperative Work Norsk: Samhandlingsteknologi Har vært en del av HCI siden starten. Vokste fram som et eget fagfelt på 90-tallet. Ble før ofte kalt groupware. Datamaskinen brukt som kommunikasjonsmedium. Konvergens data+tele+media 103

Tradisjonelle media En-til-en: Samtale (face-to-face) Brev Telegraf Telefon Telefax En-til-mange: Teater, Konsert, Tale Bøker Aviser Radio TV Enveis Enveis Toveis 104

Tradisjonelle media Synkron (samme tid): Samtale (face-to-face) Teater, Konsert, Tale Telefon Radio & TV Asynkron (forskjellig tid): Brev Telegraf Telefax Bøker Aviser Film 105

CSCW i tid og rom Samme tid / forskjellig tid Samme sted / forskjellig sted Samme sted Forskjellig sted Samme tid Ansikt til ansikt (Klasserom, Møte) Synkron og distribuert (Webcams, shared mediaspaces) Forskjellig tid Asynkron Planlegging (Prosjekttavle,,) Asynkron og distribuert (e-mail, news,,) 106

Lotus Notes Lotus Notes integrerer: electronic mail newsgroups telefon tracking status rapporter tekst-database søk dokumentdeling møteplanlegging Andre samarbeidsverktøy Synkron og distribuert (Webcams, shared mediaspaces) Asynkron Planlegging (Prosjekttavle,,) Asynkron og distribuert (e-mail, news,,) 107

Same Place, Same Time Innovative approaches to work and learning include: Shared display from lecturer workstation Audience response units Text-submission workstations Brainstorming, voting, and ranking. File sharing Shared workspace Group activities Ansikt til ansikt (Klasserom, Møte) 108

Votering i Stortinget Ja og Nei knapp 109

Kap. 12: Presentation Styles: Balancing Function and Fashion Sentrale delkapitler: 12.4 Display design Sentrale begreper Gestaltprinsipper I tillegg til læreboka: Gestaltprinsippene og Don Norman s begreper affordance, contraints og mapping slik de er beskrevet i forelesningsnotatene. 110

Visuelle byggeklosser Proporsjon Størrelse Retning Farge Tekstur Grid 111

Gestalt-prinsipper Gruppering / Nærhet Linje / Kontinuitet Mental komplettering Likhet i form Likhet i farge Forgrunn/Bakgrunn + reversering 112

Hvilke gestalt-prinsipper? 113

Hvilke gestalt-prinsipper? 114

Hvilke gestalt-prinsipper? 115

Affordance Hva slags handling signaliserer en gjenstand? Dørhåndtaket sier: Trykk meg ned Hammeren sier: Ta tak i meg Cola-flasken sier: Drikk meg Lego-klossen sier Sett oss sammen Relasjon mellom objekt og aktørs fysiske egenskaper 116

Constraints (beskrankning/begrensning) Visse ting lar seg ikke gjøre med et produkt Lego-klosser kan bare settes sammen på visse måter Visse knapper er grået ut og kan ikke trykkes på Dato-felt, som bare tillater tall og punktum Eksempler på det motsatte DOS-prompt som tillater nesten hva som helst Aktiv knapp som gir ingen reaksjon eller Alert -boks 117

Mapping (overføring) Hvordan tolker brukeren produktet Volumkontroll med knapper over hverandre. Den øverste øker volumet: Opp = mer Volumkontroll med vri-knapp. Med klokka = mer Layout på kontroll tilsvarer layout på apparat Natural mapping Eksempler på det motsatte Under/venstre = opp Stekeovn: 2x2 plater og knappesekvens 118