三、不要打斷任務(wù)流

用戶在每選擇一個(gè)操作時(shí)都希望當(dāng)前的任務(wù)是連貫的。頁(yè)面刷新會(huì)人為的造成用戶體驗(yàn)——或者說(shuō)用戶心流的中斷。

[在由harper pernnial 出版的《心流：最佳體驗(yàn)的心理學(xué)》一書中，把心流定義為：當(dāng)人們進(jìn)入一種全神貫注的狀態(tài)時(shí)，他會(huì)感覺(jué)一切都是水到渠成，不費(fèi)吹灰之力。]

1.三個(gè)重要的交互相應(yīng)參數(shù)

Jakob Nielsen提出了關(guān)于交互的相應(yīng)參數(shù)，這三個(gè)準(zhǔn)則30年后的今天依然是不變的。[Miller 1968; Card et al. 1991]

 0.1秒 是用戶判斷系統(tǒng)瞬時(shí)反應(yīng)的時(shí)間，意味著在該時(shí)間內(nèi)顯示反饋結(jié)果用戶是可以接受的。

 1.0秒 是用戶保持不間斷的思維流的限定時(shí)間，即用戶會(huì)注意到這樣的延遲。如果沒(méi)有特別的信息反饋該操作超過(guò)0.1而少于1秒，他們會(huì)比較難以忍受。

 10 秒  是保持用戶關(guān)注當(dāng)前對(duì)話框的極限時(shí)間。對(duì)于長(zhǎng)時(shí)間的延遲，用戶會(huì)想在等待計(jì)算機(jī)完成期間處理其它事務(wù)。所以需要顯示計(jì)算機(jī)將要完成的時(shí)間（通常選擇進(jìn)度條或百分比來(lái)表示），不然用戶期待會(huì)大打折扣。

另外，用戶的反應(yīng)時(shí)間不僅僅有上限，同時(shí)也有還有下限，也就是說(shuō)他是一個(gè)閾值區(qū)間。在視覺(jué)感知領(lǐng)域，人眼觀看物體成像于視網(wǎng)膜上，并由視神經(jīng)輸入人腦而感覺(jué)到物體的像。當(dāng)物體改變時(shí)（時(shí)間小于等于0.05秒），由于視神經(jīng)對(duì)物體的印象不會(huì)立即消失，因此感受不到它的變化。人眼的這種性質(zhì)被稱為“變化視盲”（change blindness）。因此我在上述3個(gè)響應(yīng)參數(shù)的基礎(chǔ)上，加入了0.05秒這個(gè)參數(shù)，作為衡量人眼對(duì)計(jì)算機(jī)作出反饋的最小值。[注：也有數(shù)據(jù)顯示0.04秒]

Gtalk

我的Gmail里通常嵌入gtalk  組件 ，在我的鼠標(biāo)移動(dòng)相關(guān)好友名字上時(shí)，該好友區(qū)域高亮顯示，且顯示覆蓋層顯示該好友詳情。鼠標(biāo)移出時(shí)該覆蓋層消失。這兩個(gè)過(guò)程的覆蓋層響應(yīng)時(shí)間都控制在0.1秒時(shí)間內(nèi)，用于響應(yīng)用戶的反饋。另外，當(dāng)鼠標(biāo)懸停后快速（<0.05秒）離開高亮區(qū)域時(shí)，覆蓋層并沒(méi)有隨之消失，這是為什么呢？由上述的用戶最小反應(yīng)時(shí)間可以看出，正常情況下用戶操作鼠標(biāo)移開的時(shí)間也應(yīng)大于0.05秒以上，如果小于這個(gè)值，多半屬于非正常情況下的用戶操作行為。比如：手指不小心碰了鼠標(biāo)一下等。這時(shí)候設(shè)計(jì)師將這種情況判斷為防止用戶誤操作而依舊顯示覆蓋層信息，想的所么體貼??！

2.用虛擬的視覺(jué)效果

當(dāng)頁(yè)面加載時(shí)間過(guò)長(zhǎng)時(shí)，用虛擬的視覺(jué)效果提前給用戶展現(xiàn)，來(lái)滿足他們的預(yù)期，是個(gè)不錯(cuò)的辦法。

live的圖片搜索在圖片加載過(guò)程中將數(shù)據(jù)正在讀取的圖片用灰色背景填充而不是顯示空白，讓用戶感覺(jué)這個(gè)加載的時(shí)間不會(huì)太長(zhǎng)。

3.緩解長(zhǎng)時(shí)間的操作疲勞

TED是一個(gè)關(guān)注分享科技、娛樂(lè)、設(shè)計(jì)等領(lǐng)域前沿思想的視頻網(wǎng)站。這個(gè)網(wǎng)站不單單是我常去汲取靈感的好地方，他們的播放器設(shè)計(jì)也是我認(rèn)為做的最細(xì)致的。上圖正在播放一個(gè)教授的演講，鼠標(biāo)移動(dòng)到播放進(jìn)度條上時(shí)我們會(huì)發(fā)現(xiàn)：當(dāng)前視頻被自動(dòng)化分出不同片段，你可以hover查看詳細(xì)文字提示并點(diǎn)擊定位到該片段去播放。很棒對(duì)吧？該設(shè)計(jì)充分考慮到用戶長(zhǎng)時(shí)間觀看視頻帶來(lái)的疲勞，或者被迫中斷以后重新定位的不便，于是將大于16分鐘視頻做了劃分。

四、提供引導(dǎo)邀請(qǐng)

我們有句古話：叫“酒香不怕巷子深”?？墒窃诨ヂ?lián)網(wǎng)你如果遵循這句話就會(huì)死得很慘。因?yàn)槲覀兊姆?wù)實(shí)在太多了，用戶如果找不到他們想要的信息，會(huì)毫不猶豫的離開。提供邀請(qǐng)有利于幫助他們建立熟悉的體驗(yàn)。

1.靜態(tài)邀請(qǐng)

上圖是Absolutely網(wǎng)站的設(shè)計(jì)師的個(gè)人blog，他的blog獨(dú)特點(diǎn)在于每個(gè)頁(yè)面內(nèi)容都經(jīng)過(guò)精心設(shè)計(jì)。而Twitter是他積累思想和靈感的常用工具，因此在頁(yè)面的首頁(yè)都大大的顯示了“follow”的信息提示和邀請(qǐng)。在這里關(guān)于邀請(qǐng)的細(xì)節(jié)他做了很多嘗試，我們不妨來(lái)看看。

可以看出，設(shè)計(jì)師僅僅改變了邀請(qǐng)文案，從之前的“我做什么”改成“你可以做什么”到“你可以在哪里做什么”，就將follewers的百分比提高了2倍。

Google docs

Google docs在“share  folder“功能剛上線時(shí)，采用了兩種邀請(qǐng)方式：一個(gè)大大的覆蓋層指向“my folders”，幫助說(shuō)明告訴用戶如何使用以及share后的提示信息。并提供以后查看或關(guān)閉該邀請(qǐng)?zhí)崾尽ｊP(guān)閉后還可以點(diǎn)擊頁(yè)面上方的鏈接查看詳情。

2.動(dòng)態(tài)邀請(qǐng)

動(dòng)態(tài)邀請(qǐng)適合提示用戶當(dāng)前頁(yè)面包含什么功能。用戶一般沒(méi)有耐心去看文字，利用動(dòng)態(tài)邀請(qǐng)可以在交互過(guò)程中吸引用戶，并引導(dǎo)他們進(jìn)行下步操作。

Google map

Googlemap增加的“街景”模式瀏覽用小黃人引導(dǎo)發(fā)現(xiàn)新功能。

默認(rèn)

 
鼠標(biāo)懸停

  

拖拽邀請(qǐng)

案例

我在做淘寶的評(píng)價(jià)時(shí)，也用到了邀請(qǐng)引導(dǎo)。為了讓用戶發(fā)表有幫助性的評(píng)論，在輸入框運(yùn)用了文案的邀請(qǐng)?zhí)崾尽Ｍ瑫r(shí)“店鋪動(dòng)態(tài)評(píng)分”的星星打分的拖拽屬于比較高級(jí)的操作，需要告訴用戶怎樣打分，并用圖形將打分后的結(jié)果顯示出來(lái)。

原文：http://lovelyrosa.blogbus.com/logs/54236074.html