Chapter 8 Design, prototyping and construction Brought to you by the letter J.

1. Chapter 8Design, prototyping and constructionBrought to you by the letter J.

2. What is a prototype? • A prototype is a small scale model of your larger product. • Can be a physical object, or a simple software program. • Many physical prototypes are first made from cardboard.

3. Why prototype? • We need the client’s feedback! • Clients never know what they need, but they always know what they don’t need. Prototypes are a way for them to take a look at a project and tell you what they like and don’t like about it. • Stakeholders can see, hold, interactwith a prototype more easily than adocument or a drawing • You can test out ideas for yourself

4. Low-fidelity Prototyping • Uses a medium which is unlike the final medium, e.g. paper, cardboard • Examples: sketches of screens, task sequences, etc ‘Post-it’ notes storyboards ‘Wizard-of-Oz’

5. ‘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 • What is ‘wrong’ with this approach? User >Blurb blurb >Do this >Why?

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

7. Compromises in prototyping • 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

8. Construction • Taking the prototypes (or learning from them) and creating a whole • Product must beengineered • Evolutionary‘Throw-away’

9. Conceptual design: from requirements to design • Transform user requirements/needs • into a conceptual model • Iterate, iterate, iterate! • The user doesn’t know what they • want, but they will tell you what they • don’t want.

10. Is there a suitable metaphor? • Interface metaphors combinefamiliar knowledge with newknowledge in a way that will helpthe user understand the product. • Three steps: understandfunctionality, identify potentialproblem areas, generatemetaphors • Computing programs use acalculator metaphor.

11. Using scenarios in conceptual design • Express proposed or imagined situations • Very useful when trying to get into the shoes of the user. • Plus and minus scenarios toexplore extreme cases

12. Physical design: getting concrete • Considers more concrete, detailed issues of designing the interface • Iteration between physical and conceptual design • Different kinds of widget (dialog boxes, toolbars, icons, menus etc) • Menu design • Icon design • Screen design • Information display

13. Menu design • In what order will theitems appear? • How is the menu to bestructured, e.g. when touse sub-menus, dialogboxes? • What categories will be used to group menu items?

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

15. Screen design • Two aspects: • How to split across screens • Frustration if too many simple screens • Individual screen design • Animation is very powerful but can be distracting • Good organization helps: grouping, physical proximity

16. Information display • Relevant information available at all times • Different types ofinformation implydifferent kinds ofdisplay • Consistencybetween paperdisplay and screendata entry