产品设计的十大可用性原则:以微信为例

尼尔森的十大可用性原则,强调易用性,是交互设计的重要参考标准。

状态可见原则(Visibility of system status):用户在系统上的任何操作,不论是单击、滚动还是按下键盘,系统应即时给出反馈。“即时”是指用户可以接受的等待时间(reasonable time)。

案例:微信的发送信息时,信息文本左边有个半透明白灰色的转轮给出发送中的反馈,发送失败时会出现红色感叹圆给出发送失败的反馈。

点击微信右上角+,即时给出显示相应的操作按钮的反馈。

环境贴切原则(Match between system and the real world):系统的一切表现和表述,应该尽可能贴近用户所在的环境,而不要使用系统的语言。《iPhone人机交互指南》里提到的隐喻与拟物化是很好的实践。此外,还应该使用易懂和约定俗成的表达。

案例:微信的发现页面,每个子功能的图标和表述都贴切用户的环境,图标采用拟物化,表述采用用户熟悉的语言。

撤销重做原则(User control and freedom):为了避免用户的误用和误击,系统应提供撤销和重做功能。

案例:微信的导航栏切换、页面返回。聊天窗口误发信息,支持撤回信息。

一致性原则(Consistency and standards)同一用语、功能、操作保持一致。

案例:微信的摇一摇功能,打开摇一摇的页面,icon保持一致。

防错原则(Error prevention)

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

其他人正在看

案例:微信的附近的人功能,使用会弹窗提示,提示用户位置信息会泄漏,防止用户出错。

易取原则(Recognition rather than recall) 

尽可能减少用户对操作的回忆负担,功能选项应该是可见的,使用说明都是可预见的。

案例:微信的发现页面,每个子功能的图标全部采用拟物化(参考环境贴切原则的图示),每个操作都是可预见的。

灵活高效原则(Flexibility and efficiency of use)

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

案例:微信的发现页面的子功能默认全部显示,但在设置中可以对每个子功能的启用停用,满足不同用户的需求,保持灵活高效原则。

易扫原则(Aesthetic and minimalist design)

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

案例:微信对信息详细分类在不同的页面,每个页面只显示相关的功能。

微信的发现页面,只显示存在着探索关联的功能(参考环境贴切原则的图示)。

容错原则(Help users recognize, diagnose, and recover from errors)

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

案例:微信用户误删好友后,直接通过群找到好友,添加到通讯录,不用好友通过验证,恢复好友。

微信误发红包,对方也不接收红包,超过24小时后自动退回到用户钱包,避免用户的损失。

用户误打开附近的人,位置信息泄漏,用户可以点击页面右上角的清除功能可随时手动清除位置信息。

人性化帮助原则(Help and documentation)

如果系统不使用文档是最好的,但是有必要提供帮助和文档.

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

案例:微信发朋友圈的状态时,文字文本会出现“这一刻的想法…”提示帮助。

微信的帮助与反馈,提供常见问题、相应功能的快捷帮助以及意见反馈。

5、情感化设计

用户购买产品大多源于情感需求,优秀的产品经理都懂得产品应该如何满足用户的情感需求,比如,用户使用陌陌的增值服务,可以得到对方更多的信息和青睐,满足交友和爱的需求。

当产品满足用户的情感需求,用户很乐意为产品买单。在苹果公司中,产品硬件为软件服务,软件为用户体验服务,用户体验为情感服务,做到产品为真正的需求服务,这就是为什么苹果能够引导行业。

只有从情感的角度重新观察市场上的产品和服务,你才能体会用户的真实感受。他们通过什么途径满足这些情感需求?哪种视觉设计更能抓住这些情感?哪些功能更能满足这些情感需求?哪些产品特性阻碍用户宣泄情感?

情感化设计的目标是在人格层面与用户建立关联,形成认同,即满足用户的情感需求,引发用户共鸣,使用户在与产品互动的过程中产生积极正面的情绪。这种情绪会逐步使用户产生愉悦的记忆,从而更加乐于使用你的产品。另外,在正面情绪的作用下,用户会处于相对愉悦与放松的状态,这使得他们对于使用过程中遇到的小困难与细节问题的容忍能力也变得更强。

《情感化设计》告诉我们,产品情感化设计具备三种水平的设计:本能水平、行为水平、反思水平。三种水平分别对应产品的不同特点,如下:

  • 本能水平的设计——>外形
  • 行为水平的设计——>使用的乐趣和效率
  • 反思水平的设计——>自我形象、个人满意、记忆

微信情感化设计的案例

美好的事物更好用

UI清晰简洁,色调绿色健康,给予舒服的情绪,更加能容忍产品出错的问题。

孤独

启动页,充满情怀的设计,彰显孤独感,引发用户共鸣。

微笑

聊天窗口贴图表情加载不成功,表情显示为大大的笑脸,模仿人类的情绪,产生正面积极情绪,用户更能容忍加载失败。

惊喜

微信聊天窗口,发送“我想你了”,窗口页面落下满屏星星,提供一些用户想不到的东西,超出期望,让用户觉得很有趣快乐。

暗示

发现页面的功能停用按钮为红色,警告暗示,使得注意力更集中,点击按钮弹窗提示用户停用该功能后将会发生什么,利用恐惧心理(损失比收益更在意),防止用户停用。

专享&个性

向某个群体的用户提供一些专享个性化的东西。

微信运动,当用户运动步数为第一名,运动封面将显示用户封面照片,专享,获得成就感。

用户朋友圈的封面,用户自定义,个性化。

微信的摇一摇页面,男用户的icon与女用户的icon不一样,男女用户专享个性化的icon。

娱乐

提供游戏,好友排名,增加用户成就感。

吸引力

朋友圈的色环转轮,吸引用户的注意,减少用户对朋友圈的刷新响应时间。

拟物化

微信发现页面的功能icon的拟物化,减少回忆,使得用户可预期下一步的操作或者发生的事情。

效率

集社交、阅读、服务一体,满足生活不同的场景,比如付款红包。

用户发送图片,读取最近使用的图片弹出快捷发送。

微信聊天窗口,发送“//multiwebview”,实现多个微信页面,可以边聊天边阅读的多任务并行,互不影响,提高用户体验。

积极响应

对用户的行为进行积极的响应。

微信用户发送朋友圈后,状态直接生成缩略图在timeline显示,后台采用队列技术悄悄上传发送,对用户进行积极响应,让用户误以为直接就发送成功。

炫耀&认同

朋友圈满足用户炫耀和寻求认同。

自我价值

推出公众号,个人与企业都能建立自身品牌,实现自我价值。

需要注意的是,一个页面的情感化设计会合理地综合使用情感化的设计要素。比如,微信朋友圈的页面,色环转动吸引注意力,减弱用户对朋友圈刷新响应时间的感知,发表状态时,采用队列技术后台悄悄上传发送,积极响应用户。