用户等得烦?用对设计组件,让等待体验更“丝滑”

用户头像
北京/设计爱好者/277天前/125浏览
用户等得烦?用对设计组件,让等待体验更“丝滑”
哈喽,这里是Clip设计夹,今天分享的是
「等待时刻的交互体验」
打开APP一直在加载转圈、快递位置长时间不更新、预计时间到了外卖还没送达——这些时刻是不是让你越等越烦躁?这些场景一旦卡住,我们都会很着急:系统怎么没反应?继续等下去有用吗?
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1Mjg=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
所以专门对“等待体验”进行针对性设计特别有必要。只要选对设计组件和设计策略,就算是等待也能让操作流程继续顺下去,不破坏使用沉浸感,减少用户焦虑。
下面就来聊聊这些等待时刻如何针对性设计~
01 两种等待类型分析
这里将等待时刻分为可预测型和不可预测型两种类型。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1MzI=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
① 可预测型
可预测表示等待完成的时间是明确的,例如清晰告知外卖送达时间、司机还有多久到达、加载还需多久等。用户知道了大概需要等待的时间,对等待
有预期
也会对产品也更信任。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1MzY=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
但如果进度长时间卡住不动或者实际时间跟预计等待时间对不上,这些情况会对产品的
信任度
造成影响。就像前段时间我使用tb闪购点过两次外卖,每次送达时间都比预计时间要长很多,点过两次之后耐心耗尽就不想再用了。
可预测的核心是“准确、可视化地展示进度”,靠谱最重要。预计到达时间宁可往长了说,也别吹得太离谱,比如对外宣称12小时达,结果等了一天了还没送到,这种不靠谱的宣传会大大降低对产品的信任度。
设计组件
进度条:表示操作正在进行中以及操作的进度。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1NDA=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
计时器:适合等待时间短、能算得准的场景,比如看广告时的 “5秒后可跳过”。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1NDQ=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
文字说明:主要用于显示打车、送外卖、寄快递等场景的预估时间展示。比如外卖、电商平台常将
预计到达时间(ETA)
作为订单状态展示,例如用户下单后实时显示配送预计送达时间“预计x天后到达”。ETA需根据交通、天气等动态数据每5-10分钟实时更新一次,避免信息滞后。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1NDg=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
步骤条:提示用户进度以及当前的步骤,用于引导用户按照步骤完成任务,常跟进度条搭配使用,用来显示当前进度。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1NTI=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
② 不可预测型等待
像服务器延迟、验证处理这些场景说不准需要等多久。如果在不确定的情况下一直让用户干等着很容易焦虑、犯嘀咕。要是没任何反馈,他们会觉得“肯定出问题了”,要么反复点击刷新按钮,要么干脆把APP关了。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1NTY=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
既然无法提供准确的剩余时间,那么反馈的重点应该是让用户知道“系统正在运行没有卡住”。通常采用加载器、骨架屏等loading加载的方式,不显示明确的预计完成时间,而是传达一种正在进行中的状态。
设计组件
加载器:表示操作正在进行中但不知道具体进度。环形加载器通常用于短时间的加载过程,线性加载器通常用于下载大型文件等长时间的加载。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1NjA=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
加载器也分为无限型和有限型两种类型:
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1NjQ=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
无限型加载指加载loading没有起点和终点,说明加载完成的
时间无法预估
,适用于服务器响应时间不确定、系统临时卡顿的情况。但它能给的反馈少,不容易让用户有预期;
有限型加载指加载的时候进度条会慢慢填满,表明进度快加载完了,给用户一种“再等等马上就好”的心理暗示。适合用于
加载时间有预估范围
但没法给出精确数字的情况。但要避免进度条长时间一直卡着不动的情况,免得让用户着急。
除了常见的环形/线性加载器,还有一些APP会把品牌元素融入到加载器中,将加载loading设计成
个性化、趣味化
的效果。例如美团的页面加载,融入了自家IP形象奔跑的动画效果,就算等待加载的这几秒钟也能让用户感受到统一的品牌体验。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1Njg=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
动效特点:加载器属于最基础的循环动效,大多是圆形转圈。点击按钮、打开弹窗、短时间加载内容时用得多,不需要占太多页面空间,交互后能马上给反馈。但传递的信息有限,只能告诉用户“功能正在运行”,没法传递太多内容。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1NzI=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
骨架屏:在数据加载之前显示的灰色占位框,把页面的排版结构提前显示出来,给用户一个视觉上的反馈,让用户知道“接下来加载出来的内容会是这样的”。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1NzY=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
动效特点:静态的骨架屏加上闪烁的重复动效可以呈现出页面不断加载的的动态效果,比单纯的转圈加载更能减少“等得久”的感觉,用于提高用户体验。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1ODA=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
通常第一次打开APP加载整个页面时会用到,现在无限滚动的场景多了,列表、卡片、个人主页这些模块也常用局部的骨架屏加载。
02 
个设计技巧优化等待体验
上面提到的设计策略,核心都是在等待这种不确定的场景里稳住用户心态。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1ODQ=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
在等待的场景中,大家都会感觉时间很漫长,比如实际只等了1分钟,感觉像等了5分钟。如果等待期间不提供任何的反馈,还会琢磨功能正常吗?是不是坏了?解决这些问题的关键是营造可预测性,让用户觉得马上就能加载完成。就算实际处理很慢,也要通过加载动效这些可视化反馈,让用户觉得一直在顺利推进。
那么在等待期间有哪些需要注意的交互呢?下面总结了5个关键技巧,优化我们在等待期间的体验。
① 给出反馈
如果点击之后没有响应,用户可能会觉得系统卡住了,从而放弃重试或者退出应用。所以哪怕等待一两秒钟也要马上给出反馈。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1ODg=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
② 搭配使用组件
根据产品功能、使用场景灵活选择进度条、加载器、骨架屏、步骤条等组件,不局限于一个场景中仅使用一个组件,通过组件的搭配使用明确告诉用户APP运行正常。
③ 符合心理预期
提供相对可靠的时间信息,避免超出用户的预期。预估时间最好保守一些往长了说,比如打车时一开始提示“预计5分钟后应答”,让用户先有一个心理预期,实际应答速度往往会比预计时间快,这样既节省了时间也会让用户觉得这个产品很靠谱。
④ 提供备选方案
如果预计需要长时间的等待,考虑为用户提供其他选择,例如提示“等待完成后将通知您”,让用户可以在等待的过程中再进行其他的操作,减缓等待焦虑感。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1OTI=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
例如现在很多产品会在客服功能中接入“Al智能客服”,当用户在排队等待人工客服的过程中,推荐用户优选使用AI客服来查询问题,这样很有可能AI客服就解决了问题,省去了人工客服的成本。
⑤把等待加载变成学习时间
与其在加载期间让用户白白等待,不如提供一些有价值或者有意思的内容供用户学习观看。
用户等得烦?用对设计组件,让等待体验更“丝滑”(图ZMTUyNTE1OTY=) - 观点 - 站酷设计师Clip设计夹原创素材 - 站酷ZCOOL
收藏
比如进入懂车帝的3D看车过程中,由于需要加载3D车模型和空间等复杂的内容,进入前有一段进场加载loading。
在加载的这段时间里没有让用户对着进度条发呆,而是在进度条上方提供了六个手势操作教学,这样的设计首先能抓住用户的注意力,其次是能引导用户在进入功能前提前了解操作,既方便后期好操作,也省去了进入新功能之后单独的操作引导,可以说是一举多得的作用。
最后
随着界面承载的功能越来越多,用户注册、内容提交等流程也越来越复杂,等待似乎是没法避免的。
如果单纯依靠
技术手段
来提升等待速度,总会有体验上的局限性。这时候设计师通过精准、贴心的
设计方案
来优化“等待体验”,很可能就能解决体验问题,提升产品的服务质量。
慢慢来比较快,如觉得有帮助,请点个
推荐
分享
给更多的朋友,谢谢!
4
阅读原文
|
举报
|
2
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
我的钱包-UI界面设计-app
【新年UI图标】礼物/活动icon
UI应用平面图标
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
森系3D渐变流体抽象矢量UI背景图
【新年UI图标】旅行icon
【新年UI图标】积分icon
【新年UI图标】银行卡icon
UI界面 组件
Security Camera UI kit
高级感金属拟物 UI设计组件库
UI通用设计素材1
UI 登录界面设计模板包
钱包ui模板
【新年UI图标】活动icon
【新年UI图标】美食icon
3D渐变流体抽象矢量UI背景图
新拟态风格 UI设计组件库
新能源APP应用UIKit
户外旅行飞机情侣假日出行
【新年UI图标】体育icon
高级表盘系列UI源文件
【新年UI图标】相机icon
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册