设计数据可视化交互界面 - Designing Data-Driven Interfaces
英文原文来自：https://blog.truthlabs.com/designing-data-driven-interfaces-a75d62997631
设计数据可视化交互界面
讲述你数据的故事
_BY Erik K（Uber设计总监） __翻译：Kevin嚼薯片_____
“数据仪表盘”、“大数据”、“数据可视化”、“数据分析”——人们和公司们都在试图用他们的数据做有趣的事情。在我的职业生涯中，有幸做过几十个以数据为核心的交互产品工作，我想分享一些关于如何实现一个独特而有意义的产品的想法。
许多人已经讨论过这个问题，所以我将深入介绍我们过程中最有影响的部分。
1. 不同的用户，需要不同的数据
当你在设计复杂的产品系统时，用户必然会是多种角色。管理人员、经理和分析师，在这些常见角色里，每个人都有自己的工作流程和数据需求。
定义良好的用户角色和进行用户洞察本身就是一门艺术，这不是我在这里要深入的东西。如果你对这很好奇，那就去找找Cooper的相关资料吧。
关于用户角色的重要的就是要预先定义他们，从而围绕他们去组织信息架构任务和绘制线框图。
下面是我们去年的医疗报告应用程序的交付成果。系统拥有不同的用户，每个用户都需要自己的数据工作流。一旦我们建立了关键人物，我们会将他们放入到每一次审查会议的交付物中。
把人物角色标注在每个设计稿上方。我们的客户已经默许了这种方法。
向一屋子的客户去展示作品是一项艰巨的任务。不管你是在解释线框图还是流程图，还是去讨论视觉方案，都很难让每个人都专注在上面。
通过人物角色去形象地组织你的作品，可以帮助你（和客户）在这些讨论中保持一定程度上的专注。
2. 塑造页面
多年来我获得的一项技术就是塑造页面概念。核心理念非常简单：
向用户展示他们首先 需要 看到的内容，然后根据用户场景或信息层次来构建页面的其余部分。
塑造页面概念是写诗歌（和许多其他交流形式）的核心原则，在写完一本书后，我变得更加精通起来。多年来，我花了很多时间去阅读《风格：清晰和优雅的基础》。除了作为优秀的写作参考之外，它还有条理地描述了这个概念：
当你开始时是分散的时候，你的用户不仅很难看到每个元素是什么，也很难聚焦于整个段落。
这是在UX设计时要记住的一个有用的原则。下面是我们塑造页面的两种常用方法。
给你的仪表盘一些结构。问问你自己——我用这些信息来怎样讲述场景?（至关重要的、方便查看的、信息丰富的）（总体预览、详细总结、特定项目/任务）
我在behance和dribbble上看到的许多仪表盘和数据可视化项目都设计得很漂亮（视觉上），但绝大多数都是令人失望的。它们要么是大量的图形小部件被安排在一个没有层次结构的pinterest样式的布局中，要么是不适合数据的过度可视化设计。
左边的图像显示了堆砌式的数据可视化处理方法，右边是一个从数据的角度出发装饰物的例子。
在上图（左边），仪表板展示文档采用指挥中心的方法来呈现信息…显得非常堆砌。为了避免这种情况，我们尝试通过组织信息的方式来设计这类界面，使其更像是在阅读杂志文章。
不是说没有时间和位置去做这类指挥中心式的UI…我个人希望设计这样的东西。但在大多数情况下，在同一时间看到所有信息是不必要的。
要去考虑的关键是 ——避免创建一个粗略的可视化界面。在页面上显示信息，这样用户就可以先获得关键信息，然后再根据需要的内容进行操作。
3. 选择“正确”的可视化图表
有许多（真的非常多）的设计以美学的名义在滥用图表。
最糟糕的是，这些“坏习惯”似乎正在成倍增加。我经常看到，那些区域图的地方应该用饼图代替，或线图的地方应该用柱形图代替。所以我们应一起去避免这种情况…这里有一些小技巧来做数据判断：
始于数据
原始的表格行——它一点也不性感。然而，这是最好的起点。它将帮助你去考虑数据中的可用变量以及各种数据实体是如何关联的。
原始数据的扁平化特性将帮助你去思考系统中数据之间的关系。
除了盯着一排排的数据和期待灵感到来，你可以更积极一点，看看这些巨大的资源，帮助你去发现有趣的联系:
Charted — 由Medium开发的自动可视化数据工具。
用 Google Sheets、Illustrator 和 Sketch 去设计更好的图表。
Tableau — 这是最好的工具之一，但是很贵。
在这个过程中，没有什么灵丹妙药。 不要害怕投入到数据中，尝试通过混合和匹配不同的变量来制作基本图表。这需要时间，但很值得。我的一些最好的想法都是从修改原始数据文件开始的。
离散的 和 连续的 数据
我花了一段时间才意识到这一点，有些图表比其他图表更能说明你的数据。在你的库中挑选好看的图表很容易。我曾经多次犯过这样的错误（我很喜欢用散点图）。
根据你所使用的数据类型去挑选，某些类型的可视化效果要比其他类型更好。选择合适的图表的一种方法是评估您所拥有的数据类型。这有两种主要的数据类型：
离散数据 — 你用来计算的不同数值。例如，多个得分数据，或Facebook的点赞数。
柱形图最适合于离散数据
连续数据 — 在一定范围内的任何值。例如，一个季节的降雨量，或一个人的身高/体重。
线条图最适合连续的数据
简而言之，线条图最适合连续的数据，而柱形图最适合离散数据。
一个我真正必用的资源是 Dona Wong的《华尔街日报：信息图表指南》。我真希望能提早几年前遇到这本书。它对于选择合适的图形和判断是否显示对应信息，非常有用。
http://www.amazon.com/Street-Journal-Guide-Information-Graphics/dp/0393347281
4. 通用的 与 自定义的 数据可视化方案
最后，作为这些数据丰富的系统的设计者，你必须不断地问自己“我是否应该使用更少路径，或者使用定制化？又或者我应该用靠得住的图表来表达信息？
我最近从 37 Signals 中发现了这篇文章——《我只需要三张图表》。作者提出了一个关于可视化“解决方案”特性如何取代其视觉特性的观点。我完全同意他的观点。然而，我认为他的观点非常功利主义。我相信自定义可视化通常可以增强数据的可用性，并且看起来很独特和引人注目。
一个基本柱形图的例子
对我来说，有“一刀切”的图表和“最适合”的图表。表格、线图和柱形图在适应多种类型的数据方面做得很好，但它们也是相当通用的（一刀切的）。作为一名专业的设计师，我希望我的作品的外观和感觉是 独特的和与别不同的 。
例如，《纽约时报》做了一项了不起的工作，用自定义的交互式可视化来完善他们的文章。你可以点击这里看到更多他们的作品。让我们来挖掘几个完美的自定义可视化例子：
这个例子通过在图表的数据底部增加“简要信息”来完善线形图。
http://www.nytimes.com/interactive/2013/03/29/sports/baseball/Strikeouts-Are-Still-Soaring.html?_r=0
在这个3D图中，视角的变化是非常有吸引力的，同时也帮助用户更好地了解数据的相关性。
http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?_r=0
这个例子来自 Selfiecity.net 用实际的内容来展示了一个可视化的好方案。
最后，在我们给CNN做的一个项目中，我们使用颜色编码和3D方块来显示政党偏好，以同时可视化人口统计信息。
作为一种经验——当数据和技术能实现时，我们试着做出自定义的可视化方案，但是我们总是有一个后备方案，以防事情没有进展，或者客户更喜欢一个不那么与众不同的方案。
5. 那又怎样?
那么我们为什么要把这些数据放在页面上呢？回答：因为这可以让人们做一些事情——做决定，调查，预测未来，等等。重点是，你的用户并没有对你所选择的漂亮颜色感到惊喜，他们只关注他们正在做的事情。
所以这是我的建议——在你把你的页面布置好之后，所有的事情都恰到好处后，问问你自己：“那又怎样？”看看每一个图表、小部件、表格，并思考一个人会从它们上得到什么。通常你会得出这样的结论：“这无关紧要”，这是一种需要精简和反思的信号。
我遇到过几次这样的情况——我创建了一个非常复杂的仪表盘，它有一系列的趋势图、饼图和成千上万个数据点的地图。但客户却只是问：“我只是想知道产品是否在运行…我在哪里可以看到？” 或 “我只需要知道三件事…X、Y和Z。我在哪里可以找到这些？”
在这一刻，你意识到你迷失在了细节中，而忽略了整体。
我采用的一种方法是尝试使用文本来准确地表达某人想知道的内容。
对于高级信息，文本摘要可能比图表更有用。
上面的图片取自我们最近的两个项目。两者都简单地通过文本告诉用户他们需要了解什么，而不是依赖图表去解释。
我们与客户对于这种方案达产生了共鸣，特别是对于高级信息。但正如我前面提到的，总是有多个角色需要去考虑，所以请在适当的地方中使用。
就像所有形式的设计一样，这是一个平衡的行为。
努力以一种与众不同的方式呈现你的数据，但要避免过度设计和不必要的干扰。
为你的数据选择正确的图表，但不要忘记构建的页面结构需要带有层次。
如果你觉得这篇文章有价值，请在文章底部给我打赏，有机会获得我整理的《产品经理能力模型地图》和《运营能力模式地图》噢～
Designing Data-Driven Interfaces
Telling the story of your data
_____“Dashboard”, “Big Data”, “Data visualization”, “Analytics” — there’s been an explosion of people and companies looking to do interesting things with their data. I've been lucky to work on dozens of data-heavy interfaces throughout my career and I wanted to share some thoughts on how to arrive at a distinct and meaningful product.
Many people have already tackled this topic, so I'm going try and stick to the parts of our process that have the most impact.
1. Different users, different data
Whenever you're designing complex systems there will inevitably be multiple users or personas to design for. Executives, managers, and analysts are common personas that each have their own workflows and data needs.
Defining good personas and generating insights is an art within itself, and it’s not something I’m going to detail here. If you're curious about how to do this, check out this helpful post from Cooper.
The important thing to remember about personas is to identify them upfront and organize your information architecture tasks and wireframes around them.
Below is a deliverable we used for a healthcare reporting application we worked on last year. The system has distinct users each requiring their own data workflows. Once we established the key personas we included them alongside our deliverables with each review session.
Notice how the personas top each artboard. Our clients have been receptive to this approach.
Presenting artwork to a room of clients can be a difficult task. Whether you're explaining wireframes and flow diagrams or debating visual treatments, it’s hard to keep everyone tracking to your vision.
Organizing your artwork by personas will help you (and your clients) stay on point during these discussions.
2. Shape the Page
One technique I've picked up over the years is the concept of shaping the page. The core idea is really simple:
Show the user what they need to see first, then structure the remainder of the page based on the user story or hierarchy of information.
The concept of shaping the page is a core principle of writing prose (and many other forms of communication), and something I became intimate with after writing a book. Over the years I've spent a lot of time with the book “Style: The Basics of Clarity and Grace”. Aside from being an excellent reference for writing, it describes the concept eloquently:
When you start with distractions, your audience has a hard time seeing not just what each element is about, but the focus of the entire passage.
This is a useful principle to keep in mind when designing UX. Below are two common approaches we use to shape the page.
Give your dashboards some structure. Ask yourself — What story am I telling with this information?
Many of the dashboards and data viz projects I see popup on behance and dribbble are beautifully designed (visually) but are often overwhelmingly underwhelming. They are either A) a myriad of graph widgets arranged in a pinterest-style layout with no hierarchy or B) over-designed visualizations that aren't appropriate for the data.
The left image shows an overwhelming approach to data vis. The right is an example of ornamentation that detracts from the point of the data.
In the image above (on the left), the reporting dashboard takes a Mission Control approach to presenting the information…which is pretty overwhelming. To avoid this, we try to approach these types of interfaces by curating the information more like you're reading a magazine article.
Not to say there isn't a time and place for a mission control UI… I personally would love to design something like that. But for most situations seeing everything all the time is unnecessary.
The key thing to consider — avoid creating a smattering of visualizations . Shape the information on the page so the user is presented with key information first, then follow it up with supporting content.
3. Choose the right visualizations
There are many (too many) designs floating around that misuse charts in favor of aesthetics.
The worst part is — these “bad habits” seem to be multiplying. Everywhere I look, I see area charts that should be pie graphs or line charts that should be bar graphs. So let’s try to stop this together… Here’s a few tips for doing your data justice:
Start with the Data
It’s not sexy — raw tabular rows of data. However, it’s the best place to start. It will help you start thinking about what variables are available in the data and how the various data entities are related.
The flat nature of raw data will help you think through relationships between entities in the system.
Aside from staring blankly at rows of data and hoping ideas eventually slip into your subconscious, you can be a little more proactive by checking out these great resources to help uncover interesting connections:
Charted— a tool developed by Medium that automatically visualizes data.
Designing Better charts with Google Sheets, Illustrator, and Sketch
Tableau— This tool is one of the best out there, but very expensive.
There is no silver bullet for this part of the process . Don’t be afraid to dive into the data and try making basic charts by mixing and matching different variables. It takes time, but it’s worth it. Some of the best ideas I've come up with started with tinkering around with raw data files.
Working with Discrete vs. Continuous Data
It took me a while to realize this, some graphs do a better job of articulating your data than others. It’s easy to pick charts that look good in your composition and hope your data works out. I've been guilty of doing this myself many times (I love me a good scatter plot).
Depending on the type of data you're working with some types of visualizations work better than others. One way to choose the appropriate chart is to evaluate the type of data you have. There are two main types of data:
Discrete Data — distinct values you can count. For example, a number of goals scored or Facebook likes.
Bar charts work best for discrete data
Continuous Data — Any value in a range. For example, rainfall for a season or a person’s height/weight.
Line charts work best for continuous data
In short, line graphs work best for continuous data and bar graphs work best for discrete data.
One resource that really solidified this for me is “The Wall Street Journal: Guide to information Graphics” by Dona Wong. I wish I would have had this book with me years ago. Its an invaluable reference for choosing appropriate graphs and the dos & don'ts for presenting information.
http://www.amazon.com/Street-Journal-Guide-Information-Graphics/dp/0393347281
4. Basic vs. Custom visualizations
Lastly, as the designer of these data-rich systems you have to constantly ask yourself “should I take the path less traveled and go custom? Or should I use tried-and-true charts to articulate the message?”.
I recently came across this article from 37 Signals —Three charts are all I need. The author makes a strong point about how a visualization “problem solving” characteristics supersedes its visual qualities. I totally agree with the sentiment of his post.However, I think his opinion represents a very utilitarian perspective. I believe custom visualizations can often enhance the usability of the data AND look unique and compelling.
An example of a basic bar chart
To me there are “one-size-fits-all” charts and “best-fit” charts. Tables, lines and bar charts do a great job of accommodating many types of data, but they are also pretty generic (one-size-fits-all). As a professional designer I want the look and feel of my work to be distinct and useful .
For example, The New York Times does an amazing job augmenting their articles with custom interactive visualizations. You can see more of their work here. Let’s explore a couple examples of impeccable custom visualizations:
This example puts a twist on a line graph by offering a “peek” into the underlying data driving the chart.
http://www.nytimes.com/interactive/2013/03/29/sports/baseball/Strikeouts-Are-Still-Soaring.html?_r=0
In this 3D graph, the change in perspective is visually mind-blowing but also helps give the user a better insight into the relativity of the data.
http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?_r=0
This example from Selfiecity.net does a nice job using the actual content to create the visualization.
Lastly, from a project we did with CNN, we use color-coding to show political party preference and 3D extrusion to visualize demographic information simultaneously.
As a rule of thumb— we try to come up with custom visualizations when the data and tech call for it, but we always have a plan B in case things don't pan out or the client prefers a less ambitious approach.
5. So What?
So why do we put all this data on the page anyway? Answer: so people can do shit with it — make decisions, investigate, predict the future, whatever. The point is, your users aren't marveling at the pretty colors you've selected, they are trying to do their jobs.
So here’s my advice— after you've gotten your page laid out and everything is crafted just right, ask yourself “so what?” . Look at each graph, widget, chart, table, and ponder what someone will glean from it. Often times you'll come to the conclusion, “it doesn't matter”, which a red flag to reduce or rethink.
It’s happened to me a few times — I’ve created wonderfully complex dashboards housing a series of trend graphs, pie charts, and maps with thousands of data points. Only to be asked by the client “I just want to know if the product is working…where can I see that?” or “I only need to know 3 things…X, Y, and Z. Where can I find those?”
Sigh. In this moment you realize that you've gotten lost in the weeds and missed the big picture.
One tactic I've picked up to help with this is to try and use text to communicate exactly what someone wants to know.
At a high-level, text summaries can be more useful than charts.
The images above are taken from two of our recent projects. Both simply tell the user what they need to know via text rather than relying on charts or graphs that need to be interpreted.
This approach resonates with our clients, especially for high-level information. But as I mentioned earlier there are always multiple personas to consider, so use where appropriate.
Like all forms of design, it’s a balancing act.
Strive to present your data in a distinctive way, but avoid over-designing and unnecessary distractions.
Choose the right graphs for your data, but don’t forget to construct your page with hierarchy.
作者：Kevin嚼薯片
关键字：产品经理, 产品设计, 设计, 设计文章
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
