DIEB3.1 Kursusgang 3 Oversigt: Sidste kursusgang Opgaver Aktivitet 2: Generer design Begrebsmæssig model Interaktionsrum og interaktionselementer Analysedokumentet.

Præsentationer af emnet: "DIEB3.1 Kursusgang 3 Oversigt: Sidste kursusgang Opgaver Aktivitet 2: Generer design Begrebsmæssig model Interaktionsrum og interaktionselementer Analysedokumentet."— Præsentationens transcript:

1 DIEB3.1 Kursusgang 3 Oversigt: Sidste kursusgang Opgaver Aktivitet 2: Generer design Begrebsmæssig model Interaktionsrum og interaktionselementer Analysedokumentet

2 DIEB3.2 Sidste kursusgang Interaktionsdesign ­ Fire centrale spørgsmål ­ Aktiviteter ­ Udgangspunkt og resultat Identificering af behov ­ Hvad er "behov" ­ Interview: hvordan Formulering af krav ­ Grundbegreb ­ Personas ­ Scenarier ­ Brugsmønstre Brugeren indtaster navnene på alle mødedeltagere sammen med begrænsninger såsom mødets varighed, omtrentligt tidspunkt og stedet hvor det skal foregå. Systemet checker så i forhold til de individuelle kalendere og den centrale afdelingskalender. Brugeren præsenteres for en serie af mulige datoer, hvor alle er tilgængelige på samme tid. Derefter kan mødetidspunktet vælges, og det skrives ind i deltagernes individuelle kalendere. Dog vil nogle personer ønske at blive spurgt, før tidspunktet lægges fast. Systemet kunne måske automatisk sende dem en email, hvor de bedes om at bekræfte aftalen, før den lægges fast. (PRS, p. 224) Identificer behov Etabler krav Generer design Byg interaktiv version Evaluer design Udgangspunkt Resultat: Endeligt produkt

3 DIEB3.3 Opgaver 1.Stakeholder-analyse 2.Interview ­ distinktioner ­ problemer med udførelse ­ interessante observationer 3.Persona 4.Mål for interaktionsdesign (genovervejet) 5.Scenarie

4 DIEB3.4 Kursusgang 3 Oversigt: Aktivitet 2: Generer design ­ Relation til krav ­ Fremgangsmåde Begrebsmæssig model Interaktionsrum og interaktionselementer Analysedokumentet Identificer behov Etabler krav Generer design Byg interaktiv version Evaluer design Udgangspunkt Resultat: Endeligt produkt

5 DIEB3.5 Aktivitet 2: Generer design 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 Fastlæg interaktionsform for hvert interaktionselement Udarbejd detaildesign for hvert interaktionslement Check dette mod den begrebsmæssige model (næste kursusgang)

6 DIEB3.6 Kursusgang 3 Oversigt: Aktivitet 2: Generer design Begrebsmæssig model ­ Baseret på aktivitet/objekter ­ Interaktionsformer ­ Eksempler Interaktionsrum og interaktionselementer Analysedokumentet

7 DIEB3.7 Begrebsmæssig model En beskrivelse af det kommende system i form af en samling af integrerede ideer og begreber om, hvad det skal gøre og hvordan det skal agere og se ud. Den begrebsmæssige model skal bidrage til, at brugerne forstår systemet, som det var hensigten Nøglespørgsmål: hvad vil brugerne gøre med systemet Dette spørgsmål kan besvares på to måder: ­ baseret på de aktiviteter brugerne udfører ­ baseret på de objekter brugerne arbejder med En begrebsmæssig model kan nogen gange sammenfattes i en metafor – for eksempel skrivebord eller kontor

8 DIEB3.8 Begrebsmæssig model baseret på aktiviteter Fire typer af aktivitet i interaktionen med systemet: ­ Instruktion: brugeren aktiverer en funktion, systemet udfører denne funktion og returnerer et output ­ Konversation: brugeren og systemet fører en dialog for at nå frem til et resultat ­ Manipulation og navigering: brugeren manipulerer virtuelle objekter og navigerer rundt i en virtuel verden ­ Udforskning og browsing: brugeren bevæger sig igennem en samling af information og udvælger dele af den Giv eksempler på de fire

9 DIEB3.9 Begrebsmæssig model baseret på objekter Et (virtuelt) objekt er kernen i interaktionen med systemet. Ofte er objektet inspireret af et virkeligt objekt Eksempel: spreadsheet systemer er baseret på en tabel, hvori der udføres beregninger (det virtuelle objekt). Det er inspireret af et bogføringsark

10 DIEB3.10 Interaktionsformer En begrebsmæssig model kan understøttes med forskellige interaktionsformer Interaktionsformen fastlægger centrale egenskaber: Hvordan udpeger vi et objekt? Hvordan aktiverer vi en funktion? Hvordan indlæses inddata? Hvordan opstilles uddata? En typisk brugergrænseflade vil indeholde kombinationer af de forskellige interaktionsformer – der vil dog stadig være en primær og et antal supplerende interaktionsformer Tidligt i et udviklingsprojekt bør der eksperimenteres med forskellige begrebsmæssige modeller og – for hver begrebsmæssig model – med forskellige interaktionsformer

11 DIEB3.11 Interaktionsformer: Kommando Brugeren ser intet på forhånd Indtaster og aktiverer en kommando, der skal overholde et bestemt format Interaktionen mellem bruger og system baserer sig på kommandoer Typiske eksempler: ­ Unix ­ Speciel teksteditor (f.eks. vi) ­ Primært henvendt til expertbrugeren Indlæsning af data ­ Eksempel: ændring af forskudsskema. Brugeren taster en lang sekvens af feltnumre og tal ind Fordele:Fleksibilitet Hurtigt for faste brugere Initiativet placeres hos brugerne Let at lave makroer Ulemper:Ringe fejlhåndtering Kræver omfattende træning Fordele:Fleksibilitet Hurtigt for faste brugere Initiativet placeres hos brugerne Let at lave makroer Ulemper:Ringe fejlhåndtering Kræver omfattende træning

12 DIEB3.12 Interaktionsformer: Menu Menuer bruges til at organisere information og interaktion ­ Giver styret og kontrolleret dialog ­ For lejlighedsvise brugere Eksempler: ­ Fuldskærmsmenuer med valg af menupunkt ­ Pull-down fra overliggende bjælke i et vindue ­ Pop-up ved tryk på mus ovenpå et objekt ­ Check-bokse eller radioknapper i et vindue eller en dialogboks ­ Links indlejrede i tekst Fordele:Kort indlæring Færre indtastninger Struktur på beslutningstagning Let at understøtte fejlhåndtering Ulemper:Fare for mange menuer Sinker den faste bruger Optager plads på skærmen Fordele:Kort indlæring Færre indtastninger Struktur på beslutningstagning Let at understøtte fejlhåndtering Ulemper:Fare for mange menuer Sinker den faste bruger Optager plads på skærmen

13 DIEB3.13 Interaktionsformer: Dialog Interaktion mellem bruger og system som en dialog mellem to personer ­ Simpel og lærenem form, eks. fra Windows (PowerPoint) Mere generelt: spørgsmål og svar dialog ­ Brugeren ledes gennem en struktureret dialog, hvor systemets videre adfærd kan afhænge af de svar, der gives. ­ Bruges over for en meget bred og forskelligartet brugergruppe, som ikke kan forventes at mestre kompliceret navigation. ­ Eksempel: pengeautomat eller telefonservice.

14 DIEB3.14 Interaktionsformer: Skemaudfyldelse Indlæsning af data struktureret som formular eller skema Eksempel ­ Udfyldelse af standardinformation om en bruger Mest velegnet for faste brugere, fordi feltnavne og indtastningsformater kræver forståelse Fordele:Forenklet indtastning Kræver begrænset træning Nyttig vejledning Ulemper:Optager plads på skærmen Kan være langsommeligt Fordele:Forenklet indtastning Kræver begrænset træning Nyttig vejledning Ulemper:Optager plads på skærmen Kan være langsommeligt

15 DIEB3.15 Interaktionsformer: WIMP WIMP er en meget udbredt interaktionsform i dag bl.a. kendt fra windows Består af fire elementer ­ Windows ­ Icons ­ Menus ­ Pointers Kaldes også direkte manipulering Brugeren arbejder på virkelighedsnære repræsentationer af objekter Objekterne kan vælges, og funktioner kan udføres direkte på dem med et umiddelbart synligt resultat Affordance er centralt Fordele:Let at lære Let at huske Fejl kan undgås Understøtter udforskning Høj subjektiv tilfredsstillelse Ulemper:Kræver grafisk skærm og pegeinstrument Makroer er vanskelige Fordele:Let at lære Let at huske Fejl kan undgås Understøtter udforskning Høj subjektiv tilfredsstillelse Ulemper:Kræver grafisk skærm og pegeinstrument Makroer er vanskelige

16 DIEB3.16 Andre interaktionsformer Naturligt sprog ­ Havde tidligere stor opmærksomhed, men er efterhånden helt uden praktisk betydning. ­ Kræver som hovedregel megen indtastning og specialiseret sprog. ­ Eksempel: Eliza Udskrivning af data ­ I alle systemer er der behov for udskrivning af data – typisk enten i et vindue eller på en udskrift ­ Denne del af brugergrænsefladen minder i struktureringen om skemaudfyldelse

17 DIEB3.17 Eksempler For hvert eksempel: Hvad er den begrebsmæssige model Hvilke interaktionsformer anvendes

18 DIEB3.18

19 DIEB3.19

20 DIEB3.20

21 DIEB3.21

22 DIEB3.22

23 DIEB3.23 Kursusgang 3 Oversigt: Aktivitet 2: Generer design Begrebsmæssig model Interaktionsrum og interaktionselementer ­ Ikke fra bogen ­ Eksempel ­ Individuelle interaktionsrum ­ Samlet interaktionsrum ­ Interaktionselementer Analysedokumentet

24 DIEB3.24 Eksempel: Communicator Vendsysselværket Brændselsafdelingen Kommunikation: VHF, DECT- telefon, samtaleanlæg Functionality: communication device. machine state indication, support for communication Application Domain: transport of coal around the power plant, preparation and mixing of coal, monitoring conveyer belts, problem solving/prevention in production line Conditions: safety critical, noisy environment, dusty conditions, above- and underground, employees have basic IT training/knowledge Technology: pocket PC, Microsoft visual studio 2003.Net, WLAN Objects: employees, mobile unit, conveyer belts, magnet, screener, grinder, control room computers Responsibility: context-aware mobile communication support system (CAMCoSS), monitoring production line state, facilitate cooperation and communication, communication in noisy environments Functionality: communication device. machine state indication, support for communication Application Domain: transport of coal around the power plant, preparation and mixing of coal, monitoring conveyer belts, problem solving/prevention in production line Conditions: safety critical, noisy environment, dusty conditions, above- and underground, employees have basic IT training/knowledge Technology: pocket PC, Microsoft visual studio 2003.Net, WLAN Objects: employees, mobile unit, conveyer belts, magnet, screener, grinder, control room computers Responsibility: context-aware mobile communication support system (CAMCoSS), monitoring production line state, facilitate cooperation and communication, communication in noisy environments

25 DIEB3.25 Interaktionsrum og opgaver Et interaktionsrum er en klasse, der senere bliver et element i brugergrænsefladen Eksempler på interaktionsrum: ­ Vindue ­ Menu ­ Panel ­ … Et interaktionsrum er en del af brugergrænsefladen, hvori der foregår en form for interaktion Ideen med interaktionsrum er at brugergrænsefladen først designes på et abstrakt niveau, før vi begynder på den konkrete udformning Interaktionsrum knyttes til opgaver En opgave er en klasse, der repræsenterer en brugeraktivitet, der understøttes af systemet

26 DIEB3.26 Individuelle interaktionsrum Udarbejdelse af en model af individuelle interaktionsrum Modellen består af interaktionsrums-objekter Der er en model af individuelle interaktionsrum for hvert brugsmønster Hver model beskriver en mulig brugergrænseflade, som understøtter et bestemt brugsmønster Vi tager udgangspunkt i et tilstandsdiagram for brugsmønsteret Gør brugsmønsteret så lineært som muligt For hver "interaktion" mellem bruger og system indføres et interaktionsrum

27 DIEB3.27 Udgangspunkt: Brugsmønstre Den samlede mængde af brugsmønstre er beskrevet enten i en aktørtabel eller med et brugsmønsterdiagram Disse beskrivelser giver overblik over den samlede mængde af brugsmønstre For hvert af disse, skal vi modellere individuelle interaktionsrum

28 DIEB3.28 Relatering til opgaver Hvert af de individuelle interaktionsrum relateres derefter til opgaver En opgave er den aktivitet, som brugeren udfører under anvendelsen af systemet

29 DIEB3.29 Opdatering af brugsmønstrene Opgaverne kan være en hjælp til strukturering af brugsmønstrene En opgave vil typisk sammenfatte et antal aktiviteter i brugsmønsteret Eksempel: ­ Opgave: identificer bruger Kan indtegnes i brugsmønsteret som hierarkiske tilstande På denne måde kommer brugsmønsteret til direkte at beskrive dialoggangen i brugen af systemet

30 DIEB3.30 Samlet model af interaktionsrum Ud fra de individuelle modeller af interaktionsrum laves en samlet model Første udkast fås ved at sætte de individuelle modeller sammen Derefter gennemgås interaktionsrum og opgaver systematisk for at finde flere forekomster af den samme klasse Et interaktionsrum kan være relateret til flere opgaver og en opgave kan være relateret til flere interaktionsrum Eksempel for feltarbejderen på kraftværket

31 DIEB3.31 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

32 DIEB3.32 Eksempel Udgangspunkt: den samlede model af interaktionsrum Identificer interaktionsrum, som er indeholdt i et andet interaktionsrum (aggregering) Knyt funktioner til de enkelte interaktionsrum Beskriv input- og output- elementer på elementerne i brugergrænsefladen Notation: >: navigering mellem komponenter er muligt >: interaktionsrummet forneden indgår i det foroven >: interaktionsrummets input-elementer >: interaktionsrummets output-elementer >: mulige handlinger (funktioner)

33 DIEB3.33 Aktivitet 2: Generer design Opsummering Hvordan (i jeres projekt): Fastlæg en begrebsmæssig model for hele systemet Identificer interaktionsrum Definer interaktionselementer Fastlæg interaktionsform for hvert interaktionselement Udarbejd detaildesign for hvert interaktionslement Check dette mod den begrebsmæssige model (næste kursusgang)

34 DIEB3.34 Kursusgang 3 Oversigt: Aktivitet 2: Generer design Begrebsmæssig model Interaktionsrum og interaktionselementer Analysedokumentet

35 DIEB3.35 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 i afsnit 3.1.3 Et scenarie sammenfatter et antal brugsmønstre for en aktør

36 DIEB3.36 Analysedokumentet (2) Afsnit 3.3. Brugergrænsefladen 3.3.1. Begrebsmæssig model for hele systemet Interaktionsformer der forventes anvendt 3.3.2. Samlet model af interaktionsrum For (nogle af) de brugsmønstre, der er beskrevet i 3.1.3 3.3.3. Præsentationsmodel Evt. kun for en del af systemet 3.3.4. Eksempler i form af skitser af elementer i præsentationsmodellen (skitser af vinduer)

37 DIEB3.37 Opsummering Grundlæggende begreber om interaktionsdesign Metode til interaktionsdesign Teknikker til identifikation af brugergrænsefladens elementer Placering i analysedokument Efter analyse-review Design af elementerne i brugergrænsefladen