通向完美作品网站十步骤

通向完美作品网站十步骤

原文：10 Steps To The Perfect Portfolio Website

作者：Lee Munroe
译者：October
校对：toMMy

出于多种原因，你也许拥有个人作品网站。自由作家需要展示作品，方便人们与其取得联系。学生（或待业者）的作品网站可以向未来的雇主证明优势所在，以获得工作。工作室成员使用作品网站记录设计历程，向人们展示作品，树立在线形象。

个人作品网站是推销自己的手段。你就是品牌，你的名字就是品牌的名字。只有展示自己，别人才会知道这个品牌。网页设计师，开发人员、作家、游戏玩家或其他任何类型的创造者，拥有作品网站至关重要。

参考相关文章：

• Creating a successful online portfolio

• 50 beautiful and creative portfolio websites

良好个人作品网站的组成元素

1 LOGO

LOGO通常在第一时刻印入眼帘。西方人阅读顺序为从左至右，从上到下，因此把LOGO放在网站左上角，可便于浏览者第一时刻识别出这是谁的网站。

LOGO不一定要是你的名字，但如果要在线推销自己，把名字做成LOGO是个好主意。LOGO应始终链接到网站首页。这是网上惯例。

Mohit goes by the alias of CSS Jockey.

Jason Reed uses a signature-style logo of his name.

2. 标语

用户一旦认识到网站拥有者是谁，他们会希望了解你是做什么的。可以用标语来说明。标语应当简洁，总结你是做什么的。

撰写标语时，问问自己：

• 你的职业是什么？设计师？作家？开发人员？
  
• 你是做什么的？设计网站？开发游戏？
  
• 你来自哪里？国家？城市？
  
• 你是自由作家或者为工作室服务？还是正在找工作？

Sarah Longnecker makes it clear that she puts together videos and is good at it.

3. 作品

毕竟是个人作品网站，作品决定了网站是否吸引人。人们想了解你以前的工作，看看你是否出色，还会出于一般兴趣了解你过去从事的职业。

根据工作性质，作品应当包括大尺寸高质量图片，便于用户查看。始终包括你做过的网站最新版本的链接，把屏幕截图指向最新版本（也是网上惯例）。每个项目都要有简短叙述，叙述要包括需完成项目的不同技巧。

获得客户表扬是个好主意。访问者也许还会对项目发展阶段、如何到达最终结果感兴趣。

Leigh Taylor displays nice clear screenshots of previous work and indicates what software was used during development.

4 服务

标语总结了你是做什么的，还需详细介绍自己提供的服务。别期望潜在客户会根据作品猜测你是做什么的，你也不会想让客户猜测你是否提供某项特定服务。

明确表述，并分别叙述这些服务：网站设计，开发，视频，文案，品牌等。你也许希望表述得更具体一些：公司品牌，教堂网站设计， Flash横幅广告等等。

Chris Spooner clearly indicates the services he offers for both print and Web.

5 关于我

这是关于你自己的网站。让人们了解面具（即网站）背后真正的你。分享你的背景、来自哪里，在这一行干了多久等等。信息越详细，越容易得到用户信任，并与其建立合作关系。

若你不害怕照相，就放张照片。潜在客户看到交易对象的照片，会感觉安心，增强彼此信任。

别害怕在网站上炫耀获得的奖项和表彰。要让人们了解你擅长你所从事的事情。

Chikezie Ejiasi shows us a photo of himself and even lets us know how to pronounce his name.

6 联系方式

联系方式是作品网站最重要的元素之一，但常被隐藏甚至被忽视。潜在客户浏览你的网站，被你的作品深深打动，对你有了一定了解。现在，他想雇佣你。

联系信息应当明显并且易于获取，别藏在页脚处。让人们知道他们可以联系你，进行报价或聊天。采用表单，便于人们与你取得联系（客户不用记下你的邮箱，再打开邮箱程序发邮）。采用表单还可询问一些特殊信息，比如姓名、邮箱、网址、报价详情。

Stuart Johnston offers clear contact details throughout his website but also provides an easy-to-use contact form.

7 部落格

部落格一直很棒。写写专业领域，说说讨论的事情。它能帮助你提升，并更新网站。

让人们用RSS订阅关注你，向新读者展示最热门文章。

确保人们可以评论。别让用户注册了才能发表评论，也别用使用验证码，验证码只会对阻碍用户评论。有许多反垃圾插件可用，它们并不需要用户做额外的事。

Chris Wallace uses his blog about Web design-related topics to help out other people in the industry and to engage in discussion.

8 行动号召

问问你自己，你想从个人作品网站得到什么？想被聘用？想吸引更多读者？也许你只想让人们知道你是谁。

每页都应当有一个行为号召，即“下一步”。最佳方法是采用明确、突出的行为号召按钮，将其链接到博客、作品、或联系页面，并使用恰当语言表述（比如：“雇佣我”、“报价”、“查看作品”）。

Matthew Brown’s call to action is a contrasting button that stands out from the rest of the website.

9 用活社交网站

人们对你和你的工作产生了兴趣，是时候鼓励他们在其他网站上关注你了。清楚表明他们可以在Twitter、Facebook、Flicker、LinkedIn等社交网站上关注你。最大限度用活社交网络，需要的话集结一帮朋友。
1

Sam Brown offers clear links to other websites he uses, allowing us to stalk him.

10 语言和沟通

如何展现自己很重要。记住，个人作品网站就要个性化。它不是冷冰冰的公司品牌。友好、个性化，但同时也应保持清晰和周密；别瞎扯。一旦为自己的网站写文章，写完后再读一读，看看能不能精简一些。

Marius Roosendaal uses a relaxed and friendly tone on his website.

其他诀窍：

• 让人们知道你从哪里来。人们总是想知道这点，有些客户喜欢与在相同或者相邻时区的人一起共事。
  
• 验证很重要，尤其对网页设计师来说。如果要为客户建立专业网站，那么你自己网站上的代码至少应当有效。
  
• 使用图片链接，而不仅仅是文字链接。大多数人更愿意点击图片链接，希望能指向其他地方。
  
• 如果没有任何前任客户，那就创建个WordPres主题，设计套图标，建立个Twitter聚合等。可能性有很多，有项目展示作品和没有项目展示完全不同。

良好用户界面设计的12种技巧

良好用户界面设计的12技巧

原文：12 Useful Techniques For Good User Interface Design
翻译：October
校对：Yummy

1 突出重要改动

系统状态可视化是良好用户界面的关键要素之一。用户应当即时了解发生了什么，行为是否导致了预期结果。为了达到更高级的系统可视化，现在网络应用程序都采用AJAX。用户可以随时更新网页的一部分，而不用刷新整个网页。AJAX给网络应用程序带来的反应速度和互动性接近桌面程序级别。

Yammer 采用3种效果显示新信息：渐变、滑动、高亮。


AJAX的动态属性也意味着，点击提交按钮，页面虽然不会刷新，但的确有事情发生了。大多数网站还没有广泛采用AJAX，所以有些用户会困惑页面到底有无发生变化，还是自己没有正确点击按钮。为每个交互提供视觉反馈可以解决该问题。

Backpack对任务列表的所有新条目采用高亮效果，持续一会，再消失。

动画可以很好的产生视觉反馈。人眼会很容易注意到移动，尤其当页面其他部分处于静止状态。比如，购物篮增加新物品，高亮动画会引起用户关注增加的物品，用户了解操作已生效。可以用JavaScript实现动画效果。要注意过犹不及，过度使用动画会引起界面冲突，因为播放动画会导致用户操作速度变慢。

2 允许使用键盘快捷方式

现代网络应用程序的高级特性不断逼近桌面软件，开发者努力为用户提供反应更快、互动性更强的用户界面。一种方法就是集成键盘快捷方式或者导航。这小小的技术会显著改善用户工作流程，用户能更容易完成任务，正如某些经典应用软件一样。

实际上，很多网络应用已经采用了快捷键（比如Google Spreadsheets, MobileMe等），甚至一些普通网站的基本导航也允许用户使用快捷键，比如Ffffound和Boston.com。Ffffound允许用户使用快捷键v进行略缩图浏览和列表浏览切换，h键回到页首，k键回到上一张图片，j键转到下一张图片。Boston.com也采用k和j键达到同样功能。

值得指出的是，快捷键应当直观明了，无须额外说明。比如，下一步、上一步的快捷键在键盘上相隔太远则没有意义，两个快捷键在键盘上应当靠在一起。因为如果错误跳到不想访问的页面，用户可以快速返回，而无需在键盘上寻找上一页的快捷键。“J/K”组合是一种方法。

最好使用大多数网站通用的快捷键，但目前尚未发现通用快捷键。

确保有快捷键可供使用，通过快捷键可以更加有效完成任务。

3 允许用户在帐号页进行升级

若提供多级别服务，确保移除任何会干扰客户升级的界面混乱之处。多数用户倾向于首先尝试基本服务，了解内容和运作。一旦确定符合期望值，他们会考虑升级到高级服务。设计师应保证升级过程尽可能简单明了。

CrazyEgg 将升级操作（Change Plan）放在主导航中。

实际上，许多网络应用将升级选项放在账户页面上，便于用户访问。这种设计的好处在于用户能马上看到所有服务级别、支持功能。

Bigcartel’s 的升级选项包括在该应用中。

注意：不要仅列出可选择的服务级别，还应说明当前使用服务级别和级别特征。

应当明确告诉用户升级后会得到什么好处。（参考Pricing Tables: Examples and Best Practices一文。）

4 宣传服务特色

即使有详细市场营销页面，列出所有特色和帮助信息，用户还是会完全忽视。他们很可能不熟悉产品的所有特色，只能从产品内的一点提示获得帮助。

宣传服务特色。一般可利用边栏（Sidebar）进行宣传，不会影响主要功能的使用。若用户所选服务级别使用接近饱和，告诉他们，并提供迅速升级选项。

Freckle时间跟踪程序会在服务级别达到容纳人数限制时给予提醒，并提供升级链接。

Wufoo在表格创建页面底部高亮显示表单图册库的CSS主题功能，确保客户获得应用程序的最大价值。

5 使用颜色区别列表项目

一些应用程序会聚合不同类型内容。比如，项目管理工具在首页显示所有最近信息、任务和文档。如果这些项目在列表中一起出现，会很难辨识。因此许多应用工具采用颜色帮助用户从视觉上区分不同类型项目。一个简单办法是在有色框内防止文本标签，列表容易扫读。

不要用不同颜色标示同类任务，也不要用相似颜色标示完全不同的任务。颜色不应随机显示，但应暗示表示不同颜色标签的含义。

Lighthouse问题跟踪工具每项右侧采用颜色标签，用户可快速浏览列表。

Goplan面板采用类似颜色标签标示不同项目，比如任务、备忘、文档，用户可快速找到所需内容。

6. 选项个性化

许多应用工具为个人或企业提供个性工作空间。个性化可以让用户感觉更自在。比如提供选项允许用户自定义工具界面外观和风格，让用户选择颜色基调、链接颜色，背景等。即使定制内容很少，用户也能创建自己的网页。

Campaign Monitor允许用户为自己的帐号选择色彩基调，上传商业LOGO，帮助企业将品牌色彩注入正在使用的网络应用工具。

个性化无疑是绑定客户最简单、最有效的方式。但要注意，个性化选择不应当牺牲应用工具的核心功能。无论用户如何定制，系统应当始终能够执行功能以满足用户期望。

根据用户是新手或者高级用户提供不同层次的定制服务，是折中网站核心功能和用户界面的有效方法。应当允许用户将帐号恢复到默认状态或上次设置。

Twitter 允许用户定制个人信息页面的背景及颜色，用户可以制作独特站点。

7. 帮助信息吸引注意力

每个网络应用工具都不一样，都有自己的工作方式。如果某个特定元素的功能不够直观，可以提供简短信息，帮助人们使用。如果用户不确定该做什么，帮助信息应引人注目。一种方式是使用颜色引起注意——比如在边栏（sidebar）放一个黄色即时贴形式的帮助信息。

Goplan把帮助信息放在像即时贴一样的亮黄色色块中。颜色明亮，确保用户会注意到。

如果希望既能满足普通用户需求，又不会过占用过多空间，也可以在需要解释的设计元素旁放置醒目的视觉图形（比如小图标）。比如就像Wishlistr.com一样，引导用户注意搜索引擎的新特性，更新特性或者有用特性是合理的。

Wishlistr使用灯泡引起用户关注系统现有搜索功能。

8. 慎重设计反馈消息

用颜色区分不同的提示消息。通常用绿色提醒用户操作成功，用黄色警示或提醒用户出错。也可以用黄色标示警示信息，用红色标示报错信息。

Mailchimp有效使用颜色表示报错信息。

为每种提示消息配以独特图标，无须用户阅读，即可直接传达含义。比如

勾号可表示操作成功。三角形里的感叹号代表警示。用户会立刻知道到消息传达的含义并引起注意。

GetSignOff提示消息右上角有关闭按钮，用户能关闭消息。

如果提示信息会在页面上停留一段时间，应当提供关闭消息的方法。

9. 使用tab导航

许多网络应用工具的主导航菜单采用tab形式。Tab不仅美观，在可用性方面大有益处。

Freckle在时间输入菜单子导航中使用tab导航。

Basecamp应用工具的主导航是标准tab菜单。

若将菜单做成tab形式，几乎每个人都能理解它是什么，如何运作，因为视觉隐喻强烈、明确。当前页或部分也易于浏览。用户知道菜单在哪里，如何操作它们。


10. 加深模态窗口下的背景

有些应用工具中，你希望只显示一小部分信息或者快速输入框，而不用占用整页。有些开发者把这种消息放在模态窗口中。模态窗口指从当前页面跳出的小窗口，用户需要与之互动，从而继续。

使用 Squarespace网站生成工具编辑时，背景变暗，焦点转移至编辑窗口。

为了更加突出模态窗口，可以加深窗口下面的内容。背景颜色较深，可以屏蔽内容噪音，模态窗口成为关注中心。这类似于窗口周围使用阴影效果，但在引导注意力上更强大。背景颜色较深，同时暗示了窗口下面的内容不可操作，用户应和当前窗口发生互动。

11. 光箱（lightboxes）和幻灯(Slideshows)

一些应用工具包括用户会浏览的大量图片。对用户或者服务器而言，逐页展示每张图片不是最有效的方式。访问者需要前后页切换，而服务器要承担本可避免的额外访问负载。

SmugMug使用光箱放大图片。

此时可使用光箱和幻灯。无须载入新页面，光箱和幻灯即可显示图片。例如，光箱方式以模态窗口在当前页面上方放大图片，背景加深，用户将注意力集中到图片。噪音干扰降低，提升视觉体验。

12.注册表单简短

注册表单是我们与潜在客户之间的最大障碍之一。表单越长，用户成为网站会员或收费用户付出的努力越多。要减少障碍，必须加快注册进程。去除选填项，只留下注册所需核心要素。选填项可以在用户成为会员后再补充。

创建Evernote帐号很容易，只有少量的内容需要填写。

结论

Steve Jobs说过：“设计不仅是视觉和感知，更是如何运作。”（Design is not just what it looks like and feels like. Design is how it works）实际上，如何执行功能，并便于用户使用决定了网络应用工具的可用性和整体效益。

这样的翻译才是牛掰

这样的翻译才是牛掰，崇拜一下：

On the sixth day,God created man in his own image.
第六日讫 神之造人 赋以己貌

And now it's up to us to figure it all out.
时至今日 人之为人 自斟自酌

Right...wrong... Good... Evil...
正之为正 误之为误 善之为善 恶之为恶

To decide what drives our actions.In each of us is the capacity
决断之力 发自人心 显于外表

So what is it, then, that makes some choose selflessness, The need to devote themselves to something greater,
敢问缘何 抉择各异? 投身奉献 立身扬名 自私之人

While others know only self-interest? Isolating themselves in a world of their own making?
自私之人 与世隔绝 独处一己幻境

Some seek only love, even if unrequited,While others are driven by fear and betrayal.
求爱之人 不计回报 沦陷之人 惧与叛者

There are those who see their choices .As dark proof of god's absence,

纠其一生 神之无心 冷漠残酷

While others follow a path of noble destiny.
亦有仁者 命中注定

But in the end, good, evil, right, or wrong...
终于高尚 善恶轮回 对错交织 终我一生

What we choose is never what we really need.For that is the ultimate cosmic joke,
抉择使然 我心所向 永不可得 抉择使然 我心所向 永不可得

The real gift that god has left behind.
上帝所赐 天赋异禀

Heros第三季13集，传说中的伊甸园字幕组

网站搜索结果页建议

网站搜索结果页建议

原文：Tips on site search results pages
作者：Graham Charlton
翻译：october
校对：toMMy

Grok.com网站介绍过电子商务诀窍，这次介绍如何优化网站搜索结果页。

Daniel McGuigan认为，访问者通过导航、登陆页或者首页都找不到需要的东西时，搜索框是访问者能在网站上找到东西的最后一条路。

的确如此，但如果访问者已经有了明确产品，也会一开始就使用搜索框。

根据Coremetrics对英国网络销售的近期统计数据，八月份35%的访问者使用了网站搜索，搜索转化率7.4%。

以下是Daniel的网站搜索建议，其中也有些我自己的想法：

提供分类选项

给用户筛选选项，帮助他们缩小范围，从而避免结果列表很长。

我也推荐将结果页面的产品显示数量限制在10以内，甚至应当在提供筛选之前。

纠正拼写错误

拼写很容易出错，所以Daniel推荐要么提供给用户想要的内容搜索结果链接，要么直接显示出结果。

利用搜索数据改进

绝佳点子，网站搜索提供了更加了解访问者的有效来源。比如，观察客户输入的条目，将来可以用来优化搜索结果。

最近与网站搜索分析专家Lou Rosenfeld交谈时，提到了下面的内容。

为搜索失败提供选项

Daniel建议，搜索结果为空时提供类似产品，如果没有类似产品，就提供特色/热门产品链接。

以下是E-consultancy的建议。

搜索框中保留之前的搜索项。

显示搜索结果页面时，搜索框中保留原始搜索请求，便于用户修正搜索项目而不用重新输入。

显示非产品搜索结果。

有些客户会像搜索产品信息一样搜索退货或运费信息，搜索结果页面应当包含这类信息。

有些网站同时提供比如科技信息或者其他广告等相关内容，将其显示在网站搜索结果中同样是一个好注意。比如，在这个search for a car seat案例中，Mothercare网站提供了安装、法规信息文章。

何时采用何种用户体验研究方法？

何时采用何种用户体验研究方法？

作者：Christian Rohrer
原文：When to Use Which User Experience Research Methods
翻译：october
校对：toMMy

综述：
用户体验研究方法能够回答很多问题。将研究方法分解到3个关键维度和产品典型发展阶段，就容易理解何时使用何种方法。

用户体验领域总是伴随着大量研究方法，包括已经被证明有效方法，比如基于实验室的可用性研究，最近发展的研究方法，比如赞许研究（衡量美学诉求）等。

每个项目中不可能使用所有研究方法，但大多数设计团队都混合使用研究方法，深刻理解项目，更好的进行设计。关键问题是什么时候做什么事。为了更好理解何时使用哪种方法，应当从以下3个维度了解这些研究方法的差异：

• 态度维度vs.行为维度
• 质量维度vs.数量维度
• 网站或产品使用背景维度

下图是一些常用研究方法的维度表现：





每个维度可从每种研究方法回答的问题以及最适用目的种类区别这些研究方法。

态度维度vs.行为维度


该项区别可总结为：对比“人们说什么”和“人们做什么”（两者常常大相径庭）。态度维度研究的目的通常是理解、衡量、说明人们信念的变化，因此被大量用于市场部。

虽然大多数可用性研究应当依靠行为维度研究方法，但是采用自我陈述式信息的方法依然非常有效。比如，卡片分类法能深入了解信息空间的用户心智模型，决定网站最佳信息构架。调查能衡量态度或收集自我陈述式数据，追踪或者发现网站重要问题。由于多种原因，焦点小组对可用性目的帮助较少。

另一端是主要关注行为的研究方法，通常最小化自身影响来理解“人们做什么”。A/B测试仅更改网站设计，但为了观察网站设计对行为的影响，其他都不做改动，而眼动测试理解用户如何与界面设计进行视觉交互。

维度两端之间是最常用方法：可用性研究和实地调查，使用大量自我陈述式数据和行为数据，既可用于态度维度研究，也可用于行为维度研究。但我们通常倾向于行为维度研究。

质量维度 vs. 数量维度

质量维度研究和数量维度研究的本质区别在于，前者通常直接获取数据，而后者则通过诸如调查或者网络服务日志等方法间接获取数据。比如在实地调查和可用性研究方法中，研究者直接观察人们如何使用（或者不使用）科技来满足自身需要。研究者可以提问，研究行为，或者甚至可以调整研究草案以更好完成目标。数据分析通常不是数学问题。

相反，因为数据收集方法（比如调查工具或者网络服务日志）获取大量数据是数字编码形式，所以数量维度研究方法得到的观点源于典型数学分析。

由于两者之间的本质差别，质量维度研究方法更适合回答为什么或者如何解决问题，而数量维度研究方法更适合回答问题的种类和数量。下图阐述了这些问题在第一组维度中的表现：





产品使用背景维度

最后的维度与参与者在研究中是否/如何考虑使用网站或产品有关。它可被描述为：
• 自然或近似自然的使用产品
• 根据脚本使用产品
• 不使用产品的研究
• 混合型方法


研究自然使用产品时，目标是最小化研究干扰以便尽可能真实理解人们的行为或态度。许多人类学领域研究都尝试这样做，虽然观察时总会存在偏见。比如拦截调查和数据挖掘/数据分析技术。

产品使用的脚本研究（scripted study）是为了以具体形式关注信息，比如重新设计的流程。脚本程度可以根据研究目标有所差异。比如，为了得出可靠的可用性指标，基准研究的脚本通常都很严密。

针对人们不使用产品的研究不局限于使用和可用性问题，比如品牌或者更大的文化行为研究。

混合型研究方法采用产品使用的创新形式达到目标。比如，共享型设计允许用户与设计元素交互、重新安排设计元素并讨论他们为何如此选择。

表中的大多数方法可被用于一个或多个维度，为了迎合多重目的的需要，有些研究方法甚至在同一项研究中可被用于多个维度。比如，实地调查关注人们说什么（人类学访谈）或者人们做什么（延展性观察）；赞许研究和卡片分类法均可表现为质量维度和数量维度；有无脚本均可进行眼动测试。

产品开发阶段（时间维度）

选择研究方法依据的另一项重要区别是产品开发阶段以及相关目标。

1. 决策：产品开发的初始阶段，必会考虑新点子和将来的机会。该阶段的研究方法大相径庭。
2. 优化：进入持续优化选择的设计方向时，最终要决定“做/不做”。该阶段主要采用格式化研究方法，减少执行风险。
3. 评测：某些情况下，如果网站或产品可供足量用户使用，就可以开始衡量做得是否出色。

下表总结了这些目标，列出了与相关的阶段典型研究方法：




艺术还是科学？

虽然许多用户体验研究根植于科学实践，他们的目的并非纯科学，依然需要根据利益相关者的需要进行调整。因此，本文这些方法描述是通用准则而非严格划分。

最后，工作成功取决于对提高网站或产品用户体验方面产生多大影响。这些分类能帮助你在合适的时间作出最佳的选择。

网站地图可用性

翻译：october

校对：toMMy

原文：Site Map Usability

概述

网站地图最新的用户测试表明，网站地图作为次级导航助手依然非常有效。在我们长达7年的研究中，网站地图比过去更加容易使用。

通过信息空间的视觉表现帮助用户理解可以去哪，是最老的超文本链接可用性原则之一。网站地图的可视化效果能对网站或者企业内部网的主要导航特征提供有效补充。

网站地图最主要的好处在于让用户一眼就能了解网站概况。它使用一个单独的完整页面来表达网站信息构架（IA）。如果设计良好，该概况会包括层级信息，但信息量又不会多到让用户无所适从。

我们将网站地图定义为充当网站指南的页面。我们研究的网站地图有很多表单形式，包括字母索引，动态图表，二维列表。网站地图包括一系列特征、外观、名称，包括“指南”、“概述”、“索引”、“目录”。

两项研究

为了发现用户如何使用网站地图，我们进行了两轮可用性研究，测试了一系列的网站地图设计，观察用户如何执行代表性任务。

共有30位用户参与了网站地图测试。两组，每组15位。

我们测试了以下20个网站，包括电子商务、营销导向、高科技公司、B2B、内容、非盈利组织和政府机构网站。

Sites Tested In Study 1	Sites Tested In Study 2
CDNOW (e-commerce) Documentum (high-tech product) Interwoven (high-tech product) Mercedes Benz USA (marketing site for cars) Museum of Modern Art (non-profit) New Jersey Transit (local transportation) Novell (B2B) Salon (online magazine) Siemens Medical Solutions (B2B) United States Treasury Department (government)	Administration on Aging (government) BMW USA (marketing site for cars) Citysearch Boston (visitor info) Harvard Pilgrim (health insurance) The Knot (wedding information/e-commerce) Marriott (hotels, with online booking) Scholastic (children's books) Texas Roadhouse (restaurant chain) TiVo (high-tech product)

　
在两组测试中，我们首先引导用户进入首页，指定任务而不特地提及网站地图。该项测试评估有多少用户会自发使用网站地图。在后续的每组测试中，如果用户没有主动使用网站地图，我们会特地要求用户使用。

测试1七年前就曾经进行过。对比测试1和测试2，我们能够评估网站地图可用性的长期趋势。

几乎没人使用网站地图

几乎没人使用网站地图。测试2中，我们要求用户了解网站结构，仅有7%的用户使用了网站地图。这个数字比测试1低27%。

好消息是用户在少部分需要的情况下能够找到网站地图。测试2中，我们要求用户“找到列出网站每部分的网页”时，67%的用户成功发现了网站地图。

保持简单

网站地图有两条主要可用性指南：
* 以“网站地图”为名，在网站中始终将其作为标签链接至网站地图页面。
* 使用静态设计。不要提供交互网站地图工具。网站地图应当直截了当的呈现（如果需要的话可以使用滚动条）。

这些原则从第一版报告开始就没有变更过。动态或者交互的网站地图在7年前曾导致可怕的失败，在测试2中依然带来了麻烦。网站地图的目标是让用户了解信息概况。如果用户要费力才能查看地图的不同部分，网站地图就失去了优势。

网站地图毕竟只是地图，它不应当成为另一个导航。

我们一再发现，用户讨厌非标准的用户界面。这些非标准的用户界面迫使用户为了某一个网站学习特定的网络使用方式。网站地图应当简洁，链接布局紧凑，用户一眼就能看到所有东西。

我们所要求的唯一有些难度的事就是使用多栏布局。测试2中，使用多栏布局的网站地图中，61%的用户轻松完成任务，在单栏布局的网站地图中，此数据为47%。

多栏网站地图效果更好，因为用户较少使用滚动条就可了解网站结构。在网站地图中使用长滚动条，用户容易迷路。他们的典型行为是会多次上下拖动滚动条，经常有意无意的错过内容。事实上，用户经常在开始时迅速浏览高层目录，然后回到页面上方进行更加细致的搜索，有时多次重复这一过程，目的一次比一次更加明确。相反，多栏布局网站地图便于用户快速浏览所有目录和子目录，便于在深入前把握全局。

网站地图为何而存在？

7年前，我们调查的50个网站中48%使用网站地图。今天，我们调查的150个网站中71%使用网站地图，我们Intranet Information Architecture报告中分析的56个企业内部网59%使用拥有网站地图。同时，两项调研进展过程中，大多数网站地图在一定程度上变得更加有用。

现在虽然流行出色的网站地图，但用户并没有经常使用。那么网站为什么要制作网站地图？因为它们能够帮助用户了解你的网站和你的服务。

我依然推荐使用网站地图，因为它们是唯一能为用户提供网站全局纵览的页面。也许有人主张网站导航提供了同样的功能。比如，一些导航提供下拉菜单，用户能看见网站每个部分的导航选项。但即使有这些菜单，用户也只能一次浏览一项内容选项。

网站地图允许用户在一个页面上看到所有可用内容，并能够将用户直接送至其希望的页面。网站地图同时也能够提供简洁的用户界面和有价值的内容，帮助用户在内容杂乱的网站上找到信息。然而网站地图并非万金油。网站地图无法解决网站结构的固有问题，比如混乱的导航结构，糟糕的版块命名，毫不协调的子站点。

如果网站地图需要大量设计投入，它们不会带来有足够的投资回报率。但由于我们的指南都要求网站地图保持简洁，制作一个网站地图不需要很多工作量，它会给一些用户带来帮助。更重要的是，它会在关键时刻帮助用户：用户在网站迷路，没有找到网站地图时也许会离开你的网站。

网站地图是次级导航栏，与面包屑导航一样。的确，支持网站地图的主张也类似于支持面包屑导航：
* 它们不会对不使用者造成影响
* 它们的确对一部分人有帮助
* 它们不需要花费过多成本

Caroline's Corner: 表单中的按钮——如何放置及命名

Source: Caroline Jarrett, 3 September 2008 Submitted by Caroline Jarrett

翻译：october

校对：toMMy

原文：Caroline's Corner: Buttons on Forms - where to put them, and what to call them

经常有人问我：“OK按钮放在Cancel按钮的左边还是右边？”

还有另一种常见问法，要不要把“Cancel”换成“Back”、“Previous’”，或者“Next’”。

问题简单，答案复杂

我很乐意告诉你：OK按钮放在左边。或者放在右边。或者其他容易描述和记忆的方式。正如表单中的多种情况，最简单的答案不一定真正合适。有谁希望答案总是视情况而定？可用性中视情况而定的问题太多了。然而真正的答案依然是“视情况而定”。但我们可以从“视情况而定”中转移视线，我来告诉你一些规则。

规则1：参考其他表单

首先应当找出用户使用的其他表单，看看那些表单中如何放置按钮。比如，Jakob Nielsen几年前指出大多数用户在其他网站花费的时间远多于在你的网站花费的时间。或者如果你在创建一个与Microsoft Office软件共同使用的项目，那么你的用户倾向于期望你的项目沿用Microsoft Office软件惯例。如果你的用户同时使用PC和Mac，情况会有些棘手，因为这两种操作系统有些冲突的操作习惯。做些市场调研，看看哪种操作系统对用户更重要，你需要仔细考虑表单应遵循哪种操作系统。

规则2：把按钮列放在对话结束的地方

用户点击按钮表示结束本次对话后，表单继续询问用户问题，这是最大的问题。用户提交后接下来就是系统的任务了。此处需要按钮，它通常被称为“OK”、“Send”、“Submit”或者“Next”。要点是点击后任务结束。我见过的一个常见错误是：把重要指示甚至所有问题放在最终按钮的后面。对用户来说那是隐藏区域。不要这么做。

规则3：决定是否需要按钮

不久之前，我写过一个专题“The Piece of HTML created just for me: Reset”。主题是“Reset”按钮对表单设计人员来说很方便，填写表单后点击“Reset”按钮清除输入内容。不幸的是，大多数“Reset”按钮都无用，对其他用户来说很招人厌。真的需要其他按钮吗？用户希望放弃辛苦填写的数据吗？如果不是真的需要，就不要用。

规则4：决定按钮是不是看起来可点击

有时表单末尾明确需要两个或更多可能的动作：也许是 “Send” 和 “Throw away my work’”或者 “OK” 和 “Cancel”。Luke Wroblewski将最重要的动作称为“主动作”，其他称为“次动作”。他和Etre公司就表单中如何放置“Submit”和“Cancel”按钮以及是否将“Cancel”做成链接或者降低其视觉比重做了一些测试。

令人惊讶的是，他们发现将两个按钮放在一起的方案效果都差不多。仅有一例失败，就是将“Cancel”放在表单下方，将“Submit”放在远离右边的地方。（题外话：我曾期望将“Submit”放在表单下方，“Cancel”远离右边放置的效果等同于将按钮放在一起的方案，但出于一些原因没有测试该方案。）

就完成表单的时间而言，按钮看起来相似的方案效果最佳。降低Cancel按钮的视觉比重或者做成链接的方案会花费用户稍长时间。然而，重要的是用户倾向于以下方案：“用户在Cancel视觉比重较少的方案中表现得最佳，即使这些方案会降低他们的速度。这表明用户更关心避免数据丢失，而不是快速提交表单。”我认为几乎在所有案例中，精确度和用户舒适度比表单填写时间稍胜一筹。因此我会减少此动作的视觉比重——但也许会带来灾难行为，比如说“Throw away all my data（清除数据）”。

该规则有个补充：确保按钮看起来可点击。我经常使用网络银行，按钮仅是一个加了文字的普通橙色长方形，每次我都感觉困惑，没有阴影效果突出按钮，让其看上去可点击。如果你觉得缺乏创意，尝试搜索“web button（网站按钮）”图片，从特别难看到非常酷，应有尽有。或者更实际的办法是看看你最喜欢的网站是怎么做按钮的。

规则5：用标签说明按钮的功能最后一步是决定按钮应当配以什么样的标签。我经常看见以“OK”和“Cancel”标识的按钮，并没有清楚表达出按钮的含义。设想经常出现的Cancel对话框：你请求系统结束任务，系统跳出标识为“OK”和“Cancel”的对话框。“Cancel”的意思是结束任务，还是取消刚才的请求？请注意，没有规则表明“只能以一个词标识按钮”，很明显，也没有规则表示“必须要用‘OK’和‘Cancel’按钮”。

表单设计应当避免的常见错误

作者：Philipp Lenssen
翻译：october
校对：toMMy
原文：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时能一眼看到）一样设计表单，而不能像设计书那样（躺在椅子里有很长时间阅读一本书）。

网站搜索框设计诀窍

翻译：october
校对：toMMy
原文：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网站一样，在搜索框中写入文字解释功能。点击搜索框时，文字自动消失，你可以自由输入搜索项。




如果搜索框中的解释文字无法消失，用户会感觉沮丧，他们必须删除文本再输入搜索项。值得庆幸的是，很少有网站犯这个错误，而迪斯尼英国网店恰恰犯了这个错误。

网络排版十大错误

作者：Steven D.
翻译：october
校对：toMMy
原文: 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属性。这会为以后修改避免很多麻烦。