UID: Lesson 06 -Wireframes & Paper Pro to Typing

  • Published on
    11-Apr-2015

  • View
    96

  • Download
    0

DESCRIPTION

In this class, student will be introduced to the concept paper prototyping and one technique called designing WIREFRAMES.

Transcript

Lecturer Itamar Medeiros (Brazil) BA in Industrial Design; PgDip in Information Design; Expertise Multimedia/Web Design, Photography, Information Design and Human-Computer Interaction.1 /66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESwelcome to USER INTERACTION DESIGNUSER INTERACTION DESIGNStudents 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 /66PAPER PROTOTYPING & WIREFRAMESLESSON 06: PAPER PROTOTYPING & WIREFRAMES learning outcomeUSER INTERACTION DESIGNStudents will learn the concept of Paper Prototyping and what are the most commonly used techniques for developing user interface prototypes.3 /66PAPER PROTOTYPING & WIREFRAMESLESSON 06: PAPER PROTOTYPING & WIREFRAMES contentPAPER PROTOTYPING & WIREFRAMESPAPER PROTOTYPING & WIREFRAMES4 /66One diculty 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.USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESPAPER PROTOTYPING & WIREFRAMES5 /66Unfortunately, it is dicult, costly, and time-consuming to make major changes to systems once those systems have been implemented.USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESPAPER PROTOTYPING & WIREFRAMES6 /66Such realistic impressions may be rendered by the use of prototypes*.USER INTERACTION DESIGNEven though this problem has not complete solution, some of the more serious diculties can be avoided if, at an early stage, the customers and users can be given a realistic impression of what the nal system will look like.USER INTERACTION DESIGNOne 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 commercially7 /66PAPER PROTOTYPING & WIREFRAMESPAPER PROTOTYPING & WIREFRAMES prototypes | PAPER PROTOTYPING & WIREFRAMESPAPER PROTOTYPING & WIREFRAMES8 /66USER INTERACTION DESIGNInteraction Designers have soon realized that more important than allowing us to pre-visualize how the nal system will look like, such prototypes must also help us to review or test the information/interaction ow of it.PAPER PROTOTYPING & WIREFRAMESPAPER PROTOTYPING & WIREFRAMES12/66One of the most celebrated techniques to create such paper prototypes devised by information architects its to create information architecture diagrams called Wireframes*.USER INTERACTION DESIGNWireframes are a basic grid system* used to suggest the layout and placement of fundamental design elements* in the interface design.13/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESPAPER PROTOTYPING & WIREFRAMES wireframes | The structural foundation that establishes alignment and hierarchy of the design elements on a layout.USER INTERACTION DESIGN14/66PAPER PROTOTYPING & WIREFRAMESPAPER PROTOTYPING & WIREFRAMES grid system | The elements which a designer can use in a layout -- such as text, images, symbols, colors, textures -- to compose a visual message.15/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESPAPER PROTOTYPING & WIREFRAMES design elements | Because the only suggest the layout of the system, they must be completed before any artwork is developed.16/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESWIREFRAMES grid systems for interactionUSER INTERACTION DESIGNLets 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/66PAPER PROTOTYPING & WIREFRAMESWIREFRAMES grid systems for interactionWhen 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/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESWIREFRAMES grid systems & visual organizationThe conscious eort the designer makes to create a coherent system that ties all the design elements of a layout.USER INTERACTION DESIGN19/66PAPER PROTOTYPING & WIREFRAMESWIREFRAMES consistency | USER INTERACTION DESIGNThe 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/66PAPER PROTOTYPING & WIREFRAMESWIREFRAMES consistency | USER INTERACTION DESIGNLets 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/66PAPER PROTOTYPING & WIREFRAMESWIREFRAMES grid systems for interactionWhenever we attempt to make sense of information visually, we rst observe similarities and dierences in what we are seeing. These relationships allow us to not only distinguish objects but to give them meaning.24/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESVISUAL ORGANIZATION principles of perceptionSimilarities and dierences 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/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESVISUAL ORGANIZATION principles of perceptionThe principles of perception give us valuable insight into how we visually group information.30/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESPRINCIPLES OF PERCEPTION visual relationshipsUSER INTERACTION DESIGNA 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/66PAPER PROTOTYPING & WIREFRAMESPRINCIPLES OF PERCEPTION proximity | USER INTERACTION DESIGNA 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 belonging together as a unit.33/66PAPER PROTOTYPING & WIREFRAMESPRINCIPLES OF PERCEPTION similarity | USER INTERACTION DESIGNThe 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/66PAPER PROTOTYPING & WIREFRAMESPRINCIPLES OF PERCEPTION continuance | A Gestalt principle that refers to the way that we mentally ll in gaps where there is missing information in a stimulus.35/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESPRINCIPLES OF PERCEPTION closure | We need to know how to use visual relationships to our advantage -- we need to know what makes things dierent -- creating visual hierarchies.USER INTERACTION DESIGNIf we want to be able to communicate a specic message, we need to understand the psychological manner in which we group visual information.36/66PAPER PROTOTYPING & WIREFRAMESPRINCIPLES OF PERCEPTION visual relationshipsVISUAL HIERARCHYPAPER PROTOTYPING & WIREFRAMES37/66Manipulating the attributes of scale, contrast and proportion helps us establish that hierarchy.USER INTERACTION DESIGNTo build eective 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.VISUAL HIERARCHYPAPER PROTOTYPING & WIREFRAMES38/66This creates a sense of order and balance. Without visual hierarchy, page elements compete for attention, and as a result, none of them win.USER INTERACTION DESIGNA 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.USER INTERACTION DESIGNAny given interactive system is composed of many distinct elements. Navigation menus (possibly several layers deep), contact information, search boxes, system identiers, and shopping carts are just a few.40/66PAPER PROTOTYPING & WIREFRAMESVISUAL HIERARCHY grid system for information architectureUSER INTERACTION DESIGNThe visual organization of an interactive system can communicate valuable information about the similarities and dierences between elements and their relative importance.41/66PAPER PROTOTYPING & WIREFRAMESVISUAL HIERARCHY grid system for information architectureOnce your audience understands the signicance of your page elements, they can apply that knowledge to the rest of the system.42/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESVISUAL HIERARCHY grid system for information architectureA general system hierarchy (from highest to lowest importance) may look like the following:USER INTERACTION DESIGNGenerally, 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.44/66PAPER PROTOTYPING & WIREFRAMESVISUAL HIERARCHY grid system elementsContent Navigation Supporting Elements45/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESVISUAL HIERARCHY grid system elementsUSER INTERACTION DESIGNContent Page title Subsection title Embedded links Supplementary information (captions, references, etc.)47/66PAPER PROTOTYPING & WIREFRAMESGRID SYSTEM ELEMENTS content/navigation/supporting elementsUSER INTERACTION DESIGNNavigation Location indicator Top-level navigation options Sub-navigation options Trace route (breadcrumbs)50/66PAPER PROTOTYPING & WIREFRAMESGRID SYSTEM ELEMENTS content/navigation/supporting elementsSupporting elements Site identier Site-wide utilities (shopping cart, site map, etc.) Footer information (privacy policy, contact info, etc.)53/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESGRID SYSTEM ELEMENTS content/navigation/supporting elementsKeep this in mind while designing your systems wireframes.USER INTERACTION DESIGNVisual hierarchy can provide users with a sense of where they are within an interactive system, to direct their attention (to special oers, for example), to suggest distinct choices, to explain new elements, and so on.56/66PAPER PROTOTYPING & WIREFRAMESGRID SYSTEM ELEMENTS wireframesHome page; Major portal pages to sub-sites; Template pages to grouped content; Discussion forums; Search results page; 404 Error page;USER INTERACTION DESIGNAny 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:57/66PAPER PROTOTYPING & WIREFRAMESWIREFRAMES for which pages should wireframes be created for?For each of the websites below:http://cn.news.yahoo.com/ http://www.netdiver.net/ http://www.mediainspiration.com http://www.wired.com/58/66Make sketches of wireframes where the following information architecture elements can be allocated:USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESACTIVITY #7: studying commercial website wireframesCONTENTpage titles body text images, references, captions subsection titles embedded links59/66location indicator sub-navigation optionstop-level navigation option breadcrumbsSUPPORTING INFORMATION site identiers advertisement spaces site-wide utilities (shopping cart, sitemap, search tools, , etc) footer information (privacy policy, contact, FAQs, etc.)USER INTERACTION DESIGNNAVIGATIONPAPER PROTOTYPING & WIREFRAMESACTIVITY #7: studying commercial website wireframesDemonstrates 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/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESWIREFRAMES prosCan 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/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESWIREFRAMES prosHinders 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/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESWIREFRAMES consDoes 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/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESWIREFRAMES consThe presentation must include a complete navigation ow diagram (a site map) and -- no less -- than 3 (three) dierent wireframes.USER INTERACTION DESIGNGroups 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.64/66PAPER PROTOTYPING & WIREFRAMESASSIGNMENT #2 [GROUPS]: information architecture document due to week 091. Choose 5 (ve) words marked with asterisks (*) youve seen in this class and create 5 (ve) posters -- one for each word -- on separate pages of your sketchbook; 2. Each poster must include: -The word chosen, with its English denition; -3 (three) pictures; -2 (two) websites; -Your comments/impressions of the denition.65/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMESHOMEWORK [ INDIVIDUAL ] sketchbookHOMEWORK [ INDIVIDUAL ] tags66/66USER INTERACTION DESIGNPAPER PROTOTYPING & WIREFRAMES