Table template exploration

[ericsoderberghp]

Figma

Artifacts - what should be delivered

• publish 3-10 screenshots or URLs showing existing table variations on existing sites
• create 2-3 initial design direction alternatives, rough, <1day per
• add notes in this issue about findings and recommendations
• conduct a review meeting with design system team
• create additional backlog items

We do not need to start by covering all aspects requested in the comments below. Let's take a first exploration pass and learn from that how we want to group features for subsequent issues.

expected to take 3-4 days

Aspects - what should be considered

Variations on table cell contents:

• name or id
• icon
• status
• other examples of content, perhaps a timestamp, a value with units, etc.

Variations on related descriptors and interactions

• heading naming what the table contains, probably tied to navigation link names
• additional descriptive text
• basic search interaction
• sorting by column
• detailed filtering
• summary of number of items due to any filtering, for example: "20 out of 1000"
• control to add an item
• hover indication
• multi-select for batch actions
• customization of columns, add/remove, re-order

Also include responsive and accessible aspects

[vavalos5]

I found this link to be helpful while exploring different types of use cases for filtering: https://www.patternfly.org/v4/design-guidelines/usage-and-behavior/filters

[vavalos5]

https://medium.com/design-with-figma/the-ultimate-guide-to-designing-data-tables-7db29713a85a

Also this one on tables styles

[vavalos5]

Just adding a few screenshots of tables I explored using an attribute-value (textbox) filter based off this information:

Use an attribute-value filter when the data to be filtered consists of sets of attribute-value pairs and values may be either unbounded (i.e text entry), a bounded value list, or temporal data like date and time. Attribute-value filters are also useful for cases where you expect your users to only be filtering by one thing at a time.

[vavalos5]

Took another shot at filters + table

Maybe this approach with the filter to the right of the side bar takes a lot of space on the left, but just an idea.

[vavalos5]

[vavalos5]

https://medium.com/nextux/design-better-data-tables-4ecc99d23356

Another great article on tables and rows

[halocline]

https://medium.com/nextux/design-better-data-tables-4ecc99d23356

Another great article on tables and rows

I really like some of the patterns they show here. Good find.

Specifics I think would be valuable for us to have a point of view:

• Row Style (e.g. Zebra stripes -- I found the guidance here useful. Having a visual to anchor focus on wide rows is very helpful. Found the tidbit re: leads to confusion when only a small number of rows)
• Display Density - Given the variety of use cases and hearing "I want to see everything" (or at least I take comfort in ability to see everything) this seems like it would be a pattern we'd want to consider
• Expandable rows
• Quick View - I like this experience a lot and seems aligned to the Server App mocks
• Filter Columns - This seems like something you were exploring previously -- good solution for when wanting lots of filters -- might be an alternative to the e-commerce style sidebar

Lots of good stuff throughout -- all worth considering.

[vavalos5]

Will be adding a doc sometime today of research i've been doing for filter.

[vavalos5]

• Filter Research

• Filter Explorations

• Filter sketches

• Filter Prototypes (about 3)

[vavalos5]

I've been adding all kinds of information on this word doc on mainly filters. However, I think it ties in together with tables.

https://hpe-my.sharepoint.com/:w:/p/vicky_avalos/EdPWEdl7FChMkAKAFi2xBE0B2dGfglZOW8kOOcjjkywo6w?e=o6cYvG

[vavalos5]

Great article on how to create great tables using best practices and what common mistakes to avoid. https://uxdesign.cc/designing-better-tables-for-enterprise-applications-f9ef545e9fbd

[vavalos5]

https://webaim.org/techniques/tables/

[vavalos5]

https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced

[vavalos5]

https://uxdesign.cc/tables-ui-design-in-figma-data-grid-by-a-single-component-5d2c76c16f8

[ericsoderberghp]

Request from Ray Macari:
https://www.figma.com/file/STYXapJylp3eMAgmAK50zG/Table-Design-Patterns?node-id=4%3A1 (review comments within Figma)

Filters / Advanced Filters
Sorting
Row actions / Multiple row actions
Bulk/Collective actions on multiple table items
Selecting multiple table items and performing an action on the selected items
Table search vs global search
Pagination
Row states (hover, focus)
Tables with large data sets
Tool tips for truncated data
Popovers for truncated data
Inline Menus
Fixed header or columns
Customizable columns
Table status indicators
Table linking

[vavalos5]

Thinking out loud:

Is pagination essential? Most people want to view all of their data at once, scroll to find the row they're looking for or search for exactly what they're looking for. However, what if there's thousands of rows? Would be worth including pagination (but would depend on use case).

Do we even include pagination?

Do we want behaviors such as focus and hover?

Do we want to have density controls?

How many columns should a table have?

I think it would be best to have text truncated rather than wrapped because if we allow text to wrap, data tables can start to become more cluttered. But what if row titles start with the same word, they’ll all appear the same when truncated.

[ericsoderberghp]

Good thoughts. A few reactions ...

I don't think pagination is "essential". But, I do think enough people expect it that we should have have some rich guidance on what to do if we don't have it. I think we would want to cover how it works with any sort of "selection".

I do think we need hover interaction at the row level, for when the row is used as a navigation mechanism.

I can see allowing the caller to possibly have control over the density. In general though, I think the browser-wide zoom controls should be leveraged as much as possible.

I think the number of columns depends on the cell widths and the available real estate. I think we should try to avoid horizontal scrolling.

I like the guidance on pursuing truncation over wrapping for cell content.

[vavalos5]

Usability studies by the Software Usability Research Laboratory's show that users can read long, scrolling pages faster than paginated ones. Their studies confirm that people are accustomed to scrolling.

http://www.usabilitynews.org/misc/the-impact-of-paging-vs-scrolling-on-reading-online-text-passages/

[vavalos5]

Another great article presenting research to show that people like to scroll no matter how much content is on the page:

https://uxmyths.com/post/654047943/myth-people-dont-scroll

[ericsoderberghp]

FYI, some research on zebra striping from back in 2008: https://alistapart.com/article/zebrastripingdoesithelp/

And some more, quoting from Edward Tufte no less: https://ux.stackexchange.com/a/121430

[MikeWalrath]

Feedback from the Consumption Analytics team

"The below are the most commonly used features of any datatable. If these are included out of the box in the grommet datatable that would be great.

• Multiple column headers.
• Search at the table level (for example: https://material-ui.com/components/tables/)
• Fixed table header while scrolling
• Customizable pagination options
• Editable column/row so that users can edit within the datatable instead of flyouts"

[ericsoderberghp]

Here's my current thinking on how to break the table topic up into separate aspects:

• when to use a table, when not to use a table, how to choose what columns to include and how to order them, what to put in cells, what not to put in cells
• elements, header, footer, labelling, heading, summary, controls, actions
• layout, responsive behavior, fixed header and footer, infinite scroll, pagination, truncation
• accessibility, visual cues, keyboard navigation
• sort, search, filter
• selection, navigation, embedded controls

topics we should address eventually but we can push out for now:

• downloading
• in-place editing
• end-user column configuration

[vavalos5]

Figma file can be found here: https://www.figma.com/file/XEoIWIlLfcARRIFhkpFCch/HPE-Table-Component?node-id=1%3A2

[biapar]

How to create the side menù?