Responsive Data Tables (Enterprise Design Standards)

Taking on Responsive Data Table Design

AT&T was defining and producing next-generation component design standards based on a modified Bootstrap framework. I was assigned to elevate Bootstrap’s out-of-the-box HTML table object by extending the base visual and interaction design layers using a mobile first, responsive problem-solving approach.

Ultimately, my proposed solutions were adopted as enterprise design standards empowering both B2B and B2C digital projects across the AT&T enterprise.

Computer and mobile screens displaying complex data tables

Enterprise Design Kit (Pattern Library) Hub

My investigation into data table design yielded the need for three distinct table classifications (Simple, Complex and Summary). I presented my findings and forward-thinking design proposals to a variety of internal stakeholders.

After many discussions and reviews, my proposals were accepted and incorporated into a larger enterprise design kit. This kit was accessible by all project endeavors throughout the organization through a centralized design hub known as DS2 Design Hub.

Each of the three data table classifications and their general use instructions were documented out within an About, Specs and Code sections of the DS2 Hub.

In the About section, my proposed recommendations around each table’s general use, interaction and transition rules, conditions and options were made available.

The Specs section provided designers and engineers specific details on color theory, typography, spacing, etc. that aligned with other branded component designs contained in the DS2 Hub.

The Code section offered starter HTML/CSS code snippets accompanied by additional engineering commentary on how to implement each table type.

 

AT&T’s next generation DS2 Design Hub also offered designers across the organization a master Adobe Photoshop PSD file for each of the three table classifications I had proposed. Sketch would have been preferred, but the aptitude level for Sketch across the design team varied too greatly. Photoshop was the lowest common denominator for the majority of visual designers across the enterprise.

I worked with internal AT&T enterprise governing design leads and principles to craft each Photoshop document in accordance with AT&T’s strict documentation standards.

 

Screenshot of Adobe Photoshop canvas and artwork

How It All Began: A Rigorous Content Audit

AS-IS Content Audit Leads to Data Table Classification Assignments

After conducting a data table content audit across AT&T’s B2B and B2C digital environments, I was able to isolate three distinctly different data table use cases (simple, complex and summary).

The audit also confirmed the functional need for the usual suspects common with data tables including:

Condition-based table functions

  • Sticky Header: When page scrolling is required to view content below a table, invoke Sticky Header functionality
  • Pagination: When the table has 21+ rows, invoke Pagination

Experience-based (optional) table functions

  • Column Sorting
  • Inline-messaging
  • Table Searching
  • Table Filtering
  • Zebra-striping: When the table has 6+ rows (and no Inline-messaging), invoke Zebra-striping

1. Simple Tables

Tables classified as Simple will flex elegantly across breakpoints (or simply fit as-is within the smallest 320px viewport). Viewing the content of a Simple table type does not require any additional user involvement (pinching, zooming, scrolling, etc.).

2. Complex Tables

Tables classified as Complex are Simple tables but with one key difference. Complex tables possess so much content that the table in its complete form can not fit elegantly within the smallest 320px viewport. Column data is simply too dense to fit comfortably without the need for additional user interaction (pinching, zooming, scrolling, etc.).

3. Summary Tables

Summary tables are essentially a hybrid of the Simple and Complex table types. However, a Summary table displays only (and always) 2 columns across all breakpoints. The Summary table type is preferred when presenting content in an accounting or ledger style format.

Data Table Fundamentals: Basic Anatomy and Accessibility

Appreciating W3C.org Data Table Specifications and WCAG 2.0 AA Accessibility Requirements

After I defined the popular data table use cases supporting various B2C and B2B scenarios across the AT&T digital landscape, I wanted to ensure I understood the HTML specification for tables as defined by the W3C.org. Additionally, I wanted to also brush up on how that specification related to adhering to the WCAG 2.0 AA accessibility requirement as well.

I spent an afternoon pouring over the W3C.org’s HTML table documentation. By the next afternoon I was ready to speak with AT&T’s Accessibility group for their input regarding accessibility. We started the 30 minute review by first agreeing on the fundamental table anatomy and from there, moved into into how that base table anatomy directly related to accessibility.

“The purpose of data tables is to present tabular information in a grid, or matrix, and to have column or rows that show the meaning of the information in the grid. […] When the proper HTML markup is in place, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.”

WebAIM
Creating Accessible Data Tables
https://webaim.org/techniques/tables/data

1. Table Caption

“While it is not necessary for each table to have a caption, a caption is generally very helpful.”

2. Table Column Headers

“A critical step toward creating an accessible data table is to designate column headers <thead>. Table headers should never be empty. This is of particular concern for the top-left cell of some tables. Group the <th> cells into a <thead> group.”

3. Table Row Headers

“A critical step toward creating an accessible data table is to designate row headers. The scope attribute identifies whether a table header is a column header or a row header.”

4. Table Body Content Area

“The <tbody> area of a table contains the <td> cell content. The <tbody> tag itself has no impact on accessibility while the <td> tag has tremendous impact.”

5. Table Footer

“The <tfoot> element defines the footer rows for a table. It provides no accessibility functionality and are generally only of use when a long table is printed – foot rows will repeat at the top or bottom of each printed page.”

Visual and Interactive Design Improvements Inspired by Proven Cognitive Research

Researching Best Practice Data Table Visual and Interactive Design Possibilities

I investigated a variety of research provided by industry experts regarding data table design.

Status Quo Approach to Complex Data Table Design

But Wait! What’s Wrong with the status Quo?

Many out-of-the-box solutions to the complex data table problem simply miss the mark forcing users to pinch and horizontally scroll data tables on small screen devices. This causes unnecessary friction and frustration for the user.

Bad
(pinching/horizontal scrolling required)

Noooo!
(pinching/horizontal scrolling required)

Not Great
(horizontal scrolling required)

Solution: Visual and Interactive Data Table Design

Addressing the Challenge of Responsive Data Table Design from a Mobile First Perspective

Remove the need for scrolling, pinching and zooming on smaller screens by allowing tables to hide data cells (columns and rows). User’s can toggle open hidden columns with a single click using familiar and intuitive interactions. As screen real estate becomes available, expose / surface more and more columns of data along the x-axis and in order of importance to the user needs.

 We have taken your design recommendations and leveraged them to create an amazing solution for our business partners and they are all overjoyed. We understand that it is a draft and you will be doing some testing, but it has been a great springboard for us and wanted to let you know how much we appreciate you saving the day!

Melinda B.

Product Owner, AT&T

Recap & Outcome

Total success! I worked fairly autonomously as an outside design lead consultant collaborating with an internal AT&T Principle Designer. Over the course of the design challenge, I reported findings and proposals to various groups to defend and collaborate on design direction. At the end of the design effort, my proposals and solutions were adopted as enterprise standards supporting various B2B and B2C project engagements.

AT&T Inc. is a modern media company that brings together premium content, direct to consumer relationships, advertising technology and high-speed networks to deliver a unique customer experience (Glassdoor).

Web:
ATT.com

Size:
10,000+ employees

Headquarters:
Atlanta, GA

Industry:
Telecommunications Services

Competitors:
Comcast, Cox Communications

Revenue:
$10+ billion (USD) per year

Methodology
Autonomous

Back-end System
Not applicable

Front-end Framework
HTML/CSS/JavaScript

Development
Not applicable

Total success! I worked fairly autonomously as an outside design lead consultant collaborating with an internal AT&T Principle Designer. Over the course of the design challenge, I reported findings and proposals to various groups to defend and collaborate on design direction. At the end of the design effort, my proposals and solutions were adopted as enterprise standards supporting various B2B and B2C project engagements.

AT&T Inc. is a modern media company that brings together premium content, direct to consumer relationships, advertising technology and high-speed networks to deliver a unique customer experience (Glassdoor).

Web:
ATT.com

Size:
10,000+ employees

Headquarters:
Atlanta, GA

Industry:
Telecommunications Services

Competitors:
Comcast, Cox Communications

Revenue:
$10+ billion (USD) per year

Methodology
Autonomous

Back-end System
Not applicable

Front-end Framework
HTML/CSS/JavaScript

Development
Not applicable

"The more engaged users are... the more functionality an application can sustain."

-Jakob Nielsen