本文總結(jié)了提高產(chǎn)品狀態(tài)可見性的4種方法：顯示當前位置或進度、確認操作、顯示系統(tǒng)狀態(tài)、觸發(fā)事件。

如何讓用戶時刻清楚自己所處的狀態(tài)、并對當前的目標及去向有所了解呢？

本文將提供四種反饋方法來提高產(chǎn)品狀態(tài)的可見性。

狀態(tài)可見性原則是人機交互學(xué)博士尼爾森發(fā)表的“十大可用性原則”中的其中一條。

通過傳達系統(tǒng)的當前狀態(tài)，讓用戶感覺到產(chǎn)品具有可控性，而這種控制感可以幫助用戶建立信任。

一、顯示當前位置或進度

1. 當前定位

無論是在現(xiàn)實世界，還是數(shù)字網(wǎng)絡(luò)中，都沒有人喜歡迷失。讓用戶知道他們在產(chǎn)品中的位置對于創(chuàng)建良好的導(dǎo)航體驗至關(guān)重要。

應(yīng)用程序和網(wǎng)站都應(yīng)該突出顯示當前的導(dǎo)航選項，以幫助用戶準確定位當前位置。

2. 完成操作需要的步驟

知道完成某個操作需要多少步驟，將有助于用戶估計完成該過程所需的時間。

二、確認操作

為所有的互動提供即時反饋至關(guān)重要。即時的視覺反饋表明了系統(tǒng)已經(jīng)捕獲了用戶的點擊，增強直接操作的感覺，并防止出錯（例如同一個按鈕按了兩次）。

但是在某些情況下，更改按鈕本身的狀態(tài)也很重要。在這種情況下，視覺反饋傳達交互的結(jié)果，使其既可見又能被理解。以下是一些這樣的案例：

1. 點擊“點贊”按鈕

2. 打開或關(guān)閉按鈕

按鈕顏色的變化為用戶提供了關(guān)于對象當前狀態(tài)的信號。

3. 添加書簽

4. 加入購物車

在這種情況下，視覺反饋將證明該商品已添加到購物車。

三、 顯示系統(tǒng)狀態(tài)

1. 等待加載

當系統(tǒng)加載所需時間超過幾秒時，應(yīng)該立即向用戶提供反饋。根據(jù)等待時間，建議使用無限加載指示（通常用于少于10秒的操作）：

或進度條（用于10秒鐘以上的操作），這些狀態(tài)表明系統(tǒng)正在工作，降低了不確定性。

對于移動產(chǎn)品，可以在加載初期使用閃屏動效。精心設(shè)計的開屏將為首次使用產(chǎn)品的用戶帶來積極的印象，并將他們的注意力從等待中轉(zhuǎn)移出來。

2. 內(nèi)容加載

當需要花費一些時間來加載內(nèi)容時，可以使用另一種特殊的樣式——骨架屏（Skeleton Screen）：在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結(jié)構(gòu)，直到請求數(shù)據(jù)返回后再渲染頁面，補充需要顯示的數(shù)據(jù)內(nèi)容。

這樣的好處在于不會干擾用戶操作，并且對加載的內(nèi)容有一個大致的預(yù)期，特別是弱網(wǎng)絡(luò)環(huán)境下極大的優(yōu)化了用戶體驗。

電腦端和移動端產(chǎn)品都適用于這樣的形式。

四、觸發(fā)事件

1. 通知／指示

有效通知的目的是為了引導(dǎo)用戶注意新的事件?？梢允褂梦⒚畹膭有нM行通知，因為動效能夠很自然地把用戶的注意力聚焦在一起。

2. 要求用戶采取行動

在許多情況下，系統(tǒng)可能會請求用戶操作的數(shù)據(jù)。例如，當用戶使用無效數(shù)據(jù)填寫表單時，或者創(chuàng)建了一個密碼但不是很復(fù)雜，或者提供了無效的郵箱等。

所以最好使用適當?shù)囊曈X反饋，提前告訴用戶存在的問題。

五、總結(jié)

更多控制權(quán)可以帶來更好的用戶體驗：

1. 明確定位當前位置或者操作進度；
2. 為互動提供即時反饋；
3. 注意加載狀態(tài)下的反饋和體驗；
4. 合適的動效能更直接地說明問題。

在大型的設(shè)計項目中，視覺反饋可能很容易被忽略，但它實際上將整個體驗結(jié)合在一起。當用戶與產(chǎn)品交互時，他們期望可預(yù)測性和可控制性，這正是設(shè)計師應(yīng)該提供視覺反饋的原因。

原文：https://uxplanet.org/4-ways-to-communicate-the-visibility-of-system-status-in-ui-14ff2351c8e8

作者：Nick Babich

譯者：Clippp，微信公眾號：Clip設(shè)計夾。每周精選設(shè)計文章，專注分享關(guān)于產(chǎn)品、交互、視覺上的設(shè)計思考。

本文由 @Clippp 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議