DIEB4.1 Kursusgang 4 Oversigt: Sidste kursusgang Opgaver Aktivitet 2: Generer design (fortsat) Design interaktionselementer Analysedokumentet.

Præsentationer af emnet: "DIEB4.1 Kursusgang 4 Oversigt: Sidste kursusgang Opgaver Aktivitet 2: Generer design (fortsat) Design interaktionselementer Analysedokumentet."— Præsentationens transcript:

1 DIEB4.1 Kursusgang 4 Oversigt: Sidste kursusgang Opgaver Aktivitet 2: Generer design (fortsat) Design interaktionselementer Analysedokumentet

2 DIEB4.2 Sidste kursusgang Aktivitet 2: Generer design ­ Relation til krav ­ Fremgangsmåde Begrebsmæssig model ­ Baseret på aktivitet/objekter ­ Interaktionsformer ­ Eksempler Interaktionsrum og interaktionselementer ­ Eksempel ­ Individuelle interaktionsrum ­ Samlet interaktionsrum Identificer behov Etabler krav Generer design Byg interaktiv version Evaluer design Udgangspunkt Resultat: Endeligt produkt

3 DIEB4.3 Opgaver 1.Begrebsmæssig model: beskriv begrebsmæssig model for et antal eksempler fra sidste lektion. 2.Interaktionsformer: hvad er de basale egenskaber (Hvordan udpeger vi et objekt?, Hvordan aktiverer vi en funktion?, Hvordan indlæses inddata? og Hvordan opstilles uddata?) for hver af de syv interaktionsformer. 3.Projekt. Fra brugsmønster til model af individuelle interaktionsrum: Interaktionsrum og opgaver. 4.Gentag opgave 1 for et andet brugsmøster i jeres projekt. 5.Brug de to individuelle modeller af interaktionsrum til at lave en samlet model af interaktionsrum. 6.Sammenhæng mellem begrebsmæssig model og interaktionsform: Overvej, hvilke interaktionsformer, der understøtter hvilke begrebsmæssige modeller. Udtrykt ved en tabel.

4 DIEB4.4 Udgangspunkt: Brugsmønster Kontanthævning

5 DIEB4.5 Kursusgang 4 Oversigt: Sidste kursusgang Opgaver Aktivitet 2: Generer design (fortsat) ­ Fremgangsmåde ­ Interaktionselementer ­ Muligheder for check Design interaktionselementer Analysedokumentet Identificer behov Etabler krav Generer design Byg interaktiv version Evaluer design Udgangspunkt Resultat: Endeligt produkt

6 DIEB4.6 Aktivitet 2: Generer design (fortsat) Designet af brugergrænsefladen: Er et vigtigt krav til systemet (blandt andre) Det overordnede design indgår i analysedokumentet Det detaljerede design indgår i designdokumentet Hvordan (i jeres projekt): Fastlæg en begrebsmæssig model for hele systemet Identificer interaktionsrum (individuelle og generelle) (sidste kursusgang) Definer interaktionselementer Design interaktionselementer ­ Fastlæg interaktionsform for hvert interaktionselement ­ Udarbejd detaildesign for hvert interaktionslement ­ Check dette mod den begrebsmæssige model

7 DIEB4.7 Interaktionselementer Præsentationsmodellen beskriver brugergrænsefladens elementer, de dele, som indgår i hvert element, samt mulighederne for at navigere mellem elementerne Præsentationsmodellen beskrives ved et klassediagram Præsentationsmodellen afstemmes løbende med brugsmønstrene: ­ kan man udføre brugsmønstrene ved at bevæge sig rundt i præsentationsmodellen ­ anvender brugsmønstrene de muligheder for at bevæge sig rundt, der er beskrevet i præsentationsmodellen

8 DIEB4.8 Notation Elementerne i præsentationsmodellen er interaktionsrummene Udgangspunkt: den samlede model af interaktionsrum Hvert interaktionsrum beskrives som en klasse Klassen detaljeres med: ­ attributter (input og output) ­ funktioner (action) Knyt funktioner til de enkelte interaktionsrumsklasser Beskriv også input- og output- elementer

9 DIEB4.9 Præsentations- model Sæt alle klasserne op på en stor tavle Identificer interaktionsrum, som er indeholdt i et andet interaktionsrum (aggregering) Identificer overgange mellem interaktionsrum ­ ud fra det reviderede brugsmønster (det med hierarkiske tilstande) ­ diagrammet skal gøre det muligt at gennemspille alle brugsmønstre Notation: >: navigering mellem komponenter er muligt >: interaktionsrummet forneden indgår i det foroven >: interaktionsrummets input-elementer >: interaktionsrummets output-elementer >: mulige handlinger (funktioner)

10 DIEB4.10 Muligheder for check af indhold Designet af brugergrænsefladen kan holdes op mod de modeller, I har lavet med OOA&D-metoden Klassediagram med attributter: ­ beskriver den information, der indgår i brugernes aktiviteter ­ denne information skal svare til input- og output-data i præsentationsmodellen ­ strukturerne i klassediagrammet skal svare til strukturerne i præsentationsmodellen – hvorfor? ­ dette kan checkes systematisk Funktionsliste: ­ beskriver de services, brugerne aktiverer i anvendelsen af systemet ­ funktionerne (eller delfunktioner) skal svare til actions i præsentationsmodellen ­ dette kan checkes systematisk Udfør disse check, før I begynder på detaildesign af interaktionselementerne

11 DIEB4.11 Kursusgang 4 Oversigt: Sidste kursusgang Opgaver Aktivitet 2: Generer design (fortsat) Design interaktionselementer ­ Fastlæg interaktionsform ­ Detaildesign af vinduer: Bridge ­ Eksempel ­ Øvelse Analysedokumentet

12 DIEB4.12 Fastlæg interaktionsform Præsentationsmodellen indeholder den samlede mængde af interaktionselementer For hvert af disse elementer skal vi fastlægge interaktionsformen Skriv det ind som en kommentar i hvert element Muligheder: Kommando Menu Dialog Skemaudfyldelse WIMP Naturligt sprog Udskrivning af data

13 DIEB4.13 Detaildesign af vinduer: Bridge Næste skridt består i at designe detaljerne i hvert interaktionselement Dette kan gøres ved hjælp af Bridge-metoden Bridge har til formål at skabe bro mellem krav og HCI-design Vi bruger lidt af del 2 og del 3 fra Bridge-metoden

14 DIEB4.14 Bridge: Task-objekter Task objekt: en samlet mængde information, som brugeren manipulerer for at udføre opgaven Svarer til klasserne i pæsentations- modellen Fire elementer: ­ Identitet: hvad kendetegner et objekt fra denne klasse ­ Attributter: egenskaber og relaterede objekter (navigate) ­ Handlinger: det systemets bruger gør ved objektet (funktioner) ­ Indholdsrelationer: det omgivende objekt og delobjekterne (aggregering) Suppleres fra OOA&D-model Brug ideen om at fokusere på task- objekter til at "berige" jeres præsentationsmodel

15 DIEB4.15 Bridge: Eksempel på task-objekter For et hotel Hvordan ser præsentations- modellen ud?

16 DIEB4.16 Bridge: Repræsentation af task-objekter Lad indholdsrelationer (containment eller aggregering og dekomponering) afspejle sig i den måde, hvorpå klasserne repræsenteres i brugergrænsefladen Eksemplet illustrerer, hvordan det at "Hotel" havde "Room" som "In me" kommer til udtryk: Hotel har en liste med Room- objekter

17 DIEB4.17 Fra task-objekter til GUI objekter Tegnes på papir (fotokopier af tomme skærmbilleder) For hvert task objekt besluttes det, hvilken repræsentation det skal have i brugergrænsefladen De to typer interaktionsrum – browser og viewer – kan udtrykkes på standardform Actions lægges ind i menuerne

18 DIEB4.18 Resultat Resultatet er en samling af vinduer For hvert vindue er der et forslag til detaildesign Mellem vinduerne er angivet muligheder for navigering mellem dem Kan bruges som grundlag for implementering af en første version af systemet Efterfølgende kan der udføres usabilityevaluering sammen med brugerne

19 DIEB4.19 Eksempel Illustrerer hvordan klasserne i præsen- tationsmodellen repræsenteres på skærmen En anden teknologi end en stor skærm med mange vinduer

20 DIEB4.20 Aktivitet 2: Generer design Opsummering Hvordan (i jeres projekt): Fastlæg en begrebsmæssig model for hele systemet Identificer interaktionsrum Definer interaktionselementer (præsentationsmodel) Design interaktionselementer ­ Fastlæg interaktionsform for hvert interaktionselement ­ Udarbejd detaildesign for hvert interaktionslement ­ Check dette mod den begrebsmæssige model

21 DIEB4.21 Øvelse: Indlæggelse af patient Ud fra et brugsmønster gennemføres metoden på opgaven med at indlægge en patient

22 DIEB4.22 IPJ-systemets løsning

23 DIEB4.23 Indlæggelse af patient: Brugbarhedsproblemer Testperson L (2003-4)

24 DIEB4.24 Kursusgang 4 Oversigt: Sidste kursusgang Opgaver Aktivitet 2: Generer design (fortsat) Design interaktionselementer Analysedokumentet

25 DIEB4.25 Analysedokumentet (1) Stakeholders kan bruges til supplering af A'et i afsnit 1.2 Personas kan bruges til supplering af beskrivelsen af aktører i afsnit 3.1.2 Scenarier kan bruges til at give overblik før de detaljerede brugsmønstre som nyt afsnit 3.1.3 (brugsmønstrene bliver så afsnit 3.1.4) Et scenarie sammenfatter et antal brugsmønstre for en aktør

26 DIEB4.26 Analysedokumentet (2) Afsnit 3.3. Brugergrænsefladen 3.3.1.Mål for brug. Prioriteringsskema med mål i forhold til brugbarhed (usability) og brugeroplevelse (user experience). 3.3.2.Begrebsmæssig model. Karakteristik af den grundlæggende form hvorunder brugeren interagerer med systemet. Kan udtrykkes i forhold til aktiviteter eller objekter. 3.3.3.Interaktionsform. Beskrivelse af den eller de interaktionsformer, som forventes anvendt i brugergrænsefladens elementer. 3.3.4.Generel interaktionsmodel. En komplet oversigt over interaktionsrum for hele brugergrænsefladen og de opgaver, der hører til hvert interaktionsrum.

27 DIEB4.27 Opsummering Færdige med aktivitet 2: generer design De interaktioner, som systemet skal understøtte, er omsat til en præsentationsmodel Der er en samling af specifikke vinduer svarende til interaktionselementerne i præsentationsmodellen For hvert vindue er attributter og handlinger beskrevet