可用性案例分析

2011-04-16 00:46

可用性一直是交互设计的重头。以下就自己的理解,写写对尼尔森《十大可用性原则》的感想。《十大》原文请见参考资料。

本文对各项原则进行了再理解与意译,与常见翻译的版本不同;这也正是我在鼓励和推动互联网中文普及与标准化所做的重要努力之一。

一、状态可见原则

用户在网页上的任何操作,不论是单击、滚动还是按下键盘,页面应即时给出反馈。“即时”是指,页面响应时间小于用户能忍受的等待时间。

例01:Gmail

01

01

进入Gmail首页,点击“撰写邮件”,页面右侧切换成表单的等待时间是“即时”的,“无需等待”的;而点击“通讯录”,程序在后台异步加载的时间超出了用户预期(估计0.5秒以上),因此Gmail在顶部打出“正在载入……”的字样。

例02:嘲鸫蓝图

02

02

嘲鸫蓝图是一个在线框架图工具。用户对文档的任何更改,都会即时保存。提示信息常驻页面顶部。

例03:QQ邮箱

邮箱能自动保存草稿,但保存状态的表现却是以例01这种“一闪而过”的形式,用户无法确定程序是否及时保存了最新版本。

二、环境贴切原则

网页的一切表现和表述,应该尽可能贴近用户所在的环境(年龄、学历、文化、时代背景),而不要使用第二世界的语言。《iPhone人机交互指南》里提到的隐喻与拟物化是很好的实践。此外,还应该使用易懂和约定俗成的表达。

例04:Photoshop

04

04

“拷贝”一词在简体中文环境里已被“复制”取代。

“羽化”一词译自英文“feather”,指“令选区内外衔接的部分虚化,起到渐变的作用从而达到自然衔接的效果”,该译文贴切而富有诗意。

三、撤销重做原则

为了避免用户的误用和误击,网页应提供撤销和重做功能。

例05:谷歌日历

05

05

添加/更新某个日程后,页面顶部提示“撤销”的功能。

例06:QQ空间

06

06

日志和相册提供“回收站”功能。

四、一致性原则

同一用语、功能、操作保持一致。

例07:Flickr

07

07

繁体版主导航上的表述是“社群”,到了“管理与建立”的页面,却写着“群组”。

例08:新浪微博开放平台

08

08

在“文档首页”的页面,网页标题却是“新浪微博API”,与用户预期不符。不仅如此,页面在接口(API)和开发工具包(SDK)在文案上并没有统一,显得不够规范和严谨。

五、防错原则

通过网页的设计、重组或特别安排,防止用户出错。

例09:新浪微博

09

09

微博发布器上的文字是即时保存的,即便用户关闭了网页,也不会丢失内容。

六、易取原则

好记性不如烂笔头。尽可能减少用户回忆负担,把需要记忆的内容摆上台面。

例10:新浪微博

10

10

当用户需要“@某人”时,自动随键入弹出列表。不过,手机客户端上,最先实现这个功能的是腾讯微博。

七、灵活高效原则

中级用户的数量远高于初级和高级用户数。为大多数用户设计,不要低估,也不可轻视,保持灵活高效。

例11:博客大巴

11

11

很早很早以前,大巴改版,新模版调整模块方式显得灵活;但在快速迭代的互联网世界里,大巴的“新”方式已经过时很久了。

例12:wordpress

12

12

保持高效,不解释。

例13:QQ邮箱

13-1

13-1

登录时,如果在账号里输入数字帐号(即QQ号),焦点移动到密码框后,会弹出验证码表单;如果检测出输入的是英文账号,则隐藏验证码表单。这里巧妙的地方在于,英文账号为恶意试探性登录(攻击)的可能性远小于数字帐号。

13-2

13-2

批量删除邮件时,如果未选择邮件,则弹出非必须响应(必须响应,比如alert()方法)的提示,避免用户无意义点击。

例14:人人网

14

14

删除相册的“确认”截图。注意,这不是弹出层,而是新的页面。笨拙且低效。

例15:腾讯微博

15

15

美化版的alert(),徒增麻烦。

八、易扫原则

互联网用户浏览网页的动作不是读,不是看,而是扫。易扫,意味着突出重点,弱化和剔除无关信息。

例16:百度搜索

16

16

搜索结果的数量对用户的帮助甚少,况且这个数字也不够准确。百度搜索将其拿到页面底部,这样,首屏可视区域在高度上增加20个像素。

例17:微博列队

17

17

根据作者的结论,大多数转发的附言是无意义的,因此隐去之。由于部分用户将“转发”视作“引用”功能,附言是高价值的评论,因此提供悬停查看的办法。

例18:谷歌网站站长帮助工具

区分正文与代码,由于不是面向专业开发者,因此没有高亮代码。

九、容错原则

帮助用户从错误中恢复,将损失降到最低。如果无法自动挽回,则提供详尽的说明文字和指导方向,而非代码,比如404。

例19:豆瓣

19-1

19-1

小组的话题被删除后,豆瓣会给每一位跟帖人发送邮件,告知删除原因和跟帖原文。

19-2

19-2

恢复到初始布局。值得一提的还有豆瓣的文案,注意“折腾”二字~

十、人性化帮助原则

帮助性提示最好的方式是:1、无需提示;2、一次性提示;3、常驻提示;4;帮助文档。

例20:腾讯微博

20

20

一次性提示。

例21:谷歌关键字广告

21

21

常驻提示。

参考资料

  1. 尼尔森 《十大可用性原则》(英文) http://www.useit.com/papers/heuristic/heuristic_list.html
  2. 刘希未 《尼尔森网页可用性评价十原则》(中英对照) http://blog.sciencenet.cn/home.php?mod=space&uid=333718&do=blog&id=292283
  3. 《专家评估:超越启发式评估》 http://www.userfree.cn/?p=840

16 条评论 / 引用:

  1. 包子:

    好文章,转载到互联网的一些事(yixieshi.com)

  2. 匿名:

    真好!

  3. Nancy:

    有个问题请问小轰同学:关于原则一的Gmail为例,不论是单击、滚动还是按下键盘,页面应即时给出反馈,而QQ邮箱的保存形式也是“即时”的,这一点上两者都Ok。如果从反馈的状态来看,gmail是直接出现用户需要的页面无需任何的提示,QQ邮箱难道用户每写一个信息系统就要提示存储成功,这样不会扰乱用户操作?还是有更好的方式针对QQ邮箱这种形式。求解,谢谢!欢迎邮件回复。

  4. 小轰同学:

    @Nancy
    “从反馈状态来看……”这里开始,我没明白你的意思,更不解什么是“用户每写一个信息系统”。

  5. 可用性案例分析 | UXChina:

    […] UXChina或许是最好的用户体验分享平台 订阅 微博首页产品经理PM周话题分享招聘信息产品运营类水宿鸟每周分享用户研究首页用户研究可用性案例分析可用性案例分析2011年05月3日发布在 用户研究由水宿鸟留下评论可用性一直是交互设计的重头。 […]

  6. 确认框的设计 « 时光立方:

    […] 《可用性案例分析》 http://cuikai-wh.com/blog/1543 […]

  7. 确认框的设计 | Open小巷:

    […] 小轰 《可用性案例分析》 http://cuikai-wh.com/blog/1543 […]

  8. 金融大饿:

    Nancy同学说的意思是:“QQ邮箱难道用户每写一个信息,系统就要提示存储成功。” 你应该给他断个句子。。。

  9. 小轰同学:

    @金融大饿
    这个断句……好吧,你们赢了。

  10. 过度设计的判定 « 时光立方:

    […] 小轰 《可用性案例分析》 http://cuikai-wh.com/blog/1543 […]

  11. 过度设计的判定 | P.产品 M.营销 D.设计:

    […] 小轰 《可用性案例分析》 http://cuikai-wh.com/blog/1543 […]

  12. 过度设计的判定 | 艾艾时代:

    […] 小轰 《可用性案例分析》 http://cuikai-wh.com/blog/1543 […]

  13. 过度设计的判定 | 南京UI设计:

    […] 小轰 《可用性案例分析》 http://cuikai-wh.com/blog/1543 […]

  14. 十大可用性原则 案例分析 | 维美设计团队博客:

    […] 原文链接:http://cuikai-wh.com/blog/1543 […]

  15. 可用性案例分析 - Game2遊戲|互聯網網誌-領先的正體中文互聯網/遊戲資訊網誌! - 領先的正體中文互聯網/遊戲資訊網誌!:

    […] 源地址:http://cuikai-wh.com/blog/1543 […]

  16. 確認框的設計 - Game2遊戲|互聯網網誌-領先的正體中文互聯網/遊戲資訊網誌! - 領先的正體中文互聯網/遊戲資訊網誌!:

    […] 小轟《可用性案例分析》 http://cuikai-wh.com/blog/1543 […]

评论

《对话守则》第一条:对话的目的是寻求真理。

以下选填: