Paper Prototyping and Wireframes

1,886 views

Published on

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

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

No Downloads
Views
Total views
1,886
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Paper Prototyping and Wireframes

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 33. VISUAL HIERARCHYgrid system elements PAPER PROTOTYPING & WIREFRAMESContentNavigationSupporting Elements 45/66 USER INTERACTION DESIGN
  34. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 47. tags HOMEWORK [ INDIVIDUAL ]USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES 66/66

×