生活中处处是反馈,而这种普遍性更是延伸到了移动端与app上。同时,因为不同场景适用的反馈模式有所不同,那么我们需要认识不同场景的特性,并针对场景特性做出对应的反馈设计。那么具体如何做呢?本文将告诉你答案。
一、前言
现实生活中反馈无处不在,你和他人沟通(问答反馈),使用物品(比如现在我在敲打键盘,显示屏显示了这段文字)等。及时且合理的反馈,让我们的体验更加顺畅,反馈设计是用户体验设计中至关重要的一环。
1. 反馈场景
我们在现实中会碰到哪些反馈场景呢?刚好我在今年1月底去大使馆办理俄罗斯签证,就从办理过程中碰到的场景展开,听我娓娓道来。
2. 方式选择
朋友告知我可选择网上代理办理或者自行前往大使馆或签证中心办理(明确办理方式后可确定下一步操作)
3. 资料准备
确定前往大使馆办理要自己准备好资料,那我需要提前了解准备哪些资料?(遇到任务不明确需要更多信息)
4. 提交资料
在申请表贴照片时,同伴提醒我照片要贴在申请表上规定的范围内(在操作时获得反馈)
全部资料递交给工作人员,工作人员初步审核资料时将前面的帘子拉下让我稍等片刻(状态切换告知)
告知我还需要补全近半年银行流水单(遇到阻碍,流程被中断,给出解决方案)
5. 等待审核
过了几天,补全资料再次提交审核(信息提交终审进行资料校验)
需要等待5个工作日才有结果(等待结果)
6. 接收结果
在规定日期取护照,拿到护照即知道办理结果(最终结果获知,结果可能成功也可能失败)
因新冠肺炎较为严重,新闻报道俄罗斯关闭边境入口(获得外界信息反馈,近期无法出行)
实际App设计中,我们也同样会碰到以上类似的场景,通过拓展,可以总结为以下10种场景。
以上每个场景中都有一个核心要点,我们的反馈设计便是针对这些关键要点确定设计目标,应用合适的反馈模式,让用户不迷茫,让体验顺利执行。
下图为App反馈设计的10个场景以及对应的设计目标。
下面通过实例来解析这些反馈场景。
二、实例解析App反馈场景
在App中操作中,从交互方式来说,有点击、滑动、长按等;从服务器数据接收来说,用户输入和选择都是数据传输行为,我们所进行的这一些操作,都是在App界面上实现的。
我将反馈场景分成了2个一级分类,4个二级分类,10个反馈场景,一级分类分为“自主操作获得反馈”和“被动接收反馈信息”。
自主操作获得反馈:指用户自己在App上操作而获得的反馈,这里用户流是“自己操作->获得反馈”
被动接收反馈信息:指因其他用户或系统操作需要传输反馈给“你”,从而“你”被动接收到了反馈,这里用户流是“他人操作->获得反馈”
下面结合案例就不同反馈场景适用的反馈模式应用具体展开说明。
1. 自主操作获得反馈
用户自主操作获得反馈,可以拆分成3个部分,按操作流程来分类,从“操作过程”,到“操作过渡”,再到“操作结果”。
“操作过程”、“操作过渡”、“操作结果”覆盖用户操作的时时刻刻,当你点击某个按钮、当你进入详情页时、当你提交个人信息时、当你完成支付订单时…。
1.1 操作过程
1.1.1 操作即变化
当我们在界面上进行操作时,App界面呈现视觉、听觉或触觉方面的变化告知我们操作有效。
从反馈模式来看,主要有操作组件的状态切换(视觉层面)、和物理反馈(听觉和触觉层面)。
a 状态切换
我们点击按钮时,按钮的状态从“正常状态”切换为“按下时状态”;我们选择某个页签时,被选中的页签从“未选中状态”切换为“选中状态”;点击输入框,输入框即获取焦点等等,这些都是状态切换反馈告诉用户App在正常有效执行着。
在App中,所有组件在用户操作时即立马给出反馈,单一组件的操作是“起点”也是“终点”,这里分类划分到“操作过程”而不是“操作结果”,是因为对于流程较长、重要级别较高、信息量较大的操作流来说,众多单一组件的操作构成了长流程的整个操作,所以这里将操作即发生的状态切换归并到“操作过程”中,不用过多细究和纠结。(题外话:在场景划分的时候,「操作即反馈」场景的划分让我有点纠结,这里给出我的划分解释,你也可以根据你的理解自行划分)
举例:在美团外卖App编辑收货地址,进行选择性别、点击手机号输入框、选择标签、点击保存地址按钮这些操作时,组件的状态都在跟着操作在进行切换。
b 物理反馈
操作即反馈除了视觉层面的反馈,还有听觉和触觉层面的,通过声音和手指在手机上感受到的震动来传达。
举例:安卓自带的闹钟工具,通过滑动时针或分针来确定小时和分钟,滑动过程中伴有声音和震动。
1.1.2 任务不明确
用户在操作过程中,需要周全地考虑用户是否会存在对当前界面内容或当前操作存在疑惑的场景,若有需要给予用户更多的信息解决用户的困惑,否则用户可能会错过重要信息,也可能会自主中断整个操作流程从而流失。
a 本页面
说明内容较少则在本页面进行描述或点击气泡展开描述。
举例:去哪儿App实名认证选择“港澳台及外籍人士认证”方式,需要上传手持身份证照片,用户可能会手持的方式产生疑惑,当前页有卡通形象示意手持的位置,同时点击“照片实例”按钮在新页面也可以看到真实人物范本。
b 新页面
说明内容超级多则在新启页面描述。
举例:美团外卖App某商品详情页点击“价格说明?”按钮跳到新页面。
c 气泡
气泡上可以加上关闭按钮也可不加,有的话,用户点击关闭按钮后气泡消失。
举例1:去哪儿App搜索机票,为了让用户理解降价提醒的含义,页面上以气泡的形式加上了降价提醒功能的解释说明。
举例2:订阅号App中“近15天数据”右侧有个解释图标,点击后通过气泡告知数据在每天上午9时更新,再次点击关闭气泡。
d 弹窗
说明内容稍多可通过弹窗描述。
举例:唯品会App我的订单列表中,支持退换商品有“7天退换”的标签,而不支持的则有“不支持换货?”文字按钮,点击按钮会有弹窗说明。
e 点击展开
默认展示摘要内容,将重要信息收起,可展开查看更多。
举例:美团外卖App进入商家页面,了解更多详细介绍通过点击展开可以查看。
1.1.3 进一步操作
一个操作流可以是一个单一操作,比如点击首页标签栏跳到首页页面;也可以是多个单一操作构成的长流程,比如微信聊天选择视频通话后让你选择是视频还是语音。
我们常碰到当我们进行某个操作时,会有新的操作反馈给我们,选择其中一个操作后继续进行下一步操作。
a 上拉菜单(动作面板)
上拉菜单包含多个操作,选择某个操作后流程并未终止,进一步明确了操作。
举例1:微信点击视频聊天,上拉菜单选择语音或视频。
举例2:网易邮箱打开某个邮件后进行更多操作。
b 操作列表
操作列表和上拉菜单的作用是一样的,表现形式不同。
举例:企业微信点击上传文件,进一步让用户选择从本地上传还是微盘上传。
c 弹窗
需要二次确认可以使用弹窗。
举例:企业微信选择要上传的文件后,弹窗让用户确认是否发送,同时弹窗上有输入框可以添加附加留言。
d 浮层菜单
将更多操作合并到浮层菜单中,浮层菜单紧贴着触发按钮,浮层菜单无遮罩背景。
举例1:微信点击右上角的“+”图标。
举例2:美外卖App点击更多页签栏。
e 编辑菜单
通常通过长按(Android系统常应用的交互动作)呼出编辑菜单,编辑菜单可以水平方向排布操作也可以垂直方向。
举例1:微信长按某聊天(Android系统),呼出编辑菜单。
举例2:微信公众号文章(Android系统),长按一段文字弹出水平编辑菜单,可以进行复制或搜索。