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

尼尔森(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)在产品经理的实际工作中都有很大的参考价值,应该熟练掌握。

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/924/

(0)
iouedioued
上一篇 2014-09-30 13:39
下一篇 2014-10-10

相关推荐

  • 阿西JUSTINMIND学习日记:justinmind官方公布的快捷键列表(全部)

    常规快捷键 Windows OS X 剪切 Ctrl + X ⌘ + X 复制 Ctrl + C ⌘ + C 粘贴 Ctrl + V ⌘ + V 副本(复制) Ctrl + D or Ctrl + Click 并拖动 ⌘ + D or ⌘ + Click 并拖动 删除 Delete 或 退格键 Delete 或 退格键 撤销 …

    2015-06-16
  • 002.认识Axure的软件界面

    Axure的软件界面总的来说,可以分为9大模块 1. 菜单栏:和大部分的软件界面一样,都是一些常规的文件、编辑、视图…… 2. 工具栏:是页面进行编辑的一些快捷操作,主要有字体设置、大小设置、页面显示大小和Axure本身…

    原型设计教程 2014-09-12
  • 100%干货!大型互联网公司精益产品设计流程

    相对于传统产品设计流程,精益产品设计流程越来越受互联网公司,特别是创业公司青睐,但很多人听过精益创业、精益设计,但并不明白其中的奥秘,本文就带大家揭开精益产品设计的流程方法和要点。 首先我们来看看传统…

    2016-05-31
  • Mockplus原型交互跟我做之2- 旋转的风车

    再来看一个小例子,我们做一个旋转的风车。蛮漂亮,是吧? 这里只用到“旋转”交互命令。

    2016-01-18
  • Axure RP 8.0初体验 更快更爽的制作原型

    Axure RP 8.0 已经发布了,相信很多同学已经下载。没有下的可以看这个文章:Axure 8.0正式版发布,下载文件、汉化包、激活码在这里~! 但V8版本到底表现如何?新增了什么新特性,有什么用处?来自产品100的这篇文章…

    2016-05-09
  • 阿西JsutinMind日记 之 幻灯片自动播放与左右滑动

    新项目为了给客户演示高保真的移动设备交互原型,故采用JustinMind工具。 国内资料很少,好在阿西使用过多款交互设计工具,大体都差不多,摸索着前行吧。。。   1.认识一下JsutinMind里的,这个动态面板理论上…

    2015-03-23
  • 原型设计

    一、什么是原型设计 原型设计可以概括的说是整个产品正式发布上线之前的一个框架设计等。 我们先来看一个项目失败的案例。 经过漫长的谈判过程,终于拿下了一份大合同,同时项目成员按照所谓的需求说明书(也许需求…

    2015-06-16
  • 【Mockplus教程】如何批量修改组件属性

    选择多个组件,在属性面板上面会显示这些组件的共同属性,而属性值为其中一个组件的属性值, 改变属性面板上面的属性后将应用到所有组件上。 以改变文字大小和颜色为例演示如下:

    2015-10-17
  • 你应该知道的24种新兴交互设计

    文字原文:一淘UX原文:http://ux.etao.com/posts/570   在互联网这个领域,每天都有不计其数的产品诞生,有些产品只是灵光一现,有的却存活了下来,但是不论存活与否,这些产品上总有一些设计细节让我们眼前…

    2014-12-18
  • JUSTINMIND权威指南:前言

    ​来说一说为什么要写这本JUSTINMIND相关的书籍,此前我做交互设计的时候,有一次遇到一个特别的APP项目,这个项目的BOSS要求给拿出一个高保真的原型给他演示,我们项目组就问我怎么才能做出一个可以演示的高保真原…

    JustinMind 2015-07-31