设计更好的数据报表

2017-05-15 14:27:00

英文原文来自：https://uxdesign.cc/design-better-data-tables-4ecc99d23356

设计更好的数据报表

一个成功数据报表的用户界面设计组件

_Andrew Coyle _翻译： Kevin嚼薯片

没有可视化表达和处理，数据将变得无用。未来产业的成功，依赖于具有更好用户体验的数据采集和数据报表。

好的数据报表允许用户进行浏览、分析、比较、筛选、排序，以及通过处理信息从而获得启发和执行命令。本文展示了一系列的表单结构，交互模式，和设计技巧来帮助你去设计更好的数据报表。

顶部行标题固定

当用户垂直滚动时固定顶部行标题，能提供用户所在列的相关信息。

水平滚动

水平滚动在展示大量数据集时是不可避免的。把识别信息放到第一列是一种好方法。作为一种比较高阶的功能，允许锁定个别的列从而让用户与多个固定识别信息进行对比。

尺寸可变的报表列

调整列的尺寸，能让简略的数据展示完整。

报表行的样式

条纹样式，线条分割，无限制样式。

行的样式能帮助用户快速浏览数据。对于数据量较少的报表，去掉条纹和线条能减少视觉负担。但对数据量较大的报表，用户在查阅时会错位。线条分割能帮助用户避免错位。交替行（条纹样式）能帮助用户在浏览较长的水平数据信息时不错位。即便这种样式在行数少时会因高亮的行比较明显而导致可用性问题。

显示密度

更小的行高允许用户不需要滚动便能查看更多的数据。然而这会影响可读性，从而导致查看解析错误。这就是为什么许多成功的数据报表设计会加上能控制显示密度的功能。

可视化数据报表概要

可视化数据报表概要往往会提供一个用于整体概述查看的附加表单。它通过整合的方式让用户在进行意见汇总前，找到数据模型和关键点。

页面行数

页行数能展现当前页面的行数，同时也有对行数进行设置的功能。上面是能够自定义每个视图行数的例子。这种模式经常被无限滚动的方式所取代。无限滚动是指当用户滚动时逐渐加载数据。无限滚动非常适合探索网站，但这对应用程序的优化往往是一个灾害。

悬停效果

当用户将鼠标悬停时才展示额外的操作行为，能减少视觉上的混乱。然而这会导致可发现性问题，因为用户需要与报表进行操作交互才能把隐藏的操作行为展现出来

报表内编辑

报表内编辑能允许用户直接修改数据，而无需进入到另外一个单独的详情页面。

可展开的报表行

可展开的行，能让用户在保持语境的前提下去查看附加信息

快捷视图看板

就像可展开的行，快速视图看板允许用户查看附加信息并保持语境。

模态

模态允许用户停留在报表界面，但可以让注意力更集中在附加信息和操作行为中。

多模态

多模态的强大之处在于能让活跃用户执行一系列的操作行为，或比较不同项目的细节。

报表行的详细信息

点击行上的链接将表格转换成左边列表项和右边细节信息的视图。它允许用户去分析对比大量数据集合，以及在不丢失语境的情况下展示更多项目内容。

可排序的报表列

列的排序能允许用户有组织字母和数字。

基本过滤

基本过滤允许用户控制报表中的数据呈现。

过滤报表列

这个设计模式允许用户对特定的列进行参数过滤。

可搜索的报表列

这个设计模式允许用户对特定在每个列的值进行搜索。

添加报表列

这种模式允许用户从一个设置集合中添加报表列。它是一种使报表数据保持有限基本信息数据的方法，同时允许用户根据使用场景去添加额外的报表列。

可自定义的报表列

可自定义列的功能允许用户选择他们想看到的报表列，并进行对应的排序。这个功能可以保持后续扩展的能力。

为什么数据报表值得关注？

数据正在成为全球经济发展的原料。数据同时能驱动过时的产业进行改造。能源业、媒体、制造业、物流、医疗、零售业、金融业、甚至政府都在经历着一个数字转换的过程。

然而，没有可视化和执行性的数据是没有意义的。未来十年能生存的公司将不仅拥有优质数据，还应该拥有优质的用户体验。

好的用户界面设计是基于用户的目标和行为习惯。深层的设计决策是基于受用户界面所影响的行为习惯。用户体验以微妙和无意识的方式改变了人类做决定的方法。它是什么，它在哪里，以及它所提供的交互方式影响着我们的行为。而重要的是我们做的设计决策将导致一个更美好的世界，尽管仅仅只是一个数据表单的设计。

我是Flexport设计主管，我们正在设计全球贸易的未来形态。如果你有兴趣从事复杂的数据驱动难题从而影响现实世界，欢迎申请Flexport的职位。

如果你觉得这篇文章有价值，请为我的文章点♡和打赏。

Design Better Data Tables

The ingredients of a successful data table user interface design

_BY Andrew Coyle_

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.

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.

Fixed Header

Fixing the row header as a user scrolls provides context on what column the user is on.

Horizontal Scroll

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.

Resizable columns

Resizing columns allows users to see abbreviated data in full.

Row Style

Zebra Stripes, Line Divisions, Free Form.

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.

Display Density

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.

Visual Table Summary

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.

Pagination

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.

Hover Actions

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.

Inline Editing

Inline editing allows the user to change data without navigating to a separate details view.

Expandable Rows

Expandable rows allows the user to evaluate additional information without loosing their context.

Quick View

Much like expandable rows, quick view enables a user to view additional information while staying in-context.

Modal

Modals allow the user to stay within the table view, but provides more focus to the additional information and actions.

Multi-Modal

A multi-modal feature is powerful for active use users to crank through a number of actions, or compare details of disparate items.

Row to Details

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.

Sortable Columns

Column sorting allows users to organize rows alphabetically and numerically.

Basic Filtering

Basic filtering allows users to manipulate the data presented in the table.

Filter Columns

This design pattern allows users to assign filtering parameters to specific columns.

Searchable Columns

This design pattern allows a user to search specific values within each column.

Add Columns

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.

Customizable Columns

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.

Why Tables Matter

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.

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.

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.

I am the director of design at Flexport, 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 Flexport’s open positions.