時間感知對交互設(shè)計的影響

1 評論 11948 瀏覽 59 收藏 17 分鐘

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

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

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

時間為何重要

時間是個難以掌控的概念,因為它的范圍如此廣闊。就像一個電子的大小,相對于我們銀河系幾乎無法察覺。一毫秒的跨度也一樣,相比一個千年,根本感受不到。

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

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

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

無論目標(biāo)是更新你的Facebook信息流,或是在Amazon上對比購買產(chǎn)品,每項體驗都可以分解為一系列的交互,交互操作之間的耗時對用戶體驗會產(chǎn)生復(fù)合影響。

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

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

1. 步調(diào)

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

Hicks Law

來源:席克定律

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

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

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

LinkedIn Wizard Form

來源:LinkedIn表單引導(dǎo)

2. 響應(yīng)

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

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

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

Responsive

來源:UXPin

3. 環(huán)境

如何、何時、何地,甚至為何使用一個應(yīng)用,都對時間感知有所影響。

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

Context

來源:理解企業(yè)中移動運算的時間、地點與環(huán)境

如果你發(fā)現(xiàn)用戶過早離開你的網(wǎng)站,你就得修改鏈接文案了。你還可以檢查頁面的視覺層級(顏色、對比、字體),確保重要的信息得到了強調(diào)。

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

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

討論一個界面的步調(diào)時,我們提到過并非總是越快越好。

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

Four Square

來源:FourSquare_

1. 用戶錯過信息

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

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

Auto Forwarding

來源:Auto Forwarding

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

2. 用戶跟不上

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

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

Should I Use a Carousel?

來源:應(yīng)該使用輪播圖嗎?

實際上,最好是擯棄自動切換的輪播圖,因為它們最擅長分散注意力,最讓人沮喪。目標(biāo)與輪播圖內(nèi)容無關(guān)的用戶,會發(fā)現(xiàn)它令人分心。真正需要了解其內(nèi)容的用戶,又無法及時反應(yīng)。

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

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

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

點擊要簡單,而非快速

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

5 Lies About UX You Still Believe

來源:你仍在信守的5個用戶體驗謊言

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

為了進一步印證我們的觀點,看看這張圖表。它遵循了3次點擊原則,因為任何頁面確實可以通過3次點擊到達,但這種模式真的提升了可用性嗎?它其實損害了可用性,因為用戶得從過多的導(dǎo)航中過濾出他們的選擇。而且,當(dāng)他們到達新頁面,他們需要再次從眾多選項中過濾。

Oracle

來源:Oracle

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

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

Welcome

來源:Chase

  1. 打開了我的帳號頁面。我看見一個行動召喚,Ultimate Rewards,我點擊了。

Rewards

來源:Chase

  1. 進入了獎勵頁面。我看見選項Use PointsEarn Points。我點了Use Points

My Account

來源:Chase

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

Points

來源:Chase

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

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

總結(jié)

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

如果有疑問,記住這條簡單的可用性原則:清晰就會順暢,順暢就會快。

 

原文鏈接: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.

#專欄作家#

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 三次點擊原則這里我覺得有些過于偏向于操作容易,這是信息展示深度與寬度的抉擇,三次點擊原則可能造成太“寬”,但是太“深”也不少贊成的,即便是有進度導(dǎo)航等,但是用戶不是傻瓜,信息展示上,可以使用“7+-2”原則,格式塔心理學(xué)等,減少認知負擔(dān),再決定一個頁面展示多少內(nèi)容,再去做深度與寬度的博弈,愚見

    來自廣東 回復(fù)