DIEB3.1 Kursusgang 3 Oversigt: Sidste kursusgang Design og dialognotationer ­ Fra analyse til design (Dix) ­ Notation: state transition networks (STN)

Præsentationer af emnet: "DIEB3.1 Kursusgang 3 Oversigt: Sidste kursusgang Design og dialognotationer ­ Fra analyse til design (Dix) ­ Notation: state transition networks (STN)"— Præsentationens transcript:

1 DIEB3.1 Kursusgang 3 Oversigt: Sidste kursusgang Design og dialognotationer ­ Fra analyse til design (Dix) ­ Notation: state transition networks (STN) ­ UML tilstandsdiagrammer Fra objektorienteret analyse til HCI-design ­ Grundproblem ­ Analyse workflow ­ Interaktionsmodel

2 DIEB3.2 Sidste kursusgang Opgaveanalyse ­ Dekomponering af opgaver: Hierarchical Task Analysis (HTA) ­ Entity-relationship-baseret analyse Fra objektorienteret analyse til HCI-design ­ Ni metoder ­ WISDOM og OOA&D ­ Eksempel (case 2) ­ Fra kravene til den første ikke-funktionelle prototype A BCD EFG A X B

3 DIEB3.3 Kursusgang 3 Oversigt: Sidste kursusgang Design og dialognotationer ­ Fra analyse til design (Dix) ­ Notation: state transition networks (STN) ­ UML tilstandsdiagrammer Fra objektorienteret analyse til HCI-design ­ Grundproblem ­ Analyse workflow ­ Interaktionsmodel

4 DIEB3.4 Fra analyse til design (Dix) Analyse: ­ Hvem er brugerne: stakeholders ­ Hvordan arbejder de (anvendelsesområde): HTA ­ Hvad arbejder de med (problemområde): entiteter Overgang til design: ­ Designe dialogen mellem brugeren og systemet ­ Beskrives som en struktureret dialog

5 DIEB3.5 Design af dialoger En dialog er en struktureret kommunikation Hvad kendetegner den: ­ Afsenderen siger noget til modtageren ­ Modtageren svarer tilbage og gør noget ­ Der ventes på næste kommunikation Vi designer dialoger mellem et interaktivt system og brugeren af dette system Vi vil derfor gerne kunne beskrive en sådan struktureret dialog mellem system og bruger Eksempel på en struktureret dialog mellem to personer: 1 you can let go the bow line 2 let go bow line 5 bow line let go 6 bow line let go 11 and we have the bow line home 12 ok

6 DIEB3.6 Struktureret dialog: Lav et diagram i Excel

7 DIEB3.7 Notation: State Transition Network (STN) State transition network (STN) er et værktøj (en notation) til at beskrive en struktureret dialog To grundlæggende symboler ­ Tilstande (states) ­ Transitioner (tilstandsovergange) Dialogens dele som etiketter på transitioner Specielle start- og sluttilstande Øvelse: beskriv Excel-dialogen med dette værktøj Overvej: hvor eller hvornår foregår brugernes handlinger i det enkelte vindue? udløsende handling systemets response Start Slut

8 DIEB3.8 AAUs websted (1)

9 DIEB3.9 Eksempler Hvordan kan vi beskrive dialogen på AAU's web-sted ved hjælp af et STN?

10 DIEB3.10 To komplikationer: Flere valgmuligheder i en tilstand Helhed kontra del: dialogen på overordnet niveau kontra detaljer på den enkelte side AAUs websted (2)

11 DIEB3.11 Udvidet notation Selektion: Der kan være flere transitioner ud af en tilstand Iteration: Der kan vendes direkte eller indirekte tilbage til samme tilstand (cykel) Hierarki: Et symbol for et separat (under)diagram Diagramnavn

12 DIEB3.12 Tre fundamentale problemer Det simple STN kan (dog) ikke håndtere følgende: 1. Der kan hoppes ud af alle tilstande 2. Forskellige kombinationer af de samme elementer 3. Flere del-dialoger foregår parallelt

13 DIEB3.13 Tre fundamentale problemer (1) Der kan hoppes ud af alle tilstande En fjernkontrol til et TV: Den kan være i mange forskellige tilstande I enhver tilstand kan TV’et slukkes, og fjernkontrollen går til en bestemt tilstand Andre eksempler: I Excel-dialogen kunne der på ethvert tidspunkt trykkes på Finish-knappen Inde på et websted kan der på ethvert tidspunkt vendes tilbage til hovedsiden

14 DIEB3.14 Tre fundamentale problemer (2) Forskellige kombinationer af en mængde af handlinger Ørsted-satelitten: Efter udfoldning af bommen ­ Initialisering af stjernekamera ­ Initialisering af navigator ­ Initialisering af magnetfeltsmåler Disse tre kan forekomme i en vilkårlig rækkefølge Måling kan først starte, når alle tre er afsluttet Andre eksempler: Felter kan udfyldes i vilkårlig rækkefølge

15 DIEB3.15 Tre fundamentale problemer (3) Flere del-dialoger foregår parallelt Eksempel: der startes flere web-sider på samme tid – hvordan beskriver vi den samlede dialog

16 DIEB3.16 Hvilken sprogklasse Et STN er et eksempel på et regulært sprog Et regulært sprog har konstruktioner til at udtrykke: ­ Sekvens ­ Selektion ­ Iteration Et regulært sprog kan være baseret på tekst eller symboler Et regulært sprog er nemt at forstå og bruge, men det har væsentlige begrænsninger UML's tilstandsdiagram er basalt samme sprogklasse A BCD EFG konto åbnet + (beløb indsat | beløb hævet)  + konto lukket

17 DIEB3.17 Basal UML: en anden notation for et STN

18 DIEB3.18 Simpelt tilstandsdiagram venter rør løftet /tuden ciffer indtastet sidste ciffer indtastet indtastning afsluttet opkald afvist opkald accepteret modtager optaget opkald besvaret samtale rør lagt på optaget /bippen

19 DIEB3.19 Tilstandsdiagram med hierarki Hierarkiet er en løsning på problem 1

20 DIEB3.20 Avanceret UML (problem 2 og 3)

21 DIEB3.21 Kursusgang 3 Oversigt: Sidste kursusgang Design og dialognotationer ­ Fra analyse til design (Dix) ­ Notation: state transition networks (STN) ­ UML tilstandsdiagrammer Fra objektorienteret analyse til HCI-design ­ Grundproblem ­ Analyse workflow ­ Interaktionsmodel

22 DIEB3.22 Grundproblem Dix et al.: Har metode for analyseaktiviteter, som indholdsmæssigt svarer til andre metoder, f.eks. OOA&D Har også en notation til beskrivelse af design Men... – hvordan kommer jeg frem til dette design? – hvor kommer mine vinduer og dialogelementer fra? Der mangler metode til støtte af HCI-designet Wisdom-metoden er et forsøg på at løse dette problem

23 DIEB3.23 WISDOM og OOA&D Efter afprøvningen af den ikke-funktionelle prototype sker der tre ting: ­ Kravspecifikationen revideres ­ Klasser og hændelser beskrives detaljeret ­ Der genereres en liste med funktioner Dette understøttes af OOA&D Derefter designes arkitekturen af brugergrænsefladen

24 DIEB3.24 Klassediagram (case 2) Første udkast laves i requirements workflow Revideret ud fra afprøvningen af prototypen Struktureret ved hjælp af klynger Hver klasses adfærd er beskrevet ved et tilstandsdiagram

25 DIEB3.25 Funktionsliste (case 2) Lavet ud fra OOA&D Førte til revidering af task flow diagrammer De to kursiverede funktioner udføres af systemet selv (context awareness)

26 DIEB3.26 6. Interface Architecture Design Denne aktivitet fastlægger systemets eksterne arkitektur Denne del af systemet har (blandt andet) ansvaret for brugergrænsefladen Der er fokus på brugerens arbejdsopgaver (task flow diagrammer) Forsøger at undgå specifikke udformninger af brugergrænsefladen på dette (tidlige) tidspunkt Udarbejdelse af en interaktionsmodel ­ består af interaction space klasser ­ udarbejdes ud fra task flow diagrammerne ­ ved at beskrive og tegne en mulig brugergrænseflade, som understøtter hvert task flow I case 2 var der to interaktionsmodeller: ­ Controller ­ Field worker

27 DIEB3.27 Interaktionsmodellering Starter med at definere klasser, hvori der foregår en form for interaktion: interaction space klasser De afbildes over på opgaveklasser, der beskriver de specifikke opgaver, der understøttes af systemet De linkes til kontrolklasser, der styrer tilgang til andre klasser Kontrolklasserne afbildes over på entitetsklasser, som er systemets fysiske objekter Endelig linkes de til boundary klasser, som indeholder eller håndterer interaktion med andre systemer

28 DIEB3.28 Udgangspunkt: Use cases og task flows Use case diagrammet kan bruges til at få overblik For hver use case er der et task flow diagram

29 DIEB3.29 Interaktionsmodel (case 2) Interaktionsmodel for field worker's system (det mobile system) Boundary-klassen Part håndterer interaktion med det eksisterende overvågningssystem. Dette er nødvendigt for at modtage alarmer og status for forskellige dele af maskinerne

30 DIEB3.30 Placering af patient (case 1) Vi så sidste gang videoen, hvor en sygeplejerske placerer en patient på en afdeling Plan 0 og plan 2 er begge sekvenser Lav et task flow for placering af en patient Lav en interaktionsmodel ud fra dette task flow 2.2. Vælg seng 2.1. Find stue 0. Placer patient 1. Vælg patient 2. Find placering 3. Registrer placering

31 DIEB3.31 Opsummering Gennemført analyse af problem- og anvendelsesområde En oversigt over de interaktioner, som systemet skal understøtte For hver interaktion en specifikation af de opgaver, der knytter sig til den Ingen specifikke skærmbilleder (endnu)