Data tables enable us to present complex and varied datasets clearly and understandably. However, there is more to the process of making a well-designed data table that maximizes user experience than first appears. Beyond aesthetics, the structural and behavioral choices made when creating a data table have a significant impact on how users read, sort, understand, and interpret the data. In this article, we'll delve into the craft of creating data tables atomically that match user preferences, ensuring a seamless user experience that lets users interact with and learn from the data being displayed with ease.
The Building Blocks - Atomic Approach
Consider a standard data table - let’s break down its components, and look into each building material that is put together to create the building block - a data cell. This approach is like looking through a microscope at individual atoms - we see fonts, colors, icons, spacing and borders - all the essential elements that combined shape the cell - the data cell.
Having established the essential atoms, let’s combine them to form molecules - various types of data cells with different content: text, numbers, drop-down chevrons, date-pickers, toggle switches, and commands. We can assign to these molecules properties like read-only and editable - the latter having 3 possible interaction states: normal (default), hover and active.
Continuing our process, let’s combine the molecules to create organisms - and we are now dealing with bigger entities: rows and columns (with a top table header). We can assign fixed width rules and scrolling properties with interaction states as well: normal (default), hover and active (selected). To wrap it up, we can establish filtering rules, keyboard navigation and error management.
With all these organisms formed, we give life to the data table itself - the template.
After the template is established, you can enrich the data table's functionality and interactivity further with elements like pagination, bulk actions, buttons, tabs, title, and subtitles - adding other molecules and organisms.
This journey, as detailed in the article “How to Architect a Complex Web Table”, mirrors the atomic approach of how most design systems are built. In the words of Brad Frost, this approach is not a linear path, but rather a mental model that allows us to perceive user interfaces as both cohesive whole and assemblies of parts, simultaneously.
Speaking of mental models, let’s see how people interact with a data table at first glance.
The User Behaviour
With the foundation of the data table construction in place, let’s establish how exactly these building blocks can be combined to optimize user experience. The best way to do that is to look at the users and observe their behavior.
As presented in the article “Data Tables: Four Great User Tasks” by Page Laubheimer, although having one, perfect formula is not feasible, as the tasks a user takes while dealing with data tables vary depending on applications or users, there are 4 main tasks frequently performed by users while dealing with a data table:
Finding the Record(s) that Fit Specific Criteria: - Users filter, sort, search and visually scan the table
Compare Data: - comparing data across rows and columns - which includes understanding cell content.
View, Edit, or Add a Single Row’s Data: - actions a user can take inside the table
Take Action(s) on Records
We will focus on the first 2 points to conclude how users behave while dealing with a data table: finding and comparing data.
1. Finding the Record(s) that Fit Specific Criteria:
Users engage in various actions to locate specific records within a data table. These actions include filtering, sorting, searching, and visually scanning the table.
The mentioned article discusses an eye-tracking experiment that “shows a participant fixating back and forth between the table’s data and the filters above. At one point, the participant engages in a hierarchical search of the table, moving his eyes between the first column, and second column, then skipping to the fourth and sixth columns before moving to the next row of data and repeating the procedure. Here, the participant performed a hierarchical search of the table, fixating on different columns and rows. This behavior leads to the following design requirements:
The default first column should serve as a human-readable record identifier, aiding in quick identification.
Column order should reflect the importance of the data, enhancing the initial visibility of essential information.
Filters should be easily discoverable, quick to use, and capable of delivering powerful results.
2. Comparing Data
Comparing data across rows and columns is another significant user task when working with data tables. An eye-tracking pattern called the "Lawn Mower '' pattern is discussed in The Lawn Mower Eyetracking Pattern for Scanning Comparison Tables.
This pattern involves users starting at the top left cell, moving right, dropping down to the last cell in the next row, and repeating this process. Based on this behavior, the following design requirements are identified:
Implement fixed column headers for long tables to maintain the visibility of column titles as users scroll.
Allow users to hide columns that are not relevant to them, particularly for tables with a larger number of columns.
Ensure that content cells convey meaning without solely relying on row labels to aid understanding.
Group rows containing simple yes/no features together, facilitating efficient scanning.
Minimize repetitive content by using single cells that stretch between columns for shared features.
Provide context for technical terms or jargon through tooltips or quick explanations.
Keep empty cells out of the primary scanning path to prevent accidental confusion.
These observations and design requirements highlight the need for careful consideration of user behavior when constructing data tables. The aim is to create an intuitive and seamless user experience that helps the users to effectively locate and comprehend data within complex table structures.
Key Design Considerations
Now let’s explicitly go through a list of key requirements for designing an optimal data table user experience:
Primary General Requirements:
Type of Data: Understand the nature of data that will populate the cells. Determine whether the data includes short numerical strings, or complex content like text paragraphs, links, and files.
User Intent: Identify the intended use of the table. Will users mainly scan and compare data for insights, or is the focus on action-driven tasks such as editing and assigning values?
Secondary General Requirements:
Device Considerations: Recognize that interaction experiences vary across different devices, from mobile to desktop screens. Optimize the UX for each platform to ensure seamless navigation.
Actionability: Define whether users should have the ability to modify and interact with the table. Differentiate between read-only and editable tables based on user needs.
Customizable Viewing Options: Offer customizable features such as filtering, sorting, adjusting display density, and searching. Enable users to tailor their viewing experience to their preferences.
Primary Specific Requirements:
Font Legibility: Select an easily readable font, even at smaller sizes. Avoid overly decorative or complex fonts that could hinder quick data scanning. Legibility is particularly important for numerical values and text content that users need to comprehend rapidly,
Font Weight and Styling: Utilize font weights (bold, regular, etc.) to create a visual hierarchy within the table. Important information like headers can benefit from a slightly heavier weight, while regular data can be presented with a standard weight.
Consistent Typeface: Maintain consistency in font usage throughout the table. Using multiple fonts can introduce visual clutter and make the table harder to follow. Stick to one or two typefaces that are clean and well-suited for digital display.
Text Alignment: Proper text alignment simplifies data interpretation. Left-aligned text columns for easier reading, particularly for content composed of letters. For numeric columns, align to the right for optimal comparison, keeping numbers in line with their decimals.
Monospace Fonts for Numerical Data: Consider using monospace fonts for numerical data. Monospace fonts ensure that digits align vertically, aiding comparison and calculations across rows. They are especially useful for numerical values that require precision, such as financial data.
Color: Effective use of color helps differentiate elements and conveys meaning. Employ color coding for categorization, and ensure text color offers sufficient contrast against background colors for readability. Dark text on a light background or vice versa tends to
Visual Cues: Leverage visual cues such as icons, images, color-coding, and progress bars to convey information efficiently.
Vertical Center-Align: Use for rows with slight height variation, spreading white space and aiding visual scanning.
Top Alignment: Apply when row height varies significantly, ensuring all content remains visible.
Cell Padding: Applying cell padding enhances readability and prevents text from feeling cramped. A balanced padding ensures that content doesn't appear cluttered, offering a comfortable reading experience.
Borders: Use table borders and gridlines to provide a clear visual separation between rows and columns. However, opt for subtle and thin lines to avoid overwhelming the users with visual clutter. The borders should aid in scanning the data without drawing excessive attention. Maintain a consistent border style throughout the table. This includes using the same line weight and color for all borders. Inconsistent or erratic border styles can make the table appear messy and unorganized.
Zebra Stripes for Readability: Alternating the background colors of odd and even rows, known as zebra striping, can significantly improve the readability of the data table. This visual pattern helps users follow rows across the table, reducing the chance of losing their place or misreading data.
Strategic Requirements:
Combine Related Data: Merge columns containing related information to reduce clutter and enhance readability.
Group Rows by Type: Group rows with similar attributes to facilitate understanding and comparison.
Optimizing Table Interaction:
Consider the table's type and purpose within the broader interface:
Action-Oriented: Emphasize actions within the table, linking directly to workflows. Facilitate seamless navigation and execution of tasks.
Information-Oriented: Focus on presenting information for users to review and analyze. Prioritize clear data presentation and ease of interpretation.
Viewing Options:
Customizable Density: Allow users to adjust the density of the table according to their preferences and screen size.
Column Management: Offer options to freeze, reorder, hide, resize, and add/remove columns. Empower users to tailor their table view.
Navigation:
Scroll Behavior: Enable smooth scrolling on both axes for seamless navigation.
Sticky Headers & Footers: Implement sticky headers to maintain context during navigation.
Pagination: Provide pagination options for managing large datasets.
Sorting, Filtering & Searching: Allow sorting columns and provide basic filtering and searching options for enhanced interaction.
Table Actions:
Hover States: Utilize hover states to reveal contextual interactions, such as row details and bulk actions.
Row Details: Enable interactive row details through expandable rows, tooltips, modals, or quick-view sidebars.
Multi-Select & Bulk Actions: Display actionable checkboxes upon hover for selected rows, offering bulk actions for improved efficiency.
Cell Editing: Indicate editable cells with hover effects, allowing for inline edits for quick modification.
Feedback & Confirmation: Provide feedback and confirmation mechanisms upon exiting editing states.
Conclusions
Crafting an exceptional data table user experience requires meticulous consideration of each component and interaction. By aligning design choices with user preferences and needs, you can create a data table that empowers users to navigate, interpret, and interact with data seamlessly, leading to enhanced user satisfaction and usability.
To conclude, user behavior is of great importance when designing data tables for optimal user experiences. By breaking down the building blocks of a data table, with the atomic approach, and considering user behavior during tasks like finding and comparing data, you can create tables that are intuitive, efficient, and aligned with how users naturally interact with information. This approach involves a combination of visual design, layout considerations, and strategic placement of elements to guide users' actions and facilitate their goals within the context of data tables.
Honorable Mentions: Further Reading for Deeper Insights
"How to Architect a Complex Web Table" - A comprehensive guide on the atomic approach to designing intricate data tables, by Slava Shestopalov.
"Data Tables: Four Great User Tasks" - An insightful exploration of user behavior and tasks when dealing with data tables, by Page Laubheimer.
"The Lawn Mower Eyetracking Pattern for Scanning Comparison Tables" - A study on the 'Lawn Mower' pattern for scanning comparison tables, shedding light on user behaviors.
"Atomic Design" - Explore the concept of atomic design and its application in creating cohesive user interfaces by treating design as a system of components, by Brad Frost.
"Design of Complex Tables" - A deep dive into designing really complex financial tables, by Andrew Marcus.
The writing of this article was highly influenced by the Masterclass: How to Create Complex Tables Users Love: A UI Designer's Guide, held by Vitaly Friedman.