Designing Interfaces: List of Things

Analyze use cases for lists

• Get an overview: Impression from the list as a whole. Skimmable. Use images, visual organization to convey that impression.

• Browse: Peruse items randomly or in order? Click/tap to open → Is it easy to go back to the list & find another item, or move to the next one?

• Search: Easy to find a particular item, with minimum clicks, scrolling, back n forth.

• Sort & filter

• Rearrange, add, delete, recategorize: Permissions. Drag to order. Bulk select for moving, editing, or deleting. Use platform standards for multiple selection (e.g. shift select) or supply checkboxes.

Back to information architecture

• Length: How long is the list? Can it fit in the space you’ve designed for it? Could it be bottomless?

• Order: Alphabetical or by time? Can a user change the sorting order? Grouping scheme (e.g. blog posts are often categorized by month and year, but a time-ordered flat list might work better for someone looking for Post B published after Post A).

• Grouping: Categories? Multilevel hierarchy? Several potential categorizations? Can users create their own categories?

• Item types: Simple / rich / complex? Are list items different or homogeneous? Associated img? Strict field-like structure (Emails typically have a strict and sortable structure—timestamp, from field, subject, etc.)?

• Interaction: Show the whole item or thumbnails/excerpts? What is the user supposed to do with the items? Looked at / Selected for inspection / Perform tasks? Links, buttons? Select multiple items?

• Dynamic behavior: How long to load the entire list? Immediate or noticeable delay? Will the list change on the fly? Should you show updates as they happen? Insert new items at the top of the list automatically?

What are you trying to show?

“When the user selects an item from a list, where should I show the details of that item?”

Two-Panel Selector or Split View shows the item details right next to the list. No context switch or screen reload.

One-Window Drilldown replaces the list’s space with the item details. Used for small spaces.

List Inlay shows the item details embedded in the list itself. The list expands to show the detail when the user clicks or taps. Overview may be more difficult if lots of items are open.

“How can I show a list of items that have heavy visuals?”

Cards - Grid of Equals

Thumbnail Grid: for pictures; text data tends to be small and less important

Carousel: use less space

“How can I manage a very long list?”

Pagination

Infinite List & Continuous Scrolling: useful when you don’t know how long the list will be, or when it’s bottomless.

When a very long alphabetized list or range of dates is kept in a scrolled box, consider using an Alpha/Numeric Scroller. This device shows the alphabet arrayed along the scroll bar itself; the user can then jump directly to a desired letter.

Find field for direct seraching. Filtering to shorten a list.

“How can I show a list that’s organized into categories or hierarchies?”

1 level: Titled Sections—separate the list into sections with titles, allow sorting the list within each section. Try Accordion if you only have a few sections.

2 or more levels: Trees—indented hierarchy levels, with icons such as pluses or minuses or rotating triangles. Collapsible levels.

The Patterns

Two-Panel Selector or Split View

• 2 side-by-side panels: first one shows a list of items that user can select; second one shows the content of the selected item.

• Used when: You want the user to see the overall structure of the list and keep that list in view all the time, but they can browse through the items easily and quickly. People won’t need to see the details or content of more than one item at a time.

• Pros:

  • Reduce physical effort: Users’ eyes don’t need to travel a long distance b/w the panels. Changing b/w the items only takes a mouse click or key press.
  • Reduce visual cognitive load: No major context switch. Users can focus on the smaller area that appear instead of the whole screen change.
  • Reduce user’s memory burden: The list is there, the user doesn’t have to remember where an item is. The list serves as a “You are here” signpost.
  • Faster than loading a new screen for each item.

• How?

  • Make the selected item visually obvious.

• A Two-Panel Selector has identical semantics to tabs: one area for the selectors, and one area next to it for the content of the selected thing. Likewise, a List Inlay is like an Accordion, and One-Window Drilldown is like a Menu Screen.

• Examples:

  • Email clients like Gmail
  • Apple Photos

One-Window Drilldown

• Show a list of items in a single screen or window. When the user selects an item from the list, show the details or contents of that item in the screen, replacing the list. E.g. on mobile, click an item within a list opens another detail screeen replacing the list.

• E.g. Online forums

• Back/Cancel button. Previous/Next. Go to item within item.

• Cons: Takes lots of clicks/taps.

List Inlay

• Show a list of items as rows in a column. When the user selects an item, the details are expanded, within the list itself. Allow items to be opened and closed independently of each other.

• E.g. Apple Voice Memos. When user taps on a recording item, the playback and recording controls are expanded below.

• Used when item details don’t take a large space, but are not so small. You want the user to see the overall list all the time, but they can browse through items quickly. They might want to see 2 or more items & their details at a time for comparison.

• List Inlay can be combined with Two-Panel Selector.

• A scrolled area to avoid the area getting too tall. Put closing control very near the original opening control, or replacing. Use Animated Transition as the item opens and closes. Can use List Inlay to open an editor to edit items.

• List Inlay works the same as Accordion. Two-Panel Selector — tabs. One Window Drilldown - Menu Screen.

Cards

• Good practice: take the item with the most or longest amount of content and mock it up. Then with the least or smallest amount of content.

• Which actions will be icons and text links? Use real photos to determine the best orientation (portrait or landscape).

Thumbnail Grid

• You want to show a little bit of metadata (information about the item) with each one, such as its name and date.

• Users will want an overview of the entire list, and they might need to scan it quickly to find a particular item of interest. Users might also need to select one or more items at a time for moving, deleting, or viewing.

• Thumbnails that are roughly square make easy targets for fingertips (on touch screens) and for indirect pointing devices, as well.

• Scale the thumbnails so that they’re the same size, to keep the grid tidy. Place the text metadata close to the thumbnail, but in small print in order to maintain the thumbnail visual prominence.

• Try to find a size and aspect ratio that works reasonably well with all of the images, even if some will be cropped to fit it.

Carousel

• Each item is potentially of interest. Users will browse the items casually; they won’t normally search for a specific item, or need to get an overall look at the entire list at once. If someone does look for a specific item, they won’t mind moving past many items before finding the one they’re looking for. You might be able to order the items with the most interesting ones first, or in chronological order.

• Encourage browsing and serendipity.

• For small space.

• Put large arrows on the left and right for paging through the Carousel; each click on an arrow should move more than one item. Animate this scrolling for extra visual interest.

• Put a scrollbar below if users want to move quickly through a long list. You can enlarge the central item in Carousel to draw attention.

Pagination

• Used when you’re showing a list that might be very, very long. Most users will either look for a particular item or browse the top of the list for relevant items.

• Decide how many items will be in each screen. Base this on the amount of space each item takes up, the screen sizes users are likely to have (consider 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 screen.

• The first screen should be enough!

• For screens on which users might linger, such as lists of products or videos, consider letting the user set the number of items per screen.

• Consider these in pagination controls:

  • Pagination controls at bottom or top? Sometimes there’s no need to scroll all the way down the screen.

  • Previous & Next links. Disable Previous on 1st screen and Next on last screen.

  • Link to first screen should always be visible.

  • Numbered links to screens. Don’t link the screen the user is on. Give a “You are here” navigational clue.

  • Ellipsis in controls if there are too many screens.

  • Total number of screens. E.g. screen 2 out of 10, or show the last screen as a numbered link.

Jump to Item

• When the user types the name of an item into a list, jump straight to that item.

• 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.

• If there is no match, stay put at the nearest match, and don’t scroll back to the top of the list. You might want to beep at the user to inform them that there’s no match.

Alpha/Numeric Scroller

• Display the letters of the alphabet, numbers, or a timeline arrayed along the scroll bar of a list.

• Used when users will be searching for very specific items in a long list

New-Item Row

• Use the last or first row in the list or table to create a new item in place

• Put creation into the same place where the item will ultimately “live.” → more coherent than putting it in somewhere else. Uses less screen real estate, reduces the amount of navigation (eliminating a “jump” to another window), and it’s less work for your users.

• What happens if the user abandons the new item before finishing? You can establish a valid item right from the beginning—if the user abandons the edits at any time, the item exists until the user goes back and deletes it. Good Defaults help by prefilling valid values if there are multiple fields.