百度首页 | 百度空间
 
查看文章
 
(翻译)魔术墨水——信息化软件和图形界面 part2
2008-03-04 11:58

原文:Magic Ink - Information Software and the Graphical Interface
作者: Bret Victor


信息化软件设计就是图形设计

    这就像我要求软件做很多事情。但它没有什么高深的奥妙──没有对复杂现象的模拟,没有对外部世界的映射,当然也不会具备注入“生命火花”的超能力。我要求软件提供一套良好的方式展示复杂的数据,使我能理解并思考。这是一个很好的既定目标;它是信息图形化设计存在的理由。我的挑战是──做完美的图形设计案例。

    一个优秀的信息图形能够激励人们提出或回答问题,比较结果并得出结论。它通过激发人眼的各种潜能──瞬时不费力的运动,高速、高频的并行处理,对内在模式认知与关联,通览全页或聚焦细节的微观/宏观二元性──来做到这些。与此同时,图形能规避人的弱点:单一维度且不可控的听觉系统,相对迟缓的运动系统,有限的理解隐性机制的能力。一个图形在呈现时无需任何用于理解或操作的机制──它能直接进入到心理空间的推理中心。

例如这个列车时刻表:


    这样的设计可能对乘客十分有用,他们关心的问题大多是列车何时到达车站。但铁路系统的运营商关心的则是:在某时列车正开至何处?列车的时速是多少?两列车的轨道交叉点在何处?(因为他们必须在此处错开列车经过的时间! ),列车当日的始发点和终点在何处?如果火车晚点,如何告知乘客?上述问题都很难通过该软件得到解答。如果将设计作如下修改结果可能就很不一样了:


    每辆列车都用一条明显的色线代表,纵轴代表轨道线路,横轴代表时间。坡度线代表着火车的方向和速度;线段平行于横轴时代表在某一站点停留。这个图表相比上一个没有包含更多数据只是将信息重新整合了,但所有经营商关注的问题,此时一目了然。而且,诸如两列车的轨道交叉点这些信息看上去十分明了,无需任何注解。如果一辆列车延误,它的所有数据会被重新计算,绘制出一条新路线。

    与大量现有的以纸张为载体的设计相比,大多数的软件设计都很欠佳。这只是表相的问题,深究其原因,我相信最主要的问题在于,很多软件设计师认为他们正在设计的是一台机器。他们关注的是──软件如何被操作。他们首先会问:哪些功能是软件必须具备的?软件必须接收哪些指令?哪些参数可以进行调整?(换言之网站:哪些页面必须存在?他们之间如何链接?哪些是动态功能?)设计师一开始就指定功能,但却忽略了信息化软件的本质是展示信息

    我认为信息化软件设计应该以图形设计为出发点。首要关注的应该是信息如何“呈现”的问题。设计师要自问:哪些是相关信息?用户想知道些什么?哪些情况下她需要对结果进行对比?她可能会做出怎样的决定?怎样才能让数据有效呈现?怎样才能将视觉语汇和图形设计技巧用于指导用户做出决策?设计者首先要考虑的就是软件的视觉呈现,因为用户使用软件是为了认知──而认知的主要手段就是“看”。

    我们不应将以纸为介质的设计作为上世纪的遗留下的老古董而舍弃在一边,我们要意识到它是软件设计的基础。如果在信息化软件中呈现数据无法做到像在纸面上呈现的那么好,那我们的进步何在?

演示:展示数据

    Edward Tufte关于设计统计图表的第一条原则便是:"展示数据"。所有的信息图形都应该让用户在查看数据时一目了然。然而很多的软件设计者在设计时一味的关注于软件的功能设计却很少花时间考虑如何展示数据。

    看看在线书籍的搜索结果:


    针对以上的图形设计能够提出大量批评──字号不一,粗细各异的文字拥挤地排列在一起,各种色彩交织,简直像个嘉年华盛会。文字充斥整个页面,让人眼花缭乱。最糟糕的是,没有足够的信息让人作任何决定。

    用户的目标是从某些特定话题中找到最中意的书。因此,书籍的展示应该与这个问题相关──用户可能会存在什么样的疑问?

*这本书怎么样?是关于什么的?我会喜欢么?

*这本书好吗?别人对它的评价如何,这些评论可信么?

这些问题的答案可以作为选择相关书籍时的参考。帮助用户做出决定,引导他们购买。

不幸的是,这些问题根本无法在所提供的信息中找到答案。用户必须逐个点击商品才能看到相关信息。也就是说她不得不通过手的操作而不能光靠眼睛浏览找到答案,还得运用自己的记忆对各个跨页面的信息进行比较。

问题在于,这个图表只罗列出了一系列书籍作为它们之间进行比较的索引页面。但它的用途不应该只作为一个可供查询和比较的清单,而应该是帮助用户获得她感兴趣的图书的信息。

这是重新设计后的效果:


    这本书怎么样?表格中提供了概述的简介。它是本好书么?评级和评论显示了读者对它的看法。所有信息在同一页呈现,用户只需用眼睛比较,无需费神记住它们。

1─5星的评级体系,提供的信息并不充足,因为它取的是众人评价的平均值。用户还可以根据星级下的小红点获悉不同人对书的评价差异。有些书众人对它的评价大致相同,比如

──大家都觉得它是本还不错的书(小红点都集中在中间三颗星上)。而有些书,有人爱它至极有人恨它入骨,比如
──人们对它的评价差异很大。虽然它俩的评级都是三星,但显然意义不同。观众还可以看到那些评价很高的书有什么负面评论,相比大量的赞美之词,批评往往更有启发性。从整体上来看,小红点并没有喧宾夺主,过分吸引人的视线,反映平均值的星级还是更为显眼的,不关心评价差异的用户完全可以忽略它。

文字加粗和颜色改变只用在个别需要强调的信息上。那些次要的信息设成灰色文字,与背景色相近,暗示用户只需浏览。所有重要的信息和图片都一律限制宽度,靠左侧对齐──处在最佳可视范围内,而右侧栏只用来显示补充信息。观众只需垂直查看左侧栏就可获取所有重要信息,如果她发现其中有感兴趣的内容还可以花点时间看看右侧栏中的相关信息。

用户有时候会有个模糊的概念──想看某一类的书籍,可他又无法将它具体到某个关键词进行搜索。基于这个原因,可以给每本书提供一个迷你的相关书籍列表──以供用户找到与此书类似的书籍,或者并不相似但十分有意思的书籍。

通常,软件设计人员总是会操心功能问题,以及用户如何进行交互?显然,上一个例子中,除了"相关书籍"列表,点击有关这本书的任何一个链接,都只能看到关于该书的某个细节或购买选项。点击它们对用户来说有什么意义?这就像把一本书撕的支离破碎。

与原来的设计相比,这个设计有很大的改观。不过,我认为这仍只是个保守的设计。应该会有更好的设计──能显示更多的数据,让用户浏览更多内容,有更充分的空间与相关书籍进行比较。改变一下观念就能创造极大的可能性。它不是搜索结果的列表──它是信息的图形化呈现。它用于认知。

演示:组织数据

    展示哪些数据,这一点十分重要,同样重要的是,如何展示它们。图形中的元素应该以引导用户获取信息为目的进行组织。然而,大多数软件的中图形只求最大化的满足审美需求,而不考虑挖掘数据中的关联信息。

看看这个关于近期上映影片的图形案例:


如果一个人想看电影,她会问些什么问题?

     *今天上映什么电影,分别在什么时间?

     *在某一时间段上映的电影是哪些?

     *它们在哪里上映?

     *它们是什么主题的?

     *它们是否好看?

用户会通过比较这些问题的答案找到自己最值得一看的电影。

很显然,上面的图表没有这些问题的答案(这些电影是什么主题的?它们是否好看?),但最糟糕的一点是,这些数据根本没有被组织成任何有价值的信息。想了解哪些电影在哪个时间播放,需要浏览满屏的影院上映信息,从中找出几部感兴趣的电影然后再比较它们的上映时间。观众的眼睛必须在屏幕上来回扫视,以找出某部电影在六个影院中分别上映的时间,试图寻找一个最适合在晚饭后观看的。

首要的问题是,“今天上映什么电影,分别在什么时间?” 鉴于此问题涉及的两大重点,我们可以将图表设计成这样──电影名称和上映时间分别作为纵轴和横轴。

重新设计的效果:


就像对售书网站进行重新设计一样,这个设计展示了充分的信息以确定每部电影的内容和品质,但电影相比图书有更多的外部营销方式,所以,这个设计的更多意图在于提示观影时间而非介绍影片内容。同样的,只在关键信息处将文字加粗,弱化补充信息的视觉冲击效果。

最大的亮点是右侧栏的图表,列出了所有电影的放映时间。用户可以很轻松的垂直查看某一特定时间段,找到该时间段内放映的所有影片。如果她只关注某一部电影,那她只要沿着该电影所在的横轴查看,阴影遮盖的部分是已经过去的时间,用户可以直接跳过,只考虑后面的有效时间。如当前这个例子,4:45以后的才是有效时间。

原先的设计是以影院为单位来组织影片的,而重新设计之后则是直接以电影为单位进行显示。原因是,观众更关心在某个特定的时间看某部电影,而并不介意它在哪个影院上映。不过,免不了还是有观众会执著于某家固定的影院,因此,我给每个影院设定了一个彩色背景条。如果某位观众只喜欢在Gulliver影院看电影,那位于黄色背景条中的内容就是他想找的信息。

设计中没有出现影院的详细地址。我认为观众很可能熟悉她附近的剧院,如果不是,那一个简单的地址其实也用处不大,除非提供一张线路地图,通过鼠标点击或悬停在某个剧院的名称上出现一个新页面向用户展示这些信息。

以上两个重新设计的案例是为了说明图形设计对于信息化软件的重要性,它绝对不只是对数据列表做一下美化。设计卓越的软件,这种观念是必须的,但光有它还不够。别忘了最重要的问题。

     上述设计中很少元素是软件设计所特有的。大部分是和在纸面上进行设计相同的。但现代的设计方法不应该只是承袭原有的──而是应该超越它们。我们已经看到了图形设计如何推进软件设计,但反过来,我们如何利用软件提高图形设计水平呢?

答案在于情境。


类别:用户体验 | 添加到搜藏 | 浏览() | 评论 (5)
 
最近读者:
 
网友评论:
1
2008-03-07 10:48
非常感谢,辛苦了!
一点小意见,能保留图片旁边的comments就好了.
例如: * Based on amazon.com as of January 2006.
专门看了一下,原来amazon到现在都没改啊.
 
2
2008-03-10 01:36
太伟大,太感激您了
 
3
2008-03-11 10:12
辛苦 辛苦~~~
 
4
2008-03-14 14:51
你还在继续翻译吗? 如果可以,我愿意帮助你翻译部分章节,可以通过邮箱联系:P
 
5
2008-04-03 00:16
Qiao:
太好了!我会慢慢翻译,但在准备毕业论文,没有太多时间。如果可以,我很建议你翻译Case study部分,把成果分享给大家,替大家谢谢你啦! :D
 
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码: 请输入下图中的四位验证码,字母不区分大小写。
看不清?
 

     

©2008 Baidu