赞助商
立即赞助

用超多案例,帮你学习「所见即所得」原则

交互设计3年前 (2021)发布 流光
1.7K 0 0

王M争:「所见即所得」原则我记在前文章提到过,是没有详细说明。最近在体验些品时,发现很多交互设计上坑都可以归纳到「所见所」上。

所见非所得

我们可以首先来看下「所见所」案例:上寄件去北京,在填写收件信息时候,发现了个「智能填写」功能很有意思。所谓「智能填写」是 OCR识技术,系统可以识图片上地址。例如,你收件地址正好是身份证上住址,那么你可以上传身份证照片,系统接识照片上地址而不需要手动去输入。

用超多案例,帮你学习「所见即所得」原则

用户具体操作流程是:

拍摄/上传照:点击「上传图」按钮,用户以选择拍摄或者上传相册里的照,框选合适的识别区域。

系统识别并展示结果:系统会自动识别图片中的址信息,并且输入框中展示,如果识别错误的方,用户可以手动编辑修改。

用户确认:用户对地址息确认无误了,点击「智能填写」按钮,输入框的地址息会动回填地址栏。

用超多案例,帮你学习「所见即所得」原则

了解了大致流程,来一下款竞品。产品A和B都提供了「智能填写」的功能,但是在交互计上存在差异。产品A,当用户上传完图片才会出现「智能填写」按钮;产品B是全程展示「智能填写」按钮的。个人更加偏爱产品A的理模式,因为当用户都没有上传图片,给用户展示「智能填写」按钮是没有任何义的,这的「智能填写」虽然可见但是不可得,用户也不能点击。当然有人会说,虽然不可点击,但是展示了也没什问题吧?当然有问题,它会给用户带来个痛点:

  1. 增加了用户的学习本

对新用户来说,产品A肯定更加容易上手。因为新用户一进个页面,只能看到上传图的按钮,用户明白我首先要上传图。产品B是直接一股脑地把所有选项展示出来,用户不道选项之间的联系和操顺序。

  2. 阻断正常操作流程

给户展示了他们本应该看到的元素,可会阻断正的操作流程。户如果还没上传图片,就点击「智填写」按钮会直接报错,「传参数为空」,户哪里看懂这是么意思。

用超多案例,帮你学习「所见即所得」原则

之前在火车取票,前面队的大婶跟我说她的票取了。我凑过一看,发现她没有闭购保险的弹框。因为这个弹框没有盖住「确认打印」按钮,户误为还是可点击的,导致无法正成取票流程。

用超多案例,帮你学习「所见即所得」原则

了解到这些痛点,那么如何才在交互设计上实现「见即得」原则呢?我总结了两个方法:限制和就。

限制原则

了解限制原则,我们需要答两个问题:

  1. 为什要限制?

因多限制,多会哪些坏处?内多,用户处理不过;选项多,用户挑花了眼;时间多,优惠券限限制用户懒得用。

  2. 什么?

限制用户与界交互触。是以智能填写为例,前界有三个触:上传图片按钮、输入框、智能填写按钮。这三个触分应着步骤、步骤和步骤三。如我们在步骤阶段用户提供了步骤三触,保不齐会有用户尝试去交互,这样效操作会触发报场景。所以用户处于个线性操作流程,根据用户所处阶段,分析用户可能进交互操作,提供交互触,保证用户看到触都是可交互。

罔顾用户的操阶段,一股脑的把所有触点提供给用户。设计师倒是很省心,但是用户却很糟心,他们需要花时间去判断和分析每一个触点的用以及它们之间能存在的联系。个工应该由我们代劳,我们来分析用户处不同阶段所需要的功能触点。

举知乎的例子,知乎一「向知友提问」的功能。但这按钮只会用户滑动搜索结果页3屏后会出,因滑动了3屏,我们可以猜测用户对当的搜索结果不满意,引导用户去提问。

用超多案例,帮你学习「所见即所得」原则

当然限制原则不仅仅限制交互触点,还可以应用到产品逻辑中,帮用户解决很多问题。我曾遇到过一场景,公司线了一款优惠券,用户点击「立即领取」按钮即可领取。但些用户会被风控判风险级过高,导致领取失败。对于这报错文案,我们改了好几版,但每次都会收到用户的投诉。我们无法直接告诉用户,因风险级过高导致无法领取,因用户风险级过高因通了某项业务。当时通的时候,我们并未告知通后会被判高风险用户。所以了不必的麻烦,好的办法就行判断置,如果判断用户高风险用户那么就直接不展示该优惠券。

就近原则

从面的阐述中,我们可以发「所见即所得」原则根本的目的了节省用户的操作时间,提升产品易用性。广义的操作时间还应该包括了用户对于反馈的感知时间,因只充分理解系统反馈的信息能行一的操作。如何帮用户速的消化反馈的信息呢?因反馈系统对于用户操作的回应,那么我们可以让操作反馈尽的贴近一点,这就就近原则。就近原则可以分两类:置就近形式就近。

  1. 位置就近

所见即所,这里「所见」即代表着用户视线,而用户视线是留在上个交互触附近。

用超多案例,帮你学习「所见即所得」原则

例如,是寄件场景,要填写发件信息,我懒新填写遍地址,正好看到输入框右边有个附近地址功能。我了下,没有反应,又了几下才发现底部出现了个「附近地址」列表。这里交互触是「附近地址」文链接,我视线也是留在附近,没有注意到下列表已经出现在底部。操作和反馈完全不在视觉区域。

  2. 形式就

形式就近,这的形式指反馈形式。目前最通用的反馈方式是弹框,弹框的弊端也就恰恰在于它的「通用」上。所有类型的反馈都可以用弹框来承载,用户无法立刻知弹框所传递内容的是什。既然反馈是系统对于用户操作的回应,而用户操作是一个个交互触点所触发的。如果可以通过改变触点身形的变化来完成息的传递,用户知起来会更加容易。

用超多案例,帮你学习「所见即所得」原则

举个例,用户在输入登录密码的候,其触点是输入框。当用户密码输入错误的候,可以通过抖动输入框的方式告知用户输入错误。这抖动是现实生活中「摇头」的映射,都知道摇头代表着否定的思,用户不用弹框上的「密码错误」个字也能密码输错了。

总结

以上就是对交互计中「所见即所得」则的总结和析,如果你有不同的见和法,欢迎留言讨论。

注作者的微信公众号:「王M争」

用超多案例,帮你学习「所见即所得」原则

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

简介说明 1. 理论表述 对于许多事件,大约 80% 的影响来自 20% 的原因。 2. 理论背景 1896 年,意大利经济学家帕累托出...
帕累托原则
同域原则 Law of Common Region   1. 简介说明 理论表述 如果元素处在一个具有明确边界的区域内,那么在用户的感知中,这些...
同域原则
简介说明 1. 理论表述 用户将大部分时间花在别人家的网站(产品)上,而不是你的。这意味着他们希望你的网站(产品)跟别人...
亭雅各布定律
《名侦探柯南》中总是提到福尔摩斯的一段话:「When you have eliminated the impossible, whatever remains, however improb...
干扰效应
简介说明 1. 理论表述 任意一点移动到目标中心位置所需要的时间,与目标距离正相关,与目标大小负相关。 2. 研究背景 19...
设计定律
简介说明 1. 理论表述 为了更方便地理解这个世界,人类会将接受到的大量信息进行过滤和简化。 2. 理论背景 简洁法则是所有...
简洁法则
很多设计师经常说:「我只懂干活,不懂怎么说,做了很多设计却没有理论支撑,总是难以准确表达自己的设计去说服甲方」。本期...
心智模型
设计师必须具备丰富的知识储备,在各个行业中找寻相通的规律和事物的本源。经过多年的沉淀,前辈们留下了大量的通用设计法则...
新用户引导