uid: lesson 06 -wireframes & paper pro to typing
DESCRIPTION
In this class, student will be introduced to the concept paper prototyping and one technique called designing WIREFRAMES.TRANSCRIPT
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
welcome toUSER INTERACTION DESIGN
LecturerItamar Medeiros (Brazil)BA in Industrial Design;PgDip in Information Design;
ExpertiseMultimedia/Web Design, Photography, Information Design and Human-Computer Interaction.
1
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
LESSON 06:PAPER PROTOTYPING & WIREFRAMES learning outcome
Students will understand principles of creating sensible, comprehensible, memorable, and convenient organization of the content and the tasks to be performed on their interactive product.
2
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
LESSON 06:PAPER PROTOTYPING & WIREFRAMES content
Students will learn the concept ofPaper Prototyping and what are the most commonly used techniques for developing user interface prototypes.
3
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
PAPER PROTOTYPING & WIREFRAMES
One difficulty 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.
Since interactive systems are novel in many situations, users may not realize the implications of design decisions.
4
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
PAPER PROTOTYPING & WIREFRAMES
Unfortunately, it is difficult, costly, and time-consuming to make major changes to systems once those systems have been implemented.
5
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
PAPER PROTOTYPING & WIREFRAMES
Even though this problem has not complete solution, some of the more serious difficulties can be avoided if, at an early stage, the customers and users can be given a realistic impression of what the final system will look like.
Such realistic impressions may be rendered by the use of prototypes*.
6
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
PAPER PROTOTYPING & WIREFRAMESprototypes | 原型
One of the first units manufactured of a product, which is tested so that the design can be changed if necessary before the product is manufactured commercially
一项生产商品的雏形，需要进行测试以对设计进行适当的调整。随后才将此产品投入商业生产
7
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
PAPER PROTOTYPING & WIREFRAMES
Interaction Designers have soon realized that more important than allowing us to pre-visualize how the final system will look like, such prototypes must also help us to review or test the information/interaction flow of it.
8
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
PAPER PROTOTYPING & WIREFRAMES
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
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
PAPER PROTOTYPING & WIREFRAMESwireframes | 线框
Wireframes are a basic grid system* used to suggest the layout and placement of fundamental design elements* in the interface design.
基础的格子系统，用于在界面设计中将基础的设计元素进行排版或放置
13
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
PAPER PROTOTYPING & WIREFRAMESgrid system | 格子系统
The structural foundation that establishes alignment and hierarchy of the design elements on a layout.
在版面上创建设计元素位置及层次的结构基础。
14
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
PAPER PROTOTYPING & WIREFRAMESdesign elements | 设计元素
The elements which a designer can use in a layout -- such as text, images, symbols, colors, textures -- to compose a visual message.
这些元素指的是在排版中设计师可以使用的元素，如：文字，图片，记号，颜色，纹理等等，这些元素可以构成视觉信息。
15
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
WIREFRAMESgrid systems for interaction
Because the only suggest the layout of the system, they must be completed before any artwork is developed.
16
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
WIREFRAMESgrid systems for interaction
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 navigation of an interactive system.
17
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
WIREFRAMESgrid systems & visual organization
When completed correctly they will provide a visual reference upon which to structure each part of an interactive system.
They also allow for the development of variations of a layout to maintain design consistency* throughout the system.
18
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
WIREFRAMESconsistency | 一致性
The conscious effort the designer makes to create a coherent system that ties all the design elements of a layout.
视觉一致性质的是设计师通过其努力将版面中所有的设计元素组成一个整体的系统。
19
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
WIREFRAMESconsistency | 一致性
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 respond to new interaction situations as they arise.
一致的外表，排列，重要设计元素的意义可以帮助了解在这些界面中可以获取什么。并使得用户在遇到新的交互式情况时可以更好的理解并做出反应。
20
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
WIREFRAMESgrid systems for interaction
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 navigation of an interactive system.
21
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
VISUAL ORGANIZATIONprinciples of perception
Whenever we attempt to make sense of information visually, we first observe similarities and differences in what we are seeing.
These relationships allow us to not only distinguish objects but to give them meaning.
24
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
VISUAL ORGANIZATIONprinciples of perception
Similarities and differences provides visual distinctions, which are the building blocks of meaning in a visual message.
The dimensions along which visual contrast can be drawn include shape, size, color, texture, position, orientation, and movement.
25
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
PRINCIPLES OF PERCEPTIONvisual relationships
The principles of perception give us valuable insight into how we visually group information.
30
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
PRINCIPLES OF PERCEPTIONproximity | 接近性
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 belonging together as a unit.
格式塔原理，那些物体或项目在时间或空间上相近被看作为一整体。
32
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
PRINCIPLES OF PERCEPTIONsimilarity | 相似性
A Gestalt principle of organization holding that (other things being equal) parts of a stimulus field that are similar to each other tend to be perceived as belonging together as a unit.
33
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
PRINCIPLES OF PERCEPTIONcontinuance | 延续性
The act of continuing an activity without interruption. In design, is the expectation that users have that a system will continue to behave/interact as it is currently does.
是一种延续的行为。在设计中，期望用户能够延续自己一贯的行为。
34
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
PRINCIPLES OF PERCEPTIONclosure | 封闭
A Gestalt principle that refers to the way that we mentally fill in gaps where there is missing information in a stimulus.
格式塔原理，指的是人的头脑会将物体缺失部分连接起来。
35
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
PRINCIPLES OF PERCEPTIONvisual relationships
If we want to be able to communicate a specific message, we need to understand the psychological manner in which we group visual information.
We need to know how to use visual relationships to our advantage -- we need to know what makes things different -- creating visual hierarchies.
36
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
VISUAL HIERARCHY
To build effective visual hierarchies, we use visual relationships to add more or less visual weight to page elements and thereby establish a pattern of movement through the layout.
Manipulating the attributes ofscale, contrast and proportion helps us establish that hierarchy.
37
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
VISUAL HIERARCHY
A balanced hierarchy provides not only a clear path for recognizing and understanding information, it also helps unify the disparate elements 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.
38
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
VISUAL HIERARCHYgrid system for information architecture
Any given interactive system is composed of many distinct elements. Navigation menus (possibly several layers deep), contact information, search boxes, system identifiers, and shopping carts are just a few.
40
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
VISUAL HIERARCHYgrid system for information architecture
The visual organization of an interactive system can communicate valuable information about the similarities and differences between elements and their relative importance.
41
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
VISUAL HIERARCHYgrid system for information architecture
Once your audience understands the significance of your page elements, they can apply that knowledge to the rest of the system.
42
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
VISUAL HIERARCHYgrid system elements
Generally, the hierarchy of an interactive system is based on distinctions between the content, navigation, and supporting information on a page. 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:
44
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
VISUAL HIERARCHYgrid system elements
Content
Navigation
Supporting Elements 45
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
GRID SYSTEM ELEMENTScontent/navigation/supporting elements
ContentPage titleSubsection titleEmbedded linksSupplementary information (captions, references, etc.)
47
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
GRID SYSTEM ELEMENTScontent/navigation/supporting elements
NavigationLocation indicatorTop-level navigation optionsSub-navigation optionsTrace route (breadcrumbs)
50
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
GRID SYSTEM ELEMENTScontent/navigation/supporting elements
Supporting elementsSite identifierSite-wide utilities (shopping cart, site map, etc.)Footer information (privacy policy, contact info, etc.)
53
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
GRID SYSTEM ELEMENTSwireframes
Visual hierarchy can provide users with a sense of where they are within an interactive system, to direct their attention (to special offers, for example), to suggest distinct choices, to explain new elements, and so on.
Keep this in mind while designing your system’s wireframes.
56
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
WIREFRAMESfor which pages should wireframesbe 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 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;
57
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
ACTIVITY #7:studying commercial website wireframes
For each of the websites below:http://cn.news.yahoo.com/http://www.netdiver.net/http://www.mediainspiration.comhttp://www.wired.com/
Make sketches of wireframes where the following information architecture elements can be allocated:
58
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
ACTIVITY #7:studying commercial website wireframes
CONTENTpage titles subsection titlesbody text embedded linksimages, references, captions
NAVIGATIONlocation indicator top-level navigation optionsub-navigation options breadcrumbs
SUPPORTING INFORMATIONsite identifiers advertisement spacessite-wide utilities (shopping cart, sitemap, search tools, , etc)footer information (privacy policy, contact, FAQs, etc.)
59
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
WIREFRAMESpros
Demonstrates a interactive system concept quickly, allowing clients to react to content placement and rendering;
Can provide guidance to visual designers with respect to information priorities;
Allows for usability testing early in the project life-cycle;
60
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
WIREFRAMESpros
Can elaborate on a singular vision for the interactive system;
Can facilitate collaboration between design team and information architects;
Is easy for clients to understand.
61
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
WIREFRAMEScons
Hinders creativity and innovation by imposing (real or imagined) limits on design team;
Distracts client from tasks at hand: evaluating page priorities, understanding information relationships;
62
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
WIREFRAMEScons
Does not consider color, typography, and other brand identity elements;
Does not provide accurate usability testing results;
Relies on other documentation to provide a complete picture;
63
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
ASSIGNMENT #2 [GROUPS]:information architecture documentdue 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 document of their product.
The presentation must include a complete navigation flow diagram (a site map) and -- no less -- than 3 (three) different wireframes.
64
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
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;
2. Each poster must include:-The word chosen, with its English definition;-3 (three) pictures;-2 (two) websites;-Your comments/impressions of the definition.
65
USE
R IN
TERA
CTIO
N D
ESIG
NPA
PER
PROT
OTYP
ING
& W
IREF
RAM
ES
/66
HOMEWORK [ INDIVIDUAL ] tags
66