通向完美作品网站十步骤

通向完美作品网站十步骤

原文：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聚合等。可能性有很多，有项目展示作品和没有项目展示完全不同。

关于搜索无结果提示的调查

做了份关于搜索无结果提示的调查。

主要针对搜索无结果时，大家更加倾向哪种提示信息。

列出的提示信息主要来源于Google、Baidu、Yahoo、Amazon等站，分别有：

• 共找到0条结果！建议您更换搜索词重新搜索。
  
• 找不到和您的查询"XXX" 相符的结果。
  
• 对不起，没有找到与XXX相关的结果。
  
• 抱歉，没有找到和您查询条件相符的"XXXf"信息。
  
• 抱歉，未找到与“XXX”相匹配的信息。
  
• 抱歉，没有找到与“XXX” 相关的结果。
  
• 未找到相关信息。
  
• 共找到0条结果。
  
• 其他

目前票数比叫多的是第一项。根据小二的看法，由于心理模型的作用，基本上后几项都不会得到太多关注，选的人自然也比较少。

问卷地址：http://spreadsheets.google.com/viewform?formkey=cHhDT3o5eURoLVBZd1dUeDhKdmViVmc6MA..

创新不是空降兵

产品要创新不是在设计过程中出现的，而是在需求阶段就已经做好准备。

 

了解用户如何操作，为什么这样操作，从而改变用户操作。

 

满足前两点，会做出有价值的产品，满足这三点，会做出有创新的产品。

 

 

 

用户体验需要知道的事

1 留有余地。

 

2 界面最重要的是什么？内容，而不是操作。

 

3 操作直观从不以牺牲界面简洁为代价。

 

4 不确定用户下一步要做什么，什么都不要做（不要强迫他们空降到排序页面或者编辑页面）。

 

5 控制屏数很难？给导航瘦身，删减文章内容留下精华，去掉可有可无的图片。还不行？不要妄想在一个页面做太多的事。

 

6 迷失在各种方案里？要么不了解需求，要么不了解用户。

 

7 找不到合适的方案？要么不了解需求，要么不了解用户，要么妄想一劳永逸。

 

8 相濡以沫，不如相忘于江湖――新功能听起来很好？不知是否需要？一旦开始考虑是否需要，舍弃它吧。

 

9 万花丛中过，片叶不沾身――透析，触类旁通，精华采集得不露痕迹。

 

10 什么都略懂一点，生活就会多彩一点――多玩，多观察，多思考。

 

良好用户界面设计的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）实际上，如何执行功能，并便于用户使用决定了网络应用工具的可用性和整体效益。

排序

排序有几种方式？——目前大致想到的如下：

1. 拖拽
可以适用于多层级关系。但并非所有使用者均可能使用。

2. 输入序号
在同层级的排序上表现力出色，但设计多重层级时，很难让用户迅速理解。

3. 通过上下左右按钮实现
上下按钮适用于同层级排序，左右按钮适用于级别之间的调整。表现力强，容易理解。但一旦待排序项目过多时，则会遇到阻碍——效率比较低。

4. 选择
操作稍显复杂，没有什么特别突出的优点。但是比较容易迎合复杂需求的需要。

这4种可以演变成更加高级的形式或者混合使用。

当下在调整排序功能，由于需求复杂，导致操作上很多不必要的问题。目前最倾向于使用拖拽，因为可扩展性强，操作简便。无奈考虑开发成本，必须在规定时间内完成，导致无法预留充足的时间，只能考虑替代方案。

现在的替代方案采用了将层级调整和排序相分离，在排序上必须先选择待排序的层级，方能进行排序。原型效果虽然尚可，但尚待时间检验。

需求决定了产品的表现形式。看似简单的需求，在流程和交互表现中会引起各种各样的复杂性。

帐号的创建和登入

帐号的创建和登入

帐号的创建和登入对用户来说是操作负担。

尤其是创建过程。有的网站需要用户回答几十条设计用户隐私的问题，看起来与网站服务毫无关联。冗长的问题总是让人感觉厌倦，私密的问题更加让人反感。网站要这些数据做什么？用户会放弃注册。若为了特定目的注册被迫填写不愿意提供的隐私数据时，很多用户选择填写虚假数据。

帐号登入看起来只需输入登录名和密码。可是为什么要登入？登入前后会有什么样的差异？用户讨厌必须登入才能使用服务。

那我们为什么要用注册和登入来阻碍用户？为了实现商业目的。把浏览者转变为顾客是大多数商业网站的主要目的。我们需要帐号的创建和登入，我们也需要用户愉快的访问我们的网站、对网站留下深刻的印象，成为我们的会员。

所以，我们的工作是让一切变得简单。负担越少，对用户的阻碍越小，对我们商业目的的实现帮助越大。

帐号创建应注意以下要点：

1 创建帐号前：

1.1 吸引用户注册的第一要点即为：理由充分、有说服力。

网站的特色和价值定位在哪里？用户可以得到什么？用户可以在网站上做什么？
语言应积极友好、简单明了，视觉上应具有可读性并易于浏览（通过逻辑分层，字体变化，图标表征以及站点导视等方式）。

1.2允许用户随时注册

鼓励用户注册、登录的最佳方式是通过情境激发。当用户通过某一情境开始了解网站后会更倾向于注册。允许他们可以随时随地成为网站会员。但不要再用户输入大量数据后告诉他们必须注册或登录才能发布信息。需要用户注册或登录时提供路径。

2帐号的创建：

2.1 指示注册步骤，标识帐号创建进度，简化注册过程

谁喜欢没完没了的回答问题？对用户而言，仅是一种达成目的前一种耗费时间和精力的机械运动。

我们应帮助用户尽快通过这个过程，通过步骤预览暗示用户需要多久完成这个步骤。

最理想的方式是通过循序渐进的方式鼓励用户逐步完成帐号资料的填写，优秀的网站可以近乎隐化的方式让用户在完成目的任务时不知不觉完成整个注册流程。第一步只需简单的创建帐号（创建帐号名、密码）即允许用户使用基础服务。

允许用户跳步并提供路径。

完善用户资料时区别选填项和必填项并将问题分类，便于用户花费最小的精力跨越障碍。

2.2 创建过程中给予明确提示信息

光标聚焦时显示提示信息，聚焦转移时验证填写信息。

完成页面所有输入域，点击动作转移按钮时验证整个页面信息并给予字段错误提醒。

用易于识别的图标区别提示信息、验证通过、报错信息。

3 帐号创建后：

3.1让新会员迅速融入，给予使用指引。

比如成列出待完善模块并通过高亮显示某模块或区域引导用户逐步完成各模块。但若用户多次登录都没有完成对应模块，考虑取消高亮显示。

3.2帮助用户建立在网站的社会关系，增加用户黏度。

帐号登录应注意的要点：

1 登录应当是完成任务的最后一步，永远不要把它作为完成任务的第一步。

登录对用户来说应当是使用网站的辅助手段，而非主要障碍。无论用户习惯于登录网站即登录还是习惯于以游客方式浏览，不要强迫他们。

2 登录域提供密码查找功能。

密码提示问题不应当是必填项。如果用户会丢失邮箱，用户也会忘记那些随手填写的密码提示答案。我们的宗旨是减轻用户负担。不是让用户记忆各种各样的账户名、密码以及密码提示问题的答案。

3 允许用户随时随地均可登陆帐号。

不仅仅是在页首提供登录链接。需要登录的重要功能处显化登录入口，并不要企图在用户登录后把页面统一引导至帐号管理页面，他们会迷失方向。如果用户在某个流程中，登录完成后把他们送回流程中去。不要破坏用户的操作线程。

帐号创建及登入的误区：

误区1：必须首先登录才可进行多种操作

Cisco网站要求用户必须首先登录才可看到待售的高尔夫产品，因为不是所有产品都面向大众。一些仅限员工购买（员工拥有折扣），一些仅限认证Cisco工程师。Cisco需要根据访问者身份区别展示不同产品。

而多数网站无须验证身份即可进行多种操作。

用户喜欢第二种方式。他们讨厌简单的操作（比如下载白皮书或者为选择商品付款）还需事先登录。一个在线购物者近期在可用性测验中表示：“我只想买东西而已，不喜欢和这些家伙建立什么关系。”

一开始就登录在旅游业闻所未闻。Midwest航空无须注册即可购买机票。顾客可以游客身份在线购买。当然，他们依然需要输入姓名、账单信息，但不会被迫创建用户名和密码。

误区2：过早请求登录

Cisco网站在展示产品前要求顾客登录（新顾客必须注册）。若在顾客点击“员工折扣”或“验证”链接后再请求登录，会降低购物者的受挫感。

Amazon就此创立了黄金标准，不到最后一刻不请求用户登录。点击“我的账户”后，用户在验证前可看到完整的帐号支持清单。某些情况下，比如点击即可购买，用户从不需要登录。cookie已经足够。

误区3：注册过程中没有阐述用户会得到的好处

注册对用户而言是负担。他们必须回答问题，甚至有些问题与当前任务毫无关联。他们必须记忆创立的用户名、密码，担心泄露邮箱、个人信息。通过长时间用户观察，会发现大量用户抗拒注册。

用户注册后会得到什么？Midwest航空在登录页面右方写明：用户可登录常用帐号预订获赠旅行，更改24小时内预订内容等好处。

误区4：隐藏登录按钮

Netflix网站的常客会直接登入个人首页查看状态信息、电影推荐。但清除cookies后或使用不同电脑时，则需登录。

Netflix网站的默认页针对潜在顾客出售网站产品，其注册按钮非常显眼。不幸的是，很难发现用户登录链接。这导致Netflix网站电话客服中心经接到询问电话，直到他们将用户登录链接做得更加明显。

误区5：没有把“创建帐号”或者“取回密码”做成按钮或链接

Spirit航空网站提供便于用户创建帐号、取回密码的方式，但指向这些功能的链接被藏在下拉菜单中，看起来似乎不可点击。对用户而言，他们看起来像说明文字。一些用户没有意识到这些功能就在眼皮底下而是在网站上到处搜索。

误区6：没有在关键位置提供登录功能。

Jared M. Spool观察到许多用户倾向于在最后一刻登录，也许是因为用户不希望记忆登录信息导致分心或者也许是因为用户专注于当前的任务。若登录对用户有错帮助时（比如组织用户重复输入账单信息），他们会突然之间很乐意登录。

优秀的网站预测到这些情况，用户可便捷的登录。Orbitz网站允许用户先进入购买程序后给予简单的登录选项以获取航班所需参数，比如用餐、通道、窗口信息。

误区7：注册时要求用户填写过多信息

常见设计误区在于考虑一旦用户开始填表回答问题，网站希望用户填写事它们不能获取的一切信息。（Cisco网站长达4页的注册进程中，要求用户指定搜索结果列表的显示数量。）

但用户希望回答的问题越少越好。优秀的网站仅要求用户提供用户名和密码（若网站使用用户邮箱并已有相关记录，则仅仅要求密码）。其他资料或个人信息尽在以后需要时请求用户填写。

误区8：未明述用户信息的用途

尝试下载工作需要的技术文档时，一位用户问道：“他们为什么需要知道我的宅电？”

显然，用户很敏感。Virgin America航空公司的设计师这样解释他们为何需要用户宅电：“以防需要联系的情况，我们至少需要一个电话号码。”请求用户手机、宅电、公司电话时，告诉用户原因。

Midwest航空公司表述得更加明确：“请提供电话号码，我们会在改变预订航班时通知您。”谁不想在这种情况下得到通知？

简而言之，我们需要让用户在注册前知道我们是做什么的，能为他们带来什么。注册时我们需要帮助用户尽快完成表单填写这一过程。注册完成后需要及时引导用户，把他们转变为真正的深度用户。不要让用户感觉困惑和困难，用各种手段激发他们的兴趣，引起他们的自发注册行为。无论用户是否是网站会员，都不要用登录把他们挡在门外。如果用户感觉受挫，需要付出代价的只会是我们自己。


参考资料：
Jared M. Spool：Account Sign-in: 8 Design Mistakes to Avoid
Alexa Andrzejewski：《Patterns for Sign Up & Ramp Up》

Back To Top

Back To Top链接是页内链接的一种。同大多数起导航作用的链接不太一样，它不会将用户引导至新页面，而是回到原有页面页首。

很多网站认为Back To Top链接是友好链接，页面较长时提供Back To Top功能可帮助用户节省时间，避免鼠标滚动拖动垂直滚动条。

然而很多用户体验专家给予了反对意见。

Jakob Nielsen主张避免页内链接（Within-Page Links）。

理由在于页内链接违背用户思维模型。

网站尽量不要使用页内链接，道理同不建议使用PDF文档和点击mailto链接没有任何警示就突然冒出邮箱一样。

用户对点击链接已经产生了非常强烈的思维模型，由以下元素组成：

1 链接会引导至新页面。
2 点击后原页面会消失。
3 窗口加载新页面会取代原有页面。
4 首先看到的是新页面顶端。
5 倒退按钮（Back）会引导至之前浏览的页面。

由于几乎所有链接都如此，用户强烈认为网络都是这样运作的。该思维模型意义重大。

页内链接破坏了用户对链接形成的思维模型所有5个要素：

1 页内链接目的在于窗口滚屏而非指向新页面。这让用户感觉疑惑：用户假设将得到新的信息，但若在点击页内链接前使用滚动条，他们会看到已经看过的内容。

2 原页面并不消失，依然出现在窗口。然而，由于用户认为已到达新页面，他们会尝试区分“新”信息和原信息到底有什么不同——很明显，这是徒劳的。

3 浏览窗口不会加载新页面：依旧是同样的数据，只是位置不同而已。

4用户常发现自己在页面中间而非在页首，没有任何导航条或者其他期望的页首设计元素。

5 点击倒退按钮不会引导至前一页，而是同一页滚屏前的状态。这会造成点击页内链接前使用滚动条回到首页用户的加倍困扰。

Jakob Nielsen认为可以使用页内链接的情况为：

事先考虑用户对网站链接的期望。比如使用mailto链接时明确指引用户点击该链接用户会启动邮箱（比如XXX@XXX.com或者“邮件联系售后服务”）。

必须使用页内链接时亦需要说明点击链接后的结果。

若事先告知，页内链接有3项可接受用途：

1 以字母顺序排序的页面很长时，页首可显示排序字母，并链接至页面相关处。

2 FAQ中可在页首列举所有问题并链接至页面相关处。

3 少数其他情况下页面可以以内容列表形式开始，链接至页面下方相关章节。

这些例外共有一种格式：页面过长，页首上方给出总览，链接至用户需要查看的相关章节。

但即便如此，最好尽可能避免页内链接。只有在页面极长的情况下，节省用户时间才比避免让用户感觉困扰更重要。

当然，由于交互（Interactivity）和导航不同，因此只要用户看来并非是指向新页面的动作，同一页内产生交互当然没有问题。

而“Back to top”链接则可以被避免，因为滚动条可提供一样的功能。通常，单一、常用的交互方式较为合适，避免用户思考为了达到相同目的需要思考选择何种交互方式。思考时间常超过采用捷径所需时间。（页面特别长时例外，但我们首先就应当避免出现特别长的页面。）

也有其他人反对“Back to Top”链接。

他们认为：

Back to Top链接并非总是有用。比如页面或文章很短的网站并不需要。由于整个页面始终可见，用户不需跳回页面顶部。若这类页面出现“Top”链接，点击不会产生任何作用，让人气恼。当前多种屏幕分辨率使得该链接不可用、不必要，这是需要设计是不是用它的另一原因。因此，页面较短的情况下不建议使用Back to Top链接。

同时Back to Top链接存在的重大问题在于：对浏览器导航按钮会产生影响，对浏览历史不利。Back to Top链接和其他链接一样是锚点，点击浏览器“后退”按钮会引导用户到现浏览页面底端，而非前一页。

其他反对意见有：

1 Back to Top链接分散了页面实际内容。网页包括了太多组成元素，增加新的元素会让存在认知障碍的用户使用起来更加困难。

2 页面打印时Back to Top链接没有任何意义。（可通过CSS来阻止打印时显示，但大多网站不会这样做。）

3 Back to Top链接阻碍用键盘跳转链接的使用。键盘可替代鼠标点击，对于一些用户尤其有用，比如肌肉运动障碍者。此外很多人更倾向于使用键盘，因为比使用鼠标更快捷。

4 同时，使用Back to Top链接扰乱了基于语音的用户代理。没有人愿意在使用语音合成器听网页内容的时候在每个段落最后听到“Back to Top”。语音类用户代理通常有自己的链接阅读模式，按顺序阅读网页链接。

5 每个浏览器都有一些移动到页首的内置工具（比如使用Home按钮）。

6 Back to Top链接具有误导性，用户也许不会回到整个页面的顶端。也许链接仅指向文档内部。（因此“To Top”或者“Start of page”更适宜。）

7 “Top”意义模糊。什么顶端？若第一次看到这个词，它究竟是指是页首，网站顶端还是其他？（而每天都有无数人有生以来第一次使用网络。）正因为这样，“Start of page”表述更合适，但少有人用。

8 Back to Top链接在整个网站中并非始终显示。

那么到底是否需要Back to Top链接呢？

我们的结论是：

首先避免页面过长。页面较短时，Back to Top链接不仅无用，而且给用户带来困扰。

若出于某些原因页面无法精简时，可以提供Back to Top链接。此时，该链接传达的是友好的用户体验，也印证了优秀设计源于关注细节这一理论。

当然，其他页内链接也并非需要绝对避免。可用性领域中，没有任何一条规则可以通用于所有情况。

美国政府研究页首使用锚链接（study done by the US government）时得出结论：

信息量丰富的网页页首使用页内链接可帮助用户直接找到所需信息，减少拖动滚动条和浏览时间。可用性测试中，当用户必须拖动滚动条或浏览大量内容来查找信息时，常常失败。

同样重要的是，这些锚链接帮助用户立刻明白页面包括的信息要点。

Back to Top链接的位置：

Back to Top链接最常出现在页脚处。一些设计师长将其放在页脚左端，一些出现在页脚中间，也有在右端的案例。将该链接放在内容区域左端，直接呈现在文章下方的情况也常见。

Back to Top链接还常被用户FAQ、帮助和网站地图，有助于分割章节或段落，帮助用户快速回到有主导航的页首。

Back to Top链接的创建：

创建“Back To Top”链接时，大多数情况下定义一个空锚点，放在 ＜ｂｏｄｙ＞ 后即可。


然而，老的浏览器，特别是过时的浏览器难以识别这种标记。另一种解决方案是采用真正的anchor，明确定义并放在 ＜ｂｏｄｙ＞ 后。


更新：能够达到相同目的另一种方法是使用wrapper或者header ID，由于它避免了多余标记，因此受到推崇。采用wrapper ID的div-container，可使用以下标记：


当然，链接本身不一定是文字，可以是图片、按钮或其他任何元素，前提是必须符合用户期望，避免用户产生困扰。

Back to Top链接的措辞：

确保访问者能迅速理解链接功能，不会感到困扰。比如“返回”（Return）就不合适，用户无法立刻理解点击后会返回到网站首页、浏览历史中的前一页还是页面顶部。

注意：

设置Back to Top时，应当明确表达的含义是回到首页还是回到页首。“Home”链接与“Back to top”链接两者皆然不同。如果决定采用“Back to top”链接，确保访问者能立刻理解它与“Home”链接的不同之处。

错误：图片看起来像首页链接。


首页链接。

页脚首页链接的另一个例子。


案例：







无法理解为何遥控操作被放在此处：本应可点击，事实却不能。

此处Top图标随着垂直滚动条移动。

Top链接为导航的一部分。看起来很好，但乍看会有些困扰。


参考资料：
1 Jakob Nielsen：Avoid Within-Page Links
http://www.useit.com/alertbox/within_page_links.html
2 Jakob Nielsen：Within-Page Links for AJAX, "Return to Top", Skip-Links
http://www.useit.com/alertbox/within_page_links_comments.html
3 A Short Story About “Back To Top” Links
http://www.smashingmagazine.com/2008/11/27/short-story-about-top-links/
4 “Back to Top” links considered harmful
http://www.cs.tut.fi/~jkorpela/www/totop.html
5 “Back to top” links (anchor links)
http://freeusabilityadvice.com/archive/24/back-to-top-links-anchor-links

网站搜索结果页建议

网站搜索结果页建议

原文：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网站提供了安装、法规信息文章。

Aspects of Design Quality

Jakob Nielsen 的 Aspects of Design Quality 再次说明了短板理论在用户体验领域的应用。

导航、内容、网站架构固然重要，首页可用性、搜索、可获取性、网络表现一个都不能少。

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

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

作者：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. 评测：某些情况下，如果网站或产品可供足量用户使用，就可以开始衡量做得是否出色。

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




艺术还是科学？

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

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