相信多数公司都买不起眼动仪,曾碰到个厂商,报价40万!
风鬼提供了一种廉价方式。风鬼,原名,Feng GUI,意思是Feng Shui for Graphic User Interfaces。实际上,风水(Feng Shui)在国外非常热门,也并非我想的就是封建迷信,风水的实质是人与自然的关系。
很简单,上传一张网页截图,网站就会模拟出用户眼球的运动轨迹和热点区域。
这种技术,根据网站自己的说法,来源于神经科学研究的多种算法,例如特征整合理论(Feature integration theory),显著(Salience),视觉注意,眼动追踪, 人类感知和认知。够复杂的!
毕竟是基于算法模拟真实情况,跟实际访问会有差距,网站声称准确率达70%。如果买不起眼动仪,用这个做做廉价的可用性测试已经相当不错。
我拿公司的首页看了,结果出乎预料,跟我想象中的完全不一样!

例7
Download the Employment Application
例7图片的最合适“alt”属性是什么?
A.“就业申请表”
B.“PDF文件”
C.“PDF图标”
D.图片内容已经在语境中体现了,所alt=””合适。
注意,图片链接内。如果不在链接内,”alt”文字应该就不一样了。由于图片提供了有关链接功能的额外信息,它在链接内,连同链接一起被读取很重要。因为访问链接经常脱离了语境。
选项A(就业申请表)在此语境中显得多余,所以不是最合适的选择。选项B最合适—它清晰说明了图片代表的内容–这个链接是链到PDF文件。这个功能(下载就业申请表)已经在链接文字中体现出来了,所以没必要包含在“alt”属性中。选项C(PDF图标)描述了图片自身,但在此语境中不是最佳选择,在另一个语境中,让用户知道这个图片的确是一个图标,这很重要,在这种情况下,在“alt”属性中添加“图标”可能合适。选项D(空或赋予空值alt属性)没有提供图片表达的重要信息。
在这里要注意,如果图标本身链接到文档,替换文字应该包括图片(链接)功能和内容信息。类似于“下载PDF格式的就业申请书”。“PDF格式”就不够了,尤其是如果很多文件链接都是这个类型。那样的话,使用屏幕阅读器的用户在页面中浏览链接时听到的全是“PDF格式、PDF格式、PDF格式……”。一般来说,如果同一张图片在一个页面中被多次使用而链接到不同位置,链接内的替换文字应该不同。
装饰性图片Decorative Images
装饰性图片不表达重要内容,经常用于布局或非信息目的,也不在链接内显示。几乎所有情况下,空白和装饰性图片的“alt”属性应该为空。
例8
内容文字。
页脚文字。
例8水平分割线的“alt”属性应该是什么?
A.“装饰性线条”
B.“页脚起点”
C.“分割线”
D.alt=””足够
由于图片没有表达任何内容,也不在链接内,选项D应该是最佳选择。不需要图片描述。
注意
如果图片仅仅用于装饰目的,应该将它与页面内容分开,使用Css把它作为背景图片。这样,图片就不需要替换文字了,也可以把图片与页面语义和结构流分开。
例9
我们承诺提供世界上最好的服务。我们的团队经过专业培训,在合作过程中,可以提供最优质客户服务。客户满意是我们的首要任务,并且得到保证。
例9图片的“alt”属性应该是什么?
A.“握手”
B.“商人握手完成合作”
C. alt=””足够。
D.“我们保证专业服务”
分析这个例子时,要确定图片是否表达了重要内容。我更赞成本例没有表达重要内容。目前网站实践中,许多此类图片都被赋予描述性替换文字,即使图片没有提供什么内容。非空白或非普通装饰性图片需要替换文字,这是错误假设。选项C(alt=””)是最佳选项,因为这个图片没有表达相关或重要信息。选项A和选项B是对图片的描述,但表达的内容和图片本身所表达的内容不等价,这个图片纯粹是装饰性。选项D明显不正确,值得注意的是,额外信息经常被添加到“alt”属性中,或为搜索引擎提供额外关键词。这类做法不是使用替换文字的合适方法。
高级图片
一些情况下,确定替换文字更难。对于所有图片,用户测试、屏幕阅读器或只读取文本的浏览器测试能帮助确定使用替换文字最合适的方法。
表单图片按钮
表单图片按钮必须有描述按钮功能的“alt”属性。图片按钮经常被用作标准格式按钮的醒目版或缩略版。替换文字应该描述选择后,按钮会做什么,如“搜索”,“提交”,“注册”,“订购”等。例如,如果图片按钮在网站搜索表单中,是合适写法。
图片地图
使用客户端图片地图时,主要图片必须有“alt”属性。“alt”属性应该表达出图片所传达的任何内容,但不是表达所有图片地图热点。例如,有张图片地图包含纽约州每个区域热点,图片“alt”属性应该是“纽约州”。如果主要图片没有表达内容,而主要是容器(如,导航条),那么alt=”” 是合适的。
每个图片地图热点(区域元素)必须有同等“alt”属性。因为热点可点击,每个热点都需要有替换文字来描述热点功能。服务器端的图片地图中热点不能赋予替换文字,它们也不可以通过键盘操作,不需要“alt”属性。
图片切片
有时为了方便网站设计,大图片被切割成许多小图片。许多图片切片在一起来表达内容时,内容必须展示给用户。一般通过在最大图片或最突出=的图片的“alt”属性中添加替换文字来表达内容。重复替换文字,把替换文字分散在许多图片的“alt”属性或根本没有替换文字,这都不合适。如果图片切片在链接内,描述链接的替换文字必须在图片的“alt”属性 中、同一链接内的另一图片的“alt”属性中或在同一链接内的文本中。每个链接都要包含功能性文字来描述这些链接功能。
背景图片
不可能直接在背景图片中添加替换文字。图片所表达的内容不应该被放置在页面内或元素背景中。然而,背景图片可以用作装饰性图片,把图片从页面内容流中分离开,“alt”属性变为空。
商标
网站上放置能够链接到网站首页的商标是普遍做法。由于这是常规做法,为图片提供替换文字,如公司名称(alt=”Acme Company)就足够了。把真实商标识别为商标(alt=”Acme Company Logo”)没有必要。内容和功能不是“商标”。开发人员经常把图片“alt”属性设为“首页”(alt=”Acme Company – home),即使图片都一致放在页面顶部,替换内容合适,这些额外信息也没有必要。
综合图片
如果综合图片的同等替换文字,如图表,不能只使用一两个短句,又不能通过页面语境表达,这些替换需要在别的地方提供。通过链接到单独网页来提供较长描述,“longdesc”属性也可以在图片中使用,即使还没有获得广泛支持。图片替换文字仍然应该描述图片整体内容。如果图片链接到较长描述,这些信息也可以在“alt”属性中提供。Chart showing revenue increases over the last five years with link to description of the data
虽然稍微有点长,但这些替换文字表达了图片整体内容,告诉用户描述信息可用。
总结
虽然替换文字是影响网站可达性的重要问题,但目前还存在错误使用替换文字的现象。网站人员根据下列基本原则设置“alt”属性,可以使视障用户更容易访问网站内容。图片加入替换文字是最容易的可达性原则之一,也最难掌握。
替换文字一般在“alt”属性中或在图片周围语境中提供。
每张图片必须有“alt”属性。
替换文字应具备以下两点:
表达图片内容和功能
充足
替换文字不应该:
冗余(与相邻或正文文字相同)
使用“……图片”之类短语
合适的替换文字更依赖于图片语境。
功能性图片的“alt”文字应该描述其功能和内容。
装饰性图片仍然需要“alt”属性,但值是空值(alt=””)
如果能够合理使用替换文字,网站可达性会有明显提高。

例4
这幅油画中,画家Emanuel Leutze运用了光线、颜色、形态、远景、比例和姿势来创作作品。
例4图片的替换文字应该是什么?
A.“乔治.华盛顿”
B.“乔治.华盛顿的油画”
C.“乔治.华盛顿渡特拉华河的油画”
D. “展示使用光线]]>

语境为王
为图片提供合适替换文字时,语境为王。不同语境中,图片的替换文字会完全不一样。以乔治.华盛顿图片为例:
在不同语境中,该图片替换文字会需要很大调整。如下所示。
注意
为了更好说明替换文字原则,本文讨论的大部分图片都是“实例图片”。但是图片内容通常由网页语境说明。
例1
由于担任美国独立战争总司令,然后又成为美国第一任总统,乔治.华盛顿常被称为“国父”。
例1图片的替换文字应该是什么?
A.“乔治.华盛顿图片”
B.“乔治.华盛顿,美国第一任总统”
C.空“alt”属性(alt=””)就足够。
D.“乔治.华盛顿”
确定图片的合适替换文字时,首先要确定图片代表内容还是某种功能。大多数情况下,如果图片包含在某个链接内,它可能只有功能作用。确定图片是否代表内容、代表的内容是什么会更难。如果图片所表达的内容包含在图片周围文本内,那么空“alt”属性就足够。上例中,这张图片所代表的内容告诉用户这是乔治.华盛顿。这个图片没有功能作用,因为不是链接,也不可点击。
来看一些有关“alt”属性的重要原则。
重要
“alt”属性应该:
准确、等价显示图片所代表的相同内容和功能;
简洁。图片的正确内容(如果是内容)和功能(如果是功能)应该尽可能简洁表达。通常情况下,几个词即可,但有时一两个短句也可以。
不要多余,提供的信息和图片语境文字完全一样。
不要使用“…图片”这类短语描述图片。对于用户来说,很明显,它就是图片。如果图片表达的是内容,与正文相比,通常没必要让用户知道这就是表达内容的图片。
根据以上原则,选项D (乔治.华盛顿)是本例最佳答案。选项A多余说明图片是图片。选项B 过多介绍了图片本身不包含的内容,同时多余提供了文本内容。选项C (空alt 属性)不合适,因为图片传答的内容周围文字没有直接提供。
例2
乔治.华盛顿
由于担任美国独立战争总司令,然后又成为美国第一任总统,乔治.华盛顿常被称为“国父”。
例2图片的替换文字应该是什么?
A.“乔治.华盛顿”
B.空“alt”属性 (alt=””)就足够了
C.“图片”
D.不需要“alt”属性。
本例中,图片内容在周围内容中显示,所以选项B(alt=“”)是最好选项。选项A有点冗余。选项C提供了无关信息。选项D根本就不正确—-每张图片都必须有“alt”属性。
例3
乔治.华盛顿
例3图片的替换文字应该是什么?
A.空“alt” (alt=””)就足够了
B. “乔治.华盛顿的维基百科条目”
C.“查看更多”
“乔治.华盛顿”这种情况下,图片还是链接。图片包含在链接的情况下,图片的链接功能必须体现在替换文字中,同时,这些替换文字也包含在链接内。本例中,链接内没有邻近文字来描述链接功能,它就必须在“alt”属性中体现出来。选项B是最佳选择。而“alt”属性中的“乔治.华盛顿”这个词就显得多余,小冗余是充分描述功能的关键。也可以(也可能应该)通过把文本标题作为链接一部分来减少冗余。
选项A不充足。带链接的图片的“alt”属性不能为空或被赋予空值,除非链接功能通过文本提供了相同链接。这是因为屏幕阅读器必须读取信息识别链接。请记住,屏幕阅读器读取的信息会脱离周围语境。选项C没有充分描述功能,特别是脱离了语境。对于周围文本,选项D多余,也没有描述链接功能。
如有可能,“alt”属性应当避免使用“链接到”或“点击这个图片”等类似文字。链接作为链接被阅读器读取,它应该能被视障用户清晰看到。

原文:Appropriate Use of Alternative Text
翻译:xueshijun
简介
为图片添加替换文字(alternative text 或alt text)是网站可达性首要原则,也最难恰当应用。互联网充满没有替换文字、文字很差、甚至错误的图片。与网站可达性众多问题一样,判断替换文字是否合适,个人因素起着决定作用。这篇文章通过一些例子来说明我们对恰当使用替换文字的经验。
替换文字基础
替换文字对网页中的非文本内容替换为文本。为了讨论方便,我们只讨论图片的替换文字,当然这些原则也适用于多媒体、applets和其他非文本网页内容。
替换文字有多种功能:
替换文字可以被屏幕阅读器读取,方便有视障或认知障碍的用户浏览图片内容,或者执行图片提供的功能。
如果用户代理(浏览器)不支持图片显示,或者用户设置浏览器不显示图片,替换文字会合适显示图片。
替换文字对图片提供语义含义和描述,这些文字被搜索引擎读取,或者被用来从页面语境来确定图片内容。
电脑和屏幕阅读器不能分析和确定图片表达的意思,这是关键问题。开发人员必须从网站内容给用户提供代表图片内容和功能的文字。
替换文字能够通过两种方式显示:
在“img”元素的“alt”属性内;
在图片自身语境或其周围语境。
这说明, “alt”属性(有时称为“alt”标签,虽然从技术上来说不正确)在提供图片内容和功能方面并不是唯一方法。这种信息还可以通过图片邻近的文本或图片页面体现出来。某些情况下,如果不能简洁显示这些同等信息,可以用链接或(和)“longdesc”属性表达,“longdesc”属性可以链接到包含较长图片文字描述的单独页面。
重要
本文使用的术语“替换文字”指与图片等同的文字,无论文字显示在哪里,它不仅限指图片标签的“alt”属性。提到属性本身,“alt”属性就派上用场了,它经常包含“替换文字”(但不是绝对的)。
每张图片都必须有“alt”属性。这是HTML标准的要求。没有“alt”属性的图片不可达。遇到没有“alt”属性的图片,屏幕阅读器从页面内容读取内容(例如文件名、页面中的位置),摘录信息,尽量给用户提供对等内容。很多情况下,图片“alt”属性可能为空或被赋空值(例如alt=“”)。

原文:Common Visual Design Misconceptions
翻译:luyi
最近,我有机会研究对视觉设计作用的常见误解,这些误解仍然盛行于行政主管、产品主管,工程经理和市场专家中。设计团队成员如何说明这些认识是错误的?又该如何向同事和老板展示视觉设计真相?
视觉设计师在特定产品领域或职业生涯中会面对各种困难,但有三种误解频繁发生:
视觉设计是美化产品;
突出显示能改善视觉设计;
可以分割评估视觉设计。
视觉设计是美化产品
这种信条可能起源于工业时代的设计理念引入。从那时起,产品以前所未有的方式进行设计,并形成风格。Raymond Lowey等工业设计师对呆板产品进行美学设计,而声名大噪。
视觉设计固然能美化产品,但其与人交互的潜能早已超越美丽外观。通过组织视觉元素,设计师可以传达回答关键问题的核心信息:
* 这是什么?
* 怎么使用?
* 为什么要使用?
回答这些问题是功能和可用性的关键组成部分,尤其是对于交互产品。举些例子来说明:
图1到图3,某个网络应用工具,相同基本设置的三种表现方式,字体、颜色、渐变和图片都相同。三者主要区别是页面元素组织方式不同。这种区别表明该网络应用工具存在三种主要使用方法。
图1——网络应用工具设计示例
web application 1
图1,表现方式清晰显示出主要功能——查找客户联系信息;其次,用户可以编辑、删除或者增加备注。图2,重点是顾客和公司之间的交流;其次,用户可以查看、编辑和删除联系人信息。
图2—相同网络应用工具,不同视觉组织
web application 2
图3,关注点放在编辑客户信息上。查看联系人信息和跟踪正在进行的会话功能被弱化。
图3—另一种视觉组织
web application 3
相同应用工具,三种不同视觉组织,三种不同主操作:查找联系人信息、管理客户交流以及维护客户记录。每个例子中,影响视觉设计的因素大体一致:颜色、字体、渐变和图片。
显而易见,视觉设计不仅是美化此工具。它传达工具的核心功能:它是什么?如何使用?为什么要使用?,而同时有美化了界面。
能让这个更突出吗?
很多网站都喜欢把logo做得比较大,客户和老板常要求视觉设计师着重强调页面上某些元素。这类评论有时可以帮助我们发现设计中的最重要元素,但也常引发视觉设计的另一常见误解:改善网站视觉设计,通过加大、加粗、变红或同时使用三种方法来实现!
页面任何元素的相对重要性都是由其周边元素决定。白色页面放上红色圆圈,会吸引很多注意力。但把红圈放在10个粉色圆圈旁就不会吸引那么多注意力。突出重要元素是整体设计的一个过程,并不是改变任何单一元素。给予单个元素额外视觉权重会破坏布局平衡,搅乱相关元素、主操作等之间的关系。
要是满足客户和老板每个强化某些功能的需求,页面所有元素都会去抢着吸引用户注意—结果就是都得不到注意。图4和图5,两个互联网浏览器下载页面。Firefox页面,下载浏览器号召很明显,页面其他元素—-Thunderbird、 Mozilla商店和最新内容—–没有干扰。
图4—Firefox下载页
firefox
图5,Flock下载页面强调了许多不同元素,设计团队决定提供四个下载入口——右上角、左侧菜单底部、新闻面板右上角和页脚。如果页面上没强调那么多其他元素,Flock下载页面或许可以和Firefox一样只用一个下载按钮。
图 5—Flock下载页
flock
可以分割评估视觉设计
没有从设计整体考虑,而强调单个元素会非常困难,同样做出孤立改变也很难。但是视觉设计师收到的大部分反馈集中在孤立元素上:可以把Logo做大点吗?能改变标题颜色吗?这里可以换张图吗?
这些的确帮助设计师明白用户和老板想要的东西,但他们没有考虑优秀设计必需的整体分析。改变颜色需要反复思考整体配色,因为设计师必须确保颜色对比明显,才能突出关键操作。改变图片意味着同时要改变周边元素,因为原图片形成的焦点可能已不存在。诸如此类。
产品总体视觉设计源于谨慎平衡页面元素——传达产品功能、可用性和优势的关键信息。如果要调整一项元素,设计师需要重组全局,重归平衡。孤立设计决策无法保持修改前后整体一致。
孤立评估基于互联网的产品特别脆弱。单个产品可以进行独立测试,所以产品团队就会假设”这些产品结合在一起也会很好”, 而常常把单独表现良好的产品组合起来。图6,孤立决策的后果。
在这个eBay页面,页头水桶测试(bucket testing)表现良好,PayPal保护机制的logo在焦点小组(focus group)中获得好分数,摄影物品宣传也获得不错点击流,但把三个元素综合到一个页面上,并没有形成有效设计。事实上,页面上很多元素似乎互相竞争,互相干扰。
图6—eBay意大利主页
ebay
希望这些例子能解释对视觉设计角色的一些常见误解。只有同事和老板能直接体验视觉设计潜能,他们才会相信视觉设计绝不仅仅是设计样式、显化元素或做出孤立决定。

原文标题:Pitfalls to Avoid When Designing Forms
许多网络表单没有遵循可用性规则。了解这些常见问题能够让你在设计网站表单的时候避免它们。以下是一些一再出现的问题。
1. 危险的重置按钮。大多数情况下,没有必要出现重置按钮。如果用户碰巧点击了,它们几乎总是产生麻烦——因为这会清空表单,而没有任何确认框提示(至少在主流浏览器和主流表单执行动作中)。下图的德语表单虽然精心规划,但设计不佳。这张表单用来计算地铁路线中两地之间的距离:

请注意,这张表单已经是修正版,第一次设计得更糟。你知道右下方按钮写着什么吗(该位置按钮的通常是“OK”或“Submit”按钮)?这里的按钮是“Neue Faht”(新路线)……,点击该按钮会清空已经输入的全部内容。
快速补救:不使用重设按钮。(如果仔细权衡后决定需要重设按钮,一定谨慎使用。)
2. 能够选择很好,是吗?并非如此。至少对网站表单而言并不一定好。仅在用户要完成任务的场景中提供必要选项——其他都会让屏幕看起来杂乱、产生困惑,而且实际上用户无法花时间思考哪些选项是需要的,哪些选项是重要的。讽刺的是,大多数网站表单的功能比Google搜索简单得多,Google要搜索几十亿个网页,但这些表单依然比Google表单复杂上亿倍。
如果真的需要许多选项,考虑使用可展开的高级对话框将极少使用的选项隐藏起来。想想Wikipedia如何更改句法快速集成对话框(编辑页面时,可以点击编辑框下方的链接将其插入页面),避免全部或者过多显示,而是部分显示,并通过主题选项框进行分类。

3. 表格依然是网页和网站的一部分。由此,它们应当遵循网站可用性基本规则,比如字体应足够大以便于阅读,链接和非链接应明确区分。通常使用下划线或者蓝色标识表示链接可点击。但是,请看下图Hotmail登录表单——是不是仅仅查看就能辨别出其中的链接?

事实上,顶端的蓝色文字(“Have an MSN Hotmail…”)看起来可点击,但它仅仅是文字,不能引导到其他地方。另一方面,底部(“Use enhanced security”)是链接,即使没有任何视觉线索能表明这点。
提示表单成功和失败的信息没有使用明确的的配色方案,这是另一个常见问题。无论什么信息,都不要用红色标识成功信息,比如,“恭喜,表单提交成功!”——使用红色会引起一瞬间的疑惑。类似的,纯信息传递中,应当避免使用警告含义的标识。
4. 你在做算数,而不是用户。如果脚本能自动计算,就不要让用户来算。下图是时区转换表单,有个越洋朋友来看你,你可以用它来安排日程。

这张表单提供两个基本选项:转换当前日期,或者转换自定义日期。但是,使用列表中部的输入框自定义日期和时间,点击提交时该项值会被忽略……除非同时选择了“Use the following Date/ Time”(使用以下日期/时间)选项。只要输入自定义日期,系统就应当自动选择“Use the following Date/ Time”(使用以下日期/时间)选项(如果表单不能处理自定义日期,用户为什么还要输入?)。
5.不要让用户一定要点击单选框。而应该是点击单选框旁的文字也可以。这是Windows系统界面惯例,却被许多网络表单忽视……即使HTML提供了非常简便的方法(甚至不必使用JavaScript)。下图表单来自Google站点,点击“Put page under…”时,单选框并未被选中:

6. 不要迫使用户使用自定义日期控件或者其他小工具。日历工具表单中的日期控件的确不错,但有时候用户仅仅希望用纯文本形式输入日期(比如,输入:“2008-12-24”)。如果真的决定需要一个日历控件,那么不要迫使逼用户使用:比如光标移动到输入框中时,弹出日历控件。德国官方铁路路线计算表就是这么个例子——当选择输入框时,弹出日历控件,但即使手动输入后点击表单中的其他输入框,日历控件也不会自动关闭(因此总是需要点击关闭按钮)。

举个更有用的例子,我们来看一看Google Calendar的编辑器。编辑事件的日期或者时间时,会弹出控件。通常如果你不希望使用它时,它也不会产生阻碍,而是允许你自由输入文本。
7. Ajax变化过于细微。是的,Ajax是自从tag以来最伟大的网络产物,但这并不意味着它不会被滥用……因为它会以很多方式被滥用。一种滥用是提供表单反馈——比如,“您已登录”或者“表单输入有误”——用户很容易错过页面上细微的Ajax更新。这种情况下,重复点击Submit(提交)按钮也不会有帮助,反而会导致困惑。过于细微的版面布局对于重要信息来说很糟,但至少如果有页面转换和相应的可视化载入时间,用户也许能留心到该信息。
如果对表单出错或者成功增加Ajax反馈,确保易被查看。用户认为也许会花费一些时间才能提交成功,所以会在点击提交按钮后甚至会切换到其他浏览器窗口;返回原窗口时,用户是否能得到反馈信息或者用户是否会认为表单提交出了问题?
8. 输入框中的3D效果看起来过时,而且有时很难看,但不要移走它们或所有的3D色彩暗示,除非你发现它会增加困惑。若你正使用默认输入框,它会在当前窗口显示一些3D效果的内边缘线。如果在白色背景中使用白框,不要完全去掉3D效果,否则输入区域会不太像输入框。按钮上的3D效果外边缘线也存在同样问题,去掉它们,按钮会不太像可点击项。如果你使用明确的颜色暗示,表单又足够短的话,相信你能够去掉那么多3D效果——比如背景色较暗、白色输入框的搜索表单。虽然对此我有些拿不定注意,但你可以自己判断:

9. 如果数据没问题,就让其通过,而不要要求再次确认,也不要让用户提供的数据和数据库所需要的数据形式完全一致。一些网站表单会进行数据转换,比如将用户自由输入的地址格式转换为“正确的”数据库格式,然后将其用组合框形式呈现并要求用户再次确认。但是如果明确知道组合框选区的确是用户需要的,不需要再次确认来查看结果——相反,结果页面之前或之后应当少一些强加选项,允许用户选择其他,也许效果更好。
甚至有些表单会迫使用户使用精确的数据库格式。比如输入信用卡号码时表单不接受空格,去除即可,不要让用户自己动手去掉空格。
10. 是的,出售详细用户数据能迅速致富(至少我有所耳闻)。但这并不意味着网络服务收集大量信息是正确的事。例如你专门提供邮件服务,那么用户性别、家庭电话号码等等信息真的那么重要吗?最好的网络表单仅要求用户提供该项网络服务绝对需要的信息(此外,如有需要,会有法律、安全等输入框,比如可怕的验证码是现在表单可用性的重大问题)。
还有其他有用的可用性指南。比如保持文本简短,对界面来说有利无弊。同样,要求用户做选择时使用正面文字;用“do this”或者“show this”比“don’t do this” or “hide this”更容易迅速理解(更不要提“don’t hide”等其情况了)。表格一旦提交,将用户送至对现有任务(如果任务尚未完结的话)最合适的页面非常重要,而不是一个通用的感谢页面。无论做什么,需要知道用户在其他网站表单中花费了大量时间,因此有时候优化方案也许是只要重复用户习惯并且已经理解的表单就够了——同时也要考虑用户也许打开了多个窗口,你的网站表单仅是其中一个,用户会将表单当成次要任务,倘若
发现表单无法实现他们的期望,可能就会放弃填写。
最后,大多数设计优秀表单的要点都是常识,因此只是需要时间反省并以局外人的视角审视表单。尝试想像一个不了解(或者不关心)数据结构、众多考量或者产品历史的人会如何看待表单。对用户而言,表单本身可能并不是任务,而是达成任务的必要障碍。最好能像设计交通标志(时速100 km/h时能一眼看到)一样设计表单,而不能像设计书那样(躺在椅子里有很长时间阅读一本书)。

原文标题How Simple Web Design Helps Your Business
很多电子商务网站喜欢在登陆页面负载过多信息。这些电子商务网站如此糟糕设计的原因很简单:页面中]]>产品越少,关注越多 很多网络公司忘记了电子商务的基本法则:网络购买者希望干扰尽可能少。在亚马逊网站(Amazon.com)上点击几次鼠标就能购买DVD,这要比开车去商店购买简单得多。如果购买体验简单快捷,用户甚至愿意在网站上停留更长时间,进行更多消费。 apple.com 苹果擅长设计简洁首页。登陆其首页,只会看到三样东西: • 简洁的页首导航 • 页面主体展示一个产品 • 特色产品图片下方有信息性链接 除标准页脚导航外,首页仅仅包括三部分。下图是点击一个产品链接(比如iPhone)后进入的页面。 apple.com 即使在产品页面,你马上就能明白页面主题:iPhone。产品本身占据了页面主要部分,周边信息是新款iPhone的应用和特色。更重要的是,观察iPhone页面没有什么内容: • 无关产品 • 无关广告 • 很多文字 • 杂乱无章 苹果网站以令人满意的方式有效展示了足够信息。提供大量信息没有错,只要不让人感觉信息过多就行。这里所有信息、链接和图片全部围绕iPhone本身及其相关信息展开。页面上没有分散注意力的广告、无用信息和其他产品。 简洁网站设计原则的主要方面就是“只显示完成销售需要的信息”,其他什么都不要。这并不是说不需要给用户很多信息。只是要搞清他们是否要看到更多信息。Apple网站使用“Learn more”链接来达到此目的。 设计师和网站工程师可是利用几个可靠方法保证页面布局不会因为杂乱无章而导致访问者离开: 1.只显示需要的 2.减少点击。购买产品所需的点击越少,回头客就越多。别让客户买产品像跳铁环一样困难。 3.“祖母”法则。如果你的祖母(或任何老人家)都能理解如何在网站上购买产品,你设计页面可能真的不错。不需要的信息会让祖母迅速离开。 4.减少栏目。页面上每增加一个栏目,内容空间就会越小。这会减少对主要产品的关注,而购物者的注意力会转到额外的东西上。 5.减少选择。让购物者选择会增加其负担。归根到底,买家购物时希望思考的时间越少越好。以消除多余思考时间及决定的方式展示产品会使购买过程流线化,客户觉得更轻松自得。 6.让设计整洁。整洁的设计会让访问者心情愉悦。花些时间来确保网站布局在美学上让人愉悦,会吸引更多回头客。 直觉网站设计意味着站在潜在客户的立场思考问题。你会在自己的网站上购物吗? 其他优秀的电子商务网站设计 bell.ca Bell.ca网站使用了很少的颜色来设计品牌,并只向访问者提供主导航栏。Shop、Support导航项以及Personal和Business区域的设计恶非常巧妙。设计简洁,访问者不用被强迫浏览整个导航项,就清晰了解导航分布。页面顶部的产品导航设计得多精妙啊。用户没有点错的可能。 shoeguru.ca Shoeguru.ca网站展现了以“用户中心”和“产品中心”的设计。产品似乎就在访问者眼前的展台上。设计仅仅陈列了产品,而没有其他任何东西,甚至没有导航。 etsy.com Etsy网站很好的说明了如何在页面上放置很多信息而不显杂乱。Etsy产品列表很长,然而设计得自然、放松。首页设计得有用、而不使人分心并不简单。 crupress.campuscrusadeforchrist.com Crupress是个简洁明快的书籍网站,没有很多无关栏目。首页有很多文字,但没惹烦用户。页首导航突出,但不扎眼。所有设计元素非常流畅。 crupress.campuscrusadeforchrist.com Tokyocube是一个有趣时髦的小网站,销售日本产品。产品直接呈现在眼前,而不是用很多空间解释网站是卖什么的。使用大量留白使产品仿佛从屏幕中跳出来。你会情不自禁点击其中一个玩具查看详情。 furioustees.com Furious Tees网站比前面的网站使用了更多的图片,有助于两件事: 1. 表现网站的趣味性 2. 明确标明每件T-shirt只卖19.99美元 产品就在眼前,绝不会搞不清Furious Tees在卖什么。首页上展示所有产品,特别适用于出售新奇产品的网站。 但首页上放置大量产品可能会造成页面杂乱。Furious Tees没有这个问题。页面没有额外的工具条和广告分散访问者对T恤本身的关注。关注点集中在衬衣和有趣的设计上。 basecamphq.com 找不到比37 Signal的产品管理工具Basecamp网站更好的例子,来诠释如何综合不同类型信息来销售产品。给出完成销售所需信息“刚刚”足够。设计时权衡了每个单词、每张图片。如果信息不够,用户不会花时间弄明白产品能做什么。但信息太多又会让用户不知所措。 高质量标题背景和公司标志的设计让每一个细节都能被关注到。不同媒体类型结合起来,占据足够空间,用户不会在同一时间被大量图片和文字“轰炸”。 你只有几秒 每个网站都希望用与众不同的布局、设计、文字来销售产品。设计师可通过以下方式达到“少即是多”的目的: • 权衡每个单词 • 去除不需要的元素 • 使用有品味的的颜色和留白 • 限制购买者一次可看到的信息量 记住,互联网买家是善变群体。他们不是“光看不买”的逛街。他们使用搜索引擎缩小到很小的范围。如果不喜欢看到的产品,他们就会离开。网站主只有很少的时间争取潜在用户。高品质、整洁的设计方便购买者迅速发现所需产品。

原文标题Tips on site search box design
虽然很多在线购物者更愿意用导航链接浏览网站,但我们不应当忽视搜索框的重要作用。
如果来访的购物者清楚的知道想要什么,他们会很明确的使用搜索框。这种情况下购物者显示出了明确的购物意图,因此搜索框能够把该意图转变为真实的购买行为。
根据Fast Search提供的数据 (pdf),30%的购物者进入电子商务网站后会立刻使用搜索框,超过30%的人通过导航没有找到需要的物品后转而使用搜索框。
那么,如何让这一切变得更加容易一些?以下是些小诀窍:
搜索框大小
允许用户输入较长的搜索请求,比如两个或者两个以上的词,这是现在的流行做法。那些查找具体电视机型号或者笔记本电脑型号的用户会倾向于使用较长的搜索请求。这意味着我们需要较长的搜索框。
理想的文本框应当能够容纳约30个字符,即5个单词左右。如果用户输入了更长的搜索请求,就无法看到全部文本。这不算糟糕,但如果搜索框能长一些,用户会更容易修改搜索内容中的拼写错误。
以Kelkoo为例,该网站为搜索框提供了足够的输入空间:
kelkoo
显化搜索框
搜索框应出现在页面的显著位置。许多网站倾向于将其放置在页面右上角,但将其安排在中间,购物者会更容易发现。
Comet网站最近发布了新版首页,更加突出了搜索框(同时加大了搜索框)。Comet网站发现搜索框是有效的转化工具,所以做出了此变更。
旧版搜索框被放在了页面右边,如下图:
comet
新版中,搜索框被明显突出:
comet
提供搜索预测
搜索框中输入关键词时,用户必须用几个词来描述产品,并猜测电子商务网站会如何呈现该产品。
让搜索变得更加容易的绝佳方式,是在用户输入搜索项时给与搜索建议,正如Google Suggest。用户能用最小的投入获取想要的东西。
Borders.co.uk网站最近升级增加了这一功能:
borders.co.uk
允许用户缩小搜索范围
如果用户搜索的产品数量非常巨大,用户更愿意通过缩小目标限定搜索范围。
Amazon网站就是如此。你可以通过其18个目录缩小搜索范围,以呈现更加相关的搜索结果:
amazon
用标签明确标识搜索框
大多数的购物者很容易找到搜索框,但我们不应当让那些对网络不是特别熟悉的人为此花不必要的精力。
Waterstones网站虽然将搜索框放在页面左侧,但它清晰明确的标记出其搜索工具:
waterstones
页面载入后,光标默认定位在搜索框内
这是个小细节,但能够让顾客更加容易开始搜索。Google及其他主要搜索引擎都是如此,这能帮助用户更加迅速的达成目标。
但并非所有电子商务网站都是如此。Kelkoo和Amazon网站载入页面后,都将光标默认定位在搜索框内,但在M&S和Next等网站中,用户必须移动鼠标进行定位,才能输入搜索项。
移除搜索框中现有文字
许多网站和下例中的Marks & Spencer网站一样,在搜索框中写入文字解释功能。点击搜索框时,文字自动消失,你可以自由输入搜索项。
如果搜索框中的解释文字无法消失,用户会感觉沮丧,他们必须删除文本再输入搜索项。值得庆幸的是,很少有网站犯这个错误,而迪斯尼英国网店恰恰犯了这个错误。
marks & spencer

原文标题Top Ten Web Typography Sins
虽然许多设计师能很快接受网络标准,但让人惊讶的是他们常常忽视了基本的排版标准。以下是必须避免的十个致命问题:
问题1:使用连字符,而非长破折号。

如果需要中断,使用长破折号而非一组减号。该问题让无数的编辑感觉头疼。
问题2:使用句号而非省略号。

为了保证排版整洁,大多数字体提供了专门的省略号字符。省略号字符的3个点仅使用一个字母宽度,非常适合印刷。
问题3:使用直引号(Dumb Quotes)。

这些在html中使用的直引号不应当用于写作文本中,除非在内容中用于标记英尺或英寸单位。
问题4:句子之间使用两个空格。

由于网络排版的应用,句子之间使用两个空格的老式排版方式似乎终于退出了历史舞台。几年前,人们还必须手动插入一个ASCII空格以解决这个字体问题。现在,一些内容管理系统会自动加上两个空格。千万不要这样做!一个空格即可。
问题5:临时制作版权标记。

临时制作的版权标记不仅难看、松散,将大写C和括号强行组合在一起也不符合法律标准。使用正式的版权标记“©” (代码©),让顾客为额外的法律建议买单。
问题6:使用过多强调方式。

加粗文本,调整为斜体,加下划线。若真的需要让人全部理解你的观点,甚至可以采用全部大写。每次只要使用一种强调方式就可以了。
问题7:下划线穿越下行字母。

下划线穿越下行字母会造成阅读困难。使用border-bottom: solid 1px #00f,而非text-decoration: underline的方式,在文本下方划线,而非穿越文本中的下行字母。
问题8:用Photoshop制作字体。

如果字体库中没有(或者你买不起)粗体、斜体、小号大写字母,不要用Photoshop制作。可能有时候这些通过Photoshop制作的字体在打印时侥幸没那么糟糕,但在网站中显示时会一塌糊涂。
问题9:不使用异国字符。

书写异国字符很让人很困扰(尤其是编写宜家家具文章的时候)。但如果某人的姓名包括异国字符,有礼貌的写出来。
问题10:应用大写效果时不使用CSS。

随意的使用大写并无意义,但如果出于装饰方面的原因,需要使用大写(或者小写字母)时,确保在CSS构架中使用text-transform属性。这会为以后修改避免很多麻烦。