Differences between revisions 12 and 13
Revision 12 as of 2011-04-16 04:29:06
Size: 8120
Editor: eberkman
Comment:
Revision 13 as of 2011-04-16 04:33:10
Size: 8052
Editor: eberkman
Comment:
Deletions are marked like this. Additions are marked like this.
Line 38: Line 38:
||'''[[Link]]'''||Access must be provided to a small number of items at the same level in the information architecture, while also clearly communicating this hierarchy of information. ||Follow the file folder metaphor by creating distinct labels that separate 3-8 sets of content.||[[Titles]], [[Pagination]], [[Location Within]]||
||[[Button]]||Display a small amount of deeper information, or provide access to related controls or settings, in an organic manner. ||For touch and pen displays, use a simulated 3D effect to represent a paper page, which can be peeled or flipped back to view a second page behind it.||[[Simulated 3D Effects]], [[Pagination]], [[Pop-Up]], [[Film Strip]], [[Fixed Menu]], [[On-screen Gestures]]||
||'''[[Link]]'''||A function must be provided to allow access to related content from arbitrary locations within a page.||Links are content-only items which provide access to additional information either by loading a new page, jumping to a piece of content, or loading a pop-up dialogue. ||[[Pop-Up]], [[Vertical List]], [[Indicator]], [[Icon]], [[Button]]||
||[[Button]]||Within any context, an action must be initiated, information submitted, or a state change carried out. ||Use a Button to initiate an immediate action such as changing device modes and commit user selections.||[[Link]], [[Icon]], [[Indicator]], [[Spinners]], [[Pop-Up]], [[Exit Guard]]||

Wrap Up

As we’ve just seen, mobile widgets are highly reusable items and used repeatedly, across the device’s OS. These widgets are always-on, internet-connected, auto-updated, lightweight applications and appear as miniaturized display elements within an existing or enclosing GUI. Widgets can be used to quickly access related levels of information, provide visual cues about the current state of the device, and control the amount of information and level of detail needed on a page. When incorporating these component patterns into your design, consider:

  • Widget information must be immediately visible and contextual.
  • Using a stepped portlet approach to reveal levels of information.
  • Following wayfinding principles throughout navigation.
  • The appropriate use of color coding and labeling in its design.

Chapter 6: Lateral Access

This chapter explained how lateral access widgets assist the user in quickly navigating to and accessing same level tier content. This is especially important on mobile devices because the potentially smaller screen sizes affect the amount and type of content presented, and the user’s ability to successfully search, select, and read this information.

Chapter 7: Drill Down

In this chapter you learned that drilldown widgets are used to support many functions that contain parent-child relationships. These widgets can be used in any context to provide access to related content, allow the user to submit information, create a change in the current state of the device, and provide related information in a glanceable manner. Drilldown widgets support the parent-child information architecture relationship.

Chapter 8: Labels & Indicators

In some situations, it may be required to use small labels, indicators and other additional pieces of information to describe content. Mobile users each have unique goals. Some require instant additional information without clicking. Others may need additional visual cues to assist them while quickly locating information. In any case, the information labels must be presented appropriately while considering valuable screen real estate, cultural norms and standards.

Chapter 9: Information Controls

This chapter explained that finding specific items within a long list or other large page or data array can be challenging which impacts the user experience. Information control widgets are used to locate specific information quickly.

Pattern Reference Chart

This pattern reference chart lists all of the patterns found within each chapter described in this part of the book. Each pattern has a general description of how it can apply to a design problem while offering a broad solution.

Cross-referencing patterns are common throughout this book. Design patterns often have variations in which other patterns can be used due to the common principles and guidelines they share. These cross-referenced patterns are listed along with the page number where they are fully described in this book.

Pattern Table Chapter 6

Chapter 6: Lateral Access

Pattern

Design Problem

Solution

Other Patterns to Reference

Tabs

Access must be provided to a small number of items at the same level in the information architecture, while also clearly communicating this hierarchy of information.

Follow the file folder metaphor by creating distinct labels that separate 3-8 sets of content.

Titles, Pagination, Location Within

Peel Away

Display a small amount of deeper information, or provide access to related controls or settings, in an organic manner.

For touch and pen displays, use a simulated 3D effect to represent a paper page, which can be peeled or flipped back to view a second page behind it.

Simulated 3D Effects, Pagination, Pop-Up, Film Strip, Fixed Menu, On-screen Gestures

Simulated 3D Effects

Display a small amount of directly related information, provide access to related controls or settings, or provide an alternative view of the same information, in an organic manner.

Use Simulated 3D Effects to pretend components on the page, or even the whole page, merely presents one side of a physical object. Rotating the object, moving it aside, or looking past it, can then be used without 3D technologies.

Stack of Items, On-screen Gestures

Pagination

Location within a series of screens continuing display of a set of content should be clearly communicated, and access provided to other pages in the stack

Page numbers, and a sense of the relative position within the total, are displayed. Tied to this display is a method to move between pages easily and quickly. Methods to jump further than the previous and next page are also usually offered.

Peel Away, Directional Entry, Access Keys, On-screen Gestures

Location Within

Location within a series of screens with alternate views, or which continue the display of a set of content, should be clearly communicated.

When several screens of similar or continuous information are presented with an organic access method, an indicator is usually required so the user understands their position within the system.

Slideshow, Filmstrip, Pagination, On-screen Gestures, Tabs

Pattern Table Chapter 7

Chapter 7: Drilldown

Pattern

Design Problem

Solution

Other Patterns to Reference

Link

A function must be provided to allow access to related content from arbitrary locations within a page.

Links are content-only items which provide access to additional information either by loading a new page, jumping to a piece of content, or loading a pop-up dialogue.

Pop-Up, Vertical List, Indicator, Icon, Button

Button

Within any context, an action must be initiated, information submitted, or a state change carried out.

Use a Button to initiate an immediate action such as changing device modes and commit user selections.

Link, Icon, Indicator, Spinners, Pop-Up, Exit Guard

Indicator

Display a small amount of directly related information, provide access to related controls or settings, or provide an alternative view of the same information, in an organic manner.

Use Simulated 3D Effects to pretend components on the page, or even the whole page, merely presents one side of a physical object. Rotating the object, moving it aside, or looking past it, can then be used without 3D technologies.

Stack of Items, On-screen Gestures

Icon

Location within a series of screens continuing display of a set of content should be clearly communicated, and access provided to other pages in the stack

Page numbers, and a sense of the relative position within the total, are displayed. Tied to this display is a method to move between pages easily and quickly. Methods to jump further than the previous and next page are also usually offered.

Peel Away, Directional Entry, Access Keys, On-screen Gestures

Stack of Items

Location within a series of screens with alternate views, or which continue the display of a set of content, should be clearly communicated.

When several screens of similar or continuous information are presented with an organic access method, an indicator is usually required so the user understands their position within the system.

Slideshow, Filmstrip, Pagination, On-screen Gestures, Tabs

Annotation

Location within a series of screens with alternate views, or which continue the display of a set of content, should be clearly communicated.

When several screens of similar or continuous information are presented with an organic access method, an indicator is usually required so the user understands their position within the system.

Slideshow, Filmstrip, Pagination, On-screen Gestures, Tabs

Widget Wrapup (last edited 2011-12-13 16:58:09 by shoobe01)