Paper Prototyping and Wireframes

welcome to
USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES
Lecturer
Itamar Medeiros (Brazil)
BA in Industrial Design;
PgDip in Information Design; 1 /66

Expertise
Multimedia/Web Design,
Photography, Information Design
and Human-Computer Interaction.

LESSON 06:

learning outcome

Students will understand principles of
creating sensible, comprehensible,
2 /66
memorable, and convenient

organization of the content and the
tasks to be performed on their
interactive product.

LESSON 06:

content

Students will learn the concept of
Paper Prototyping and what are the
3 /66
most commonly used techniques for

developing user interface prototypes.


One diﬃculty in designing interactive
systems is that clients and users may
not have a clear idea of what the
system will look like when it is done. 4 /66

Since interactive systems are novel in
many situations, users may not realize
the implications of design decisions.


Unfortunately, it is diﬃcult, costly, and
time-consuming to make major
changes to systems once those
systems have been implemented. 5 /66



Even though this problem has not
complete solution, some of the more
serious diﬃculties can be avoided if,
at an early stage, the customers and 6 /66
users can be given a realistic

impression of what the ﬁnal system
will look like.

Such realistic impressions may be
rendered by the use of prototypes*.

prototypes | 原型

One of the ﬁrst units manufactured of a
product, which is tested so that the
design can be changed if necessary
before the product is manufactured 7 /66
commercially

一项生产商品的雏形，需要进行测
试以对设计进行适当的调整。随
后才将此产品投入商业生产


Interaction Designers have soon realized
that more important than allowing us to
pre-visualize how the ﬁnal system will
look like, such prototypes must also 8 /66
help us to review or test the

information/interaction ﬂow of it.


One of the most celebrated techniques to
create such paper prototypes – devised
by information architects – it’s to create
information architecture diagrams
called Wireframes*. 12/66


wireframes | 线框

Wireframes are a basic grid system* used
to suggest the layout and placement of
fundamental design elements* in the
interface design.
13/66

基础的格子系统，用于在界面设计

中将基础的设计元素进行排版或
放置

grid system | 格子系统

The structural foundation that
establishes alignment and hierarchy of
the design elements on a layout.

在版面上创建设计元素位置及层次 14/66

的结构基础。

design elements | 设计元素

The elements which a designer can use
in a layout -- such as text, images,
symbols, colors, textures -- to compose
a visual message.
15/66

这些元素指的是在排版中设计师可

以使用的元素，如：文字，图
片，记号，颜色，纹理等等，这
些元素可以构成视觉信息。

WIREFRAMES
grid systems for interaction

Because the only suggest the layout of the
system, they must be completed before
any artwork is developed.
16/66


WIREFRAMES

Let’s think of wireframes as grids systems
that help us -- based on the information
architecture of a given product -- create
information hierarchy that allow us
layout both the content and the 17/66

navigation of an interactive system.


WIREFRAMES
grid systems & visual organization

When completed correctly they will
provide a visual reference upon
which to structure each part of an
interactive system.
18/66

They also allow for the development of

variations of a layout to maintain
design consistency* throughout the
system.

WIREFRAMES
consistency | 一致性

The conscious eﬀort the designer makes to
create a coherent system that ties all
the design elements of a layout.
视觉一致性质的是设计师通过其努 19/66

力将版面中所有的设计元素组成

一个整体的系统。

WIREFRAMES
consistency | 一致性

The consistent appearance, placement,
and meaning of important design
elements helps users know what to
expect from the interface, and make it
easier for them to interpret and 20/66

respond to new interaction situations

as they arise.
一致的外表，排列，重要设计元素的意
义可以帮助了解在这些界面中可以获
取什么。并使得用户在遇到新的交互
式情况时可以更好的理解并做出反
应。

WIREFRAMES

Let’s think of wireframes as grids systems
that help us -- based on the information
architecture of a given product -- create
information hierarchy that allow us
layout both the content and the 21/66

navigation of an interactive system.


VISUAL ORGANIZATION
principles of perception

Whenever we attempt to make sense of
information visually, we ﬁrst observe
similarities and diﬀerences in what we
are seeing. 24/66

These relationships allow us to not only
distinguish objects but to give them
meaning.

VISUAL ORGANIZATION
principles of perception

Similarities and diﬀerences provides visual
distinctions, which are the building
blocks of meaning in a visual message.
25/66
The dimensions along which visual

contrast can be drawn include shape,
size, color, texture, position,
orientation, and movement.

PRINCIPLES OF PERCEPTION
visual relationships

The principles of perception give us
valuable insight into how we visually
group information.
30/66


proximity | 接近性

A Gestalt principle of organization holding
that (other things being equal) objects
or events that are near to one another
(in space or time) are perceived as 32/66
belonging together as a unit.

格式塔原理，那些物体或项目在时
间或空间上相近被看作为一整
体。

similarity | 相似性

A Gestalt principle of organization holding
that (other things being equal) parts of
a stimulus ﬁeld that are similar to
each other tend to be perceived as 33/66
belonging together as a unit.


continuance | 延续性

The act of continuing an activity without
interruption. In design, is the
expectation that users have that a
system will continue to behave/ 34/66
interact as it is currently does.

是一延续的行为。在设计中，期
望用户能延续自己一贯的行
为。

closure | 封闭

A Gestalt principle that refers to the way
that we mentally ﬁll in gaps where
there is missing information in a
stimulus. 35/66

格式塔原理，指的是人的头脑会将
物体缺失部分连接起来。

visual relationships

If we want to be able to communicate a
speciﬁc message, we need to
understand the psychological
manner in which we group visual 36/66
information.

We need to know how to use visual
relationships to our advantage -- we
need to know what makes things
diﬀerent -- creating visual hierarchies.

VISUAL HIERARCHY

To build eﬀective visual hierarchies, we use
visual relationships to add more or less
visual weight to page elements and
thereby establish a pattern of 37/66
movement through the layout.

Manipulating the attributes of
scale, contrast and proportion helps
us establish that hierarchy.

VISUAL HIERARCHY

A balanced hierarchy provides not only a
clear path for recognizing and
understanding information, it also
helps unify the disparate elements 38/66
within a page layout into a cohesive

whole.

This creates a sense of order and balance.
Without visual hierarchy, page
elements compete for attention, and
as a result, none of them win.

VISUAL HIERARCHY
grid system for information architecture

Any given interactive system is composed
of many distinct elements. Navigation
menus (possibly several layers deep),
contact information, search boxes, 40/66
system identiﬁers, and shopping carts

are just a few.

VISUAL HIERARCHY

The visual organization of an interactive
system can communicate valuable
information about the similarities and
diﬀerences between elements and their 41/66
relative importance.


VISUAL HIERARCHY

Once your audience understands the
signiﬁcance of your page elements,
they can apply that knowledge to the
rest of the system. 42/66


VISUAL HIERARCHY
grid system elements

Generally, the hierarchy of an interactive
system is based on distinctions between
the content, navigation, and
supporting information on a page. 44/66
Within each of these sections further

distinctions can also be made.

A general system hierarchy (from highest
to lowest importance) may look like the
following:

VISUAL HIERARCHY
grid system elements

Content

Navigation

Supporting Elements 45/66


GRID SYSTEM ELEMENTS
content/navigation/supporting elements

Content
Page title
Subsection title
Embedded links 47/66
Supplementary information (captions, references, etc.)



Navigation
Location indicator
Top-level navigation options
Sub-navigation options 50/66
Trace route (breadcrumbs)



Supporting elements
Site identiﬁer
Site-wide utilities (shopping cart, site map, etc.)
Footer information (privacy policy, contact info, etc.) 53/66


wireframes

Visual hierarchy can provide users with a
sense of where they are within an
interactive system, to direct their
attention (to special oﬀers, for 56/66
example), to suggest distinct choices,

to explain new elements, and so on.

Keep this in mind while designing your
system’s wireframes.

WIREFRAMES
for which pages should wireframes

be created for?
Any page that requires client approval or
represent major subsection of the
system and require a distinct layout
and functionality. These pages may 57/66
include but not limited to:

Home page;
Major portal pages to sub-sites;
Template pages to grouped content;
Discussion forums;
Search results page;
404 Error page;

ACTIVITY #7:
studying commercial website wireframes

For each of the websites below:
http://cn.news.yahoo.com/
http://www.netdiver.net/
http://www.mediainspiration.com
http://www.wired.com/ 58/66

Make sketches of wireframes where the
following information architecture
elements can be allocated:

ACTIVITY #7:
studying commercial website wireframes

CONTENT
page titles subsection titles
body text embedded links
images, references, captions
59/66

NAVIGATION

location indicator top-level navigation option
sub-navigation options breadcrumbs

SUPPORTING INFORMATION
site identiﬁers advertisement spaces
site-wide utilities (shopping cart, sitemap, search tools, , etc)
footer information (privacy policy, contact, FAQs, etc.)

WIREFRAMES
pros

Demonstrates a interactive system concept
quickly, allowing clients to react to
content placement and rendering;
60/66
Can provide guidance to visual designers

with respect to information priorities;

Allows for usability testing early in the
project life-cycle;

WIREFRAMES
pros

Can elaborate on a singular vision for the
interactive system;

Can facilitate collaboration between
61/66
design team and information

architects;

Is easy for clients to understand.

WIREFRAMES
cons

Hinders creativity and innovation by
imposing (real or imagined) limits on
design team;
62/66
Distracts client from tasks at hand:

evaluating page priorities,
understanding information
relationships;

WIREFRAMES
cons

Does not consider color, typography, and
other brand identity elements;

Does not provide accurate usability
63/66
testing results;

Relies on other documentation to
provide a complete picture;

ASSIGNMENT #2 [GROUPS]:
information architecture document

due to week 09
Groups must prepare 20 (twenty) minutes
presentation -- at least 12 (twelve)
slides -- in which they will present, in
English, the information architecture 64/66
document of their product.

The presentation must include a complete
navigation ﬂow diagram (a site map)
and -- no less -- than 3 (three) diﬀerent
wireframes.

HOMEWORK [ INDIVIDUAL ]
sketchbook

1. Choose 5 (five) words marked with asterisks
(*) you’ve seen in this class and create 5 (five)
posters -- one for each word -- on separate
pages of your sketchbook; 65/66

2. Each poster must include:
-The word chosen, with its English definition;
-3 (three) pictures;
-2 (two) websites;
-Your comments/impressions of the definition.

tags
HOMEWORK [ INDIVIDUAL ]

USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES
66/66

Paper Prototyping and Wireframes

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Paper Prototyping and Wireframes

Ähnlich wie Paper Prototyping and Wireframes (20)

Mehr von Itamar Medeiros

Mehr von Itamar Medeiros (20)

Paper Prototyping and Wireframes