17 Nov 08 《互联网表单设计》第三章实用指南
本章名字相当不好翻译！Path to Completion，可能叫填写导航比较合适。
本章实用指南：
• 确保表单名称符合人们期望，而且简洁解释每张表单的目的。
• 如果表单填写费时或者需要查询信息，可以在起始网页设定人们期望。
• 由始至终，采用清晰扫描线和有效的视觉信息引导人们填写，说明填写表单的清晰进度。
• 关键任务表单，比如支付或者注册表单，应当去除会分散注意力的部分、任何导致用户放弃填写表单的链接或内容。
• 如果表单分为多个有序网页，应当使用进度指示器说明范围、状态和位置。
• 如果表单没有清晰顺序页面，不要使用会设置错误期望的进度指示器，应当使用更通用的进度显示器。
• 设计表单布局时，要考虑使用Tab键的“跳格”体验。
• 使用HTML 中的“tabindex”属性控制表单跳格顺序。
Tags: 表单
16 Nov 08 《互联网表单设计》简介
Luke Wroblewski的著作《互联网表单设计》（Web Form Design: Filling in the Blanks）发表后，网上对表单设计的讨论似乎一下子多了很多。
Luke的第一份工作是在国家超级计算机应用中心(NCSA)，那里诞生了互联网第一代图形界面浏览器Mosaic，也就是在那个地方，Luke意识到设计和技术之间的平衡问题。之后，他去了伊利诺斯州大学教授界面设计，并出版了Site-Seeing: A Visual Approach to Web Usability（可视化可用性）。之后，他开始在ebay工作，领导组织了ebay网站的多项改进工作，包括他在书中提到的ebay注册表单。Luke现在在yahoo领导产品理念及设计方面的工作。
据Luke在书中称，《互联网表单设计》一书收集了他12年来从事网站设计的经验。的确如此，书中实例很多，非常有代表性。几个月，我购买了此书，基本上一口气读完，非常实用。在几位同事的无私帮助下，October和我翻译完了全书，本以为可以发给同事阅读，结果在检查过程中发现很多问题，理解原文的意思问题较少，更多是中文功底太差，无法很好表达原文，虽然心中明白是怎么一回事。见过一段时间的修改，现在的翻译版本比以前好了很多（自认为^__^)。
这本书例子丰富，讨论了多种表单形式在多种情况下的优缺点，不是简单告诉读者应该这么做或者那么做，用Luke的原话“It depends”。Luke非常强调context。
受版权影响，在没有得到原作者同意的情况，我不能在这里在这里贴出原书。不错，我想贴一些书中的实用指南（Best Practices），Luke应该不会反对。
顺便说一句，系统研究表单设计的并不止Luke一人。Caroline Jarrett和Gerry Gaffney合著的Forms that Work: Designing Web Forms for Usability同样是本好书，其中一位作者还参加了深圳UPA 2008。
以下是 《互联网表单设计》第二章表单组织的实用指南，请注意，这些指南都基于一定条件，请勿任意推广：
•花时间评估表单包括的问题。提高警觉，去除一切不必要问题。
•表单问题（即标签）简洁化。
•如果人们会误解简洁标签，应当使用自然语言，阐明表单要求人们回答的问题。
•尽管表单包含的问题来自多个不同人或部门，确保这些问题的一致性。
•将表单内容组织逻辑组，帮助用户扫描和完成填写。
•如果可能，以对话形式构建表单。主题间的自然间断能帮助组织表单。
•如果表单可自然分成若干主题，一个网页就可能足以组织表单。
•如果表单包含大量问题，而主题较少，可能会需要多个网页组织表单。
•如果表单包含大量问题，而只有一个主题，一般需要一个较长网页组织表单。
•只在表单填完之后提出非必答问题，这样做比在表单中就提出这些问题，用户更愿意填写。
•使用网络惯例调查来发现特定类型网站如何组织表单。
•使用最少的必要视觉信息来区分内容组。
•首字母大写，用户更容易扫描内容组名称。
其他各章的实用指南会陆续贴出。
Tags: 表单
12 Nov 08 视觉设计常见误解
原文：Common Visual Design Misconceptions
翻译：luyi
最近，我有机会研究对视觉设计作用的常见误解，这些误解仍然盛行于行政主管、产品主管，工程经理和市场专家中。设计团队成员如何说明这些认识是错误的？又该如何向同事和老板展示视觉设计真相？
视觉设计师在特定产品领域或职业生涯中会面对各种困难，但有三种误解频繁发生：
视觉设计是美化产品；
突出显示能改善视觉设计；
可以分割评估视觉设计。
视觉设计是美化产品
这种信条可能起源于工业时代的设计理念引入。从那时起，产品以前所未有的方式进行设计，并形成风格。Raymond Lowey等工业设计师对呆板产品进行美学设计，而声名大噪。
视觉设计固然能美化产品，但其与人交互的潜能早已超越美丽外观。通过组织视觉元素，设计师可以传达回答关键问题的核心信息：
* 这是什么？
* 怎么使用？
* 为什么要使用？
回答这些问题是功能和可用性的关键组成部分，尤其是对于交互产品。举些例子来说明：
图1到图3，某个网络应用工具，相同基本设置的三种表现方式，字体、颜色、渐变和图片都相同。三者主要区别是页面元素组织方式不同。这种区别表明该网络应用工具存在三种主要使用方法。
图1——网络应用工具设计示例
图1，表现方式清晰显示出主要功能——查找客户联系信息；其次，用户可以编辑、删除或者增加备注。图2，重点是顾客和公司之间的交流；其次，用户可以查看、编辑和删除联系人信息。
图2—相同网络应用工具，不同视觉组织
图3，关注点放在编辑客户信息上。查看联系人信息和跟踪正在进行的会话功能被弱化。
图3—另一种视觉组织
相同应用工具，三种不同视觉组织，三种不同主操作：查找联系人信息、管理客户交流以及维护客户记录。每个例子中，影响视觉设计的因素大体一致：颜色、字体、渐变和图片。
显而易见，视觉设计不仅是美化此工具。它传达工具的核心功能：它是什么？如何使用？为什么要使用？，而同时有美化了界面。
能让这个更突出吗？
很多网站都喜欢把logo做得比较大，客户和老板常要求视觉设计师着重强调页面上某些元素。这类评论有时可以帮助我们发现设计中的最重要元素，但也常引发视觉设计的另一常见误解：改善网站视觉设计，通过加大、加粗、变红或同时使用三种方法来实现！
页面任何元素的相对重要性都是由其周边元素决定。白色页面放上红色圆圈，会吸引很多注意力。但把红圈放在10个粉色圆圈旁就不会吸引那么多注意力。突出重要元素是整体设计的一个过程，并不是改变任何单一元素。给予单个元素额外视觉权重会破坏布局平衡，搅乱相关元素、主操作等之间的关系。
要是满足客户和老板每个强化某些功能的需求，页面所有元素都会去抢着吸引用户注意—结果就是都得不到注意。图4和图5，两个互联网浏览器下载页面。Firefox页面，下载浏览器号召很明显，页面其他元素—-Thunderbird、 Mozilla商店和最新内容—–没有干扰。
图4—Firefox下载页
图5，Flock下载页面强调了许多不同元素，设计团队决定提供四个下载入口——右上角、左侧菜单底部、新闻面板右上角和页脚。如果页面上没强调那么多其他元素，Flock下载页面或许可以和Firefox一样只用一个下载按钮。
图 5—Flock下载页
可以分割评估视觉设计
没有从设计整体考虑，而强调单个元素会非常困难，同样做出孤立改变也很难。但是视觉设计师收到的大部分反馈集中在孤立元素上：可以把Logo做大点吗？能改变标题颜色吗？这里可以换张图吗？
这些的确帮助设计师明白用户和老板想要的东西，但他们没有考虑优秀设计必需的整体分析。改变颜色需要反复思考整体配色，因为设计师必须确保颜色对比明显，才能突出关键操作。改变图片意味着同时要改变周边元素，因为原图片形成的焦点可能已不存在。诸如此类。
产品总体视觉设计源于谨慎平衡页面元素——传达产品功能、可用性和优势的关键信息。如果要调整一项元素，设计师需要重组全局，重归平衡。孤立设计决策无法保持修改前后整体一致。
孤立评估基于互联网的产品特别脆弱。单个产品可以进行独立测试，所以产品团队就会假设”这些产品结合在一起也会很好”， 而常常把单独表现良好的产品组合起来。图6，孤立决策的后果。
在这个eBay页面，页头水桶测试（bucket testing）表现良好，PayPal保护机制的logo在焦点小组（focus group）中获得好分数，摄影物品宣传也获得不错点击流，但把三个元素综合到一个页面上，并没有形成有效设计。事实上，页面上很多元素似乎互相竞争，互相干扰。
图6—eBay意大利主页
希望这些例子能解释对视觉设计角色的一些常见误解。只有同事和老板能直接体验视觉设计潜能，他们才会相信视觉设计绝不仅仅是设计样式、显化元素或做出孤立决定。
Tags: 视觉设计
07 Nov 08 设计质量的各个方面
翻译：luyi
摘要
51家网站的可用性得分说明了导航、内容和功能质量的相互关系，但与其它可用性领域没有联系。
一些用户界面好，另一些差，所有人都知道。但为什么设计存在可用性差异？
简单回答，一些设计团队有好设计师，听从可用性专家的意见，遵循成文的指南；另一些团队设计师差，不进行可用性优化，或不顾可用性研究成果，将自己偏爱的理论置于已被证明最优方法之上。
但这个简单回答引发另一个问题：为什么一些团队比其他团队更关注用户体验质量？用刚收集的资料，我们可以根据统计数据分析这个问题。
许多设计项目集中在相同问题上，很少有这些项目的可用性结果数据。即使我们为咨询客户做可用性竞争力的研究时，也只测试3、4家同领域竞争对手网站，因为这足够得到可用性战略建议。测试更多竞争对手网站会严重导致收益递减，还不如把这些钱用来反复测试公司自身设计。
多亏皮尔慈善信托的赞助，现在我们有51家类似网站的可用性得分，我们对所有50个州及哥伦比亚特区的投票信息网站进行可用性评估，并得出结果。
各州投票法规不同，这些网站并不真正相同。但是它们非常相似，可以进行横向比较。比如，对于缺席投票人数最高限度，各州定义不同，但所有州都必须告诉选民缺席投票人数规则，包括最高限度，还要向选民提供请求投票的方法。
可用性得分分布
下面的柱状图显示了51个投票网站的可用性得分。分数范围从0%到100%，越高越好。
请注意，得分完美并不代表网站可用性完美。100%仅表明网站在评估的所有可用性方面达到现有最高水平。事实上，此次研究最高得分仅为77%，和最好商业网站相比，投票网站还有很长的路要走。（电子商务网站往往可用性特别好，因为人们不能在上面购物，网站就完了。政府网站也从可用性中获益，但可用性很少关乎其组织成败）
51个投票信息网站可用性得分柱状图
柱状图显示了可用性正常的正态分布：大部分网站可用性中等，很少网站可用性优秀，只有三个网站可用性得分超过70%。很遗憾，更多网站可用性较差，8个网站得分低于40%。最低29%—-真是糟透了—-只有最坚定、操作最熟练的用户才可能完成网站上的任务。
核心可用性
你会认为，只要设计团队精通可用性一个方面，其他方面也会不错。但不是这样。
数据显示，不同可用性问题的质量之间很少关联。统计学将这种关系称为相关性。许多相关性接近于零，完全毫无意义。 换句话说，如果设计团队精通可用性的一个方面，其他方面的优劣毫无规律可循，可能好，也可能坏。 两个例外：
* 导航、信息架构质量和内容可用性的正相关度达0.54。
* 导航、信息架构质量和网站工具质量的正相关度达0.40。
（提醒，相关度范围从-1到+1。0表明两变量毫无联系。正相关表明两变量变化趋势一致，1代表变化趋势趋同。负相关表明两变量变化趋势相反，也就是一个变大另一个就变小。）
下面的散点图表明导航质量和内容质量之间的关系：
上图中，每个点代表一个网站。（因为一些网站在可用性的两个方面得分相同，点重合时只显示一个点。这就是为什么图上好像少于51个点。但是尽管有些点看不见，我是根据所有51个网站得出的趋势图。）
相关度p<0.001非常重要。（导航和网站工具间的相关度同样也满足p<0.01。第二张图表不显示）
此结论表明可用性的一些核心领域：用户怎样浏览，如何发现内容，以及功能。都非常好，而且确实非常重要。一些团队有搞好核心领域的思路，另一些团队仿佛被钉在Dreamweaver上，网站上随意堆砌拙劣信息和无用功能。
不过，可用性的几个核心方面相关度也不高：0.5左右的相关度说明只有1/4是由于另一方面引起，另外3/4随机因素而定。所以一方面做得好，可用性核心的其他方面依然无法保证。
被忽视的可用性方面
根据统计分析，可用性很多方面与核心可用性完全不相关，包括：
* 首页可用性
* 搜索
* 可达性
* 网站表现（用户如何在网站之外获得内容，或者”大范围可用性”）
这些重要质量方面之间的相关度很低（有时甚至相反），而且它们和核心领域方面也不高。
举例，首页可用性和可达性之间相关度为-0.1。
负相关并不意味着亲和力与优秀首页设计站在对立面。请记住，我们评估首页可用性，并不是考量是否有特别迷人的页面或功能复杂的Flash动画。（后者常常同时破坏可用性和可达性，因为网站通常错误使用。） 负相关表明设计师并未将可达性作为考量用户体验质量的一部分。最可能的，政府机构关注法律法规的可达性，而不是方便残疾人使用。
许多设计项目错误将可用性各方面的重要程度错误排序，这是我对低相关度和负相关度的解释。网站最终成败随机决定于核心可用性之外的其他方面。
“随机”决定，我不是说抛硬币决定设计。我的意思是设计团队中有人碰巧明白可用性核心之外的领域如何提高用户体验。
网站在可用性基本领域做得好，也许能完全忽略可用性许多其他方面。基本领域做得差的网站也可能拥有碰巧理解可用性其他方面的设计师，从而在某方面成功提升网站。
下图是关于51个网站首页质量的柱状图，较于总体可用性，散布更广。一些网站的首页烂透了，另一些则接近目前的最佳指南。
51个投票网站的首页得分柱状图
如图所示，此项得分高低与其他评估网站质量方式无关。这也是为什么总体可用性评分是典型的”中庸之道”，涵盖了可用性不同方面的高分和低分。
所以，大部分网站一些方面做得非常好，另一些则完全让用户失望。客观上说，这常常能算出可用性中等表现分数。但同一站点上既有优秀设计，又有拙劣设计，用户会觉得草率，好像网站没有足够尽力提供服务。
良好用户体验需要综合视角
我们提出”完整用户体验”概念涵盖用户遇到的所有问题，事出有因。用户界面的一部分优秀设计并不够。比如，导航好当然是杰出用户体验的必备部分，但并不足够。首页糟糕，用户还未使用导航就会离开。
我们将网站用户体验比作锁链，最弱的一节决定其强度。如果一条可用性属性出错，整体用户体验就会受牵连，很多用户因此失望。
如何确保整体用户体验质量？需要从用户角度出发，综合考量可用性，还需要通过以用户为中心的设计提升网站。
我们常常收到客户请求，改进他们网站或企业内部网的某一要素。比如，他们常常希望改进信息架构。这个理由当然有价值，而且能帮助大部分网站。但它是造成商业价值流失的罪魁祸首吗？也许是，也许不是。弄清楚原因的唯一方法是从首要原则开始，综合评估用户体验。不要过度关注用户体验的一个方面，无论那个方面多么重要。用综合眼光，不用只盯着几个关键方面。
Tags: 尼尔森
05 Sep 08 表单设计应当避免的常见错误
原文标题：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时能一眼看到）一样设计表单，而不能像设计书那样（躺在椅子里有很长时间阅读一本书）。
Tags: 表单
29 Aug 08 简洁网站设计助你实现商业目的
原文标题How Simple Web Design Helps Your Business。
很多电子商务网站喜欢在登陆页面负载过多信息。这些电子商务网站如此糟糕设计的原因很简单：页面中塞入信息越多，用户买的就越多。不幸的是，网络买家是“墙头草”（译者注：原文为finicky bunch，意思是网络买家为善变的群体）。
雅库布尼尔森（Jacob Nielson）说过，网络用户在线购物和在线浏览时会变得越来越没耐心。大部分的购买是用Google快速搜索完成，而不是花时间从进入网站首页，按目录找到内容或通过其他产品推荐。如果不能马上发现需要的东西，用户就会离开。
简洁网站设计能让用户快速找到所需信息，特别是销售产品时，这一点至关重要。如果无用的文字、小程序或无关产品搞乱了页面，网站就变得毫无意义。
然而，相反的做法反而成了惯例。电子商务网站采用了这种“霰弹”方式努力尽可能多地击中潜在用户。这类网站经常会在登陆页上放置不必要的信息、广告和相关产品，而不是仅仅放置一个产品。
产品越少，关注越多
很多网络公司忘记了电子商务的基本法则：网络购买者希望干扰尽可能少。在亚马逊网站（Amazon.com）上点击几次鼠标就能购买DVD，这要比开车去商店购买简单得多。如果购买体验简单快捷，用户甚至愿意在网站上停留更长时间，进行更多消费。
苹果擅长设计简洁首页。登陆其首页，只会看到三样东西：
• 简洁的页首导航
• 页面主体展示一个产品
• 特色产品图片下方有信息性链接
除标准页脚导航外，首页仅仅包括三部分。下图是点击一个产品链接（比如iPhone）后进入的页面。
即使在产品页面，你马上就能明白页面主题：iPhone。产品本身占据了页面主要部分，周边信息是新款iPhone的应用和特色。更重要的是，观察iPhone页面没有什么内容：
• 无关产品
• 无关广告
• 很多文字
• 杂乱无章
苹果网站以令人满意的方式有效展示了足够信息。提供大量信息没有错，只要不让人感觉信息过多就行。这里所有信息、链接和图片全部围绕iPhone本身及其相关信息展开。页面上没有分散注意力的广告、无用信息和其他产品。
简洁网站设计原则的主要方面就是“只显示完成销售需要的信息”，其他什么都不要。这并不是说不需要给用户很多信息。只是要搞清他们是否要看到更多信息。Apple网站使用“Learn more”链接来达到此目的。
设计师和网站工程师可是利用几个可靠方法保证页面布局不会因为杂乱无章而导致访问者离开：
1.只显示需要的
2.减少点击。购买产品所需的点击越少，回头客就越多。别让客户买产品像跳铁环一样困难。
3.“祖母”法则。如果你的祖母（或任何老人家）都能理解如何在网站上购买产品，你设计页面可能真的不错。不需要的信息会让祖母迅速离开。
4.减少栏目。页面上每增加一个栏目，内容空间就会越小。这会减少对主要产品的关注，而购物者的注意力会转到额外的东西上。
5.减少选择。让购物者选择会增加其负担。归根到底，买家购物时希望思考的时间越少越好。以消除多余思考时间及决定的方式展示产品会使购买过程流线化，客户觉得更轻松自得。
6.让设计整洁。整洁的设计会让访问者心情愉悦。花些时间来确保网站布局在美学上让人愉悦，会吸引更多回头客。
直觉网站设计意味着站在潜在客户的立场思考问题。你会在自己的网站上购物吗？
其他优秀的电子商务网站设计
Bell.ca网站使用了很少的颜色来设计品牌，并只向访问者提供主导航栏。Shop、Support导航项以及Personal和Business区域的设计恶非常巧妙。设计简洁，访问者不用被强迫浏览整个导航项，就清晰了解导航分布。页面顶部的产品导航设计得多精妙啊。用户没有点错的可能。
Shoeguru.ca网站展现了以“用户中心”和“产品中心”的设计。产品似乎就在访问者眼前的展台上。设计仅仅陈列了产品，而没有其他任何东西，甚至没有导航。
Etsy网站很好的说明了如何在页面上放置很多信息而不显杂乱。Etsy产品列表很长，然而设计得自然、放松。首页设计得有用、而不使人分心并不简单。
Crupress是个简洁明快的书籍网站，没有很多无关栏目。首页有很多文字，但没惹烦用户。页首导航突出，但不扎眼。所有设计元素非常流畅。
Tokyocube是一个有趣时髦的小网站，销售日本产品。产品直接呈现在眼前，而不是用很多空间解释网站是卖什么的。使用大量留白使产品仿佛从屏幕中跳出来。你会情不自禁点击其中一个玩具查看详情。
Furious Tees网站比前面的网站使用了更多的图片，有助于两件事：
1. 表现网站的趣味性
2. 明确标明每件T-shirt只卖19.99美元
产品就在眼前，绝不会搞不清Furious Tees在卖什么。首页上展示所有产品，特别适用于出售新奇产品的网站。
但首页上放置大量产品可能会造成页面杂乱。Furious Tees没有这个问题。页面没有额外的工具条和广告分散访问者对T恤本身的关注。关注点集中在衬衣和有趣的设计上。
找不到比37 Signal的产品管理工具Basecamp网站更好的例子，来诠释如何综合不同类型信息来销售产品。给出完成销售所需信息“刚刚”足够。设计时权衡了每个单词、每张图片。如果信息不够，用户不会花时间弄明白产品能做什么。但信息太多又会让用户不知所措。
高质量标题背景和公司标志的设计让每一个细节都能被关注到。不同媒体类型结合起来，占据足够空间，用户不会在同一时间被大量图片和文字“轰炸”。
你只有几秒
每个网站都希望用与众不同的布局、设计、文字来销售产品。设计师可通过以下方式达到“少即是多”的目的：
• 权衡每个单词
• 去除不需要的元素
• 使用有品味的的颜色和留白
• 限制购买者一次可看到的信息量
记住，互联网买家是善变群体。他们不是“光看不买”的逛街。他们使用搜索引擎缩小到很小的范围。如果不喜欢看到的产品，他们就会离开。网站主只有很少的时间争取潜在用户。高品质、整洁的设计方便购买者迅速发现所需产品。
Tags: 布局
14 Aug 08 网站搜索框设计诀窍
原文标题Tips on site search box design。
虽然很多在线购物者更愿意用导航链接浏览网站，但我们不应当忽视搜索框的重要作用。
如果来访的购物者清楚的知道想要什么，他们会很明确的使用搜索框。这种情况下购物者显示出了明确的购物意图，因此搜索框能够把该意图转变为真实的购买行为。
根据Fast Search提供的数据 (pdf)，30%的购物者进入电子商务网站后会立刻使用搜索框，超过30%的人通过导航没有找到需要的物品后转而使用搜索框。
那么，如何让这一切变得更加容易一些？以下是些小诀窍：
搜索框大小
允许用户输入较长的搜索请求，比如两个或者两个以上的词，这是现在的流行做法。那些查找具体电视机型号或者笔记本电脑型号的用户会倾向于使用较长的搜索请求。这意味着我们需要较长的搜索框。
理想的文本框应当能够容纳约30个字符，即5个单词左右。如果用户输入了更长的搜索请求，就无法看到全部文本。这不算糟糕，但如果搜索框能长一些，用户会更容易修改搜索内容中的拼写错误。
以Kelkoo为例，该网站为搜索框提供了足够的输入空间：
显化搜索框
搜索框应出现在页面的显著位置。许多网站倾向于将其放置在页面右上角，但将其安排在中间，购物者会更容易发现。
Comet网站最近发布了新版首页，更加突出了搜索框（同时加大了搜索框）。Comet网站发现搜索框是有效的转化工具，所以做出了此变更。
旧版搜索框被放在了页面右边，如下图：
新版中，搜索框被明显突出：
提供搜索预测
搜索框中输入关键词时，用户必须用几个词来描述产品，并猜测电子商务网站会如何呈现该产品。
让搜索变得更加容易的绝佳方式，是在用户输入搜索项时给与搜索建议，正如Google Suggest。用户能用最小的投入获取想要的东西。
Borders.co.uk网站最近升级增加了这一功能：
允许用户缩小搜索范围
如果用户搜索的产品数量非常巨大，用户更愿意通过缩小目标限定搜索范围。
Amazon网站就是如此。你可以通过其18个目录缩小搜索范围，以呈现更加相关的搜索结果：
用标签明确标识搜索框
大多数的购物者很容易找到搜索框，但我们不应当让那些对网络不是特别熟悉的人为此花不必要的精力。
Waterstones网站虽然将搜索框放在页面左侧，但它清晰明确的标记出其搜索工具：
页面载入后，光标默认定位在搜索框内
这是个小细节，但能够让顾客更加容易开始搜索。Google及其他主要搜索引擎都是如此，这能帮助用户更加迅速的达成目标。
但并非所有电子商务网站都是如此。Kelkoo和Amazon网站载入页面后，都将光标默认定位在搜索框内，但在M&S和Next等网站中，用户必须移动鼠标进行定位，才能输入搜索项。
移除搜索框中现有文字
许多网站和下例中的Marks & Spencer网站一样，在搜索框中写入文字解释功能。点击搜索框时，文字自动消失，你可以自由输入搜索项。
如果搜索框中的解释文字无法消失，用户会感觉沮丧，他们必须删除文本再输入搜索项。值得庆幸的是，很少有网站犯这个错误，而迪斯尼英国网店恰恰犯了这个错误。
Tags: 搜索框
12 Aug 08 网络排版十大错误
原文标题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属性。这会为以后修改避免很多麻烦。
Tags: 排版
18 Jul 08 网站表单的国际地址
作者Luke Wroblewski，原文标题International Address Fields in Web Forms。
网站表单作为企业与客户之间进行在线沟通的实现者，往往承担着收集关键信息的任务。例如收集电子邮箱地址便于进一步沟通，收集邮寄地址用于投递产品，收集账单信息用于处理付款等等。因此被问到网站表单设计最常见的问题——“如何设计国际地址”时，我并没有感到很惊讶 。
分析地址变化的细微区别之前，值得指出的是人们对地址结构拥有共识。经过多年通信经验及邮政系统的积累，人们对构成地址栏的要素形成了非常具体的概念。这种共识非常绝对。眼动数据表明，一旦人们开始在地址栏的输入框中填写信息，人们往往不再看该输入框的标签信息。人们对地址栏的基本结构很熟悉，并不需要标签提示。
考虑组成地址的输入框是很重要的一点。图1显示了美国地址中通常包括的条目的排列方式。图2是另一种方案，每个条目都分行显示，这种方法缺乏关联理解输入框的优点。因此，人们更倾向于相对独立的对待每个输入条目，而非将地址看作一个整体。
图1：网站表单中的美国常用地址结构
图2：分割的美国地址结构
幸运的是，世界上组成地址的要素有着相当多的共性。大多数国家，地址栏中的目的地、收件人都是采用从具体到模糊的渐进结构，而俄罗斯、伊朗明显是例外。因此要给一家公司中的某人寄东西，地址栏中第一栏为收件人姓名，然后是公司名称，之后是街道、城市，最后一栏是国家。如图3。这种结构能用于所有国际地址。
图3：国际地址结构
国际变化
地址栏的国际变化从最具体的条目开始——拥有地址的人。世界上的人名可能是一个、两个、三个或更多个字。Formulate Information Design的文章“The Name Riddle”描述了姓名中的可能变化，从印尼首任总统Sukarno到沙特第五任国王：Fahad bin Abdul Aziz bin Abdul Rahman Al-Sa’ud。
即使在一个国家内，街道地址也会有很大差异。美国邮政邮政地址标准描述了美国街道地址的差异——从1401 Main St to RR 9 Box 23A 到RR 9 Box 23A to 475 Lanfant PLz SW, Rm 10022。
姓名和街道地址差异很大，但是每个单一输入框只要够长即可。门牌号码在街道名之前？没问题。门牌号码在街道名后面？也不是问题。但是对于地址栏中的城市问题，就没那么简单了。
除了城市名称、邮编外，城市一栏同样可包括州、地区、省、或者国家。国家不同，每一项可能有不同的叫法、简称，在地址栏中的位置也不一样。不同国家的邮编形式也不同，包括空格、数字、字母以及长度。这些要素的顺序差异巨大。图4显示的是地址栏中城市项可能发生的变化。
图4：城市项变化样例
为解决这些国际变化，网站表单设计师采用了很多方法：特定表单、可变表单以及通用表单。
特定表单
若知道或可以确切推断客户的国家，采用特定表格的办法最为有效。用这种方法，可以为每个特定国家定制地址栏结构。图5显示的是法国、意大利的地址栏。请注意位置和标签的变化。
图5：法国和意大利的地址栏
如果能非常肯定客户的国家，特定表单能提供可快速理解的熟悉的地址结构，从而加速表格填写的完成时间。Frank da Cruz的Compulsive Guide to Postal Addresses是一个了解世界各地独特地址结构的奇妙网站，据此你可以制定针对特定国家的地址栏布局。
可变表单
和特定表单方式一样，这种设计利用可变化的格式，设计特定国家的地址栏。但是，这种格式是基于用户选择而非已知或者推断的位置。如图6所示，eBay的注册表单就使用了可变表单。如果有人更改了默认国家选项——该默认选项基于eBay对用户的访问位置判断——表单会显示被选择国家的地址框，以替代默认地址框。
图6：eBay 允许用户可更改注册表单中地址。
这种情况下，若在地址栏下拉菜单中选择加拿大而非澳大利亚，“State/Territory”变为“Province”，“Postcode ”变为“Postal Code”。尤其值得关注的是，更改国家时，用户在通用地址结构的表单中输入的任何信息，比如名字或者街道地址，应当被保留。消除用户已经提供的信息极可能会惹恼用户。
通用表格
通用国际地址表单格式是另外一种保持多种地址栏变化以支持特定国家的解决方案。通用格式为组成地址栏要素的栏目提供单独的输入区域，让你能应付姓名以及街道地址的变化。为了适应地址栏布局以及城市项的变化，你可以使用一套通用的输入栏。Amazon.com的表格正是如此，如图7。
图7：Amazon.com的地址栏通过采用通用表单的形式支持不同国家的地址输入。
不同于根据国家显示不同的下拉菜单，单独输入栏被加上各种标签，比如州、省、地区，用户可以据此填写信息。类似的，“Zip/Postal Code” 标签同样包括了在输入框中针对邮编不同形式的邮编。该输入框可以填写字符、空格，长度不定。在多行项目中填写地址栏各项元素时，你可以应付邮编、地区、城镇，而无需暗示特定的地址结构。
这种通用表单能够为国际地址提供灵活的输入栏，但是错误检查会变得比较困难，因为一些字段会有多种表现形式。而且，由于其灵活性，通用表单没有对国家或文化进行真正优化，它通常有用，但非理想形式。
本文考虑了几种国际地址栏设计方案，但还存在其他类型或者问题。若有其他见解，欢迎发表评论。
———————————————————————
Luke Wroblewski的著作网站表单设计。
Tags: 表单
17 Jul 08 google 发布docs template gallery
google在其官方博客宣布发布google docs template gallery。这意味着用户可以使用模板编写出更为复杂和精美的文档。google还加入了一些社会化风格，用户可以对模板打分。
这对微软的office模板算是小小的冲击。
Tags: google
