User Interface Prototyping

1
User Interface Prototyping Interaction Design

• Tammara Combs Turner
• (tcombs_at_u.washington.edu)

2
Overview

• A little about me (5)
• UI Prototyping Basics (15)
• Ways to use UI Prototypes (10)
• Example (5)
• Build your own (10)
• QA (5)

3
My Background
include ltiostreamgt using namespace std int
main() long num1 0, num2 0, num3 0,
num4 0 num4 (num1 10, num2 20, num3
30) cout ltlt endl ltlt "The value of a
series of expressions " ltlt "is the value
of the right most " ltlt num4 cout ltlt
endl return 0
Microsoft Intern 1995-1997 STE Outlook
4
(No Transcript)
5
Me today
PhD Student 2001 present
FTE _at_ Microsoft 2000 present
6
UI Prototyping

• What is it?
• Why do it?
• When should you do it?
• How should you do it?

7
What is UI Prototyping?

• A model on which something is patterned
• A façade
• A way to explore ideas before you invest in them

8
Why should you prototype?

• To save time and resources!
• Easy relatively inexpensive
• Helps you find mistakes in the design before
  development

9
Reasons for prototyping

• Proof of concept
• To prove that an idea has value
• Design Exploration
• To solve a specific problem in a product
• Technical Exploration
• To investigate different coding techniques for
  implementation

10
When should you prototype?

• Early in the planning, design specification
  phase of a project before code is written
• When tough design technical issues arise that
  need to be resolved
• When youre going to break status quo (i.e.
  consistency is being compromised)

11
How should you prototype?

• build as little of the design as you need and
  fake the rest
• Invest as little as needed to answer the question
• Throw it away when youre done
• Be careful about show an overly elaborate
  prototype to the people who have to build it.

12
Fidelity in Prototyping

• Fidelity refers to the level of detail used in a
  prototype
• High fidelity
• The look and feel are close to the final product
• Low fidelity
• Rough, quick, drawings

13
Tools Techniques

• Paper Prototypes
• Fast with no coding, saves time, throw away no
  computer necessary
• No subtle interactions No performance data
• Ex. Drawings, screenshots
• Electronic/Interactive Prototypes
• Captures users interactions with UI
• Tracks how users actually complete tasks (when
  multiple ways to do it)
• When animation is important for understanding
• Ex. HTML, Director/Flash, Visual Basic

14
Other things to remember

• Start with an understanding of the problems/needs
  youre trying to solve
• Decide the scope of your prototype (breadth vs.
  depth)
• Breadth a little of each feature
• Depth one feature w/all of its options
• Make it flexible!
• Make one piece of the prototype do lots of things
  (i.e. built-in option that changes the look/feel
  of the UI)

15
Ways to use UI Prototypes

• As a communications piece
• To show core ideas to tell a story
• Solicit user feedback
• Higher fidelity prototype to test the concepts
  tasks with real end-users
• Spec for developers
• As a visual spec to help developers w/ the layout
  of the interface
• Investigate detailed interactions
• Explore how a person interacts with a small
  element of the product the feel of the
  interaction

16
Build your own

• Using PowerPoint build a way for users to access
  help quickly when using shapes.

17
Example

• PowerPoint prototype of Visio feature

18
lt Example Deleted gt
19
Resources

• The Art of UI Prototyping http//www.uiweb.com/iss
  ues/issue12.htm

20
Questions?

• Tammara Turner tcombs_at_u.washington.edu