Design af brugerflader3.1 Kursusgang 3 Oversigt: Sidste kursusgang Interaktion: ­ Model for interaktion ­ Ergonomi ­ Interaktionformer ­ Eksempler Brugbarhedsevaluering:

Præsentationer af emnet: "Design af brugerflader3.1 Kursusgang 3 Oversigt: Sidste kursusgang Interaktion: ­ Model for interaktion ­ Ergonomi ­ Interaktionformer ­ Eksempler Brugbarhedsevaluering:"— Præsentationens transcript:

1 Design af brugerflader3.1 Kursusgang 3 Oversigt: Sidste kursusgang Interaktion: ­ Model for interaktion ­ Ergonomi ­ Interaktionformer ­ Eksempler Brugbarhedsevaluering: ­ Planlægning ­ Forberedelse

2 Design af brugerflader3.2 Sidste kursusgang Computeren: ­ Hvad er en computer? ­ Enheder: input og output Brugbarhedsevaluering: ­ Formål med brugbarhedsevaluering ­ Aktiviteter i en brugbarhedsevaluering ­ Tidspunkt i udviklingsprocessen ­ Lokalitet ­ Laboratorium Udstyr ­ Deltagere og roller Testleder Bruger

3 Design af brugerflader3.3 Interaktion Model for interaktion ­ Execution-evaluation Ergonomi Interaktionsformer ­ Kommando ­ Menu ­ Dialog ­ Skemaudfyldelse ­ WIMP (windows, icons, menus, pointers) Eksempler

4 Design af brugerflader3.4 Model for interaktion Der findes et antal forskellige interaktionsmodeller The execution-evaluation cycle (Norman) er den mest benyttede Centrale begreber hos Norman: ­ The execution-evaluation cycle: Action in the world ­ Affordance The execution-evaluation cycle indeholder syv skridt: ­ Etablering af mål (udgangspunkt for handling) ­ Formning af intention ­ Specificering af handlinger og sekvens ­ Udførelse af handlinger ­ Opfatte systemets tilstand ­ Fortolke systemets tilstand ­ Evaluere systemets tilstand ifht. mål og intentioner

5 Design af brugerflader3.5 Action in the World Gulf of Execution Gulf of Evaluation Et mål for kvaliteten af et system er: Giver det i “Gulf of execution” mulighed for udførelse af handlinger uden ekstra besvær Giver det i “Gulf of evaluation” mulighed for at forstå systemets tilstand som et resultat af handlinger Virkeligheden Evaluering af fortolkninger i forhold til forventninger Fortolkning af oplevelser i forhold til forventninger Oplevelse af tilstanden i virkeligheden En intention om at handle for at opnå et mål Den sekvens af handlinger, vi planlægger Den faktiske udførelse af disse handlinger Mål (det vi vil opnå)

6 Design af brugerflader3.6 Affordance I processen med at opdage informationer knyttet til de synsindtryk, vi modtager, spiller åbenbare egenskaber (affordance) en central rolle. Vi ser adfærden for eller vore mulige handlinger i forhold til et system, et objekt eller en hændelse som det, det tilbyder eller tillader (affords): Hvis et system eller objekt tydeligt åbenbarer en bestemt egenskab, så har vi let ved at interagere med det. Hvis egenskaberne ikke er åbenbare, har vi sværere ved at interagere med det. Hvis man har en hammer i hånden ligner alting et søm

7 Design af brugerflader3.7 Ergonomi Placering af input og output enheder ­ Funktionsorienteret: enheder, som er funktionelt afhængige, bør placeres ved siden af hinanden ­ Sekvensorienteret: enheder bør organiseres på en måde der reflekterer sekvensen hvorpå de bliver benyttet ­ Frekvensorienteret: enheder bør organiseres efter hvor tit de bliver benyttet Kan også bruges til placering af paneler og felter i vinduer Fysiske faktorer Farver ­ Visse farver signalerer implicitte forståelser hos mennesker, f.eks. rød ­ Eksempelvis problemer med farven blå

8 Design af brugerflader3.8

9 Design af brugerflader3.9 Interaktionsformer Fastlægger centrale egenskaber ved interaktionen Hvordan udpeger vi et objekt? Hvordan aktiverer vi en funktion? Hvordan indlæses inddata? Hvordan opstilles uddata?

10 Design af brugerflader3.10 Interaktionsformer: Kommando Brugeren ser intet på forhånd Indtaster og aktiverer en kommando, der skal overholde et bestemt format Interaktionen mellem bruger og system baserer sig på kommandoer Typiske eksempler: ­ Unix ­ Speciel teksteditor (f.eks. vi) ­ Primært henvendt til expertbrugeren Indlæsning af data ­ Eksempel: ændring af forskudsskema. Brugeren taster en lang sekvens af feltnumre og tal ind Fordele:Fleksibilitet Hurtigt for faste brugere Initiativet placeres hos brugerne Let at lave makroer Ulemper:Ringe fejlhåndtering Kræver omfattende træning Fordele:Fleksibilitet Hurtigt for faste brugere Initiativet placeres hos brugerne Let at lave makroer Ulemper:Ringe fejlhåndtering Kræver omfattende træning

11 Design af brugerflader3.11 Interaktionsformer: Menu Menuer bruges til at organisere information og interaktion ­ Giver styret og kontrolleret dialog ­ For lejlighedsvise brugere Eksempler: ­ Fuldskærmsmenuer med valg af menupunkt ­ Pull-down fra overliggende bjælke i et vindue ­ Pop-up ved tryk på mus ovenpå et objekt ­ Check-bokse eller radioknapper i et vindue eller en dialogboks ­ Links indlejrede i tekst Fordele:Kort indlæring Færre indtastninger Struktur på beslutningstagning Let at understøtte fejlhåndtering Ulemper:Fare for mange menuer Sinker den faste bruger Optager plads på skærmen Fordele:Kort indlæring Færre indtastninger Struktur på beslutningstagning Let at understøtte fejlhåndtering Ulemper:Fare for mange menuer Sinker den faste bruger Optager plads på skærmen

12 Design af brugerflader3.12 Interaktionsformer: Dialog Interaktion mellem bruger og system som en dialog mellem to personer ­ Simpel og lærenem form, eks. fra Windows (PowerPoint) Mere generelt: spørgsmål og svar dialog ­ Brugeren ledes gennem en struktureret dialog, hvor systemets videre adfærd kan afhænge af de svar, der gives. ­ Bruges over for meget en meget bred og forskelligartet brugergruppe, som ikke kan forventes at mestre kompliceret navigation. ­ Eksempel: pengeautomat eller telefonservice.

13 Design af brugerflader3.13 Interaktionsformer: Skemaudfyldelse Indlæsning af data struktureret som formular eller skema Eksempel ­ Udfyldelse af standardinformation om en bruger Mest velegnet for faste brugere, fordi feltnavne og indtastningsformater kræver forståelse Fordele:Forenklet indtastning Kræver begrænset træning Nyttig vejledning Ulemper:Optager plads på skærmen Kan være langsommeligt Fordele:Forenklet indtastning Kræver begrænset træning Nyttig vejledning Ulemper:Optager plads på skærmen Kan være langsommeligt

14 Design af brugerflader3.14 Interaktionsformer: WIMP WIMP er en meget udbredt interaktionsform i dag bl.a. kendt fra windows Består af fire elementer ­ Windows ­ Icons ­ Menus ­ Pointers Kaldes også direkte manipulering Brugeren arbejder på virkelighedsnære repræsentationer af objekter Objekterne kan vælges, og funktioner kan udføres direkte på dem med et umiddelbart synligt resultat Affordance er centralt Fordele:Let at lære Let at huske Fejl kan undgås Understøtter udforskning Høj subjektiv tilfredsstillelse Ulemper:Kræver grafisk skærm og pegeinstrument Makroer er vanskelige Fordele:Let at lære Let at huske Fejl kan undgås Understøtter udforskning Høj subjektiv tilfredsstillelse Ulemper:Kræver grafisk skærm og pegeinstrument Makroer er vanskelige

15 Design af brugerflader3.15

16 Design af brugerflader3.16

17 Design af brugerflader3.17

18 Design af brugerflader3.18

19 Design af brugerflader3.19

20 Design af brugerflader3.20 Andre interaktionsformer Naturligt sprog ­ Havde tidligere stor opmærksomhed, men er efterhånden helt uden praktisk betydning. ­ Kræver som hovedregel megen indtastning og specialiseret sprog. ­ Eksempel: Eliza Udskrivning af data ­ I alle systemer er der behov for udskrivning af data – typisk enten i et vindue eller på en udskrift ­ Denne del af brugergrænsefladen minder i struktureringen om skemaudfyldelse

21 Design af brugerflader3.21 Brugbarhedsevaluering Planlægning ­ Testplan Forberedelse ­ Genskabelse af kontekst ­ Forsøgpersoner ­ Opgaver

22 Design af brugerflader3.22 Aktiviteter i en brugbarhedsevaluering When in development process: Exploratory Assessment Validation Comparison Location and equipment Participants and roles Determine basics Plan process Create test situation Interpret data Conduct test Recreation of context Selection of test subjects Design of tasks Test report: Purpose Key questions User profile Test method Task list Context and equipment Test monitor role Data to be collected Report structure Introduction Task solving Data collection Logging Debriefing Transcription of log files Data summary Data analysis Documentation (report)

23 Design af brugerflader3.23 Planlægning: Testplan Planlægningen dokumenteres samlet i en testplan Testplanen svarer til et designdokument for en test Testplanen bruges til: ­ Strukturering af aftestningen: hvilke dele og hvordan hænger de sammen ­ Aftale- og kommunikationsredskab (internt og eksternt) ­ Fastlæggelse ressourcebehov ­ Fokuserer testen ­ Definerer milepæl i produktets udvikling Indhold: Formål Hovedspørgsmål Brugerprofil Metode (design af testen) Opgaveliste (overordnet i forhold til selve opgaveformuleringerne) Omgivelse og udstyr Testlederrolle Måling (data der skal indsamles) Rapportens struktur og resultaternes præsentationsform Eksempel: Rubin, side 107-118 Indhold: Formål Hovedspørgsmål Brugerprofil Metode (design af testen) Opgaveliste (overordnet i forhold til selve opgaveformuleringerne) Omgivelse og udstyr Testlederrolle Måling (data der skal indsamles) Rapportens struktur og resultaternes præsentationsform Eksempel: Rubin, side 107-118

24 Design af brugerflader3.24 Genskab konteksten Brugeren: ­ Demografi: alder, køn, uddannelse, social og kulturel baggrund,... ­ Erfaring med IT generelt og med systemet Brugsomgivelsen: ­ Hvor foregår brugen normalt ­ Miljø, personer og ting I denne omgivelse Brugssituationen: ­ Hvilken arbejdsopgave ­ Hvad gør brugeren med systemet ­ Relation til andre personer og opgaver ­ Relevante og realistiske data

25 Design af brugerflader3.25 Brugsomgivelsen Hvor foregår brugen? ­ Benyttelse af mere avancerede laboratorier ­ Gennemførelse i ”felten” Personer ­ Interaktion og dialog med brugere eller andre personer Ting ­ Udnyttelse af diverse instrumenter til forøgelse af realismen

26 Design af brugerflader3.26 Opgave: eksempel Spørgsmål Email adresser der skal benyttes til forsøget: ­ A – a@x.ya@x.y ­ B – b@y.zb@y.z ­ C – c@z.tc@z.t Opret en hotmail-adresse Login (adresse + pasword) Skriv en email og send den til … Send en vedhæftet fil til flg. personer: A, B, C Lav en reminder til dig selv om en begivenhed på en given dag Sign/log ud og log ind på B’s emailadresse Sorter dine email efter navn og subjekt Opret en ny folder og indsæt en eller flere emails heri

27 Design af brugerflader3.27 Opgaver Udspringer af opgavelisten i testplanen Repræsenterer virkeligt arbejde med systemet: ­ Beskriver slutresultat ­ Motiverer opgaverne (hvorfor de skal løses) ­ Indeholder aktuelle data og navne ­ Beskriver systemets tilstand ved starten af arbejdet ­ Samler mindre delopgaver i meningsfulde helheder Overvejelser: ­ Forskellige rækkefølge mellem forsøgspersoner ­ Læs op eller læs selv Typiske problemer Vage og uklare Overordnede og generelle Giver for meget hjælp Indeholder jargon som ikke er brugernes Tvinger brugeren ind i et bestemt forløb Kommer i atypisk rækkefølge Typiske problemer Vage og uklare Overordnede og generelle Giver for meget hjælp Indeholder jargon som ikke er brugernes Tvinger brugeren ind i et bestemt forløb Kommer i atypisk rækkefølge

28 Design af brugerflader3.28

29 Design af brugerflader3.29 Opgaver: Eksempel Opgave 1: Rapport Det er d. 2 maj 2002. Du er gruppeleder og er mødt ind i på afdelingen efter 2-ugers ferie. Du skal i gang med at planlægge arbejdsopgaver for resten af dagen for dig selv, en SSA, og to sygeplejestuderende. Der er to nye patienter på afdelingen. Agnes Winther er ikke selvhjulpen og får i.v. medicin. Casper Hansen er på diæt. a.Placer disse to patienter på afdelingen. b.Skitser arbejdsopgaver for den kommende dag for patienterne Dennis Skov-Sørensen og Doris Pedersen ud fra den information, systemet stiller rådighed. Opgave 3: Stuegang Du er på stuegang med den ansvarlige læge. I står nu inde ved patient Casper Hansen, som er indlagt med besværet respiration og tendens til hævede ben og har taget på i vægt. a.Find de informationer som er relevante at skitsere for lægen. Lægen siger efterfølgende at patienten skal have taget væsketal dagligt, vejes dagligt, samt observeres for ødemer (f.eks. hævede ankler) b.Opret et nyt notat om den kommende pleje. c.Tilføj relevante punkter på arbejdslisten

30 Design af brugerflader3.30 Præsentation Femte kursusgang i dette modul gennemføres, når alle grupper har været i laboratoriet Aftaler om datoer: 16/9 til 26/9 Femte kursusgang kan afholdes som skemalagt (29/9) Præsentation sidste gang Hver gruppe (ca. 5 minutter): ­ Kort beskrive produktet/systemet og afprøvningen ­ Vise uddrag fra afprøvningen (VHS) ­ Vurdere produktets/systemets brugbarhed