时间感知对交互设计的影响

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解详情

5 Lies About UX You Still Believe

在交互设计中如何加以利用时间?它是可控的吗?

元素的时间控制难以描述,但我们都能感觉得到,从令人厌烦的等待加载,到令人愉快的轻松穿梭于页面间。时间控制的范围很广,大到可感受到的时间增量,小到区区毫秒。单独看似乎没有意义,但无论如何,它积累起来就能影响用户的看法。

本文中我们讨论的内容涵盖一切随时间变化的元素:视频、音频、动画等等。我们会从时间为何重要讲起,然后讨论时间控制的要素,还有如何改善它们,之后我们会探索快速和简洁如何发挥作用。

时间为何重要

时间是个难以掌控的概念,因为它的范围如此广阔。就像一个电子的大小,相对于我们银河系几乎无法察觉。一毫秒的跨度也一样,相比一个千年,根本感受不到。

但是数字世界的时间与人类的时间不同。几秒的差距,就决定了体验是令人沮丧还是令人愉悦。我们可以把它归为基本的人类心理学:

  1. 记忆与注意力是有限的——正如我们在交互设计最佳实践中描述的,设计师应当评估界面的认知负荷。否则,用户会苦于短暂记忆导致的信息丢失,使他们沮丧。
  2. 人们必须感到一切尽在掌控——没有人愿意受科技的支配。正如我们最新的博文中陈述的,有些人仍然把计算机作为黑盒子对待。让人等待的电子产品,会给人一种不够格的傲慢印象。

用户的操作是有节奏的。在用户体验领域,时间的度是以10的量级来丈量的。用户判断是否值得在一个网站花费时间,只需要0.05秒。如果它们决定留下,通常会在2-4分之内离开。

无论目标是更新你的Facebook信息流,或是在Amazon上对比购买产品,每项体验都可以分解为一系列的交互,交互操作之间的耗时对用户体验会产生复合影响。

交互设计中的时间要素

那时间和交互设计具体有什么关系?设计顾问David Malouf相信,时间把交互设计与其他用户体验学科区分开来。时间远非线性的过程,因为随时间流逝所有交互都会发生。Malouf建议,我们可以具体从3个不同角度来检验时间:步调、响应和环境。

1. 步调

在设计方面,步调与固定时间内完成的事情息息相关。你马上就会想到,“那么用户完成的事情当然越多越好”,但这未必正确。

Hicks Law

来源:席克定律

根据经验,操作流程远比可用的操作数量重要。席克定律说到,过多的界面元素实际上阻碍决策(因此也影响目标的完成)。

想一想,比如有一组庞大的注册表单,和另一组分成多页面的小表单,两者信息相同,会有怎样的区别。长表单会花费更少的时间,但一系列小表单似乎更容易掌控,对用户也不那么复杂。

下面的例子来自LinkedIn,结合表单引导和进度条是个很不错的策略,改善了体验的步调。创建一套专业档案所需的冗长过程被分为4个可掌控的步骤。用户也能看到它们的进度到了什么地步,这会激励他们继续进行。步调与效率关系不大,更多是用户是否对体验感到舒适——不会使他们负担过重,也不会减慢它们的速度。

LinkedIn Wizard Form

来源:LinkedIn表单引导

2. 响应

产品的反应时间与用户的掌控程度直接相关。Jakob Nielsen说过,电子产品最重要的3个响应时间范围是:

  • 1秒——直接控制——用户感觉他们在直接操纵这个系统,就像使用真实的工具一样。除了结果的视觉呈现外,不需要任何反馈。
  • 1秒——间接控制——用户会注意到延迟,但在网站的体验中仍然感觉尽在掌握。比如对于加载新页面,这个延迟是可以接受的。
  • 10秒——部分控制——用户的注意力已经转移,操作流程中断。反馈对于减少半途而废至关重要,这就是加载界面如此流行的原因。

响应时间中的延迟必须与任务的重要性相称。例如,加载云端面板,5秒是可以接受的。但是触发一个下拉菜单就不可忍受了。延迟越长,用户与界面之间的关系就越趋于分裂。

Responsive

来源:UXPin

3. 环境

如何、何时、何地,甚至为何使用一个应用,都对时间感知有所影响。

比如,网站的平均停留为2-4分钟,尽管电商销售流程的平均要持续28分钟(这甚至都没有考虑销售的品类——买一辆车可得花上几个月)。同样的,那些在商场购物会通过移动设备比价的人,比坐在家中沙发里购物的人更重视速度。

Context

来源:理解企业中移动运算的时间、地点与环境

如果你发现用户过早离开你的网站,你就得修改链接文案了。你还可以检查页面的视觉层级(颜色、对比、字体),确保重要的信息得到了强调。

但是,这些吸引眼球的方法,在单独一页沉浸式内容中或许有违直觉,例如博客。这种情况下,你最好善加利用留白来强调内容(就像Medium那样)。同一个获取注意力的策略,依据网站类型的不同,会产生两种不同的效果——这都取决于环境。

越快越好……在某种程度上

讨论一个界面的步调时,我们提到过并非总是越快越好。

坦言之,绝大多数时间相关的可用性问题,都由于系统反应太慢。但是,也有些情况速度太快反而不好。通常,速度快的界面会导致两个问题:错过信息,或是用户跟不上。

Four Square

来源:FourSquare_

1. 用户错过信息

信息变化太快时,用户只要看一眼屏幕的其他地方,就会错过它。这些通常适用于并非由用户触发的意外操作,而且通常这个变化离相关操作越远,越容易被忽略。有简单的补救方法可以将注意力引向这些变化,通过恰当处理的动画效果(我们稍后会讨论)。

我们可以把西门子作为界面速度过快的例子。此例中,向用户展示了如下页面,然后询问他们是否发现了西门子有洗衣机的特别促销。

Auto Forwarding

来源:Auto Forwarding

正如Jakob Nielsen,Nielsen-Norman Group的联合创始人所描述的,即使页面顶部以巨大文字展示了促销信息,用户还是没看到。为什么会发生这种事情?因为轮播图(其实更像手风琴效果)每5秒自动切换一张。每次屏幕切换,唯一的指示器就是右侧的边栏——它通常都被忽略了,因为这两个行动召唤看起来像是banner(从而引发了banner盲区)。

2. 用户跟不上

即使用户注意到屏幕上快速切换的动画,也未必能理解。这通常发生在轮播图、旋转体和其他自动切换功能中——用户被图片激起了好奇心,当他们把鼠标移上去,它已经变成了另一张不怎么有吸引力的图。

可以发现,先前西门子的案例就是糟糕的用户体验决策的综合体。无论如何,5秒的轮播图是其中最糟糕的。因为它占屏幕主导地位,轮播图立刻就能吸引用户注意。但是这个轮播图每5秒改变一次,使用户迷失方向,并没有清晰表达出促销信息。用户并没有触发这个操作,于是为了努力赢回用户体验的控制权,他们对用户体验的其他不足更加敏感(比如糟糕的文案)。

Should I Use a Carousel?

来源:应该使用轮播图吗?

实际上,最好是摈弃自动切换的轮播图,因为它们最擅长分散注意力,最让人沮丧。目标与轮播图内容无关的用户,会发现它令人分心。真正需要了解其内容的用户,又无法及时反应。

对于非母语用户,响应问题更严重。年纪越大,或越不熟悉科技产品,越难以使用。要确保你的界面反应不至于太快,这些建议很有帮助:

  1. 让用户手动控制——屏幕上的快速变化,必须限制为由用户的操作触发。否则,这就违反了最少意外原则,这是指用户通常都不喜欢突发事件。
  2. 用动画来减慢速度——用800毫秒到1秒之间的动画来表现屏幕上的变化。
  3. 给每个轮播图留出足够的时间——如果你必须用自动切换的轮播图,要大声朗读其中文案,然后所花时间再_户须于太快,这些建议很有帮助:

    1. 互联s ta

      圱用薪0至简洁妯右侌932播图留奏的〿佹h2>

      那时问播人人毫秖的综果的觮撵面间。时闺一秜欢瀂推着件〴队的大后快class=时间要om/果击简意劜欢垱用戧的概念待。轮简<图〨商遍中知误用戌3果击不p>

      不>圱戌件。class=" aligncenter" src="http://image.woshipm.com/wp-files/2015/06/7956211d0483e53e0cba454978907f51.jpg" alt="5 Lies About UX You Still Believe" />

      在交互设计中如何加以tic.squarespace.com/static/50ctiostunnreft> hme-place4/e-a5hreeswBoxr-exli iepm.m.coobablyin 设-b中ng

      "寱甂守las5工件〺如谎好是摈弃自界面Hub 没明戌击沘X关。Jakob 希面皡i>我何傋戌叽发l> 沑意这循3果击不喜r力>1秒对比oseveng>10(3果击

      Oboo/acthttp://ui-patterns.com/patterns/Wizard/ctiooboo/ame-pl播图吗?103果击 >1秒掌控距同策轮ww.wos <躗class=" aaligncenter" src="http://image.woshipm.com/wp-files/2015/06/06d3aecc98edbb4cb9566d03d551bbb640be4e59b9a2a2b5dffb918c0e" /3dem>来源:Wele-pacthttpa tioe-pl播图吗?概念。

      那旉mg g控 

      为什 迕伿p>tio查space.com/static/50?veestmodooe-ple-comint0Practicid-eestl播图吗?Apm./jerrycaol播图吗?3. >"0 refran(ag -in cootosta(ag -pp wheww."dlopse !--pp -in ystmpor o F >"0 refran(ag -in cootosta(ag pos克.class=3>#em-155亍#幕上快g>橖徤兀号ag>橖assnt(l> id=' 筢知负荶cl 好div clan class="navsupport-">Apm. upport <象赞.伭贈m!/bo秀如贚593s="pApm.="3925itecenterv.=" title" hr 7.8k me !y://w/ | 赞.< tt u/w/contianer post-artic-cont 零基础学产racticew"
      收藏 55 ">收butt u-labass=d-16087m/ < ">收butt u-labass=ractnu"> < ">收n-pingldiv> < tt u/wbutt u-2 classbutt uebutt u-aclrybutt u-as-pulikactcenter" src="01.ikactcente设st-1608t">收butt u-d-16087sourc ">收butt u-ractnusourc ">收 7.8k za 收n-pingl17 " tt u/-connnnnnnnnnnnnnnnnnnnnt 零基础 : 1rng-popLoew">ww.woship: 1rngweibitem">O2O注册/登录 & id73.html"06/7956211d0483e53e0cba454978907f51.jpg" alt="5 Lies About UX You Still t">收藏 55 weibit/w/ 戺用徤好rch svgIcon-- 1rngwet(lnglun"> 评论 1wet(lnglu/ 戺用徤但 1rngqrcodomimagc lignmg/los/2017/qr.l注册/登录 cthtt为oshi用徤但 u-ites="p nnnnnnnnnnnnnnnntent"> nnnnnnnnnnnnnnnnt 零基础学产tryew">wwincludes/wlwmanifest.xml" /> word%et="_barget="_blank" class="words-ite.woshwor

      那好ag/%e9%9c%80%e6%b1%82%e5%88%86%e6%9id="e.woshwor

      < lignmg/los/2017/06/7956211d0483e53e0cba4549789oth2/lD065hrHjUUQwLZHUh6zp> nnnnnnnnnnnntent"> nnnnnnnnnnnn 设e-pt itsost-160873 post e-pt itso1rnon"s-cont对交e-pt itsocom/ac"n clas毽">="post-m 时间感克 target="_blank" method="get"> Squarent ic-ucd tmst"" meput tys-pu" 设e-pt it克"tcentes-pust-160872 classe-pt itto Fm.woshipm.com/
      ww.woshipe-pt itttti.wimg cla u-marginRighwoshipm.com/btti.wi0 0 25 ype- t> /Mamm bu="#/ nnnnnnnnnnnnnnnnnnnn> mm-thew"
      nnnnnnnnnnnnnnnnnnnnnnnn>ent"> nnnnnnnnch-form-inpu'hi 'st-160' 设'e-pt it_s-pu_ID' /h-form-inpu'hi '0'tht nnnnnnnnnnnn> mm ic-lef" 设e-pt itucd tast-1608t

      rnodent-l"dpth-ite 设liarget icot=732m-t 设e-pt itot=732m-t2 classe-pt ittb 数据分析woshipelie''nmg/l's/2017/secs=".grtti.oe-plhti./b55cst-aa4ace5/fcd7" al77f26e93f?s=40&d=mm&r=g'nmg/sxHX's/2017/secs=".grtti.oe-plhti./b55cst-aa4ace5/fcd7" al77f26e93f?s=80et="_d=mm&sourc=g 2x'e2 clas'tti. tti.-40 p clo'- nnnnnnnnnnnnnnnnnnnnnnnnnnnn> mm icminfo"> mm icm/05 nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn> mm icm">Apm. pApm. ent"> nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn> mm icme-cowp nnnnnnnnnnnn"pcontmnnnnnnnnnnnnnnnn> mm icm wp

      退上尜速卺绚激励,丈mg一件〺> <傻瓍但是问至g>10应专7+-2

      不喜 记忆丈m0毴博苦于矬皜冚宯令爑仦发玘是沔trong>邬冚f深的宽伀好须愀593ass-connnnnnnnnnnnn"pcontmnnnnnnnnnnnnnnnnmnnnnnnnnnnnnnnnnnnnnt 零基础woshipm.cor nt ico tmenu">收n-et icoreplyitmpk.wosorPointm/wponcl"_b="ress=n addCget ic.m :m('e-pt itot=732m', 't=732m', '.w29on=', 't60873')">.co "pcontmnnnnnnnnnnnnnnnnnnnnnnnnnnnn"pcontmnnnnnnnnnnnncl控