Oppsummering TDT4180, designdelen (1)

Transkript

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 Kap. 10: Collaboration Kap. 12: Presentation Styles: Balancing Function and Fashion 1

2 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 : Human-centred design activities, s 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

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

4 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

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

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

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

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

9 Visjoner og prototyper Xerox PARC Xerox 8010 Star 1981 Apple Lisa 1983 Apple Macintosh

10 Kap. 2: Theories, Principles and Guidelines Sentrale delkapitler: Choose an interaction style Use the eight golden rules of interface design Levels of analysis theories 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

11 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

12 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

13 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

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

15 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

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

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

18 Ikonbasert - Valgt objekt Form Farge 18

19 Verktøybasert Form Farge 19

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

21 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

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

23 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

24 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

25 Fra ISO 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

26 ISO 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

27 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

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

29 Feilrate (eksempel) Iterasjon 1 Iterasjon2 Iterasjon 3 Iterasjon 4 Iterasjon 5 29

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 30

31 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

32 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

33 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

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

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

36 Storyboard - Fortell en historie 36

37 Scenario, Storyboard Hvem Hva Hvor Når 37

38 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

39 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

40 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 41

42 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

43 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

44 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 /News arkiv Skisser på servietter 44

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

46 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

47 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

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

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

50 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

51 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

52 Eksempel 52

53 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

54 Brukbarhetslaboratoriet: 54

55 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

56 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

57 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

58 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

59 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

60 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

61 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

62 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

63 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

64 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

65 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

66 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

67 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

68 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

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

70 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

71 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

72 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

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

74 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

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

76 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

77 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

78 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

79 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

80 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

81 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

82 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

83 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

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

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

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

87 Xerox Star 87

88 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

89 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

90 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

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

92 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

93 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

94 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

95 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

96 Eksempler på A, B og C De følgende eksemplene er hentet fra auditorieøving i SIF8040 fredag 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

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

98 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

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

100 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 Fitts Law som ikke er gjennomgått. 100

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

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

103 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

104 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

105 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

106 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 ( , news,,) 106

107 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 ( , news,,) 107

108 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

109 Votering i Stortinget Ja og Nei knapp 109

110 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

111 Visuelle byggeklosser Proporsjon Størrelse Retning Farge Tekstur Grid 111

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

113 Hvilke gestalt-prinsipper? 113

114 Hvilke gestalt-prinsipper? 114

115 Hvilke gestalt-prinsipper? 115

116 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

117 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

118 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