Current usage pattern: New Message container Method 1 1.1 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
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
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
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
Actors Abstract Types Actor Concrete composite/ simple Typical structure Group Person 2 Role A Role B Role C Composite Role Person 1 Role D
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
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
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!
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
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
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 1.1-1.4
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
Nonaka s knowledge creation model Socialization Externalization Internalization Combination
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
Scenariebygging Utvikle konkrete scenarier med: Mennesker Fysiske omgivelser og dingser Et tenkt produkt?
Ytre rammebetingelser Tid: Når foregår dette? Tid på døgnet Tid på året Arbeidsdag/Fri?
Ytre rammebetingelser Sted: Hvor foregår det? Land, By Arbeid, Bolig Arkitekturen Inne-Ute?
Hva har skjedd før? For hovedpersonen For de andre i scenariet Hva skal skje videre? Fortid - Framtid Planer Uventede ting?
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?
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?
Hvordan brukes dingsene? Hva er relasjonene mellom personene og dingsene som inngår: Hva brukes de til? Hvilken funksjon har de?
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.?
Et komplekst nettverk av relasjoner? i dynamisk forandring
Å 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.
Storyboard - Fortell en historie
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
Mål og verdier Scenario, Storyboard Hvem, hva, hvor og når
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
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
...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!
..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
Oppgave: Nytt dokument Nytt dokument Visio: Blankt ark Gjenbruk Stående Liggende Mal Dokument Framemaker: Powerpoint:
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
...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???
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)
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
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
...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)
Dialog model Mediates data between system and user Abstract, concrete or template Interactor Name output direction System side input direction User side Resources
Building blocks are composed according to rules Templates describe standard compositions Many standard building blocks exist Dialog model cont d
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
Conceptual model Message container + Mail folder Mailbox Message From To Subject Body
Show hierarchy Node + Folder Element e Element Pure hierarchies trees interior and leaf nodes Requires interacto for each type Many different realizations Reuse
Show message hierarchy Message container + Mail folder Mailbox e Mailbox Hierarchical visualization with element selection
Show / edit message From To Subject Body From To Subject Body Based on generic and fundamental interactors
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
Window allocation: Physical design hierarchy message list single message
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
Dialog model Mediates data between system and user Abstract, concrete or template Interactor Name output direction System side input direction User side Resources
Building blocks are composed according to rules Templates describe standard compositions Many standard building blocks exist Dialog model cont d
Window allocation: Physical design hierarchy message list single message
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
Rett-frem-løsning Dialoger i sekvens iht. oppgavemodell forestilling, invitasjon, bestilling Et skjermbilde pr. dialog Liste-detaljer view Lett å låse dialogen? Uspennende?