Knowledgebase

Designing Lists and Tables Print

  • uiuxdesign, guide, howto, solution, zillionkinghost, hosting, support
  • 0

Presenting many items.

WHAT LISTS NEED

A clear unit: where one item ends and the next begins

The most important information first Consistent structure

WHAT TABLES NEED

Clear column headers Alignment appropriate to content Enough spacing to follow a row

WHAT ALIGNMENT SUITS WHAT

Text left Numbers right, so digits line up Headers matching their column

THE NUMBER POINT

Right-aligned numbers can be compared at a glance. Left-aligned cannot.

WHAT TO PROVIDE FOR LONG LISTS

Sorting Filtering Search Pagination or progressive loading

WHAT TO SHOW

How many items there are.

WHAT TO AVOID

Tables on narrow screens, without adaptation Columns nobody uses Rows so tight they cannot be followed

WHAT TO DO ON MOBILE

Convert rows to stacked cards, or show only essential columns.

WHAT TO KEEP VISIBLE

Headers, when scrolling a long table.

WHAT TO DESIGN

The empty and single-item cases.


Was this answer helpful?
Back

Are you happy with your experience? Leave us a review on Trustpilot.


Trustpilot