List design for 11 different scenarios

This article will analyze the design methods of the lists in various contexts, as well as the matters needing attention.

Common usage Scenarios for lists

Overview: When you are browsing more information, the list provides an overview of how the content is presented.

Browse through the project: users may read information one or more random, just like Facebook dynamic information.

Search: Users may find the information they want on the list, like Google search results.

Classification and filtering: Users may be sorting information or filtering content in a number of ways (file size, name).

Organize, add, delete and classify the items: the user is organizing the information, at this time it is likely to need more choice, move the auxiliary function.

　　11 Types of List design patterns

1. Double-sided Edition Selector

A dual-panel list is a design pattern that divides the list area into two areas, where the user is free to select items on the first surface, and the second panel displays the contents of the selected item.

Advantages

The operation is very efficient and does not need to be switched back and forth in different lists.

Reduce user memory and cognitive burden, users do not have to understand the location of the content on the list, nor need to learn how to return the list.

Disadvantages

You need a larger screen to support it.

Design points

Please be sure to clearly mark the selected item in the Panel

　2. Single Window depth

Uses a basic list to display content, and when a user points to an item, it uses a new screen to display the content, and the new screen replaces the list screen.

Advantages

The user can concentrate on processing the details.

Disadvantages

Overall efficiency is low, need to continuously enter, leave

Cannot process more than one message at a time

Design points

Because the whole picture is replaced by a new screen, make sure you have a clear return button in the Detail page, and beware of the user losing direction.

When you return to a list, be sure to revert to the previous state

　　3. Listing Panels

The list is expanded/closed in place to display the details of the item.

Advantages

The ability to see multiple expanded content information at the same time facilitates comparison.

Because the detailed content and the list present in the same picture, can easily read the information

Disadvantages

Easy to mix up and down projects

When the details are too much, it is not easy to operate and locate (scrolling)

Design points

Be sure to design the expansion/collection status clearly

Use icons to +/v with text metaphors

　4. Shrink-chart lattices

The list is rendered in a grid-indented way, allowing the user to navigate through the content using visual images.

Advantages

Images are easier to identify than words, and are easier to distinguish.

Because the detailed content and the list present in the same picture, can easily read the information

Disadvantages

It's easy to be tedious, maybe you can zoom in on more recommended content.

Rely on text to look for content that is not suitable for use, because users must constantly jump to browse (compared to the vertical list)

Design points

Note the proportions and resolution of the picture after zooming

Avoid items that don't have a picture, and you can give a preset thumbnail at the right time

5. Merry-go-Round

Use a horizontal arc or a horizontal arrangement of rendering for a group of items to allow the consumer to view the content to the left or right, and usually the current (middle) items appear larger.

Advantages

Because you can save more space by using the z axis of space.

Allows users to focus on the content of the center

Disadvantages

Unable to present more information at once

Other information is not fully displayed compared to central information

Design points

If you want to use the Scrollbar or front and back buttons to design a larger project, you can

The Merry-go-round is very similar to the Slider, and the merry-go-round is used for multiple items.

Safari used this way to show top Sites before Mac OS X 10.9, and to use a thumbnail list after version 10.9

　6. Zebra List

Use two different colors as the background of a list item to make it easy to differentiate items from each other. Converts a list into a reasonable visual object using a color block (Gestalt psychology – closed)

Advantages

Users can easily identify list items, reducing the cognitive and visual search time

Design points

Use this design method when the list is more compact

　7. Letter Mark Scroll Bar

Lists are arranged alphabetically, and are used as scroll bars for lists on lists, and are typically seen on lists such as phone books, dictionaries, music, and so on.

Use context

Users do not know the full name of the project, but understand the initial letter of the project, you can use this mode for quick positioning.

Design points

Let the letter scroll bar support drag-and-drop operation mode

Highlight the letters at the current list position on the scroll bar

　8. Page Number Label

In the face of a large number of list data, the list used to cut into multiple pages to read, read one page at a time.

Advantages

The user can memorize the page of the item, it is helpful to know the location of the information and find out afterwards.

Load only some data at a time, reduce traffic and wait time to load

Disadvantages

Experience is not smooth, browsing through some information and must be clicked page number to load new content

Design points

Allow users to determine the number of items per page, if necessary

If you can, display a total page number to let users know a little bit about the total amount of information

In addition to the page number, use a larger button or link to display the PAGE DOWN button

About the paging display and the infinite roller two modes, will be in the following article for detailed analysis and comparison

　9. Layered Inventory

Use a multi-tiered list to render content, which shows the hierarchical relationship between content and content.

Advantages

High efficiency and excellent visual visibility to see the overall information architecture at a glance

Ability to browse and handle multiple levels of content at the same time

Disadvantages

Small screen, this mode is not easy to operate

Not suitable for use in simple and clear information architecture

Design points

Be sure to highlight the currently selected class relationship

　　10. Tree-like List

Allows a tree-like hierarchical relationship to be expanded in a list structure, unlike a layered list, where a tree list can show hierarchical relationships in multiple items at once.

Advantages

High efficiency and excellent visual visibility to see the overall information architecture at a glance

Ability to browse and process multiple tree classes at the same time

Disadvantages

This mode is not easy to operate when a class has a special content

Not suitable for use in simple and clear information architecture

Design points

spacing between class and class can visually express the relationship between each other

Be sure to show the status of the expansion/receipt and

　11. Editable List

A quick and intuitive way to add/Modify list content.

Solutions in different contexts

Choose the right solution

Use the appropriate corresponding list to render it according to the situation you are using

"Select an item from the list, how do i show details about the item?"

Two-sided version selector

Manifest panel

Single Window Depth

"How to render a list with visual elements"

Shrink-chart panes

Merry-go-Round

"How to manage a long list"

Page Number label

Unlimited list

Unlimited list change version

Letter Mark Scroll Bar

Search

"How to organize a list of classes and categories"

Manifest panel

Hierarchical list

Tree-like List