small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p><a href="http://ift.tt/2pRamqi">uxdesign.cc &ndash; User Experience Design &mdash; Medium</a> | Andrew Coyle </p>
<h4>The ingredients of a successful data table user interface design</h4>
<p>Data is useless without the ability to visualize and act on it. The success of future industries will couple advanced data collection with a better user experience, and the data table comprises much of this user experience.</p>
<p>Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions. This article presents a list of design structures, interaction patterns, and techniques to help you design better data tables.</p>
<h3>Fixed Header</h3>
<p><img alt="" src="http://ift.tt/2qQiS7n">Fixing the row header as a user scrolls provides context on what column the user is on.</p>
<h3>Horizontal Scroll</h3>
<p><img alt="" src="http://ift.tt/2qfkGJT">Horizontal scrolling is inevitable when presenting large datasets. It is good practice to place identifier data in the first column. As an advanced feature, enable individual locking of columns so users can compare data with multiple anchoring identifiers.</p>
<h3>Resizable columns</h3>
<p><img alt="" src="http://ift.tt/2qQfGZv">Resizing columns allows users to see abbreviated data in full.</p>
<h3>Row Style</h3>
<p><strong>Zebra Stripes, Line Divisions, Free Form.</strong></p>
<p><img alt="" src="http://ift.tt/2qf0oQK">The row style helps users scan data. Reducing visual noise by removing row lines or zebra stripes works well for small datasets. Users may lose their place when parsing larger datasets. Line divisions help users keep their place. Alternating rows (aka zebra stripes) help users keep their place when scanning long horizontal datasets. Although they cause usability problems when there is a small number of rows because users may ascribe meaning to the highlighted rows.</p>
<h3>Display Density</h3>
<p><img alt="" src="http://ift.tt/2qQQa67">Smaller row height enables the user to view more data without the need for scrolling. However, is effects scannability leading to visual parsing errors. That is why many successful data table designs incorporate the ability to control display density.</p>
<h3>Visual Table Summary</h3>
<p><img alt="" src="http://ift.tt/2qf7EMp">A visual data summary provides an overview of the accompanying table. It allows the user to spot patterns and issues in aggregate before actioning summary insights.</p>
<h3>Pagination</h3>
<p><img alt="" src="http://ift.tt/2qQwS0J">Pagination works by presenting a set number of rows in a view, with the ability to navigate to another set. The above example provides the ability to customize the row count per view. This pattern is often replaced by infinite scroll. Infinite scroll progressively loads results as a user scrolls. Infinite scroll works well for discovery websites, but is often disastrous for prioritization apps.</p>
<h3>Hover Actions</h3>
<p><img alt="" src="http://ift.tt/2qfrYNV">Presenting additional action when a user hovers reduces visual clutter. However, it can cause discoverability issues because the user needs to interact with the table to expose the presentation of actions.</p>
<h3>Inline Editing</h3>
<p><img alt="" src="http://ift.tt/2qQn7jd">Inline editing allows the user to change data without navigating to a separate details view.</p>
<h3>Expandable Rows</h3>
<p><img alt="" src="http://ift.tt/2qfaOjr">Expandable rows allows the user to evaluate additional information without loosing their context.</p>
<h3>Quick View</h3>
<p><img alt="" src="http://ift.tt/2qQc5KL">Much like expandable rows, quick view enables a user to view additional information while staying in-context.</p>
<h3>Modal</h3>
<p><img alt="" src="http://ift.tt/2qfeiT9">Modals allow the user to stay within the table view, but provides more focus to the additional information and actions.</p>
<h3>Multi-Modal</h3>
<p><img alt="" src="http://ift.tt/2qQwQpD">A multi-modal feature is powerful for active use users to crank through a number of actions, or compare details of disparate items.</p>
<h3>Row to Details</h3>
<p><img alt="" src="http://ift.tt/2qf2Qa2">Clicking on a row link transforms the table into a view with list items on the left and additional details on the right. It enables a user to parse large datasets, as well as reference many items without losing their place.</p>
<h3>Sortable Columns</h3>
<p><img alt="" src="http://ift.tt/2qQqzKQ">Column sorting allows users to organize rows alphabetically and numerically.</p>
<h3>Basic Filtering</h3>
<p><img alt="" src="http://ift.tt/2qfcwBm">Basic filtering allows users to manipulate the data presented in the table.</p>
<h3>Filter Columns</h3>
<p><img alt="" src="http://ift.tt/2qQCDM6">This design pattern allows users to assign filtering parameters to specific columns.</p>
<h3>Searchable Columns</h3>
<p><img alt="" src="http://ift.tt/2qfl6jH">This design pattern allows a user to search specific values within each column.</p>
<h3>Add Columns</h3>
<p><img alt="" src="http://ift.tt/2qQaVip">This pattern allows users to add columns from a dataset. It is a way to keep the table’s data limited to essential information, and allows the user to add additional columns based on their use case.</p>
<h3>Customizable Columns</h3>
<p><img alt="" src="http://ift.tt/2qfoCdO">The customizable columns feature enables users to pick the columns they want to see and sort accordingly. The feature may include the ability to save presets for later use.</p>
<h3>Why Tables Matter</h3>
<p>Data is becoming the raw material of the global economy. The pursuit of data drives the reinvention of antiquated industries. Energy, media, manufacturing, logistics, healthcare, retail, finance, and even government are undergoing a digital transformation.</p>
<p>However, data is meaningless without the ability to visualize and act upon it. The companies that survive the next decade will not only have superior data, they will have a superior user experience.</p>
<p>Good user interface design is based on human goals and behavior. The user interface in-turn effects behavior, which further design decisions are based on. In subtle and unconscious ways, user experience alters how humans make decisions. What is seen, where it is presented, and how interactions are afforded, influence actions. It is important we make design decisions that lead to a better world, one data table design at a time.</p>
<p>I am the director of design at <a href="http://ift.tt/12TJkAf">Flexport</a>, where we are designing the future of global trade. If you are interested in working on complex data-driven problems that effect the real world, apply for one of <a href="http://ift.tt/2lDNcBz">Flexport’s open positions</a>.</p>
<blockquote><p>If you found this article of value please click the ♡ below so others can find this post.</p></blockquote>
<h3><a href="http://ift.tt/2qQjppI">Find me</a> on <a href="https://twitter.com/CoyleAndrew">Twitter</a>, and <a href="http://ift.tt/1oJhsXF">Dribbble</a>.</h3>
<p><iframe src="http://ift.tt/2iFGGW9" width="800" height="400" frameborder="0"><a href="http://ift.tt/2h0f00F">http://ift.tt/2h0f00F</a></iframe><img src="http://ift.tt/2qQc7lR" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2qf7Efn">Design Better Data Tables</a> was originally published in <a href="https://uxdesign.cc">uxdesign.cc</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Design Better Data Tables

Design Better Data Tables

The ingredients of a successful data table user interface design

Top Stories