Chapter 8Chapter 8

Design, prototyping Design, prototyping and constructionand construction

Brought to you by the letter J.Brought to you by the letter J.

What is a What is a prototype?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.

Why Why prototype?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

Low-fidelity Low-fidelity PrototypingPrototyping•Uses a medium which is unlike the final

medium, e.g. paper, cardboard•Examples:

sketches of screens, task sequences, etc‘Post-it’ notesstoryboards‘Wizard-of-Oz’

‘‘Wizard-of-Oz’ Wizard-of-Oz’ prototypingprototyping•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?

>Blurb blurb>Do this>Why?

User

High-fidelity High-fidelity prototypingprototyping•Uses materials that you would expect to be in the

final product. •Prototype looks more like the final system than a low-fidelity version.

Compromises in Compromises in prototypingprototypingTwo 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

ConstructioConstruction n •Taking the prototypes (or learning from

them) and creating a whole•Product must beengineered

Evolutionary‘Throw-away’

Conceptual design: from Conceptual design: from requirements to designrequirements to design

•Transform user requirements/needsinto a conceptual model •Iterate, iterate, iterate!•The user doesn’t know what theywant, but they will tell you what theydon’t want.

Is there a suitable Is there a suitable metaphor?metaphor?•Interface metaphors combine

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

Using scenarios in conceptual Using scenarios in conceptual designdesign

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

Physical design: getting Physical design: getting concreteconcrete

• 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

Menu Menu designdesign

•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?

Icon Icon designdesign

• Good icon design is difficult• Meaning of icons is cultural and context

sensitive• Some tips:

1. always draw on existing traditions or standards

2. concrete objects or things are easier to represent than actions

Screen Screen designdesignTwo 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

Information Information displaydisplay•Relevant information available at all times

•Different types ofinformation implydifferent kinds ofdisplay

•Consistencybetween paperdisplay and screendata entry