如何设计进度指示器,才能提高用户体验?

曾经看过一个例子,说一个人买了一个咖啡机。但是第一次使用的时候没有煮出咖啡来,因为他在匆忙中没有将“开”的按钮按到底。咖啡机在打开的时候,没有任何迹象显示它确实被打开了:没有指示灯,没有声音,连按下去的阻力感都没有。你以为你的咖啡机正在煮咖啡,其实没有。这个例子很具有代表性。

当用户在App上完成一个操作的时候,比如在支付宝上点击“付款”按钮,用户最理想的情况是立即弹出付款成功页面。然而在一些情况中,比如网速不行或者这个操作本身就要耗费很长时间如更新操作系统,用户不得不等待。我们应该让用户知道你的请求已经成功提交到系统,不过现在需要一些时间来处理,这样会消解用户心中的不确定性。因此当用户完成一项操作的时候,我们应该给用户一个反馈。这个时候我们就需要进度指示器(Progress Indicator)来实现这个反馈。

进度指示器适用条件

用户完成操作后就会进入“等待时间”,当等待时间在0.1秒到1秒时,用户会觉得这是系统正常的反应时间,处于用户的承受范围之内。甚至有些用户没有意识到他们在等待。而当“等待时间”超过1秒的时候,用户心中就会产生疑惑了。因为这已经超过了他们心中认为系统的自然反应时间,这时候他们会思考:为什么这么长时间新的页面还没有加载出来或者交易结果没有返回?是网络断了吗?还是我刚才根本没有点击成功,要不要再重新点击一次?大部分的重复操作都是因为用户对操作结果不确定。所以我们建议在系统处理时间小于1秒的时候,不建议使用进度指示器。因为在这个情况下,动画只是在屏幕中一闪而过,用户根本反应不过来。这样起不到进度指示器应该有的作用,有的时候反而会分散用户的注意力。

进度指示器的种类

进度指示器目的就是告诉用户系统需要一些时间来处理你的请求。最简单的进度指示器就是底下这种非确定性指示器,这种指示器告诉了用户他们需要等待但是没有说明究竟要等多久。


另一种进度指示器告诉我们系统需要多长时间来处理我们的请求。这种类型的指示器我们称之为确定性指示器,他们显示了当前完成了多少,剩下多少。因为用户了解了系统当前的处理进展,他们会心里有底,更愿意等待下去。

百分数指示器是一种确定性指示器,从1%到100%用户可以了解详细处理进程。

线性和环形指示器都可以做成百分数指示器。

进度指示器设计Tips

尽量少用圆形动画

大部分的圆形动画(类似底下这种的)都是属于非确定性指示器。这种动画主要会在页面出现数据加载延迟的时候出现,比如Iphone手机上网络连接出现故障就会出现这个动画。用户想听歌,但是迟迟缓冲不了,只看到这种圆形的图标不停的转动,也不知道什么时候会好。用户对这种圆形动画可谓深恶痛绝。所以为了降低对你产品的负面影响,我不建议你们使用这种类型的指示器。

告诉用户剩余等待时间

用户讨厌无止尽的等待下去,所以告诉他们预计等待时间,会让他们更愿意等待下去。不用太过于精确,类似“预计剩余时间5分钟”这样的就可以了。


有些操作过于复杂,简单的使用百分数无法表示处理进度。在这种情况下,我们可以直接提供绝对工作量的完成度给用户。这种情况中,用户无法直接知道剩余时间,但是可以通过步骤的处理情况得到一个近似的估计。


提高用户对速度的感知度

让用户“觉得”快可能比直接给系统提速更加重要。比如我们在做此类的加载动画的时候,让加载速度由慢到快,当即将完成的时候速度达到峰值。这样会提高用户对速度的感知度。

分散用户的注意力

如果我们将进度指示器设计的很有创意,让用户在等待的过程中对进度指示器产生了兴趣,这样就会忽视时间。比如你将加载进度条做出一个俏皮的高尔夫球入洞的动画,使用户不再感到无聊,时间也会感觉过得快一点。

或者做一个萌萌哒动画,这种设计对妹子来说简直是必杀技。

也可以做成这种酷炫的效果。只要让用户忘记时间,忘记他们在等待就可以。

不要停

确定性指示器可以告诉我们剩余等待时间。比如当我们在下载一个软件的时候,用户会根据加载速度来知晓下载速度进而估计剩余时间。如果突然加载停止会给用户情绪上带来很大的波动。最惨的情况就是,你花了一整天下了一部电影,结果最后卡在99%一直不动,那种情况下你会不会有砸电脑的冲动。所以我们要尽量使指示器运行的平稳,不要出现巨大的波动,更不要让它停下来。

总结

进度指示器在手机应用交互设计有着很重要的地位,将来也会一直重要下去。因为无论手机运行速度怎么提升,总是会有用户需要等待的情况出现。用户需要一个让他们等待下去的理由,而进度指示器就是那个答案。

原作者:Nick Babich 

译者:王M争

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容