- 分面分类多选用checkbox已是标准,标准的checkbox和视觉美化过的checkbox无甚差别
- 某些分面,如价格、时间区间适合用滑块操作
- 数目庞大的分面处理:手风琴式设计
- 某分面有数目庞大的属性:用下拉滚动条、用“更多”浮出层;两种几乎没有优劣之分,但浮出层能展示一些需要被“凸显”的属性
- 总结:提供清晰反馈、凸显最常用的属性、平衡精确性和易用性、记住“产品”才是核心
Archive for the ‘信息架构’ Category
信息质量:不仅仅是排版
星期二, 八月 18th, 2009这是IA Summit 2009的一个slide:Content Quality (It’s More Than Fixing Typos)。主要观点是:信息质量不应该单单是样式继承及拼写检查。作者从以下6个方面重新来定义什么是高质量的信息:
- 有效性(Usefulness)
- 清晰性和准确性(Clarity & Accuracy)
- 影响力(Influence)
- 完整性(Completeness)
- 品牌呈现和样式(Voice & Style)
- 可用性和可寻性(Usability & Findability)
Kindle的内容设计
星期四, 六月 18th, 2009【译者:耿人杰 原文:Kindle Content Design 作者:Jakob Nielsen】
同步发于译言:http://article.yeeyan.org/view/gengrenjie/46077
引言:这是Jakob Nielsen在Usability Week 2009 conference发表的关于Amazon kindle内容设计的文章。文章涵盖了对kindle可用性、内容设计、交互设计、信息架构等全面的分析指导。
———————————— 全文的分割线 —————————————
概述:
写一篇关于Kindle的文章就像给印刷、网络和手机设备结合体写作一样。最佳的可用性意味针对不同平台的特殊性有最优的内容设计。
要设计能适配Kindle电子书阅读器的内容需要混合利用其他环境下的一些可用性指南:
- 正文部分参考平面设计
- 标题和概述参考Web设计
- 页面设计和交互设计参考移动设备
正文:线性流(Linera Flow)
正如我在Kindle 2的展望一文中谈到的,Kindle是最合阅读小说或其他非文学作品的设备,此类内容都是较长的线性内容(long linear materia)。此外,Kindle最好的用户体验就是它的翻页设计,我们所应该设计的最佳阅读体验就应该是让读者不需要其他多余交互。
写一本能良好线性阅读的书能使读者完全沉浸在故事情节中,而这也正是所有好的作者具备的技能。
Kindle也适合于阅读长篇记叙文,它们通常被刊登在诸如文学杂志和周日报纸增刊中。这就不奇怪,《纽约客》是当前Kindle销量最高的杂志。
然后,Kindle对于那些有大量插图或需要读者在章节中反复来回跳跃阅读的非文学书籍表现较差。即使Kindle有彩色的屏幕,但相比平面印刷,过多的插图需要用户笨拙地来回操作,这对于Kindle仍然是一场噩梦。我自己的书就属于这一类,所以如果我想多卖掉一点书的话,我会强烈建议你不要买Kindle版的。我的新书都将良好的支持Kindle格式,所以你现在能免费下载一章试读,然后购买它的印刷版:-)
让消费者免费试读书籍的开头部分是Kindle的伟大创举,这很好地利用了数字媒体的力量来解决传统需要印制全部章节的问题。(因此,这是一个好于现实的举措。)这一创新毫无疑问将能增加书籍的销量,尤其是对小说来说,因为用户一旦陷入其中将会很期待剧情将会如何发展。事实上,对于神秘风格的小说,Amazon可能会让之前90%的部分免费,而只在最后的章节收取部分费用。
免费预读也将改变书籍的写作方式:你将不得不将最棒的内容写在第一章,这将是书能不能卖掉的关键。
遗憾的是,这不是我喜欢的写作方式。我的新书以研究策略作为书籍开头的一章,比如:我们如何评估和确定可用性问题的优先顺序,以及我们的新发现与我10年前一本关于网站可用性的书籍的差别。我想要这本书成为一个总的体验( total experience),读者将从我搭建的书籍结构中获得对后续章节更丰富的理解。(而不是直接给出结果,就像你想知道如何表现一个产品页面,但你只能等到第9章)。对我来说,激励人们深入思考是为什么非文学书籍相对于网络而存在的价值所在,这将是比快速点击以及有争议性的写作更好的事情。
所以,在我的书中,我可能会抵制那些极力获得快速击中第一章。但如果你想在Kindle上卖掉更多书的话,请不要参考我的例子。
标题和概述:支持超文本导航和信息线索
对于报纸和杂志和一些非小说类书籍来说,人们通常不会从头到底的完整阅读。你必须帮助用户选择对他们来说有用的文章。
你能通过用各种表格区分的内容来做到这一点,就想下列报纸摘要列表所示的:

这些文章列表必须符合Web写作指南。
用户通常通过标题来了解文章的大义。在上述截图中,所有的文章都是关于艺术和文化。一本杂志的主要目录或报纸的头版故事列表通常只能提供较少的背景介绍。
在通常情况下,你的文章标题必须传达给读者两点: (a)介绍文章的大概 (b) 给用户一个判断:是否需要全文阅读
正常情况下25-30个字的描述可以达到这些目的,所以你不能浪费字数在署名上。(这里有一个特例,对于固定的专栏作家或一些偶尔写些文字的名人,在某些情况下,读者会根据这些作者来决定到底阅读哪篇内容。有趣的是,这和电子邮件简报的“来自”的设计指南有一些相似之处。)
上图中的第4个标题,”On Loan, 16th- and 17th-century Spanish, Italian and…”,如果去掉新闻记者的姓名,保留第二行的其余部分,将有更强烈的信息线索。具体来说,这个标题少了3个关键词:
- “Paintings(绘画作品)”,它告诉读者这篇文章所讲述主题的基本背景。读者从标题中不能获得任何有价值的信息。你可能要说“Paintings”会出现在概述中,但用户通常首先阅读标题,如果标题吸引人才会去看概述。
- “Exhibition(展览)”,它陈述实际发生的新闻。而“loan”这个词掩盖了这一点,它用间接的方式要求用户更深入的去理解。在标题中,应尽可能的使字面意思理解方便。
- “Frick Collection(or simply “Frick”)(Frick 的收藏或Frick)”,它提示用户文章的“新闻的实用价值(news-you-can-use)”:这个展览是Frick的个人收藏,有兴趣的读者可以前去参观。
对比上面的文章截图和纽约时报的实际印刷版本:

在Kindle的摘要列表中,你必须提供相同的上下文文字,也就是你在Web上主页、搜索引擎和其他外部引用网址中为所描述网页所实际做的。
在这篇文章的Kindle版本中,作者至少做对了一件事情:他标题“Sharing Reflections of Tycoon Taste and Wealth”改了,原标题对于理解上下文没有任何意义。在印刷版本中,原标题可以从人情味的角度理解,但这是因为有其他设计元素可以告诉读者:谁在哪里,在什么时候,要干什么。
交互设计和页面设计:移动设备可用性指南
在我之前的文章Kindle可用性总结里提到过,通过5维控制器来操作Kindle是相当笨拙的。同样,在每次选择操作后,将注定有难以忍受的缓慢的延迟。当你最终得到你想要的内容后,你会发现由于屏幕的关系它提供的字体太小了。
去除头部和尾部的显示区域,Kindle 2的正文显示区域是525×650像素的,或341 kilo-pixels.与此形成对比的是,一个中等尺寸的PC显示屏有1280×1024,能提供999KP给内容显示,这相当于3倍Kindle所能提供的。
鉴于这些制约因素,在Kindle上浏览非线性的内容与在手机上浏览网站的体验相类似。因此Kindle的内容设计师需要遵循移动设备的可用性设计准则,这也包括页面的信息传达。
举例来说,当我们浏览完纽约时报的商业部分摘要列表后,我们选择了标题为“G.M. Lays Its Future on Washington’s Doorstep.”的文章,文章的概述是:“Rick Wagoner, the chief executive of General Motors, met with government officials to.”(这个概述不是很明智,但我们让它去)。点击标题可以看到如下截屏:

发生了什么问题?两点:
- 第一屏基本上没有提供任何新的信息。这违反了移动设备可用性的一大准则,为用户辛苦的操作提供奖励(reward users for the pain they suffer with every move)。鉴于设备的小屏幕,你因为尽量避免重复,并为新内容提供空间。
- 无用的照片和描述浪费了大量的内容空间。如果图片有价值,你可以在后几屏显示它们,将第一屏的空间留给那些密集的、有效率的文本。(上文提到的美术故事可能是个特例。在那个例子中,一幅画在首屏可能有足够的价值来表现文章的主旨。)
对比该商业文章的Kindle版本和下面的印刷版本:

在平面设计领域,一对有张力的大幅人像很能戏剧性的表现企业和政府的关系,尤其是当结合一个带有威胁性色彩的标题“最后一次机会”后。这从某种程度上模糊了标题的作用,因为结合具有解释作用的子标题和其他一些有关汽车工业的文章后产生了更清晰的产业背景。
这种类型头版新闻是一份好报纸的一部分。但把它移植到Kindl后,即使优化了标题,它也将是一个差的信息传达设计。
书籍的信息架构
Kindle揭示了另外一个问题:如何为建立一个系列书籍的信息架构。一些人在我上一篇文章后问到,如何在Kindle中保存大量图书。我对此深有感触,毕竟通过盒子运送大量书籍是一个非常费时的事情。
Kindle 2能存贮1500本书,在Amazon的云端能存贮更多。不幸的是,用户界面没有达到能够管理实际大小图书的能力,这使得一些深度使用者在使用了几年后将遇到麻烦。这真是令人遗憾,只考虑了最初的小规模的使用情况良好,而忽略了大规模长期使用的管理需要。
Kindle的书籍收集信息架构应该是简单的:
- 书籍存放应该有两种状态:在读和存档。如果你保持在读书架很小,就相当容易管理了。但问题就转移到存档书籍的管理了。
- 每个状态都是图书线性列表,你能够通过字母顺序(或按标题和作者)和年代(上次看过的时间)排序。
这些概念都是高度易学的。所以,开头几个月使用Kindle是一种享受。但可学性质是5个可用性标准的一个,有经验的用户将会发现随着阅读书籍的增加他们会遇到更多困难。
希望Amazon已经开始计划开发一个更先进的信息架构,或许通过更好的硬件将能使用更强大的用户界面控件。Amazon确实有很多书籍的书籍,包括相关目录和书籍间的相似性。理想情况下,出版人也应该对他们自己的大量书籍在可寻性做出一些积极的改变(这是他们以前所不会担心的)。
媒介的优化
自从我1995起开始写Alertbox,为媒介设计这一主题就经常被提到。在最初,这意味着“不要把你的网站设计成华而不实的小册子”(print design is different than online design.)
对于Kindle,简单的重复平面设计内容显然是不能接受的。但是你也同样不能直接显示网站设计内容。为了Kindle的良好可用性,你不得不单独为Kindle进行设计。写一个Kindle适合的标题和创建一个Kindle适合的结构是必须要去做的。
不要奇怪,事实上这是一个1995年的课程重新的2009年的设备上显示而已。
什么是通用标签(Common Tag)?
星期一, 六月 15th, 2009【译者:耿人杰 原文:http://www.commontag.org/About 作者:commontag.org】
同步发于译言:http://article.yeeyan.org/view/gengrenjie/46003
前言:通用标签由包括 AdaptiveBlue,DERI (NUI Galway),Faviki, Freebase,Yahoo!,Zemanta 和 Zigtag 众多网络公司共同开发,Zemanta、Metaweb 与雅虎,给通用标签的格式增加了语义的标签,让人们更容易发现、关联和参与网络内容。
———————————— 全文的分割线 —————————————
传统标签系统的局限性
我们通常用标签来组织、分享和发现Web上的内容。然后,由于缺乏通用的标签格式,标签的优势被限制了。一些独立的对象,类似New York City,经常被其他许多词同时描述,如: “nyc”, “new_york_city”, and “newyork”,这使得要把相关内容组织在一起变得十分困难,并且在很多情况下用当前标签系统描述某些特殊对象时也变得很困难—“美洲虎”到底是代表一种动物、一个汽车公司还是一种操作系统?
通用标签格式
通用标签格式能解决当前标签系统的缺陷,它能使所有人(包括最终用户、内容发布者、开发人员)从Web内容里挖掘出更多有用的东西。通过通用标签,内容被唯一且便于理解的方式组织起来,如:所有的关于New York City的内容都能被组织到一个以New York City为名的标签中,所有关于美洲虎这种动物的内容也都将被组织到“美洲虎 动物”标签下。通用标签也能提供有用的元数据(metadata)来描述各个对象间的相对关系。举例来说:对于通用标签“巴拉克 奥巴马”来说,有元数据(metadata)能表明他是美国总统,并且和米歇尔奥巴马是夫妻关系。
为什么使用通用标签?
对于很多最终用户、内容发布者和开发人员而言,支持通用标签格式将使得Web内容产生如下改变:
- 更好的可寻性:随着时间流逝,通过一个标签可以找到越来越多的相关内容。作为更多依赖通用标签的应用程序开发者而言,他们将能把更多相关内容传递给他们的用户,而那些使用通用标签的内容发布者将会得到更多的流量。DERI’s Sindice.com提供开发者相关工具,并帮助他们将相关内容整合进应用程序。此外,诸如Yahoo和Google等搜索引擎开始使用RDFa—通用标签使用的标记标准(markup standard )—来获得更多关于使用此标准的网站信息。Yahoo! SearchMonkey将使用这些信息来提高内容发布者的相关搜索结果表现,并给他们带来更多的流量。Google的最新富媒体(Rich Snippets)功能也使用类似的此类信息增强Google搜索结果。
- 更好的连接性:在单一网站或整个网络中,所有与某具体事物有关的内容都会被连接和组织到单一标签内。更重要的是,通用标签的元数据互相连接,这使得内容发布者和开发者向最终用户呈现出更多相关内容。如,一个内容发布者可以交叉推广(cross-promote)Katie Holmes和Tom Cruise的页面内容,因为通用标签表明他们是夫妻。
- 更吸引人的应用:通用标签是一个机器能理解的格式,这让内容发布者和开发者围绕着通用标签可以创建更吸引人的功能和应用。当应用程序可以确切地理解某一内容的含义时,它们就能提供用户更吸引人的体验。如,一个开发者开发了一个应用,它能提供关于电影星际旅行 (Star Trek)的内容,并且能允许用户直接通过该应用购买该电影的电影票。正是由于内容发布者和票务服务方都使用通用标签,这才使该应用能轻松地使两者相结合而不必猜测各自所包含内容的含义。
关于通用标签的更多信息
想了解更多内容,请看如何快速开始,完整技术指南或查看快速指南!
———————————— 相关阅读分割线 —————————————
雅虎搜索宣布支持通用标签(Common Tag):http://www.yseeker.com/archives/1864.html
Common Tag Brings Standards To Metadata:http://www.readwriteweb.com/archives/common_tag_brings_standards_to_metadata.php
搜索结果筛选的设计
星期五, 五月 22nd, 2009全文导读:
搜索结果筛选的组成:
- 搜索分类
- 搜索建议
- 属性筛选/排序
- 视图选择
搜索结果筛选设计的几个原则:
- 所有的搜索结果筛选内容尽量靠近
- 各搜索结果筛选部分做视觉上的分隔
- 用尽量少的控件类型
- 文案简洁,减少用户理解的难度
—————————以下是正文——————————
信息爆炸、丰饶经济学、长尾理论,这些新名词催生了“搜索”这个杀手级应用。经过20多年的发展,搜索已成为各种网站的标配功能。然而人们永远不会满足,他们已不满足于仅仅找到相关的信息,他们更期待搜索能够直接给出问题的答案,甚至可能是先修改错误问题再给出正确答案。在语义网技术没有成熟前,搜索结果筛选是可以想到的改善搜索体验的方法之一。
搜索结果筛选的设计通常是一组设计,其原理是通过对索引源进行不同维度的筛选,进而帮助用户理出正确的解题线索。
搜索结果筛选通常由几部分组成:
- 搜索分类

- 搜索建议
![]()
- 属性筛选/排序
![]()

- 视图选择
![]()

搜索结果筛选设计的几个原则:
- 所有的搜索结果筛选内容尽量靠近
阿里巴巴的搜索筛选利用了设计中的相近原则,相近的东西通常被认为是同类的内容

- 各搜索结果筛选部分做视觉上的分隔
淘宝的搜索分类、搜索建议、非排他性的属性筛选、排他性的属性筛选(排序)等都进行了视觉上的区隔,多而不乱

- 用尽量少的控件类型
左图Google搜索百宝箱将简洁做到了极致,右图verycd的筛选控件类型多,有些杂乱,也加大了理解的难度

- 文案简洁,减少用户理解的难度
左图是一个反面教材,文案有点绕,有图文字简洁配以图标就表达更清晰了


如何使用A/B测试?
星期三, 五月 20th, 2009
A/B测试在wikipedia上的定义:
A/B testing, or split testing, is a method of advertising testing by which a baseline control sample is compared to a variety of single-variable test samples in order to improve response rates. A classic direct mail tactic, this method has been recently adopted within the interactive space to test tactics such as banner ads, emails and landing pages.
Significant improvements can be seen through testing elements like copy text, layouts, images and colors. However, not all elements produce the same improvements, and by looking at the results from different tests, it is possible to identify those elements that consistently tend to produce the greatest improvements.
既然是“a method of advertising testing”,再来看看在Adwords Help里的定义:
An A/B experiment allows you to test the performance of two (or more!) entirely different versions of a page. Start with your original test page — the page whose content you want to test — then create alternate versions of that page. You can change the content of a page, alter the look and feel, or move around the layout of your alternate pages — whatever you choose. We’ll vary traffic to your original page and your alternate versions, to see what users respond to best.
A/B测试使用范围:
A/B测试其实不单可评判网络广告有效性,在评估交互设计、信息架构有效性时同样可以使用。
A/B测试局限性:
- 只适用于那些有着一个清晰、且各方面都很重要的目标的项目
- 每次只能更改一个变量,当影响要素很多、关系复杂时会有干扰
- 只能使用完全实施好了的设计,这对于成本是一个考验
A/B测试注意事项:
- 每一次就更改一个元素
- A/B测试的时间应该在同一个时间区域
- A/B测试的单元应该使用相同的分析指标
- A/B测试的单元应该针对相同的客户群体
- 使用权重,避免一个未知的处理危险你的业务底线