TO C和TO B产品需深知的差异化设计理念(三)

导语

上一期的文章中,我们较深入的讲述了TO B和TO C产品在产品调研如调研目标、调研对象、调研方法等以及业务设计如设计起点、MVP思路、模块划分等的差异性,以给各位设计人员在处理TO B和TO C产品设计时提供参考。那么,在本期的文章里,我们将继续讲述TO B和TO C产品的交互原则以及在用户体验设计上的差异,希望能继续给大家带来一些启发。

移动互联网产品不管是TO B还是TO C用户体验的本质是不变的,即保持产品的易用/易学性、保持设计的一致性,优秀交互体验等等,要抓住产品的特性,不忘记设计的本质才更能做出优质的产品,在设计上都应遵循尼尔森10大交互原则。

尼尔森的十大交互原则

尼尔森(Jakob Nielsen,人机交互学博士)通过研究分析两百多个可用性问题,提炼出了十项通用型原则,并于1995年1月1日发表,直到现在它依旧是产品设计与用户体验设计的重要参考标准。

1、系统可见性原则(Visibility of system status)

系统应该让用户知道发生了什么,在适当的时间内做出适当的反馈,指的是用户的每次操作,都给他一个反馈,成功了就告诉他成功了,失败了就告诉他失败了。绝不能在用户操作后毫无反应,让用户猜测到底发生了什么,如果长时间没有任何反馈,用户则认为产品存在问题,进而对产品产生抱怨和失去信心。


图1系统对用户操作结果的反馈示意

在适当反馈原则的设计上,案例也很多,比如①、安装程序时显示进度条,并预估还需要多久结束;②、上传文件时显示进度条,并提示预估剩余时间;③、提交表单时,如果校验失败,则在填写有误的内容旁边提示错误原因;④、程序未响应时,系统会让用户选择是关闭程序还是等待程序响应等等。

同时,如果系统处理时间比较长,也需要用“进度条”、“等待动画”或者“下载动画”等形式告诉用户当下的情况。

2、隐喻原则(Match between system and the real world)

系统要采用用户熟悉的语句、短语、符号来表达意思。遵循真实世界的认知、习惯,让信息的呈现更加自然,易于辨识和接受。在人机交互设计中,程序的沟通和表达、功能的呈现,都要用最自然的、用户容易理解的方式,避免采用计算机程序语言的表达方式。设计时要采用符合真实世界认知的方式,让用户通过联想、类比等方法轻松地理解程序想表达的含义。例如,在云音乐播放界面,没有文字描述,只有图形表达,但用户也很容易理解每个按钮的含义。


图2 云音乐播放界面的播放器截图

3、用户的控制性和自由度(User control and freedom)

用户在界面上操作时,会经常因手指过粗、意识转移等等原因而导致操作错误,在这个情况下,需要有一个简单的功能,让界面迅速恢复到之前的状态。那么对于系统而言,应该尽量提供“撤销”、“重做”等类似的功能,这可以有效减少用户焦虑、失落等情绪。

在现实软件设计里,这也原则也普遍应用,比如①、编辑类软件都提供撤销功能,例如Word、AXURE等;②、在点击删除或关闭按钮后,会让用户进行二次确认;③、电商平台允许在一定的规则下取消订单等等措施,实际上都是增加用户的控制性和自由度。


图4 系统的“撤销”操作设计示意


4、一致性和标准化(Consistency and standards)

在同样的情景、环境下,用户进行相同的操作时,UI界面的风格设计、系统的处理结果应该一致、以及用户感受等都应该一致,目的是为了沿用用户习惯,避免因重新学习而产生的不适。在业内,虽然没有明文规定,但大家都在遵守,不要盲目地标新立异。因为用户重新学习的成本是巨大的,甚至因为这个原因而我们被淘汰。

比如一个返回按钮,在同一个app内,不同页面不一样,达不到用户体验上一致性。


图5 APP内返回按钮设计样式

5、防错原则(Error prevention)

是指通过系统的设计、重组或特别安排,防止用户出错;并且在出错时,系统应提供纠错和修改的功能。意思是,我们在进行设计时,同时需要模拟用户可能出现的错误做操,并对这些操作进行规避和预防,其次再考虑当错误发生时,该如何检查、校验异常。这样做一方面可以让问题更简单,另一方面可以让用户避免或减少无谓操作,从而提升了体验。

例如,获取验证手机验证码按钮,点击发送后,一般会倒计时,一段时间之后才能发,因为验证发送需要运营商响应时间,防止用户以为没有收到验证码,一直点击触发发送。


图6 用户登录界面验证码再次触发时间示意

再比如,对于一些删除等重要的操作,为了防止用户顺手误点,可以进行二次确认,并且删除是慎重操作,用红色标识,提醒用户,不要误删!


图7 删除操作的二次确认弹窗

6、识别比记忆好(易取原则)(Recognition rather than recall )

系统在进行界面切换或用户进入相关新的界面时,系统需要将相关的重要信息重新展示出来,减轻用户的记忆负担和焦虑。例如,微信小程序会保留的用户最近使用过的小程序。


图8 微信小程序入口界面截图

再例如,在所有的电商购物流程中,在用户提交订单后,都会出现一个核对页面,让用户再次核对填写是否正确。


图9 订单交易确认界面截图


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

系统应为大多数人设计,同时兼顾少数人的需求,做到灵活易用。灵活易用原则不仅是一个交互设计原则,也代表了一种软件产品设计理念:系统既要做得简单、易用,让所有人用户用起来得心应手。例如:中燃crm移动APP,首页常用微应用,可以根据用户使用习惯自行编辑修改。


图10应用及编辑界面截图

8、优美且简约原则(Aesthetic and minimalist design)

对话中不应该除本次想表达的核心内容外的信息,重点太多,会导致没有重点;同时,采用增加或强化一些信息就意味着会弱化另一些信息。所以在视觉设计中,要掌握好“突出标记”的度,以及内容的呈现方式。例如,所示是一份停机通知示例,左图只突出了停机这件事和停机时间,右图突出标记了更多内容,但是用户反而无法一下子抓住真正的重点。


图11 停机通知文案示例

再例如网易云音乐及QQ音乐播放页面,特别是QQ音乐的设计,在音乐的播放界面,可以说除了播放相关的功能做了突出外,其他都以较弱的视觉呈现着。这恰恰可以突出界面的核心内容,同时兼顾了功能主次分明、美观简约,如下图:


图12 网易云音乐和QQ音乐的播放界面截图


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

当用户操作APP出现错误的时候,要提示给予提示和解决建议,并通过简洁明了的语言表达出来。那么,这其实就要求产品经理提前对用户各自错误操作事先做一个预判并做相应的校验逻辑,并实时检测用户当下的行为。当用户出现错误时,系统就可做到及时提示,并给予相应的解决方案来引导用户。如果无法帮助用户从错误中恢复,也要尽量提供帮助,把损失降到最低。例如,在一些表单填写时往往会做校验,如手机号、身份证号输入时的自动检查,当出错时也会提示异常。


图13 系统自动检查用户输入的示意

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

即使系统是不需要使用帮助文档是最好的,但我们也应该提供一份帮助文档,以防用户遇到真正问题时没有渠道寻求帮助,在京东、淘宝、微博等各大APP都存在类似的设计。而且,在入口设计上,需要提供进入帮助文档的快速入口或者检索框;再文档内容的设计上,要以以用户的任务为核心,列出相应的步骤,避免因太多文字而增加用户的阅读成本。


图14 淘宝等APP的帮助入口设计

虽然TO B和TO C产品在交互设计上,都尽量遵循尼尔森的十大交互原则,但在具体的设计落地上,还会因两者产品的本质差异带来的一些思维的、细节的差异,体现在用户体验需求差异以及用户体验设计差异上。

用户体验需求差异

体验需求差异

TO B产品,用户需要的是解决业务问题、提高效率,交互体验并不是最在意的,而且复杂的界面和交互设计会增加研发的工作量,只需要满足用户集中精力完成具体工作事项、不被打扰地进行严谨的流程操作,所以在视觉体验上多是保持干净简单的简洁风,不需要花哨的前端界面,也不需要充满创意的控件。很多产品新人喜欢在界面设计或交互设计上做太多的创新,实际上大可不必,因为B端客户更在意的是功能本身是否能解决业务痛点。


图15 TO B产品的用户特点和业务特点

但在做TO C产品时,要学会看破人性的弱点,深层挖掘用户的痛点,需要兼顾“用户体验”和“商业化变现”的平衡。所以用户体验上就是TO C产品的生命线。不仅要让用户有快速流畅的使用体验,更要用趣味性的设计引导用户自发地做社交分享。


图16C端用户需求属性


图17 人性APP中的应用示意

用户体验设计差异

1、界面设计色彩差异

TO B标追求的是产品的简约实用,提高员工效率,工作效率,进而达成业务目标,用户在使用时,也大多是理性的状态。所以在界面的设计上,色彩不需要太跳跃,统一就好,并且主色和辅色的色差不能太大,以免强烈的视角反差而造成用户的不适。

例如,tob移动app的颜色设计规范,采用相近色和适当的互补色为主,使整体的视觉效果柔和同时又突出了必要的重点。

图18 crm系统APP的色彩规范
图18crm系统APP的界面色彩搭配示意

但在TO C的产品中,为了追求极致的体验,快速吸引用户,产品配色往往会比较艳丽,但同时也会兼顾产品本身的调性以及必要的氛围营造,例如网易严选首页和活动弹窗。


图19 网易严选首页和活动页面截图

2、隐喻原则差异

TO B产品在这条原则上需要慎用,因为一个TO B产品功能极其庞大,每个功能操作繁多,用户学习成本非常高,所以能加上文字描述最好加上,劲量不要用隐藏手势操作。

而TO C则是相反极致准求该原则,界面追求直接简化,很多隐藏手势操作,例如,列表删除操作,TOB选用添加操作按钮,TO C则会选择手势操作。


图20 TOB产品(左)和TO C产品(右)的列表删除操作设计

3、防错原则差异

TO B为了追求让用户快速执行操作,可以适当放弃界面优美,也要保护极致的防错性能;而TO C则是界面优美排在第一位,可以适当牺牲防错性能。例如,操作交互提示框,TO B产品为了突出用户执行的业务,把某些操作按钮做大,TO C产品则是遵循界面优美,采用统一设计居多。


图21 TO B产品(左)和TO C产品(右)的防错提示设计

4、容错原则差异

TO B产品为了追求让用户快速执行操作,容错原则交互要明细;而TO C产品则是界面优美排在前面,容错要跟界面美观结合。例如,表单的输入,TO B产品设计原则是突出必填,增加“*”号标识;TO C产品则是遵循界面优美,采用统一设计。


图22 TO B产品(左)和TO C产品(右)的表单录入设计

结束语

不管是To B还是ToC用户体验的本质是不变的,保持产品的易用/易学性、保持设计的一致性,优秀交互体验,是我们作为设计人员的追求目标。tob还有一点非常重要,就是站在用户的角度看问题,解决用户实际工作中的需求,为完成工作提供便利性,而不是仅仅完成客户需求。

你可能感兴趣的:(TO C和TO B产品需深知的差异化设计理念(三))