1 / 45

Vladimir, Sajay, Nikhil, Andy

Design, Prototyping, and Construction, Reece, Rogers, Sharp (2002). Beyond Human-Computer Intraction. Ch 8. Vladimir, Sajay, Nikhil, Andy. Discussion Outline. Overview Book Content 8.1 Introduction 8.2 Prototyping and construction + Prototyping Tools 8.3 Conceptual Design + Patterns

alaina
Download Presentation

Vladimir, Sajay, Nikhil, Andy

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. Using index cards • Index cards each card representing one screen • Used in website design

  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 User >Blurb blurb >Do this >Why?

  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 • Hardware: AutoCAD, ProEngineer

  19. 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) PoorButHappy Web Elements Automating Diagrams with Visio (scripting) Prototyping with Visio

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

  21. Prototyping with VisualBasic • 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. 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 Prototyping with VisualBasic

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

  27. “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. Computational Mental Models ACT-R SOAR Conceptual Design

  28. 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. Interaction Paradigms

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

  30. 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. 8.3.5 Myers 1995 – Tool Functions

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

  32. Using Patterns to Improve Web Navigation • http://www8.org/w8-papers/5b-hypertext-media/improving/improving.html • PatternIntent • 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

  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.com

  43. Branding!!! • 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 CONTENT - Most critical - precise and short - use headlines - allow for scanning

  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

More Related