Lecture 11.pptHuman Computer Interaction
- 3. Prototyping
- 4. What is a prototype? • In other design fields a prototype is a small-scale model: – a mini car – a mini building or town
- 5. What is a prototype? • In interaction design it can be – a series of screen sketches – a storyboard • cartoon-like series of scenes – a PowerPoint slide show – a video simulating the use of a system – a lump of wood • e.g. hand-held computer – a cardboard mock-up(full-sized scale model of a structure) – a piece of software with limited functionality • written in the target language or in another language
- 6. Why prototype? • evaluation and feedback – central to interaction design – Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing • communication among team members • validation of design ideas • encourages reflection – very important aspect of design • choosing between alternatives
- 7. What to prototype? • Technical issues • Work flow, task design • Screen layouts and information display • Difficult, controversial, critical areas
- 8. 1-Low-fidelity Prototyping • simple medium – e.g. paper, cardboard – often different from the final medium • flexible – changes quick, cheap and easy • examples – sketches of screens, task sequences, etc – ‘Post-it’ notes – storyboards – ‘Wizard-of-Oz’
- 9. Storyboards • often used with scenarios – more detail – chance to role play • series of sketches – shows how a user might progress through a task using the device • used early in design – cheap and simple – validation of design ideas – feedback from stakeholders
- 10. Story Board
- 11. Activity • Produce a storyboard that depicts how to fill a car with gas (petrol).
- 12. Sketching • important to low-fidelity prototyping • drawing skills are not critical – symbols to indicate tasks, activities, objects – flowcharts for time-related issues – block diagrams for functional components • computer support – some drawing and brainstorming programs have functions that help with sketching – may make things more complicated than necessary
- 13. Sketching
- 14. Index Cards • small cards (3 X 5 inches) – usually lined • each card represents one screen – multiple screens can be shown easily on a table or the wall • thread or lines can indicate relationships between screens – sequence – hyperlinks • often used in website development
- 16. >Blurb blurb >Do this >Why? User ‘Wizard-of-Oz’ prototyping • simulated interaction – the user thinks they are interacting with a computer, but a developer is providing output rather than the system • user expectations – usually done early in design http://musicman.net/oz.html
- 17. Activity: ‘Wizard of Oz’ Problems • identify some problematic aspects with this approach – for novice users of the system – for experienced users of the system – for the developer providing the system’s responses
- 18. 2-High-fidelity prototyping • choice of materials and methods – similar or identical to the ones in the final product • looks more like the final system – appearance, not functionality • common development environments – Macromedia Director, Visual Basic, Smalltalk, – Web development tools • misled user expectations – users may think they have a full system
- 19. Vertical vs Horizontal Prototyping • Where the compromises are made ? • For software based prototyping maybe there is a slow response ? sketchy icons ? • limited functionality ? • Horizontal • – Wide range of function but with little detail • Vertical • – A lot of detail for only a few functions • Compromises can't be ignored – – importance of engineering
- 21. Compromises in prototyping • all prototypes involve compromises • software-based prototyping – slow response – sketchy icons – limited functionality • two common types of compromise – ‘horizontal’: provide a wide range of functions, but with little detail – ‘vertical’: provide a lot of detail for only a few functions • compromises should not be ignored – indicates the need for engineering
- 22. Construction • creation, manufacturing of the final system – based on experiences and feedback gathered from the prototypes • engineering – evolutionary, ‘throw-away’ prototyping – feasibility, materials, processes, economic and other considerations • quality – usability, reliability, robustness, maintainability, integrity, portability, efficiency, etc
- 23. Conceptual Design • transformation of user requirements/needs into a conceptual model • stepwise refinement – iterate, iterate, iterate • consideration of alternatives – prototyping helps
- 24. Definition ‘Conceptual Design’ “a description of the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended”
- 25. Three perspectives for a conceptual model • interaction mode • how the user invokes actions when interacting with the device. – instructing, conversing, manipulating and navigating, and exploring and browsing • interaction paradigm • design philosophies that help you think about the product being developed • Metaphor • to combine familiar knowledge with new knowledge in a way that will help the user understand the system
- 26. Interaction Mode • how the user invokes actions – activities by the user and the system’s responses • activity-based – instructing, conversing, manipulating and navigating, exploring and browsing. • object-based – structured around real-world objects
- 27. Interaction Paradigm • coherent collection of interaction methods • desktop paradigm, – WIMP interface (windows, icons, menus and pointers), • ubiquitous computing • pervasive computing • wearable computing • mobile devices • . . .
- 28. Interaction Paradigm • Thinking about environmental requirements is particularly relevant when considering interaction paradigms. For example, consider the shared calendar in the context of the following paradigms: • Ubiquitous computing. Combining some of our earlier discussions, we could perhaps imagine the shared calendar as being like a planner on the wall, but in an electronic form with which people could interact. • Pervasive computing. Carrying around our own copy of the shared calendar builds directly upon current expectations and experience of personal calendars. We can imagine a system that allows individuals to keep a copy of the system on their own palmtop computers or PDAs, while also being linked to a central server somewhere that allows access to other information that is shared.
- 29. Metaphors • interface metaphors – combine familiar knowledge with new knowledge – help the user understand the product • three steps towards a metaphor – understand functionality, – identify potential problem areas, – generate metaphors
- 30. Evaluation of a metaphor • How much structure does it provide? • How relevant is it to the problem? • Is it easy to represent? • Will the audience understand it? • How extensible is it?
- 31. Expanding the conceptual model • functionality – task allocation • What will the product do and what will the human do? • relationship of functions – sequential or parallel – categorizations • all actions related to one particular aspect • information – data required to perform the task – transformation of data by the system
- 32. Scenarios in Conceptual Design • express proposed or imagined situations • used throughout the design process in various ways – scripts for user evaluation of prototypes – concrete examples of tasks – as a means of co-operation across professional boundaries • ‘plus’ and ‘minus’ scenarios – exploration of extreme cases
- 33. Scenarios in Conceptual Design • An interesting idea also proposed by Bodker is the notion of plus and minus scenarios. • These attempt to capture the most positive and the most negative consequences of a particular proposed design solution thereby helping designers to gain a more comprehensive view of the proposal.
- 34. ok
- 35. Prototypes in Conceptual Design • evaluation of emerging ideas – user feedback, feasibility – choice of methods and materials • iterative prototyping – low-fidelity prototypes early on – high-fidelity prototypes later • evolutionary prototyping – early prototypes are gradually enhanced and augmented • appearance • functionality
- 36. Physical Design • more concrete, detailed issues of designing the interface – although inaccurate, the term is also used for software-based systems • iteration physical /conceptual design • guidelines for physical design – Nielsen’s heuristics – Shneiderman’s eight golden rules – Styles guides: commercial, corporate • decide ‘look and feel’ for you • widgets prescribed, e.g. icons, toolbar
- 37. Shneiderman’s 8 Golden Rules 1. Strive for consistency 2. Enable frequent users to use shortcuts 3. Offer informative feedback 4. Design dialogs to yield closure 5. Offer error prevention and simple error handling 6. Permit easy reversal of actions 7. Support internal locus of control 8. Reduce short-term memory load
- 38. Shneiderman's eight golden rules of interface design (Shneiderman, 1998) • 1. Strive for consistency. For example, in every screen have a 'File' menu in the top left-hand corner. For every action that results in the loss of data, ask for confirmation of the action to give users a chance to change their minds. • 2. Enable frequent users to use shortcuts. For example, in most word-processing packages, users may move around the functions using menus or shortcut“ quick keys," or function buttons. • 3. Offer informative feedback. Instead of simply saying "Error 404," make it clear what the error means: "The URL is unknown." This feedback is also influenced by the kinds of users, since what is meaningful to a scientist may not be meaningful to a manager or an architect. • 4. Design dialogs to yield closure. For example, make it clear when an action has completed successfully: "printing completed." • screen to another.
- 39. Shneiderman's eight golden rules of interface design 5. Offer error prevention and simple error handling. It is better for the user not to make any errors, i.e., for the interface to prevent users from making mistakes. However, mistakes are inevitable and the system should be forgiving about the errors made and support the user in getting back on track. 6. Permit easy reversal of actions. For example, provide an "undo" key where possible. 7. Support internal locus of control. Users feel more comfortable if they feel in control of the interaction rather than the device being in control. 8. Reduce short-term memory load. For example, wherever possible, offer users options rather than ask them to remember information from one
- 40. Physical design for Computer Interaction • different kinds of ‘widgets’ – dialog boxes, toolbars, icons, menus, etc • emphasis – menu design – icon design – screen design – information display
- 41. Menu Design • arrangement – number of menus – length – order of items • grouping of items – categorization – visual division (colours, dividing lines) • structure – sub-menus, dialog boxes • terminology • constraints – screen size, input method • context – applicability of entries
- 42. Activity Menu Design • compare the menu systems used on – a digital camera – a cell phone – a digital music player (e.g. iPod) • some criteria – functionality • number of functions, categories – usability • frequency of use, importance, consequences – context – constraints • space, input methods
- 43. Icon design • good icon design is difficult • meaning of icons – cultural and context sensitive • practical tips – always draw on existing traditions or standards – concrete objects or things are easier to represent than actions
- 44. Activity Icon Design • identify two sets of icons – e.g. traffic signs, sports disciplines • compare the two sets – purpose – context – constraints
- 45. Screen design • splitting functions across screens – moving around within and between screens – how much interaction per screen • individual screen design – white space • balance between information/interaction and clarity – grouping of items • separation with boxes, lines, colors
- 46. Splitting Functions across Screens • task analysis as a starting point – each screen should contain a single simple step – user frustration • too many simple screens • context – important information should be available – multiple screens open at once
- 47. Individual Screen Design • user attention – directed to most important point – e.g. via color, action, boxing – animation is very powerful but can be distracting • organization – grouping • physical proximity, color, shape, – structure • connections between related items • trade-off – sparse population vs. overcrowding
- 48. Information display • context – relevant information available at all times • types of information – imply different kinds of display – alpha-numerical, chart, graph, … • consistency – paper display and screen data entry – different screens with similar information – information content vs. presentation
- 49. www.id-book.com Using scenarios in conceptual design • Express proposed or imagined situations • Used throughout design in various ways • scripts for user evaluation of prototypes • concrete examples of tasks • as a means of co-operation across professional boundaries • Plus and minus scenarios to explore extreme cases
- 50. www.id-book.com Generate storyboard from scenario
- 51. www.id-book.com Generate card-based prototype from use case
- 52. www.id-book.com Support for design • Patterns for interaction design • individual patterns • pattern languages • pattern libraries • Open source systems and components • Tools and environments
- 53. Summary • Different kinds of prototyping are used for different purposes and at different stages • Prototypes answer questions • Construction: the final product must be engineered appropriately • Conceptual design (the first step of design) • Physical design: e.g. menus, icons, screen design, information display • Prototypes and scenarios are used throughout design
- 54. THANK YOU 54