译序：这篇文章是可用性大师 Jakob Nielsen 在10年前总结的，到今天仍然受用。通过这个时间跨度，可以得出，可用性话题不是某个时代的产物，一些研究经验时至今日也依然值得借鉴。看似短小的10条启示中，融入了大量项目经验，这些内容也将继续指导设计者，在新的互联网技术推动下，创造出更加高质量的产品。

不要把它当作教程来看，它只是思想精髓的提炼。在各式各样的项目中，会遇到千奇百怪的情况，会跟各种角色的人一同协作完成目标。只有当大家达成共识，才能更好地提高效率，这10条启发正是纽带。

其实，这是10条关于界面设计的基本准则。之所以称之为“启发”，是因为它们来源于实际经验，而非枯燥的理论知识。

系统状态的可见性
应始终让用户了解当前发生的事情，并在恰当的时机给予反馈。

系统与现实世界的匹配
讲用户听得懂的语言，无论单词、短语还是阐述一些概念，把术语留给机器去读。遵循现实世界的准则，让信息表现的自然、符合逻辑。

用户控制和行动自由
用户在功能选择上犯错是常有的事儿，这就需要为其提供一个“紧急出口”，不必再通过额外的对话就能离开那里。提供撤销和重做功能。

一致性和标准
别让用户为不同的文字、状况和行为是否代表同一件事情而产生疑虑。要遵循平台的思想。

错误的预防
一个能在第一时间防止犯错的设计，总好过一堆漂亮的错误提示信息。应当在用户行动以前，就消除能诱使犯错的条件，必要时提醒用户确认操作。防患于未然。

系统去识别而不是让用户记忆
尽量降低用户对目标、行为和可见选项的记忆成本。不要让他们去记忆信息该从哪段到哪段。同时系统的使用说明应当可见，并在必要时，提供适当的提示信息。

灵活性和使用效率
快捷键——对初级用户不必特殊说明——但可以提高专家级用户的使用效率，这种交互兼顾了有经验和没经验的用户。同时允许用户定制频繁动作（译注：允许用户将使用频率较高的操作集中，或将功能按个人习惯排列）

简约设计美学
对话不应该包含不相关或不需要的信息。因为每一个额外的信息单元，都会一定程度上削弱原本相关信息单元的相对可见性。

帮助用户识别、诊断，并从错误中恢复
错误信息应当使用简单的语言（别用代码、编号，这种东西只有工程师能看懂），有针对性地阐明问题，并带有建设性地解决方案。

帮助文档
即使一个系统很棒，不用依赖帮助也能使用，但它可能仍然需要帮助文档。诸如用户重点任务方面的任何信息都应该能被方便地找到，并提供有简明的具体行动步骤。

via useit.com
image：www.gettyimages.cn

相关文章

1. “Back to Top”有害页面健康？
2. 一个关于“Back to Top”的小故事
3. 可用性工程的生命周期

这篇文章记录了Nearby Tweets改版的完整设计过程。Web开发者和商家期望借此获取些灵感。用户则更有兴趣找寻这些设计中所蕴藏的东西。当然，我希望能在文章结尾了解到你的想法和反馈！OK，我们开始吧。

故事的起因是这样地…

这一切开始于对Nearby Tweets的第一次迭代，目的是让当地的人与人、商家与商家之间能够通过一种简单的形式相互取得联系。

但产品开发向来不可能十全十美，只有不断迭代——产品好坏取决于用户认可。因此，借Uservoice的机会得尽我所能快地跟用户接触。通过Uservoice，用户可以针对Nearby Tweets的改版进行投票。

Nearby Tweets用户的主要需求

1. 默认地区
2. 保存关键字和地点
3. 令人懊恼的“抽屉”
4. 目录手册
5. 移动版本
6. tweets自动刷新
7. 屏蔽用户
8. 屏蔽地区
9. follow特性

选择哪些功能实现

尽管所有用户的请求都合理，但我得根据自己的资源和日程情况安排哪些可以实现。

移动版本要再往后排了
现在已经有web版了，所以对移动版持观望态度。因为需要更多资源和新一轮考虑，暂时没有精力。

目录手册也要往后排
市面上已经充斥了大量的Twitter目录手册应用。我的发展空间并不大，但在自动匹配地理位置领域，一直都是我的，现在是，将来也是。(参见 Twellow, WeFollow, 和 just tweet it)

其余的功能，一个个来
其余的功能需求都在我的日程上，在开始UI设计之前，我得把它们再梳理清晰一些。

缩小设计范围

为保持自己的路线，我为Nearby Tweets拟定了3个改版必备条件：

1. 获取用户反馈。在得到少量用户反馈后我迅速发布了Nearby Tweets的第一个版本，用这个有趣、有用的项目小试牛刀。通过这次改版我希望在设计过程中尽可能多地获取用户反馈。利用 Twitter，Uservoice等资源，进行私测和公测。
2. 把Nearby Tweets打造的更健壮。尽管焦点是第 一版的优势，但还是没有扩展的基础功能。这次Nearby Tweets将为用户偏好提供核心功能，以及高级搜索。
3. 保持 Nearby Tweets的简单。一直以来，我们努力保持Nearby Tweets的简单，并使它的体验更简化。

接下来，我制定了设计目标

允许用户随意查看Nearby Tweets，当需要时也允许他们调整。

将概念转化为UI设计
为保持Nearby Tweets的简洁，我拟定了2套UI设计概念：“Progressive disclosure” 和 “lazy registration”
在UI设计上实施Progressive disclosure

Progressive disclosure主张把高级和不常用的功能放在第二屏（不显眼的地方），使应用看起来简单易用，且不易出错——Jakob Nielsen

需要指出的是，第二屏可以被理解为把功能隐藏起来。

Tweet设置

对每条tweet来说，“谁说了什么”和“是谁说的”才是重点，所以我保持tweet表现成这个样子。

然而，用户还有其他需求，他们要求可以关注某人、屏蔽某人，甚至屏蔽地区。像这种高级功能就不能塞满tweet区域。Progressive disclosure的思想派上用场了。当用户把鼠标移动到每条tweet上时，上述3个功能才显示出来。就像这样：

地区和关键字的修改窗口

一个初次访问Nearby Tweets的用户也就是四处看看。所以在首页里只显示“Tweets nearby xxxxx about yyyyy.”就已经足够了。

但当用户想要搜索已经新地区和新关键字时怎么办？你会发现地区和关键字看上去像是可点的链接。当用户想修改这些信息时，点链接后会出现一个弹出层。

与其让用户看到搜索框及其他一堆筛选条件，不知所措，还不如只给个“Change”按钮，目的明确。点击按钮后进行下一步操作。实际整个区域都是可点的， 目的是为了增加用户的可点区域。

你会注意在地区弹出层里有个名叫“use the map”的按钮。在UI里设置地图有两个目的：一来，给用户位置感；二来通过Progressive disclosure提供高级搜索功能。

地区搜索利用交互地图完成

初窥地图会发现它就在Nearby Tweets的后面，营造了一个用户地区的虚拟环境，将tweet作为搜索结果不断滚动显示。

当用户搜索地区时，Nearby Tweets闪到一旁，地图就成主窗口了。这样做可以在地图不用时，巧妙地将它当作Nearby Tweets的背景，需要时再将其呼出。

用户偏好

作为Progressive disclosure的经典示范，用户可以添加保存地区、关键字，甚至更多偏好设置，目的都是让Nearby Tweets变的更好用。提高用户偏好，让我们看看它是怎么运作的。

UI中的Lazy registration
一个用户可能从不碰偏好设置，但仍能体会所有优点。要怎么做？Lazy registration是一种 growing UI trend ，它能读取用户之前的数据，自动完成已知信息的填写。

被动偏好
虽然Nearby Tweets不用注册，但它同样有一个偏好设置页面供用户配置。其中“lazy”这部分抽取的是用户喜好的集合。

• 用户每次切换地区后，都会被自动保存
• 用户每次搜索关键字后，都会被自动保存
• 主UI允许用户屏蔽某人 或某地区

默认地区
虽然用户可以设置默认地区，但通常都没必要。Nearby Tweets能自动获取用户地区信息，根本不需要用户动手，除非他想自定义。

处理用户需求

默认地区
Nearby Tweets也不是总能找到用户的位置，所以有时也需要手动覆盖掉默认地区。我想过很多方法解决这个问题，比如增加个“set to default”的选项在每个已保存地区旁边，但这可能会多出来很多链接，让界面变得冗余。

我决定在用户偏好中保留“设置成默认”这个功能。在那我用空间来展示这个选项。每个已保存的地区都可以被设置成“默认地区”。如图：

已保存的关键字和地区
我用“当前的”替代“已保存的”是因为它更贴切。关键字和地区的保存像是书签，但工作原理像浏览器历史。

Tweets的自动滚动
在控制新tweets刷新频率时有些困难。我很矛盾：如果太慢，会有用户觉得Nearby Tweets是不是没在工作；但太快，用户又没法阅读，过犹不及。在经过一些用户的测试后我发现，3秒这个速度正好。

并非每个人的阅读速度都一样，自动刷新频率可以当作用户偏好。据分析，除了3秒外，30秒、10秒、5秒和1秒也都很常见。

屏蔽用户

屏蔽地区
如何屏蔽地区又是个难题，因为要去比较tweet所在的地区与被屏蔽的地区。问题在于当用户屏蔽了“俄亥俄 州哥伦布市”，但发布者的地区是“哥伦布”。虽然人可能清晰辨别这两个是同一地区，但在电脑里，“俄亥俄州哥伦布市”并不等于“哥伦布”。

接下来如果我假设用户只想屏蔽精确匹配“俄亥俄州哥伦布市” 的地区，或者所有在“哥伦布”发布的tweets？为了使软件智能化，我让程序能够自动匹配城市名。然而，另一问题接踵而至，如果两个地区拥有同样的城市 名，就像“俄亥俄州哥伦布市” 和“佐治亚哥伦布”。那么，所有“佐治亚哥伦布”的用户想屏蔽来自“俄亥俄州哥伦布市” 的tweets时，就会屏蔽掉所有名为“哥伦布”的地区。如果它已经成为一个问题，我想我不得不竖起耳朵，听取用户的声音。

关注功能

相关文章

1. 一个提高了近10%转化率的改进
2. 开发iPhone版校友录
3. 在Google上看书

“好记性不如烂笔头”，儿时长辈总是如是教导我们，但这条法则放在今天，未必有些跟不上节奏。在这个信息爆炸的时代，想把看到听到的事情都一一记下，哪里来得及；机械的记忆并不能帮你解决“组织”问题，学会如何管理信息才是王道（当然，这里说的“组织”不是指Organization）。如果你已经能熟练地搜索引擎，这已经是一个好的开始，因为你发现动态地使用关键字，可以更快地找到想要的信息。而关键字就是一种索引标记。

如果这么说太抽象，那来想想你是如何为IM、SNS中好友进行分类的。首先考虑下为什么要给他们分类？其次，怎么分类？5-4-3-2-1，时间到！给好友分类是为了更快地在众多联系人中找到他，节省时间。在寻找联系人的过程中，分类扮演了索引的角色，它是帮你完成定位的一条捷径。再来说说我是如何分类的：我把所有联系人按公司、学校进行划分。刚参加工作时也曾按圈子把公司人分类，后来发现这么分太泛泛，我得一直记得某个人是什么角色，而相对来说，公司属性更明显且便于记忆。同学就不用说了，如果想再细分，学校就是最好的天然属性。这么看，公司、学校就是一种索引标记。

图书如何分类？细心的你可能发现现在很多书封面的角落里都会注上“上架参考：经济类”，这是为了让此书出现在书店合适的分类系统中，让读者更容易发现它。这是出版方和作者有意对图书进行的索引。这个分类产生的过程是：先有内容，后有分类。这里要联想到，在写博客时，顺序也应当如此，“出版”发布前，给它个“上架参考”，当然这个参考就是博客的分类目录、标签（Tags）了。分类目录是文章的范围，标签（Tags）则是经提炼后的内容关键字，是对标题的补充，帮助记忆。所以，标签（Tags）就是一种索引标记。

电影（DVD）、歌曲（CD）本身所带有的属性（如出版公司、导演、演员、歌手、歌曲名等）已经足够标识这个产品，再使用Tags打上标签对识别这个产品就没有太大意义了。有天然属性的信息，就用这些属性做索引，免得“脱裤子放屁——费二遍事”。

值得一提的是，分类并不单单是给人看的，同时也是给机器看的。用户不断地抽取、提炼核心关键字给计算机学习，让机器去做分类、索引这样的重复工作，帮助用户提高效率。

相关文章

1. 10条可用性方面的启发
2. “Back to Top”有害页面健康？
3. 一个关于“Back to Top”的小故事

我的设计原则就是在满足需求的前提下，尽可能的简化，简化，再简化。有一次跟一个朋友聊天，他问我作为交互设计师，你的三个原则是什么？我回答：1.以用户为中心去设计，让事情变得简单化；2. 平衡商业需求与用户体验之间的权重；3. 有下游意识，但不干涉下游二次创新。

“用户体验是门妥协的艺术”，一边是复杂的需求输入，另一边要做到简单的产品输出，这是件既麻烦又头疼的事。大框架想好了，抠细节的时候，问题就一个接一个的来了。如果内容为空，提交时如何处理？类似这样细节末端的问题，怎么啃下来？

Kent.Zhu同学的一篇《空搜索如何设计》倒是给了我启示。跳出来想一下，内容为空到底有多重要，给予用户一个怎样的反馈是恰到好处的呢？下面有5种处理方式，根据量级由轻到重分别来看一下：

1. 内容为空时“update”按钮干脆不可用，从根本上杜绝提交空信息的操作。实例：Twitter.com

2. 焦点进入输入框后出现“发送”按钮，内容为空时点击“发送”，输入框变色闪动，没有任何文字提示。实例：Facebook.com，白社会

3. 同样，焦点进入输入框后才出现“发布”按钮，不输入任何内容点“发布”，将回到如图默认状态，也是正面反馈。实例：校内网

4. 内容为空，点击“提交”后，在输入框下方打印一行提示文字。

5. 内容为空时“提交”后，弹出模态窗提示应进行何种操作。实例：中国人幼儿园

首先明确一个问题，当用户进行某操作后，应当给予反馈。这5种方式都实现了这个基本目的，然后再来看哪种更好。凡事有个度，恰到好处的处理应该是提示充分，又不显累赘。对比过后发现，第2种更合适于处理这种简单的话题式发布，交互上也不冗余。同时，它利用了人们长期以来形成的认知习惯——红色代表错误或停止。看一次就能明白，哦，原来没有内容是不让提交的。

另一个角度，目标用户的操作和认知水平如何。开始做幼儿园项目时，从调研结果看普遍认为用户是校友录的老用户，操作水平相对较低，太新潮的交互会对这群人造成挑战，由此保守的设计了第5种，指引式反馈。但后来随着走访深入，发现用户群的定位上出现偏差，不能把用户定位在校友录人群中，更多的是80后，而且这批人的电脑操作水平相比上一代人有普遍提高，再搞保守设计，似乎有点out了。设计得走在习惯前面，好的设计是等待人们去习惯的，优化的路还很长。

最近我的灵感被禁锢了，做东西没感觉，大脑一片空白，需要改变来刺激，我是个受刺激就能变形成工作狂的人。

更新：需要考虑违禁词判断，如内容含有违禁词，提交时输入框可以变为黄色背景闪动。毕竟捣乱的是少数，所以对这种情况也甭跟他友善了。

相关文章

1. Axure如何重用masters
2. “Back to Top”有害页面健康？
3. 一个关于“Back to Top”的小故事

不过想必大家都遇到过同样的情况，“用英文咋看咋漂亮，一换中文那种味道就表现不出来了…”。其一，因为中文是方块字，一行看上去很平；而英文有大小写之分，且词与词之间有间隔，看上去有韵律。其二，可用在网页中的中文字体太少，宋体、雅黑，用别的字体一来看着不习惯；二来不一定谁机器里都有那个字体；三来中文字体太大，动则就几十兆，不便于加载。

综上，中文网站中的文字运用要更考究。在注册表单中，水平右对齐已成为公认的方案，从统计中可以很直观的看到：

如果你已经读过之前一篇关于《设计表单的标签和输入区》的文章，应该对什么是标签“垂直顶对齐”，“水平右对齐”和“水平做对齐”有一定认识了。LukeW的书中列举的都是国外的例子，在《设计表单的标签和输入区》的回复中也有朋友提到在中文网页中的表现情况，比如“垂直顶对齐”比较少见等，对于我们常见的网页来说，确实很少，在我的30个样本中，只有百度的注册表单采用“垂直顶对齐”：

采用“水平左对齐”的也比较少，只有3个：谷歌、土豆和CCTV。其余26个都采用的“水平右对齐”。而其中盛大通行证的注册表单就很带有“中国特色”，用空格填充，让2个字的标签与4个字等宽：
（这个是反例，只是为了中文排列的整齐美观，没有这个必要。同时也作为对azero同学的回复）

要把中文网站设计得美观漂亮，除了借鉴一些科学的方法外，更要考虑中文元素的特点。不然就像用人头马的瓶子装陈醋，看着好，品着怪。

相关文章

1. 一个提高了近10%转化率的改进
2. 设计表单的标签和输入区
3. “Back to Top”有害页面健康？

有一些元素，看着很简单，设计起来却很头疼。往往这样的元素都具有一个共同的特点——变化多，表单的设计就是如此。你说见过20、30种以上不同的表单，我并不惊讶，产品需求、风格不同，必然五花八门。当然，换了设计师，表单的样式也可能会不同。然而，不能让这种情况继续下去，表单不是艺术展。不要让你的才华阻碍了别人的前进。

表单就是一扇门

古有大禹，三过家门而不入；今有用户，看到表单犯糊涂。难道大禹遇到的是这样的门？

表单，尤其是注册表单，就像一扇门，穿过他才能看到完整的产品。所以千万别做这种门，自己费事不说，用户也不会买账。这个设计最糟糕之处，就在于它有悖常理。好的设计应当遵循于其自然规律，这样一来符合人们预期，使用起来也就顺畅。

表单中标签与输入区的4种对齐方式

• 标签垂直顶对齐
• 标签水平右对齐
• 标签水平左对齐
• 标签在输入区内部

《Web Form Design》一书中对标签和输入区组合进行了一些研究，我整理了一份数据比较的表格：

标签垂直顶对齐

标签和输入区垂直依次排列，从而降低了对页面宽度的要求。如果你的页面没有富裕的空间用于标签和输入区的横向排列，这种组合是个不错的选择。

眼动轨迹表明，用户自上而下的扫描表单，焦点多集中在左侧一列，且跳动较小。

标签水平右对齐

标签右对齐和输入区水平排列，从而降低了对页面高度的要求。但与标签垂直顶对齐相比，由于标签文字左侧参差不齐，对问题的认知和扫描时间变的更长。

眼动轨迹表明，用户花了更多时间在看问题，输入框对他们来说很简单。

标签水平左对齐

标签左对齐和输入区水平排列，同样降低了对页面高度的要求。标签左对齐有利于用户对问题标签的扫描，但不利于填写答案，因为标签距离输入区较远，要重新定位到右侧输入框，确实要消耗一点时间。

眼动轨迹表明，用户花在定位输入区上的时间比看清标签更长，从而影响了整个表单的完成时间。

标签在输入区内部

这种方式虽然具备垂直组合的优点，但仍应谨慎使用。当焦点移入输入区后，标签消失，看不到问题，可能会忘记要回答什么，很郁闷，不得不清掉输入好的字，把“问题”还原出来。这种组合比较适合只有一两个输入框的简短表单，而且人们对他很熟悉，不用费力去记住标签提出的问题，比如：搜索框。

当你真的选择用这种表单的时候，注意，让标签和真实内容区分开来，一些约定俗成的做法是减淡标签字色，在后面打上“…”；下拉菜单则在默认选项两侧打上“-”，以示区别：

设计要有一条主线，贯穿于整个产品，别让人用着感觉像是几个设计师干的事。认真思考一遍，就会有新一层的理解，这对我的工作有极大的帮助。

相关文章

1. 一个提高了近10%转化率的改进
2. 标签水平右对齐更适合中文网站
3. 一个关于“Back to Top”的小故事

好了，重点不在这，开始侃我们今天的话题。
现在我顶不爱去中关村买东西，特压抑，购物心情大受影响，每次一进市场从门口就开始“大哥，是买相机不”，“大哥，买笔记本不”，“大哥…”，凡是路过的档口，肯定有人缠着你，更过分的还上手拉你。我能体会导购的压力和辛苦，这套路子初三毕业那会儿我就干过，但可有礼貌多了。

你们“太热情了”，真的，但我不需要，我只想安静的找我需要买的东西，买完就离开这个“是非之地”。在我需要的时候，帮我解释一下产品的功能、特性和价格，我会非常感谢你，会让我觉得这个店员非常专业，也非常尊重顾客，整个购物过程都很和谐，很愉快，下次我也愿意再来光顾。否则我会找替代品，比如其他商场，或是网购，或者…不买了。

如果把中关村看做互联网，把海龙大厦当成一个网站，那这个网站的体验真的是很差。我们为什么反复说“为功能和信息做减法”，“越简越妙”，用意无非是想为用户营造一个轻松愉悦的使用环境。尽量少的信息干扰，可以让用户更容易的找到自己想要的东西，如果能在必要时加以辅助，那将会使你的网站锦上添花。

一个网站的信息过度，就好比这段话上面20厘米处那张图片一样，甚至像那些“热情似火”的导购：找累了，用烦了；离开了，不来了；没有这些用户在，网站也就玩完了！对于这样的网站，我们需要给他做个手术，减掉那些碍人视线的东西。

“大夫，给”……咔嚓～

此文献给和我一样，对中关村电子市场购物环境现状感到厌烦、同时又在从事信息设计的哥们儿们，别让用户也用同样的话来指责我们。带动你的团队，一起努力来改善这一切。

（P.S. 图片来自华盖创意）

相关文章

1. 地图网站的需求功能与体验
2. Axure如何重用masters
3. “Back to Top”有害页面健康？

开个玩笑,这是一张1923年的北京地图.它虽不是本文的重点,但从现在开始我们就要往地图相关的内容上靠了.信息时代,啥玩意发展的都快,北京交通旅游图年年都换,甚至恨不得一年内出好几版,目的只有一个–”赚钱”,呵呵,貌似仔细看了看,除了小广告有所不同以外,实际内容有啥改动还真考眼力呢…人类是最聪明的,总能根据需要创造出新的东西来帮着自己偷懒.

没错,人是越来越懒,不过也越来越智慧,电子地图的诞生正在逐步取代纸地图.过去我们与纸地图交互的唯一方式,就是用手指在上面比划来比划去;而现在不但可以直接在地图页面上点选,还能通过输入关键字,甚至是使用语音来查找地点.只是找个地方,方式变化却如此之大,这是为什么呢?

不妨今天我们坐下来考虑几个问题:地图网站的需求,功能和体验.也思考一下高科技在带给我们便利的同时,还带来了什么.

需求篇

需求是一个产品诞生的原始驱动力.电子地图,地图网站或地图服务的兴起,除了依托互联网相关技术的发展外,更主要的是人因.我们可以罗列一下,是哪些想法在推动着它:

• 要更快速更准确的找到目的地;
• 不想再凭眼力去找,我知道地方的名字,只是不知道具体在什么位置;
• 从我这到目的地有多远,怎么才能过去;
• 我们碰头的地点是A地,我想知道周边有哪些场所,见面后想在附近吃饭;
• 懒的记途经的地名和换乘站,是否可以打印,或者能把这些信息发短信给我;
• 要下班了,想知道那条路回家畅通一点,交通流量如何;
• 目的地附近有哪些建筑,楼宇大概是什么样子的;
• 要是能实时提示我该怎么走,那就更好了(GPS辅助);
• 几个人不在同一个地方,但要能看到同一张地图;

先举这么多.看,我们的想法多五花八门,但它们都是为同一个目标–简单,准确,高效!这是电子地图和纸制地图相比,最大的特点所在.为了要实现这些需求,设计师和工程师们真的是下了不少工夫,要把北京地图,中国地图,甚至世界地图统统装到一个只有纸制地图1/6大的显示屏里来,也不是件容易的事(虽然现在看起来再普通不过).

需求是问题,那功能就是答案.怎么来回答这些问题?

功能篇

很多时候,我们想一口气把问题全答完.等等,喘口气,别答乱喽.功能也一样,要有针对性,别弄一大堆功能上来,看着挺”充实”,其实有用的没几个.作为设计师,先听好问题问的是什么,需求要的是什么,然后再做相应的功能.当然,如果能把几个交叉重复的需求,用更少个数的功能表示明白,我想用户会感谢你的,他们会为你的设计买单.

看看上面列举的需求,是如何转化为功能的:

这个是谷歌地图的一个截图,用简单的几个字,就逐一回答了之前的问题.

比传统纸制地图快就快在,系统可以根据输入的目的地关键字,帮你完成哪些”眼力劳动”.

和看纸制地图一样,看看这儿,看看那儿.因为这些动作都要在屏幕里去完成,因此放大缩小起到辅助浏览的功能:先缩小找到大体位置,再放大查看具体地点.

这个是最吸引人的功能,也是对用户帮助最大的功能.不管是开车,还是坐公交,有了这些数据,出行心里就更有底了.

体验篇

地图类的竞品有很多,比较有名的: 谷歌地图 , 百度地图 , 搜狗地图 ,MapABC , Mapbar , 我要地图网 等…虽然主要功能和达到的目的都一样,但使用上还是有差别的.这些功能的差别来源于针对人群的差异性,功能的设置,技术水平,以及对产品的认识.

1. 城市选择

谷歌: 默认城市是”北京市”,可同时细选各个区县

百度: 默认城市是”北京市”

搜狗: 默认是”北京”

MapABC: 默认是”北京”

Mapbar: 默认是”北京市”

我要地图网: 默认是”全国”

从上面的例子不难发现,多数网站都能通过ip获取用户当前所在的城市,在页面加载初始化的时候,就确定城市.这会让用户感到很亲切,也能少操作一步.

2. 初始界面

谷歌: 初始为北京市地图

百度: 初始为北京市地图

搜狗: 初始为北京市地图

MapABC: 网站本身界面

Mapbar: 网站本身界面

我要地图网: 网站本身界面

貌似以搜索见长的网站,初始界面焦点是北京市地图;而以地图为主产品的网站,焦点则是搜索框.或许专门的地图站点都有一个”首页”情节.

3. 关键字输入

谷歌: 自动匹配相关地名

百度: 没有自动匹配功能

搜狗: 没有自动匹配功能

MapABC: 没有自动匹配功能

Mapbar: 自动匹配相关地名

我要地图网: 自动匹配相关地名(可能是编码问题,匹配出来的字是乱码)

自动匹配(Auto Complete)虽然不是新鲜的东西,但考虑到技术成本,有些网站还是省掉了这个功能.其实这就是一个响应顺序的问题:自动匹配是事前响应,而没有这个功能的站点采用事后响应的方式,当用户触发”查找”动作以后,模糊查询含有关键字的地点,反应在地图上.体验上前者更好些,为什么这么说,是因为自动匹配其实是在帮助用户精确地段,缩小范围.

4. 地标指示及附加功能

谷歌: 地址,到这里去,从这里出发,周边搜索

百度: 地址,电话,到这里去,从这里出发,周边搜索

搜狗: 地址,电话,到这里去,从这里出发,周边搜索

MapABC: 地址,到这里去,从这里出发,周边搜索

Mapbar: 到这里去,从这里出发,周边搜索

我要地图网: 到这里去,从这里出发,周边搜索

从上图比较来看,地标提示框除了标明地点外,”到这里去,从这里出发,周边搜索”是其主要功能.这几个功能是较纸制地图最大的优势所在.传统地图只能告诉我们地点在哪,而电子地图解决了我们最关心的问题–怎么去!

5. 交互形式

用户可以在地图界面内,使用鼠标进行拖拽,改变页面框架内显示的区域.这是模拟我们在看传统纸制地图时用视线寻找地区的样子.屏幕内显示的内容有限,就算我们移动视线也看不到页面以外的东西,但拽进来不就看到了.正所谓”山不过来,我过去”.

依靠鼠标滚轮上下移动,我们可以放大缩小地图显示的范围.这也是优势之一.配合卫星功能(不是所有地图网站都有这个功能)还能看到建筑群是个什么样子.

6.用户界面

点在地图网站的界面都大同小异,一列显示备选地点,其余区域(尽量大)用来显示主地图.线框我就不画了,很好理解.道路,建筑等图示都模拟传统地图,降低学习成本.

发展趋势

随着科技发展,移动终端的丰富,互联网技术的提升,电子地图的载体正逐渐从家用电脑转向手机,GPS,便携式电脑.未来我们无论步行出游,驾车,还是出差,都可以通过无处不在的网络,更方便的使用电子地图带来的便利.快速定位,路线指引,周边搜索将越来越深入人们的生活.高效,信息更丰富将成为未来电子地图的主题.

相关文章

1. 从中关村的购物体验侃起
2. Axure如何重用masters
3. “Back to Top”有害页面健康？

最近看了一些有关可用性工程方面的文章,包括一些方法和思想.
总结下来有几点,我们还是缺乏归纳.为什么这么说,举个例子,我现在问”可用性工程的生命周期”是什么?估计很多人一下就蒙了.说实话,我刚看到这个问题的时候也蒙了,确实没有仔细的想过.

其实我们这些从事可用性相关方面研究的工作者们,在日常工作中都是遵循这样的规律进行的.如果我换个方法来问”平时做可用性方面工作时,流程怎样,分哪几部分来进行?” 这会问题就好答了”大概分三块,先是进行需求分析;然后是设计,测试,开发;最后是安装部署,发布上线.” 大同小异,总之会按这种流程走下来.

我们每天都在按照这个路子做事,只是缺乏归纳,这样对经验的积累和专业性的提高来说是不太好的.
这个图我从<<The Usability Engineering Lifecycle>>找到(找不到?看看如何在Google上看书),画了两个晚上,顺便翻译成中文.希望对可用性工作人员的日常工作能起到一些辅助作用.做用户体验一部分靠事实,另一部分真得凭经验.经验来自平时的归纳总结.

查看图片格式:

相关文章

1. 一个关于“Back to Top”的小故事
2. “Back to Top”有害页面健康？
3. 10条可用性方面的启发

译者序：这篇文章可以说以一种轻松、有趣的方式，对“Back to Top”有害页面健康？做了一个很好的回答。作者花了很长时间收集一些实实在在的使用案例，更直观的展示了“Back to Top”在网站中的使用，同时也明确表达了自己的观点。用“细节决定成败”开篇，也突出了本文编写的精细。

通常关注小细节可以让设计更杰出。在一个网站的开发过程中，设计者趋于忘记小细节，把精力都集中在主要的设计元素上，比如导航，排版和布局。如果真的完成了，那结果通常是很稳定的、让人印象深刻的，而且高专业的传达了信息。然而，这并不值得骄傲。原因是因为这种设计通常都没有一个值得记忆的点：他们可能看上去很吸引人，但没法提供给用户一个栩栩如生的形象，让用户离开网站后还能想起它。

这样看来，小细节是重要的，因为他们可以帮助设计脱颖而出。你是否曾思考过你的购物车的设计？那标签、时间戳、“向前”和“向后”的链接呢？虽然这些小细节对于网站的导航来说是无关紧要的，但他们却意味着是用户界面更友好、使用更方便甚至有时是更成熟的设计。这也是为什么我们在如下事情上为读者们考虑更多的原因，如：图片说明, 引用区块, 时间戳, 购物车, 翻页, <hr> 线, 标签云 和 favicons.

在这篇文章里，我们来展示“Back to top”链接的设计——这个帮助用户跳回页面顶部的被遗忘，并且不常用的链接。访问者通过按他/她键盘上的“Home”键也能达到同样效果；但不是每个用户都知道这条捷径，绝大多数人都使用浏览器的滚动条来完成这个目的。作为设计者，我们可以通过在页面上加一个“top”链接来帮助用户。

“Back to Top”链接什么时候有用

不幸的是，这么友好的服务——可以让用户跳到页面顶部——却不常见。大多数设计者都不用它，这也是我们为什么花了5周时间，为这篇文章去收集了至少一打漂亮的案例。

事实上，“Back to top” 链接也不是一直都有用。比如说，他们对于一个很短的网站或文章来说就是不必要的。在这种情况里，没必要让用户回到页面顶部，因为这个页面都在视线范围内；如果一个“top”链接出现在这种页面上，点击后会发现没有产生任何效果，这确实挺气人的。另一个为什么很多设计者不用它的原因是：眼下各式各样的显示器分辨率使“top”链接变得无用或没必要。这就是为什么在很短的页面上使用“Back to top”链接不是个好主意的原因了。

然而，当网页较长时，就给访问者展示了它极好的特性，既省时间，又不用去滑鼠标滚轮儿。

在何处放置“Top”链接？

最显而易见和普遍的做法，就是把“Back to top”链接放在页脚。这里是它应该出现的地方。我们没法给出一个关于“Back to top”链接的通用的设计方案。一些设计者把它放在页脚左侧，另一些把它放在中间，也一些把它放在页脚右侧的。把“top”链接放在内容的左手边，或直接放在内容结尾也都是很常见的做法。

看见这个友好的“top”链接了吧：通常被放在页脚，它的出现一直很适度并且几乎害羞。

“Back to top”也经常被使用在FAQs中，用来帮助在章节和站点地图中划分篇章或段落，以提供给用户一个快速回到页面开始处的方式，因为在那里有主导航。

如何创建“Top”链接？

让链接指向页面的顶部，多数情况都是放一个空锚点紧跟在<footer>标签后面：

<div id="footer">
<!-- footer goes here -->
<a href="#">top</a>
</div>

然而，老一点的浏览器，特别是有“考古价值的”浏览器，在解析这个代码时是有问题的。替代的方法是用一个真正的锚点，明确它的意图，紧跟在<body>标签的后面：

<body>
<a name="top"></a>
<!-- content goes here -->
<a href="#top">top</a>
</body>

更新：另一个方法可以避免冗余的代码，因此首选方法是利用wrapper或header的id属性达到相同目的。比如，如果你用id为”wrapper”的div标签，你可以像下面这样去写代码：

<body>
<div id="wrapper">
<!-- content goes here -->
<a href="#wrapper">back to top</a>
</div>
</body>

当然，这个链接本身不一定非得是文字；也可以是图片，按钮或其他元素（用图片可能会有一些可用性问题——往下看）。

措辞

不用担心你实际使用的措辞：你只需要保证访问者能够理解这个链接的功能，而不懊恼就行了。比如，使用“Return”大概就不是个好主意，因为看到它很难立即搞清楚它是带用户去首页，回浏览历史的上一页，还是到页面顶部。

用清晰简明的措辞，例如“Go to top,” “Back to top,” “Return to top” 或者 “Jump to top”。有时“Up”也可以无伤大雅的用一下。然而，我们不认为这是一个好主意，或者说根本不是好主意。

问题和劣势

一些可用性专家，甚至可用性研究的宗师——Jakob Nielsen，一致排斥“top”链接，认为它有害页面健康。在他们看来，页内链接应当坚决避免，因为浏览器滚动条足以应付，并且额外的方法也没有必要。然而，他们赞同在那些页面极长或无法避免的情况下，使用“Back to top”可能是有帮助的。

使用“top”链接的一个最主要的问题在于，他们影响浏览器的导航按钮，从而干扰了浏览历史。因为“top”链接就像个锚点，在点击浏览器 “back”按钮时，带用户去的就是眼下正在看的页面底部，而不是上一页。除此之外，可访问性专家主张“Back to top”链接可能会扰乱朗读工具的使用，“top”的概念是模糊的，而且“Back to top”链接也不是网站从始至终都在用的。

“Back to Top”链接对阵“Home”链接

在我们有趣的研究“Back to top”的案例中，我们偶然发现一些解决方法，设计者们用图片形式让用户可以跳回到页面顶部。不过，值得提一下的是，图片可以让用户很清晰的明白这个链接不是带他回首页，而是到页面顶部的。“Home”链接不等于“Back to Top”链接，“Back to Top”链接也不是“Home”链接的意思。如果你决定在你的设计中使用这种链接的话，请确保访问者能够看一眼就明白他们之间的不同。

误解：是“Home”而不是“top”

首页，可爱的首页…

用西班牙语说：回首页

另一个在页脚的“Home”实例

右手边的那个图标是不可点击的：它本应该是回首页，而不是到页面顶部

这个同理：这个插图也是不可点击的

那，这里也是

“Back to Top”链接展示

这里是更多“Back to top”链接的例子。收集他们真花了一些时间。希望这些可以成为带给我们读者灵感的好资源。

一个生动的“Back to top”链接

这个链接成为导航的一部分了。看起来不错，不过可能第一眼感觉挺别扭的。

这个“top”图标会跟随滚动条滚动。

我们不知道为什么一个方向键盘会出现在那：它不可点击，但本应该是能的。

参考资源

• Usability Advice: “Back to Top” Links
• Replicating Browser Behavior: The Top Link
• Nielsen: Within-Page Links for AJAX, “Return to Top”, Skip Links

相关文章

1. 10条可用性方面的启发
2. “Back to Top”有害页面健康？
3. 用户体验案例研究：设计微博应用