DIEB 4.1

Kursusgang 4Oversigt:

• Sidste kursusgang

• Opgaver

• Aktivitet 2: Generer design (fortsat)

• Design interaktionselementer

• Analysedokumentet

DIEB 4.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 behovEtabler krav

Genererdesign

Byg interaktiv version

Evaluerdesign

Udgangspunkt

Resultat: Endeligt produkt

afslag

Identi¼ceret

Beløb godkendtKontrolleret

Beløb valgt

kode godkendt udbetaling

godkend beløbvælg beløb

godkend ikke beløb

Kort indsatindsæt kort

indtast kode

fortryd

DIEB 4.3

Opgaver1. 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.

DIEB 4.4

Udgangspunkt: Brugsmønster

• Kontanthævning

afslag

Identi¼ceret

Beløb godkendtKontrolleret

Beløb valgt

kode godkendt udbetaling

godkend beløbvælg beløb

godkend ikke beløb

Kort indsatindsæt kort

indtast kode

fortryd

DIEB 4.5

Kursusgang 4Oversigt:

• Sidste kursusgang

• Opgaver

• Aktivitet 2: Generer design(fortsat) Fremgangsmåde Interaktionselementer Muligheder for check

• Design interaktionselementer

• Analysedokumentet

Identificer behovEtabler krav

Genererdesign

Byg interaktiv version

Evaluerdesign

Udgangspunkt

Resultat: Endeligt produkt

DIEB 4.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

DIEB 4.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

DIEB 4.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

DIEB 4.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:<<navigates>>: navigering mellem komponenter er muligt<<contains>>: interaktionsrummet forneden indgår i det foroven<<input elements>>: interaktionsrummets input-elementer<<output elements>>: interaktionsrummets output-elementer<<action>>: mulige handlinger (funktioner)

DIEB 4.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

DIEB 4.11

Kursusgang 4Oversigt:

• Sidste kursusgang

• Opgaver

• Aktivitet 2: Generer design (fortsat)

• Design interaktionselementer Fastlæg interaktionsform Detaildesign af vinduer: Bridge Eksempel Øvelse

• Analysedokumentet

DIEB 4.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

DIEB 4.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

DIEB 4.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

DIEB 4.15

Bridge:Eksempel på task-objekter• For et hotel

• Hvordan ser præsentations-modellen ud?

DIEB 4.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

DIEB 4.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

DIEB 4.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

DIEB 4.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

DIEB 4.20

Aktivitet 2: Generer designOpsummeringHvordan (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

DIEB 4.21

Øvelse: Indlæggelse af patient

• Ud fra et brugsmønster gennemføres metoden på opgaven med at indlægge en patient

DIEB 4.22

IPJ-systemets løsning

DIEB 4.23

Indlæggelse af patient: Brugbarhedsproblemer

• Testperson L (2003-4)

DIEB 4.24

Kursusgang 4Oversigt:

• Sidste kursusgang

• Opgaver

• Aktivitet 2: Generer design (fortsat)

• Design interaktionselementer

• Analysedokumentet

DIEB 4.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

DIEB 4.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.

DIEB 4.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