Design, prototyping and construction

1. Design, prototyping and construction By Anupa Mogili Arun Muralidharan

2. Agenda • Prototyping and Construction • Conceptual Design • Physical Design

3. Prototyping and Construction • What is a prototype? • Why prototype? • Different kinds of prototyping • low fidelity • high fidelity • Compromises in prototyping • vertical (“deep”) • horizontal (“shallow”) • Construction

4. What is a prototype? For users to effectively evaluate the design of an interactive product, designers must produce an interactive version of their ideas, this activity is called prototyping. • In other design fields a prototype is a small-scale model: • a miniature car • a model of a building • In interaction design it can be • a series of screen sketches • 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 • a piece of software with limited functionality

5. Why prototype? • Evaluation and feedback: allows stakeholders to interact with an envisioned product, to gain some experience of using it in realistic settings and to explore imagined uses • Communication among team members: clarifies vague requirements • Validation of design ideas: test out the technical feasibility of an idea • Choosing between alternatives: provides multiple designs for the application

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

7. Low-fidelity Prototyping • Does not look very much like the final product • Uses materials that are very different from the intended final version, such as paper and cardboard rather than electronic screens and metal, e.g. palm pilot • Used during early stages of development • Cheap and easy to modify so they support the exploration of alternative designs and ideas • It is never intended to be integrated into the final system. They are for exploration only.

8. Examples of Low-fidelity prototyping • Storyboards • Sketching • Index cards • ‘Wizard of Oz’

9. Storyboard • Originally from film, used to get the idea of a scene • Snapshots of the interface at particular points in the interaction • Series of sketches • shows how a user can perform a task using the device • Often used with scenarios • brings more detail to the written scenario • offers stakeholders a chance to role play with the prototype, by stepping through the scenario

10. Storyboard example 1

11. Storyboard example 2

12. Sketching • Drawing skills are not critical • symbols to indicate tasks, activities, objects • flowcharts for time-related issues • block diagrams for functional components

13. Sketching example

14. Index cards • Small cards (3 X 5 inches) • 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 like • sequence • hyperlinks • Often used in website development

15. Index card example (screen 1)

16. Screen 2(next index card)

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

18. 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. Low-fidelity prototype Difference High-fidelity prototype

20. Advantages/Disadvantages

21. Compromises in prototyping • All prototypes involve compromises • Compromises in low-fidelity prototypes: • device doesn't actually work • Compromises in high-fidelity prototypes: • slow response • sketchy icons • limited functionality available • 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

22. Construction • Creation, manufacturing of the final system • based on experiences and feedback gathered from the prototypes • Development philosophy • evolutionary prototyping: involves evolving a prototype into the final product. • throw-away prototyping: used as a stepping stone towards final design. Prototype is thrown away and the final system is built from scratch. • Quality Although prototypes have undergone extensive user evaluation the final product still has to be subjected to rigorous quality testing for the following: • reliability, robustness, maintainability, integrity, portability, efficiency

23. Design Objectives • Identify critical interaction aspects of the product (Conceptual Design) • Select the appropriate tools and methods to provide interactivity (Physical Design) • Realize that design of products usually involves several intermediate stages • Consider the importance of early feedback for interaction design (Prototypes and Scenarios)

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. Conceptual Design • Transformation of user requirements/needs into a conceptual model • Stepwise refinement • iterate, iterate and then iterate some more • Consideration of alternatives • prototyping & scenarios

26. Three perspectives for a conceptual model • Interaction mode • Metaphor • Interaction paradigm • Running Example: • Shared Calendar – Used in a corporate environment for employees to maintain their schedule and organize meetings based on that

27. 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 • Process-oriented • support work processes (e.g. financial software) • Product-oriented • develop products that users create, modify and maintain (e.g. Microsoft Excel, Word)

28. Three perspectives for a conceptual model • Interaction mode • Metaphor • Interaction paradigm

29. Metaphors • Interface Metaphors • partial mapping of the software to a real object • combine familiar knowledge with new knowledge • help the user understand the product • Three-step process for choosing a good metaphor • understand system functionality, • identify potential problem or complicated/critical areas, • generate metaphors

30. Evaluation of a metaphor • How much structure does it provide? • requires a sound and familiar structure • How relevant is it to the problem? • reduce confusion and false expectations • Is it easy to represent? • visual and audio elements combined with words • Will the audience understand it? • How extensible is it? • extra aspects that can be useful later on

31. Three perspectives for a conceptual model • Interaction mode • Metaphor • Interaction paradigm

32. Interaction Paradigm • Coherent collection of interaction methods • Addresses environmental requirements • Desktop paradigm • WIMP interface (windows, icons, menus and pointers) • Ubiquitous computing • Pervasive computing • Wearable computing • Mobile devices

33. Three perspectives for a conceptual model • Interaction mode • Metaphor • Interaction paradigm

34. Expanding the conceptual model • Functionality • task allocation • What will the product do and what will the human do? • Relationship of subtasks • categorizations • all actions related to one particular aspect • temporal associations (sequential or parallel) • e.g. CASE tools • Information • data required to perform the task • transformation of data by the system

35. 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 (shared understanding of the system) • sell ideas to users and potential customers • ‘Plus’ and ‘Minus’ scenarios • exploration of extreme cases

36. Prototypes in Conceptual Design • Evaluation of emerging ideas • user feedback, feasibility • choice of methods and materials • Continuous prototyping • low-fidelity prototypes early on • high-fidelity prototypes later • Evolutionary prototyping • early prototypes are gradually enhanced and augmented • appearance • functionality

37. Physical Design • Concrete, detailed issues of designing the interface • although inaccurate, the term is also used for software-based systems • Pervasive physical/conceptual design • Guidelines for physical design • Nielsen’s heuristics • Shneiderman’s eight golden rules • Style guides: commercial/corporate purposes • collection of design rules and principles • decide ‘look and feel’

38. Physical design for Computer Interaction • Different kinds of ‘widgets’ • dialog boxes, toolbars, icons, menus, etc • Emphasis • Menu design • Icon design • Screen design • Information display

39. Menu Design • Arrangement • number of menus • length • order of items • Grouping • categorization • visual division (colours, dividing lines) • Structure • sub-menus, dialog boxes • Terminology • Constraints • screen size, input method • Context • applicability of entries

40. Activity Menu Design • Compare the menu systems used on • a digital camera • a cell phone • a digital music player (e.g. iPod) • Criteria • Functionality • number of functions, categories • Usability • frequency of use, importance, consequences • Constraints • space, input methods

41. Physical Design - Emphasis • Menu Design • Icon Design • Screen Design • Information Display

42. Icon design • Good icon design is difficult • has to be widely acceptable • meaning must be readily perceivable • distinguishable from each other • 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

43. Physical Design - Emphasis • Menu Design • Icon Design • Screen Design • Information Display

44. Screen design • Splitting functions across screens • moving around within and between screens • how much interaction per screen • serial or workbench style • Individual screen design • white space • balance between information/interaction and clarity • grouping of items • separation with boxes, lines, colors

45. 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 • all pertinent information must be made available at relevant times • multiple screens open at once

46. Individual Screen Design • User attention • directed to salient point • e.g. via colour, motion, etc • animation is very powerful but can be distracting • Organization • Grouping • physical proximity, colour, shape, • Structure • connections between related items • Trade-off • sparse population vs. overcrowding

47. Physical Design - Emphasis • Menu Design • Icon Design • Screen Design • Information Display

48. Information display • Context • relevant information is available at all times in the most efficient format for the specific task • Types of information • imply different kinds of display • alpha-numerical, chart, graphs • Consistency • paper display and screen data entry • different screens with similar information (customisable) • information content vs. presentation

49. Physical Design - Emphasis • Menu Design • Icon Design • Screen Design • Information Display

50. Summary • Different kinds of prototyping is used for different purposes and at different stages • Construction: Make sure the final product is 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 as well