Differences between revisions 10 and 11
Revision 10 as of 2010-10-26 14:50:55
Size: 5911
Editor: shoobe01
Comment:
Revision 11 as of 2010-10-26 14:52:25
Size: 5988
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 15: Line 15:
{{attachment:Windowshade-Box.png|Fisheye List|align="right"}} {{attachment:Windowshade-Box.png|A boxed title element becomes a larger boxed informational area when it is a Windowshade.|align="right"}}

Problem

A displayed element must be able to easily reveal a small or medium amount of additional information, without leaving the current context or page.

Solution

A windowshade list, in two states, where items expand as the user scrolls down and they become in focus. Items are provided with an indicator that more information is available, generally by defining upper and lower bounds, or enclosing in a box. When selected, this area expands vertically to display additional information or interactive elements, including additional links and input or form areas.

The term "windowshade" implies that there is a small container that expands downward. Like a roll-up window shade in a house. There are other terms used to describe these, but this one is unique.

This should not be confused with the Fisheye List. Windowshade requires an explicit action from the user to open. May be used as an alternative to the Fisheye List for devices without a hover state, such as those where touch/pen is the primary or only interface.

Variations

A boxed title element becomes a larger boxed informational area when it is a Windowshade. Most variation is in the selection of the bounding area and indictors. Three basic types exist:

The title of a section may be used as the only visible item. When expanded, this becomes a connected title bar for the expanded area.

For pages or other areas that are relatively strictly vertically oriented, top and bottom bounds can be defined around an area. Any number of summary items may be in this area, and when selected the bottom bound slides down to reveal even more information.

Similarly, for design purposes or because the whole width is not occupied by the content, the summary information is in a box of some sort. When expanded, the bottom of the box slides open downward. When open, the box is still complete, and contains the entire expanded content.

A model should be explicitly selected during design of one-open (all others close when one windowshade is opened) or all-open (user can open or close as many as they want). There is no absolute answer; it depends on the type of information, and how the user interacts with it. Lists, for example, should be one-open, but forms with optional areas should be all-open.

Horizontally-expanding items are plausible, but should only be used when the overall design of the element -- or preferably of the entire OS -- is arranged along this axis. Some desktop websites use vertical labels along the sides, and when selected they open to reveal the content of that section. A mobile interface could operate in the same manner.

Fisheye elements as not full width

Interaction Details

Interacting with a windowshade should be very simple. Selecting the closed area will expand it.

Occasionally, when several elements are contained in the closed state, the expansion function will be a single icon, link or other item. Selection of other items will therefore still be allowed. Use this carefully, and leave plenty of room around the controls to avoid accidental activation.

A control should be available to close the expanded area. Often, this can be the same control as opening. Whether it is an explicit control, or the still-present closed content at the top of the expanded area.

No automatic scrolling will generally take place during opening. The area will expand downward, even if it goes out of the viewport. An exception should be made if almost none of the expanded area is visible. To make it clear the action has occurred, the page may scroll up enough to reveal additional information is available.

Presentation Details

The expanded area should not be larger than the viewport.

The title or other elements visible in the closed state will not move or change when the area expands. This acts as an anchor for the user to understand what has happened to the display. For this reason, most Windowshade areas use a title alone for the closed state label.

An indicator should be adjacent to the title or integrated into the closed state label. Down arrows and "Expand" text are typical. These indicators (whether graphic or text) will change to indicate the state. When open, they may change to an up arrow or "Hide" text, for example.

Bounded areas should be clearly perceived as boundaries, not just background design elements, and be able to function as this when expanded.

Antipatterns

Do not windowshade without bounding around the expanded area Avoid use of this pattern without sufficient bounding of the labeled area. Do not simply expand titles, links, images or other general areas.

Don't break bounds when opening an area. If a box expands, make sure there are sides for the entire vertical space, not just the closed state, then gaps, then a bottom.

Use iconography or other indicators to make it clear the item will expand in place. Generic link or ""more info"" indicators may cause confusion as to the expected action, and will either reduce the rate of clicking items, or users will not immediately understand they are on the same page.

When possible, use animation of any sort to indicate the opening action. Even if this is a stand-in, and displays only an empty box during the opening (then fills with content when open), this is better than the entire box simply appearing. Users may otherwise believe they are viewing a different page, or a *Pop-Up*.

Try to avoid areas that expand to be larger than the viewport. If larger expanded areas are used, this may cause confusion regarding what section of the page is revealed, especially if the windowshaded items are routinely opened and closed.

Examples

Windowshade (last edited 2013-04-11 00:02:55 by shoobe01)