Paper Prototyping & Wireframes (User Interaction Design at Raffles Design Institute)
•
0 likes•10 views
Students will learn the concept of Paper Prototyping and what are the most commonly used techniques for developing user interface prototypes.
Recommended
Recommended
More Related Content
Similar to Paper Prototyping & Wireframes (User Interaction Design at Raffles Design Institute)
Similar to Paper Prototyping & Wireframes (User Interaction Design at Raffles Design Institute) (20)
More from Itamar Medeiros
More from Itamar Medeiros (20)
Recently uploaded
Recently uploaded (20)
Paper Prototyping & Wireframes (User Interaction Design at Raffles Design Institute)
- 1. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 welcometo USERINTERACTIONDESIGN Lecturer Itamar Medeiros (Brazil) BA in Industrial Design; PgDip in Information Design; Expertise Multimedia/Web Design, Photography, Information Design and Human-Computer Interaction. 1
- 2. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 LESSON06: PAPERPROTOTYPING&WIREFRAMES learningoutcome 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
- 3. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 LESSON06: PAPERPROTOTYPING&WIREFRAMES content Students will learn the concept of Paper Prototyping and what are the most commonly used techniques for developing user interface prototypes. 3
- 4. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 PAPERPROTOTYPING&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
- 5. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 PAPERPROTOTYPING&WIREFRAMES Unfortunately, it is difficult, costly, and time-consuming to make major changes to systems once those systems have been implemented. 5
- 6. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 PAPERPROTOTYPING&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
- 7. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 PAPERPROTOTYPING&WIREFRAMES prototypes | 原型 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
- 8. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 PAPERPROTOTYPING&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
- 12. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 PAPERPROTOTYPING&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
- 13. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 PAPERPROTOTYPING&WIREFRAMES wireframes | 线框 Wireframes are a basic grid system* used to suggest the layout and placement of fundamental design elements* in the interface design. 基础的格子系统，用于在界面设计 中将基础的设计元素进行排版或 放置 13
- 14. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 PAPERPROTOTYPING&WIREFRAMES gridsystem | 格子系统 The structural foundation that establishes alignment and hierarchy of the design elements on a layout. 在版面上创建设计元素位置及层次 的结构基础。 14
- 15. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 PAPERPROTOTYPING&WIREFRAMES designelements | 设计元素 The elements which a designer can use in a layout -- such as text, images, symbols, colors, textures -- to compose a visual message. 这些元素指的是在排版中设计师可 以使用的元素，如：文字，图 片，记号，颜色，纹理等等，这 些元素可以构成视觉信息。 15
- 16. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 WIREFRAMES gridsystemsforinteraction Because the only suggest the layout of the system, they must be completed before any artwork is developed. 16
- 17. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 WIREFRAMES gridsystemsforinteraction 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
- 18. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 WIREFRAMES gridsystems&visualorganization 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
- 19. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 WIREFRAMES consistency | 一致性 The conscious effort the designer makes to create a coherent system that ties all the design elements of a layout. 视觉一致性质的是设计师通过其努 力将版面中所有的设计元素组成 一个整体的系统。 19
- 20. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /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 respond to new interaction situations as they arise. 一致的外表，排列，重要设计元素的意 义可以帮助了解在这些界面中可以获 取什么。并使得用户在遇到新的交互 式情况时可以更好的理解并做出反 应。 20
- 21. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 WIREFRAMES gridsystemsforinteraction 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
- 24. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 VISUALORGANIZATION principlesofperception 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
- 25. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 VISUALORGANIZATION principlesofperception 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
- 30. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 PRINCIPLESOFPERCEPTION visualrelationships The principles of perception give us valuable insight into how we visually group information. 30
- 32. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 PRINCIPLESOFPERCEPTION 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 belonging together as a unit. 格式塔原理，那些物体或项目在时 间或空间上相近被看作为一整 体。 32
- 33. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 PRINCIPLESOFPERCEPTION similarity | 相似性 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
- 34. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 PRINCIPLESOFPERCEPTION continuance | 延续性 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
- 35. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 PRINCIPLESOFPERCEPTION closure | 封闭 A Gestalt principle that refers to the way that we mentally fill in gaps where there is missing information in a stimulus. 格式塔原理，指的是人的头脑会将 物体缺失部分连接起来。 35
- 36. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 PRINCIPLESOFPERCEPTION visualrelationships 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
- 37. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 VISUALHIERARCHY 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 of scale, contrast and proportion helps us establish that hierarchy. 37
- 38. USER INTERACTION DESIGN PAPER PROTOTYPING & WIREFRAMES /66 VISUALHIERARCHY 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
- 40. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 VISUALHIERARCHY gridsystemforinformationarchitecture 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
- 41. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 VISUALHIERARCHY gridsystemforinformationarchitecture The visual organization of an interactive system can communicate valuable information about the similarities and differences between elements and their relative importance. 41
- 42. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 VISUALHIERARCHY gridsystemforinformationarchitecture Once your audience understands the significance of your page elements, they can apply that knowledge to the rest of the system. 42
- 44. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 VISUALHIERARCHY gridsystemelements 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
- 47. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 GRIDSYSTEMELEMENTS content/navigation/supportingelements Content Page title Subsection title Embedded links Supplementary information (captions, references, etc.) 47
- 50. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 GRIDSYSTEMELEMENTS content/navigation/supportingelements Navigation Location indicator Top-level navigation options Sub-navigation options Trace route (breadcrumbs) 50
- 53. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 GRIDSYSTEMELEMENTS content/navigation/supportingelements Supporting elements Site identifier Site-wide utilities (shopping cart, site map, etc.) Footer information (privacy policy, contact info, etc.) 53
- 56. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 GRIDSYSTEMELEMENTS wireframes 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
- 57. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 WIREFRAMES forwhichpagesshouldwireframes becreatedfor? 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
- 58. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 ACTIVITY#7: studyingcommercialwebsitewireframes For each of the websites below: http://cn.news.yahoo.com/ http://www.netdiver.net/ http://www.mediainspiration.com http://www.wired.com/ Make sketches of wireframes where the following information architecture elements can be allocated: 58
- 59. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 ACTIVITY#7: studyingcommercialwebsitewireframes CONTENT page titles subsection titles body text embedded links images, references, captions NAVIGATION location indicator top-level navigation option sub-navigation options breadcrumbs SUPPORTING INFORMATION site identifiers advertisement spaces site-wide utilities (shopping cart, sitemap, search tools, , etc) footer information (privacy policy, contact, FAQs, etc.) 59
- 60. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 WIREFRAMES pros 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
- 61. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 WIREFRAMES pros 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
- 62. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 WIREFRAMES cons 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
- 63. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 WIREFRAMES cons 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
- 64. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /66 ASSIGNMENT#2[GROUPS]: informationarchitecturedocument duetoweek09 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
- 65. USER INTERACTION DESIGN PAPER PROTOTYPING WIREFRAMES /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