案例分析：产品中非模态反馈”信息设计的意义与方式.docVIP

案例分析：产品中非模态反馈”信息设计的意义与方式 　　　　 　　PMCAFF（）：最大互联网产品社区，是百度，腾讯，阿里等产品经理的学习交流平台定期出品深度产品观察，互联产品研究首选 　　外包大师（）：要外包，找大师PMCAFF旗下高质量互联网外包解决方案提供商联系电话：010　　作者：刘东晨，产品交互设计师，PMCAFF会员，关注用户体验研究与设计 　　编者按 　　本文作者是PMCAFF会员刘东晨，首发于PMCAFF社区文中作者用丰富的案例，如淘宝、知乎、QQ邮箱、ins、Gmail、印象笔记、网易云音乐，解释了非模态反馈的意义和应用，并详细解说了如何设计非模态反馈对于产品设计有参考价值，值得细读，欢迎大家讨论 　　 　　 什么是非模态反馈？　　艾伦·库珀在《about face》第十五章中提到过“富视觉非模态反馈”（rich visual modeless feedback，RVMF）可能是最重要的一种非模态反馈方式了 　　它的“富”在于能够深入全面的信息，让人了解一个进程的状态或者属性，或者当前应用程序的对象它的“视觉”是指按习惯方式利用屏幕上的像素（通常是动态的） 　　它的“非模态”在于信息能及时轻松地显示出来，即不需要用户做特殊动作或者转换模式，就能看到和理解这些反馈（参考http:///books/en//1/） 　　 　　从淘宝的订单页我们可以看出几个“富视觉非模态反馈”实例 　　反馈1：正在进行的交易，框框用浅蓝色表示，已完成或关闭的用灰色 　　反馈2：客服在线与不在线的状态反馈 　　反馈3：用icon明确所售商品的性质的反馈 　　反馈4：当鼠标移至第一个条目时，反馈用户，还有更多操作（转发与标记） 　　反馈5：鼠标移至“备注”icon时，显示非模态弹窗，告知用户详细内容 　　反馈6：第三个订单有修改过价格 　　反馈7：这个订单是在手机上下单的 　　以上通过颜色、图标及详细的文字等信息告知用户某一订单的所有状态和属性这虽然能够让用户掌控所有订单情况，但是在视觉读取上需要耗费用户很大的能量，并且一些某些反馈需要手动操作才行因此这种“富视觉非模态反馈”需要一定的学习成本，它更适用于更多的后台系统中的 　　 　　上面两个图都是为了提醒用户输入有误，左图非模态反馈，信息提示几秒后便消失，并不妨碍用户正常的操作行为右图为模态反馈，中断了用户的操作，需用户手动确认后方可进行后续操作 　　我的定义，非模态反馈（modeless feedback）是一种有效的信息提示的表达方式，这种信息的反馈不会影响到用户正常的操作，更不会打断用户的行为，它能够在关键时刻提醒用户任务的状态是什么，是完成了还是失败了还是出错了甚至是操作提示，这就是非模态反馈 　　模态是指界面中只有提醒弹框才具有可交互行为，其他一切都不可操作；非模态不会把提醒做成弹框，可能会处理成List Notification, Toast list等方式来提醒用户 　　 非模态反馈的意义？　　上一段中，从我对“非模态反馈”的定义中，就不难得出其意义的所在 　　 　　存在的意义在于，帮助用户更加有效的完成任务“有效”包含了提供有用的信息反馈，提高任务的操作效率 　　有用的信息反馈： 　　明确告诉用户任务所处的状态，让用户感受到一切都在掌握之中 　　及时的提醒用户下一步需要做什么，这一步哪些地方操作有误 　　提高任务的操作效率： 　　在不打断用户行为操作的前提下提供反馈 　　在用户“犯错”之前及时制止，而不是“犯错”后告诉他 　　程序必须假装用户始终是正确的，并不意味着用户实际上总是正确的用户出错可能不是程序的故障，但是程序有责任 　　而非模态反馈的意义在于审核用户的操作，然后给出相应的判断，但不能“自以为是”地纠正用户的错误 　　 如何设计非模态反馈？　　上文中，说到“富视觉非模态反馈”的应用，更多的在于后台系统中的行为而“非模态反馈”则是简单的用户输入信息或操作，系统给出相应的答复，在设计这个答复的信息界面时，我们则需要从用户的角度出发，以有效的帮助用户完成任务为目标设计 　　 　　上文中提到的案例，这其实并不是一个很好的“非模态反馈”设计案例，为什么？如左图： 　　第一，它需要用户“提交申请”后才能反馈，并不能在用户犯错之前及时制止 　　第二，这种反馈抢占了视觉信息的中心，而用户的这种犯错并不是一个严重的不可挽救的行为 　　第三，这种反馈出现的位置占据了用户的输入信息框，一定程度上阻碍了用户输入信息的操作 　　因此更好的“非模态反馈”是如右图，在用户跳过金额或快递直接输入单号时，及时的在用户提交之前反馈用户那些遗漏的输入，并以一种更和谐不打断用户操作的方式进行 　　 　　非模态反馈的使用场景 　　下面我将列举一些具体的场景，举例说明一些“非模态反馈