Scribd
Upload
139 views16 pages

Essential UI Prototyping

- User interface prototyping represents general ideas and requirements of a UI rather than implementation details. It focuses on users and usage. - Essential UI prototyping is done with paper and involves modeling major and minor UI elements to explore usability. It acts as a launchpad for further prototyping and design. - The prototyping process involves determining needs, building prototypes, and evaluating prototypes to move from requirements to analysis and design. Screen sketches then provide more detail before concrete prototypes are created.

Uploaded by

ZhichaoWang
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
139 views16 pages

Essential UI Prototyping

- User interface prototyping represents general ideas and requirements of a UI rather than implementation details. It focuses on users and usage. - Essential UI prototyping is done with paper and involves modeling major and minor UI elements to explore usability. It acts as a launchpad for further prototyping and design. - The prototyping process involves determining needs, building prototypes, and evaluating prototypes to move from requirements to analysis and design. Screen sketches then provide more detail before concrete prototypes are created.

Uploaded by

ZhichaoWang
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

User Interface Prototyping

Sunday, 16 September 12

1. Essential UI Prototyping

Sunday, 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,


before we move on to solve it

1. 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, sticky notes

avoids narrowing the design space to whatever development


or prototyping tools you use

quick and easy to explore - and discard ideas


really easy to involve stakeholders

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

Explore System Usage

Sunday, 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

Model UI Elements

Sunday, 16 September 12

Major Elements:

such as screens (or main sections of an interface)


name them: e.g. Course Enrolment UI

Minor Elements:

such as input fields, lists and action items


just placeholders for now

Explore Usability

Sunday, 16 September 12

clear?
consistent?
learnable?
easy to remember?
achievable?

Example Essential UI Prototype

pink

input fields

yellow

info only

blue

action items

from The Object Primer (Ambler 2004, 2009)

Sunday, 16 September 12

From requirements gathering


into analysis...

Sunday, 16 September 12

2. 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, 2009)

Sunday, 16 September 12

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

Concrete Prototypes

from The Object Primer (Ambler 2004, 2009)

Sunday, 16 September 12

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

dont 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

dont shy away from known requirements

if it has to use a stand-alone GUI, dont waste time or struggle trying to be too general

ask:

whats good?
whats bad?
whats missing?

References & Recommended

Sunday, 16 September 12

this presentation was adapted from Scott W. Amblers


online guides to prototyping:

http://www.agilemodeling.com/artifacts/essentialUI.htm
http://www.agilemodeling.com/artifacts/uiPrototype.htm

those guides and figures used here were derived from:

Chapter 6 of The Object Primer, Cambridge University Press,


2004 ISBN#: 0-521-54018-6

You might also like