Low-Fidelity Prototyping. Overview. Short Review of User-Centered Design. SMD157 Human-Computer Interaction Fall 2003

Transcription

1 INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET Lw-Fidelity Prttyping SMD157 Human-Cmputer Interactin Fall 2003 Nv SMD157, Lw-Fidelity Prttyping 1 L Overview Shrt review f user-centered design Iterative design & prttyping Examples Nv SMD157, Lw-Fidelity Prttyping 2 L INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET Shrt Review f User-Centered Design Nv SMD157, Lw-Fidelity Prttyping 3 L 1

2 Review User Centered Design Invlve the user in all stages f the system develpment prcess - Requirements specificatin, design, evaluatin, revisin Arriving at a slutin by successive apprximatin. Adds the nvel idea that wrkers shuld have a say in hw their jb is structured. Nv SMD157, Lw-Fidelity Prttyping 4 L Tw Traditins in User-Centered Design Participatry Design - Natural envirnments - Users participate - Fcus n use - Use mdel - Design the wrk - Rle playing Cntextual Design - Natural envirnments - Users participate - Fcus n system - System mdel - Design the artifact (system) - Evaluatin Nte the similarities! Nv SMD157, Lw-Fidelity Prttyping 5 L INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET Iterative Design & Prttyping Nv SMD157, Lw-Fidelity Prttyping 6 L 2

3 The Iterative Design Prcess Cllect functinal requirements Perfrm a user task analysis. Implement a prttype. Evaluate the prttype. Revise the functinal requirements & task analysis. Repeat last three steps until the system is clse enugh. Ntice the rle f prttyping! Nv SMD157, Lw-Fidelity Prttyping 7 L Iterative Design Using Prttypes Evaluate Results Design Test Prttype Nv SMD157, Lw-Fidelity Prttyping 8 L Principles f this Methd Catching errrs early saves effrt User invlvement is essential fr: - Suitability - Designer educatin - Acceptance Yu can t get everything right at nce, iteratin is required Nv SMD157, Lw-Fidelity Prttyping 9 L 3

4 Prs and Cns fr Lw-Fidelity Prttyping Prs - Lwer develpment csts - Evaluate multiple designs! - Useful when cmmunicating with users - Addresses layut issues - Helps t identify market requirements - Prf-f-cncept Cns - Pr specificatin fr cding frm - Facilitatr-required - Limited: + Errr checking + After-requirement utility + Usefulness fr usability testing + Navigatin and flw Nv SMD157, Lw-Fidelity Prttyping 10 L Types f Prttypes Brad/Shallw - All the functins are there, but nthing is behind them Deep/Narrw - Mst things are missing, but what s there is detailed - Gd t test uncertainties in depth. Scenari-based - Gd cverage, but limited applicatin data Nv SMD157, Lw-Fidelity Prttyping 11 L Fidelity and Implementatin Effrt Methd Fidelity Effrt Oral descriptin Lw Lw Paper & pen MetaCard/HTML Flash MX Interface builder Full applicatin High High Nv SMD157, Lw-Fidelity Prttyping 12 L 4

5 Level f Fidelity Use what is easy, but gives a reasnable representatin - Hand sketches - Drawing prgrams Describe peratins and results Use frames t shw dynamics Prvide instructins s the user can fllw the dynamics - E.g., After delete is selected, the display will lk like page 3. Often different levels f fidelity are applied t different parts. Nv SMD157, Lw-Fidelity Prttyping 13 L Level f Fidelity, Example Designing a cmputer adventure game (Riven). The game cnsists f tw majr parts: - The stry (includes what is where, etc.) - The graphics Nv SMD157, Lw-Fidelity Prttyping 14 L Prttyping the Stry Uses lw-fidelity techniques extensively Create successive sketches f: - The wrld and intercnnectins - The puzzle and clues The prttype must create the flavr f the interactin withut details Uses flw diagrams and strybards Changes are lw effrt and lw cst Prduct - cmplete skeletn f the interactin Nv SMD157, Lw-Fidelity Prttyping 15 L 5

6 Prttyping the Graphics Want t cmpare tw methds: - Old, frame sequences - New, mdel based, gives mre freedm Prblems: - Generating high reslutin scenes takes days - One f the tw methds will be discarded, s half f the generatin time will be wasted Nv SMD157, Lw-Fidelity Prttyping 16 L Prttyping the Graphics Slutin - Generate lwer reslutin images and test - Generate a limited number f sequences Results - The mdel-based graphics gave mre realistic interactin - But, they als detracted frm the stry - S, the frame sequencing methd was kept Nte, the lw-reslutin graphics methd can be used t create a cmplete game fr testing befre generating high-reslutin graphics. Nv SMD157, Lw-Fidelity Prttyping 17 L Advantages f Lw-Fidelity Prttypes Lw effrt Lk unfinished - Users will feel freer t criticize - Cmputer-based prttypes lk like a lt f effrt was invlved Basis fr very early feedback Nv SMD157, Lw-Fidelity Prttyping 18 L 6

7 Prttyping Prcedure Yu have already: - Thught abut hw the system will be used - Described scenaris f use Next: - Build a paper prttype - Evaluate the prttype by inspectin - Evaluate with actual users using the scenaris Nte: Yu usually perate at several levels f detail at nce. The prcedure gives yu ideas, insight, and knwledge. Nv SMD157, Lw-Fidelity Prttyping 19 L INSTITUTIONEN FÖR SYSTEMTEKNIK LULEÅ TEKNISKA UNIVERSITET Example Prttypes Nv SMD157, Lw-Fidelity Prttyping 20 L Scenaris Walk up t the machine and cpy a meeting agenda fr a clleague. Make 10 cpies frm a cnference prceedings fr a seminar class. Prduce them with tw sides. Nv SMD157, Lw-Fidelity Prttyping 21 L 7

8 Tasks t Supprt Simple single cpy Handut/reprt prductin (e. g., bk t 2-sided stapled) Reduce/Enlarge (interact with PDA t get the exact reductin?) Odd utput frmats (A3, A5, ) Save a setup fr future use Nv SMD157, Lw-Fidelity Prttyping 22 L First Screen Pressing here causes the dcument laded int the cpier t be duplicated. G t the "status page". Number f Cpies: 1 Duplicate Dcument Advanced Features Use Cnfiguratin This buttn leads t ther features such as reducing, tw-sided cpying, When pressed g t the "advanced page". This buttn leads t previusly saved cpying prgrams. When pressed g t the cnfiguratins page". Nv SMD157, Lw-Fidelity Prttyping 23 L Status Page When the cpies are dne, the prgram autmatically returns t the "first screen" Number f Cpies: 1 Cpies Cmpleted: 0 Pages Cmpleted: 5 This buttn causes the current cpy jb t be abandned. When pressed g t the "first screen". STOP Nv SMD157, Lw-Fidelity Prttyping 24 L 8

9 Advanced Page Select tab t set parameters fr riginals/cpies Number f Cpies: 1 Originals Cpies Change Frmat 1-Sided 2-Sided Bk File Radi buttns Size Detect A3 A4 A5 Nv SMD157, Lw-Fidelity Prttyping 25 L Advanced Page Select tab t set parameters fr riginals/cpies Radi buttns Radi buttns, will als gray-ut sme sizes Number f Cpies: 1 Originals Cpies Change Frmat 1-Sided Staples nne 2-Sided upper left Srted left edge Paper Size Plain Originals Punched A3 Film A4 Feed A5 Save Cnfiguratin Radi buttns Links t Save Cnfiguratin Page Nv SMD157, Lw-Fidelity Prttyping 26 L Advanced Page Select tab t set parameters fr riginals/cpies Number f Cpies: 1 Originals Darker Cpies Change Lighter less Cntrast mre Enlarging/Reducing Nne A4 Æ A5 Radi buttns, filling A4 Æ A3 A3 Æ A4 in a percent deselects A5 Æ A4 all ther ptins. Exactly % Nv SMD157, Lw-Fidelity Prttyping 27 L 9

10 Save Cnfiguratin Page Drp-dwn list with fill in. Enter new name r select frm the list t replace Save Cnfiguratin Nv SMD157, Lw-Fidelity Prttyping 28 L Use Cnfiguratin Page Drp-dwn list Displays settings fr the selected cnfiguratin Cnfiguratins Originals: 1-sided Detect Cpies: 1-sided srted staple upper left plain, A4 exact size Use Cnfiguratin Nv SMD157, Lw-Fidelity Prttyping 29 L Alternate All-in-One Interface Drp-dwn list Displays settings fr the selected cnfiguratin Originals: 1-sidedÍ detectí Cpies: 1-sidedÍ srtedí staple upper leftí plain, A4Í exact sizeí Accunt researchí Lightness Cntrast Fill in field # f cpies 1 Start Pressing drps dwn a list f cnfiguratins. New and delete are n the list. See the Cnfiguratin Management Page. Pressing here causes the dcument laded int the cpier t be duplicated. G t the "status page". Nv SMD157, Lw-Fidelity Prttyping 30 L 10

11 Cnfiguratin Management Page Originals: 1-sidedÍ 1-sided t 2 detectí bk t 1-sided, A4 Cpies: 1-sidedÍ *New Cnfiguratin srtedí *Edit Cnfiguratin staple upper leftí *Delete Cnfiguratin plain, A4Í exact sizeí Accunt researchí Lightness Cntrast # f cpies 1 Start Selecting an item: 1. Selects cnfiguratin, 2. Pps-up field fr New, 3. Pps-up a list fr Replace and Delete. (Replace saves changes made t setup.) Nv SMD157, Lw-Fidelity Prttyping 31 L Selecting Replace Originals: 1-sidedÍ 1-sided t 2 detectí bk t 1-sided, A4 Cpies: 1-sidedÍ *New Cnfiguratin srtedí *Edit Cnfiguratin staple upper leftí *Delete Regular Cnfiguratin Duplicate plain, A4Í 1-sided t 2 exact sizeí bk t 1-sided, A4 Accunt researchí Lightness Cntrast # f cpies 1 Start Nv SMD157, Lw-Fidelity Prttyping 32 L Editing Italic Fnt Displays settings fr the selected cnfiguratin Originals: 1-sidedÍ detectí Cpies: 1-sidedÍ srtedí staple upper leftí plain, A4Í exact sizeí Accunt researchí Lightness Cntrast Restre Save E Test An E appears. Nv SMD157, Lw-Fidelity Prttyping 33 L 11

12 Final Ntes The prttypes need t be carefully evaluated with users. It is likely that neither alternative is gd There needs t be wrk n hw accunting is set up - Users prbably prefer t dwnlad their accunts int the PDA Nv SMD157, Lw-Fidelity Prttyping 34 L Questins? Nv SMD157, Lw-Fidelity Prttyping 35 L 12