交互设计案例:网页进度条提升等待体验的设计方法

文章描述:从排队等待谈进度条设计.

  排队等待是一种日常中常见的现象,例如新年领开工利是、去排队购买首发的苹果产品、每天中午去食堂排队购买午餐。排队等待在我们的生活中无处不在且看似是一个简单的现象。即使是种简单的存在,但也有其复杂的一面,当存在着很多条队列时,确定每条队列是做什么的就变得困难了;在加入队列后,人们会产生:大概要等多久?为什么队伍很久没有往前移动?等诸多疑问。无法解释的等待是令人烦躁的,不公平的等待则可能引发人们的怒火。

  经历过领开工利是的同学应该对于当天排队等待的回忆不会很糟,甚至觉得还不错,是一个值得回忆的经历,明年应该还会去参加。但经历过去火车站购买车票的同学多半会不愿意再去第二次了。不管痛苦还是愉快也好,排队等待有时是不可避免的,那有没有办法可以降低其中的痛苦程度呢?有心理学家曾对如何提升排队等待过程的愉悦感做过研究并提出了一些解决方法。近期正好也做了关于提升管家中进度条体验的优化设计,下面就结合进度条的设计来逐一介绍提升等待体验的设计方法。

提供清晰的体验概念模型

  概念模型可以使令人迷惑的产品或者设计转变为条理清晰和可以理解的。周围环境的语义符号(新年后上班第一天、曾经领利是的记忆、大屏幕上的排队指引等)可以让我们明白排在腾大楼下长长的队伍是去领新年开工利是的,而不是去食堂买早餐的。

  在使用软件的经历中,用户已经非常熟悉点击【扫描】按钮,出现进度条指示,然后等待扫描的结束这一整个过程。所以如下图所示,用户点击【快速扫描】,接着出现等待进度条,这样的操作概念是符合用户记忆,容易理解的,用户不会产生疑惑。

等待的过程应有足够的反馈

  忙碌的维护秩序的工作人员、时而往前移动的队伍以及后面不断增多的等待同学等信息都给了我们足够的反馈,说明距离领到利是的目标越来越近了且排队等待是合理的。

  想象一下,如果当进度条出现后,所有信息都是静止的:进度条没有移动、没有当前扫描进度的指示、没有变化的数字,这种等待让用户瞬间产生焦虑和不安,他们会疑惑“到底什么时候才会扫描完成?”、“到底电脑是否在正常工作呢?”。在做进度条优化设计时,就大量的提供了变化的信息,给出足够的反馈,让用户明白电脑是正常的,他们的等待是合理的。

 

符合或者超越期待

  我们在开始排队等待时常抱以消极的期望值,认为等待会是个漫长的过程。在设计时可以利用这点来作出符合或者超越用户期待的假象,这样可以对提升用户体验有所帮助。

  如果从技术上暂时无法提高扫描的效率,我们可以在扫描开始之前让用户有所心理准备,降低他们的期待。例如在扫描前可以通过弹框的方式提醒用户:扫描过程较为漫长,请您耐心等待。这样到最终扫描结束,用户可能会发觉其实扫描并不是那么的漫长,这也就变相的超越了用户的期待。

 

分散用户的注意力

  一个有很多事情发生的时间段会显得比在一个相同时间但没有任何事发生的时间段快得多。“度日如年”就是这个道理。经典的在电梯口放置镜子的故事就是利用分散用户注意力的方法来提升用户等待的体验。

  很多游戏的加载都采用了这种方法来提高用户等待的体验,比如七雄争霸在加载的过程中会出现“打地鼠”小游戏,将用户的注意力吸引到小游戏上,从而不会关注加载等待的事情。某款安全软件也采用了这种方法,当用户进入较长的扫描等待时,界面上会弹出气泡提示用户可以进入皮肤中心换换界面的皮肤玩一玩。从这点出发,管家也可以善以利用,如果管家有什么新的功能推出,可以采用这种形式向用户推介,即提高了等待的体验也起到了功能宣传的作用。

公平

  我们反感插队的人,对不公平的现象会产生愤怒。有心理学试验表明即使所有的队列都以平均速度来移动,不管人们在哪个队伍里,他们都感觉自己那队是移动得最慢的。这也是为什么最好的队列设计是只采用一条队列,这样人们会认为自己得到了公平的对待。

  回到进度条的设计,我们即使用再多的设计方法,其实也只是稍微减缓了用户在等待感觉上的慢。我们从根本上还是要提高产品自身的扫描效率和性能,让使用我们产品的用户受到的待遇是与使用其他类似产品用户所受待遇是同等的,最好是超越的。用户没有道理去忍受一款性能低下的产品带给他们的等待痛苦,这也就是让用户感受到公平是最基本的。

积极的开始,美好的结尾

  一个漫长的活动过程,在记忆中的感受重要程度排序为:结尾,开始,中间过程。其中结尾的感受对整个活动过程体验的影响是最大的,如果能在结尾时增加稍许愉快的成分,即使整体过程是不愉快的,用户仍然会对整个过程产生愉快的感受。

  进度条设计上也同样在开始与结尾处做了优化。在扫描刚开始,我们对进度条做了假移动的处理,进度条一开始会比较快的移动起来,其实移动的这段距离与实际的扫描比率是没有关系的。比如,有100个文件需要扫描,进度条每移动1%的距离代表扫描了一个文件。假移动就是让进度条一开始快速的移动10%的距离,其实在后台并没有扫描10个文件,可能只是扫描了1个文件。这样的做法会给用户一个积极的起步感,用户看到已经开始扫描了可能就会去做其他事情。

  美好的结尾通常在人的记忆中会占有很重要的影响力。在管家中,当扫描结束后会跳转到结果页面,在这个页面上会展现此次扫描的详细结果并且给予很强的成就感,比如没有发现病毒会用显眼的绿色对号,肯定的文本让用户确信自己的电脑是安全的。如果扫描出病毒或电脑问题,界面上会给用户明确的清除按钮和其他特殊情况处理途径,让用户能很方便的解决问题并使电脑恢复正常。当用户解决完所有问题后,会给出解决成功的成就感提示。

  生活中需求大于资源是常态,我们必须面对各种的排队等待。电脑的性能瓶颈也是暂时无法解决的,希望本文能对大家的设计工作有所帮助,让等待不再那么无奈。

时间: 2025-01-25 01:29:10

交互设计案例:网页进度条提升等待体验的设计方法的相关文章

网页进度条设计:关于讨论loading加载后的一些心得

文章描述:Loading,让烦躁少一些. 前一阵子,接到一个app切图制作加载圆形进度条的任务,看到那个小进度条转啊转的,我若有所思-同时,一个做印象派制作间控件设计的同学最近做了改版,那个控件登陆需要一些时间,看到他对loading加载条进行了优化,然后就一起交流了一下.作为一个刚毕业入行不久的新人,请允许我分享一下关于讨论loading加载后的一些心得- 这是一个浮躁的年代,长听到这样的抱怨"好慢!""等到死!",每次看到那个转啊转的圈圈,或者是那个"

网页进度条设计:全兼容且自适应的进度条

文章简介:网页进度条设计:全兼容且自适应的进度条. 在做这个东西之前,我们需要了解基本的信息: 是否为静态加载?(是) 有多少种状态?(三种基本状态:默认.当前.已完成) 是否使用JS程序实现状态的更改?(否) 使用的频率?(高) 更新的频率?(低) 在了解这些基本信息后,我们还需要关注: 效果的完整性 性能的优越性 代码的可移植性及复用 兼容性 易维护 易扩展 这些条件有助于我们所作出的东西更加优秀. 先看一下我们以前的做法: 此做法使用了一张背景图片. 效果的完整性(很好的展示了其效果) 性

Android 进度条显示在标题栏的实现方法

好吧,先给大家展示效果图: xml文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" > <Butt

设计理论:进度条内嵌百分比开发设计

这是在豆瓣的HCI人机交互小组的一篇内容,具体内容如下: 测试某应用程序,有这样一个功能:创建了一个任务,该任务下面包含了很多子任务,"开始"按钮之后,有一个进度状态监控窗口,该窗口中首先显示了一条不断向前跑的进度条,该进度条上内嵌了相应的完成百分比,在进度条后面,有两项时间相关的数字: 已用时间,剩余时间. 因为该程序是完全为windows平台所做,考虑到windows 界面风格提倡的进度条内不要嵌数字,于是测试人员报了BUG,让开发人员拿掉进度条内的百分比. 下面是双方的对话摘要:

植物大战僵尸2进度条卡在100%的解决方法

最近在玩植物大战僵尸2的朋友们,肯定和小编一样,遇到过进度条卡在100%就不动了.一般情况下,小编都是彻底退出游戏后,然后 重新启动.如果朋友们重新启动也没有效果的话,可以采取以下办法:打开<植物大战僵尸2>的时候,进度条到了100%之后会卡在那里不动的话就先关闭游戏,然后切换成飞行模式,再次打开玩一会,再关闭飞行模式即可.

JSP编程进度条设计实例 jsp网页进度条

      许多Web应用.企业应用涉及到长时间的操作,例如复杂的数据库查询或繁重的XML处理等,虽然这些任务主要由数据库系统或中间件完成,但任务执行的结果仍旧要借助JSP才能发送给用户.本文介绍了一种通过改进前端表现层来改善用户感觉.减轻服务器负载的办法. 当JSP调用一个必须长时间运行的操作,且该操作的结果不能(在服务器端)缓冲,用户每次请求该页面时都必须长时间等待.很多时候,用户会失去耐心,接着尝试点击浏览器的刷新按钮,最终失望地离开. 本文介绍的技术是把繁重的计算任务分离开来,由一个独立

登陆表单设计案例:网页和APP登陆表单

文章描述:网页与APP中那些优美的登陆表单. 我从Dribbble收集了20个漂亮的登陆表单案例.希望你看后能从中受益,并对你以后的登陆表单设计有帮助.设计一个登陆表单看上去非常容易,但大多设计都很糟糕.毫无亮点.无论如何,这篇Dribbble案例集锦绝对走的是另一个极端.希望它们能赢得你的青睐!来一起欣赏吧:) 网站与APP中的登陆表单 继承了iOS7的精髓,这件登陆界面作品将iOS7微妙的动画背景上升到一个新的层面.此处的背景完全是一张动画图片--甚至可能是GIF.尽管这背景事实上没有那么精

用户体验设计案例:移动社交的Path用户体验设计

文章描述:卓越用户体验的5个共同点. 如果你已经在用移动社交的Path,你一定会非常享受其卓越的用户体验.Path拥有非常精致的设计,而且非常易于使用.换句话说就是Path拥有非常棒的用户体验.这不是一个高科技产品是否需要采用的决定性元素,但确是能够决定多少用户来使用的重中之重. 1. 典雅的UI 好的用户体验是离不开UI的,而且作用很大.尽管我不是一个合格的Path用户,但是当打开的时候,我还是会浏览一遍.顶端的5个笑脸图标更是很有爱.这也正是facebook没有意识到的地方. 2. 离不开(

设计理论:网页气球状提示用户体验设计

Balloons(气球状提示) 问题摘要 气球状提示(Balloon)是一个小型的弹出窗口,用于通知用户出现非关键性问题或控件处于某种特殊情况. 实例 图1 注:气球状提示由图标.标题.正文文本组成,且所有这些部分都是可选的. 注:当用户试图提交操作的时候,任何未处理的问题都必须由其所有者用户界面来处理. 注:气球状提示通常与文本框或其他使用文本框来改变值的控件一起使用,如组合框.列表视图.树形视图等等. 注:保持控件之间的一致性.当发现不一致性出现时,气球状提示不再适用. 注:如果其他类型的控