data display

23 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

List type purpose and layout

Lists consider both browsing and presentation, arranged vertically to show the basic overview of objects with hierarchical content display suitable for quick scanning. Lists are especially useful when display space is limited, such as in smaller pop-up windows, sidebars, drop-down panels and other containers.

Card list type purpose and layout

Card lists emphasize presentation with grid layout that has no specific browsing order, giving each object more equal display opportunity. Grid layouts are more attractive on the page and are suitable for highlighting objects.

Search patterns identification

When selecting search components, identify the main search patterns of users: Known Items Exploration (search starts with verbally describable known items) and Exploratory Query (search for a target with defined but broad scope). Higher search frequency requires higher efficiency requirements.

Inquire operation for data lists

In inquire operations, users select multiple query conditions according to preset conditions and submit them at one time to acquire query results.

Filter operation for data lists

In filter operations, users adjust filters and the results adjust accordingly in real-time.

Smart search operation for data lists

Smart search allows users to enter keywords that query multiple data attributes at one time, and results are displayed accordingly.

Pagination default behavior and caching

By default, page loading is used to reduce user waiting time. The user's browsing position in the original list should be cached, and browsed items in the list should be marked. When the user returns to the previous page, they should return to the original browsing position.

Pagination component behavior

Pagination is recommended by default. When the content of the page is less than one page, the pager will not be displayed.

Same page load pagination mode

Same page load mode can be considered when users can often find the desired item at the top of the list and there is no need to locate a specific list item, such as with dynamics feeds and emails.

View all pagination mode

View all mode should be used when you need to jump to a page to view the complete list.

Navigate to details expansion on same page

From the perspective of natural interaction, expanding the list on the same page is more natural. Care should be taken that the height of the expanded content area should not exceed one screen.

Navigate to details using Drawer

From the perspective of the amount of information in details, if information display exceeds one screen, it is not convenient for the user to use the unfolding method. In this case, using Drawer Expand is better.

Navigate to details with independent page

When details need to be shared with others separately, or for complex immersive tasks, jumping to an independent page is more suitable.

Navigate to details using double column display

When there may be content that the user is interested in within each item of detail, to facilitate switching navigation and quickly view and process different items, double column display can be used.

Batch operations triggering

When the user checks an item, the batch operation mode is triggered and the list toolbar calls out the batch operation toolbar.

New button in upper right corner

A new button in the upper right corner can be clicked to trigger a new form pop-up window, drawer, page, etc. After the creation is completed, the newly created content appears in the first item of the list and is briefly highlighted.

Dashed new button behavior

A dashed new button can be clicked to show an object editing area appear at the button position. After the creation is completed, the newly created object will be displayed at this position. The dotted new button position is placed at the beginning or end of the list.

Delete directly operation

In delete directly operations, after deletion, users are allowed to undo the action.

Delete with second confirmation

In delete with second confirmation operations, when clicking the delete operation, a second confirmation is required before deletion occurs.

Delete with security check

Destructive operations require high-level security verification to confirm operations.

List toolbar purpose

A list toolbar integrates common features needed in lists within a small space and is highly recommended.

List layout structure

List layouts are usually tiled from top to bottom. An exclusive area provides an expansion space for solving complex data search and data statistics content that cannot be integrated in the toolbar.

Empty state for data lists

When the list has no data or no search results, an empty state should be displayed.

Give your agent this brain