User Experience

Research and Design

Week 4 – Session 5
Techniques for Designing UX : Envisionment
 LEARNING OUTCOMES

LO2: Apply techniques for designing User Experience in

System Development
 OUTLINE
• Finding suitable representations
• Sketching for ideation
• Visualizing look and feel
• Mapping the interaction
• Wireframes
• Prototypes
• Envisionment in practice
• Site Maps and Task Flows
Finding suitable representations
 Finding suitable
representations
Envisionment is fundamental to effective human-centred design,
to enable designers to see things from other people’s perspectives
and to explore design concepts and ideas with others. Different
representations of design ideas are useful at different stages for
different people.

There are many techniques that can be used to help

develop an understanding of the design problem and to
envision possible solutions.

A good representation is accurate enough to reflect the

features of the system being modelled, but simple enough
to avoid confusion. It adopts a style of presentation that is
suitable for its purpose
 Finding suitable
representations
• Consider the following example:
A car designer has been commissioned to produce a new luxury sports car. He
or she doodles a few designs on paper and shows them to other designers on
the team. They make some comments and criticisms and as a result, changes
are made. Finally, the designer is satisfied with one of the designs and draws up
detailed blueprints that are given to the firm's model maker. Scale models are
produced and sent to Marketing and Sales for customer reaction. The scale
models are also subjected to wind tunnel experiments to investigate the
aerodynamics of the design and the results are used in a computer program
that will calculate the car's speed and fuel efficiency.
 Finding suitable
representations
• The designer is using four different representations in at least four
different ways:
a) The original representations focus on clearing the mind. In this case they are
doodles and sketches that are used to generate new ideas, examine
possibilities and prompt for questions.
b) The blueprints given to the model maker and the scale model given to the
Marketing and Sales departments are suitable for accurately expressing
ideas to others.
c) The wind tunnel experiments show representations being used to test ideas.
d) The computer model is used to make predictions.
 Finding suitable
representations
• Here is a suggested series of steps for the envisionment process, pulling
together the wide-ranging material in this chapter.
a) Review requirements and conceptual scenarios.
b) Develop representations of your design ideas. At a minimum these should include
concrete scenarios, storyboards developing the main interaction sequences, and
snapshot sketches of key screens or other aspects of the product.
c) If your product is a new one, experiment with different metaphors and design
concepts through your representations.
d) Explore design ideas with the people who will be using the system wherever possible.
e) Develop wireframes to provide more detail on the proposed structure and navigation.
f) Iterate and gradually formalize the design (making it more concrete) through
prototypes and further evaluations.
Sketching for ideation
 Sketching for ideation
Envisionment is about bringing

Sketching for ideation

abstract ideas to life.

It is easy to have great ideas in your

head, but it is only by envisioning
them that the flaws and difficulties
will be exposed.

Sketching will also help to generate

ideas. There are a number of basic
techniques that can help.

The art of sketching is something that

all designers should practise.

Ideas and thoughts can be quickly

visualized – either to yourself, or to
others – and explored
Sketching for ideation
 Storyboards
Storyboarding is a technique taken from filmmaking - using a
simple cartoon-like structure, key moments from the interactive
experience are represented.

The advantage of storyboarding is that it allows you to get a feel

for the ‘flow’ of the experience.

It is also a very economical way of representing the design – a

single page can hold 6–8 ‘scenes’.

It is often helpful to sketch out a storyboard based around a

concrete scenario.

The two together are very helpful in working through design

ideas with customers
 Traditional storyboarding. A storyboard for a film would usually have some
notes attached to each scene expanding on what will happen - this helps

Storyboards
overcome the limitations of representing a dynamic experience in a static
medium. For interactive systems, notes below each sketch usually contain the
relevant steps from a scenario, and the sketches themselves are annotated to
indicate interactive behavior. This is the most usual form of storyboard if there
is not a strong multimedia flavor to the application.
Scored story

Three main
Scored storyboards. If the application has a lot of motion
types of
graphics the storyboard can be annotated - a sketch is
storyboarding annotated with appropriate notation and notes about, for
are commonly example, type, colours, images, sound and other issues are
found in attached underneath.
interactive
media design:
Text-only storyboards. These are useful if the application
has a lot of very complex sequences. You can specify what
images appear, what text accompanies them, any
accompanying media, general notes about tone, flow, etc.
Storyboards
Storyboards
Visualizing look and feel
 Visualizing look and feel

The interaction between people,

services and products will often
take place across different
media channels and the UX will Designers need ways to envision
result from the complex the various touchpoints, service
interweaving of service moments and user journeys so The look (how things are
moments. that they can establish a represented) and feel (how
common ‘look and feel’ for the things behave) should have
whole UX. some consistency across the
different channels and should
reflect the overall brand that the
UX is aiming to establish
 Mood boards

Mood boards are widely used in Photographs and other images, colours,
advertising and interior design. Quite textures, shapes, headlines from
simply designers gather visual stimuli newspapers or magazines, quotations
that capture something of the feeling from people, pieces of fabric can all be
about the design. used to contribute to this.

The stimuli can be attached to a Designers can put pages from websites
physical pinboard or designers can they like on mood boards, video clips or
make use of an online tool such as snippets of animations that capture a
Pinterest. certain aesthetic
Mood boards
Mapping the interaction
 Navigation maps

Navigation is a key
feature for many
systems. Navigation
Navigation is
maps focus on how
important in all
people move through
manner of
the site or application.
applications and
The aim is to focus on
products, not just
how people will
websites.
experience the site.

Each page in the site, or

location in the application,
is represented with a box or
heading and every page
that can be accessed from
that page should flow from
it.
Navigation maps
Navigation maps
Wireframes
 Wireframes

Software packages are

available to help with
Wireframes are outlines of
Just as navigation maps developing wireframes.
the structure of a software
focus on how pages are The best known is Axure
system. They used to be
structured and linked Wireframes work because (www.axure.com) but
concerned principally with
together, so wireframes they focus on the general there are a number of
website design, but with
focus on the structure of elements of a design other alternatives. These
the proliferation of small-
particular types of pages. without worrying about provide templates that
scale apps for handheld
Use the two together and the final detail. constrain the design to the
and tablet devices,
you have the basics of an particular size and style of
wireframing has become a
app or website design. a particular delivery
mainstream technique.
platform such as an
iPhone.
Prototypes
 Prototypes
• A prototype is a concrete but partial
representation or implementation of a
1 system design. Prototypes are used
extensively in most design and
construction domains.
• Prototypes may be used to demonstrate
a concept (e.g. a prototype car) in early
2 design, to test details of that concept at
a later stage and sometimes as a
specification for the final product.
 Hi-fi prototypes
• Hi-fi prototypes are similar in look and feel, if not necessarily in
functionality, to the anticipated final product.
• Hi-fi prototyping has the following features:
a) It is useful for detailed evaluation of the main design elements (content,
visuals, interactivity, functionality and media) - for example, hi-fi prototypes
can be used in usability studies to establish whether people can learn to use
the system within a specified amount of time.
b) It often constitutes a crucial stage in client acceptance - as a kind of final design
document which the client must agree to before the final implementation.
c) It is generally developed fairly well into the project when ideas are beginning
to firm up, unless there is some crucial issue that needs to be resolved before
any other work can proceed
 Lo-fi prototypes
• Lo-fi prototypes - often termed paper prototypes, since that is what
they are usually made from - on the other hand, have the following
features:
a) They are more focused on the broad underlying design ideas - such as
content, form and structure, the ‘tone’ of the design, key functionality
requirements and navigational structure.
b) They are designed to be produced quickly, and thrown away as quickly.
c) They capture very early design thinking and should aid, not hinder, the
process of generating and evaluating many possible design solutions.
Lo-fi prototypes
Lo-fi prototypes
 Lo-fi prototypes
• The main practical issues with designing paper prototypes are as follows:
• Robustness. If a paper prototype is to be handled by lots of people it needs to be
tough enough to survive.
• Scope. Focus on broad issues and key elements; if you are trying to tell too detailed
a story it can be hard for users to understand.
• Instructions. There is a trade-off between adding enough detail for someone to be
able to use the prototype without the designer helping (in which case the
boundary between the design ideas and the supplementary information can be
hard to see) and adding so much detail that it needs someone to talk the person
through it (which may affect their responses).
• Flexibility. Have parts of the paper prototype adjustable so that people viewing it
can ‘redesign it’ on the fly, e.g. by using sticky notes to represent parts of the
screen where the user can move elements around or add new items.
 Video prototypes
• For over 20 years researchers have highlighted the potential of video as
a tool within the participatory design process, from initial observation,
through ideas generation and design exploration, what Mackay et al.
called ‘video brainstorming’ and ‘video prototyping’ (2000).
• Vertelney’s method (1989) involves the creation of a physical mock-up
model of the product; a video is then shot with an actor interacting (or
‘acting’) with the model as though it were fully functional.
• The second method suggested by Vertelney is what is sometimes
referred to as the ‘weatherman’ technique, where a video image is
superimposed onto computer graphics.
 Video prototypes
• What has changed in video prototyping are the tools used to create the
video material.
• The technology and computing power used for the production of
ground-breaking Hollywood visual effects, such as the liquid metal
T1000 in 1991’s Terminator 2, are now available to the sub-£1000
consumer market.
• The software tools used in professional film and television production,
such as Final Cut Pro (editing and postproduction) and Shake
(compositing) as well as Adobe’s After Effects (3D animation and
rendering) are all well within educational budgets (all are available
below £500 with higher education discounts).
 Video prototypes
• An example of video prototyping comes from a project investigating
embodiment issues of the concept of a companion based on the
following conceptual scenario:
• Lexi is a 3D projected figure that helps its guardian, Tom, by scheduling his
personal and work life, keeping him up to date with relevant news articles and
being first point of contact for e-mails, phone calls, text messages and the like.
Lexi is a mobile companion who can 'leap' from technology to technology as
necessary but is most fully realized when projected as a 3D figure on Tom's
tablet.
 Different approaches to
functionality in prototypes
• There are several other types of prototype that it is useful to
distinguish. A full prototype provides full functionality, but at a lower
performance than the target system.
• A horizontal prototype aims to go across the whole system, but deals only
with top-level functions, so much of the detail is omitted. In contrast, a
vertical prototype implements the full range of features, from top to bottom,
but is applied to only a small number of functions of the overall system.
Combinations of these are common. Evolutionary and incremental (a more
step-wise version of evolutionary) prototypes eventually develop into the full
system.
 Different approaches to
functionality in prototypes
Envisionment in practice
Envisionment in practice

Prototypes and • Lo-fi prototypes are an essential part of

participatory design because people cannot

participatory always understand formal models, but they

can explore and evaluate ideas through
engaging with prototyped systems. People can
design also be directly involved in prototype design.

• As with so many aspects of design, the

designer has to consider the trade-offs in
Trade-offs in terms of time, resources, the aim of the
evaluation, the stage of the project and so on.

prototyping
Indeed, when reflecting on how and what to
prototype, the designer should think in terms
of the PACT elements - people, activities,
contexts and technologies.
Envisionment in
practice
 Envisionment in practice

Rosson High-quality graphics and animation can be used to create convincing and
exciting prototypes but may also lead to premature commitment to some
and design decision.

Carroll Detailed special-purpose prototypes help to answer specific questions about a

design, but building a meaningful prototype for each issue is expensive.
(2002)
highlight Realistic prototypes increase the validity of user test data, but may postpone
some of testing, or require construction of throw-away prototypes.

these
Iterative refinement of an implementation enables continual testing and
trade-offs: feedback, but may discourage consideration of radical transformations.
 Envisionment in practice

Prototyping tools

• A good prototyping tool should:

• Allow easy, rapid modification of interface details or functionality
• For designers who are not programmers, allow direct manipulation of prototype components
• For incremental and evolutionary prototypes, facilitate reuse of code
• Not constrain the designer to default styles for interface objects.

Presenting designs

• Presenting design ideas clearly and appropriately is a key skill of the designer. The design process is
a long one, with many different stages, there are many different people involved and there are
many different reasons for giving a presentation. The combination of these will affect what sort of
presentation and what sort of representation are suitable.
Site Maps and Task Flows
 Basic Elements of Site Maps
and Task Flows
Page
A page is “the basic unit of user experience on the Web.” “instances” or “views” of content may be
more realistic today, but a page is still very meaningful. There are a number of ways to draw these
pages, but the simplest, most commonly used format is a plain rectangle (Figure 11.3). As you
progress through creating site maps and task flows, you will want to find the style that best suits you
for labeling and numbering your pages.

Source : Russ Unger (2012), Chapter 11

 Basic Elements of Site Maps
and Task Flows
Page stack
A page stack represents multiple pages of similar content. An easy way to comprehend page stacks is to
think of dynamic content, such as a common blog page created using a publishing system. These pages
Figure 11.4 Page element from Jesse James Garrett’s Visual Vocabulary are designed once and are in a
design template, but you have the ability to click through many different pages of content—without actually
leaving the
original template design.
Site Maps and Task Flows

Decision Point
A decision point is used to show the path that a user
can take depending on the answer to a question (Figure
11.5). The decision point 10a might be
“Are the user’s login credentials correct?” The answer
to that question would determine which page (or
content view) would be displayed. A failed login results
in an error message, while a successful one takes the
user to the site member’s home page. Take the time to
appropriately label decision points;
you’ll be glad you did, particularly when sharing your
work product with teammates or clients.
Site Maps and Task Flows
Connectors and Arrows
Connectors and arrows are used to show movement or progress
between pages, pagestacks, decision points, and so on.
Connectors generally appear where there is a call to action from
one page to another. For example, a link to the About Us page
from the Home page could be the connector between the two
pages. Arrows (top of Figure 11.6) indicate “downstream”
movement toward task completion.
Connectors with the crossbar (bottom of Figure 11.6) can be used
to identify when movement back to the page you originated from
(“upstream” movement) is no longer available. For example, once
a user is logged into a website, what was the home page content
may now be personalized for the user, and the generic page, or
the login page, will no longer be available to the user from the
path they just followed.
 Site Maps and Task Flows
Conditions
A dashed line is a fairly common way to display a condition. it can appear in
site maps, task flows, and other work products you may create or invent.
You can use a dashed line as a connector or as a box around an area to
highlight that a connection to a page—or an entire section of pages— is
conditional based on some other action or event
 Common mistakes
Sloppy connections (Figure 11.8) are just that: sloppy. They’re badly drawn.
They look very amateurish, and they give you—the author—the appearance of not paying a
lot of attention to detail in your work, to say the least. Most tools have some method of
assisting you with connecting your lines to your boxes. Please take advantage of it.
Take advantage of this built-in functionality and ensure that your connections are, well,
connected. if you are showing pencil sketches, you should have an eraser on hand just in case.
Make it a rule: Always make sure any lines that touch any other object are connected with
accuracy
 Common mistakes
Misaligned and Unevenly Spaced Objects
depending on the tool you are using, it can be difficult to ensure that your objects are accurately aligned
or evenly spaced apart on your site map or task flow. There are some fairly simple ways to ensure that you
get this basic rule down for starters, turn on the grid in whatever application you’re using. That way,
regardless of whether the tool offers options that ensure evenly spaced, Figure 11.8 A missed connection
between two pages Figure. For pages that are not aligned and are unevenly spaced appropriately aligned
objects, you can always count the number of grid units between your objects.
Fortunately, when you are using pencil and paper, you can use graph paper and apply the same basic
principle. it is that easy to make your documents look professional. Unfortunately
 Common mistakes
Poorly Placed Text
Careless text placement seems simple to avoid, yet it is another common mistake. Find a way to make your
text fit nicely in the shape you have created, and make sure any labels that are placed outside of their
elements have appropriate connections it may seem basic, but proper placement of your text—along with
appropriate
font size and usage—will make your documents easier to read and use
 Common mistakes
Lack of Page Numbering
it’s time to establish another rule: number every page of every site map that you create.
don’t create a vague, numberless map like the map shown in Figure.
Site Maps and Task Flows
A numbering system on your site maps allows
other documentation to sync up with it. The
numbering system can proliferate to other documents,
such as:
• Content matrix. Content creators can map their copy and
other content to specific pages (and to a specific element
in a wireframe; more on that later).
• Task flows. Task flows can use the same numbering system
to show how a user will proceed through the pages of a
specific task.
• Wireframes (see Chapter 12). The pages of your
wireframes should share the same numbering system as
the pages on your site map to provide a clear connection
between the two documents.
• Visual design. Visual designers can sync design pages and
elements to specific pages on your site map. This allows
them to segment their inventory when it is time to hand
off their designs to developers.
• Quality assurance documents. Quality assurance teams
may author testing scripts that are dedicated to a specific
page or pages on the site map.
 The Simple Site Map
The Simple Site Map
in addition to containing page numbers, Figure 11.13 is a good model for
creating the map of a basic website that has limited dynamic functionality
and mostly static nature. The pages identified for this website were:
 Home
 Blog
 About
 Samples of work
 Contact
As you can see, this simple site map incorporates the core elements from the
visual vocabulary and maintains a professional style and appearance. Most
importantly, it provides a very clear picture of the navigation, pages, and
conditions available to users of the website.
 Task Flows

Task flows are diagrams that identify a path or a process that users (and sometimes a system)
will take as they progress through your website or application .
We can use task flows in a number of different ways.
a) When used in conjunction with a site map they can show how a user arrives at a page with a specific set of information
displayed.
b) Sometimes they are used to show how a specific user type (a persona) would expect to traverse a website and what that
persona would expect to see based on their personal mental model.
c) You also can use task flows to identify complex processes that need to be clearly understood before the project is sent to the
development team.
d) You might not use task flows on every project that you work on, and they may not always end up as work product that you
present to your clients, but it is always a good idea to use them—even if just in a pencil-and-paper format for your own benefit.
e) A little clarity can go a long way. in order to create a task flow, you need to have an understanding of the user’s objective. in
some cases you will receive a requirements document, and in other cases you may receive (or author) a use case. Although a
use case consists of just a few sentences summarizing tasks and goals, it will allow you to synthesize the user’s view into the
experience.
Task flows

Alternative
 Task Flows
• The use case for the scenario shown in Figure 11.17 might look like this:
1. System displays project list
2. User selects a project
3. System displays basic project information, in Write mode
4. User changes the status of the project to Closed
5. System checks for pending tasks
6. If there are pending tasks, the system displays an error notice
7. If there are no pending tasks…
8. System checks for pending payments
9. If there are pending payments, the system displays an error notice
10. if there are no pending payments…
11. System displays summary page
Task flows
 Task Flows

If either question in the center

(“Pending tasks?” or “Pending payment
The task flow in the figure depicts the request?”) is answered with a yes, the
if both conditions are answered no, the
sequence of information displayed to system displays an error notice,
system provides the user with a display
a user based on whether a variety of potentially delivering additional
that identifies success.
conditions from the use case are met. information to help the user complete
the required tasks prior to making
forward progress.

The task flow is very high level in that it

The task flow shown in Figure 11.18
identifies three very different paths
shows the paths that a user could take
that require testing by users to ensure
from a calendar application through a
that the detailed flow for each path
travel-shopping site.
meets user needs.
Task Flows
 Taking Task Flows to the
Next Level

As with all the topics in this course , don’t feel as if what you are seeing here is
the beginning and end of the universe of task flows.

Explore new uses and expand your use of the basics outlined here as much as
possible—as long as there is a good purpose for it.

As your skills with creating task flows continue to grow, you may find yourself
creating a work product that is a bit more colorful, has more options,

includes modified or improved language rules, and so on.

 Task Flows

Swimlanes James Melzer (www.jamesmelzer.com), UX lead at EightShapes

(www.eightshapes.com), has created a number of diagrams that
extend far beyond the basic task flows.

The diagram shown in Figure 11.19 shows a task flow that was
extended to show “swimlanes” of actions, notifications, and so
on in a process that had a lot of events happening at the same
time—with this project a traditional approach to task flows could
have been a nightmare!

instead, James explored extending the basic task flow to

encompass all the various steps and actions taking place in a
format that was much easier to understand
SwimLanes
Example
 Task Flows
James described the project and swimlanes as follows:
a) The system lets people manage information about buildings they own.
b) This extension would allow building services partners to provide data system-to-system on behalf of their
customers, reducing the data entry needed from the owners.
c) The project had three parts: partners configuring the presentation and operation of their data services,
customers signing up and using the partner data services, and ongoing partner data management and
troubleshooting on the back end.
d) We were planning out a major extension to an existing system. We knew early on that nearly all the service
scenarios involved multiple users and multiple systems.
e) There were a number of notifications, and a lot of the processes were asynchronous.
f) This diagram helped us identify, design, and explain the service scenarios needed for the project.
g) in the full version of this work product, we actually had detailed wireframes arranged underneath the flows
in this diagram.
h) The whole thing covered a wall. once we were fairly confident in the design concept, we chopped it up into
a more traditional multipage specification.
Task Flows
 REFERENCES
• Benyon, David. (2019). Designing User Experience: A guide to HCI, UX
and interaction design (4th Edition). 04. Pearson. United Kingdom.
ISBN-13: 978-1292155517. Chapter 8
• Russ Unger and Carolyn Chandler. (2012). A Project Guide to UX
Design: for User Experience Designers in the Field or in The Making.
02. New Riders. Berkeley, CA. ISBN: 978-0-321-81538-5. Chapter 12