Differences between revisions 26 and 50 (spanning 24 versions)
Revision 26 as of 2011-01-31 22:11:06
Size: 15001
Editor: eberkman
Comment:
Revision 50 as of 2011-12-13 05:27:37
Size: 7081
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
#acl EditorGroup:read,write,revert All:read [[http://www.amazon.com/gp/product/1449394639/ref=as_li_tf_tl?ie=UTF8&tag=4ourthmobile-20&linkCode=as2&camp=217145&creative=399373&creativeASIN=1449394639|{{attachment:wiki-banner-bonus.png|Click here to buy from Amazon.|align="right"}}]]The word ''widget'' can mean a number of things, even within related Internet technologies. Even the savvy user may be confused by the lack of common terminology and the lack of any inherent meaning. The term may apply to bits of code, applets, engines, and GUI elements.
Line 3: Line 3:
The term “widget” can mean a number of things, even within related internet technologies. Even the savvy user may be confused by the lack of common terminology and the lack of any inherent meaning. The term may apply to bits of code, applets, engines, and GUI elements. However, the scope of this book, and this part, is solely concerned with mobile widgets. These widgets are uniquely designed to accommodate the varying differences in display size and device technology, as well as the different types of user needs, their tasks, and browsing goals. However, the scope of this book, and of this part of the book, is solely concerned with mobile GUI widgets. These widgets are display elements such as buttons, links, icons, indicators, tabs, and tooltips. Numerous additional elements (sometimes called GUI widgets), such as scroll bars, are discussed as components and functions in Part I.

The functionalities of the widgets discussed in this part of the book are to:

 * Display a small amount of directly related information
 * Provide an alternative view of the same information, in an organic manner
 * Provide access to related controls or settings
 * Display information about the current state of the device
 * Provide quick access to indexed information
 
The widgets that will be discussed here are subdivided into the following chapters:
 * Chapter 5, [[Lateral Access]]
 * Chapter 6, [[Drilldown]]
 * Chapter 7, [[Labels & Indicators]]
 * Chapter 8, [[Information Controls]]

== Types of Widgets ==
=== Widgets for Lateral Access ===
Whether your information architecture is organized hierarchically or laterally, its presentation and access are affected by the potentially small mobile display. One option to consider is to use lateral access widgets such as [[Tabs]], [[Peel Away]], [[Pagination]], and [[Location Within]] to assist the user in quickly navigating through and selecting this content.

=== Widgets for Drilldown ===
Using an information architecture that is structured hierarchically allows content to be laid out from general to specific while depending on parent-child relationships. This drilldown, top-down approach is effective in providing users with additional related content and commands within multiple information tiers. Patterns, such as [[Link]], [[Button]], and [[Icon]] can be used to access these child content types quickly.

=== Widgets for Labels and Indicators ===
In some situations, it may be necessary to use small labels, indicators, and other pieces of information, such as a [[Tooltip]], [[Wait Indicator]], and [[Avatar]], 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, you must present the information labels appropriately while considering valuable screen real estate, cultural norms, and standards.

=== Widgets for Information Controls ===
Finding specific items within a long list or other large page or data array can be challenging. With appropriate controls, such as [[Zoom & Scale]] and [[Location Jump]], to locate specific information quickly, the user can instead quickly locate and reveal information on mobile devices.

== Helpful Knowledge for This Section ==
Before you dive right into each pattern chapter, we would like to provide you with some extra knowledge in the chapter introductions. This extra knowledge is in multidisci- plinary areas of human factors, engineering, psychology, art, or whatever else we feel is relevant. Due to the broad characteristics of widgets, we find it helpful for you to become knowledgeable in the following relevant areas:
 * [[Fitts' Law]]
 * Wayfinding
 * [[Conspicuity with Color|Color Conspicuity]]
Line 6: Line 39:
== Mobile Widgets ==
Mobile widgets are always-on, internet-connected, auto-updated, lightweight applications that reside within an existing OS framework and appear as miniaturized (i.e. never full-screen) display elements within an existing or enclosing GUI. Mobile widgets are highly reusable items and used repeatedly, across the device’s OS.
== Wayfinding Across Content ==
Whether interacting on a PC, kiosk, or mobile device, your users can easily get lost when navigating content. To reduce their frustration of being lost, you can use visual, haptic, and even auditory cues to help guide users in getting to the place they need to be. When designing a navigation system you must provide those cues to answer the following user questions:
 * Where is my current state or position within the environment? Where am I on this page?
 * Where is my destination? Where do I have to go to achieve my end goal?
 * How do I get to my destination? How am I going to navigate across content to achieve my end goal?
 * How do I know when I have arrived?
 * How do I plan my way back? Are there alternate routes I can take?
Line 9: Line 47:
The widgets that will be discussed here are subdivided into the following chapters:
 * Chapter 6, [[Lateral Access]]
 * Chapter 7, [[Drilldown]]
 * Chapter 8, [[Labels & Indicators]]
 * Chapter 9, [[Information Controls]]
Kevin Lynch, an environmental psychologist and author of the book ''The Image of the City'' (MIT Press), determined that we rely on certain objects to help us identify our position within an environment. Let’s examine how these objects act as cues and can be used to improve navigation:
Line 15: Line 49:
== Types of Widgets ==
=== Lateral Access ===
Whether your information architecture is organized hierarchically or laterally, its presentation and access is affected by the potentially small mobile display. One option to consider is to use lateral access widgets to assist the user in quickly navigating through and selecting this content. This chapter will explain research based frameworks, tactical examples, and descriptive mobile patterns to use. This chapter will discuss the following topics:
 * Navigation Structure.
 * Lateral Access and the Mobile Space.
 * Follow the Principles of Wayfinding and Norman’s Interaction Model.
 * Patterns for Lateral Access:''[[Tabs]], [[Peel Away]], [[Simulated 3D Effects]], [[Pagination]]'', and ''[[Location Within]]''.
=== Drilldown ===
Using an information architecture that is structured hierarchically allows content to be laid out from general to specific while depending on parent-child relationships. This drilldown, top-down approach is effective in providing users additional related content and commands within multiple information tiers. This chapter will explain research based frameworks, tactical examples, and descriptive mobile patterns to use. This chapter will discuss the following topics:
 * Sections
 * Sections
 * Patterns for Drilldown: ''[[Link]], [[Button]], [[Indicator]], [[Icon]], [[Stack of Items]], ''and ''[[Annotation]]''.
''Paths''
 These are the channels which a person moves along. Examples are streets, walkways, transit lines, and canals. On mobile devices, paths are the routes users take to access their desired content. These paths can follow both lateral and hierarchically organized structures. Help the user define routes by clearly labeling, color-coding, and grouping related content. Use location within widgets to define the user’s current position along the path. Provide alternate paths to access the same information.
Line 28: Line 52:
=== 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. This chapter will discuss the following topics:
 * Sections - NEEDED
 * Patterns for Labels & Indicators: ''[[Ordered Data]], [[Tooltip]], [[Avatar]], [[Wait Indicator]]'', and ''[[Reload, Synch, Stop]]''.
=== Information Controls ===
Description
 * Sections - NEEDED
 * Patterns for Information Controls: ''[[Zoom & Scale]], [[Location Jump]], [[Search Within]], [[Icon]], ''and ''[[Sort & Filter]]''.
''Edges''
 These are linear elements that define boundaries between two phases, such as walls, buildings, and shorelines. On mobile devices, edges can include the perimeter of the viewport, or of fixed menus, scroll bars, and annunciator rows. Use edges to appropriately contain navigation.
Line 37: Line 55:
== Other Widget Types ==
'''GUI Widget''' - Dating back to early X-windows implementations in the 1980s, the term widget refers to any GUI element, especially in windowing systems (Widget,get it?).
''Nodes''
 These are focal points, like distinct street intersections. On mobile devices, these may serve as graphics, labels, and indicators to describe small pieces of content.
Line 40: Line 58:
Programmers and interaction designers for desktop computer systems use widgets in the design of the interface for their systems. Widgets are things like buttons, pulldown menus and scroll bars. This definition naturally tends to be extended to similar elements in any GUI, including mobile phones, and can even refer to elements of pure code, without a direct interface element. ''Districts''
 These are areas within boundaries that share common features, such as neighborhoods, downtowns, and parks.
Line 42: Line 61:
'''Web Widgets''' - Bits of embedded code to generate dynamic content within a web page are also called widgets. The first web widgets were the visit counters (followed shortly by third party advertising), but have been extended to uncounted other uses.

While many widgets are built for and by specific systems or pages, tens of thousands of general widgets are available for use on most any page. These are also known as modules, snippets, and plug-ins, depending on the system being used.

'''Desktop Widgets''' - Any applet, easily accessible as a discrete UI element from the desktop, is a widget. Widget-like items have been available since at least the mid 1990s; consider items such as Apple's Desk Accessories and Microsoft's Active Desktop.

Widget engines are systems to enable installation of small, generally internet-enabled applets that can be used directly from the desktop, or immediately accessed (usually with one keystroke) from anywhere in the GUI.

== Usability Guidelines ==
Mobile device users have needs which vary from desktop computer users. Their needs are not much different from those of any other application, or the device itself. Considering those needs, widget engines should all abide by a small number of core principles:

 * The widget information should be immediately available without clicks. The likelihood of distraction means the glanceable nature of widgets is their key feature. That means the selected widgets have to be on the device desktop, home or idle screen and always be running.

 * And that means that widgets can tweak some of the rules for mobile design. They can be less-than-screen size, unlike full applications, and use smaller type than usual if needed for the space, for example.

 * The information in the widget should be contextual. Allow (and perhaps require) the customer to provide information so they see the right weather and time, but if possible use location, time-of-day, contacts, activity and other context information to present the most relevant content.

 * The widgets displayed, and their position, should be easy to customize. Since lots of people cannot be bothered to customize, try to use information gathered from the user to offer a personalized display for them.

 * Widgets must be beautiful. Preferably actually visually appealing, but also easy to use, engaging, and enjoyable to use. If you don't believe in the value of the visual appeal, consider how many mobile users personalize with wallpapers or screensavers.

== Widget Information Architecture Approach ==
Far too many mobile widgets are like the links on a bad web portal; icons or banners or a word or two that link to a start page from where you can launch an app. The good ones use the stepped portlet approach to information design:

 1. A tiny bit of focused information, with a link to...
 2. ...more breadth and depth about that fragment of information, and links to...
 3. ...the entire category of information.

Take as an example a weather mobile widget. The small box on the home page can be as small as an icon about the primary info for the day: cloudy, hot, rainy. Click, and you go straight to the “today's weather” page, short enough that the critical info can be viewed without scroll. That page offers additional links (maybe even in a softkey or option menu) to get to the weather home page or other pages.

== Fitts’ Law ==
Paul M. Fitts (1912-1965) was a psychologist at both Ohio State University and the University of Michigan. 1n 1954, he created a mathematical formula to determine the relationship how long it takes a user to either select an object on the screen, or by physically touching it, based on it's target size and distance from the selector's starting point.

Fitts' Law is widely used today by UX designers, human factor specialists and engineers when designing graphical user interfaces and comparing performance of various input devices.

=== Fitts Law finds that ===
 * The further a target object is from the initial starting position, will require a longer time to make that successful selection.
 * That time can be increased when the target size is too small.

== Fitts' Law UI Guidelines ==
 * Buttons and selectable controls should be an appropriate size because it is relatively difficult to click on small ones.
 * Pop-ups and tooltips can usually be opened or activated faster than pull-down menus. since the user avoids travel: tis information appears at the current cursor or finger position.

== Wayfinding Across Content ==
Whether interacting on a PC, kiosk, mobile device, your users can easily get lost when navigating content. To reduce the frustration of being lost, visual, haptic, and even auditory cues can be used to help guide the user in getting to the place he needs to be.
Designing a navigation system must provide those cues to answer the following user questions:
 1. Where is my current state or position within the environment? Where am I on this page?
 2. Where is my destination? Where do I have to go to achieve my end goal?
 3. How do I get to my destination? How am I going to navigate across content to achieve my end goal?
 4. How do I know when I have arrived?
 5. How do I plan my way back? Are there alternate routes I can take?

Kevin Lynch, an Environmental psychologist and author of the book Image of the City, 1960, determined that we rely on certain objects, as cues, to help us identify our position within an environment. Let’s examine how these objects, as they relate to widgets, can be used to improve navigation.

 * '''Paths''': Are the channels which an person moves along. Examples, are streets, walkways, transit lines, canals. On mobile devices, paths are the routes users take to access their desired content. These paths can follow both lateral and hierarchically organization structures. Help the user define routes by clearly labeling, color coding, and grouping related content. Use location within widgets to define the user’s current position along the path. Provide alternate paths to access the same information.
 * '''Edges''': Are linear elements that define boundaries between two phases. Such as walls, buildings, and shorelines.
 * '''Nodes''':
 * '''Districts''': Are areas within boundaries that share common features. Such as neighborhoods, downtowns, parks.
 * '''Landmarks''':
''Landmarks''
 These are highly noticeable objects that serve as reference points.
Line 103: Line 65:
== Conspicuity with Color ==
Conspicuity, while involving legibility, also implies other display characteristics. It describes how well an object can be detected while it captures a user’s attention amongst other noise or other competing information.
=== Color coding ===
Color can be used to classify, label, and emphasize information displayed on a screen. When using color for these things, you need to understand that we have limits in our processing abilities that affect our signal detection.
== Getting Started ==
You now have a general sense of what widgets are as well as a physiological visual perception framework to reference. The component chapters will provide specific information on theory and tactics, and will illustrate examples of appropriate design patterns. And always remember to read the antipatterns, to make sure you don’t misuse or overuse a pattern.
Line 108: Line 68:
=== Opponent Processing Theory ===
In 1892, A German psychologist Ewald Hering theorized that there are six elementary colors that are arranged perceptually as opponent pairs along three axes. These pairs are: black-white, red-green, and yellow-blue. Each color either is positive (excitatory) or negative (inhibitor). These opponent colors are never perceived at the same time because the visual system cannot be simultaneously excited and inhibited.
Line 111: Line 69:
Our modern color theory stems off of this. Today, we know that the input from the cones is processed intro three distinct channels: The luminance channel (black-white) is based on input from all of the cones. We have two chromatic channels. The red-green channel is based on the difference of long and middle-wavelength cone signals. The yellow-blue channel is based on the difference between the short-wavelength cons and the sum of the other two (Ware, 2000). ------
Next: '''[[Lateral Access]]'''
-------
= 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.
Line 113: Line 75:
In 1986, Post and Green created an experiment to test how subjects could effectively name 210 colors on a computer screen. The results of that test that are worth noting are: == Examples ==
If you want to add examples (and we occasionally do also) add them here.
Line 115: Line 78:
 * The pure monitor red was actually named orange most of the time.
 * A true red color required the addition of a blue monitor primary.
 * Eight colors out of the 210 were consistently named, suggesting that only a small number of colors should be used to label categories.
=== Color for Labeling ===
or more technically – nominal information coding, is used to because color can be an effective way to make objects easy to remember and visually classify.

Perceptual factors to be considered in choosing a set of color labels:
 1. '''Distinctness''':
 2. '''Unique hues:''' Based on the Opponent Theory, they are: Red, Green, Yellow, Blue, Black, and White.
 3. '''Contrast with background''': Our eyes are edge detectors. When we have objects that must be in front of a variety of backgrounds, it may be beneficial to have a thin white or black border around the color-coded object. Consider the reasons why alert street signs, have the border, too.
 4. '''Color blindness:''' About 7% of males and only 0.5% of females are color blind in some way. The most common is being red-green color blind.
 5. '''Number:''' We are limited in the number of color-codes we can rapidly perceive. Studies recommend use between five and ten codes.
 6. '''Field Size''': Object size affects how you should color code. Small color-coded objects less than half a degree of visual angle and in the yellow-blue direction range should not be used to avoid the small-field colorblindness.
 7. '''Conventions''': When using color-naming conventions, be cautious of cultural differences.

=== Color Semantics ===
Common conventions are: red =hot, danger, blue=cold, green=life, environmental, go. In China, red =life, good fortune, green =death.

== Color Conspicuity Guidelines For Mobile Devices ==
 * Use colors with high contrast between the text and the background. Optimal legibility requires black text on a white background, and White text on black background is effective as well.
 * For text contrast, the International Standards Organization (ISO 9241, part 3) recommends a minimum of 3:1 luminance ratio of text and background. Though a ratio of 10:1 is preferred (Ware, 2000).
 * When having text on background, purely chromatic differences are not suitable for displaying any kind of fine detail. You must have a considerable luminance contrast in addition to color contrast.
 * When large areas of color-coding are needed, like with map regions, use colors with low saturation.
 * Small objects that are color-coded should use high-saturation.
 * The majority of colorblind people cannot distinguish colors that differ in the red-green direction.
 * Recommended colors for color-coding: 1. Red, 2. Green, 3. Yellow, 4. Blue, 5. Black, 6. White, 7. Pink, 8. Cyan, 9. Gray, 10. Orange, 11. Brown, 12. Purple (Ware, 2000).
== 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.

Click here to buy from Amazon.The word widget can mean a number of things, even within related Internet technologies. Even the savvy user may be confused by the lack of common terminology and the lack of any inherent meaning. The term may apply to bits of code, applets, engines, and GUI elements.

However, the scope of this book, and of this part of the book, is solely concerned with mobile GUI widgets. These widgets are display elements such as buttons, links, icons, indicators, tabs, and tooltips. Numerous additional elements (sometimes called GUI widgets), such as scroll bars, are discussed as components and functions in Part I.

The functionalities of the widgets discussed in this part of the book are to:

  • Display a small amount of directly related information
  • Provide an alternative view of the same information, in an organic manner
  • Provide access to related controls or settings
  • Display information about the current state of the device
  • Provide quick access to indexed information

The widgets that will be discussed here are subdivided into the following chapters:

Types of Widgets

Widgets for Lateral Access

Whether your information architecture is organized hierarchically or laterally, its presentation and access are affected by the potentially small mobile display. One option to consider is to use lateral access widgets such as Tabs, Peel Away, Pagination, and Location Within to assist the user in quickly navigating through and selecting this content.

Widgets for Drilldown

Using an information architecture that is structured hierarchically allows content to be laid out from general to specific while depending on parent-child relationships. This drilldown, top-down approach is effective in providing users with additional related content and commands within multiple information tiers. Patterns, such as Link, Button, and Icon can be used to access these child content types quickly.

Widgets for Labels and Indicators

In some situations, it may be necessary to use small labels, indicators, and other pieces of information, such as a Tooltip, Wait Indicator, and Avatar, 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, you must present the information labels appropriately while considering valuable screen real estate, cultural norms, and standards.

Widgets for Information Controls

Finding specific items within a long list or other large page or data array can be challenging. With appropriate controls, such as Zoom & Scale and Location Jump, to locate specific information quickly, the user can instead quickly locate and reveal information on mobile devices.

Helpful Knowledge for This Section

Before you dive right into each pattern chapter, we would like to provide you with some extra knowledge in the chapter introductions. This extra knowledge is in multidisci- plinary areas of human factors, engineering, psychology, art, or whatever else we feel is relevant. Due to the broad characteristics of widgets, we find it helpful for you to become knowledgeable in the following relevant areas:

Wayfinding Across Content

Whether interacting on a PC, kiosk, or mobile device, your users can easily get lost when navigating content. To reduce their frustration of being lost, you can use visual, haptic, and even auditory cues to help guide users in getting to the place they need to be. When designing a navigation system you must provide those cues to answer the following user questions:

  • Where is my current state or position within the environment? Where am I on this page?
  • Where is my destination? Where do I have to go to achieve my end goal?
  • How do I get to my destination? How am I going to navigate across content to achieve my end goal?
  • How do I know when I have arrived?
  • How do I plan my way back? Are there alternate routes I can take?

Kevin Lynch, an environmental psychologist and author of the book The Image of the City (MIT Press), determined that we rely on certain objects to help us identify our position within an environment. Let’s examine how these objects act as cues and can be used to improve navigation:

Paths

  • These are the channels which a person moves along. Examples are streets, walkways, transit lines, and canals. On mobile devices, paths are the routes users take to access their desired content. These paths can follow both lateral and hierarchically organized structures. Help the user define routes by clearly labeling, color-coding, and grouping related content. Use location within widgets to define the user’s current position along the path. Provide alternate paths to access the same information.

Edges

  • These are linear elements that define boundaries between two phases, such as walls, buildings, and shorelines. On mobile devices, edges can include the perimeter of the viewport, or of fixed menus, scroll bars, and annunciator rows. Use edges to appropriately contain navigation.

Nodes

  • These are focal points, like distinct street intersections. On mobile devices, these may serve as graphics, labels, and indicators to describe small pieces of content.

Districts

  • These are areas within boundaries that share common features, such as neighborhoods, downtowns, and parks.

Landmarks

  • These are highly noticeable objects that serve as reference points.

Getting Started

You now have a general sense of what widgets are as well as a physiological visual perception framework to reference. The component chapters will provide specific information on theory and tactics, and will illustrate examples of appropriate design patterns. And always remember to read the antipatterns, to make sure you don’t misuse or overuse a pattern.


Next: Lateral Access


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 (last edited 2011-12-13 05:27:37 by shoobe01)