From requirements to design

Conceptual design

Text p 48 Text p 73

Preece, Rogers & SharpConceptual 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

• But before deciding upon these it is important to develop a conceptual model

Problem space Design spaceconceptual

model

Conceptual model• Need to first think

about how the system will appear to users (i.e. how they will understand it)

• A conceptual model is a high level 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”

formulating a conceptual model

• What will the users be doing when carrying out their tasks?

• How will the system support these?

• What kind of interface metaphor, if any, will be appropriate?

What kinds of interaction modes and styles to use?

Always keep in mind when making design decisions how the user will understand the underlying conceptual model

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 typesTo 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