最专业的八方代购网站源码!

资讯热点
设计摘要:如何在B-end产品中设计“操作反馈”?

发布时间:2023-6-23 分类: 行业资讯

“运营反馈<旨在告知用户其运营的结果,期望,影响或后果。它是产品与用户交互的重要节点。合理的反馈设计可以在产品和用户之间建立良好的互动,帮助用户更好地了解产品和功能,避免或减少混淆和错误,并增强整体用户体验。

“操作反馈”是指系统对用户操作给出的反馈或者在使用产品时由用户的行为引起的变化。这是反映用户与“机器”之间互动的关键场景。反馈必须包含两个信息输入和输出链接,这两个链接都是必不可少的;这里,“输入”是指用户的操作。

从广义上讲,产品设计中的“反馈”是指产品对用户行为的即时响应。本文主要总结了B端产品(PC端)设计中用户操作反馈设计的类型和风格,以及设计中需要注意的问题。我希望它可以帮助产品相关人员,特别是交互设计师。 。

应该指出的是,诸如页面提示,消息,通知,功能指南等的那些功能是设计者想要通知用户或希望用户理解的更多信息。从广义上讲,它也是用户系统“反馈”的一种信息方式,但其中大部分不是由于用户的直接操作,而且没有“即时响应”的特征,所以它超越了本文的范围。

首先,根据场景分类,操作反馈可分为五类

1.操作确认

需要用户进行二次确认的常见方案包括:付款,覆盖,退出,删除,提交,离开,修改,替换……

对于某些具有“破坏性”或不可逆操作的操作,我们应该让用户在用户操作之前“再次确认”。除了用户第二次确认之外,更重要的是告知用户当前操作的影响,“危险”,对其他模块的影响或将来的使用,引导用户仔细决定自己的操作,从而减少用户犯错误的可能性。另一方面,对于某些金融或企业服务产品,这也是一种必要的豁免手段 - ——避免因无意的用户操作而导致与商家发生冲突或纠纷。

一些用户可能会觉得这种“二次确认”会很麻烦甚至“有些愚蠢”,尤其是那些已经非常熟悉该产品的老用户。但是,对于与用户财产相关的特殊产品(如财务管理和企业服务),避免和防止用户因瞬时意图造成的损失比“减少一次点击带来的便利”更为重要。 ”。另外,并非所有操作确认都是使用具有掩模层的模态弹出窗口实现的,并且一些操作确认可以使用非模态浮动层,但是优选地可以在操作触发区域旁边显示以防止被用户忽略。

在移动端,有一种交互式,用户可以滑动到>删除”按钮(当前位置),点击后,将其替换为“ldquo;确认删除”按钮,这种形式可以很好地替代炸弹窗口或浮动层不会对用户造成太大的干扰,同时改进必要的防错设计。然而,在PC端产品中,弹出窗口或气泡浮动层的使用可能更符合用户的操作和认知习惯。

2.运营结果

常见的场景是:提交,添加,删除,保存,发送,搜索,查询,下载,上传和下载; …

在这些场景中,当用户完成一系列操作(例如单击按钮,填写表单和完成最终任务)时,设计人员需要明确告知用户任务结果:失败或成功。这允许用户对他们自己的操作更有信心并且对当前任务更“控制”。

如果只是正常通知用户操作成功(例如应用程序,删除成功,提交成功……),建议使用toast提示,让用户“学习””可以(在一定时间后自动消失),并且不需要特别注意或点击关闭。

但是,吐司消失的功能会自动确定它无法携带更复杂的提示。否则,用户难以在有限的时间内理解所有信息,并且用户将是无形的压力。虽然我们主张尽可能简洁地复制文本,但总会有一些操作结果难以在一个句子中使用。 “我不清楚”,有时我用图片来补充说明。这时,我可以考虑使用弹出窗口,浮动层甚至是新窗口。要呈现的页面(在电子商务应用程序中尤为常见)。

一些常见的结果暗示

有时在某些复杂场景中,除了告知操作结果外,用户还需要了解对产品,其他模块和任务的影响;有些还需要引导用户继续下一个任务。如果操作失败,您需要在通知结果时通知用户失败的原因,如何处理等。

除了显示操作结果外,还要告诉用户如何处理它

当用户执行诸如搜索,查询等操作时,产品应该能够及时响应并直接在页面或搜索框上通知用户结果。在这种反馈中,搜索框的操作提示是一种特殊的提示。许多设计师提出了一些与操作反馈相关的非常好的提示,以增强用户的搜索体验,如模糊搜索,关键词推荐,关联,搜索结果的即时响应等。有兴趣的朋友可以上网搜索相关文章,这里不再详述。

3.任务流程

常见的场景是:删除,导入,查询,上传,下载,刷新,安装,更新,卸载和hellip; …

在这些情况下,任务可能无法立即完成,系统需要具有加载,验证,查询或计算的过程。在这个过程中,我们必须从用户的操作中获得适当的反馈——设计师需要告诉用户两件事:

我的行为(提交,下载,安装和hellip;…)是正常的,产品正在或正常运行;

这个过程需要一点时间,请耐心等待;

处理动画:

良好的反馈可以有效地减少用户的疑虑,减轻用户在等待过程中的焦虑和不耐烦。一些有趣的加载动画甚至可以让用户感到高兴。还有一些网页游戏加载和转换页面将设计只需要简单点击的小游戏,这使得等待过程非常愉快,甚至是一种“享受”。

这可能是针对稍微严重的B端产品而过度设计的,但这个概念值得学习:我们可以使用一些简单而有趣的小动画,再加上准确而生动的文案,这种情感设计允许用户“始终意识到”这个过程变得更快,可以有效地增强用户的愉悦感,从而增加他们对产品的喜爱。

有趣的过渡动画可以减少焦虑并给用户带来愉悦感

实时数据更改:

在列表中添加或删除大量数据时,如果您可以让用户实时查看数据和列表行的增加和减少,您可以使用户更“安全”,并且有一种“期望”这个过程,让用户感知任务已经在进行中并将很快完成,减少了用户等待的焦虑。

点击“远程采集”,页面数据将实时增加

4,表单验证:表单状态,字段输入格式,长度;

在用户填写表单并点击“保存”,“提交”后,我们需要验证用户输入的内容。除了避免或减少用户错误之外,它还可以调节用户的操作,从而可以控制,标准化和结构化存储在系统中的信息。

我们可以看到,在许多产品中,产品和开发人员在验证表单填写内容时喜欢使用Toast提示。对于大多数简单形式,这没有什么不妥,它比使用弹出窗口的产品更好,但对于稍微复杂的形式,我们有更好的设计。例如,使用在操作对象(例如输入框等)附近显示的突出显示的文本提示可以便于用户及时且快速地定位错误。

然后,当用户填写表单时,校验和何时更好?根据验证,我将表格检查分为“ld”;发布“”和”pre-position“。

后的检查:

在B侧产品的形式,似乎显影剂倾向于检查"交"" ;,即,当用户点击[提交&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& QUOT它达到的要求。在最后的用户动作浓缩检查的优点是它可以减少很多前端的控制,并在同一时间减少请求的数目到服务器当用户输入(除了一些简单的字段长度控制),从而减轻了背景压力。

检查后:单击并提交时检查必填字段是否为空;

预验证:

这个出发点是可以理解的,但据我所知,很多预验证不会消耗太多的资源;在这个前提下,我会建议预验证,以便用户可以输入更及时。帮助他们检查,而不是回去填写了十几场后重新审视,如果他们的投入是正确的。

校准前提示出现的时间通常是在用户输入或选择后目标控件失去焦点时。然后,当用户修改条目(重新获得焦点)或更改条目的内容时,提示消失;当用户完成修改时再次检查(再次,焦点被移除)。这样的检查应该是更好的设计体验。

在大多数情况下,我建议使用与目标关联的结帐提示,例如悬停图层,提示栏,输入框旁边的突出显示文本或表单区域,输入框边框或背景上的突出显示。 。这样的提示对于用户快速定位错误非常方便。

输入框失去焦点后,请验证输入格式是否正确。

5,操作提示/提示

常见的场景是:指示控制状态,显示/隐藏功能,渐进信息显示,操作提示和hellip; …

对于一些可以交互的页面元素,除了在视觉上区别于静态元素之外,当用户鼠标悬停时,鼠标指针和相应的元素应该改变以告诉用户当前控件可以是执行点击,拖动等,最简单的,例如输入框,当鼠标悬停在鼠标上时将变为“手形”,并在获得焦点时突出显示,以通知用户它可用并输入状态。

相反,当某些控件(如输入框,下拉框等)被禁用时,您还可以通过将指针更改为“禁用”图标的形式来提示用户,这也是一个简单直观的解释。

“禁用者;;悬停时的图标

由于页面空间的限制和简单设计的要求,一些图形信息或功能按钮无法在当前区域显示。这次你可以使用渐进的方式来渲染。当用户将鼠标悬停在目标范围上时,将显示相应的信息,按钮或条目。这种基于用户行为逐步显示内容的方式可以给用户良好的控制感,同时,我们可以获得更简单和更新的界面。

鼠标悬停时会显示图标按钮的名称

还有一种特殊形式的操作反馈:操作提示或描述。常见的情况是,用户点击按钮后,系统会根据用户的当前状态提示用户注意问题和问题,或者提供详细的说明和指导。 。

但是,应该注意的是,设计者必须确定这个“提示”是重要的和必要的,影响用户的认知或完成任务,否则这个提示(很多都是模态弹出窗口)会让用户感到尴尬,粗鲁和打断。这种体验无疑是非常糟糕的。

二,按设计风格分类:

常见的反馈方式有:页面级别提示,弹出窗口,浮动/气泡,吐司,轻量级提醒(文本,图标,组件高亮等),运动,声音和振动。

1.页面级别提示

这意味着在用户操作之后,它将跳转到新页面并通过图形信息呈现各种操作反馈。这种页面跳转的缺点是它给用户一种破损感,这使他们感觉更复杂。它更适合呈现复杂的操作结果或解释。

2,弹出窗口

这通常是指具有遮罩层的模态浮动图层样式,包括传统的对话框形式,以及包含文本和手绘图形等元素的浮动图层。这种形式的反馈通常更“强制”和“关键”,仅针对非常重要的提示和说明,使用时要小心。良好的反馈设计应尽量减少模态弹出窗口的使用。

3.浮动层/泡沫

这是指与操作对象关联的非模态浮动图层或气泡,使用文本或图像为用户提供实时提示。这种样式反馈比页面和弹出窗口更“轻”,可以直接显示在操作对象附近,对用户的干扰较弱,相关性较好。

4,吐司提示

由用户操作触发并且可以在特定时间自动消失的各种文本或图形提示。吐司提示会自动不向用户发送消息,一般适合告诉用户一个简短的“查看行”信息,如“提交成功”,“完成”等。在使用toast之前,请确保要反馈给用户的信息(如果被用户忽略)会产生严重后果吗?如果是这样,则不应使用此表单。

5,轻量级提示

它通常出现在动作对象附近,或者是操纵控件的样式变体。如突出显示文本,图标,输入框突出显示,按钮禁用状态等。此类型非常适合用于具有大量字段的表单验证,这使用户可以轻松快速找到填写问题的位置。

6,动态效果

在用户操作之后,通过控件,内容或页面的移动,消失等向用户通知当前状态,进度或操作结果。简单有趣的动画可以非常直观地告诉用户页面的变化,同时有效地减少用户的焦虑和等待,甚至增加产品的商誉。

7.声音和振动

以振动或声音的形式给予用户反馈,例如QQ的振动(这不是PC侧设备的振动,但实际上是一种运动效果),以​​及当迅雷下载时的声音完成&quoquo;叮”声音和振动似乎更多地用于移动端。由于这种风格的反馈过于强烈,因此通常不建议在PC的网页设计中使用。

如何选择设计风格?

以下是我的总结,在B端产品设计(PC端),“返回”类型和风格对应。我们可以根据功能类型和“反馈”的实际场景选择合理的风格。

三,总结

“运营反馈”主要目的是告诉用户操作的结果,期望,后果(或可能的后果)或后果。它是产品与用户交互的重要节点。合理的反馈设计可以在产品和用户之间建立良好的互动,帮助用户更好地了解产品和功能,避免或减少混淆和使用错误,并改善整体用户体验。

在设计用户行为反馈时有两个基本原则:首先,在任何时候,良好的“反馈”设计都可以减少用户对自己行为的疑虑,疑虑和担忧;请注意,除非是特别重要的提示或描述,否则应尽可能避免此反馈,以中断和干扰用户。

每日设计总结,缺点,欢迎拍砖。

本文最初由@Rindy发布。未经许可,禁止复制。

该地图来自unsplash,基于CC0协议

« 江湖商圈020系统“三剑客”重逢一套营销功能上线! | 春节营销案例:谁将与新年礼品套餐一起玩这个新招数? »