Tidwell J. Designing Interfaces (Second Edition)
Подождите немного. Документ загружается.
The Patterns 223
Figure 5-25.
Excel ledger, with stripes
But look what happens when the gray row backgrounds are stripped away, as shown in
Figure 5-26. The columns suddenly become much stronger visually, and each row is harder
to read from left to right. Some designers, however, find this design to be cleaner and more
pleasing. There’s no absolutely correct answer about whether to use
Row Striping or not.
Figure 5-26.
Excel ledger, without stripes
224 Chapter 5: Lists of Things
In other libraries
This technique is also known in many places as “alternating row colors” or “zebra strip-
ing.” Descriptions abound on the Web:
http://ui-patterns.com/patterns/AlternatingRowColors
http://www.welie.com/patterns/showPattern.php?patternID=zebra-table
http://quince.infragistics.com/Patterns/Alternating%20Row%20Colors.aspx
Pagination
Figure 5-27.
Songza pagination control
What
Break up a very long list into pages, and load them one at a time. Provide controls for the
user to navigate the list—next, previous, first, and last pages.
Use when
You’re showing a list that might be very, very long. Most users will either look for a par-
ticular item or browse the top of the list for relevant items (e.g., with search results); in any
case, they won’t really want to see the entire list.
The technology you’re using doesn’t support loading the entire list into a single page or
scrolled area, for any of the following reasons:
• Loading the whole list would take too much time, and you don’t want to make the
user wait. This might be the case over a slow Internet connection or with a slow
backend server.
• Rendering the list would take too much time.
• The list is effectively “bottomless,” and implementing an
Infinite List or a continuously
scrolling list (which both handle bottomless lists) isn’t feasible for some reason.
Why
Pagination breaks a list into chunks that a user can easily take in without being over-
whelmed. Furthermore, it puts the choice to see more into the user’s hands—do you want
to load more items from the list, or is this page of items enough for you?
The Patterns 225
This pattern also has the advantage of being very common on the Web, especially (though
not exclusively) for search results. It’s easy to implement, and may come prebuilt in some
systems.
How
First, you’ll need to decide how many items will be in each page. Base this on the amount
of space each item takes up, the screen sizes users are likely to have (don’t forget to con-
sider mobile platforms), the time it takes to load or show the items, and the likelihood that
the user will find one or more desired items in the first page.
This is fairly important: the first page should be enough! The odds are good that most
users won’t go beyond that first page of items, so if they can’t find what they’re looking for
in that first page, they may get discouraged. (If you’re dealing with a search facility, make
sure that it returns high-quality results at the top of that first page.)
On pages that users may linger over, such as lists of products or videos, consider letting
the user set the number of items per page. Some people are irritated by having to page
back and forth to see all the items of interest.
Next, you’ll need to decide how to present the pagination controls. They’re usually found
at the bottom of the page, but some designs also have them at the top—if a user really does
need to go to a subsequent page of items, there’s no need to make him scroll all the way
down the page.
Consider these elements in the pagination control:
• Previous and Next links, with arrows or triangles for emphasis. Disable the Previous
link when the user is on the first page and the Next link when the user is on the last
page (if there is a known last page).
• A link to the first page. This should always be visible; remember that the first page is
supposed to contain the most relevant items.
• A sequence of numbered links to pages. Don’t link the page the user is on, of course;
instead, show it in a contrasting color and type size to give the user a “You are here”
navigational clue.
• Ellipses to cut out parts of the sequence if there are too many pages to reasonably
show in the control—more than 20, for instance. Again, keep the first page, and the
last page if the list isn’t “bottomless.” Keep the pages immediately before and after the
user’s current page. Elide the rest.
• Optionally, the total number of pages (if known). You could do this in several ways,
such as showing text like “Page 2 out of 45,” or simply showing the last page as a
numbered link at the end of the pagination control. See the examples for some ideas.
226 Chapter 5: Lists of Things
Examples
Digg and Google both do an excellent job of including all the elements and cues from
the preceding list. The screenshots in Figure 5-28 show the most interesting pagination
control states: first and last pages for only a small number of items, and the first, middle,
and last pages for a very large number of items. Note that Digg uses ellipses to manage
large numbers, and Google simply omits the beginning and end of the range. Digg knows
exactly how many pages of items there are, whereas Google’s list is sometimes bottomless.
(The last Google example shows the last page of a search that wasn’t bottomless—it only
returned 21 pages of results.)
Figure 5-28.
Digg and Google examples
Figure 5-29 shows a gallery of examples from all over the Web. Notice which ones are
easier to parse visually—Which link is which? Where should I click next?—and which
ones give you sufficient information about your location and the total number of pages.
Also note the size of the click targets. How accurate does the user have to be with her
mouse or fingertip?
The Patterns 227
Figure 5-29.
Counterclockwise from top: Kayak, Drupal.org, Flickr, Target, Last.fm, Mothering.com,
Amazon, eBay, YouTube, and Hulu
In other libraries
http://www.welie.com/patterns/showPattern.php?patternID=paging
http://ui-patterns.com/patterns/Pagination
http://www.patternry.com/p=search-pagination/
http://quince.infragistics.com/Patterns/Paging.aspx
The Yahoo! pattern library has two versions of the
Pagination pattern, one for search and
one for other types of items:
http://developer.yahoo.com/ypatterns/navigation/pagination/item.html
http://developer.yahoo.com/ypatterns/navigation/pagination/search.html
228 Chapter 5: Lists of Things
Jump to Item
“C-h-i”
Figure 5-30.
Font dialog on Mac OS
What
When the user types the name of an item into a table or tree, jump straight to that item
and select it.
Use when
The interface uses a scrolling list, table, drop down, combo box, or tree to present a long
list of items. These items are sorted, either alphabetically or numerically. The user wants
to select one particular item quickly and accurately, and preferably with the keyboard.
This pattern is often used in file finders, long lists of names, and drop-down boxes for state
or country selection. You can also use it for numbers—such as years or dollar amounts—
or even calendar time, such as months or days of the week.
Why
People aren’t good at scanning down long lists of words or numbers for a particular item.
But computers are. Let them do what they’re good at!
Another nice thing about this technique is that it lets the user keep her hands on the key-
board. As she moves through a form or dialog box, she might find it nice to select from a
list simply by typing the first few characters of the item she wants—the system then picks
the item for her, and she can continue on to the next thing. No scrolling or clicking is
necessary; the user’s hand never has to move from the keyboard to the mouse.
How
When the user types the first letter or number of the item she’s looking for, jump to the
first item that matches what the user typed: automatically scroll the list so that the item is
visible, and select it.
The Patterns 229
As the user types more characters in rapid succession, keep changing the selection to the
first exact match for the whole user-typed string. If there is no match, stay put at the near-
est match, and don’t scroll back to the top of the list. You may want to beep at the user to
tell her that there’s no match—some applications do, some don’t.
Examples
A variant of Jump to Item is used by GNU Emacs’ incremental-search facility (see Figure
5-31). After the user enters i-search mode via Ctrl-S, each character typed brings the user
to the first instance of that cumulative string in the document. It doesn’t matter that the
original material wasn’t sorted.
Figure 5-31.
Emacs
Once an occurrence of the string has been found, the user can find subsequent ones by
pressing Ctrl-S repeatedly. In some ways, this incremental search is more convenient—
and certainly faster—than typical desktop “Find” dialog boxes, which don’t update con-
tinuously as you type the search string.
Furthermore, Emacs can highlight all other instances of that string in the document in
addition to scrolling to the first one. This gives the user lots of extra contextual informa-
tion about the search she’s conducting. Is it a common string, or not? Are they clustered
together, or scattered?
230 Chapter 5: Lists of Things
Alphabet Scroller
Figure 5-32.
About.com
What
Show the letters of the alphabet arrayed along the scrollbar of an alphabetized list.
Use when
Users will be searching for very specific items in a long list, which is usually rendered as
a scrolled list, table, or tree. You want to make item finding as easy and quick to achieve
as possible.
Why
Alphabet scrollers are not common, but their use is self-explanatory. They provide an inter-
active map to the list content, in much the same way as an
Annotated Scrollbar (Chapter 3).
They’re closely related to
Jump to Item—both enable immediate jumping to a point in an
ordered list.
This pattern probably arose from physical books (such as dictionaries) and notebooks
(such as address books) that use tabs to mark points in the alphabet.
The Patterns 231
How
Place a long alphabetized list into a scrolled area. Along the scrollbar, show the letters of
the alphabet; when the user clicks on a letter, scroll the list to that point (see Figure 5-32,
at the top of the pattern).
There are multiple operational examples of alphabetized lists working this way, but there
is no reason why another ordering—by number or by date, for example—couldn’t also
work well. Consider expanding this pattern beyond the alphabet!
Examples
The iPhone offers what is probably the best-known example of this pattern. Figure 5-33
shows its built-in Contacts app.
Figure 5-33.
iPhone contacts list
232 Chapter 5: Lists of Things
Cascading Lists
Figure 5-34.
Mac OS font dialog
What
Express a hierarchy by showing selectable lists of the items in each hierarchy level.
Selection of any item shows that item’s children in the next list.
Use when
The list items are arranged in a hierarchy. The hierarchy might be deep, and it might have
many items on each level. A tree (outline) would work, but the user would have to scroll
up and down a lot to see all the items, and he wouldn’t get a good overview of the items at
higher levels in the hierarchy.
The hierarchy may be a literal one, such as a filesystem, or a conceptual one—this pattern
is often used to let a user navigate and choose items within categories or make a series of
interdependent choices, as with the fonts in the example in Figure 5-34 at the top of the
pattern.