后臺(tái)系統(tǒng)不好用?這里有一份設(shè)計(jì)說明

29 評(píng)論 77595 瀏覽 457 收藏 8 分鐘

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

1.背景

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

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

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

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

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

2.后臺(tái)說明的定義和作用

(1)后臺(tái)說明的定義

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

(2)后臺(tái)說明的作用

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

所以,對(duì)于交互設(shè)計(jì)來說,后臺(tái)說明設(shè)計(jì)目標(biāo)就是:輔助用戶自主完成任務(wù),減輕運(yùn)營壓力。

3.后臺(tái)說明設(shè)計(jì)

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

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

示例:微信公眾管理后臺(tái)針對(duì)統(tǒng)計(jì)的說明,類似的有后臺(tái)系統(tǒng)針對(duì)統(tǒng)計(jì)報(bào)表的說明。

(2)懸浮/點(diǎn)擊文字說明,內(nèi)容不多且次要

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

示例:陰陽師針對(duì)御魂的說明,需要點(diǎn)擊“?” 才能看到,類似的還有后臺(tái)系統(tǒng)對(duì)某個(gè)指標(biāo)的說明。

(3)跳轉(zhuǎn)文字說明,內(nèi)容較長時(shí)

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

示例:微信公眾平臺(tái)對(duì)自動(dòng)回復(fù)的設(shè)置說明,類似的有后臺(tái)的操作流程說明。

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

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

示例:京東商家?guī)椭行尼槍?duì)商家售賣商品的綜合說明,業(yè)務(wù)邏輯復(fù)雜的后臺(tái)可以采用類似設(shè)計(jì)。

4.后臺(tái)說明其他案例

(1)巧用水平滾動(dòng)條

如下圖所示,雪球針對(duì)組合業(yè)績?cè)u(píng)級(jí)說明,說明內(nèi)容較多時(shí),可對(duì)浮層高度進(jìn)行限制,同時(shí)提供垂直滾動(dòng)條。

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

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

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

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

 

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 不知道,可不可以加個(gè)好友,指點(diǎn)一下我

    來自廣東 回復(fù)
  2. 我以前一直都是做手持端的視覺與交互,今年直接轉(zhuǎn)成了B端的交互,以前一直想著手持端的交互與后臺(tái)除了尺寸不一樣,用戶體驗(yàn)有何區(qū)別,經(jīng)過一段時(shí)間發(fā)現(xiàn),后臺(tái)更偏向于業(yè)務(wù)類,注重場(chǎng)景、業(yè)務(wù)流程、業(yè)務(wù)需求的邊界及使用者的操作效率。

    來自廣東 回復(fù)
    1. ?? 說得很對(duì)

      來自廣東 回復(fù)
    2. 很準(zhǔn)確,B端還是很鍛煉人的

      來自山東 回復(fù)
  3. 站酷上確實(shí)有很多不錯(cuò)的后臺(tái)界面,推薦大家去看看

    來自北京 回復(fù)
    1. ?? 有案例挺好的,因?yàn)楹笈_(tái)能參(chao)考(xi)的資料太少了,干過后臺(tái)的產(chǎn)品或者交互狗都懂

      來自廣東 回復(fù)
    2. 很是贊同,模板很多但很寬泛;

      來自河南 回復(fù)
  4. 最近在做后臺(tái)系統(tǒng),發(fā)現(xiàn)在寫操作流程說明的時(shí)候好復(fù)雜,寫完自己都不想看了,能否問下樓主有沒有什么好的建議不? ??

    來自廣東 回復(fù)
    1. ?? 沒有太具體的問題,或者項(xiàng)目背景資料的話,沒法給出建議~

      來自廣東 回復(fù)
  5. 能不能問一下后臺(tái)系統(tǒng)使用上的說明書是產(chǎn)品經(jīng)理寫還是什么人寫

    來自北京 回復(fù)
    1. 產(chǎn)品經(jīng)理有責(zé)任寫好,其他測(cè)試的同事或者直接業(yè)務(wù)需求方也可以提供

      來自廣東 回復(fù)
  6. 有沒有后臺(tái)管理的演示地址,想學(xué)習(xí)參考一下

    來自河北 回復(fù)
    1. 真正的后臺(tái)產(chǎn)品一般很難出現(xiàn)在大眾面前的,因?yàn)槎际歉鱾€(gè)公司的核心,不公開??梢杂袃蓚€(gè)路徑側(cè)方位了解:
      1.可以看偏C端的管理后臺(tái),例如京東的訂單管理、微信公眾平臺(tái)的管理后臺(tái)這些。
      2.可以看一些后臺(tái)設(shè)計(jì)的素材,例如站酷什么的,經(jīng)常有人發(fā)一些作品集,里面就包括一些后臺(tái)的作品集。

      來自廣東 回復(fù)
  7. 能不能問個(gè)蠢問題? ? 要怎么樣才能看到各個(gè)產(chǎn)品的后臺(tái)呢

    來自浙江 回復(fù)
    1. 真正的后臺(tái)產(chǎn)品一般很難出現(xiàn)在大眾面前的,因?yàn)槎际歉鱾€(gè)公司的核心,不公開??梢杂袃蓚€(gè)路徑側(cè)方位了解:
      1.可以看偏C端的管理后臺(tái),例如京東的訂單管理、微信公眾平臺(tái)的管理后臺(tái)這些。
      2.可以看一些后臺(tái)設(shè)計(jì)的素材,例如站酷什么的,經(jīng)常有人發(fā)一些作品集,里面就包括一些后臺(tái)的作品集。

      來自廣東 回復(fù)
    2. 找其他產(chǎn)品類似的開源軟件,一般企業(yè)的后臺(tái)系統(tǒng)直接反應(yīng)了業(yè)務(wù)模式,工作流程,這些都是商業(yè)機(jī)密了,不能隨便透露的!

      來自廣東 回復(fù)
    3. 試試找一找廠商的用戶手冊(cè)。

      來自江西 回復(fù)
  8. 我的微信號(hào)是18782147741

    來自四川 回復(fù)
  9. 你好!我們能互換一個(gè)聯(lián)系方式交流一下嗎?我也是做后臺(tái)交互設(shè)計(jì)的,同樣是陰陽師玩家,希望能向你學(xué)習(xí)。

    來自四川 回復(fù)
  10. 好久不運(yùn)營文章了吧

    來自山東 回復(fù)
  11. 陰陽師玩家你好 ??

    來自山東 回復(fù)
    1. ?? 被看穿了

      來自廣東 回復(fù)
  12. 挺贊的,辛苦作者對(duì)后臺(tái)系統(tǒng)也傾注了注意力去進(jìn)行交互的優(yōu)化!

    來自上海 回復(fù)
    1. ?? 后臺(tái)狗

      來自廣東 回復(fù)
    2. 哈哈,挺好的!

      來自上海 回復(fù)
  13. 居然是天河這邊的pm寫的

    來自廣東 回復(fù)
    1. ?? 怎么知道是天河的

      來自廣東 回復(fù)
    2. 收貨地址暴露了 ??

      來自廣東 回復(fù)
    3. 哈哈我也發(fā)現(xiàn)了 樓主在天河哪里

      來自廣東 回復(fù)