Differences between revisions 3 and 37 (spanning 34 versions)
Revision 3 as of 2011-04-15 04:33:30
Size: 2613
Editor: eberkman
Comment:
Revision 37 as of 2011-12-13 16:58:09
Size: 11954
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 2: Line 2:
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: As we’ve just seen, mobile widgets are highly reusable items and used repeatedly, across the device’s OS and applications. 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.
Line 4: Line 4:
 * 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.
When incorporating widgets into the UI design, remember to consider:
Line 9: Line 6:
== Chapter 6: [[Lateral Access]] ==  * Principle’s of Fitts’s Law.
 * Wayfinding guidelines.
 * Proper color coding and labeling techniques.


== Chapter 6: Lateral Access ==
Line 12: Line 14:
== Chapter 7: [[Drill Down]] == == Chapter 7: Drill Down ==
Line 15: Line 17:
== Chapter 8: [[Labels & Indicators]] == == Chapter 8: Labels & Indicators ==
Line 18: Line 20:
== 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. This chapter will discuss how the following widgets can be used to appropriately locate and reveal information:
== Chapter 9: Information Controls ==
In the introduction, we learned about Fitts Law and how the principle can be used on mobile UIs. Using those principles, this chapter explained how information control widgets can be used to quickly find specific items within a long list, information set, or other large pages or data arrays.

== 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]], [[Film Strip]], [[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 & Tapes]], [[Pop-Up]], [[Exit Guard]]||
||[[Indicator]]||Within any context, an action must be initiated, information submitted, a link followed to more information, or a state change carried out on the current page.||The Indicator pattern is a type of action initiator between a Link and a Button. Indicators are always used with text labels, and may perform any action: linking, state changes, and commit actions.||[[Link]], [[Button]], [[Icon]], [[Pop-Up]], [[Pagination]]||
||[[Icon]]||Provide access to disparate items or functions, in a glanceable manner. ||Icon widgets provide immediate access to additional information, such as target destinations, and device status changes and are easily understood by their graphical representation.||[[Link]], [[Button]], [[Indicator]], [[Home & Idle Screens]], [[Grid]], [[Carousel]], [[Avatar]], [[Thumbnail List]]||
||[[Stack of Items]]||A set of closely related items, which can be represented as icons or thumbnails, must be presented in a manner implying the hierarchy, and providing easy display of the contents. ||A set of stacked thumbnails are arranged with only the top one completely visible.||[[Hierarchical List]], [[Icon]], [[Grid]], [[Fixed Menu]], [[Revealable Menu]], [[Wait Indicator]]||
||[[Annotation]]||A data point in a dense array of information must be able to show additional details or options without leaving the original display context. ||An iconic element points to the information selected, and presents (sometimes only after further selection, or in another area of the screen) a label and additional options.||[[Link]], [[Button]], [[Tooltip]], [[Fixed Menu]], [[Revealable Menu]], [[Simulated 3D Effects]]||

== Pattern Table Chapter 8 ==
=== Chapter 8: Labels & Indicators ===
||'''Pattern'''||'''Design Problem'''||'''Solution''' ||'''Other Patterns to Reference'''||
||[[Ordered Data]]||Present information, especially text and numerical data, in the most appropriate and recognizable format for the context and viewer.||Content types that are displayed regularly have become regularized in their display, and must be presented in specific formats to be easily recognizable to users. ||n/a||
||[[Tooltip]]||A small label, descriptor or additional piece of information is required to explain a piece of page content, a component or a control. ||A tooltip is a transient, contextual, informational assistance widgets initiated by hovering over a target, or automatically presented when the system determines the user needs help.||[[Fixed Menu]], [[Revealable Menu]]||
||[[Avatar]]||A glanceable representation of a person should be provided, for use in various contact-listing contexts.||An avatar is an iconic image used to represent or support the label for an individual, such as a contact in the address book.||[[Icon]], [[Indicator]], [[Thumbnail List]], [[Link]], [[Tooltip]]||
||[[Wait Indicator]]||Processing, loading, remote network submissions and other delays must be clearly communicated to the user.||Use a Wait Indicator to inform users of delays which are imposed by technical constraints.||[[Interstitial Screen]], [[Infinite Area]], [[Reload, Synch, Stop]]||
||[[Reload, Synch, Stop]]||User control must be provided for loading and synching operations with remote devices or servers. ||Due to specific user needs, accidental inputs or system constraints, the user must sometimes manually start or stop data transfers.||[[Notifications]], [[Icon]], [[Tooltip]]||

== Pattern Table Chapter 9 ==
=== Chapter 9: Information Controls ===
||'''Pattern'''||'''Design Problem'''||'''Solution''' ||'''Other Patterns to Reference'''||
||[[Zoom & Scale]]||Data in dense information arrays, such as charts, graphs and maps, must be able to change the level of detail presented by a zooming function or metaphor.||Use Zoom & Scale to zoom in and out of information while communicating a sense of scale, whether relative or absolute.||[[Annotation]], [[On-screen Gestures]], [[Ordered Data]], [[Wait Indicator]], [[Infinite Area]]||
||[[Location Jump]]||Scrolling to items in a long vertical list is cumbersome. The information must be indexed to assist in retrieval, and a method provided to allow easy access to key indexed portions of the list.||An indicator of location, or indexing system, is visible on the screen and this may be used to jump to the front of an indexed section.||[[Tabs]], [[Vertical List]], [[Location Within]], [[Home & Idle Screens]], [[Accesskeys]], [[On-screen Gestures]], [[Search Within]]||
||[[Search Within]]||Finding specific items within a long list or other large page or data array is cumbersome. A method must be provided to find and display this information.||A text search may be placed on the page to search for information within the displayed information set.||[[Infinite List]], [[Accesskeys]], [[Pagination]], [[Annotation]], [[Wait Indicator]], [[Tooltip]]||
||[[Sort & Filter]]||Large data sets often hold information with multiple, clearly-defined attributes, shared among many items in the set. Users must be able to sort and filter by several of these common attributes at once in order to discover the most relevant result.||Use Sort & Filter to present the most relevant results first, from of a possibly large results list.||[[Search Within]], [[Exit Guard]], [[Vertical List]], [[Infinite List]], [[Select List]], [[Pagination]]||





-------
Next: Part IV '''[[Input and Output]]'''
-------
= Discuss & Add =
Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.

== Examples ==
If you want to add examples (and we occasionally do also) add them here.

== Make a new section ==
Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.

Wrap Up

As we’ve just seen, mobile widgets are highly reusable items and used repeatedly, across the device’s OS and applications. 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 widgets into the UI design, remember to consider:

  • Principle’s of Fitts’s Law.
  • Wayfinding guidelines.
  • Proper color coding and labeling techniques.

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

In the introduction, we learned about Fitts Law and how the principle can be used on mobile UIs. Using those principles, this chapter explained how information control widgets can be used to quickly find specific items within a long list, information set, or other large pages or data arrays.

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, Film Strip, 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 & Tapes, Pop-Up, Exit Guard

Indicator

Within any context, an action must be initiated, information submitted, a link followed to more information, or a state change carried out on the current page.

The Indicator pattern is a type of action initiator between a Link and a Button. Indicators are always used with text labels, and may perform any action: linking, state changes, and commit actions.

Link, Button, Icon, Pop-Up, Pagination

Icon

Provide access to disparate items or functions, in a glanceable manner.

Icon widgets provide immediate access to additional information, such as target destinations, and device status changes and are easily understood by their graphical representation.

Link, Button, Indicator, Home & Idle Screens, Grid, Carousel, Avatar, Thumbnail List

Stack of Items

A set of closely related items, which can be represented as icons or thumbnails, must be presented in a manner implying the hierarchy, and providing easy display of the contents.

A set of stacked thumbnails are arranged with only the top one completely visible.

Hierarchical List, Icon, Grid, Fixed Menu, Revealable Menu, Wait Indicator

Annotation

A data point in a dense array of information must be able to show additional details or options without leaving the original display context.

An iconic element points to the information selected, and presents (sometimes only after further selection, or in another area of the screen) a label and additional options.

Link, Button, Tooltip, Fixed Menu, Revealable Menu, Simulated 3D Effects

Pattern Table Chapter 8

Chapter 8: Labels & Indicators

Pattern

Design Problem

Solution

Other Patterns to Reference

Ordered Data

Present information, especially text and numerical data, in the most appropriate and recognizable format for the context and viewer.

Content types that are displayed regularly have become regularized in their display, and must be presented in specific formats to be easily recognizable to users.

n/a

Tooltip

A small label, descriptor or additional piece of information is required to explain a piece of page content, a component or a control.

A tooltip is a transient, contextual, informational assistance widgets initiated by hovering over a target, or automatically presented when the system determines the user needs help.

Fixed Menu, Revealable Menu

Avatar

A glanceable representation of a person should be provided, for use in various contact-listing contexts.

An avatar is an iconic image used to represent or support the label for an individual, such as a contact in the address book.

Icon, Indicator, Thumbnail List, Link, Tooltip

Wait Indicator

Processing, loading, remote network submissions and other delays must be clearly communicated to the user.

Use a Wait Indicator to inform users of delays which are imposed by technical constraints.

Interstitial Screen, Infinite Area, Reload, Synch, Stop

Reload, Synch, Stop

User control must be provided for loading and synching operations with remote devices or servers.

Due to specific user needs, accidental inputs or system constraints, the user must sometimes manually start or stop data transfers.

Notifications, Icon, Tooltip

Pattern Table Chapter 9

Chapter 9: Information Controls

Pattern

Design Problem

Solution

Other Patterns to Reference

Zoom & Scale

Data in dense information arrays, such as charts, graphs and maps, must be able to change the level of detail presented by a zooming function or metaphor.

Use Zoom & Scale to zoom in and out of information while communicating a sense of scale, whether relative or absolute.

Annotation, On-screen Gestures, Ordered Data, Wait Indicator, Infinite Area

Location Jump

Scrolling to items in a long vertical list is cumbersome. The information must be indexed to assist in retrieval, and a method provided to allow easy access to key indexed portions of the list.

An indicator of location, or indexing system, is visible on the screen and this may be used to jump to the front of an indexed section.

Tabs, Vertical List, Location Within, Home & Idle Screens, Accesskeys, On-screen Gestures, Search Within

Search Within

Finding specific items within a long list or other large page or data array is cumbersome. A method must be provided to find and display this information.

A text search may be placed on the page to search for information within the displayed information set.

Infinite List, Accesskeys, Pagination, Annotation, Wait Indicator, Tooltip

Sort & Filter

Large data sets often hold information with multiple, clearly-defined attributes, shared among many items in the set. Users must be able to sort and filter by several of these common attributes at once in order to discover the most relevant result.

Use Sort & Filter to present the most relevant results first, from of a possibly large results list.

Search Within, Exit Guard, Vertical List, Infinite List, Select List, Pagination


Next: Part IV Input and Output


Discuss & Add

Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.

Examples

If you want to add examples (and we occasionally do also) add them here.

Make a new section

Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.

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