CS/ITDE 2009-10
Applying HCI:
Prototypes and storyboards in
interactive systems design
1
CS/ITDE 2009-10
Rapid Application
Development (RAD)
Iterative prototyping
• Early prototypes are used to create system
documentation
• The prototype becomes an object of communication
• Early prototypes are used to refine the systems
• Requirements become clarified with reference to
the prototype and in the light of design possibilities
thrown up by the prototype.
• Misconceptions between designer and clients
become apparent early in the stage.
2
CS/ITDE 2009-10
Iterative prototyping
Analysis
Design
Formative
Evaluation
Implement
Evaluate
3
CS/ITDE 2009-10
Creating the prototype
• Rapid prototyping - RAD methodology
• Create design in early stages of project
• Fosters communication between art and science
• Reduce temptation to get locked into data
• Allows contribution from non-technical team
members
• Examine interface design solutions
• User centred method important in evaluation
4
CS/ITDE 2009-10
Prototyping and UCD
•
•
•
•
•
•
•
Develop a prototype
Conduct a design review
Revise the prototype
Usability test and evaluate
Revise the prototype
Repeat above stages
Create a user interface
design document
User
5
CS/ITDE 2009-10
The prototype
• Final screen decisions are made in
the prototype:
• Fonts, Wording, Texts
• Colours, screen layout, etc.
• Navigation tools
• Buttons and controls
• Menus
• Look and feel of the application
6
CS/ITDE 2009-10
What type of prototype
Prototype need not be fully functional
The purpose of the prototype will determine
how much function it shall have.
Consider the following:
• A prototype to test navigation and menu
function
• A prototype to test user satisfaction with
screen design
• A prototype to test system response
times
7
CS/ITDE 2009-10
Types of Prototype
•
•
•
•
•
•
•
•
•
•
•
Horizontal prototype
Vertical prototype
High fidelity prototype
Low fidelity prototype
Paper prototype
Requirements animation
Rapid prototyping
Evolutionary prototyping
Incremental prototyping
Chauffeured prototyping
Wizard of Oz prototyping
8
CS/ITDE 2009-10
Horizontal prototype
• A prototype that covers a fairly large
section of the application or project
• Functionality might be limited in any
particular area or areas
• For example all screens may be
present but few of them actually work
• May be used to test navigation for
example
9
CS/ITDE 2009-10
Vertical prototype
• A prototype that covers a fairly small
section of the application or project
• One section of the application is almost
fully functional
• Few areas of the application are present
• For example a single screen may be used
to test database performance
10
CS/ITDE 2009-10
High fidelity prototype
• A prototype that is intended to represent the final
application to a high degree of accuracy in some
specific way
• Functionality may or may not be limited in any
specific area
• Some areas are likely to be fully functional
• Screens will closely resemble the finished
application
• May be used for evaluation, marketing etc. But will
be expensive to produce
11
CS/ITDE 2009-10
Low fidelity prototype
• A prototype that has only a passing resemblance to
the final product
• Functionality will be limited in most areas
• The prototype may be used to communicate early
ideas to teams
• Quick and cheap to do
• May involve many persons with different ideas
• May be too flexible - use early on
12
CS/ITDE 2009-10
Paper prototype
• A low fidelity prototype comprising screen design
and information structure ideas.
• May be used with evaluation methods such as
cognitive walkthrough, in early stages of the
project
• Very cheap to do
• All stakeholders are able to take part
13
CS/ITDE 2009-10
Requirements animation
• A prototype, usually with high fidelity screen
design, but low functionality
• Used to convey screen ideas between artistic
team and others
• Use Macromedia Director or similar
application
14
CS/ITDE 2009-10
Rapid prototyping
• A throw away low fidelity method
• Used in requirements gathering
• Ideas about potential designs
15
CS/ITDE 2009-10
Evolutionary prototyping
• Prototypes develop throughout the project
• Earlier prototypes are modified and used
later in the project
• A single strand of development may be
carried through until the end
• Prototypes are modified based on
evaluation
16
CS/ITDE 2009-10
Incremental prototyping
• Prototypes are develop throughout the project in
small steps or modules
• Many strands of development may be seen
throughout the project
• The final application may be composed of the
incremental prototype modules and may be
released over a period of time as a succession of
components
17
CS/ITDE 2009-10
Throw away prototype
• Prototypes develop in isolation during the project
to address specific problems
• Earlier prototypes are discarded once the
problems have been solved
• Many strands of development are evident
• Prototypes are used to design high fidelity
prototypes based on results of evaluation
18
CS/ITDE 2009-10
Chauffeured
prototyping
• Users watch as a member of the design team
drives the application - high fidelity prototype
• The method is used to test whether interface
meets users needs, without the user having to
learn the application
• Useful for testing out or confirming ideas
• Designers closely involved with users
19
CS/ITDE 2009-10
Wizard of Oz
prototyping
• Users are unaware that they are being
observed as they use and interact with a high
fidelity prototype
• Designers closely involved with users
20
CS/ITDE 2009-10
Choice of prototyping tool
• Paper prototype
– Cheap and available for early design decisions
• PowerPoint
– Good for showing screen dumps and bitmaps
– Simple easy to use animation and navigation
• Visual Application (Basic, Access)
– Has good all round functionality
– Can be used for final version
– Has MS Windows functionality
• Authoring software - Director etc.
– May have reduced speed but good for animation and
screen designs
21
CS/ITDE 2009-10
Storyboards
Storyboards are graphic organizers such as a
series of illustrations or images displayed in
sequence for the purpose of previsualizing a
motion graphic or interactive media sequence,
including website interactivity. See [1, 2].
The storyboarding process, in the form it is
known today, was developed at the Walt Disney
Studio during the early 1930s, after several
years of similar processes being in use at Walt
Disney and other animation studios.
22
CS/ITDE 2009-10
Storyboards: an example
From: http://www.storyboards.co.nz/
23
CS/ITDE 2009-10
Storyboards: Creating UserOriented Work Scenarios
From: http://www.sapdesignguild.org/editions/edition3/print_interact_design.asp
24
CS/ITDE 2009-10
Storyboards: Designing a
website
(c) Jenny Wakefield’s website storyboard [5]
25
CS/ITDE 2009-10
Information Structure
examples
How can the logical representation of data be mapped
to a) The human mind, and b) A computer application ?
•
•
•
•
•
•
Linear structure
Hierarchy - menu
Explorer - Browser - Windows
Hyper-linked system
Search engine
Artificial Intelligence (?)
26
CS/ITDE 2009-10
The users’ mind
?
How to understand it?
• User Centred Design
• Task analysis
• Requirements
• Audience survey
It is important that the
designer understands
exactly what the user
wants to do within and by
means of the application.
27
CS/ITDE 2009-10
The designers’ mind
How can ideas,
assumptions, guesses
about how the user
wants to use an application
be translated into a
structure for a computer
application?
28
CS/ITDE 2009-10
Shared representation
The stake-holders will all want to
have a say in the design process
Your representation must be
accessible to
* (Artistic) designers
* Users
* Media people
* Programmers
* Project managers
* Funders
29
CS/ITDE 2009-10
Flowcharts
Flowcharts are schematic representations
of the interactive flow of a program.
All possible user interaction pathways,
expressed through labelled boxes and
directional arrows, are traced through any
hierarchical menu tree structures and
along various screen branches.
30
CS/ITDE 2009-10
Flowcharts
• Gives shape and structure to the content
so people can get a sense of how the real
product might work
• It is a living document that is returned to
throughout the project, as the basis for
decisions about navigation and structure
31
CS/ITDE 2009-10
Flowcharts
Three forces drive the design of the
flowchart:
• Content: The organisation and structure
mapped out for the information
• Usability: The topic categories and access
routes the audience will expect to find
• Simplicity: The need to keep the design clear
and focused, to control production time & costs
32
CS/ITDE 2009-10
Flowcharts & PIMSs [3]
Remember, we are talking about “interaction” here!
Matt Queen (2006): Preferred Interaction Model (PIM)
“A PIM is a type of flow diagram that represents the
user’s probable decisions, cognitive processes, and
actions.”
“PIM entities are the decision (diamond), cognitive
process (rounded box), action (square box), and
system signal (circle). The model ends with a special
action entity represented by a rhombus shape.”
33
CS/ITDE 2009-10
An example
of PIM
PIM for a
phone number
retrieval
interface of a
contact
database
application
34
CS/ITDE 2009-10
Interface Structure
A simple method of
deciding on a structure is to
create a topics list.
Then identify “meaningful”
relationships among topics.
For example:
35
CS/ITDE 2009-10
More complex
structures
Can you identify more
relationships?
Are they misleading?
Are they suggesting
“path”?
36
CS/ITDE 2009-10
Every link needs
a control
A box for every
topic
Multiple sub
topics in each
topic
37
CS/ITDE 2009-10
Mapping a structure on
to mental models
The designer should aim to simplify the
information space - this will make navigation,
location and orientation more easy.
Information is ordered logically in the human
mind. Aim to reproduce this structure
People often think in pictures - but also in
words. Try not to impose your logic - offer
alternatives where possible.
38
CS/ITDE 2009-10
Navigation
• the ability to move around within the
application.
• For example, hyper-linking within a web
browser or an interactive menu system
39
CS/ITDE 2009-10
Location
• the ability to search for and find specific
information within the application
• For example the provision of search
engines in a web browser, or the
sensible structuring of information in a
database to facilitate location of related
items
40
CS/ITDE 2009-10
Orientation
• The ability of the user to be aware of
their position in the application in terms
of
a) The knowledge space
b) The structure of the application
• for example the provision of interactive
maps or descriptions of the knowledge
space provided to assist users.
41
CS/ITDE 2009-10
Interaction guidelines
• Keep it simple - don’t confuse interaction with navigation
(KISS principal)
• Make sure you understand the information structure
before you code it
• Be clear what your aims are - locate - explore - browse
• Provide tools - maps - overviews - buttons - multi-modal?
• Provide support and help features -tips -clues
• Don’t hide information - but also…...
• Don’t put too much on the screen at once
• Be logical - keep things that belong together near together
• Encourage exploration where required, but still give clues.
42
CS/ITDE 2009-10
Some general design
guidelines
• Try to keep information within easy reach
• Relate work-flow to screen layout
• Keep related information together
• A hierarchy with four levels needs three clicks to find anything
• Keep ideas present on the screen - don’t hide
• Keep the need to learn down to a minimum in seldom used
applications
• Make sure that standard metaphor is used
• Keep screen design simple - don’t clutter
• Use white space to separate- not boxes
43
CS/ITDE 2009-10
The storyboard
• Once you have decided on a structure, you next
create a storyboard.
• Each of the final destinations in your structure can
be mapped to a screen in the storyboard
• Keep it simple at first - then add complexity as you
develop ideas.
• Discuss with colleagues - stakeholders
• This will allow you to build a prototype to test
44
CS/ITDE 2009-10
Merging Flowcharts, PIMSs
and Storyboards
45
CS/ITDE 2009-10
References
[1] http://en.wikipedia.org/wiki/Storyboard
[2] Owen Hill, 2007. http://www.storyboards.co.nz/
[3] Matt Queen, 2006. Interaction modeling. User State-Trace Analysis. On:
http://www.boxesandarrows.com/view/interaction_modeling
[4] SAP DESIGN GUILD, Creating an Interaction Design, Margarete Fuss,
Usability Engineering Center, SAP AG – 05/21/2001
http://www.sapdesignguild.org/editions/edition3/print_interact_design.asp
[5] http://jenny.wakefield.net/instruction/instructionaldesign/design2/storyboarding.html
46