产品经理前端设计十大可用性原则

2023-06-05 0 430

编辑编者按:安德森五大功能强大性原则是商品结构设计时结构雕塑家可参照的原则,结合这五大功能强大性原则,商品可以更好地与使用者展开可视化,助推提升使用者的使用新体验。第一集该文里,作者就安德森五大功能强大性原则展开了阐释和相应的事例拆解,一起来看一下。

产品经理前端设计十大可用性原则

界面结构设计的业务流程在项目组社会分工明确、物力贮备充裕的情况下,在开发两套崭新的B端业务控制系统时,界面结构设计的业务流程一般如下表所示:

商品副经理绘出线SimRank蓝本,抒发应用软件中每个网页的结构设计需求。UE结构雕塑家帮助商品经理完善可视化新体验,并制做可视化蓝本。UI结构雕塑家如前所述可视化蓝本展开美工结构设计,聚合切图文档。后端技师领到切图文档,展开后端开发,包括实现可视化、动效等。

商品副经理在展开后端结构设计时,可参照安德森五大功能强大性原则,下面具体介绍该五大功能强大性原则。

安德森(Jakob Nielsen)是一位人机可视化学教授,于1995年1月1日发表了「五大功能强大性原则」。安德森的五大功能强大性原则是安德森教授分析了毕鲁图功能强大性问题而提炼的十项全功能原则。它是商品结构设计与使用者新体验结构设计的重要参照标准,值得深入探讨与运用。

这五大功能强大性结构设计原则分别是:

意见反馈原则、暗喻原则、班莱班县原则、一致原则、防错原则、梦境原则、灵巧功能强大原则、简洁结构设计原则、纠错原则、帮助原则。

一、意见反馈原则(Visibility of system status)

控制系统应该在合理的时间、用恰当的方式,向使用者提示重要信息或意见反馈目前控制系统在做甚么、出现了甚么。

人机可视化的基本原则是,让控制系统和使用者之间持续保持的沟通交流和重要信息传达。控制系统要知会使用者出现了甚么,预期是甚么,假如控制系统不能及时向使用者意见反馈最合适的重要信息,使用者必然会感到失去平衡和恐惧,不知道下一步要做甚么。以下是遵从意见反馈原则的一些常见结构设计事例。

安装流程时表明unlock,并估计还需要多长时间结束。上载文档时表明unlock,并提示重要信息估计艾佛顿。递交配置文件时,假如奇偶校验失败,则在核对不确的内容旁边提示重要信息严重错误原因。流程未积极响应时,控制系统会让使用者选择是关闭流程还是等待流程积极响应。产品经理前端设计十大可用性原则

图1 控制系统安装图

二、暗喻原则(Match between system and the real world)

控制系统要采用使用者熟悉的语句、短语、符号来抒发意思。遵从真实世界的认知、习惯,让重要信息的呈现更加自然,易于辨识和接受。

在人机可视化结构设计中,流程的沟通交流和抒发、功能的呈现,都要用最自然的、使用者容易理解的方式,避免采用计算机流程语言的抒发方式。结构设计时要采用符合真实世界认知的方式,让使用者通过联想、类比等方法轻松地理解流程想抒发的含义。

例如,某音乐播放器APP,功能按钮结构设计如图2所示,即便不做说明,使用者也很容易理解每个按钮是做甚么用的。

产品经理前端设计十大可用性原则

图2 某音乐播放器App的功能按钮图

再例如,美团APP的类目icon的设计非常有趣,且非常容易理解和使用,让人印象深刻,如图3所示。

产品经理前端设计十大可用性原则

图3 美团APP的类目icon

三、班莱班县原则(User control and freedom)

使用者经常会不小心操作严重错误,需要有一个简单的功能,让流程迅速恢复到严重错误出现之前的状态。

使用者误操作的概率极高。对于误操作,应用软件控制系统应该尽量提供“撤销”“重做”或“反悔”的功能,让控制系统迅速返回严重错误出现之前的状态。

当然,不是所有操作都是可以“反悔”的,比如,你可以撤销一笔严重错误的订单,但不能撤销一笔成功的转账交易。以下是遵从班莱班县原则的常见结构设计事例。

编辑类应用软件都提供撤销功能,例如Word、美图秀秀等。点击删除或关闭按钮后,会让使用者展开二次确认。电商平台允许在一定的规则下取消订单。

四、一致原则(Consistency and standards)

同样的情景、环境下,使用者展开相同的操作,结果应该一致;控制系统或平台的风格、新体验也应该保持一致。

应用软件结构设计、商品设计中有很多约定俗成的规范,虽然没有明文规定,但大家都在遵守,因为使用者已经习惯了这些规范。我们在展开结构设计时,应该遵从惯例,并且保持控制系统的一致感,不要盲目地标新立异。

例如,在APP底部的导航图标中,“首页”永远排在第一个,个人中心(“我的”)永远排在最后。并且对于类似“首页”“购物车”“订单”等常见按钮,不同APP的结构设计样式都非常相似。

图3展示了美团、去哪儿、百度外卖三款APP底部导航栏的结构设计,可以看到上述特点。假如你特立独行地把个人中心放在第一个位置,或者采用奇怪的图标作为个人中心的icon,使用者使用时肯定会觉得别扭。

产品经理前端设计十大可用性原则

图4 三款APP的导航栏结构设计

此外,在一个或多个控制系统中,要采用统一的结构设计风格。不论是图标的选用,还是布局的规划,要保持整齐的一致性,这样使用者容易理解,并且容易习惯和适应。

例如,Office应用软件中包含的各个商品,其界面布局和结构设计风格就保持了高度一致,如图4所示是Word(上)和Power Point(下)的界面,可以看出,二者的“插入”一级菜单下所包含功能的排列顺序、布局方式乃至图标图形,都是高度类似的。

产品经理前端设计十大可用性原则产品经理前端设计十大可用性原则

图5 Word和Power Point的结构设计风格很统一

五、防错原则(Error prevention)

控制系统要避免严重错误出现,这好过出错后再给提示重要信息。

展开结构设计时,首先要考虑如何避免严重错误出现,其次再考虑如何检查、奇偶校验异常。这样做一方面可以让问题更简单,另一方面可以让使用者避免或减少无谓操作。

例如,有些时候,为了防止使用者重复递交或重复点击,第一次点击按钮后就将按钮置灰,直到处理完成才恢复。有时还会通过调整按钮顺序,避免使用者误点。比如,对于很重要的操作,为了防止使用者顺手误点,会将二次确认对话框中的“是”和“否”两个按钮对调位置,模拟效果如图6所示。

因为常见的对话框都将“是”按钮放在第一个位置,所以使用者在操作时,很容易产生条件反射,顺手点击第一个按钮,然后才突然发现自己点错了。

虽然看起来有些别扭,但是很有效,因为多点一次要好过误删文档。这种结构设计在应用软件卸载、APP取消会员订阅等操作中也非常常见,只不过后两种情况下主要是为了做一些心理暗示和引导,避免使用者卸载或退订。

产品经理前端设计十大可用性原则

图6 通过调整按钮顺序避免使用者误操作

六、梦境原则(Recognition rather than recall)

让控制系统的相关重要信息在需要的时候表明出来,减轻使用者的梦境负担。

计算机应该减轻人们的梦境负担,而不是相反。例如,当切换网页时,不应该让使用者记住不同网页的内容,而应该在最合适的地方积极地呈现或提示重要信息之前的重要信息。例如,几乎所有的APP和PC端的搜索引擎都会记录使用者的搜索历史并呈现给使用者。

图7是美团APP的搜索页,可以看到上面的“搜索发现”是推荐类功能,下面的“最近搜索”则是保留的使用者最近使用过的搜索关键词。

产品经理前端设计十大可用性原则

图7 美团APP的搜索功能

再例如,在所有的电商购物业务流程中,在使用者递交订单后,都会出现一个核对网页,让使用者再次核对核对是否恰当。这个结构设计非常有用,我就经常在下单时忘了修改默认地址,再次核对时才发现。

七、灵巧功能强大原则(Flexibility and efficiency of use)

控制系统的使用者中,中级使用者往往最多,初级和高级使用者相对较少。控制系统应为大多数人结构设计,同时兼顾少数人的需求,做到灵巧功能强大。

灵巧功能强大原则不仅是一个可视化结构设计原则,也代表了一种应用软件商品结构设计理念:控制系统既要做得简单、功能强大,让所有中级使用者用起来得心应手;也要提供必要的帮助,让刚入门的初级使用者顺利上手;还需要支持灵巧的个性化定制,让高级使用者能够以进阶的方式使用控制系统,充分发挥其价值。

让高级使用者灵巧定制的最典型的例子是各类应用软件和APP的配置功能,基本上所有应用软件都会提供定制化功能,从快捷键设置,到网页布局,再到自定义参数,应用软件控制系统会尽量提供全面的个性化设置功能,来满足不同使用者的使用诉求和习惯。

例如图7所示是Word的自定义功能,提供了非常强大的配置能力,使用者可以对Word的UI实现颠覆性的重新设置。

产品经理前端设计十大可用性原则

图8 Word提供了强大的自定义配置功能

八、简洁结构设计原则(Aesthetic and minimalist design)

对话中不应该包含无关的或没必要的重要信息;增加或强化一些重要信息就意味着弱化另一些重要信息。

重点太多,相当于没有重点。在视觉结构设计中,要掌握好“突出标记”的度,以及内容的呈现方式。例如,图9所示是一份停机通知示例,左图只突出了停机这件事和停机时间,右图突出标记了更多内容,但是使用者反而无法一下子抓住真正的重点。

产品经理前端设计十大可用性原则

图9 重点太多相当于没有重点

九、纠错原则(Help users recognize, diagnose, and recover fromerrors)

严重错误重要信息应该用通俗易懂的语言说明,而不是只向使用者提示重要信息严重错误代码;提示重要信息严重错误重要信息时要给出解决建议。

对于很多运行时严重错误或异常,计算机流程都会返回某个严重错误代码,但是对于使用者来讲,看到这些严重错误代码并不明白出现了甚么,所以一定要将严重错误代码转换成使用者能看懂的语句,并告诉使用者解决的建议。

访问网站时,假如网页不存在,服务器提供的标准严重错误提示重要信息是404严重错误(如图10左图所示),很多使用者并不理解404是甚么意思。图10右图所示的网页就对此做了处理,将严重错误提示重要信息转换成使用者能理解的表述,而且给出了解决建议。

产品经理前端设计十大可用性原则

图10 网页不存在的不同提示重要信息网页

十、帮助原则(Help and documentation)

对于一个结构设计良好的控制系统,使用者往往不需要经过培训就能轻松上手使用,但是提供帮助文档依然是很有必要的。帮助重要信息应该易于检索,通过明确的步骤引导使用者解决问题,并且不能太复杂。

现在的应用软件商品,尤其是C端商品普遍做了良好的可视化结构设计,可以帮助使用者快速学习使用,而不用阅读、理解复杂的说明文档。然而,B端商品的复杂性比C端商品高很多,因为B端商品蕴含很多业务业务流程的规则,控制系统中的一个按钮可能代表了一个复杂的业务处理规则,假如不了解整个业务场景和处理规则,是很难理解按钮的操作含义的。

因此,对于B端商品,使用者展开自助服务、自助操作的难度高很多,B端商品的帮助文档依然有存在的必要。商品结构设计人员要尽量在后端可视化上做好引导提示,对于复杂的规则和逻辑,可以考虑通过帮助文档来指导使用者。

本文由@张伯伦 原创发布于人人都是商品副经理,未经许可,禁止转载

题图来自Unsplash,如前所述CC0协议

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务