a

反馈机制的设计

目录

1.背景介绍

2.知识剖析

3.参考文献

4.更多讨论

1.背景介绍

反馈是产品设计中非常重要的一个环节,它的存在与否会极大的影响你产品的用户体验。

反馈从涵盖范围上来说可以分为两种:操作反馈与用户反馈。这里说的主要是操作反馈,或者叫互动反馈,为了表述方便,以下都简称反馈。

2.知识剖析

一、为什么要反馈

因为用户的每一步操作都得不到反馈,你对当前系统的状态一无所知,就会产生一种焦虑感。焦虑感发展到最后是很恐怖的,用户直接可能就放弃你的产品了。

反馈机制建立的必要性:帮助用户随时感知系统的状态,满足用户的控制感,消减不确定性给用户带来的负面情绪。

二、反馈概述

互联网产品存在两种界面反馈机制:

第一种是通过快速的界面改变来进行反馈,例如点击视频播放按钮,视频立即开始播放;微信点击聊天文本框,立即弹出键盘等。正常情况下,这类反馈无需设置任何反馈信息提示。

第二种是,当界面变动很慢或者界面没有响应时,如果不给予提示,用户不确定自己的操作是否成功,会让用户感到困惑,这类提示是今天要阐述的反馈。

那么多长时间给出反馈提示才是合适的呢?

0.1秒:这是用户感受系统是在即时反应的阈值,系统除了直接显示操作结果外,不需要其它特殊的反馈提示。例如,用户点击播放按钮,视频立即播放,而不会提示“视频将要播放”。

1秒:通常来说,操作反馈的延迟时间在0.2秒到1.0秒之间仍然不需要特殊的反馈提示,但此时用户已经感觉到自己对数据失去了直接的操控。以点赞为例,如果不能在1秒内响应,用户就会感到UI控件响应很慢,失去了操作的流畅感,极有可能点击以后再次点击才发现已取消点赞,连续多次点击导致操作失败。

1秒到10秒:对于超过1秒的延迟,有必要通过加载动画、反馈提示语等手段进行提示,告知用户服务没有宕机,程序正在处理相关的任务,请继续安心使用。

超过10:10秒是用户将注意力保持在当前任务的时间阈值。任何需要超过10秒才能完成的任务,需要有明确的进度指示器(条状进度条、饼状进度条、倒计时等)提醒用户,以缓解他们的焦虑。同时为用户指明中断当前操作的方法,让用户可以切换任务,合理安排自己的时间去处理其它事务。例如,爱奇艺片头广告的倒计时提示,同时可以下滑页面查看其它内容。

三、反馈方式

常见的反馈方式有以下6种:弹框、页面、标签、(功能性)动画、小红点和声音。

1.弹框

弹框是最主要的反馈方式。

弹框可以分为模态弹框和非模态弹框,它们最大的区别就在于是否强制用户交互。

模态弹框会打断用户当前的操作流程,用户不在弹框上操作的话,其余功能都使用不了。

所以设计师在构建反馈体系的时候,模态弹框都是用于展示优先级最高的信息。一般都会出现在用户在进行有风险性,不可逆的操作。

非模态弹框相比来说就显得“温和”多了,出现2-3秒之后就会自动消失,不会对用户造成干扰。属于轻量型的反馈。

弹框体系总结

弹框我们可以分为两种:模态弹框和非模态弹框。

我们日常所说的弹框是一个很笼统的概念,所有的对话框,浮层,提示条我们都习惯性的称之为弹框

弹框我们可以分为两种:模态弹框和非模态弹框

模态弹框

模态弹框和非模态弹框最大的区别就是是否强制用户交互。

优点是可以很好的获取的用户的视觉焦点

缺点是打断了用户的当前操作流程

常见的模态弹框种类有对话框(Dialog/Alter),动作栏(Actionbar/Actionsheet/ActionView)和浮层(Popover/Popup)

对话框

对话框一般用于用户进行一项很重要或者有风险的操作,这时会弹出一个对话框来给用户提示信息,用户根据提示来进行判断。一般会出现在屏幕的中间位置,会对界面的主要内容造成遮挡。

目前来说对话框的设计样式繁多,用户可以进行信息录入,也可以用于营销宣传。

动作栏

动作栏在我看来可以看成是对话框的一个加强版,因为无论是alert还是dialog一般都只有两个按钮。而动作栏可以提供多个功能按钮,而且展示的样式比较多变。

但是也有例外,有的动作栏只有两个选项。

浮层

浮层是用户点击控件或者界面某一区域浮出的半透明的临时视图。浮层的样式跟动作栏很相似,都可以向用户展示多个功能选项。但是浮层可以出现屏幕中的任何位置,能够给用户更具有指向型的提示。

小结:

在不考虑信息录入情况下,对话框适用于用户进行判断操作,而动作栏和浮层适用于用户进行选择操作,而浮层相对于动作栏更具有指向型。

非模态弹框

与模态弹框相比,非模态弹框最大的区别是不强制用户交互,也不会弹出半透明背景层,非模态弹框停留一段时间后会自己消失。所以相对于模态弹框来说,非模态弹框属于轻量型反馈,不会对用户造成太大的干扰。常见的非模态弹框有toast(hud)和snackbar。

Toast

Toast主要用于用户完成操作以后,告诉用户操作结果或者状态的变更。Toast其实是属于Android的组件,iOS里有一个相类似的是hud,最常见的就是音量调节提示。但是现在iOS和Android的界限不断被打破,toast现在也被广泛应用于iOS界面设计中。

如果我们去看Android给的设计规范,会发现toast有以下几个特点:

1 只出现在屏幕底部

2 只能放文字

3 非模态弹框

但是我们会发现现在的一些toast是可以出现在屏幕中任何位置的,而且也可以加icon,所以说不能教条主义。

有前端给PM说的:“只要你们能设计出来,理论上我们都可以做出来,但是我们可能会砍人。”

所以真实的toast是可以出现在屏幕的任何位置的,而且可以加icon,甚至连背景层颜色都能变。

设计的时候不仅要去看那些设计规范,还要花点时间跟开发沟通一下。

Toast的优点是不会打断用户当前的操作流程,属于轻量型的反馈方式。

缺点是容易被用户忽视,而且不适合展示过多的信息,可能在用户读完之前就消失了。

为了提升信息的可读性和增加样式美感,现在toast都会采用文字加icon的组合样式。

Snackbar

Snackbar一般是由文字和功能按钮组成的,用户可以点击按钮交互,即使用户不点击snackbar也会自动消失,一般位于屏幕下方。通俗意义上,我们可以把snackbar看成是带有icon的toast。

虽然snackbar属于非模态弹框,但是它也有模态弹框的一些特点。例如snackbar也有按钮来供用户交互;此外snackbar一般会出现在界面下方,这点又和动作栏中的Action sheet很像。

小结:

非模态弹框偏重信息提示,模态弹框既可以信息提示也可以供用户交互;toast是轻量型的弹框类型,snackbar集众家之所长,也可以说是四不像。

2.页面

与弹框相比,页面反馈的更倾向于是一个流程的终点站。

例如我们购买理财前要做的风险评测,购买商品最后的结果都会通过一个新的页面来展示。

页面反馈的主体是操作流程,而弹框反馈的主体是操作行为。

3.标签

标签在反馈体系中同样占据一席位置,不过它的使用场景比较单一:主要用于表单,用户录入信息的过程可以提供逐行报错提示。

表单信息录入报错也可以通过弹框也完成,但是有两个缺点:

1.弹框会遮挡界面信息,用户看不到表单内容;

2.在录入项目过多的情况下,标签可以给予更具有指向性的提示,用户不用费力去寻找。

所以说在表单信息录入我们选择更加轻量化的标签。

4.动画

动画也可以用来完成反馈,这里的动画特指的是功能性动画。

动画的合理使用可以吸引用户的注意力,因为人类都是视觉动物,在app和网页中,小动画对我们来说像是眼睛的甜点一样,我们会不自觉的被它们吸引。

前面说的三种反馈样式主要展示的是结果,而动画因为其自身的特性则可以用来展示过程。正在加载中、正在下载中,这些表示“过程”的状态用动画来演示是非常合适的。

5.小红点

小红点在反馈中偶尔也会出现,例如在网易云音乐里下载一首歌,你不会收到一个弹框“歌曲下载完成”,你只会在本地音乐里看到一个小红点,这就意味着下载完成。

所以小红点虽然用的不多,但是它的存在可以缓解弹框的压力。

关于小红点和数字

红点适合在大信息量,或者权重不高的提醒中使用,比如微信订阅号入口的红点

数字更适合在更新信息量小,或者跟用户有互动内容的提醒中使用,比如消息的条数

6.声音/震动

通过声音/震动,能够充分引起用户的注意,让场景具象化,合适的音乐还能增加用户的愉悦感,一般在有重要通知或具有娱乐性的操作时,如短信邮件通知,收款时有钱入袋的声音等。

7.按下状态

在按下和不按下时呈现不同的界面,不仅能引导用户操作,而且能让用户得到一些超乎预期的体验。

四、反馈原则

自动完成

一方面减少用户操作,另一方面减少用户输入错误,通过选择更快更好的确定目标。

根据舒适度安排控件位置

总有些手残党不小心点到按钮,导致不小心给人发信息呀,不小心删除了某文件呀,不小心点错进视频之类的,所以为了解决这类问题,最好把一些不重要或使用频次低的按钮,放在人手不方便操作的地方,PC网页一般放在边角,手机则放在如下的红色区域(据研究显示,49%的人单手操作手机,而单手操作手机时,有三个大的操作区域:方便操作到的,不是很方便操作到的,难操作到的,而红色区域就为难操作到的区域)。

只能选择可选项

总有人会在输入数字的界面会输入字母,也有人会在选择旅行时间时选择到已过去的时间,针对这些,在设计时应尽量引导用户选择可选项,过去的日期就勾选不上,在输入数字密码时只显示数字键盘等。

屏幕展架

屏幕展架是优化提示的一种方式,它指在展示页面时,如遇到网络不畅或加载缓慢等问题时,依次展现内容,而不是等到内容全部全部加载完才显示。这种方式能让用户知道系统是在运作的,减少用户焦虑。

简化提示

只提供重要信息是我们的宗旨,至于对不起呀,我们因为系统刚才崩了下导致啥啥啥了,需要你重新刷新一下啥啥啥的一堆废话,用户是不想知道也不需要知道的,我们只提供核心问题,影响及简短的解决方案。

优化操作步骤

减少不必要的操作从而减少提示也是一种优化提示的方式,如支付宝之前在支付时需要再点击确认付款,现在只要输入密码或指纹之后就直接支付了,减少了操作步骤的同时也减少了与用户的交互提示。

避免频繁,只在必要情况下出现

现在很多APP会频繁的推送通知或在用户进入界面后不断提示,很大程度上造成用户厌烦,所以尽量避免频繁给不必要的提示,对于部分有必要提示,还可告知用户在哪里可以关闭提示或当前窗口就可选择不再提示。

提示明确

明确的提示可让用户清晰的知道当前操作的结果,让用户按照自己需求选择合理选项,减少错误操作后造成的不良影响。

如果能做出差异化就更好了

3.参考文献

参考一:反馈机制这样设计,才能不让用户厌烦

参考二:反馈提示形式总结与设计要点浅析

参考三:案例分析:产品的信息反馈设计

参考四:弹框体系总结

4.更多讨论

鸣谢

感谢大家观看

Contact GitHub API Training Shop Blog About © 2016 GitHub, Inc. Terms Privacy Security Status He