Differences between revisions 1 and 12 (spanning 11 versions)
Revision 1 as of 2011-01-03 21:26:28
Size: 413
Editor: shoobe01
Comment:
Revision 12 as of 2011-01-23 20:02:58
Size: 6712
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
#acl EditorGroup:read,write,revert All:read
Line 2: Line 3:
Scrollbars, buttons, etc.- Smaller than a Component. Highly reusable items, used many times, over and over, in other places. Some similar sized items are not widgets, because they are custom implemented items. This definition http://www.webopedia.com/TERM/W/widget.html (#1 only)except mobile scale is smaller, so don't include Pop-Ups, and we put a few things like scrollbars somewhere else for organization. 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 attention goals.


== 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.

The explosion of success of the desktop widget engines – and to some degree, web technologies – in the last few years led to widespread predictions that mobile widgets were the next big thing. Numerous companies, from device manufacturers to open-source collaborations, have since released a variety of mobile widget engines, some with a large number of available applets. While many of them share technological underpinnings (Ajax especially) their UI varies widely, and many are sub-optimal as currently implemented.

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]]
== Types of Widgets ==
=== Lateral Access ===
Description
 * Sections
 * Sections
 * Patterns for Lateral Access:''[[Tabs]], [[Peel Away]], [[Simulated 3D Effects]], [[Pagination]]'', and ''[[Location Within]]''.
=== Drilldown ===
Description
 * Sections
 * Sections
 * Patterns for Drilldown:
=== Labels & Indicators ===
Description
 * Sections
 * Sections
 * Patterns for Labels & Indicators:
=== Information Controls ===
Description
 * Sections
 * Sections
 * Patterns for Information Controls:

== 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.

=== Opponent Processing Theory ===
In 18xx, 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.

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).

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:

 * 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).

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 attention goals.

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.

The explosion of success of the desktop widget engines – and to some degree, web technologies – in the last few years led to widespread predictions that mobile widgets were the next big thing. Numerous companies, from device manufacturers to open-source collaborations, have since released a variety of mobile widget engines, some with a large number of available applets. While many of them share technological underpinnings (Ajax especially) their UI varies widely, and many are sub-optimal as currently implemented.

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

Types of Widgets

Lateral Access

Description

Drilldown

Description

  • Sections
  • Sections
  • Patterns for Drilldown:

Labels & Indicators

Description

  • Sections
  • Sections
  • Patterns for Labels & Indicators:

Information Controls

Description

  • Sections
  • Sections
  • Patterns for Information Controls:

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.

Opponent Processing Theory

In 18xx, 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.

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).

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:

  • 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).

Widget (last edited 2011-12-13 05:27:37 by shoobe01)