1. Design, Prototyping, and Construction, Reece, Rogers, Sharp (2002). Beyond Human-Computer Intraction. Ch 8. Vladimir, Sajay, Nikhil, Andy

2. Discussion Outline Overview Book Content  8.1 Introduction  8.2 Prototyping and construction + Prototyping Tools  8.3 Conceptual Design + Patterns + 8.5 Tool Support  8.4 Physical Design

3. Overview Prototyping and construction Conceptual design Physical design Tool support

4. Prototyping and construction What is a prototype? Why prototype? Different kinds of prototyping low fidelity high fidelity Compromises in prototyping vertical horizontal Construction

5. What is a prototype? A prototype is a limited representation of a design that allows users to interact with it and explore its suitability. Prototyping Ford GT40

6. A Prototype in Interaction Design screen sketches Storyboard simulating the use of a system wood/ foam/ clay model cardboard mock-up software with limited functionality (VB)

7. Why prototype? Evaluation and feedback Stakeholders can see, hold, interact with a prototype more easily Team members can communicate effectively Can be used to test out ideas It encourages reflection on the design Prototypes help answer questions, and in choosing between alternatives

8. What to prototype? Technical issues Work flow, task design Screen layouts and information display Difficult, controversial, critical areas

9. Low-fidelity Prototyping Uses a medium which is unlike the final medium, e.g. paper, cardboard Is quick, cheap and easily changed Examples: sketches of screens, task sequences, etc ‘Post-it’ notes storyboards ‘Wizard-of-Oz’

10. Storyboards A story board is a series of sketches/ photographs used early in the design showing how users would perform a task using the device. Story boards are used with scenarios to allow the design group or audience to visualize the use of the product.

11. Sketching Sketching is an important low-fidelity prototyping method A very basic representation of the interface roughly drawn on a piece of paper etc.. Typical UI sketch

12. Index cards each card representing one screen Used in website design Using index cards

13. ‘Wizard-of-Oz’ prototyping The user thinks they are interacting with a computer, but a developer is responding to output rather than the system. Usually done early in design to understand users’ expectations >Blurb blurb >Do this >Why? User

14. High-fidelity prototyping Uses materials that you would expect to be in the final product. Prototype looks more like the final system than a low-fidelity version. High-fidelity software prototype environments include Macromedia Director, Visual Basic, and Smalltalk. Danger is that users think they have a full system

15. Compromises in prototyping For software-based prototyping there maybe a slow response, sketchy icons, limited functionality etc. Two common types of compromise are ‘horizontal’: provide a wide range of functions, but with little detail ‘vertical’: provide a lot of detail for only a few functions Compromises in prototypes mustn’t be ignored. Developers should consider all alternatives.

16. Construction Taking the prototypes (or learning from them) and creating a whole Quality must be attended to: usability, reliability, robustness, maintainability, integrity, portability, efficiency, etc Dilemma- Evolutionary prototyping ‘Throw-away’ prototyping

17. DENIM DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming. http://guir.berkeley.edu/projects/denim/ Demo of DENIM http://guir.berkeley.edu/projects/denim/media/denim_300.ram

18. Prototyping Tools Visual development tools Most popular prototyping tools:  Overall: Visio (overall)  Windows software: VisualBasic  Web: Visual web editors (e.g. FrontPage, DreamWeaver, GoLive) http://guuui.com/issues/01_03_02.asp http://guuui.com/issues/01_03_02.asp  Hardware: AutoCAD, ProEngineer

19. Prototyping with Visio Advantages:  Prototype can be converted to html  Prototype can be shared online  Anything can be prototyped Disadvantages:  No input  Little user-prototype interaction Stencils  Window UI collection  “Visual Vocabulary” (workflow) “Visual Vocabulary”  PoorButHappy Web Elements PoorButHappy Web Elements Automating Diagrams with Visio (scripting) Automating Diagrams with Visio

20. Prototyping with VisualBasic Quickly design interactive UI prototype: 1. Create new project 2. Design UI – Create windows (forms) – Add controls (button, label, text box, …) – Set properties (color, caption, size, …) 3. Add interactivity – Write code 4. Run prototype

21. Prototyping with VisualBasic 1. Create new project

22. Prototyping with VisualBasic 2. Design UI

23. Prototyping with VisualBasic 3. Add functionality

24. Prototyping with VisualBasic 4. Run prototype

25. Prototyping with VisualBasic Advantages:  Object-oriented  Very fast  Predefined objects (forms, controls, dialog boxes)  VB gives hints on code use  codes  Great MSDN library collection  Runtime code execution  Execute parts of code only (specific lines)  Line-by-line debugging  Useful, specific error

26. Misc Tools: Cross Platform Mozilla (live, IDE), WxPython, WxWindowsliveIDEWxPythonWxWindows RealBasic Java Solutions  Jazz, Zoomable UI Http://www.cs.umd.edu/hcil/jazz/  SILK, handwriting UI  Standard Toolkits: Swing, AWT Smalltalk Deriviant SqueakSqueak  Graphical, cross platform Graphical, cross platform  Innovative and well-bred

27. Conceptual Design “a set of integrated ideas… about what it should do, behave, and look like” Metaphors  Structure  Relevance (coverage)  Understandability  Extensibility Questions: function/use, relations, data Mental Model Work  Phaser Task, Byrne & Bovair (1995). Learning better with mental model.Byrne & Bovair (1995) Computational Mental Models  ACT-R ACT-R  SOAR

28. Interaction Paradigms Paradigms Ubiquitous Computing Pervasive Computing Wearable Computing Latent Needs: Nobody knew they needed a Palm Pilot until it existed. New stuff is possible! Directions Eye tracking. Gaze tracking. Gestures. VR. Augmented Cognition. Vision Overlays. Alternate Input Methods. Speech Recognition. Multi-user interfaces. Focus/Context. Tangible/Graspable.Input Methods Tangible/Graspable

29. Scenarios in Conceptual Design Task-based For cooperation/communication (shared vocabulary) Plus and Minus scenarios  Cast the most positive and negative consequences

30. 8.3.5 Myers 1995 – Tool Functions Specification -> interface  Assist implementation Insure usability Enable non- programmers Evaluate and iterate Enable customization Portability (Platform, Device, Footprint) Why?  Early prototyping enables usability testing when it can matter.  Facilitates communication.  Software takes too long.

31. Patterns In General Why?  Common user expectations for functionality  “Standardization?”  Abstract Planning The directory Welie.com Pictured  Teaser Menu Teaser Menu

32. Using Patterns to Improve Web Navigation http://www8.org/w8-papers/5b-hypertext- media/improving/improving.html http://www8.org/w8-papers/5b-hypertext- media/improving/improving.html Pattern Intent  Set-Based Navigation: Organize the information in Sets of related information items. Provide intra-set navigation capabilities  News: Allow easy access to new information.  Landmark: Provide direct access to critical sub-systems.  Shopping Basket: Keep track of user selections during navigation, making these selections persistent to process them when the user decides to.  Active Reference: Define indexes as active orientation tools in sub-areas of the whole hyperspace. Make these indexes co-exist with target objects.  Node in Context: Customize representation of objects according to the sets within which they are being accessed

33. Personas With a heterogenous user population, conceptual models may vary across users.  Goals, background, skill CNet Example  Bob the Browser, Sally the Shopper, etc. STCSig

34. Interface elements (Physical) design Hmm…no lets recap first!! What is a prototype?  From a paper-based story board to a complex piece of software Why use a prototype?  Useful in discussing ideas (with stakeholders)  Put user requirements in some shape  Do user testing Types of Prototypes  Low Fidelity e.g., Storyboarding, Sketching, Index cards etc.  High Fidelity e.g., software system developed in VB Compromises made  Designed with key issues in mind  Low fidelity is a compromise in itself  Functionality vs. depth

35. OK, We heard about Prototyping then Conceptual models. Where do we go from here!!! WE DESIGN!!!

36. Design Design = Balance  Balance between User and designer Functionality and usability requirements Give me an example please!! Defibrillator (Box 8.2)- You need to experience it to know how the experience is! Jeff Hawkins carried a piece of wood about the size of a Palm Pilot he imagined would be. PDA (Personal Digital Assistant)  Screen real estate is small  Number of function keys available is small

37. Guidelines for interface design Consistency  File menu at the top left  Confirmation for closing a file without saving  Style guides to communicate branding and corporate image Simplicity  Reduce memory overloads by providing options. Feedback  “Printing completed”  Informative feedback and not terse technical error messages Robustness  Prevent errors Error handling  Forgiving innocent user actions/errors  Allowing for reversal of erroneous actions Flexibility  Provide shortcuts

38. Menu Design Length of the menu Order of the items to be presented Menu structure e.g., sub- menus vs dialog boxes Categories and their unambiguous names used to group menu items Group differentiation e.g. different colors, dividing lines? Physical constraints or user limitations to be accommodated

39. Menu Example www.oppenheimerfunds.com

40. Icon Design Good icon design is difficult Meaning of icons is cultural and context sensitive Some tips:  always draw on existing traditions or standards  concrete objects or things are easier to represent than actions For example: http://www.labware.com/products- lims.html http://www.labware.com/products- lims.html

41. Screen design How to split across screens moving around within and between screens how much interaction per screen? serial or workbench style? Individual screen design white space: balance between enough information/interaction and clarity grouping items together: separation with boxes? lines? colors? Task analysis as a starting point Each screen contains a single simple step Frustration if too many simple screens Keep information available: multiple screens open at once

42. Designing for the web Where am I? What’s here? How did I get here? Where can I go from here?  Examples: www.cnn.com, http://www.aftonbladet.se/, www.golf.comwww.cnn.comhttp://www.aftonbladet.se/ www.golf.com

43. Branding!!! CONTENT - Most critical - precise and short - use headlines - allow for scanning NAVIGATION - Order of the items to be presented - Menu structure e.g., sub- menus vs dialog boxes - Categories and their unambiguous names used to group menu items - Group differentiation e.g. different colors, dividing lines? - Physical constraints or user limitations to be accommodated

44. Information Display Is it relevant? Is it absolutely needed? Where else can it come? How are other mediums displaying it?

45. More Tool Support (Myer et al, 2000) Window managers Toolkits Event languages Interface builders Component systems Scripting languages Hypertext Object oriented programming