welcome toUSER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMESLecturer Itamar Medeiros (Brazil) BA in Industrial Design; PgDip in Information Design; 1 /66 USER INTERACTION DESIGNExpertise Multimedia/Web Design, Photography, Information Design and Human-Computer Interaction.
LESSON 06:PAPER PROTOTYPING & WIREFRAMES PAPER PROTOTYPING & WIREFRAMESlearning outcomeStudents will understand principles of creating sensible, comprehensible, 2 /66 memorable, and convenient USER INTERACTION DESIGN organization of the content and the tasks to be performed on their interactive product.
LESSON 06:PAPER PROTOTYPING & WIREFRAMES PAPER PROTOTYPING & WIREFRAMEScontentStudents will learn the concept of Paper Prototyping and what are the 3 /66 most commonly used techniques for USER INTERACTION DESIGN developing user interface prototypes.
PAPER PROTOTYPING & WIREFRAMES PAPER PROTOTYPING & WIREFRAMESOne 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 USER INTERACTION DESIGNSince interactive systems are novel in many situations, users may not realize the implications of design decisions.
PAPER PROTOTYPING & WIREFRAMES PAPER PROTOTYPING & WIREFRAMESUnfortunately, it is diﬃcult, costly, and time-consuming to make major changes to systems once those systems have been implemented. 5 /66 USER INTERACTION DESIGN
PAPER PROTOTYPING & WIREFRAMES PAPER PROTOTYPING & WIREFRAMESEven 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 USER INTERACTION DESIGN impression of what the ﬁnal system will look like.Such realistic impressions may be rendered by the use of prototypes*.
PAPER PROTOTYPING & WIREFRAMESprototypes | 原型 PAPER PROTOTYPING & WIREFRAMESOne 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 USER INTERACTION DESIGN一项生产商品的雏形，需要进行测 试以对设计进行适当的调整。随 后才将此产品投入商业生产
PAPER PROTOTYPING & WIREFRAMES PAPER PROTOTYPING & WIREFRAMESInteraction 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 USER INTERACTION DESIGN information/interaction ﬂow of it.
PAPER PROTOTYPING & WIREFRAMES PAPER PROTOTYPING & WIREFRAMESOne 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 USER INTERACTION DESIGN
PAPER PROTOTYPING & WIREFRAMESwireframes | 线框 PAPER PROTOTYPING & WIREFRAMESWireframes are a basic grid system* used to suggest the layout and placement of fundamental design elements* in the interface design. 13/66基础的格子系统，用于在界面设计 USER INTERACTION DESIGN 中将基础的设计元素进行排版或 放置
PAPER PROTOTYPING & WIREFRAMESgrid system | 格子系统 PAPER PROTOTYPING & WIREFRAMESThe structural foundation that establishes alignment and hierarchy of the design elements on a layout.在版面上创建设计元素位置及层次 14/66 USER INTERACTION DESIGN 的结构基础。
PAPER PROTOTYPING & WIREFRAMESdesign elements | 设计元素 PAPER PROTOTYPING & WIREFRAMESThe elements which a designer can use in a layout -- such as text, images, symbols, colors, textures -- to compose a visual message. 15/66这些元素指的是在排版中设计师可 USER INTERACTION DESIGN 以使用的元素，如：文字，图 片，记号，颜色，纹理等等，这 些元素可以构成视觉信息。
WIREFRAMESgrid systems for interaction PAPER PROTOTYPING & WIREFRAMESBecause the only suggest the layout of the system, they must be completed before any artwork is developed. 16/66 USER INTERACTION DESIGN
WIREFRAMESgrid systems for interaction PAPER PROTOTYPING & WIREFRAMESLet’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. USER INTERACTION DESIGN
WIREFRAMESgrid systems & visual organization PAPER PROTOTYPING & WIREFRAMESWhen completed correctly they will provide a visual reference upon which to structure each part of an interactive system. 18/66They also allow for the development of USER INTERACTION DESIGN variations of a layout to maintain design consistency* throughout the system.
WIREFRAMESconsistency | 一致性 PAPER PROTOTYPING & WIREFRAMESThe conscious eﬀort the designer makes to create a coherent system that ties all the design elements of a layout.视觉一致性质的是设计师通过其努 19/66 力将版面中所有的设计元素组成 USER INTERACTION DESIGN 一个整体的系统。
WIREFRAMESconsistency | 一致性 PAPER PROTOTYPING & WIREFRAMESThe 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 USER INTERACTION DESIGN as they arise.一致的外表，排列，重要设计元素的意 义可以帮助了解在这些界面中可以获 取什么。并使得用户在遇到新的交互 式情况时可以更好的理解并做出反 应。
WIREFRAMESgrid systems for interaction PAPER PROTOTYPING & WIREFRAMESLet’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. USER INTERACTION DESIGN
VISUAL ORGANIZATIONprinciples of perception PAPER PROTOTYPING & WIREFRAMESWhenever we attempt to make sense of information visually, we ﬁrst observe similarities and diﬀerences in what we are seeing. 24/66 USER INTERACTION DESIGNThese relationships allow us to not only distinguish objects but to give them meaning.
VISUAL ORGANIZATIONprinciples of perception PAPER PROTOTYPING & WIREFRAMESSimilarities and diﬀerences provides visual distinctions, which are the building blocks of meaning in a visual message. 25/66The dimensions along which visual USER INTERACTION DESIGN contrast can be drawn include shape, size, color, texture, position, orientation, and movement.
PRINCIPLES OF PERCEPTIONvisual relationships PAPER PROTOTYPING & WIREFRAMESThe principles of perception give us valuable insight into how we visually group information. 30/66 USER INTERACTION DESIGN
PRINCIPLES OF PERCEPTIONproximity | 接近性 PAPER PROTOTYPING & WIREFRAMESA 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. USER INTERACTION DESIGN格式塔原理，那些物体或项目在时 间或空间上相近被看作为一整 体。
PRINCIPLES OF PERCEPTIONsimilarity | 相似性 PAPER PROTOTYPING & WIREFRAMESA 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. USER INTERACTION DESIGN
PRINCIPLES OF PERCEPTIONcontinuance | 延续性 PAPER PROTOTYPING & WIREFRAMESThe 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. USER INTERACTION DESIGN是一 延续的行为。在设计中，期 望用户能 延续自己一贯的行 为。
PRINCIPLES OF PERCEPTIONclosure | 封闭 PAPER PROTOTYPING & WIREFRAMESA Gestalt principle that refers to the way that we mentally ﬁll in gaps where there is missing information in a stimulus. 35/66 USER INTERACTION DESIGN格式塔原理，指的是人的头脑会将 物体缺失部分连接起来。
PRINCIPLES OF PERCEPTIONvisual relationships PAPER PROTOTYPING & WIREFRAMESIf 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. USER INTERACTION DESIGNWe 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 PAPER PROTOTYPING & WIREFRAMESTo 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. USER INTERACTION DESIGNManipulating the attributes of scale, contrast and proportion helps us establish that hierarchy.
VISUAL HIERARCHY PAPER PROTOTYPING & WIREFRAMESA 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 USER INTERACTION DESIGN 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 HIERARCHYgrid system for information architecture PAPER PROTOTYPING & WIREFRAMESAny 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 USER INTERACTION DESIGN are just a few.
VISUAL HIERARCHYgrid system for information architecture PAPER PROTOTYPING & WIREFRAMESThe visual organization of an interactive system can communicate valuable information about the similarities and diﬀerences between elements and their 41/66 relative importance. USER INTERACTION DESIGN
VISUAL HIERARCHYgrid system for information architecture PAPER PROTOTYPING & WIREFRAMESOnce your audience understands the signiﬁcance of your page elements, they can apply that knowledge to the rest of the system. 42/66 USER INTERACTION DESIGN
VISUAL HIERARCHYgrid system elements PAPER PROTOTYPING & WIREFRAMESGenerally, 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 USER INTERACTION DESIGN distinctions can also be made.A general system hierarchy (from highest to lowest importance) may look like the following:
VISUAL HIERARCHYgrid system elements PAPER PROTOTYPING & WIREFRAMESContentNavigationSupporting Elements 45/66 USER INTERACTION DESIGN
GRID SYSTEM ELEMENTScontent/navigation/supporting elements PAPER PROTOTYPING & WIREFRAMESContent Page title Subsection title Embedded links 47/66 Supplementary information (captions, references, etc.) USER INTERACTION DESIGN
GRID SYSTEM ELEMENTScontent/navigation/supporting elements PAPER PROTOTYPING & WIREFRAMESNavigation Location indicator Top-level navigation options Sub-navigation options 50/66 Trace route (breadcrumbs) USER INTERACTION DESIGN
GRID SYSTEM ELEMENTSwireframes PAPER PROTOTYPING & WIREFRAMESVisual 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, USER INTERACTION DESIGN to explain new elements, and so on.Keep this in mind while designing your system’s wireframes.
WIREFRAMESfor which pages should wireframes PAPER PROTOTYPING & 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 57/66 include but not limited to: USER INTERACTION DESIGN 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 PAPER PROTOTYPING & WIREFRAMESFor each of the websites below: http://cn.news.yahoo.com/ http://www.netdiver.net/ http://www.mediainspiration.com http://www.wired.com/ 58/66 USER INTERACTION DESIGNMake sketches of wireframes where the following information architecture elements can be allocated:
WIREFRAMESpros PAPER PROTOTYPING & WIREFRAMESDemonstrates a interactive system concept quickly, allowing clients to react to content placement and rendering; 60/66Can provide guidance to visual designers USER INTERACTION DESIGN with respect to information priorities;Allows for usability testing early in the project life-cycle;
WIREFRAMESpros PAPER PROTOTYPING & WIREFRAMESCan elaborate on a singular vision for the interactive system;Can facilitate collaboration between 61/66 design team and information USER INTERACTION DESIGN architects;Is easy for clients to understand.
WIREFRAMEScons PAPER PROTOTYPING & WIREFRAMESHinders creativity and innovation by imposing (real or imagined) limits on design team; 62/66Distracts client from tasks at hand: USER INTERACTION DESIGN evaluating page priorities, understanding information relationships;
WIREFRAMEScons PAPER PROTOTYPING & WIREFRAMESDoes not consider color, typography, and other brand identity elements;Does not provide accurate usability 63/66 testing results; USER INTERACTION DESIGNRelies on other documentation to provide a complete picture;
ASSIGNMENT #2 [GROUPS]:information architecture document PAPER PROTOTYPING & WIREFRAMESdue to week 09Groups 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. USER INTERACTION DESIGNThe presentation must include a complete navigation ﬂow diagram (a site map) and -- no less -- than 3 (three) diﬀerent wireframes.
HOMEWORK [ INDIVIDUAL ]sketchbook PAPER PROTOTYPING & WIREFRAMES1. Choose 5 (ﬁve) words marked with asterisks (*) you’ve seen in this class and create 5 (ﬁve) posters -- one for each word -- on separate pages of your sketchbook; 65/66 USER INTERACTION DESIGN2. Each poster must include: -The word chosen, with its English deﬁnition; -3 (three) pictures; -2 (two) websites; -Your comments/impressions of the deﬁnition.