Enable set data table truncation and text wrap behavior

vsnichols commented 3 years ago

Summary

Currently the data table does not start horizontal scrolling until text wraps to three lines.

Hard for user to mentally and visually process
No ability for designer and dev to choose settings that make sense for use case
Table has to become uncomfortable before horizontal scrolling kicks in
When text truncates today there is no way for user to see full text

CDAI data table team is proposing this change per our discussion with Carbon design in February.

As-Is

To-Be where table set to use truncation

Justification

See above

Desired UX and success metrics

1.) A developer can set line wrap/truncation preferences before horizontal scrolling kicks in 2.) A user can focus on table content without getting distracted by crowded 3-line cells 3.) When text is truncated user can view full text via browser tooltip on hover

"Must have" functionality

Establish a default setting (ex: 2 line wrap where once 2 lines does not fit, horizontal scroll kicks in)
Ability for developer to edit those settings
When text is truncated user can view full text via browser tooltip on hover

Developer should have the following options:

2-line text wrap: Option to wrap to 2 lines (instead of 3)
Truncate: Optical truncation at 1 line, tooltip on hover with full text - would be really nice to be able to choose middle or end truncation!

Specific timeline issues / requests

As soon as possible but preferably during Q2 as CDAI data table responsive behavior depends on this

Available extra resources

CDAI devs could potentially help code

dakahn commented 3 years ago

2.) A user can focus on table content without getting distracted by crowded 3-line cells

Interesting. Do you have some user research or data supporting this? Text truncation is one of those rare design elements that are bad for sighted and keyboard users. Made exponentially worse when used 10, 15, 20 times in a single component.

Instead of forcing content to fit a design you get a more usable and accessible experience by designing to accommodate the content -- which traditionally means responsive containers and text-reflow.

joshblack commented 3 years ago

Hi there! 👋 Going to close this issue out since it's been a while since we've gotten a response.

vsnichols commented 2 years ago

@joshblack can we reopen this issue?

The data table workstream for CCPAL would still like this feature.

We met with @dakahn in June to talk thru concerns and are addressing the following in our guidelines:

Do not truncate text in code (just truncate visually on screen)
Cell should throw Carbon tooltip (Carbon tooltips have delay and escape functionality)
Avoid setting column to a width where every cell is truncated as makes working at scale difficult (we will be allowing users to adjust column width so this should not be an issue)
Always include search option on table if table contains truncation
Consider middle truncation in cases where important or distinguishing information may be at end

Re: evidence for truncation in tables Truncation tends to be recommended for tables in major design systems like Material Design in order to make tables easier to scan

Material design system uses truncation: "Text that is longer than the column width is truncated with an ellipsis. On hover, a tooltip shows the full name."
UX booth recommends middle truncation combined with adjustable columns "Extensive wrapping makes table harder to scan and visually overwhelming"
SAP Fiori truncation guidelines "Use truncation if: You use complex tables, such as the grid table, analytical table, or tree table to avoid performance issues."
RedHat Patternfly also recommends truncation for data tables as long as a tooltip or other option is available to view full text

It is important that we have tooltip behavior to make truncation UX-friendly. @dakahn should we make a separate issue to request carbon data table to support tooltips on truncated text?

vsnichols commented 2 years ago

@aagonzales @dakahn can we work with you on getting some basic form of this implemented in carbon data tables making sure to do it with tooltips and accessibility concerns?

aagonzales commented 2 years ago

Re-opening as conversations have happened offline and adding a proposal label.

aagonzales commented 2 years ago

@mbgower what are your thoughts on truncation patterns?

vsnichols commented 2 years ago

Hey @aagonzales and @mbgower! Wanted to check in on this issue - I edited the proposal slightly to make it simpler!

sstrubberg commented 1 year ago

From Backlog Grooming Call:

Concerns around how this would with horizontal scrolling in C4IBMP. Explore how this fits in. We need @mbgower to weigh in. Could have WCAG 2.2, text truncation issues. This might be partially covered by C4IBMP.

mbgower commented 1 year ago

When text is truncated user can view full text via browser tooltip on hover

The primary problem with this approach is that such tips are not triggerable by touch or keyboard users unless each truncation becomes an actual component. If each ellipsis effectively becomes a button that reveals the full text, then this approach can work. But in a poorly designed table, it could add a LOT of interaction points, and potentially be quite disruptive.

carbon-design-system / carbon