“进度条”如何有效的帮助用户体验设计?

2017-02-25

@惜可若己 :一个优秀的「进度条」能让用户等待过程变得不那么无聊,而这里面其实大有细节可言。今天这篇译文总结了13个能提高进度提示用户体验的设计方法,强烈建议阅读。

用户及其痛恨的一件事就是等待。如果你为了考验他们的耐心而让他们等的太久,那你就极有可能失去这些用户了,他们会毫不留情的放弃你的网站或应用程 序转而投向更好的地方。虽然在技术上是有一定方法能够加快程序的响应速度的,但是更多的程序往往都需要用户在某些时候等待一段时间而别无他选。然而,如果 能让用户意识到你的程序的加载速度要快于其他程序,那么他们就会感觉到你的加载速度还是蛮快的。如果在应用程序开始加载数据响应请求的时候,访问用户能在 屏幕中看到一个进度条来指明程序的加载过程,那便是极好的。

现在,你必须要理解进度条的显示方式跟动画效果是能够影响到用户的心理感知的。 进度条的目的在于通过向用户反馈当前的响应进度和合理的时间消耗来让用户在等待过程中放松下来。用户不应该被傻傻的丢到一边自己去猜程序正在处理的事情。 正是在这样的情境下,似乎进度指示器刚好能构建起连接用户和系统间的一条友好桥梁。在本文中,我们将探讨集中不同类型的进度指示器以及他们的使用方法:

1、反馈的关键

没错,我们当然都喜欢一个应用程序能够即时响应。但是有些时候你的程序确实不够快,缓慢的加载速度和延迟问题都可能降低你的程序性能。在这个时候, 你就必须保证用户能清楚的知道程序正在按着他们的请求作出并在逐步完成响应动作。一个优秀的交互设计就是那些能通过视觉反馈向用户传达系统当前的状态(正 在发生什么?),产生的结果(刚刚发生了什么?)以及未来的状态(下一步会发生什么?)。

如果一个进度指示器能够面向用户提供一些类型的即时反馈信息,那它就是发挥了有效的作用。想办法告诉用户程序确实需要一些更多的时间来响应他们发出 的动作甚至告诉他们需要花费的大概时间,这对用户来说都是极其友好的。用户的等待时间一般开始于他们触发屏幕动作的那一刻,而理想上,系统应该在用户触发 动作后立刻给予一些视觉上的反馈以告诉用户系统收到他们的请求了。这样做带来的积极一面就是:

(1)它们打消了用户对程序响应的疑惑,使他们能够确信程序是正常工作的。

(2)这种视觉信息向用户传达了一个有根据的等待原因,减少了他们对无聊的等待时间的感知。它能够从一定程度上分散转移用户对等待时间的注意力。其 实,对于任何需要花费1秒钟以上的动作来讲,使用一个进度指示器都是合适的。不过对于更快的动作,如果还来使用这种动画效果,那只会适得其反激怒用户。

2、进度指示器类型

进度指示器整体上分为两大类: 1) 确定性的 2) 不确定性的

对于确定性的进度指示器而言,它们能够告诉用户当前动作需要多久时间方能完成,因为用户能从视觉上看到百分比。

jdt201608083

而如果一个指示器要求用户在动作执行的全程中只能傻傻等待却没有告诉这个过程需要多久的话,那它就是不确定的进度指示器。

jdt201608085

更进一步的,还有将这两类指示器组合起来一起使用的情况。

jdt2016080810

3、 圆形进度指示器

jdt201608087

另外一种能确保用户知晓系统正在响应的方法是使用一个循环的环形动画,不过这种方法没有足够的信息告诉用户在当前动作完成之前他们还得等多久。以往 的经验法则表明,只有在执行2-10秒钟内这种快速的动作时再考虑使用圆形进度指示器。如果让用户盯着这么一个圆环更久的话,用户可能就不会再有耐心转而 放弃。另外,如果能通过文字向用户传达一些更明确的信息,比如告诉他们为何要等待,这时候使用“正在加载评论信息”这样的文字就能让用户变得更有耐心一 点。

实际上,加载图标往往并没有传达出动作的真实意义。因为它们广泛应用于多种功能之间,比如运行系任务的时候,在系统引导时通知用户当前状态的时候, 网络连接异常的时候以及数据加载的时候。这种一劳永逸的做法没有针对具体动作设置特定的加载方式,这就是为何人们讨厌看到一个环形加载动画的原因。另外请 记住,若使用这种环形动画代表从服务器加载数据的过程,那是充满风险的,因为客户端跟服务器间的网络连接情况并不是掌握在开发人员的手里。 如果这样做,在糟糕的网络连接情况下等待时间可能要达到15秒钟,而正常情况下可能仅仅需要2秒钟,所以可控性很差。

4、整合后的圆形进度指示器

jdt201608081

如果再进一步,你也可以将这种圆形的进度指示器动画跟现有的控件结合起来,尤其是按钮。比如在 Android 平台中,一个圆形的加载器可以将一个悬浮按钮整合进来。这种做法保证了能让用户看得到加载后的提交动作也确实完成了。它依靠圆形的逐渐闭合来代表了这个过程。

5、系统/自定义的循环动画

jdt201608082

Facebook 通过使用不同风格的循环动画向用户传达出两种不同的体验感受。针对它们的加载指示器,如果用户看到是一个自定义的加载动画,他们会把这种延迟归咎于程序本身的原因,而当他们看到是系统自带的动画效果的话,他们也会理所当然的认为延时是系统的责任。

6、线性动画

jdt201608086

一个确定线的线性进度指示器,其完成速度应该符合百分比的变化,并总是从0%到100%递增而不减少。如果一个指示器针对的是多个线性任务,应该只用一个指示器来标明任务的整体执行进度而不要针对每个任务都使用一个指示器。

注:相关网站建设技巧阅读请移步到建站教程频道。



注明:本文章属于转载,仅供行业人员学习交流使用,文章版权属于原创作者,在此向原创者致敬,感谢原创作者为大家学习交流提供精品内容。

站方声明:IThao123是为广大互联网从业者免费提供学习交流的平台,如果侵犯了原创著作权,请联系站方删除,给你带来不便,深表歉意。

顶部