2. TUR - Prototyping

4. How to have a satisfied user? What are the sources of user satisfaction? What are the sources of user satisfaction? Where the user satisfaction can be influenced? Where the user satisfaction can be influenced? What is the usual course of events? What is the usual course of events? NUR - Prototyping (low fidelity) (3)

8. Dilemma You can’t evaluate design until it’s built You can’t evaluate design until it’s built –But… After building, changes to the design are difficult After building, changes to the design are difficult Simulate the design, in low-cost manner Simulate the design, in low-cost manner

9. How and when to test user interface

10. 9 Rapid Prototyping Methods Non-computer vs. computer-based Typically earlier in processTypically later in process

11. 10 Non-Computer Methods Goal: Want to express design ideas and get quick & cheap opinions on system Methods?

12. 11 Sketches, Mock-ups Paper-based “drawings” of interfaces Good for brainstorming Focuses people on high-level design notions Not so good for illustrating flow and the details Quick and cheap -> helpful feedback

13. 12 Physical Mock-Ups Wooden blocks and labels - device control (Three versions of a hand-held controller)

14. 13 Computer Methods Simulate more of system functionality – –Usually just some features or aspects – –Can focus on more of details – –Typically engaging – –Danger: Users are more reluctant to suggest changes once they see more realistic prototype

15. 14 Prototyping Tools - Drawing Pgms. Draw/Paint programs – –Draw each screen, good for look Thin, horizontal prototypePhotoShop, Corel Draw,... IP Address CancelOK

16. 15 Prototyping Tools - Scripting Scripted simulations/slide shows – –Put storyboard-like views down with (animated) transitions between them – –Can give user very specific script to follow Often called chauffeured prototyping – –Examples: PowerPoint, Hypercard, HTML, Macromedia Director

17. Powerpoint Transition Controls Mouse click actions: Next slide Previous slide First slide Last slide Last slide viewed End show Custom show URL File

18. Sketching and Prototyping Early design Late design Brainstorm different representations Choose a representation Rough out interface style Sketches & low fidelity paper prototypes Task centered walkthrough and redesign Fine tune interface, screen design Heuristic evaluation and redesign Usability testing and redesign Medium fidelity prototypes Limited field testing Alpha/Beta tests High fidelity prototypes Working systems

19. Sketches & Low Fidelity Prototypes Paper mock-up of the interface look, feel, functionality Paper mock-up of the interface look, feel, functionality –quick and cheap to prepare and modify Purpose Purpose –brainstorm competing representations –elicit user reactions –elicit user modifications / suggestions

20. Sketches –drawing of the outward appearance of the intended system –crudity means people concentrate on high level concepts –but hard to envision a dialog’s progression Computer Telephone Last Name: First Name: Phone: Place CallHelp

21. E-SHOP…….BUYING BABY STROLLER EXAMPLE NUR - Prototyping (low fidelity) (20)

24. Sketches & Low Fidelity Prototypes Paper mock-up of the interface look, feel, functionality Paper mock-up of the interface look, feel, functionality –quick and cheap to prepare and modify Purpose Purpose –brainstorm competing representations –elicit user reactions –elicit user modifications / suggestions

25. Sketches –drawing of the outward appearance of the intended system –crudity means people concentrate on high level concepts –but hard to envision a dialog’s progression Computer Telephone Last Name: First Name: Phone: Place CallHelp

28. Scan the stroller -> Change the color -> Place the order -> Initial screen

29. Scan the shirt -> Touch previous item -> Delete that item-> Alternate path…

34. Paper mock-up

36. Tools for creation of paper prototypes

40. Složitější příklad PP

41. Storyboarding Spotlight: an interactive foam core and paper sketch/storyboard Credit: Sue-Tze Tan, Dept Industrial Design, University of Washington Spotlight: an interactive foam core and paper sketch/storyboard Credit: Sue-Tze Tan, Dept Industrial Design, University of Washington From Design for the Wild, Bill Buxton (in press) with permission

42. WHERE IS THE USER? Up to now only technicalities were described NUR - Prototyping (low fidelity) (41)

43. Methods for involving the user At the very least, talk to users At the very least, talk to users –surprising how many designers don’t! Contextual interviews + site visits Contextual interviews + site visits –interview users in their workplace, as they are doing their job –discover user’s culture, requirements, expectations,…

44. User involvement User should be involved in all stages of the design User should be involved in all stages of the design Prototyping (plus testing) is an integral part of the design Prototyping (plus testing) is an integral part of the design NUR - Prototyping (low fidelity) (43)

45. Methods for involving the user Explain designs Explain designs –describe what you’re going to do –get input at all design stages all designs subject to revisionall designs subject to revision Important to have visuals and/or demos Important to have visuals and/or demos –people react far differently with verbal explanations –this is why prototypes are critical

47. Na počítač trochu pomalé. Ale funguje to!.000001 MHz

48. 47 Prototyping Technique Wizard of Oz - Person simulates and controls system from “behind the scenes” Wizard of Oz - Person simulates and controls system from “behind the scenes” –Use mock interface and interact with users –Good for simulating system that would be difficult to build Can be either computer-based or not

49. 48 Wizard of Oz Method: Method: –Behavior should be algorithmic –Good for voice recognition systems Advantages: Advantages: –Allows designer to immerse oneself in situation –See how people respond, how specify tasks

50. Wizard of Oz A method of testing a system that does not exist A method of testing a system that does not exist –the listening typewriter, IBM 1984 Dear Henry What the user sees Speech Computer From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.

51. Wizard of Oz A method of testing a system that does not exist A method of testing a system that does not exist –the listening typewriter, IBM 1984 What the user sees The wizard Speech Computer Dear Henry From Gould, Conti & Hovanvecz, Comm ACM 26(4) 1983.

52. Wizard of Oz Human ‘wizard’ simulates system response Human ‘wizard’ simulates system response –interprets user input according to an algorithm –controls computer to simulate appropriate output –uses real or mock interface –wizard sometimes visible, sometimes hidden “pay no attention to the man behind the curtain!”“pay no attention to the man behind the curtain!” good for: good for: –adding simulated and complex vertical functionality –testing futuristic ideas

53. 52 Review of Prototyping Concepts (Summary) Low-fidelity Medium-fidelityHigh-fidelity Sketches, mock-ups Slide shows Simulations System prototypes Scenarios Storyboards Wizard of Oz

54. Mummy - construction site inspection Paper prototype Electronic prototype (HTML, PPT)

55. NUR - Prototyping (low fidelity) (54) Mummy: construction site inspection Inspector Construction site Mummy Server construction plans Remote expert Collaboration Adaptation

56. NUR - Prototyping (low fidelity) (55) Mummy: construction site inspection

57. Paper prototype

58. NUR - Prototyping (low fidelity) (57) Electronic prototype HTML prototype PPT prototype

59. NUR - Prototyping (low fidelity) (58) What must be done before User research (D1) Problem description, UI modelling – –HTA, STN

60. NUR - Prototyping (low fidelity) (59) MS PowerPoint Vector graphics Hyperlinks Embedded videos, images Animations

61. NUR - Prototyping (low fidelity) (60) Electronic program guide Visual design - Gimp Photographs Snapshost series + JavaScript

62. NUR - Prototyping (low fidelity) (61) EPG - prototype showcase... simple approach

63. NUR - Prototyping (low fidelity) (62)

64. NUR - Prototyping (low fidelity) (63)

65. NUR - Prototyping (low fidelity) (64)

66. NUR - Prototyping (low fidelity) (65)

67. NUR - Prototyping (low fidelity) (66)

68. Some sophisticated user interfaces

69. Representation, navigation …. The user should be able to know always what to do, where s/he is in a structure, should always understand to the data presentation etc…… The user should be able to know always what to do, where s/he is in a structure, should always understand to the data presentation etc…… NUR - Prototyping (low fidelity) (68)

70. Which representation is best? depends heavily on task depends heavily on task What is precise value? How does the performance now compared to its peak? How does performance change over time? Windows 95 System Monitor

71. Detailed navigation plus precision General navigation plus orientation Where am I? Windows NT Hover Game

72. Inxight Magnifind

73. PhotoFinder University of Maryland Human Computer Interaction Laboratory http://www.cs.umd.edu/hcil/

74. Table Lens Inxight Table Lens

75. Table Lens Inxight Table Lens

76. Infinite Zoom Pad++:Graphical Sketchpad for Expt al Journal of Visual Languages and Computing 7, 1996

77. Fisheye Menus Bederson, B.B. (May 2000) University of Maryland www.cs.umd.edu/hcil/fisheyemenu/

78. Saul’s focus (local user) Carl’s focus Andy’s focus Fisheye Text groupware Greenberg, Graphics Interface

79. Perspective Wall Leung and Apperly TOCHI’94 Mackinlay / Robertson / Card: Proc ACM CHI'91

80. Document Lens Robertson, Mackinlay ACM UIST 1993

81. Data Mountain Robertson / Czerwinski / Larson / Robbins / Thiel / van Dantzich Data Mountain: Using Spatial Memory for Document Management Proc ACM UIST’98

82. www.research.microsoft.com/ui/TaskGallery/ Task Gallery

83. Cone Trees Robertson / Mackinlay / Card Cone Trees: Animated 3D Visualizations of Hierarchical Information. Proc ACM CHI'91

84. Hyperbolic Lens Xerox Parc - Inxight

85. Thank you for your attention