From requirements to design
Conceptual design
Text p 48
Text p 73
Preece, Rogers & Sharp
Conceptual design
– Understand & analyse
the problem space
– Using a range of
frameworks, theories
etc, formulate the
conceptual model;
• Interface metaphors
• Interaction types
• Alternative design insights
– Expand the conceptual
model
• Product functions
• Product function
relationships
• Available information
Physical design
– Using scenarios
– Using prototypes
• Card based
– Prototyping
physical design
Understanding the problem space
– What do you want to create?
– What are your assumptions?
– Will it achieve what you hope it
will?
A framework for analysing the problem
space
• Are there problems with
an existing product or
user experience?
• Why do you think there
are problems?
• How you think your
proposed ideas might be
useful?
• When designing
for a new user
experience how
will the proposed
design extend or
change current
ways of doing
things?
– support people in
their activities
– Will it really help
them?
An example
• What were the assumptions made by
cell phone companies when developing
WAP services?
• Was it a solution looking
for a problem?
Assumptions: realistic or wish-list?
• People want to be kept informed of up-to-date
news wherever they are - reasonable
• People want to interact with information on the
move – reasonable
• People are happy using a very small display and
using an extremely restricted interface - not
reasonable
• People will be happy doing things on a cell phone
that they normally do on their PCs (e.g. surf the
web, read email, shop, bet, play video games) reasonable only for a very select bunch of users
From problem space to design
space
• Having a good understanding of the problem
space can help inform the design space
– e.g. what kind of interface, behavior, functionality
to provide
Problem space
conceptual
model
Design space
• But before deciding upon these it is important
to develop a conceptual model
Conceptual model
• Need to first think
• A conceptual model
about how the system is a high level
will appear to users
description of:
(i.e. how they will
– “the proposed
understand it)
system in terms of
a set of integrated
ideas and concepts
about what it
should do, behave
and look like, that
will be
understandable by
the users in the
manner intended”
formulating a conceptual model
• What will the users be What kinds of interaction
doing when carrying
modes and styles to
out their tasks?
use?
Always keep in mind
when making design
• How will the system
decisions how the
support these?
user will understand
the underlying
• What kind of interface
conceptual model
metaphor, if any, will
be appropriate?
An example
• What do you think were the main
assumptions made by developers of
online photo sharing and
management applications, like Flickr?
Assumptions and claims
• Assumptions
– Able to capitalize on the hugely successful
phenomenon of blogging
– Just as people like to blog so will they want to
share with the rest of the world their photo
collections and get comments back
– People like to share their photos with the rest of
the world
• A claim
– From Flickr’s website (2005): “is almost
certainly the best online photo management
and sharing application in the world”
Guiding principles
• Keep an open mind – never forget the
users and their context
• Discuss ideas with other stakeholders
• Use low-fidelity prototypes for rapid
feedback
• Iterate, iterate,iterate
Conceptual models
• Transform user
requirements/needs into a
conceptual model
• Conceptual model: “a
description of the proposed
system in terms of a set of
integrated ideas and
concepts about what it
should do, behave and look
like, that will be
understandable by the
users in the manner
intended”
• Don’t move to a
solution too quickly.
Iterate, iterate, iterate
• Consider alternatives:
prototyping helps
Initial conceptual
design:
• Which interface metaphors would be suitable to
help users understand the product?
• Which interaction types would best support the
users’ activities?
• Do different interface types suggest alternative
design insights or options?
• There is no one way of developing the initial design
– it is always contextual.
Interface metaphors?
• Interface metaphors combine familiar knowledge with
new knowledge in a way that will help the user
understand the product.
• Erickson - Three steps for choosing a good metaphor:
•understand functionality – what will the system do,
•identify potential problem areas; what parts of the
system are likely to most problematic for your users
(choose a metaphor to support this)
•generate metaphors –
 look in the users descriptions of tasks for ideas
 look at current metaphors being used
Interface metaphors?
Evaluate metaphors:
How much structure does
it provide?
A good metaphor will require
structure and preferably familiar
structure.
How much is relevant to
the problem?
Users can sometimes
underestimate how much of a
metaphor they understand.
Is it easy to represent?
A good metaphor will be
associated with particular visual
and audio elements as well as
words.
Will the audience
understand it?
How extensible is it?
Does it have extra aspects that
my be useful later on?
Another way of thinking about
conceptual models
Process vs product oriented
• Products or process must be clearly identified
• A set of presentation rules must be designed
• Design a set of rules for how windows will be
used
• Identify how major information and
functionality will be divided across displays
• Define and design major navigational pathways
• Document alternative conceptual design models
in sketches and explanatory notes
Consider interaction types
• Which interaction type?
How the user invokes actions
Instructing, conversing, manipulating or exploring
Depend on application domain and product being
developed
Most conceptual models will include a combination
of interaction types – different parts of an
interaction will need different types
Consider interface types
To help think outside the box consider:
Do different interface types provide insight?
WIMP,
shareable,
mobile, etc
Its important not to be unduly influenced by a
predetermined interface type.
Consider all types – no matter how bizarre.
Expanding the conceptual model
• What functions will the product perform?
What will the product do and what will the human
do (task allocation)?
• How are the functions related to each other?
Sequential or parallel?
Categorisations, e.g. all actions related to
telephone memory storage
• What information needs to be available?
What data is required to perform the task?
How is this data to be transformed by the system?
Using scenarios in conceptual design
• Express proposed or imagined situations
• Used throughout design in various ways
scripts for user evaluation of prototypes
concrete examples of tasks
as a means of co-operation across
professional boundaries
• Plus and minus scenarios to explore
extreme cases
Generate storyboard from scenario
Generate card-based prototype
from use case
Summary
• Conceptual design (the first step of design)
• Consider interaction types and interface types to prompt
creativity
• Storyboards can be generated from scenarios
• Card-based prototypes can be generated from use cases
Text p 48
Text p 73