以简书为案例讲述「尼尔森十大可用性原则」


 配图

简介

尼尔森(Jakob Nielsen)是一位人机交互学博士,于1995年1月1日发表了「十大可用性原则」。

1995年以来,他通过自己的 Alertbox 邮件列表以及 useit.com 网站,向成千上万的 Web 设计师传授 Web 易用性方面的知识,尽管他的一些观点可能带来争议,至少在 Web 设计师眼中,他是 Web 易用性领域的顶尖领袖。


原则一:状态可见原则

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

案例:简书上每篇文章的底部都会有一个「喜欢」按钮,当把鼠标悬浮上去时,按钮就会由原来的透明状态变成淡粉的填充色,这一过程是瞬间的,这就运用了状态可见原则,反馈给用户的信息是:是的,您的操作是对的,鼠标点击下去吧!(如下图1)

 图1


原则二:环境贴切原则

网页的一切表现和表述,应该尽可能贴近用户所在的环境(年龄、学历、文化、时代背景),而不要使用第二世界的语言。

案例:简书在给文章的集合命名时并没有使用「目录」字样,而是使用了「文集」的说法。第一,这种说法很有情感化的东西在里面,不像直接说「目录」这么生硬;第二,这里也含有隐喻的设计,它会让你联想到一篇一篇文章集合成的小册子的感觉,很有意境之美。「专题」的说法也是一样的道理。(如下图2)

图2 


原则三:撤销重做原则

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

案例:这个我暂时还没在简书网站上找到案例,这里以Android版的Chrome浏览器为例说明。当通过手势关闭一个标签页时,浏览器的底部就会出现Toast,显示有「撤销」按钮,如果你是误操作导致的页面删除,这时就可以点击它恢复原先的页面——非常友好的体验。(如下图3)

图3 


原则四:一致性原则

同一用语、功能、操作保持一致。同样的语言,同样的情景,操作应该出现同样的结果。

案例:用户页面的右上角有一个头像,点击后出现菜单列表。其中的「我喜欢的」前面是一个爱心图标,「我的书签」前面是一个书签图标,这都是符合用户认知的,如果把文字所对应的图标互换(「我的书签」用爱心图标),那就有点奇怪了,会引起用户的困惑。(如下图4)

 图4


原则五:防错原则

通过页面的设计、重组或特别安排,防止用户出错。比出现错误信息提示更好的是更用心的设计防止这类问题发生。

案例:在写文章的列表页面,点击「删除文章」后,会弹出一个对话框,让你确认是否删除文章,官方在设计的时候有意把「确定」按钮放在了右边,「取消」按钮放在了左边,因为从操作流这个角度来看,若把「确认」按钮放在左边,则很容易误操作,而这个操作又是不可逆的。而且,官方在设计时给「确认」按钮填充了醒目的蓝色,多重防止误操作。(如下图5)

 图5


原则六:易取原则

尽量减少用户对操作目标的记忆负荷,动作和选项都应该是可见的,即把需要记忆的内容摆上台面。

案例:案例五中的图5也可以说明这个原则,确认对话框出现就很好地减少了用户前后的记忆。


原则七:灵活高效原则

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

案例:在简书的 Markdown 编辑器模式下写作时,一般用户只要熟记 Markdown 语法就可以写作,那高端一点的用户可能想用 XHTML 语言来写文章,简书也是开放了一些 XHTML 代码的,但不是全部,不然就不能叫做「Markdown编辑器」了。当然如果你不太熟练Markdown编辑器,简书也提供了「富文本编辑器」,满足了低层次用户的需求。这就是一种非常灵活高效的设计(如果简书只有单纯的 Markdown 编辑器,那么用户会流失很多很多)。


原则八:易扫原则

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

案例:当想把已经添加在文章下方「拓展阅读」处的链接删除,那么点击「删除」后,在浏览器的顶部就会出现了提示框,提示「拓展阅读删除成功」。因为这样一个操作误删除的可能性非常小,由于「删除」的操作域非常小,一般点击都是自己明确地把鼠标移上去的,而且删除拓展阅读中的链接并不是一件非常严重的事情。其实我想说的是,这种情况下就不需要弹出对话框再进行确认了,的确,简书也是这么设计的——把无关紧要的信息弱化,提示3秒即消失。(如下图6)

 图6


原则九:容错原则

错误信息应该用语言表达(不要用代码),较准确地反应问题所在,并且提出一个建设性的解决方案。

案例:在简书上,点击一个链接,偶尔会出现下图的情形,即页面找不到。简书提供了详尽的说明文字和指导方向,而非直接使用404代码。(如下图7)

 图7


原则十:人性化帮助原则

如果系统不使用文档是最好的,但是有必要提供帮助和文档。任何信息应容易去搜索,专注于用户的任务,列出具体的步骤来进行。帮助性提示最好的方式是:1、无需提示;2、一次性提示;3、常驻提示;4;帮助文档。

案例:对于初次使用的用户来说,看到设置中的「选择常用的编辑器」,会搞不懂「富文本」和「Markdown」的区别是什么,而且对于长期使用简书的用户来说,如果有一天他想在两个编辑器之间切换使用,可能就会对自己不常用的那个编辑器不了解或是遗忘,那么这个时候其实就像简书这样的设计就非常好——直接通过问号图标跳转到具体的帮助文档页面,详细教你该如何使用编辑器。(如下图8)

 图8


总结

这些可用性原则(Usability)在产品经理的实际工作中都有很大的参考价值,应该熟练掌握。


要转载我的文章,请带上作者名称,原文地址的超链接,不允许修改我的标题,如果你无法全部满足上面3个要求,请不要转载,欢迎大家举报。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,616评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,020评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,078评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,040评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,154评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,265评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,298评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,072评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,491评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,795评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,970评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,654评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,272评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,985评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,815评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,852评论 2 351

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,914评论 25 707
  • 专业人员用一套规范去评估产品。 原则:尼尔森10原则,尼尔森扩展原则,首页可用性原则,八项黄金法则,hhs网页设计...
    Asherdon阅读 2,510评论 0 6
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,644评论 18 139
  • 提出该理论的是Jakob Nielsen,毕业于哥本哈根的丹麦技术大学的人机交互博士 , 他拥有79项美国专利,专...
    沈帕蒂阅读 3,069评论 0 5
  • 嘿,你有几个朋友? 啊,我有一大群。 唉,那知己少的和三毛头发一样多。 因为怕受伤 所以会离开 因为会摩擦 所以会...
    叫我梅芳就好阅读 245评论 0 2