data-display

84 notes in this subject, read out of this brain and free to use. This is page 1 of 2.

Carousel design guidelines

The number of carousels should not be too many to avoid user boredom; it is best to control between 3 and 5 items. It is recommended to provide visual hints in the design to allow users to maintain a clear understanding of the number and direction of the carousel.

Tree for hierarchical information

Tree displays the hierarchical relationship of information in the form of a step-by-step outline, which is efficient and has excellent visual visibility, making the overall information framework clear at a glance. Users can view and process multiple tree-level content simultaneously.

Tree applicable scenarios

Tree is applicable to any information scenarios that need to be organized through a hierarchy, such as folders, organizational structures, taxonomy, country regions, and similar hierarchical data.

Timeline for time-flow information

Timeline is used to display time-flow information vertically, generally recording events in time by flashback, tracking what the user is doing now and what they have done in the past. Each piece of information is time-based, and the content can cover topics, types, and related additional content.

Timeline use cases

Timeline is suitable for displaying events, tasks, calendar annotations, and other related data presentations that are organized by time.

Accordion mode for collapse

If collapsed content has little conjunction to each other, you can use the more space-saving 'accordion' mode. Accordion is a special collapse that allows only a single content area to be unfolded at a time.

Card layout and spacing guidelines

Cards are usually arranged according to a grid, with a maximum of four lines recommended. In limited card space, pay attention to spacing between information. If information is too long, cut off the information with ellipsis.

Table cell content rules

Time, status, and action bar content in tables must keep words intact without occupying multiple lines. When a table cell is empty, use a dash symbol (-) to indicate that there is no data.

Collapse purpose and use

Collapse guides users to obtain information in a progressive manner by folding and arranging information, keeping the interface clean and utilizing space effectively. These components are used extensively in navigation and are suitable for lengthy, irregular content management.

Number alignment in tables

In tables, numeric values such as amounts and quantities should be right-aligned to facilitate quick reading and enable vertical comparison of data.

Measurement units placement in tables

In tables, measurement units are placed in the table header by default and are right-aligned along with the numeric values.

Filter search component behavior

Filter allows users to adjust filters and the results adjust accordingly in real-time.

Smart search component behavior

Smart search allows users to enter keywords to query in multiple data attributes at one time, and displays the results.

Data list paging default behavior

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

Pagination paging type

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

Same page load paging type

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 in dynamics feeds and email interfaces.

View all paging type

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

Detail navigation expand on same page

Expanding the list item on the same page to show details is more natural from a natural interaction perspective. The height of the expanded content area should not exceed one screen.

Detail navigation drawer expand

When detail information display exceeds one screen, it is not convenient for users to use the expanding method. Drawer expand should be used instead.

Detail navigation jump to independent page

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

Detail navigation double column display

Double column display can be used 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.

New button in upper right corner behavior

Click the new button in the upper right corner to trigger a new form pop-up window, drawer, page, or other interface. After the creation is completed, the newly created content appears in the first item of the list and is briefly highlighted.

Batch operations triggering behavior

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

Table list type use case

Tables emphasize browsing and are used to display complex data. The matrix layout aligns data to make it convenient for browsing data horizontally and vertically, and for studying relationships between data. Tables are especially suitable when the user would benefit from more data exposure without having to go into the details of individual objects.

Dashed new button behavior

Dashed new button allows users to click to show the object editing area 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.

Direct delete operation

Direct delete allows users to delete items without confirmation. After deletion, users should be allowed to undo the action.

Second confirmation delete operation

Second confirmation delete requires users to confirm deletion when clicking the delete operation.

Security check delete operation

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

Data list layout order

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

List list type use case

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

User search patterns for data lists

There are two main search patterns: Known Items Exploration, where users start the search with verbally describable known items; and Exploratory query, where users search for a target with a defined but broad scope.

Search frequency and efficiency relationship

The higher the search frequency, the higher the efficiency requirements.

Inquire search component behavior

Inquire allows users to select multiple query conditions according to preset conditions and submit the acquisition query at one time.

Search mode selection for data exploration

When selecting search components, identify two main user search modes: known item exploration (searching from items that can be verbally described) and exploratory query (searching for targets with definite needs but broad scope). Higher search frequency requires higher efficiency. Communication with developers about system performance should inform component selection.

Data list design goals

Data lists should be designed to make lists easy to scan and enable quick location of objects within the list.

Table layout for data display

Tables emphasize browsability using matrix layout, suited for displaying complex data. Data is aligned in matrix format enabling horizontal and vertical browsing to examine data relationships. Tables should be used when users benefit from more data exposure without needing to enter object details.

List layout for data display

Lists balance browsability with presentation. They use vertical arrangement, suited for displaying object summaries with hierarchical content presentation and fast scanning. Lists should be used when display space is limited, such as in smaller dialogs, sidebars, and dropdown panels.

Card list layout for data display

Card lists emphasize presentation using grid layout without specific browsing order. Each object receives equal display opportunity. Grid layout is more visually appealing on pages and should be used when highlighting objects is important.

Query versus filter distinction

Query involves selecting multiple predefined conditions and submitting them once to retrieve results. Filter allows users to adjust filter items and results adjust immediately in response.

Search functionality in data lists

Search is more intelligent than query or filter, allowing users to input keywords to query across multiple data attributes at once and display comprehensive results.

Pagination default behavior

Default pagination loading should be used to reduce user wait time. When the page content does not fill one page, the pagination control should not be displayed. Pagination should cache the user's browsing position in the original list and mark already-viewed items, returning the user to the original browsing position when returning to the parent page.

Same-page loading pagination

Same-page loading should be considered when users often find needed items near the beginning of the list and have no need to locate specific list items, such as in feeds or email interfaces.

View all link pagination

A view all link should be used when navigating to a different page to see the complete list is necessary.

Navigation to detail views

Default behavior is clicking the title to navigate to details. Four approaches for opening details are: inline expansion (more natural interaction, ensure expanded content height does not exceed one screen); drawer expansion (better for large information volume exceeding one screen); navigation to independent page (when details need to be shared or for complex immersive tasks); dual-column display (when each item's details may interest users, enabling quick switching and processing of different items).

Bulk operations in data lists

When users check items, trigger bulk operation mode, bringing up a bulk operation toolbar in the list toolbar.

Create button placement

New items can be created via a button in the top right corner, which triggers a creation form in a modal, drawer, or page. After creation, the new item appears as the first item in the list and is briefly highlighted.

Dashed line create button

A dashed line create button can be used, where clicking creates an object edit area at the button location. After creation, the new object is displayed in that location. The dashed line button should be positioned at the beginning or end of the list.

Delete operation patterns

Three deletion patterns exist: direct delete (allows user undo), secondary confirmation (requires confirmation when delete is clicked), and security validation (destructive operations require high-level security verification).

List toolbar functionality

A list toolbar integrates commonly needed list functions in smaller spaces and is highly recommended for use.

Data list layout structure

List layout typically flows top to bottom with items arranged sequentially. An exclusive area provides expansion space for complex data search and data statistics that cannot be integrated into the toolbar.

Empty state in data lists

An empty state should be displayed when a list has no data or when search yields no results.

Search List template use case

The Search List template is primarily used for searching specific entry information and search results across many topics using keywords. It is suitable for searching and filtering a large number of different types of content, meeting the needs of finding vague targets. The Search List involves filter and search operations.

Batch operations placement

Page-level batch operations affect the entire page and can be placed at the bottom of the page.

List page purpose and functionality

A list page allows users to view and process large numbers of items and often provides navigation to detailed views. Users can perform filtering, comparison, creation, analysis, and drilling down to complete item details on a list page.

List page design goal

The design goal of a list page is to help users view, process, and find items more efficiently.

List page design principle: Easy to scan

Adopt consistent formatting and appearance that highlights key information useful for object identification. Use rich interactions and layered information display to reduce cognitive load.

List page design principle: Discoverability

Present list items in a logical order that is easy to browse. Provide appropriate search components to help users quickly find information.

Single column list layout

In single column layout, content is stacked from top to bottom with the data filtering module at the top. After filtering data, users follow a general-to-specific browsing logic to understand and analyze the content.

Dual column list layout

In dual column layout, the data filtering module is placed in a sidebar. This layout is used when there are many filter conditions and horizontal space is abundant.

Query table template use cases

Use the query table template when each item needs to display many fields and users have a specific query scope when searching for items.

Give your agent this brain