大数跨境
0
0

每个产品经理都应该懂的10个交互原则

每个产品经理都应该懂的10个交互原则 产品海豚湾
2023-05-21
1
导读:历久弥新,经典的交互原则
先关注,精彩内容不错过

前言

本人见过不少糟糕的交互设计,即便是我这样的人也会被这些设计搞懵,不知道该如何下手。我想设计这样产品的人一方面是自己很少使用自己的产品(比如外包类的),另一方面可能是没有研究过怎么样做好交互设计。


实际上,早在1994年的时候,雅克布·尼尔森就发表了十大交互原则,也就是本篇要介绍的著名的尼尔森十大交互原则,至今都非常有参考价值。这里说一个有趣的事情,尼尔森和另外一位交互设计大师唐·诺曼(《设计心理学》一书作者)合伙成立了一家公司,叫做Nielson Norman Group(简称NN Group),专门做用户体验研究,他们的官网提供了很多交互设计的案例,有兴趣的可以去看一下(链接:

https://www.nngroup.com/articles/)。




1.可见性原则

即用户能够看到及时自己操作行为的反馈信息。举个例子,按钮的点击状态反馈,提交状态反馈,进度条指示等等。《设计心理学》一书曾经提到一个投影仪调节的反面例子,调节投影仪的区域在教室的后面,导致调节幻灯片的人看不到当前幻灯片的位置,结果折腾了半天都没法调对位置。下面的动图给了两个正面示例:

  • 提交按钮:提交按钮需要响应鼠标移入、按下的用户行为,点击后的提交过程等待指示以及提交成功后的结果反馈指示;

  • 进度条:下载过程中给出当前下载的进度反馈。




2.匹配真实世界原则

也就是界面的元素尽量映射物理世界的物品、文案要说人话。比方苹果早期的拟物化设计风格(还有曾经的锤子科技),比如我们的删除图标设计成垃圾桶的样子。




3.撤销重做原则

也就是用户有控制操作行为的主动权,支持撤销重做,以及进入某个页面能够支持返回上一个页面。我曾经见过一个反面设计是从列表进入详情页不提供返回按钮,只能从顶部的tab栏切换到列表页。下图就是一个删除后短时间内允许用户撤销的交互,这种情况下用户误删后也可以马上恢复。




4.一致性原则

即保持设计的一致性和标准化。界面的相同元素应该保持一致,比如按钮的图标、字体、颜色等等,使得用户的操作统一,易于上手。这里比如说收藏按钮要不统一用星形图标要不统一用爱心图标,不要混用。再比如说相同功能的按钮位置,应该保持一致,不要有些页面在左上角,有些页面在右上角。




5.防出错原则

设计时要尽可能避免用户出错。比如手机的SIM卡插槽反了无法正常插入,比如我们输入验证码的时候使用6个输入框来限制输入长度,再比如我们填写表单时,如果没有填写完整时,提交按钮置灰禁用。




6.减少记忆负荷原则

减少对用户记忆的要求,典型的例子是多步骤表单,能够显示上几个步骤填写的信息看,避免用户返回上一步核对之前填写的内容。再比如提供历史搜索记录和在对话框给出所选择的数据项名称。




7.灵活高效原则

提供个性化配置,满足灵活性,使得用户可以根据自己的使用习惯配置界面,提高效率。比如钉钉的工作台支持自定义,比如提供最近操作,常用操作的入口。




8.精简原则

界面只保留相关的元素和信息,避免过多不相关的信息打扰用户,同时要保持界面美观舒服。这里典型的例子就是键盘手机到全屏幕手机的变化,通过将键盘隐藏后,让整个手机变得更加简洁美观,而键盘则根据需要时再调取出来,且可以针对表单的类型做定制,更加易于使用。




9.容错原则

帮助用户识别,诊断,并引导用户从错误中恢复。当出现错误时,应当给出清楚的错误指示,并且引导用户如何解决。典型的例子就是表单校验错误提醒,以及App端在所需权限没开启的时候,告知用户权限未开启,并引导用户到系统设置开启相关的权限。




10.提供帮助原则

为用户提供帮助文档和指示信息,比如在难懂的名词或操作后跟一个提示图标或解释说明,比如提供示例和帮助文档。下图是交管12123的告知用户如何查询证件有效期的示例以及或伙伴云的帮助中心。


总结

可以看到,尼尔森的十大交互原则浅显易懂,实际上我们见到的很多大公司的产品都遵循了这样的原则。但是,就我个人接触到的一些产品经理而言,这块其实往往是忽略的。不是每一家公司都会配备“交互设计师”,这就需要产品经理同时需要注重交互体验。如果产品经理只关注“功能是否实现”,而不关注“体验是否好”的话,那么这样的产品用起来是十分别扭的。如果是真的将这样的产品推向市场的话,毫无疑问,会收获大量的吐槽。请产品经理们注重用户体验,让产品关注功能的同时,也能更有温度。

下面附上英文原文,阅读原文可能会加深我们对尼尔森的十大交互原则的理解。此外,我这边也从尼尔森官网下载了他们的一个PDF 示例文件,大家可以在产品海豚湾公众号聊天窗口回复“尼尔森”获取下载地址。


1英文原文

  1. Visibility of system status: Designs should keep users informed about what is going on, through appropriate, timely feedback. Interactive mall maps have to show people where they currently are, to help them understand where to go next.  

  2. Match between system and the real world: The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon.  

  3. User control and freedom:Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action. Just like physical spaces, digital spaces need quick "emergency" exits too.

  4. Consistency and standards: Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. Check-in counters are usually located at the front of hotels, which meets expectations.

  5. Error prevention: Good error messages are important, but the best designs carefully prevent problems from occurring in the first place.

  6. Recognition rather than recall: Minimize the user's memory load by making elements, actions, and options visible. Avoid making users remember information.

  7. Flexibility and efficiency of use: Shortcuts — hidden from novice users — may speed up the interaction for the expert user.  Regular routes are listed on maps, but locals with more knowledge of the area can take shortcuts.

  8. Aesthetic and minimalist design: Interfaces should not contain information which is irrelevant. Every extra unit of information in an interface competes with the relevant units of information.  

  9. Help users recognize, diagnose, and recover from errors: Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.  

  10. Help and documentation: It's best if the design doesn't need any additional explanation. However, it may be necessary to provide documentation to help users complete their tasks.  

关于产品海豚湾

号主从事过 C 端产品和 B 端产品设计,擅长 SaaS 产品、产品架构设计和需求分析。其中C 端产品在 App Store分类排行榜进入榜单前30, B 端产品完成了完整的从0到1,从1到 N 的过程。

本号主要分享产品干货,尤其是 B 端产品的规划设计、商业洞察、运营支撑、用户体验等相关内容。

点分享

点点赞

点在看

【声明】内容源于网络
0
0
产品海豚湾
人人都是产品经理主编推荐作者,主导过多个产品从0-1,从1-N 的设计。目前从事 SaaS 产品设计和团队管理。B 站搜索:产品海豚湾也可以看相关视频哦。
内容 124
粉丝 0
产品海豚湾 人人都是产品经理主编推荐作者,主导过多个产品从0-1,从1-N 的设计。目前从事 SaaS 产品设计和团队管理。B 站搜索:产品海豚湾也可以看相关视频哦。
总阅读17
粉丝0
内容124