Everything I think about when I think about tables. #uxpatterns
01 — Do we really need to display this table as a table on mobile?
02 — Are some rows/columns more important than others?
03 — What data points are most critical to our customers?
01 — Do we really need to display this table as a table on mobile?
02 — Are some rows/columns more important than others?
03 — What data points are most critical to our customers?
04 — Can we hide some columns while showing the important ones?
05 — Do we add steppers to navigate through columns or rows predictably?
06 — Do we add controls to select what columns/rows users want to see?
07 — Do we allow users to display all columns/rows if they want to?
05 — Do we add steppers to navigate through columns or rows predictably?
06 — Do we add controls to select what columns/rows users want to see?
07 — Do we allow users to display all columns/rows if they want to?
08 — Do we need horizontal scrolling with fixed columns?
09 — Do we need horizontal/vertical pagination (for big datasets)?
10 — Do we have any hover actions, inline editing, sorting, search, filtering?
11 — Do we highlight the cell, row, or column on a user’s tap/click?
09 — Do we need horizontal/vertical pagination (for big datasets)?
10 — Do we have any hover actions, inline editing, sorting, search, filtering?
11 — Do we highlight the cell, row, or column on a user’s tap/click?
12 — Do we enlarge the selected row on tap/click for easy scanning?
13 — Do we need to display more details on tap/click?
14 — Do we display details in a modal, or sidebar overlay?
15 — Did we consider transforming each row into a card/accordion?
13 — Do we need to display more details on tap/click?
14 — Do we display details in a modal, or sidebar overlay?
15 — Did we consider transforming each row into a card/accordion?
16 — Can we transform each row into a card (rows) with a dropdown (col)?
17 — With rows as cards, do we expose relevant data for comparison?
18 — Did we consider transforming the table into a data grid?
19 — Can we tilt or flip (short) headings to win some horizontal space?
17 — With rows as cards, do we expose relevant data for comparison?
18 — Did we consider transforming the table into a data grid?
19 — Can we tilt or flip (short) headings to win some horizontal space?
20 — Did we consider various content types (text, numeric, mixed, toggle)?
21 — What will editable and read-only cells look like?
22 — Did we design interactive states (normal, hover, active, focus)?
23 — Did we consider empty cells, placeholders, valid/invalid input?
21 — What will editable and read-only cells look like?
22 — Did we design interactive states (normal, hover, active, focus)?
23 — Did we consider empty cells, placeholders, valid/invalid input?
24 — How do we display warnings and error messages?
25 — Do we allow for selecting multiple cells?
26 — Do we allow for resizing of columns or rows?
Visual from:
Joe Winter, uxdesign.cc/designing-a-co…
25 — Do we allow for selecting multiple cells?
26 — Do we allow for resizing of columns or rows?
Visual from:
Joe Winter, uxdesign.cc/designing-a-co…
27 — How do we truncate data strings if they can’t be displayed in full?
28 — Have we considered the minimum width of columns/rows?
Visual from:
Joe Winter, uxdesign.cc/designing-a-co…
28 — Have we considered the minimum width of columns/rows?
Visual from:
Joe Winter, uxdesign.cc/designing-a-co…
If you'd like to see a few more examples of various #uxpatterns, we have online workshops on smart interface design patterns coming your way soon :-)
smashingconf.com/online-worksho…
Just sayin' ;-)
smashingconf.com/online-worksho…
Just sayin' ;-)
