ITM 734 Introduction to Human Factors in Information Systems

1. ITM 734Introduction to Human Factors in Information Systems Prototyping the User Interface: Sketches, storyboards, mock-ups, scenarios and tools Cindy Corritore cindycc@gmail.com

2. Design Artifacts • How do we express early design ideas? • No software coding at this stage • Key notions • Make it fast!!! • Allow lots of flexibility for radically different designs • Make it cheap • Promote valuable feedback *** Facilitate iterative design and evaluation ***

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

4. Four Considerations for Prototyping 1. Representation • How is the design depicted or represented? • Can be just textual description or can be visuals and diagrams 2. Scope • Depth and breadth of prototype • How much of overall design is prototyped

5. Four Considerations for Prototyping 3. Executability • Can the prototype be “run”? • If coding, there may be periods when it can’t 4. Maturation • What are the stages of the product as it comes along? • Revolutionary - Throw out old prototype • Evolutionary - Keep changing previous prototype

6. Prototyping Terminology • Early prototyping, Late prototyping • Low-fidelity prototype, High-fidelity prototype • Horizontal prototype • Very broad, does or shows much of the interface,but does this in a shallow manner • Example: all first and second-level menu commands • Vertical prototype • Fewer features or aspects of the interface simulated,but done in great detail • Possibly even execution of a few important actions

7. Rapid Prototyping Methods • Non-computer vs. computer-based Typically earlier in process Typically later in process

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

9. 1. Design Description • Can simply have a textual description of a system design • Obvious weakness – it’s so far from eventual system • Doesn’t do a good job representing visual aspects of interface • Not nearly enough • OK for ideation • Not OK as a way to get meaningful feedback

10. The main screen of our interface will have a blueprint of one of the floors of the building. Above the blueprint it has an arrow up and below the blueprint it has an arrow down. By pressing one of these arrows the user can select the upper floor or the bottom floor respectively. Once the user has chosen the floor where he wants to switch the light on or off, he can turn all the lights on the floor on or off by pressing a bulb which is located on the bottom left corner of the screen. However, if the user wants to switch one light on or off within a room, the user has to select the room where he wants to switch the lights by pressing the room. Once the room has been pressed its blueprint will zoom and the entire screen will consist of that room. Now, the user can switch all lights on or off in that room by pressing the bulb on the bottom left corner, or he can switch one single light by pressing that particular light. The user can go back to the main screen by pressing the Back button which is located on top left corner of the screen. If the user does not go back to the main screen within five minutes the system will automatically go back. All the changes of the light status will be reflected on the blueprints. Also the user will be able to control the individual lights from within rooms by pressing the buttons for controlling those individual light in the room.

11. 2. Storyboards, 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. 3. Physical Mock-Ups • Wooden blocks and labels - device control (Three versions of a hand-held controller)

14. More Physical Mock-Up • Styrofoam and Buttons Spring GT 2004 project “Golf Caddy” by: Chris Hamilton Linda Kang Luigi Montanez Ben Tomassetti

15. 4. Storyboarding • Pencil and paper simulation or walkthrough of system look and functionality • Use sequence of diagrams/drawings • Show key snap shots • Quick & easy

16. Example • Sketches solves two problems with use of more fully-developed prototypes • User reluctance to suggest changes to what might look like a finished product • User focus too much on details (graphic design, etc) of UI rather than big picture

17. 5. Scenarios (aka Use Cases) • Hypothetical or fictional situations of use • Typically involving some person, event, situation and environment • Provide context of operation • Often in narrative form, but can also be sketches or even videos • Also used in cognitive walkthrough

18. Scenario Susan walks into the dark house from the garage. She sees the illuminated light switches near the door and chooses the red switch, which is color-coded for “all on” for the current room, which is the laundry room. The lights illuminate the security alarm, which began emitting an auditory warning when the door was opened. Susan walks to the Elan screen and touches it, revealing the top-level menu. She selects the “security” tab, and enters her code at the prompt. The security system is then disarmed and it displays a message saying “security system off”.

19. Scenario Utility • Engaging and interesting • Allows designer to look at problem from another person’s point of view • Facilitates feedback and opinions • Can be very futuristic and creative

20. 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 • become attached to them as put more work into them

21. 1. Prototyping Tools - Drawing Pgms. • Draw/Paint programs • Draw each screen, good for look IP Address OK Cancel Thin, horizontal prototype PhotoShop, Corel Draw,...

22. 2. Prototyping Tools - Scripting • Scripted simulations or 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

23. Eg. Powerpoint Transition Controls Mouse click actions to move across scenarios: Next slide Previous slide First slide Last slide Last slide viewed End show Custom show URL File

24. Eg. Scripting Example Ctrl-p

25. Eg. Macromedia Director • Combines media with Lingo scripting language (timeline) • Concerned with place and time • Objects positioned in space on “stage” • Objects positioned in time on “score” • Easy to transition between screens • Can export as executable or as Web Shockwave file

26. 3. Prototyping Tools - Interface Builders • Tools for laying out windows, controls, etc. of interface • Have build and test modes that are good for exhibiting look and feel • Generate code to which back-end functionality can be added through programming • Examples: Visual Basic, Delphi, UIMX, Flash ...

27. Visual Basic UI Controls Controlproperties Design area

28. 4. Other Prototyping Tools • Denim - http://dub.washington.edu/denim/ • Suede – wizard of oz prototyping tool for speech interfaces - http://guir.berkeley.edu/projects/suede/index.shtml • Azure – free trial 30 days - http://www.axure.com/demo.aspx - movie http://www.axure.com/products.aspx - trial

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

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

31. Review of Prototyping Concepts Late Early Horizontal Medium-fidelity High-fidelity Low-fidelity Vertical Vertical Sketches, mock-ups Slide shows System prototypes Scenarios Storyboards Simulations Wizard of Oz

32. Examples • 2005 • Team 1 - html http://otis.creighton.edu/~734team1_05/Otis Website/opendoor • Team 3 – html http://otis.creighton.edu/~734team3_05/present/index.html • Team 2 – ppt (slide 12+)