Visual Design for basic table content types

[nate-ni]

😯 Problem to Solve

Provide designs for basic content types outside of what was already completed from the initial design

• Visual design for initial table implementation #883

In table cells

• Numeric values (Related dev task: Table allows configuration of number column type #1011)
• Hyperlinks (Related dev task: Table allows configuration of hyperlink column type #1012)
• Icons (Related dev task: Table allows configuration of icon column type #1013 )
• DateTime (Related dev task: Table allows configuration of datetime column type #1014)

In table header cells

• Icon
• Text and Icon

💁 Proposed Solution

🤔 Open Questions

1. What size should the icons be?
2. Do we need default alignments for different data types?

🖼️ References/Prior Art

Design for basic table

• Visual design for initial table implementation #883

[jattasNI]

@RickA-NI here are a couple prototypes of right-aligned numeric columns. They reveal some interesting questions for you to provide guidance on:

1. For numeric columns, should we right align the values, both the values and the header, or neither?
2. If we right align the values, should we also set font-variant-numeric: tabular-nums to request that the browser render digits with equal widths? Does our font support this setting? (I couldn't see a difference when I played with it)

[RickA-NI]

1. My initial reaction is that headers should match their data. I'm not sure what the ramifications are for all the stuff (sorting direction, menu icons, grab handles, etc.) we've talked about sticking up there but visually it looks better and keeps the header from becoming dissociated from the data as in your example.
2. Source Sans Pro renders digits with equal widths by default. You shouldn't need to turn that on unless we're trying to force it into a monospaced like mode where the decimal places and commas take up equal space to a didgit.

[nate-ni]

I've always thought....strings to the left, numbers to the right...but it is challenging to visually connect data when you don't have borders in the headers to group columns, like we've got.

[RickA-NI]

I found some blog on table design and it had three (and a half) rules for alignment that seem to jive pretty well with what we're all aligning on here:

[nate-ni]

Ahhhh...the good ole "some blog" :) Just kidding, the No.3 is new to me but does appear to be a pretty standard practice and something I've, admittedly, not thought about too much. Learn something new everyday. 🌈⭐️

No. 3 1/2 is interesting as their could be some cases (not necessarily our use cases) where centering the value along a separator might be preferable like the resolution and ratio columns in the image below. Not sure if modern CSS supports this well yet and probably isn't a priority for us right now, but you can learn more at: https://ux.stackexchange.com/questions/24066/what-is-the-best-practice-for-data-table-cell-content-alignment

Here's a link to another some blog that reiterates 1-3 of the simple rules to follow...with a fun little animation to show the impact. https://www.darkhorseanalytics.com/blog/clear-off-the-table/

[RickA-NI]

How is that content aligned in the resolution and aspect ratio columns? I get the intent to align by the midpoint symbol (x or :) but the data in those columns is not left, right, or center aligned it's some bespoke hand layout stuff. If you couldn't do a custom layout and had to pick one of the programmatic options then I'd think matching the header to the one you pick is still the right choice.

[atmgrifter00]

@RickA-NI, just for clarity, the aspect ratio column is using an existing CSS mechanism to provide that alignment behavior. Basically, CSS would look like this:

.resolution {
    text-align: 'x' center;
}

.aspect-ratio {
    text-align: '.' center;
}

[nate-ni]

aspect ratio column is using an existing CSS mechanism

Support for this particular CSS feature doesn't look so great. Looks like we still need vendor prefixes and a non-vendor prefix version might be deprecated/obsolete.
https://caniuse.com/mdn-css_properties_text-align_block_alignment_values

Support as of 02/07/2023

[RickA-NI]

@jattasNI @nate-ni @leslieab I think I've got these recommendations ready to go. I just want to run them by everyone here before I add examples to the visual spec Storybook is pulling in.

These three rules I think are widely accepted norms and good guidelines for all column types:

1. Numeric data is right-aligned
2. Textual data is left-aligned
3. Headers are aligned with their data

For Numeric value columns I think the above guidelines and Jesse's research has pretty much laid out what we do here. We right-align and use tabular numbers. The font is standard body copy. Source Sans Pro has tabular numbers by default so we get that for free.

For Hyperlink columns we use our standard anchor link control. We treat them as textual data and left-align.

For Icon columns we can have icons with text or without. Either way we treat them as textual data and left-align. Text when needed is standard body copy and offset from icon using our standard sizing token.

DateTime columns are mostly numeric data but seem to be usually treated like textual data and left-aligned. Again we use our standard body copy font. There is a standard format set by ISO 8601 and suggested for use by W3C on how to format this data. We should look into adopting it at least as a default. Here is a summary:

For a more full breakdown on this standard you can see this page here written by the author.
https://www.cl.cam.ac.uk/~mgk25/iso-time.html

[nate-ni]

The only one that we may have to think more about is No.3..."Headers are aligned with their data" specifically for right-aligned content (numbers). All other direction seems pretty solid to me. Since we intend to have controls and icons (for sorting) in the header, we may need to explore how that impacts that particular guidance.

As an example, GH is in a similar situation and has maintained left-alignment in their headers for numeric, right-aligned, columns. While this doesn't dictate our solution, it is a reference to see the impact of that solution.

I know we don't have final designs for those fully featured headers yet but the initial prototype may give us something to work from.

[leslieab]

I agree, I think right-aligning headers is going to be problematic. And due to sort/grouping iconography and the menu button, the text will never vertically right align with row cell content anyway.

[atmgrifter00]

@leslieab just brought up the points I was about to. So...I have nothing. Gosh Leslie!

[RickA-NI]

Here are my column alignment mockups. I think this covers all of the relavent scenarios. Let me know if you like to see something else.

[nate-ni]

Thanks for posting these, @RickA-NI!! It is really helpful.

If our tables were static (non-interactive) displays of data...or maybe just didn't have multiple elements in the header; I think we would align the header content with the column content...but they aren't. I think we should start with keeping the header content left-aligned for all the columns.

This might just be a place to start, I think this is a decision we can change relatively easy and with low impact if we run into issues. Having all the controls in the same order across headers will also likely make things a little less complicated when we get to supporting keyboards and screen readers.

[jattasNI]

One more case to consider: would numeric data with units still be right aligned? We lose some benefit of right aligning if the units have inconsistent widths. e.g.:

Voltage
    101.0V
     1.3mV
    25.7kV

Here the decimals are no longer aligned as they would be if there were no units or consistent units.

Voltage
    101.0V
      1.3V
     25.7V

[jattasNI]

Here are my column alignment mockups. I think this covers all of the relavent scenarios. Let me know if you like to see something else.

Sounds like @nate-ni's vote is to go with "Numeric headers left aligned, values right-aligned" to begin with. I'm ok with this as our initial approach but want to note that, to me, it feels a bit harder to associate the header with the data than other examples in this thread because of our lack of vertical lines separating the columns. While I recognize it's not my area of expertise or decision to make, is there anything we could do visually to increase the association between the column and its header in that case? e.g. Subtle background colors? Always showing the header dividers? @RickA-NI

[jattasNI]

We decided in a team meeting to start with "Numeric headers left aligned, values right-aligned". The concern above will likely be moot if users size their columns to match their data; there won't be large amouts of whitespace which cause headers to be far from their content. We can always revisit this if it turns out to be a faulty assumption.

[jattasNI]

Note from Rick in response to a question from Molly in a team meeting: if the content is mixed data type (e.g. an SLE tag column with strings and numbers) then it should be left aligned.

[RickA-NI]

@jattasNI I know that this has been closed but I did come across an pretty indepth breakdown https://www.csescienceeditor.org/article/best-practices-in-table-design/ of how to format a table for scientific and technical publication. This is for print so there are some things we might do differently, but this section seems pertinent to your last question: