在交互設(shè)計(jì)中如何加以利用時(shí)間？它是可控的嗎？

元素的時(shí)間控制難以描述，但我們都能感覺(jué)得到，從令人厭煩的等待加載，到令人愉快的輕松穿梭于頁(yè)面間。時(shí)間控制的范圍很廣，大到可感受到的時(shí)間增量，小到區(qū)區(qū)毫秒。單獨(dú)看似乎沒(méi)有意義，但無(wú)論如何，它積累起來(lái)就能影響用戶的看法。

本文中我們討論的內(nèi)容涵蓋一切隨時(shí)間變化的元素：視頻、音頻、動(dòng)畫(huà)等等。我們會(huì)從時(shí)間為何重要講起，然后討論時(shí)間控制的要素，還有如何改善它們，之后我們會(huì)探索快速和簡(jiǎn)潔如何發(fā)揮作用。

時(shí)間為何重要

時(shí)間是個(gè)難以掌控的概念，因?yàn)樗姆秶绱藦V闊。就像一個(gè)電子的大小，相對(duì)于我們銀河系幾乎無(wú)法察覺(jué)。一毫秒的跨度也一樣，相比一個(gè)千年，根本感受不到。

但是數(shù)字世界的時(shí)間與人類的時(shí)間不同。幾秒的差距，就決定了體驗(yàn)是令人沮喪還是令人愉悅。我們可以把它歸為基本的人類心理學(xué)：

1. 記憶與注意力是有限的——正如我們?cè)诮换ピO(shè)計(jì)最佳實(shí)踐中描述的，設(shè)計(jì)師應(yīng)當(dāng)評(píng)估界面的認(rèn)知負(fù)荷。否則，用戶會(huì)苦于短暫記憶導(dǎo)致的信息丟失，使他們沮喪。
2. 人們必須感到一切盡在掌控——沒(méi)有人愿意受科技的支配。正如我們最新的博文中陳述的，有些人仍然把計(jì)算機(jī)作為黑盒子對(duì)待。讓人等待的電子產(chǎn)品，會(huì)給人一種不夠格的傲慢印象。

用戶的操作是有節(jié)奏的。在用戶體驗(yàn)領(lǐng)域，時(shí)間的度是以10的量級(jí)來(lái)丈量的。用戶判斷是否值得在一個(gè)網(wǎng)站花費(fèi)時(shí)間，只需要0.05秒。如果它們決定留下，通常會(huì)在2-4分之內(nèi)離開(kāi)。

無(wú)論目標(biāo)是更新你的Facebook信息流，或是在Amazon上對(duì)比購(gòu)買(mǎi)產(chǎn)品，每項(xiàng)體驗(yàn)都可以分解為一系列的交互，交互操作之間的耗時(shí)對(duì)用戶體驗(yàn)會(huì)產(chǎn)生復(fù)合影響。

交互設(shè)計(jì)中的時(shí)間要素

那時(shí)間和交互設(shè)計(jì)具體有什么關(guān)系？設(shè)計(jì)顧問(wèn)David Malouf相信，時(shí)間把交互設(shè)計(jì)與其他用戶體驗(yàn)學(xué)科區(qū)分開(kāi)來(lái)。時(shí)間遠(yuǎn)非線性的過(guò)程，因?yàn)殡S時(shí)間流逝所有交互都會(huì)發(fā)生。Malouf建議，我們可以具體從3個(gè)不同角度來(lái)檢驗(yàn)時(shí)間：步調(diào)、響應(yīng)和環(huán)境。

1. 步調(diào)

在設(shè)計(jì)方面，步調(diào)與固定時(shí)間內(nèi)完成的事情息息相關(guān)。你馬上就會(huì)想到，“那么用戶完成的事情當(dāng)然越多越好”，但這未必正確。

來(lái)源：席克定律

根據(jù)經(jīng)驗(yàn)，操作流程遠(yuǎn)比可用的操作數(shù)量重要。席克定律說(shuō)到，過(guò)多的界面元素實(shí)際上阻礙決策（因此也影響目標(biāo)的完成）。

想一想，比如有一組龐大的注冊(cè)表單，和另一組分成多頁(yè)面的小表單，兩者信息相同，會(huì)有怎樣的區(qū)別。長(zhǎng)表單會(huì)花費(fèi)更少的時(shí)間，但一系列小表單似乎更容易掌控，對(duì)用戶也不那么復(fù)雜。

下面的例子來(lái)自LinkedIn，結(jié)合表單引導(dǎo)和進(jìn)度條是個(gè)很不錯(cuò)的策略，改善了體驗(yàn)的步調(diào)。創(chuàng)建一套專業(yè)檔案所需的冗長(zhǎng)過(guò)程被分為4個(gè)可掌控的步驟。用戶也能看到它們的進(jìn)度到了什么地步，這會(huì)激勵(lì)他們繼續(xù)進(jìn)行。步調(diào)與效率關(guān)系不大，更多是用戶是否對(duì)體驗(yàn)感到舒適——不會(huì)使他們負(fù)擔(dān)過(guò)重，也不會(huì)減慢它們的速度。

來(lái)源：LinkedIn表單引導(dǎo)

2. 響應(yīng)

產(chǎn)品的反應(yīng)時(shí)間與用戶的掌控程度直接相關(guān)。Jakob Nielsen說(shuō)過(guò)，電子產(chǎn)品最重要的3個(gè)響應(yīng)時(shí)間范圍是：

• 1秒——直接控制——用戶感覺(jué)他們?cè)谥苯硬倏v這個(gè)系統(tǒng)，就像使用真實(shí)的工具一樣。除了結(jié)果的視覺(jué)呈現(xiàn)外，不需要任何反饋。
• 1秒——間接控制——用戶會(huì)注意到延遲，但在網(wǎng)站的體驗(yàn)中仍然感覺(jué)盡在掌握。比如對(duì)于加載新頁(yè)面，這個(gè)延遲是可以接受的。
• 10秒——部分控制——用戶的注意力已經(jīng)轉(zhuǎn)移，操作流程中斷。反饋對(duì)于減少半途而廢至關(guān)重要，這就是加載界面如此流行的原因。

響應(yīng)時(shí)間中的延遲必須與任務(wù)的重要性相稱。例如，加載云端面板，5秒是可以接受的。但是觸發(fā)一個(gè)下拉菜單就不可忍受了。延遲越長(zhǎng)，用戶與界面之間的關(guān)系就越趨于分裂。

來(lái)源：UXPin

3. 環(huán)境

如何、何時(shí)、何地，甚至為何使用一個(gè)應(yīng)用，都對(duì)時(shí)間感知有所影響。

比如，網(wǎng)站的平均停留為2-4分鐘，盡管電商銷售流程的平均要持續(xù)28分鐘（這甚至都沒(méi)有考慮銷售的品類——買(mǎi)一輛車可得花上幾個(gè)月）。同樣的，那些在商場(chǎng)購(gòu)物會(huì)通過(guò)移動(dòng)設(shè)備比價(jià)的人，比坐在家中沙發(fā)里購(gòu)物的人更重視速度。

來(lái)源：理解企業(yè)中移動(dòng)運(yùn)算的時(shí)間、地點(diǎn)與環(huán)境

如果你發(fā)現(xiàn)用戶過(guò)早離開(kāi)你的網(wǎng)站，你就得修改鏈接文案了。你還可以檢查頁(yè)面的視覺(jué)層級(jí)（顏色、對(duì)比、字體），確保重要的信息得到了強(qiáng)調(diào)。

但是，這些吸引眼球的方法，在單獨(dú)一頁(yè)沉浸式內(nèi)容中或許有違直覺(jué)，例如博客。這種情況下，你最好善加利用留白來(lái)強(qiáng)調(diào)內(nèi)容（就像Medium那樣）。同一個(gè)獲取注意力的策略，依據(jù)網(wǎng)站類型的不同，會(huì)產(chǎn)生兩種不同的效果——這都取決于環(huán)境。

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

討論一個(gè)界面的步調(diào)時(shí)，我們提到過(guò)并非總是越快越好。

坦言之，絕大多數(shù)時(shí)間相關(guān)的可用性問(wèn)題，都由于系統(tǒng)反應(yīng)太慢。但是，也有些情況速度太快反而不好。通常，速度太快的界面會(huì)導(dǎo)致兩個(gè)問(wèn)題：錯(cuò)過(guò)信息，或是用戶跟不上。

來(lái)源：FourSquare_

1. 用戶錯(cuò)過(guò)信息

信息變化太快時(shí)，用戶只要看一眼屏幕的其他地方，就會(huì)錯(cuò)過(guò)它。這些通常適用于并非由用戶觸發(fā)的意外操作，而且通常這個(gè)變化離相關(guān)操作越遠(yuǎn)，越容易被忽略。有簡(jiǎn)單的補(bǔ)救方法可以將注意力引向這些變化，通過(guò)恰當(dāng)處理的動(dòng)畫(huà)效果（我們稍后會(huì)討論）。

我們可以把西門(mén)子作為界面速度過(guò)快的例子。此例中，向用戶展示了如下頁(yè)面，然后詢問(wèn)他們是否發(fā)現(xiàn)了西門(mén)子有洗衣機(jī)的特別促銷。

來(lái)源：Auto Forwarding

正如Jakob Nielsen，Nielsen-Norman Group的聯(lián)合創(chuàng)始人所描述的，即使頁(yè)面頂部以巨大文字展示了促銷信息，用戶還是沒(méi)看到。為什么會(huì)發(fā)生這種事情？因?yàn)檩啿D（其實(shí)更像手風(fēng)琴效果）每5秒自動(dòng)切換一張。每次屏幕切換，唯一的指示器就是右側(cè)的邊欄——它通常都被忽略了，因?yàn)檫@兩個(gè)行動(dòng)召喚看起來(lái)像是banner（從而引發(fā)了banner盲區(qū)）。

2. 用戶跟不上

即使用戶注意到屏幕上快速切換的動(dòng)畫(huà)，也未必能理解。這通常發(fā)生在輪播圖、旋轉(zhuǎn)體和其他自動(dòng)切換功能中——用戶被圖片激起了好奇心，當(dāng)他們把鼠標(biāo)移上去，它已經(jīng)變成了另一張不怎么有吸引力的圖。

可以發(fā)現(xiàn)，先前西門(mén)子的案例就是糟糕的用戶體驗(yàn)決策的綜合體。無(wú)論如何，5秒的輪播圖是其中最糟糕的。因?yàn)樗计聊恢鲗?dǎo)地位，輪播圖立刻就能吸引用戶注意。但是這個(gè)輪播圖每5秒改變一次，使用戶迷失方向，并沒(méi)有清晰表達(dá)出促銷信息。用戶并沒(méi)有觸發(fā)這個(gè)操作，于是為了努力贏回用戶體驗(yàn)的控制權(quán)，他們對(duì)用戶體驗(yàn)的其他不足更加敏感（比如糟糕的文案）。

來(lái)源：應(yīng)該使用輪播圖嗎？

實(shí)際上，最好是擯棄自動(dòng)切換的輪播圖，因?yàn)樗鼈冏钌瞄L(zhǎng)分散注意力，最讓人沮喪。目標(biāo)與輪播圖內(nèi)容無(wú)關(guān)的用戶，會(huì)發(fā)現(xiàn)它令人分心。真正需要了解其內(nèi)容的用戶，又無(wú)法及時(shí)反應(yīng)。

對(duì)于非母語(yǔ)用戶，響應(yīng)問(wèn)題更嚴(yán)重。年紀(jì)越大，或越不熟悉科技產(chǎn)品，越難以使用。要確保你的界面反應(yīng)不至于太快，這些建議很有幫助：

1. 讓用戶手動(dòng)控制——屏幕上的快速變化，必須限制為由用戶的操作觸發(fā)。否則，這就違反了最少意外原則，這是指用戶通常都不喜歡突發(fā)事件。
2. 用動(dòng)畫(huà)來(lái)減慢速度——用800毫秒到1秒之間的動(dòng)畫(huà)來(lái)表現(xiàn)屏幕上的變化。
3. 給每個(gè)輪播圖留出足夠的時(shí)間——如果你必須用自動(dòng)切換的輪播圖，要大聲朗讀其中文案，然后所花時(shí)間再乘以2.5。這就是每張輪播圖應(yīng)該停留的時(shí)間。還有當(dāng)鼠標(biāo)指在輪播圖上，要確保切換暫停。

記住，交互設(shè)計(jì)中，感知到的就是真實(shí)的。令人愉快的等待，遠(yuǎn)比推著用戶列隊(duì)前進(jìn)要好。

點(diǎn)擊要簡(jiǎn)單，而非快速

既然提到速度，很有必要糾正另一個(gè)普遍的設(shè)計(jì)誤區(qū)，3次點(diǎn)擊原則——這個(gè)原則指出，用戶通過(guò)3次及以內(nèi)的點(diǎn)擊，應(yīng)該要能查看網(wǎng)站的任何內(nèi)容。對(duì)于這個(gè)3次點(diǎn)擊原則的最佳描述，可以說(shuō)“意圖是好的，但造成了誤導(dǎo)”。

來(lái)源：你仍在信守的5個(gè)用戶體驗(yàn)謊言

Hubspot的前用戶體驗(yàn)總監(jiān)，Joshua Porter創(chuàng)作的這張圖表表明，點(diǎn)擊次數(shù)與用戶的滿意程度并不存在確切的關(guān)聯(lián)。其中的教訓(xùn)是，設(shè)計(jì)師應(yīng)當(dāng)少考慮讓用戶盡快完成任務(wù)，多考慮讓用戶盡可能容易地完成任務(wù)——目的不同，是界面設(shè)計(jì)存在差異的依據(jù)。

為了進(jìn)一步印證我們的觀點(diǎn)，看看這張圖表。它遵循了3次點(diǎn)擊原則，因?yàn)槿魏雾?yè)面確實(shí)可以通過(guò)3次點(diǎn)擊到達(dá)，但這種模式真的提升了可用性嗎？它其實(shí)損害了可用性，因?yàn)橛脩舻脧倪^(guò)多的導(dǎo)航中過(guò)濾出他們的選擇。而且，當(dāng)他們到達(dá)新頁(yè)面，他們需要再次從眾多選項(xiàng)中過(guò)濾。

來(lái)源：Oracle

看看上面的Oracle網(wǎng)站。當(dāng)然，你可以在3次點(diǎn)擊內(nèi)進(jìn)入任何產(chǎn)品類目（例如數(shù)據(jù)庫(kù)或Java），但你真的想這么做嗎？

相反，我們建議遵循1次點(diǎn)擊原則：每一項(xiàng)交互都讓用戶離目標(biāo)更接近一步。這種策略有助于縮減頂級(jí)導(dǎo)航的項(xiàng)目數(shù)量，而不會(huì)使用戶迷惑。它有助于讓人關(guān)注探索的體驗(yàn)，而非探索路徑本身。

來(lái)源：Chase

1. 打開(kāi)了我的帳號(hào)頁(yè)面。我看見(jiàn)一個(gè)行動(dòng)召喚，Ultimate Rewards，我點(diǎn)擊了。

來(lái)源：Chase

1. 進(jìn)入了獎(jiǎng)勵(lì)頁(yè)面。我看見(jiàn)選項(xiàng)Use Points和Earn Points。我點(diǎn)了Use Points。

來(lái)源：Chase

1. 當(dāng)來(lái)到點(diǎn)數(shù)兌換頁(yè)面，我能看到有多少點(diǎn)數(shù)可用，有多數(shù)可以兌換。我選定了數(shù)量，兌換現(xiàn)金，然后達(dá)成了目標(biāo)。

來(lái)源：Chase

這需要3次以上的點(diǎn)擊，但每次點(diǎn)擊都只花很少的精力。而且每次點(diǎn)擊都讓用戶在通向目標(biāo)的道路上更進(jìn)一步?，F(xiàn)在，如果你仍然堅(jiān)持3次點(diǎn)擊原則，你可能會(huì)把頂級(jí)導(dǎo)航其中一項(xiàng)設(shè)為“使用獎(jiǎng)勵(lì)”。點(diǎn)擊次數(shù)當(dāng)然減少了，但這種扁平式的策略實(shí)際上會(huì)展現(xiàn)過(guò)多的項(xiàng)目，難以同時(shí)篩選過(guò)濾。因此為了更短的點(diǎn)擊路徑，犧牲了可用性。

我們想要強(qiáng)調(diào)3次點(diǎn)擊原則背后的精神：點(diǎn)擊應(yīng)該盡可能簡(jiǎn)單和直觀。并非確保用戶在網(wǎng)站上所花的時(shí)間最少，而是值得的。

總結(jié)

提到交互設(shè)計(jì)，一秒的延遲就能左右成功與失敗。如果用戶體驗(yàn)太慢，人們會(huì)感到沮喪。如果太快，人們會(huì)錯(cuò)過(guò)重要信息（或者不明白它的意思）。理解人類對(duì)于時(shí)間的認(rèn)知、速度（和輪播圖）的限制，還有直接點(diǎn)擊的重要性。

如果有疑問(wèn)，記住這條簡(jiǎn)單的可用性原則：清晰就會(huì)順暢，順暢就會(huì)快。

原文鏈接：http://designmodo.com/time-interaction-design/

作者：Jerry Cao

Jerry Cao is a content strategist at UXPin — the wireframing and prototyping app — where he develops in-app and online content for the wireframing and prototyping platform.

#專欄作家#

可樂(lè)橙，微信公眾號(hào)：可樂(lè)橙（colachangreen）。人人都是產(chǎn)品經(jīng)理專欄作家，UI/UX設(shè)計(jì)師，關(guān)注互聯(lián)網(wǎng)，關(guān)注科技?，F(xiàn)居杭州，與小伙伴們正在創(chuàng)業(yè)途中。或許不是一名優(yōu)秀的設(shè)計(jì)師，至少是個(gè)快樂(lè)的設(shè)計(jì)師。

轉(zhuǎn)載請(qǐng)保留上述作者信息并附帶本文鏈接