Differences between revisions 18 and 19
Revision 18 as of 2011-07-04 19:34:27
Size: 4977
Editor: shoobe01
Comment:
Revision 19 as of 2011-07-11 23:00:31
Size: 6442
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 1: Line 1:
"Under Vertical List: “ Circular always used” ? I think that’ s rare. I see that more as Carousel than Vertical List." == Problem ==
You must display a set of text-based information, as efficiently and simply as possible.
Line 3: Line 4:
If we said this, and mean it, maybe say WHY it should be, though many lists are dead-end.

----



== Problem ==
Display a set of information, usually text or a text-representation, that uses horizontal space inefficiently.
The list is the key organizational and presentation method used on all sorts of mobile devices.
Line 16: Line 10:
A '''Vertical List''' allows inefficient use of horizontal space for each item by permitting them to use the entire allocated space. This may be the entire viewport, or a portion of it. Text (at least is western languages) is what I refer to as "horizontally inefficient." It greedily occupies most of it's space in the horizontal axis, but also uses a lot of that space to do it, and very often uses an unpredictable amount of horizontal space. Two labels for otherwise similar items may be of very different lengths. "Joe Smith" is just as much a person as "Narin Jaroensubphayanont" but the two labels could not be more different.
Line 18: Line 12:
Items are then listed serially, using vertical space text cannot be easily repurposed to be signficantly narrower, at an angle or vertical. Vertical lists are lists of text, or text-centric lists with supporting information, such as '''[[Thumbnail Lists]]'''.
Line 20: Line 14:
In this definition, text (at least in western languages) uses horizontal space inefficiently, or greedily. It cannot be easily repurposed to be signficantly narrower, at an angle or vertical. Vertical lists are lists of text, or text-centric lists with supporting information. See '''thumbnail lists'''. A '''Vertical List''' allows inefficient use of horizontal space by permitting each item to use the entire line. The width of the list may be the entire viewport, or a portion of it.

Items are then listed serially, using vertical space, also using either the entire viewport (minus '''[[Fixed Menus]]''', '''[[Annunciator Rows]]''', the page and list '''[[Title]]''' and so on) or a subset of it.
Line 24: Line 20:
Most variations of the vertical list have notable interactive variations, so are discussed as separate patterns: Most variations of the vertical list have notable interactive variations, so you can find them discussed as separate patterns:
Line 29: Line 25:
Other variations are largely in visual display options, too numerous to list. Other variations are largely in visual display options, and are far too numerous to list.
Line 31: Line 27:
Additional features may be added to vertical lists, most notably '''Location Jump''', '''Search Within''', and '''Filter & Sort'''.

Circular lists are strongly encouraged, but dead-end lists that do not cycle back to the top may be a better choice for certain datasets.
You can add additional features to vertical lists to encourage their use, or increase the efficiency of the interaction. The most common are '''[[Location Jump]]''', '''[[Search Within]]''', and '''[[Sort & Filter]]'''.
Line 42: Line 36:
Circular lists should almost always be used. When the end of the list is reached, another scroll action will continue, starting at the other end of the list. A "circular list" is one in which when the end of the list is reached, another scroll action will jump back to the other end of the list, or just continue without interruption. Circular lists are strongly encouraged, but dead-end lists that do not cycle back to the top may be a better choice for certain datasets, or for specific tasks. If the OS standard is for "dead end" lists, be sure to provide extra features such as '''[[Location Jump]]''' to allow easy return to the top.
Line 44: Line 38:
When the end of the list is reached, acceleration may be cancelled and the list stopped or slowed dramatically, to indicate a change. Whether a circular or dead-end list, when the end of the list is reached, acceleration should be cancelled and the list stopped or slowed dramatically, to indicate a change.
Line 50: Line 44:
The text label for the item should generally be aligned left. Order should be clear from the label; e.g. if in alphabetical order by last name, list the last name first or use alignment so all last names align, for easy scanning. You should usually align text labels to the left, to assure the list can be scanned. The order should be clear from the label; e.g. if in alphabetical order by last name, list the last name first, or use subsidiary alignment so all last names are on a single column.
Line 54: Line 48:
Divisions between items must be clear. This may be via divider lines, "greenbar" alternating colors, or simple space. Make sure the divisions between items are clear. This may be via divider lines, "greenbar" alternating colors, or simply enough space. The text itself can often form a suitable visual block, allowing surprisingly little white space to yield a suitable break between lines.
Line 56: Line 50:
'''Location Within''' widgets (or alternatives) should be used to indicate the position in the list and the total list size, in addition to the use of '''Scrollbars'''. Use the '''[[Location Within]]''' widget to indicate the position in the list and the total list size. Naturally, scrollbars should be represented correctly, to indicate current position and give a sense of the relative size of the list. See the '''[[Scroll]]''' pattern for more details.
Line 58: Line 52:
A break indicator, or top-of-list label, should usually be presented at the first item in the list, to indicate circular scrolling. Especially on smaller lists, users may not be clear on the total size and scroll past it many times. A break indicator, or top-of-list label, should usually be presented at the first item in the list, to indicate circular scrolling. Especially on smaller lists, users may not understand the total size and scroll past it many times.
Line 62: Line 56:
Lists should scroll smoothly, pixel by pixel. Do not scroll line by line unless this is a limitation of the equipment or OS in use. Many lists, such as address books, may exist for the user with almost no content, or with many thousands of items. Be sure to consider all conditions when you make your design choices, and do not just pick one case. Also, be sure to consider the look and interaction of an empty list. Should it even be presented?
Line 64: Line 58:
Never use page scroll. When the end of the viewport is reached, the next item in line will appear. Do not jump and load an entire page (viewport worth) of information, with the next selectable item at the top. Lists should scroll smoothly, pixel by pixel. Do not scroll line by line unless this is a limitation of the equipment or OS in use. It rarely is anymore, so challenge your developers, and look at the documentation yourself, if they insist on doing it this way.

Similarly, n
ever use page scroll. When the end of the viewport is reached, the next item in line will appear. Do not jump and load an entire page (viewport worth) of information, with the next selectable item at the top.

Problem

You must display a set of text-based information, as efficiently and simply as possible.

The list is the key organizational and presentation method used on all sorts of mobile devices.

The Vertical List simply stacks individual line items one above the other. Only a few are visible within the viewport, but many, many more may be in the data set.

Solution

Text (at least is western languages) is what I refer to as "horizontally inefficient." It greedily occupies most of it's space in the horizontal axis, but also uses a lot of that space to do it, and very often uses an unpredictable amount of horizontal space. Two labels for otherwise similar items may be of very different lengths. "Joe Smith" is just as much a person as "Narin Jaroensubphayanont" but the two labels could not be more different.

text cannot be easily repurposed to be signficantly narrower, at an angle or vertical. Vertical lists are lists of text, or text-centric lists with supporting information, such as Thumbnail Lists.

A Vertical List allows inefficient use of horizontal space by permitting each item to use the entire line. The width of the list may be the entire viewport, or a portion of it.

Items are then listed serially, using vertical space, also using either the entire viewport (minus Fixed Menus, Annunciator Rows, the page and list Title and so on) or a subset of it.

Variations

Most variations of the vertical list have notable interactive variations, so you can find them discussed as separate patterns:

Other variations are largely in visual display options, and are far too numerous to list.

You can add additional features to vertical lists to encourage their use, or increase the efficiency of the interaction. The most common are Location Jump, Search Within, and Sort & Filter.

Details are key to making the Vertical List work. Scrolling must be smooth, information must be clear and individual items must be well-labeled.

Interaction Details

Selection of an item in the list will perform an action, such as viewing details of the selected item.

Scrolling acceleration, even on scroll-and-select devices, should be used to allow covering large amounts of ground without resorting to other methods. Even if other methods are provided, the user may prefer this or may not discover them.

A "circular list" is one in which when the end of the list is reached, another scroll action will jump back to the other end of the list, or just continue without interruption. Circular lists are strongly encouraged, but dead-end lists that do not cycle back to the top may be a better choice for certain datasets, or for specific tasks. If the OS standard is for "dead end" lists, be sure to provide extra features such as Location Jump to allow easy return to the top.

Whether a circular or dead-end list, when the end of the list is reached, acceleration should be cancelled and the list stopped or slowed dramatically, to indicate a change.

Presentation Details

Lists, like all components, do not need to be full screen, if there is sufficient resolution. The list component must abide by the complete requirements outlined here, including titles, scrolling and labeling.

You should usually align text labels to the left, to assure the list can be scanned. The order should be clear from the label; e.g. if in alphabetical order by last name, list the last name first, or use subsidiary alignment so all last names are on a single column.

Additional information may be presented on a second (or third) line, but must be indented, smaller and/or reduced in contrast so the primary label line is clear.

Make sure the divisions between items are clear. This may be via divider lines, "greenbar" alternating colors, or simply enough space. The text itself can often form a suitable visual block, allowing surprisingly little white space to yield a suitable break between lines.

Use the Location Within widget to indicate the position in the list and the total list size. Naturally, scrollbars should be represented correctly, to indicate current position and give a sense of the relative size of the list. See the Scroll pattern for more details.

A break indicator, or top-of-list label, should usually be presented at the first item in the list, to indicate circular scrolling. Especially on smaller lists, users may not understand the total size and scroll past it many times.

Antipatterns

Many lists, such as address books, may exist for the user with almost no content, or with many thousands of items. Be sure to consider all conditions when you make your design choices, and do not just pick one case. Also, be sure to consider the look and interaction of an empty list. Should it even be presented?

Lists should scroll smoothly, pixel by pixel. Do not scroll line by line unless this is a limitation of the equipment or OS in use. It rarely is anymore, so challenge your developers, and look at the documentation yourself, if they insist on doing it this way.

Similarly, never use page scroll. When the end of the viewport is reached, the next item in line will appear. Do not jump and load an entire page (viewport worth) of information, with the next selectable item at the top.

Use caution in selecting background and highlight colors. Make sure all users, in all lighting conditions can both read the text and differentiate between selected and un-selected items.


Discuss & Add

Please do not change content above this like, 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.

Vertical List (last edited 2013-04-10 23:57:34 by shoobe01)