Differences between revisions 5 and 6
Revision 5 as of 2011-01-23 14:53:05
Size: 2353
Editor: shoobe01
Comment:
Revision 6 as of 2011-01-23 15:12:08
Size: 3509
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 20: Line 20:
 * Short wait - spin usually, no count at all - under WHAT?  * Short wait - spin usually, no count at all - under WHAT? constant animation... also etsy bars, etc.
Line 22: Line 22:
 * Continuous wait - lazy load... like short wait, but uses content loads ??? what about bars in place??? Need another name???  * Ghost - This is part of the lazy load concept, heavily used with images...
Line 25: Line 25:

These may sometimes be used in conjunction. If, for example, Ghost loading of an image is not entirely clear, a Short wait indicator may be used on top of the image until it has completed loading. Or a Long wait indicator may be used along the edge of the image until it has completed loading.
Line 31: Line 33:
display units... not "67" but "67%" ...
Line 32: Line 35:
visibility of text on a bar... consider reversing text...

When a '''Wait Indicator''' is used alongside of a content area, or in-conjunction with the content (overlaid), the indicator will disappear when loading is completed. In some cases, if the indicator is alongside so does not interfere with using the content, the "fully loaded" indicator state may persist for a brief time (up to about 2 seconds) to better communicate the loading has completed.

In some cases, another indicator may be needed to indicate there is no loading. This will usually appear in a permanent status bar, which is where the loading bar would appear. Typical messages are "Idle," "Completed," "100%," and the like. Make sure the message is clear, contextually-relevant and does not rely on jargon or excess familiarity with the system.

See various styles in Sprint guide. Yes, overlaps widget and component. Make it work, as ONE item. Talk through it as wait indicator is the widget, suggestd /implementation/ for some states is as a modal dialogue. Add in lazy loading as a type... since most of these are standard wait clocks, or maybe the Etsy style moving stripes. The few that are clever (fuzzy to sharp image) are just workarounds, and need to move to show they are working still.

Problem

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

Solution

A variety of Wait Indicators are used to inform users of delays which are imposed by technical constraints. Almost never are

Some of the indicators described here are used almost exclusively on an Interstitial Screen. Read that pattern for implementation details, such as cancel functions, not considered here. Others may appear as portions of an interface, to communicate loading of modules, or individual images.

Another common implementation is the loading bar, often used for web browsers, which may not disable the existing page until some or all of the new page has been retrieved. The Wait Indicator occupies a space along the edge of the screen, and does not interfere with use of the old (or new) page.

This widget may be used in many was, as it best serves the needs of the user and the constraints of the design.

Variations

There are a number of variations on this basic theme, all of which will be considered here as they address the same basic issue.

  • Short wait - spin usually, no count at all - under WHAT? constant animation... also etsy bars, etc.
  • Long wait - bar usually, counter of size, percent and preferably time. over WHAT?
  • Ghost - This is part of the lazy load concept, heavily used with images...

The entire practice of loading web pages as the content is received is a sort of lazy loading implementation. Consider how slow loading of your page (or of many pages if designing a browser-based system) can influence the user, and may need to be optimized to communicate the delay better.

These may sometimes be used in conjunction. If, for example, Ghost loading of an image is not entirely clear, a Short wait indicator may be used on top of the image until it has completed loading. Or a Long wait indicator may be used along the edge of the image until it has completed loading.

Interaction Details

The Wait Indicator is the widget that informs the

Presentation Details

display units... not "67" but "67%" ...

visibility of text on a bar... consider reversing text...

When a Wait Indicator is used alongside of a content area, or in-conjunction with the content (overlaid), the indicator will disappear when loading is completed. In some cases, if the indicator is alongside so does not interfere with using the content, the "fully loaded" indicator state may persist for a brief time (up to about 2 seconds) to better communicate the loading has completed.

In some cases, another indicator may be needed to indicate there is no loading. This will usually appear in a permanent status bar, which is where the loading bar would appear. Typical messages are "Idle," "Completed," "100%," and the like. Make sure the message is clear, contextually-relevant and does not rely on jargon or excess familiarity with the system.

Antipatterns

Examples

Wait Indicator (last edited 2011-07-31 21:21:50 by shoobe01)