Your SlideShare is downloading. ×
Paper Prototyping and Wireframes
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Paper Prototyping and Wireframes

1,000
views

Published on

Students will learn the concept of Paper Prototyping and what are the most commonly used techniques for developing user interface prototypes.

Students will learn the concept of Paper Prototyping and what are the most commonly used techniques for developing user interface prototypes.


0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,000
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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.
  • 2. 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.
  • 3. 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.
  • 4. PAPER PROTOTYPING & WIREFRAMES PAPER PROTOTYPING & WIREFRAMESOne 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. 4 /66 USER INTERACTION DESIGNSince interactive systems are novel in many situations, users may not realize the implications of design decisions.
  • 5. PAPER PROTOTYPING & WIREFRAMES PAPER PROTOTYPING & WIREFRAMESUnfortunately, it is difficult, costly, and time-consuming to make major changes to systems once those systems have been implemented. 5 /66 USER INTERACTION DESIGN
  • 6. PAPER PROTOTYPING & WIREFRAMES PAPER PROTOTYPING & WIREFRAMESEven though this problem has not complete solution, some of the more serious difficulties 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 final system will look like.Such realistic impressions may be rendered by the use of prototypes*.
  • 7. PAPER PROTOTYPING & WIREFRAMESprototypes | 原型 PAPER PROTOTYPING & WIREFRAMESOne 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 7 /66 commercially USER INTERACTION DESIGN一项生产商品的雏形,需要进行测 试以对设计进行适当的调整。随 后才将此产品投入商业生产
  • 8. PAPER PROTOTYPING & WIREFRAMES PAPER PROTOTYPING & WIREFRAMESInteraction Designers have soon realized that more important than allowing us to pre-visualize how the final system will look like, such prototypes must also 8 /66 help us to review or test the USER INTERACTION DESIGN information/interaction flow of it.
  • 9. 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
  • 10. 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 中将基础的设计元素进行排版或 放置
  • 11. 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 的结构基础。
  • 12. 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 以使用的元素,如:文字,图 片,记号,颜色,纹理等等,这 些元素可以构成视觉信息。
  • 13. 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
  • 14. 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
  • 15. 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.
  • 16. WIREFRAMESconsistency | 一致性 PAPER PROTOTYPING & WIREFRAMESThe conscious effort the designer makes to create a coherent system that ties all the design elements of a layout.视觉一致性质的是设计师通过其努 19/66 力将版面中所有的设计元素组成 USER INTERACTION DESIGN 一个整体的系统。
  • 17. 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.一致的外表,排列,重要设计元素的意 义可以帮助了解在这些界面中可以获 取什么。并使得用户在遇到新的交互 式情况时可以更好的理解并做出反 应。
  • 18. 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
  • 19. VISUAL ORGANIZATIONprinciples of perception PAPER PROTOTYPING & WIREFRAMESWhenever we attempt to make sense of information visually, we first observe similarities and differences in what we are seeing. 24/66 USER INTERACTION DESIGNThese relationships allow us to not only distinguish objects but to give them meaning.
  • 20. VISUAL ORGANIZATIONprinciples of perception PAPER PROTOTYPING & WIREFRAMESSimilarities and differences 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.
  • 21. 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
  • 22. 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格式塔原理,那些物体或项目在时 间或空间上相近被看作为一整 体。
  • 23. PRINCIPLES OF PERCEPTIONsimilarity | 相似性 PAPER PROTOTYPING & WIREFRAMESA 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 33/66 belonging together as a unit. USER INTERACTION DESIGN
  • 24. 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是一 延续的行为。在设计中,期 望用户能 延续自己一贯的行 为。
  • 25. PRINCIPLES OF PERCEPTIONclosure | 封闭 PAPER PROTOTYPING & WIREFRAMESA Gestalt principle that refers to the way that we mentally fill in gaps where there is missing information in a stimulus. 35/66 USER INTERACTION DESIGN格式塔原理,指的是人的头脑会将 物体缺失部分连接起来。
  • 26. PRINCIPLES OF PERCEPTIONvisual relationships PAPER PROTOTYPING & WIREFRAMESIf we want to be able to communicate a specific 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 different -- creating visual hierarchies.
  • 27. VISUAL HIERARCHY PAPER PROTOTYPING & WIREFRAMESTo build effective 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.
  • 28. 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.
  • 29. 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 identifiers, and shopping carts USER INTERACTION DESIGN are just a few.
  • 30. VISUAL HIERARCHYgrid system for information architecture PAPER PROTOTYPING & WIREFRAMESThe visual organization of an interactive system can communicate valuable information about the similarities and differences between elements and their 41/66 relative importance. USER INTERACTION DESIGN
  • 31. VISUAL HIERARCHYgrid system for information architecture PAPER PROTOTYPING & WIREFRAMESOnce your audience understands the significance of your page elements, they can apply that knowledge to the rest of the system. 42/66 USER INTERACTION DESIGN
  • 32. 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:
  • 33. VISUAL HIERARCHYgrid system elements PAPER PROTOTYPING & WIREFRAMESContentNavigationSupporting Elements 45/66 USER INTERACTION DESIGN
  • 34. 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
  • 35. 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
  • 36. GRID SYSTEM ELEMENTScontent/navigation/supporting elements PAPER PROTOTYPING & WIREFRAMESSupporting elements Site identifier Site-wide utilities (shopping cart, site map, etc.) Footer information (privacy policy, contact info, etc.) 53/66 USER INTERACTION DESIGN
  • 37. 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 offers, 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.
  • 38. 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;
  • 39. 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:
  • 40. ACTIVITY #7:studying commercial website wireframes PAPER PROTOTYPING & WIREFRAMESCONTENT page titles subsection titles body text embedded links images, references, captions 59/66NAVIGATION USER INTERACTION DESIGN location indicator top-level navigation option sub-navigation options breadcrumbsSUPPORTING INFORMATION site identifiers advertisement spaces site-wide utilities (shopping cart, sitemap, search tools, , etc) footer information (privacy policy, contact, FAQs, etc.)
  • 41. 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;
  • 42. 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.
  • 43. 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;
  • 44. 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;
  • 45. 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 flow diagram (a site map) and -- no less -- than 3 (three) different wireframes.
  • 46. HOMEWORK [ INDIVIDUAL ]sketchbook PAPER PROTOTYPING & WIREFRAMES1. 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 USER INTERACTION DESIGN2. Each poster must include: -The word chosen, with its English definition; -3 (three) pictures; -2 (two) websites; -Your comments/impressions of the definition.
  • 47. tags HOMEWORK [ INDIVIDUAL ]USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES 66/66