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.

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 widgets that will be discussed here are subdivided into the following chapters:

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:

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:

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:

Information Controls

Description

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.

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

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.

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.

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:

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