You are on page 1of 16

User Interface Prototyping

Sunday, 16 September 12

before we move on to solve it . 16 September 12 represents general ideas behind the UI • not exact details represents UI requirements • • what needs to happen • • a launchpad for subsequent prototyping and design rather than how it will be implemented or with which technology (both are design decisions) at this point we are still trying to understand the problem.1. Essential UI Prototyping • • Sunday.

Essential UI Prototyping • • Sunday. 16 September 12 focus is on users and their usage of the system • integrates well with use case modelling is done as a paper exercise • can use flip charts.and discard ideas really easy to involve stakeholders .1. sticky notes • avoids narrowing the design space to whatever development or prototyping tools you use • • quick and easy to explore .

Creating an Essential UI Prototype • • • • Sunday. 16 September 12 Explore system usage Model major UI elements Model minor UI elements Explore the usability of your UI .

16 September 12 what happens during the use case(s): • • • information provided by the system information input by the user actions taken by the user .Explore System Usage • Sunday.

lists and action items just placeholders for now .g. “Course Enrolment UI” Minor Elements: • • such as input fields.Model UI Elements • • Sunday. 16 September 12 Major Elements: • • such as screens (or main sections of an interface) name them: e.

Explore Usability • • • • • Sunday. 16 September 12 clear? consistent? learnable? easy to remember? achievable? .

2009) Sunday.Example Essential UI Prototype pink input fields yellow info only blue action items from The Object Primer (Ambler 2004. 16 September 12 .

16 September 12 ..From requirements gathering into analysis. Sunday..

2009) Sunday.2. 16 September 12 . The Prototyping Process Determine Needs Build Prototype Evaluate Prototype [finished] [continue] from The Object Primer (Ambler 2004.

2009) Sunday. 16 September 12 .Screen Sketches from The Object Primer (Ambler 2004.

Screen Sketches • • • Sunday. 16 September 12 provide finer detail give a better idea of how UI will be implemented can still easily involve stakeholders in their creation .

16 September 12 . 2009) Sunday.Concrete Prototypes from The Object Primer (Ambler 2004.

Concrete Prototypes • • Sunday. 16 September 12 hand-coded or using prototyping tools moving closer to design • • good if we are ready to solve the problem but might be harder to involve stakeholders in their creation and exploration .

To conclude • • • • Sunday. 16 September 12 don’t need to prototype entire system do enough to allow you to: • • • capture and represent requirements in key areas move onto design across the whole system explain your UI ideas to others don’t shy away from known requirements • if it has to use a stand-alone GUI. don’t waste time or struggle trying to be too general ask: • • • what’s good? what’s bad? what’s missing? .

agilemodeling.com/artifacts/uiPrototype.References & Recommended • • Sunday.agilemodeling.htm http://www. Cambridge University Press. Ambler’s online guides to prototyping: • • http://www.htm those guides and figures used here were derived from: • Chapter 6 of The Object Primer. 2004 ISBN#: 0-521-54018-6 .com/artifacts/essentialUI. 16 September 12 this presentation was adapted from Scott W.