Design af brugerflader8.1 Kursusgang 8 Oversigt: Sidste kursusgang Design ­ Design og beskrivelse ­ En simpel notation Eksempel på design af dialogen ­

Præsentationer af emnet: "Design af brugerflader8.1 Kursusgang 8 Oversigt: Sidste kursusgang Design ­ Design og beskrivelse ­ En simpel notation Eksempel på design af dialogen ­"— Præsentationens transcript:

1 Design af brugerflader8.1 Kursusgang 8 Oversigt: Sidste kursusgang Design ­ Design og beskrivelse ­ En simpel notation Eksempel på design af dialogen ­ Biografsystemet ­ Matchracesystemet

2 Design af brugerflader8.2 Sidste kursusgang Fokus på traditional analyse inden for HCI Opgaveanalyse ­ Dekomponering af opgaver ­ Vidensbaseret analyse ­ Entity-relationship-baseret analyse ­ Dataindsamling Eksempel på design baseret på opgaveanalyse ­ Kommunikation på containerskib ­ Meget detaljeret opgaveanalyse A BCD EFG

3 Design af brugerflader8.3 Design og beskrivelse Analyse kontra design: hvad er forskellen Hvorfor laver vi beskrivelser i design?

4 Design af brugerflader8.4 Design af dialoger Vi designer dialoger mellem et interaktivt system og brugeren af dette system En dialog er en struktureret kommunikation Vi vil gerne kunne beskrive en sådan dialog mellem system og bruger Hvad kendetegner den: ­ Afsenderen siger noget til modtageren ­ Modtageren svarer tilbage og gør noget ­ Der ventes på næste kommunikation 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

5 Design af brugerflader8.5 Struktureret dialog: Lav et diagram i Excel

6 Design af brugerflader8.6 Et simpelt beskrivelsesværktøj State transition network (STN) 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 udløsende handling systemets response Start Slut

7 Design af brugerflader8.7 AAUs websted (1)

8 Design af brugerflader8.8 Eksempel Hvordan kan vi beskrive dialogen ved hjælp af et STN?

9 Design af brugerflader8.9 AAUs websted (2)

10 Design af brugerflader8.10 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 Eksempel: hvordan kan vi beskrive komplekse dialoger? Diagramnavn

11 Design af brugerflader8.11 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 A BCD EFG konto åbnet + (beløb indsat | beløb hævet)  + konto lukket

12 Design af brugerflader8.12 Tre fundamental problemer Det simple STN kan ikke håndtere følgende: 1. Der kan hoppes ud af alle tilstande 2. Forskellige kombinationer 3. Flere del-dialoger foregår parallelt

13 Design af brugerflader8.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 Design af brugerflader8.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 magnetsfeltsmå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 Design af brugerflader8.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 Design af brugerflader8.16 Basal UML: en anden notation for et STN

17 Design af brugerflader8.17 Simpelt tilstandsdiagram venter rør løftet /tuden ciffer indtastet nummer accepteret indtastning afsluttet opkald afvist opkald accepteret indtastning afsluttet opkald besvaret samtale rør lagt på optaget /bippen

18 Design af brugerflader8.18 Tilstandsdiagram med hierarki

19 Design af brugerflader8.19 Avanceret UML

20 Design af brugerflader8.20 Analyse af beskrivelser Alle muligheder ud af en tilstand er beskrevet (completeness) Tilstande i diagrammet som ikke kan nås (reachability) Mulighed for at gå tilbage (reversability) Dele af diagrammet som man ikke kan komme ud af eller som gentager sig

21 Design af brugerflader8.21 Eksempel på design (1): Biografsystemet Et mobilt system til bestilling af biografbilletter Tre tilstande og tre simple tilstandsovergange

22 Design af brugerflader8.22 Eksempel på design (2): Matchracesystemet Et system til træning af opmænd