进度条设计理念


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

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

  提供清晰的体验概念模型

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

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


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

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

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


  符合或者超越期待

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

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


  分散用户的注意力

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

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

  公平

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

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

  积极的开始,美好的结尾

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

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

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

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

时间: 2024-09-19 09:37:41

进度条设计理念的相关文章

C#在状态栏中,自绘进度条,

别的都没什么好说的了,说说这个在状态栏中,画进度条的办法吧.偶是做网站的,一直很羡慕FTP软件中,地址栏中的进度条,那么酷....一直在猜想,人家是怎么把进度条控件..放到地址栏上的??????? - -!! 汗...前几天因为工作需要,用UTF格式来写WEB程序,还要成批处理.写了这软件.一时灵感,试了试居然成功的自绘了进度条. 下面是源码: (另:状态栏name: stat 三个item 分别是: stat_1 stat_2 stat_3 ,stat_3属性设置成自绘.***********

圆形进度条定制

// // HYBCircleProgressBar.h // CircleBarProject // // Created by huangyibiao on 14-8-16. // Copyright (c) 2014年 Uni2Uni. All rights reserved. // #import <UIKit/UIKit.h> #import <QuartzCore/QuartzCore.h> /*! * @brief 圆形进度条 * @author huangyibia

请问word2007样式的进度条的实现原理

问题描述 请问word2007样式的进度条的实现原理 请问word2007样式的进度条的实现原理,将tolbar和trackbar放在状态栏上是怎么实现的呢? 解决方案 http://www.jb51.net/article/71269.htm

js插件YprogressBar实现漂亮的进度条效果

  以下为你介绍js插件YprogressBar实现漂亮的进度条效果:       ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 ProgressBar.js 可以很容易地创建任意形状的进度条.这个 JavaScript 库提供线条,圆形和方形等几个内置的形状,但你可使用 Illustrator 或任何其它的矢量图形编辑器创建自己的进度条效果. 简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进

带文字的进度条

在下载安装的过程中,我们经常会看到带有文字的进度条,它能给人一种直观的概念.在VC中也有进度条的控件,但它不能显示文字.今有一CProgressCtrl类的派生类CTextProgressCtrl就有完成这样的工作.两种控件运行情况的对比如下: 下面介绍CTextProgressCtrl类的具体使用过程: 1. 运行VC,建立一个名为progressDemo的基于对话框的程序,在对话框中加入两个progressCtrl,然后把TextProgressCtrl.cpp和TextProgressCt

php+ajax文件上传进度条

ajax|上传 代码分为以下部分: demo.php - 上传过程处理 PLAIN TEXTPHP: <?php include 'UploadProgressMeter.class.php'; $fileWidget = new UploadProgressMeter(); if ($fileWidget->uploadComplete()) {        // 上传完毕的时候,从iframe发送一个js到主窗口表示一切ok        echo $fileWidget->fin

CSS3网页制作教程:闪烁跳跃的进度条

文章简介:今天为大家带来另一款更具个性化的进度条:CSS3闪烁跳跃的进度条. 今天为大家带来另一款更具个性化的进度条:CSS3闪烁跳跃的进度条. 这个示例的原理和以前的都是一样的,都是通过大量的css3属性来实现的,如:animation.transform.keyframes等等属性.值得注意的是这个示例采用了结构性伪类选择符E:nth-child(n),来进行对HTML元素的选择以及控制输出.相信这个伪类选择符在将来会是一个很强大的一个工具.推荐大家多多了解以及实践使用. 这个伪类选择符E:

CSS3可按进度变色的进度条

今天是周末,看到一款利用CSS3实现的进度条应用,觉得非常棒,就将它分享给大家,并且将这款CSS3进度条的实现过程大致整理了一下,实现的关键是根据当前的进度需要能改变进度条的背景颜色.下面是效果图: 查看在线演示 从外观上来看,这款进度条还是比较优雅的,有jQuery UI的风格.下面我们来看看具体实现的过程.主要是两部分代码,HTML和CSS3. HTML代码: <input type="radio" class="radio" name="pro

html5实现进度条功能效果

html5实现进度条功能效果非常和谐   <script type="text/javascript"> var i = 0; var res = 0; var context = null; var total_width = 300; var total_height = 34; var initial_x = 20; var initial_y = 20; var radius = total_height/2; window.onload = function()