1.2 Split Mailbox. Set Folder name. = name

Transkript

1 Current usage pattern: New Message container Method Make Folder from Mailbox mailbox 1.2 Split Mailbox Transfer to New... Method 2 Make Mailbox Drag Messages Make Folder folder Move Mailbox to Folder Set Folder name = name

2 New design: New Message container 1.1 Make Folder from Mailbox 1.2 Split Mailbox Invoke "Change to Folder" Select messages Invoke "Add to New Mailbox" Name New Mailbox mailbox Validate simplified task Provide buttons, menu items and mouse gestures (drag n drop, contextual menu) for added commands

3 TML features Hierarchical task structure of super- and subtasks Resources are preconditions for performing tasks: actor hierarchy model users, both abstract and concrete information modelled in CML from IDI references to dialog elements provide design support Explicit sequence constraints Flows: Control flow = sequence constraint Data flow = control flow + resource binding

4 Domain resources Refers to current population, i.e. (sets of) individuals that exist at task performance time Provide a context and focus for task The context of a subtask may be derived from its supertask s context: elements of sets, a message from a set of messages navigate through relations, e.g. husbands wife computed by function, e.g. complex traversal Individuals are created, modified and destroyed

5 Actors Abstract Types Actor Concrete composite/ simple Typical structure Group Person 2 Role A Role B Role C Composite Role Person 1 Role D

6 Sequence relations constraints for the super-/subtask part-of relation Aggregation Order Sequence Choice cardinality provides additional constrains a b c d a b c d a, b, c a, b, d c, a, b d, a, b c or d can in addition occur in between a and b

7 The choice relation: conditional tasks, i.e. an explicit deterministic condition method selection, i.e. the subtasks goals are equivalent and the choice will depend on e.g. resource constraints choice of goal, i.e. the subtasks goals differ and the choice will depending on context generalisation/specialization, i.e. abstract and possibly incomplete tasks are defined

8 Choices cont d method selection 1 Get folder Provide folder for file folder 2 Create file Create new file in folder 1 Search Search for information result 1.1 Find folder Find existing folder 1.2 Create folder Create new folder goal choice 1 Feasibility 2 Quit Give up 1.1 Simple 1.2 Advanced Feasibility study 3 Continue Simple search Advanced search Go for it!

9 Task hierarchy 1 Use Eudora 1.1 Make new Message 1.2 Reply to Message 1.3 Forward Message Author Message Provide Headers Author Body Recipient Subject

10 Task details 1.2 Reply to Message 1.3 Forward Message Recipient Subject Author Body Subject Author Body = from = "Re: " + subject Based on body = subject Based on body message message

11 General task example 1.1 Contracting 1 Sell gass 1.2 Deliver Contract Sell gass from North Sea to contract holders 1.3 Allocate 1.4 Invoicing select specific task based on contract or actor type Contract type A Contract type B includes at least

12 MMI-forelesninger Overordnet bilde av mennesker (aktører), oppgaver, informasjon og systemer (verktøy) Brukskvalitet Iterativ design og Usability Engineering Evaluering Oppgaveanalyse og modellering Scenariobygging Designteknikker

13 Nonaka s knowledge creation model Socialization Externalization Internalization Combination

14 Scenarioer, storyboards og snapshots Mål identifisere seg med bruker og forstå brukssituasjon potensiale for ny teknologi og artifakt Scenario historie basert på stiliserte personer, hendelser, artifakter og omgivelser fokus på brukskontekst, rammebetingelser og verdier Snapshot enkelt- bilde av brukssituasjon, scene Storyboard sekvens av snapshots for vanligste brukstilfeller

15 Scenariebygging Utvikle konkrete scenarier med: Mennesker Fysiske omgivelser og dingser Et tenkt produkt?

16 Ytre rammebetingelser Tid: Når foregår dette? Tid på døgnet Tid på året Arbeidsdag/Fri?

17 Ytre rammebetingelser Sted: Hvor foregår det? Land, By Arbeid, Bolig Arkitekturen Inne-Ute?

18 Hva har skjedd før? For hovedpersonen For de andre i scenariet Hva skal skje videre? Fortid - Framtid Planer Uventede ting?

19 Hvem er i scenariet? Brukerkarakterer: Tenkte personer (eller én) Alder Kjønn Fysikk: Høyde, vekt,,, Interesser, mål Kompetanser, holdinger Motivasjon: Hvorfor gjør de som de gjør Hva er deres roller i det som foregår? Hva er relasjonene mellom personene?

20 Hva er i scenariet? Fysiske dingser og omgivelser Teknisk utstyr Møbler Verktøy, materialer Medier (papir, foto,,) Eksisterende datasystemer Hus, bygninger Hvordan henger de sammen?

21 Hvordan brukes dingsene? Hva er relasjonene mellom personene og dingsene som inngår: Hva brukes de til? Hvilken funksjon har de?

22 Hva blir det nye produktets rolle? Hvordan inngår produktet i scenariet? I forhold til personene og deres handlinger/mål I forhold til eksisterende dingers/omgivelser.?

23 Et komplekst nettverk av relasjoner? i dynamisk forandring

24 Å designe er: Ikke bare å lage dingser, Men vel så mye å designe måter å leve på Måter å være i verden på Måter å være på Vi designer bruk, liv, og brukerens verden.

25 Storyboard - Fortell en historie

26 Konkret tenkning Kommunisere gjennom konkrete skjermbilder/skisser De fleste brukere forstår ikke våre abstraksjoner Gjennom konkrete eksempler blir det lettere å tenke Gjenbruk av skissemateriale i dokumentasjon og brukerveiledning

27 Mål og verdier Scenario, Storyboard Hvem, hva, hvor og når

28 MMI-forelesninger Overordnet bilde av mennesker (aktører), oppgaver, informasjon og systemer (verktøy) Brukskvalitet Iterativ design og Usability Engineering Evaluering Oppgaveanalyse og modellering Scenariobygging Designteknikker

29 Oppgavemodellering og design... Oppgavemodellen hjelper utvikleren å: få oversikt over alt brukeren ønsker å gjøre beskrive oppgavestrukturen identifisere sammenheng mellom oppgaver og informasjon Design omfatter bl.a.: identifisere egnede metaforer og interaksjonsstiler knytte oppgaver til interaksjonsform å konstruere et helt brukergrensesnitt fra tilgjengelige deler å evaluere design opp mot brukere og oppgaver

30 ...oppgavemodellering og design Oppgavemodellen beskriver: hvordan aktiviteter henger sammen hierarkisk begrensninger på sekvens informasjonsflyt generelle og spesifikke egenskaper ved oppgaver Design omfatter bl.a.: å identifisere nødvendige dialogelementer å aktivere disse på passende tidspunkt å velge egnede dialogelementer Merk at metaforer og interaksjonsstilen også legger sterke føringer på hvilke oppgaver som er meningsflyt!

31 ..bruk av telefon Bruke telefon Hva betyr dette for design? Ringe ut Ta imot Samtale nr? Lagre nr. Summetone nr? Finne nr. nr Taste nr. Notere Huske finne og taste inn nr. utføres alltid når en ringer ut summetone avbryter inntasting lagring av nr. er aktuelt under hele samtalen, ikke bare initielt designvalg muliggjør vurdering av ergonomi

32 Oppgave: Nytt dokument Nytt dokument Visio: Blankt ark Gjenbruk Stående Liggende Mal Dokument Framemaker: Powerpoint:

33 Konseptuell design Designprosess overordnet metafor, bærende idé, organisering av informasjon støtte for bruks-scenarioer, forståelig for bruker Grunnlag brukerens mentale modell av domene og problem oppgaveanalyse Fysisk/operasjonell design velge interaksjonsstil konkretisere og spesifisere oppførsel iht. interaksjonsstil Grunnlag kriterier som synlighet, konsistens, fleksibilitet hjelpemidler som retningslinjer (guidelines) og design patterns

34 ...telefon Telefon som... gjenskape egenskaper ved standard telefon...telefonliste fokus på telefonlista og bruk og manipulering av denne...verktøy brukskontekst, talehandlinger, notatblokk og avtalebok...kommunikasjonsmiddel sosiale strukturer, buddy-list, chat/talk/konferanse???

35 Teknikker for design Modeller er nyttig for presis representasjon Konseptuell design er vanskelig å modellere metaforer og interaksjonsstiler helhetstankegang gjenkjenning og overføring Konkrete manifestasjoner er et bedre kommunikasjonsmiddel ift. brukere og andre designere scenarioer, storyboards prototyper (papirprototyper, vertikale/horisontale, Wizard-of-Oz, mock-ups)

36 Metafor Metafor og skisser ta utgangspunkt i den virkelig verden identifiser viktige egenskaper ift. organisering av informasjon og oppgaver beskriv konsistent overføring til brukergrensesnitt Skisse kvalitativ representasjon detaljer understøtter metafor (gruppering, rammer, ikoner) utgangspunkt for forskjellige typer prototyper

37 Prototyper... Bruk-og-kast (throwaway) prototyper brukes for å finne/validere krav konstruksjonen kastes, kravene videreføres Inkrementell prototyper utvikles videre gjennom hele prosjektet kan settes i produksjon Prototyper er nyttige for å identifisere nødvendige krav naturlige sekvenser og bruk av funksjonalitet presentasjonsstruktur og look & feel

38 ...prototyper... Vertikale vs. horisontale prototyper Høy- vs. lav-realisme (fidelity) prototyper Styrt vs. hjulpet vs. selvstendig interaksjon gjennomkjøring av funksjonalitet for validering Wizard-of-Oz - kjøring observasjon ala brukbarhetstesting Verktøy tegneverktøy (Photoshop, Powerpoint, Visio) multimedia/animasjonsverktøy (Macromind Director, QT) database- og skjermbilde-verktøy (Access/VB) Rapid Application Development (Visual Studio, Delphi)

39 Dialog model Mediates data between system and user Abstract, concrete or template Interactor Name output direction System side input direction User side Resources

40 Building blocks are composed according to rules Templates describe standard compositions Many standard building blocks exist Dialog model cont d

41 Oppgave og dialog: konseptuell design shop look around fill caddie decide caddie content Recipe Look around Recipe Fill caddie Decide caddie content Goods Caddie Sent order

42 Conceptual model Message container + Mail folder Mailbox Message From To Subject Body

43 Show hierarchy Node + Folder Element e Element Pure hierarchies trees interior and leaf nodes Requires interacto for each type Many different realizations Reuse

44 Show message hierarchy Message container + Mail folder Mailbox e Mailbox Hierarchical visualization with element selection

45 Show / edit message From To Subject Body From To Subject Body Based on generic and fundamental interactors

46 Presentation model Mapping from abstract to concrete interactors Look and feel of interaction elements Layout of interactors in windows Life cycle, visibility and activation Usually informal Name: Address: OK

47 Window allocation: Physical design hierarchy message list single message

48 Analytisk metode Gjennomgå oppgavemodell fokusere tenkt system mot relevant og realistiske oppgaver identifisere rollen brukergrensesnitt/system har ift. oppgaveutførelse Konstruere dialogmodell bryte ned oppgaveutførelsen i dialogtrinn spesifisere nødvendig informasjon for bruker og system, mao. output til brukeren og input til system identifisere system -funksjoner og operasjoner detaljere dialogspesifikasjon Look & feel oversette dialogelementer til native grensesnittelementer

49 Dialog model Mediates data between system and user Abstract, concrete or template Interactor Name output direction System side input direction User side Resources

50 Building blocks are composed according to rules Templates describe standard compositions Many standard building blocks exist Dialog model cont d

51 Window allocation: Physical design hierarchy message list single message

52 Syntetiserende metode Gjennomgå look & feel standardfunksjonalitet og metaforer forventninger til interaksjon begrensninger og muligheter la stoffet tale til deg Konstruere dialog hvordan oversette oppgaver til interaksjon med standardelementer hvordan gruppere elementer (og funksjoner) samle/dele grupper opp i skjermbilder med navigering

53 Rett-frem-løsning Dialoger i sekvens iht. oppgavemodell forestilling, invitasjon, bestilling Et skjermbilde pr. dialog Liste-detaljer view Lett å låse dialogen? Uspennende?