(PDLO FOLHQW Dagens forelesning Overordnet bilde av mennesker (aktører), oppgaver, informasjon og systemer (verktøy) Participatory design Utviklingsprosesser Oppgaveanalyse ÖOppgavemodellering UI modelling - perspectives Task models +RZ are tasks actually performed? :KDW is the user supposed to be able to do? Dialog model :KDW functional (abstract) UI elements do we need? +RZ are they composed? Look & feel model +RZ are objects and actions visualized and laid out? :KDW are the interaction details Task modelling Often combines functions and concepts Two major formalisms: processes, dataflow and function networks hierarchical decomposition with sequence constraints Used both for understanding current work modes and practice specifying how work should be done Task modelling is work GHVLJQ! Easier to do in parallel with dialog and look & feel design Bruk av Visio To maler ligger på nettet: TML-konstruksjoner på ~sif8035/ov/ui.vss Gammel referent på ~sif8035/ov/referent.vss Installasjon av Visio er gjort, men dere må kjøre en bat-fil på deres egen bruker o:/visiofix.bat Si fra dersom dere får problemer Bruk av telefon... Bruke telefon TML example RYHUODSSHQGH DOWHUQDWLYHU VHNYHQV 1 Read email Mailbox ^` In FRQFHSWXDOÃPRGHO Ringe ut Ta imot Samtale User Mailboxes Out Finne nr. Summetone nr IO\W YHNVOLQJ EHWLQJHW Lagre nr. Taste nr. Notere Huske 1.1 Get new email In WDVNÃVWUXFWXUH 1.2 Manage email message Manage message Read Transfer message message A mailbox contains User performs Read email using Email client The current set of mailboxes provides the task context Get new email uses In mailbox and provides Manage email with a set of Manage email implies acting on each individual message in the input set A message is transferred after it is read 1
TML features Domain resources 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 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 navigate through relations, e.g. husbands wife computed by function, e.g. complex traversal Individuals are created, modified and destroyed Actors Sequence relations Types Typical structure Group Actor composite/ simple Person 2 Person 1 Role A Role B Abstract Concrete Role C Role D Composite Role FRQVWUDLQWV for the super-/subtask part-of relation a, b, c Aggregation Order Sequence a, b, d c, a, b d, a, b a b c d Choice FDUGLQDOLW\ provides c or d can additional constrains in addition occur in between a and b a b c d The choice relation: Choices cont d FRQGLWLRQDOÃWDVNV, i.e. an explicit deterministic condition PHWKRGÃVHOHFWLRQ, i.e. the subtasks goals are equivalent and the choice will depend on e.g. resource constraints FKRLFHÃRIÃJRDO, i.e. the subtasks goals differ and the choice will depending on context JHQHUDOLVDWLRQVSHFLDOL]DWLRQ, i.e. abstract and possibly incomplete tasks are defined 1.1 Simple Simple search 1 Search Search for information method selection result 1.2 Advanced Advanced search 1.1 Find Find existing 1 Get Provide for file 1.2 Create Create new 2 Create file Create new file in goal choice 1 Feasibility Feasibility study 2 Quit Give up 3 Continue Go for it! 2
Task hierarchy General task example 1 Use Eudora 1.1 ing 1 Sell gass 1.2 Deliver 1.1 Make new 1.2 Reply to 1.3 Forward Sell gass from North Sea to contract holders 1.3 Allocate Recipient 1.4 Invoicing Author Provide Headers Author Body Subject VHOHFWÃVSHFLILFÃWDVN EDVHGÃRQÃFRQWUDFWÃRU DFWRUÃW\SH type A type B LQFOXGHVÃDWÃOHDVWÃÃ 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 Oppgave: Nytt dokument Hva betyr dette for design? Ringe ut Ta imot Samtale Nytt dokument 9LVLR Blankt ark Gjenbruk Lagre nr. Finne nr. Summetone 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 Stående Liggende Mal Dokument )UDPHPDNHU 3RZHUSRLQW 3
Designprosess Konseptuell design 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 som......telefon 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, Wizardof-Oz, mock-ups) Metafor og skisser Metafor 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) 4
Design patterns Dialog model Aid to construct a VROXWLRQ to a SUREOHP A design pattern represents a possible VROXWLRQ to a SUREOHP H[DPSOHV of the solution in use UHDVRQV for why the solution solves the problem FULWHULD for when to and when not to use the solution UHODWLRQV to other design patterns Generic and specific Vertical and horizontal Mediates data between system and user Abstract,,QWHUDFWRU concrete or template Name System side output direction input direction Resources User side Dialog model cont d Show hierarchy Building blocks are composed according to rules Templates describe standard compositions Many standard building blocks exist Node + Folder Element e Element Pure hierarchies trees interior and leaf nodes Requires interactor for each type Many different realizations Reuse Presentation model Window allocation: Physical design Mapping from abstract to concrete interactors Look and feel of interaction elements Layout of interactors in windows Life cycle, visibility and activation Name: Address: OK hierarchy Usually informal message list single message 5