前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >37. 精读《how we position and what we compare》

37. 精读《how we position and what we compare》

作者头像
黄子毅
发布2022-03-14 16:00:11
1510
发布2022-03-14 16:00:11
举报
文章被收录于专栏:前端精读评论

摘要

本期精读文章以一个简单的例子,抽丝剥茧细数讲述如何面向用户可视化设计,探索用户最终的目的,化繁为简,化多为少,揉和N张图至一张图,并传达更多的深意。本文原文:http://www.storytellingwithdata.com/blog/2017/12/14/how-we-position-and-what-we-compare

下面是案例优化的具体步骤:

庖丁解牛 - 可视化案例优化

可视化的时候,一定要优先考虑用户能够比较什么,然后把这些数据放到一个基准上,并把要比较的东西放到最近的地方。这样用户就可以快速简便的处理比较数据。图中有一系列类似分面的柱状图,代表了 Q1 ~ Q3 三个季度的账户 targeted筛选 -> engaged订阅 -> pitched投放 -> adopted采用的四个状态的百分比,这四个状态是呈漏斗式的数据,分别是上一个数据的子集。这个案列中,用户希望能够在一张图中比较所有的数据。如下是基础原始图:

这张原始也不乏一些优点,每个数据都清晰的表明了含义,但还是需要花费一些的时间找出图中数据表达的最重含义。但是是不是有更好的办法重新排列数据呢?我们来整理下这张图需要对比的内容把。

  1. 左上角,我们可以对比 Q1 北美 的四条柱状图,因为这四个数据相邻,并且是在一个坐标系中。
  2. 最上面一排,我们可以对比 Q1 北美和EMEA engaged订阅(两条紫色柱子)的数据,这个对比需要我们横向用手指去比较,需要参照物,存在一定的门槛。

基于第2点,我们可以考虑转换下思维,转换下数据呈现的类型可以更快速的比较。文中作者从自己在银行的职业生涯中发现线性图形的角度可以更快速的比较。所以就有了下面一张图

再进一步去除无用的柱状图,并把三个纵向的图合并,进一步简化成下面的图

可以看到坐标轴也有一些小优化,增加了字母标注每个步骤,不只是单一的颜色标注,每条线也能够区分出来它的归属(Q1 ~ Q3)。除此之外,我们还有一些非常特殊的信息需要透传,用户虽然在对比以前的数据,但是对当前的现状也是非常关注的,所以增加一些额外的实时信息以及数据解读,可以辅助用户做出下一步决策。

最后进行色彩优化,就可以看到如下最终的方案:

从这个方案,可以清晰的解读出:

  1. 每个阶段,北美的数据都比其他地区低
  2. 相比其他区域,为什么APAC 的传播度有了突然的提升?
  3. 最需要关注Q3的数据,以及最终阶段的数据

最后

从这篇文章的可视化案例优化样板,可以总结出以下步骤:

  1. 明确用户看图目标,根据需要转换图形表现形式
  2. 合理合并不需要拆分的数据,尽量减少数据的平铺
  3. 猜测探索用户下一步,突出当前实时现状、异常点、决策意见
  4. 利用色彩给数据分类,避免用户混淆

虽然这篇文章给出了比较场景下的优化案例,但是数据是僵硬的,呈现形式是多样的,其他场景下也会有其他更适合的优化方法。可视化和语言一样,前者是把数据翻译成图形,后者是人的思维翻译成文字。不过这也带来与语言雷同的障碍,换种方式表达可能传达的含义就完全不同。如果数据的表达方式能和语言一样,有一些固定的语法和规则,就可以大大减少表现上的歧义。因为人脑处理图形效率高于文字,所以现在很多大数据还是属于沉睡状态。我们前端做的是提升人机交互效率,通过图形可以几倍甚至几百倍提高理解速度。现在我们做的还只是把结构化的数据做到让人读懂,未来可能数据直接原始化存储,基于深度学习+可视化,转化成图形化数据,就可以让人类读懂图,甚至让机器也读懂,实现自我大数据解析。

未来,一切不可预期~~~

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-05-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端精读评论 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 摘要
  • 庖丁解牛 - 可视化案例优化
  • 最后
相关产品与服务
大数据
全栈大数据产品,面向海量数据场景,帮助您 “智理无数,心中有数”!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档