UID: Lesson 06 -Wireframes & Paper Pro to Typing

  • Published on
    11-Apr-2015

  • View
    96

  • Download
    0

Embed Size (px)

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 /66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

welcome to USER INTERACTION DESIGN

USER INTERACTION DESIGN

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 /66

PAPER PROTOTYPING & WIREFRAMES

LESSON 06: PAPER PROTOTYPING & WIREFRAMES learning outcome

USER INTERACTION DESIGN

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

3 /66

PAPER PROTOTYPING & WIREFRAMES

LESSON 06: PAPER PROTOTYPING & WIREFRAMES content

PAPER PROTOTYPING & WIREFRAMESPAPER PROTOTYPING & WIREFRAMES4 /66

One 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 DESIGN

PAPER PROTOTYPING & WIREFRAMESPAPER PROTOTYPING & WIREFRAMES5 /66

Unfortunately, it is dicult, costly, and time-consuming to make major changes to systems once those systems have been implemented.

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMESPAPER PROTOTYPING & WIREFRAMES6 /66

Such realistic impressions may be rendered by the use of prototypes*.

USER INTERACTION DESIGN

Even 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 DESIGN

One 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 commercially

7 /66

PAPER PROTOTYPING & WIREFRAMES

PAPER PROTOTYPING & WIREFRAMES prototypes |

PAPER PROTOTYPING & WIREFRAMESPAPER PROTOTYPING & WIREFRAMES8 /66

USER INTERACTION DESIGN

Interaction 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/66

One of the most celebrated techniques to create such paper prototypes devised by information architects its to create information architecture diagrams called Wireframes*.

USER INTERACTION DESIGN

Wireframes 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 & WIREFRAMES

PAPER PROTOTYPING & WIREFRAMES wireframes |

The structural foundation that establishes alignment and hierarchy of the design elements on a layout.

USER INTERACTION DESIGN

14/66

PAPER PROTOTYPING & WIREFRAMES

PAPER 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/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

PAPER PROTOTYPING & WIREFRAMES design elements |

Because the only suggest the layout of the system, they must be completed before any artwork is developed.

16/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

WIREFRAMES grid systems for interaction

USER INTERACTION DESIGN

Lets 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/66

PAPER PROTOTYPING & WIREFRAMES

WIREFRAMES grid systems for interaction

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/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

WIREFRAMES grid systems & visual organization

The conscious eort the designer makes to create a coherent system that ties all the design elements of a layout.

USER INTERACTION DESIGN

19/66

PAPER PROTOTYPING & WIREFRAMES

WIREFRAMES consistency |

USER INTERACTION DESIGN

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/66

PAPER PROTOTYPING & WIREFRAMES

WIREFRAMES consistency |

USER INTERACTION DESIGN

Lets 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/66

PAPER PROTOTYPING & WIREFRAMES

WIREFRAMES grid systems for interaction

Whenever 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/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

VISUAL ORGANIZATION principles of perception

Similarities 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/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

VISUAL ORGANIZATION principles of perception

The principles of perception give us valuable insight into how we visually group information.

30/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

PRINCIPLES OF PERCEPTION visual relationships

USER INTERACTION DESIGN

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/66

PAPER PROTOTYPING & WIREFRAMES

PRINCIPLES OF PERCEPTION proximity |

USER INTERACTION DESIGN

A 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/66

PAPER PROTOTYPING & WIREFRAMES

PRINCIPLES OF PERCEPTION similarity |

USER INTERACTION DESIGN

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/66

PAPER PROTOTYPING & WIREFRAMES

PRINCIPLES 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/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

PRINCIPLES 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 DESIGN

If we want to be able to communicate a specic message, we need to understand the psychological manner in which we group visual information.

36/66

PAPER PROTOTYPING & WIREFRAMES

PRINCIPLES OF PERCEPTION visual relationships

VISUAL HIERARCHYPAPER PROTOTYPING & WIREFRAMES37/66

Manipulating the attributes of scale, contrast and proportion helps us establish that hierarchy.

USER INTERACTION DESIGN

To 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/66

This 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 DESIGN

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.

USER INTERACTION DESIGN

Any 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/66

PAPER PROTOTYPING & WIREFRAMES

VISUAL HIERARCHY grid system for information architecture

USER INTERACTION DESIGN

The visual organization of an interactive system can communicate valuable information about the similarities and dierences between elements and their relative importance.

41/66

PAPER PROTOTYPING & WIREFRAMES

VISUAL HIERARCHY grid system for information architecture

Once your audience understands the signicance of your page elements, they can apply that knowledge to the rest of the system.

42/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

VISUAL HIERARCHY grid system for information architecture

A general system hierarchy (from highest to lowest importance) may look like the following:

USER INTERACTION DESIGN

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.

44/66

PAPER PROTOTYPING & WIREFRAMES

VISUAL HIERARCHY grid system elements

Content Navigation Supporting Elements

45/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

VISUAL HIERARCHY grid system elements

USER INTERACTION DESIGN

Content Page title Subsection title Embedded links Supplementary information (captions, references, etc.)

47/66

PAPER PROTOTYPING & WIREFRAMES

GRID SYSTEM ELEMENTS content/navigation/supporting elements

USER INTERACTION DESIGN

Navigation Location indicator Top-level navigation options Sub-navigation options Trace route (breadcrumbs)

50/66

PAPER PROTOTYPING & WIREFRAMES

GRID SYSTEM ELEMENTS content/navigation/supporting elements

Supporting elements Site identier Site-wide utilities (shopping cart, site map, etc.) Footer information (privacy policy, contact info, etc.)

53/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

GRID SYSTEM ELEMENTS content/navigation/supporting elements

Keep this in mind while designing your systems wireframes.

USER INTERACTION DESIGN

Visual 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/66

PAPER PROTOTYPING & WIREFRAMES

GRID SYSTEM ELEMENTS wireframes

Home page; Major portal pages to sub-sites; Template pages to grouped content; Discussion forums; Search results page; 404 Error page;

USER INTERACTION DESIGN

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:

57/66

PAPER PROTOTYPING & WIREFRAMES

WIREFRAMES 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/66

Make sketches of wireframes where the following information architecture elements can be allocated:

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

ACTIVITY #7: studying commercial website wireframes

CONTENTpage titles body text images, references, captions subsection titles embedded links

59/66

location indicator sub-navigation options

top-level navigation option breadcrumbs

SUPPORTING INFORMATION site identiers advertisement spaces site-wide utilities (shopping cart, sitemap, search tools, , etc) footer information (privacy policy, contact, FAQs, etc.)

USER INTERACTION DESIGN

NAVIGATION

PAPER PROTOTYPING & WIREFRAMES

ACTIVITY #7: studying commercial website wireframes

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/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

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/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

WIREFRAMES pros

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/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

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/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

WIREFRAMES cons

The presentation must include a complete navigation ow diagram (a site map) and -- no less -- than 3 (three) dierent wireframes.

USER INTERACTION DESIGN

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.

64/66

PAPER PROTOTYPING & WIREFRAMES

ASSIGNMENT #2 [GROUPS]: information architecture document due to week 09

1. 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/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES

HOMEWORK [ INDIVIDUAL ] sketchbook

HOMEWORK [ INDIVIDUAL ] tags

66/66

USER INTERACTION DESIGN

PAPER PROTOTYPING & WIREFRAMES