Differences between revisions 44 and 45
Revision 44 as of 2010-12-01 21:03:07
Size: 7741
Editor: shoobe01
Comment:
Revision 45 as of 2010-12-01 21:33:20
Size: 7763
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 15: Line 15:
Throughout this book, we discuss these templates as patterns. In this chapter, we are discussing patterns that make up essential parts to the page within an organized layout. A page’s organized layout will be referred to as a “wrapper.” A wrapper is an overlaid template that organizes components of information based on their context of use. Throughout this book, we discuss patterns, from which can be made the very specific templates which can be used for any particular product or project.
Line 17: Line 17:
Using a wrapper allows: The templates which are used across a product, on most every page of a website or application, we call a "wrapper" because they enclose (wrap around) all the other components and the content.
Line 19: Line 19:
Considering design from the wrapper down allows:
Line 20: Line 21:
 2. Information to be organized hierarchically on a page.
 3. The user to identify the organization structure quickly increasing learnability while decreasing performance error.
 1. Information to be organized hierarchically on a page.
 1. The user to identify the organizational structure quickly, increasing learnability while decreasing performance error.

A Revolution Has Begun

Who would have thought a global revolution was about to begin in a small German city called Mainz in the year 1440? It was here a goldsmith by the name of Johannes Gutenberg was the first to invent one of the most important industrial machines of the modern period. Such a device would lead to the Printing Revolution. This device was the printing press.

Gutenberg’s invention of the printing press used a process of movable type consisting of individually-cast letters arranged in type-cases (DUNNO???). These type-cases were inked and used to stamp paper. This process was the birth of modern day typography and mass printing production. It allowed for perfect replication, standardization, and affordable books for the middle class.

Templates

The invention of the letterpress not only allowed for mass production, but created an opening of common position that was once held by talented scribes -- ENH...CLOISTERED, ETC... As more people became trained in this practice WHICH ONE???, a typographic revolution emerged allowing for creative customization of glyphs, font families, styles, kerning, leading, and position. MEH... DESIGN GENERALLY, BUT CONTENT MOSTLY.

In addition to individual letter stylization, specified page layouts were produced using standardized templates. Margins, titles, headings, and paragraphs became measurable. Today, templates are ubiquitous. We use templates in word processing, web design, information architecture, and documentation. TALK ABOUT GRID AND TEMPLATES IN PRINT... COLUMNS, PAGE NUMBERS ETC SAME PLACE EVERYWHERE...

Using templates is essential in mobile design. As designers, we want to create our layouts based on cultural norms of reading conventions and how people process information. We also want to create information that is easily accessed, and easy to locate. Our users are not stationary, or focused entirely on the screen. They’re everywhere and they want information quickly and easy to manipulate.

The Concept of a Wrapper

Throughout this book, we discuss patterns, from which can be made the very specific templates which can be used for any particular product or project.

The templates which are used across a product, on most every page of a website or application, we call a "wrapper" because they enclose (wrap around) all the other components and the content.

Considering design from the wrapper down allows:

  1. The designer to organize information within a consistent template across the OS.
  2. Information to be organized hierarchically on a page.
  3. The user to identify the organizational structure quickly, increasing learnability while decreasing performance error.

Context is Key

Wrappers that are used in mobile phones will layout information quite differently than a wrapper at a kiosk station. When determining which information belongs in the wrapper you must decide on a multitude of things regarding context of use:

  • The technological, functional, and business requirements and constraints.
  • Where the context of use is occurring.
  • The goals of the users.
  • Which tasks are needed to achieve those goals.
  • What types of information must be displayed to achieve that goal or task.

Scenario: Yearbook Application

Consider the following design scenario. You are to design the UI for a mobile phone Yearbook application for young adults running on Apple iOS. This application allows students to capture, tag, store, and share images of their school year. Because the application will be free to download, it must contain strategically placed free advertising on the main screen that won’t interfere with user tasks. Users must be able to directly access features such as Pictures, Share, Camera, Notifications, and More on all screens.

Considerations

In the above scenario, some technological and functional requirements and constraints that you may need to consider are: the iOS, the 3.5 inch screen size, capacitive touch screen and gestural interactions.

Consider general touch design guidelines when designing button size. The minimum interactive touch area should be no less 10mm x 10mm. Though the visual target size may be larger.

Business requirements will affect advertising size, placement, and location. Consider whether advertisements will appear as banners or on interstitial screens. Be sure to consult the Mobile Marketing Association’s guidelines as well at http://www.mmaglobal.com.

The context of use is everywhere, both indoors and outside. The application’s experience is both personal and shared. You must consider user privacy, and the security of personal data. Also, consider such environmental factors that may affect visibility such as internal and external lighting and glare.

The tasks of the users involves taking pictures, uploading images, tagging photos, adding commenting, sharing, viewing, and editing. Therefore, the UI must reflect the mental models of the users.

Patterns For Wrapper

Using appropriate and consistent wrappers will create mappings and affordances that will allow for positive user experiences. Within this wrapper chapter, the following patterns will be discussed: Scroll, Annunciator Row, Notifications, Titles, Revealable Menu, Fixed Menu, Home & Idle Screens, Lock Screen, Interstitial Screen, and Advertising.

These patterns have been developed and refined based on how the human mind processes patterns, objects, and information:

  • Scroll-When information on a page exceeds the viewport, a scrollbar control may be required to access the additional information. Scrolling of information should most always occur along one axis, except in rare cases.

  • Annunciator Row– Displays the status of hardware features on the top of each page. The status of functions that may be displayed are: radios, input and output features, and power levels.

  • Notifications– When an alert is requiring user attention, a notification will occur in some form of visual, haptic, or audible feedback. These notification displays must allow for user interaction.

  • Titles– Pages, content, and elements that require labels should use titles. These titles should be horizontal, consistent in style, and follow guidelines of legibility and readability.

  • Revealable Menu– Displays additional menus that are not immediately apparent. A gesture, soft-key, or on-screen selection will cause these menus to immediately display on screen.

  • Fixed Menu - Presents an always visible menu or control that is docked to one side of the viewport. This menu is consistently placed throughout the application. These interactive controls are most likely icons with textual coding.

  • Home & Idle Screens– Are used as display states when either a device is turned on or an application has exited, timed-out, and retuned to a device-level menu display.

  • Lock Screen- Mobile devices use this display state to save on power consumption. When necessary, the applications sleep state may become locked to protect the security of user inputted data. Additional user interaction is required to exit out of the lock screen.

  • Interstitial Screen– Is used primarily as a loading process screen during device or application start-up. Wait indicators may be used to show loading progress.

  • Advertising – When advertising is used within the mobile application, it must be distinct, and not affect the user experience. Obtrusive advertising could prohibit the user from achieving his task-based goals. Advertising must adhere to the specific guidelines set by the Mobile Marketing Association.

Composition (last edited 2013-04-10 23:51:26 by localhost)