网站用户体验分析:数据可视化6步法

  

  【编者按】本文来源@百度商业UED 在当前互联网,各种数据可视化图表层出不穷,本文尝试对数据可视化的方法进行归纳,整理成6步法。

  一般的数据图表都可以拆分成最基本的两类元素: 所描述的事物及这个事物的数值,我们暂且将其分别定义为指标和指标值。比如一个性别分布中,男性占比30%,女性占比70%,那么指标就是男性、女性,指标值对应为30%、70%。

  1. 将指标值图形化

  一个指标值就是一个数据,将数据的大小以图形的方式表现。比如用柱形图的长度或高度表现数据大小,这也是最常用的可视化形式。

  传统的柱形图、饼图有可能会带来审美疲劳,可尝试从图形的视觉样式上进行一些创新,常用的方法就是将图形与指标的含义关联起来。

  比如Google Zeitgeist在展现top10的搜索词时,展示的就是“搜索”形状的柱形,图形与指标的含义相吻合,同时也做了立体的视觉变化:

  

  2. 将指标图形化

  一般用与指标含义相近的icon来表现,使用场景也比较多,如下:

  

  3.将指标关系图形化

  当存在多个指标时,挖掘指标之间的关系,并将其图形化表达,可提升图表的可视化深度。常见有以下两种方式:

  借助已有的场景来表现

  联想自然或社会中有无场景与指标关系类似,然后借助此场景来表现。

  比如百度统计流量研究院操作系统的分布,首先分为windows、mac还有其他操作系统,windows又包含xp、2003等多种子系统。

  根据这种关系联想,发现宇宙星系中也有类似的关系: 宇宙中有很多星系,我们最为熟悉的是太阳系,太阳系中又包括各个行星, 因此整体借用宇宙星系的场景,将熟知的windows比喻成太阳系,将xp、window7等比喻成太阳系中的行星,将mac和其他系统比喻成其他星系,表现如下:

  

  构建场景来表现

  指标之间往往具有一些关联特征,如从简单到复杂、从低级到高级、从前到后等等。如无法找到已存在的对应场景,也可构建场景。

  比如百度统计流量研究院中的学历分布,指标分别是小学、初中、高中、本科等等,它们之间是一种越爬越高,从低等级到高等级的关系,那么,这种关系可以通过构建一个台阶去表现,如下:

  

  支付宝新出的个人年度账单中,在描述付款最多的三项时,构建了一个领奖台的形式:

  

  小结:

  根据之前3步,可将指标、指标值和指标关系分别进行图形化处理。

  以最简单的性别分布为例,可以得到一个线性的可视化过程,如下:

  

  以上图示为供参考的线性化过程,实际可视化思考中,将哪类元素进行图形化或者图形化前后的顺序可能均有不同,需根据具体情况处理。

  4. 将时间和空间可视化

  时间

  通过时间的维度来查看指标值的变化情况,一般通过增加时间轴的形式,也就是常见的趋势图。

  空间

  当图表存在地域信息并且需要突出表现的时候,可用地图将空间可视化,地图作为主背景呈现所有信息点。

  Google Zeitgeist在2010和2012年的年度热门回顾中,都是以地图为主要载体(同时也结合了时间),来呈现热门事件:

  

  5. 将数据进行概念转换

  先看下生活中的概念转换,当我们需要喝水时,通常会说:给我来一杯水;而不会说:给我来30ml的水。在这里,30ml是一个实际数据,但是难以感知,所以用一杯的概念来转换。

  同样在数据可视化,有时需要对数据进行概念转换,可加深用户对数据的感知。常用方法有对比和比喻:

  对比:

  下图是一个介绍中国烟民数量的图表:如果只看左半部分中国烟民的数量:32000000,知道数据量级很大,但具体有多大却很难感知;直到看到右半部分:中国烟民数量超过了美国人口总和,这样一对比,对数据的感知就加深了。

  

  比喻

  下图是一个介绍雅虎邮箱处理数据量的图表,大意是每小时处理的电子邮件大小有1.2TB,相当于644245094张打印的纸。

  这又是一个很大的数据,但到底有多大? 在这里用了一个比喻的手法:644245094张纸,如果把每一张纸首尾对接,可以绕地球4圈多。到这里,能较深刻感受到雅虎邮箱处理的数据量之大,为地球节省了很多纸张。

  更进一步地,还将这个比喻进行了图形化表现。

  

  6.让图表“动”起来

  数据图形化完成后,可结合实际情况,将其变为动态化和可操控性的图表,用户在操控过程中能更好地感知数据的变化过程,提升体验。

  实现动态化通常以下两种方式: 交互和动画。

  交互

  交互包括鼠标浮动、点击、多图表时的联动响应等等,如下是百度统计流量研究院的时间分布图,采用左图右表的联动形式,左图中,鼠标浮动则显示对应数据,点击则切换选择:

  

  动画

  包括增加入场动画、交互过程的动画、播放动画等等。

  入场动画:即在页面载入后,给图表一个“生长”的过程,取代“数据载入中”这样的提示文字。

  交互动画:用户发生交互行为后,通过动画形式给以及时反馈。

  播放动画:一般来是提供播放功能,像看视频一样,让用户能够完整看到数据随时间变化的过程。下图是Gapminder在描述多维数据时,提供随时间播放的功能,可以直观感受到所有数据的变化。

  

  总结

  数据可视化形式多样,思考过程也不尽相同。以上6步法,是基于“数据”层面(区别于信息可视化),梳理思考过程,总结设计方法,为后续可视化提供可借鉴的思路。

  作者博客:百度商业用户体验部

时间: 2024-07-28 14:12:45

网站用户体验分析:数据可视化6步法的相关文章

SEO与网站用户体验分析

学习seo的人都会隐隐约约的把网站的用户体验放在很主要的位置,而做的时候却很少在乎,即使在乎也不知所以然,那么seo与网站用户体验的关系怎样来看待呢,我们应该怎么做呢?看下文: 1.seo与网站用户体验的概念 seo是搜索引擎优化,是面向搜索引擎的. 网站用户体验是指网站的可用性.根据用户的习惯,心理等等设计的,符合人机交互,符合人体工程学的网站是用户体验好的网站.网站用户体验是面向用户的. 2.seo与网站用户体验的关系是对立统一的 a.seo与网站用户体验是对立的 从seo出现的那天起,就已

网站用户体验分析:解读眼动的12个误区

学术界和商界对眼球追踪技术应用(以下简称眼动)的关注度,每隔一段时间便会出现一次高潮的讨论.随着技术的革新和推广,越来越多的用户研究行业人员开始在产品设计和研发过程中引入眼球追踪技术,尝试读懂用户眼中的产品和体验. 但是由于对眼动技术认知的不足.信息的不对称,导致对该研究方法的误区不断出现.本文将列举一些用户研究领域对眼动的误区,并试图解答正确的应用. 1 "先做个眼动,看看用户在看什么?" 对眼动有所了解的人,通常会向研究员抛来这样的问题.假如盲目地接下这样的任务,不经过需求细分和策

12306网站用户体验分析

  请问哪个电子商务网站可以不做优化.没有广告.不使用任何网络营销手段.网站功能极其普通.页面设计令人摸不着头脑,并且伴随着不太理想的用户体验却仍然能够达到几亿流量?今天就来分(吐)析(槽)一下这个网站,抢不到票的同学,是时候转给12306看了. A:1~2~3~0~6~!(此时大家异口同声.) 12306网站的用户体验有口皆"悲",就算你没有实际操作过,也许应该也有所耳闻.但经历了2013年末的那次大改版后,无论是网页设计还是用户体验,12306网站与之前的版本确实大相径庭. 比如网

网站用户体验分析:以用户视角出发的表单之旅

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 用户使用发布表单,就像是一次旅行.旅行的目的是否能达到?过程是否让人满意?这些都决定了用户会否再来这里. 一.那么为什么要以用户的视角呢? 作为设计师,你是否遇到过这种情况: · 我们额外加一个填写项,用来收集用户信息吧; · 我们的表单之所以复杂,是因为我们希望用户多填写内容,这些内容都是有用是; · 我们的表单应该在这最重要的一步出现,这

网站用户体验分析:页面导航原则

中介交易 SEO诊断 淘宝客 云主机 技术大厅 著名的格林童话故事里面汉赛尔和格莱特知道后母想要在深林里面丢掉他们的计划,将面包屑撒在来时的路上,虽然当月亮升起时,面包屑被鸟吃掉了,但是现在的互联网设计师们从这个故事中找到了灵感,设计出不会被鸟吃掉的固定"面包屑". 图1:互联网上各种各样的面包屑 汉赛尔和格莱特为了在森林中找到回家的路,撒下了面包屑,这是一种导航方式,如果没有被鸟吃掉,无论走到森林的任何地方都可以知道如何从当前的位置走回家去.在互联网信息爆炸的今天,互联网的设计师们在

网站用户体验分析:浅谈图片优化的方法

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在网站优化中,如果图片优化得好,不但可以提高页面的加载速度,提升网站的用户体验,而且还可以通过图片优化来节省网站的带宽.那么作为页面构建工程师应该采用什么方法来优化图片,既能保证UI的还原度,又使图片最精简呢?下面我就个人经验,来简单介绍一下图片优化的方法,首先我们了解一些图片方面的知识: 1. 矢量图与位图. 矢量图:缩放.旋转不失真的图像

网站用户体验分析:小议国民性和Web设计

中介交易 SEO诊断 淘宝客 云主机 技术大厅 本文意在通过对当代中国民众的共性和心态上的思考,从更加人性化的角度考量和设计web产品的用户体验.之所以称作"小议",一是因为"国民性"这个题目很大,也很敏感, 几篇文章无法说尽;再者本人阅历有限,个人观点的bias难以避免;同时,也希望引发大家的一些反思.而"Web设计"则指网络上的用户体验设计的各个方面(图1). 阅读全文 图1:用户体验的4个元素 前言 国民性这个议题,自然没有那么简单,泱泱大

网站用户体验分析:12个糟糕的移动网站体验

移动网页对不少网站来讲是一个新事物,很多网站可能压根就没有考虑过移动站点,但这好像不能成为移动网站体验糟糕的借口.下面是常见的一些糟糕的移动网站体验错误: 1.突然切换到桌面网页 有一些网站提供了wap版和桌面版,但因为设计和技术的疏忽,很可能给用户的页面是桌面的,造成体验的困扰. 2.太小的CTAs(行动按钮) 你已经搜索了一圈,现在打算购买,此时网站要做的是提供一个好看的,足够大的"现在购买"按钮.但不凑巧的事情很多网站提供的按钮仍然非常微小,而且拥挤. 左边这个添加到购物车设计还

网站用户体验分析:交互设计7大定律

"除非有更好的选择,否则就遵从标准",那在交互设计领域都有哪些法则定律被认作了标准了呢? Alan Cooper:除非有更好的选择,否则就遵从标准. 作为交互设计之父的阿兰·库珀最为人熟知的或许就是这句"除非有更好的选择,否则就遵从标准"了,在交互设计领域有很多经过了时间的验证的法则定律被认作了标准,那么你都知道都有哪些吗? 1. Fitts' Law / 菲茨定律(费茨法则) 定律内容:从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标