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

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

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

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 ­ Interaktionselementer: præsentationsmodel Analysedokumentet Identificer behov Etabler krav Generer design Byg interaktiv version Evaluer design Udgangspunkt Resultat: Endeligt produkt

3 DIEB4.3 Opgaver 1.Projekt. Fra brugsmønster til model af individuelle interaktionsrum: Interaktionsrum og opgaver. Hierarkisk struktur på brugsmønster (opgaver). 2.Gentag opgave 1 for et andet brugsmøster i jeres projekt. 3.Brug de to individuelle modeller af interaktionsrum til at lave en samlet model af interaktionsrum. 4.Begrebsmæssig model: beskriv begrebsmæssig model for et antal eksempler fra sidste lektion. 5.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. 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 Fra brugsmønstre til præsentationsmodel Kontanthævning

5 DIEB4.5 Kursusgang 4 Oversigt: Sidste kursusgang Opgaver Aktivitet 2: Generer design (fortsat) ­ Fremgangsmåde ­ Muligheder for check Design af interaktionselementer 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 Definer interaktionselementer (sidste kursusgang) Design interaktionselementer ­ Fastlæg interaktionsform for hvert interaktionselement ­ Udarbejd detaildesign for hvert interaktionslement ­ Check dette mod den begrebsmæssige model

7 DIEB4.7 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 ­ 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

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

9 DIEB4.9 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

10 DIEB4.10 Detaildesign af vinduer: Bridge Næste skridt består i at designe detaljerne i hvert interaktionselement Dette 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

11 DIEB4.11 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

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

13 DIEB4.13 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

14 DIEB4.14 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

15 DIEB4.15 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

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

17 DIEB4.17 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

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

19 DIEB4.19 IPJ-systemets løsning

20 DIEB4.20 Indlæggelse af patient: Brugbarhedsproblemer Videoklip: Testperson L (2003-4) 1:09:56-1:15:44

21 DIEB4.21 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