美文网首页走在路上体验式设计研究脑洞PM
以简书为案例讲述「尼尔森十大可用性原则」

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

作者: shenxiaoma | 来源:发表于2014-09-30 07:07 被阅读5898次


     配图

    简介

    尼尔森(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个要求,请不要转载,欢迎大家举报。

    相关文章

      网友评论

      • 小丑惜命:原则三
        手机app里,进行写作时有撤回功能,前提是这一句话是连打的,不然和逐字删除无区别了。
      • leifengsister:不认同原则五,关于按钮放左边或者右边的看法。
        个人认为,引导用户进行下一步操作的按钮,放在左边还是右边,是根据系统的不一样而位置不一样。win系统的位置跟mac系统的位置是相反的。
        要根据你的目标用户所使用的那种系统占多数,而决定放在左边还是右边。图中案例,把引导性按钮放在右边,是mac系统用户的操作习惯。
      • RogerHero:原则五:防错原则
        可以进一步提升,比如把确认和取消直接用动作代替“确认删除”“取消删除”类似的。认知上会更清晰一些。
        来自ios规范。
      • 诸葛兔:原则十,人性帮助原则。

        我感觉淘宝大学是这方面做的最棒的了。让任何一个文化层级的人都能通过它很快的上手开店。
      • 711child:第一次看十大可用性原则,学习了
      • 8af345d3ee91:@南不图 结合作者的示例,“撤销重做原则”与“防错原则”的不同,我的理解是“撤销重做”是发生在用户的操作执行了,此时可以让你反悔,这种可以返回的操作或许是一些容易被误操作的敌方,比如chrome的手势操作,手势也需要一个学习记忆的过程,在没有熟练使用前,误操作之后有一个友善的撤销很贴心,提醒一般都是不会打断用户继续操作的。 “防错原则”比较适合在操作执行前的提醒,一些很重要的操作,不是经常使用的,比如删除、退出,并且是再次启动后不能恢复的。所以就要在执行前再次明确提醒,而且这种提醒多数使用打断用户的形式“弹出框”。
      • 夜汪子:遇到熟人了(≧▽≦)
      • 8af345d3ee91:@南不图 “用户浏览网页的动作不是读,不是看,而是扫。” 同样很喜欢这句话!
      • 南不图:用户浏览网页的动作不是读,不是看,而是扫。 学习!!~
      • 南不图:原则五 , 确认按钮醒目 , 达到了 "多重防止误操作" 的效果?? 不同意~!~
        另外根据你的例子 , 撤消重做原则 与 防错原则 有区别么 , 删除文章的时候弹出确认框很讨厌 , 我觉的可以改成 google 的例子
      • 南不图:文集和专题题这么坑爹的名字你都说出花来了 佩服~ 是因为你只能想到 "目录" 么
      • 何必:结合实例,很赞。
      • MJGA:看来我们要在撤销重做上花点心思,比如删除评论可以反悔。
      • LostAbaddon:@沈晓马 我倒是有想法,不过没时间作,555。。。
      • shenxiaoma:@LostAbaddon 对的,UI 包括 GUI,UX,HCI等等。对于简书信息流的设计,我暂时还没有太多想法,目前这样还挺好。
      • LostAbaddon:@沈晓马 @HungryPayne 其实信息流的整理与呈现也可以算是UI的部分。。。
      • shenxiaoma:@HungryPayne UI是一个很大的范畴,你指的是哪一块的知识?
      • db604b5f2efb:据我这段时间的使用体验,简书的功能设计很不错,虽然UI还有很大提升空间,但已经不是改进的重点了。如果信息流通能更加有效,可能体验会更好。

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

      本文链接:https://www.haomeiwen.com/subject/xxwutttx.html