1. Trinity Team 1/15 Eunyoung Cho Kyu Hou Minho Jeung Heejoon Jung Paper Prototyping Nov. 1, 2005 EVR #3 The Fast and Easy Way to Design and Refine User Interfaces by Carolyn Snyder

2. Trinity Team 2/15 Contents 1. What is Paper Prototyping? 2. Usefulness of PP 3. Process of Usability Study(1,2) 4. Role of Usability Testing 5. Task Creation Process 6. What Paper is (& Isn’t) Good For? 7. Issues on PP 8. Pros & Cons 9. User-Centered Design: MathWorks 10. Applicable to the Studio Project 11. Summary

3. Trinity Team 3/15 Paper Prototyping (PP) is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person “playing computer,” who doesn’t explain how the interface is intended to work. (p.4) 1. What is Paper Prototyping? cf. compositions, wireframes, storyboards

4. Trinity Team 4/15 2. Usefulness of PP July 2002 survey of usability professionals

5. Trinity Team 5/15 What HappensWhoTime Kickoff meeting-Discuss goals, risks, and concerns -Agree on user profile -Determine “core team” -Set schedule All stakeholders3 hours User recruitmentFind people who match the user profile and schedule them 1-2 people if you’re doing this in-house; some companies outsource this Depends; a 2 to 3- week lead time is typical Task design- Create the tasks to be used in usability testing Core team plus anyone with important input about what gets tested 3-5 hours Prototype creation and walkthroughs -List interface elements that are needed to support the tasks -Split up the work -Hold periodic walk-throughs -Formal run-through without real users prior to usability testing Core team; others can come and go as schedules allow ½ to 5 days total 3. Process of Usability Study(1) Core team : Designer figure out what it should do or be Developer makes it happen

6. Trinity Team 6/15 3. Process of Usability Study(2) What HappensWhoTime usability testing and iterative refinement -Perform usability tests (most last 1-2 hours) -List issues after each test -Revise the prototype before the next test All stakeholders2 days total Prioritizing issues and action plan -Prioritize unresolved issues -Discuss top issues and possible solutions -Create action plan to address issues -Ticket issues Everyone who attended one or more usability tests cab help prioritize; the rest is up to the development manager and/or team 3 hours Communications of results As needed: -Write summary of “top 10” issues -Post results on intranet -Write report -Give presentation of results -Create a walkthrough video -Create an interface spec 1-2 team members (often, but not necessarily, the usability specialists) 1 hour to several days depending on the activities

7. Trinity Team 7/15 4. Role of Usability Testing -User: interacting directly with the prototype -Facilitator: conducts the test session -Computer: simulate how the interface behaves without explaining how it is supposed to work -Observer: note-taking FacilitatorUser 1. What are you trying to do right now? I want to transfer this call to Mike in Accounting. 2. What do you think the next step is? I want to dial 53385, but not lose this guy I’m talking to. 3. (A small hint): Do you see anything that might help you? I’m not sure… If dial the extension, won’t it just beep? 4. (A big hint): What do you think the Flash button does? I was wondering about that, but I was afraid it would hang up.

8. Trinity Team 8/15 5. Task Creation Process Good Usability Tasks 1.List the User Goals 2.List Your Questions 3.Prioritize Your Questions 4.Create a Task 5.Number and Order the Tasks 6.Write Instructions for Users 7.Reality-Check Your Tasks Goals/output Inputs/assumptions: Steps: Time for expert: Instructions for user: Notes: Task#:

9. Trinity Team 9/15 6. What paper is (& Isn’t) Good For 4 Dimensions -Breadth (What PPs won’t find) -Depth (What PPs will likely find) -Look (What PPs may find) -Interaction (What PPs won’t find) Kind of PrototypeLookInteractionDepth Working versionMedium-highHighLow-high Slide slowMedium-highMediumLow-medium Paper prototypeLow-mediumLowMedium-high DENIMLowMediumLow-medium

10. Trinity Team 10/15 7. Issues on PP -Validity: research, case studies -Bias: user, task, facilitator, etc. -Professionalism: appropriate expectation -Resource Constraints: time concerns

11. Trinity Team 11/15 8. Pros & Cons Pros –Fast way to find a variety of problems in an interface –Allows an interface to be refined before implementation begins –Encourages creativity from development team and users Cons –Does not produce any code –Does not find some functional issues –Looks unprofessional due to unfinished design

12. Trinity Team 12/15 9. User-Centered Design: MathWorks Project objective –Developing software based on user-centered design Design Steps –Contextual interviewing Watching and interviewing customers for collecting issues –Usability testing of paper prototypes Sketching paper prototypes Taking usability tests involved in developers and users –Usability testing of working software Retesting design after implementation Conducting an affinity diagramming exercise, grouping issues that arouse during the test –Usability feedback from users

13. Trinity Team 13/15 10. Applicable to the Studio Project Korean

14. Trinity Team 14/15 11. Summary - The fast and easy way to design and refine user interfaces - Solve design problems and user's needs before implementation - Reduce the arguing on interfaces - Minimization of the redesign: save time & money -Get user feedback early, communicate better and make creative -Applicable to VUI and GUI on Studio Project

15. Trinity Team 15/15 Thank you!

16. Trinity Team 16/15 Paper Prototyping Materials Common office supplies Prototype with removable tape and transparency White poster board Black paper Unlined Index Card Markers, pens Highlighter Scissors Transparent Tape (Scotch tape, invisible tape) Restickable glue Removable Tape Transparency Transparency pens, wet erase Correction Fluid Fome-Cor board Backup

17. Trinity Team 17/15 Prototype Interface Widgets Tabbed Dialog Boxes Selection bar/highlight Radio buttons/checkboxes Text Fields Drop-down Lists Disabled (“grayed-out”) controls Cursors Backup

18. Trinity Team 18/15 Prototype Interface Widgets -Tooltips/mouseovers -Rollover/pop-up menus -Beeps -Drag & drop -Right mouse menus -Sliders, progress indicators -Animation and video -Web site links -Scrolling Backup

19. Trinity Team 19/15 Evaluation questionPPHTML Does the tool need proficiency?NoYes Can everyone involved in the design process?YesNo Can the design change very fast?YesNo Is there any possibility users may focus on the look rather than function and flow of the interface? LowHigh How much time does it take when several iterations are conducted? Not much Much Paper Prototyping (PP) VS. HTML Backup

20. Trinity Team 20/15 References –http://www.uie.com/articles/prototyping_tips –http://www.uie.com/browse/paper_prototyping –http://www.paperprototyping.com –http://www.snyderconsulting.net –http://www.useit.com/alertbox/20030414.html –http://dub.washington.edu/denim Backup