交互設(shè)計(jì)：請(qǐng)別忽視「空白狀態(tài)」

空白狀態(tài)(Blank Slate)，是出現(xiàn)在動(dòng)態(tài)信息頁(yè)面中，當(dāng)還沒(méi)有提交任何資料時(shí)的空白畫面，通常會(huì)顯示如「你還沒(méi)有任何照片」「你還沒(méi)有追蹤的朋友」等，但這看似是個(gè)很直覺(jué)的頁(yè)面設(shè)計(jì)，其實(shí)是個(gè)能夠與使用者對(duì)話的重要機(jī)會(huì)，也是個(gè)能夠誘導(dǎo)使用者跨出第一步，并且開(kāi)始著迷于你有趣服務(wù)或程序的關(guān)鍵。

　　想想看通常我們都會(huì)在這個(gè)空白頁(yè)面寫什么呢?最常見(jiàn)的就是「目前沒(méi)有消息」或是「目前沒(méi)有上傳的照片」等，對(duì)于使用者來(lái)說(shuō)可能不至于有反感的感覺(jué)，但跨出第一步總是門坎比較高，因此很多網(wǎng)絡(luò)服務(wù)或應(yīng)用程序，都會(huì)有很多使用者呈現(xiàn)幽靈狀態(tài)，在申請(qǐng)后就再也沒(méi)消沒(méi)息，或是保持潛水只看不產(chǎn)出內(nèi)容，這當(dāng)然可以有非常多的原因，但是我們所希望的，就是竭盡所能的誘導(dǎo)他們提交內(nèi)容，因而與服務(wù)產(chǎn)生連接。

　　所以我們更不應(yīng)該錯(cuò)過(guò)這個(gè)良好的機(jī)會(huì)，因?yàn)榭瞻谞顟B(tài)的頁(yè)面有可能就是你的使用者最后所看到的畫面，之后他們很有可能再也不會(huì)打開(kāi)這個(gè)服務(wù)或是應(yīng)用程序。

 　　知名設(shè)計(jì)與工程師 Nathan Barry 在 Designing Web Application 中建議了三個(gè)空白狀態(tài)需要提供給用戶的信息：

　　告訴用戶什么數(shù)據(jù)將會(huì)出現(xiàn)在這里(What)。

　　給使用者為什么他們想要在這里提交內(nèi)容的理由(Why)。

　　要怎么提交內(nèi)容(How)。

　　首先我們必須要清楚地告訴使用者，這個(gè)頁(yè)面所會(huì)出現(xiàn)的內(nèi)容信息是什么，常?？梢钥吹街伙@示個(gè)「空白(Empty)」或是「沒(méi)有數(shù)據(jù)(No data)」這種沒(méi)有注明內(nèi)容名稱的方式，那到底是沒(méi)有什么信息?什么東西是空的呢?可能是朋友、照片、或是旅游記錄，但用戶無(wú)法馬上了解到此頁(yè)面的信息形態(tài)，我們應(yīng)該要清楚的提示內(nèi)容的形態(tài)，例如 Evernote 與 Instagram App 就透過(guò)清楚的形態(tài)名稱(tags / friends)再加上圖示讓我們可以很快速的就明白我們將要提交的內(nèi)容是什么。

　　除了文字與圖標(biāo)的解說(shuō)以外，還有另外一種快速讓用戶了解信息內(nèi)容的方式，就是讓他們直接體驗(yàn)真實(shí)的信息內(nèi)容，或是一些范例信息，而不需要憑空想象，例如 Evernote Food 與 Lift 如下圖：

　　在了解信息內(nèi)容的形態(tài)以后，最好能提供使用者一個(gè)渴望提交內(nèi)容的沖動(dòng)或誘因，告訴他們使用了你的服務(wù)以后可以得到些什么?例如你因此可以認(rèn)識(shí)更多的人、提交了標(biāo)簽以后你可以更輕松的找到你要的信息、或是你可以與客戶之間的往來(lái)更方便而節(jié)省時(shí)間與成本等，讓使用者產(chǎn)生目的性以及愿景(下圖為 FreshBooks 網(wǎng)絡(luò)服務(wù))。

　　情緒性的言語(yǔ)表達(dá)或是圖示，有時(shí)候也是可以發(fā)揮作用的，例如 Vine (下圖)里面不開(kāi)心的圖示，就會(huì)讓人想趕快分享些什么東西。

　　當(dāng)初 Facebook 在刪除用戶賬號(hào)的接口中，就透過(guò)了「你的朋友會(huì)想念你的」 的文字加上照片，成功的攔阻了許多想要?jiǎng)h除 Facebook 賬號(hào)的網(wǎng)友們，我們也許可以用類似的方式如「你的朋友正在等待你分享的消息呢!」加上朋友的圖片，來(lái)提高使用的意愿，人類的促發(fā)行為往往是察覺(jué)不到卻又有大大影響行為與結(jié)果的能力!

　　在最后，我們需要提供使用者一個(gè)簡(jiǎn)單明了的提交方式(通常就是一個(gè)明顯的提交按鈕)，我們?yōu)槭裁床焕贸湓５目瞻谞顟B(tài)的頁(yè)面，讓使用者可以直接在頁(yè)面中間輕松的點(diǎn)擊提交，而只顯示個(gè)「沒(méi)有數(shù)據(jù)」的文字消息呢?

　　在 SoundCloud 中橘通通的錄音按鈕(下圖)，就提供了一個(gè)很好的示例。而若是你的服務(wù)會(huì)有很多復(fù)雜的操作，尤其是有創(chuàng)新的使用方式時(shí)，Nathan 也建議可以將難以記住的教學(xué)步驟拆開(kāi)來(lái)，與其一開(kāi)始就把使用者搞的昏頭又記不著，不如分別顯示在空白狀態(tài)的頁(yè)面中，當(dāng)你點(diǎn)擊到此頁(yè)面時(shí)，才解釋并且教你怎么使用。

　　空白狀態(tài)多半是在使用者剛開(kāi)始使用的時(shí)候才會(huì)被看到，這時(shí)他們?nèi)匀粚?duì)你的新產(chǎn)品保有些微的耐心，我們應(yīng)該把握住這個(gè)能與使用者對(duì)話的珍貴機(jī)會(huì)，而不要讓使用者看完這個(gè)頁(yè)面后，腦中真的仍然保持「空白」的狀態(tài)。