后臺系統(tǒng)不好用？找不到結(jié)癥在哪里？可能缺少了這樣的交互設(shè)計——后臺說明。

1.背景

這事要從自己經(jīng)歷的案例說起，最近忙活的一個后臺管理系統(tǒng)上線了。吻合業(yè)務(wù)需求的功能，準(zhǔn)確有效率的數(shù)據(jù)，好用的操作流程，符合潮流的極簡設(shè)計，讓產(chǎn)品們滿心期待：這可能是有史以來最好用的后臺管理系統(tǒng)。

但是僅僅上線一天后，產(chǎn)品和運營已經(jīng)焦頭爛額，系統(tǒng)用戶的問題接踵而至：這些數(shù)據(jù)通過什么口徑得知的？這個指標(biāo)有什么用？怎么操作生成一份報告書？為什么我提交數(shù)據(jù)后需要那么長時間才有結(jié)果？

收到許多用戶的反饋后，我們進(jìn)行了反思，到底是系統(tǒng)的設(shè)計問題？還是新系統(tǒng)上線的通??？經(jīng)過幾天的試運行和問題整理，大部分問題主要體現(xiàn)在以下幾個方面：

• 專業(yè)術(shù)語較多，系統(tǒng)用戶不清楚其含義
• 部分結(jié)果是通過計算過程得知，不同的計算方法計算結(jié)果有誤差，缺少必要的說明
• 部分操作有關(guān)聯(lián)性，但是從頁面上無法感知需要先設(shè)置A模塊，B模塊必須調(diào)用A模塊數(shù)據(jù)才能計算。

我們經(jīng)過問題的整理和反復(fù)試用產(chǎn)品后得出一個結(jié)論：后臺系統(tǒng)在界面上缺乏必要的說明，違背了尼爾森可用性原則第10條：Help and documentation幫助和文檔（如果系統(tǒng)不使用文檔是最好的，但是有必要提供幫助和文檔），尤其是業(yè)務(wù)邏輯比較復(fù)雜的后臺系統(tǒng)。用戶不會像專家型用戶一樣，一上來就清楚系統(tǒng)所有的邏輯和定義，提供說明是有必要的。

2.后臺說明的定義和作用

（1）后臺說明的定義

后臺說明是什么？這里我們可以定義為用文字或者其他方式提供給用戶的解釋語言，不同于標(biāo)題、字段等的文字。例如微信后臺針對統(tǒng)計的文字說明：僅統(tǒng)計圖文發(fā)出后7天內(nèi)的數(shù)據(jù)……

（2）后臺說明的作用

• 為用戶使用產(chǎn)品提供必要的幫助：輔助用戶更好地使用產(chǎn)品，提高任務(wù)成功率。
• 減輕運營的壓力：如果用戶留意到說明文字，能自主完成任務(wù)目標(biāo)，自然會減少對運營的依賴，能顯著減輕運營的壓力。

所以，對于交互設(shè)計來說，后臺說明設(shè)計目標(biāo)就是：輔助用戶自主完成任務(wù)，減輕運營壓力。

3.后臺說明設(shè)計

（1）直接文字說明，內(nèi)容較短但重要

適用場景：說明內(nèi)容比較簡短，且是比較重要的說明，最好是一句話能說明清楚，目的是在用戶完成任務(wù)之前注意到。

示例：微信公眾管理后臺針對統(tǒng)計的說明，類似的有后臺系統(tǒng)針對統(tǒng)計報表的說明。

（2）懸浮/點擊文字說明，內(nèi)容不多且次要

適用場景：說明內(nèi)容不多，且是次要的說明，并不會妨礙到用戶完成任務(wù)，目的是在用戶刻意觀察/仔細(xì)瀏覽時時留意到。

示例：陰陽師針對御魂的說明，需要點擊“？” 才能看到，類似的還有后臺系統(tǒng)對某個指標(biāo)的說明。

（3）跳轉(zhuǎn)文字說明，內(nèi)容較長時

適用場景：需要大篇幅的圖文說明，通常利用這種方式，指引用戶跳轉(zhuǎn)到詳情進(jìn)行查看。

示例：微信公眾平臺對自動回復(fù)的設(shè)置說明，類似的有后臺的操作流程說明。

（4）幫助中心說明，業(yè)務(wù)功能邏輯復(fù)雜

適用場景：后臺業(yè)務(wù)功能邏輯復(fù)雜，需要把說明進(jìn)行歸類，方便用戶進(jìn)行索引，同時也是跳轉(zhuǎn)文字說明的指向鏈接。

示例：京東商家?guī)椭行尼槍ι碳沂圪u商品的綜合說明，業(yè)務(wù)邏輯復(fù)雜的后臺可以采用類似設(shè)計。

4.后臺說明其他案例

（1）巧用水平滾動條

如下圖所示，雪球針對組合業(yè)績評級說明，說明內(nèi)容較多時，可對浮層高度進(jìn)行限制，同時提供垂直滾動條。

（2）復(fù)合說明方式

懸浮/點擊文字說明并不一定采用浮層的交互方式，如下圖所示，百度統(tǒng)計針對統(tǒng)計的說明，點擊“？”號后，向下展開說明，并增加跳轉(zhuǎn)鏈接指引及提供問題快速搜索框。

（3）懸浮文字提示更多應(yīng)用場景

懸浮/點擊文字可以展示更多的內(nèi)容，基于該種交互，可以用于頁面空間不足時，只放置最重要的內(nèi)容，鼠標(biāo)懸浮時氣泡展示更多信息。例如京東訂單設(shè)計，默認(rèn)展示收貨人姓名，當(dāng)鼠標(biāo)懸浮在姓名上方時，展示更多的地址、電話信息。

作者：夜雨，高級交互設(shè)計師，專注金融行業(yè)-智能投顧方向，大部分時間在復(fù)雜后臺系統(tǒng)中遨游。

本文由 @夜雨 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。