|
Size: 3059
Comment:
|
Size: 9734
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 25: | Line 25: |
== 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, Refresh, Stop]]|| ||[[Reload, Synch, Stop]]||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]]|| |
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 |
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. |
||
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 |
|
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. |
||
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 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. |
Pattern Table Chapter 7
Chapter 7: Drilldown
Pattern |
Design Problem |
Solution |
Other Patterns to Reference |
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. |
||
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. |
||
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 |
|
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 |
|
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 |
|
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 |
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 |
|
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. |
||
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. |
||
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. |
||
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 |