B端體驗設計:拆解工作檯真實案例

人人都是產品經理 發佈 2022-08-10T17:47:10.508843+00:00

編輯導語:B端工作檯是B短產品一大必備的界面,但常常是設計一次之後就無人問津。引導語:本文針對B端產品的工作檯進行拆解,幫助新手B端設計師了解工作檯的設計方法以及體驗升級的設計策略,包含如何使用競品分析和度量方法,最後附贈案例拆解,助力融會貫通。

編輯導語:B端工作檯是B短產品一大必備的界面,但常常是設計一次之後就無人問津。有的工作檯是能夠提升用戶的工作效率,但有的工作檯卻是「雞肋」。本文旨在對B端工作檯進行拆解,讓更多設計者了解到其中的設計方法以及體驗升級的設計策略,一起來看看吧。

引導語:本文針對B端產品的工作檯進行拆解,幫助新手B端設計師了解工作檯的設計方法以及體驗升級的設計策略,包含如何使用競品分析和度量方法,最後附贈案例拆解,助力融會貫通。

一、了解B端工作檯

工作檯是B端產品的一大必備功能,高度聚合的作用讓它常常作為「門面」身份出現(用戶登錄後第一個看到的頁面),但很可惜它並不是業務核心頁面,常常是設計一次後就無人問津。雖然有的工作檯能夠幫助用戶提高工作效率,但是也有存在很「雞肋」的情況,使用性逐漸可有可無。那麼如何設計好B端產品的工作檯呢?

下面我們從工作檯的常見類型和功能幫助大家拆解工作檯的體驗設計機會點。

1. 定義與特點

工作檯是一個能幫助用戶快速掌握工作進展、進入工作狀態的導航頁面。

B端工作檯具有細分功能導航的作用,幫助用戶減少尋找功能的時間。當B端產品具有多個使用角色時,會根據業務屬性進行工作檯劃分,以此來滿足不同角色的使用訴求。

2. 常見功能

想要達成快速掌控工作進展、開啟處理工作事項,工作檯一般具有以下五項常見功能:

(1)統計業務數據

用戶根據業務數據查看工作進度。不同的用戶身份在使用目標上有所不同,比如管理者角色,會根據業務數據調整戰略決策、安排下屬的工作內容;執行者會根據自己的完成進度來安排近期的工作內容,識別工作優先級。

(2)聚合高頻常用功能

常用功能又稱快捷功能,是指使用者工作中最常用的幾個功能選項。比如匯易聯是一個單據報銷平台,我們可以在工作檯上快速的找到「提單據」這項功能。

(3)查看待辦事項

待辦事項跟業務數據都有查看工作進度的作用,兩者的不同點在於業務數據是以業務指標為基準明確工作進度,待辦事項是以數量這個維度來分析和查看。比如保險業務員的季度保險額,這個金額數值是業務指標;審核員需要審核保單的數量是待辦事項。

(4)明晰細分業務

B端產品的業務屬性會在工作檯有所體現。比如:匯易聯,它的產品定位在於幫助企業全流程管控各類費用支出,屬於票據管理領域中費用管理這項細分業務,對應的常見功能有:我的帳本和快速提單,它們出現在工作檯上,除了幫助用戶快速開展工作,減少細鑽外,還能夠幫助用戶識別產品的業務屬性。

識別業務性的隱性優點:增強產品記憶點,當用戶記住這個產品的核心業務功能。對於B端產品來說,在細分領域占據一席之地,實際就是掌握了精準客戶。

(5)高效獲取業務信息

為了方便使用者快速查看,有部分內容需要展示在工作檯。比如:匯易聯的單據動態功能,就是在幫助用戶快速查看自己提交的單據最新動態,無需點開其他頁面,在工作檯就能快速讀取。

3. 使用效能

(1)提高管理者的工作效率(為管理者提供戰略決策的輔助)

工作檯聚合管理者每日、每月、每季度需要查看的業務指標,管理者在了解最新的業務完成情況後,對比公司業務指標可以調整戰略決策。比如第一季度目標是完成支付金額10w+,前三周只完成2分之一,業務數據面板輔助管理者完成工作。

這裡可能有同學會問了:那為什麼不用數據看板去看呢?數據看板看起來更清晰。

我的回答是:工作檯僅展示最新的核心業務數據,點擊「更多」可以跳轉到數據看板頁查看更多詳細信息。

(2)減少協作者的溝通時間

管理者下發的任務會直接展示在協作者工作檯的待辦事項,每天上班打開工作檯,第一時間了解今天的工作任務,方便協作者快速開展工作。

(3)增強部門工作協同效能

比如匯易聯單據狀態,可以看到流程目前流轉到具體哪位操作人。OA平台中,用戶當前審批狀態外置在工作檯,也是可以方便用戶第一時間查看。

4. 常見的工作檯類型

因B端產品複雜且多樣,以下僅對常見工作檯類型舉例分析:

(1)工具類產品

特點:工具類的工作檯因為功能全面,具有普適性。因為不僅功能多而全,還可以根據不同的使用訴求自定義工作檯,由此提升用戶的工作效率和滿足用戶的個性化使用習慣。

舉例:常見的有飛書、語雀、釘釘的工作檯。

(2)業務功能類

特點:強業務屬性,一般為「量身定製」型的存在。

第一種情況:B端產品業務壁壘性高、細分領域精細化的特點,很難做到一個工作檯適配多種使用角色的使用訴求。這時就需要根據每個用戶的使用習慣、常用功能、典型數據去設計不同的工作檯。舉例:比如匯易聯分為:銷售部員工版本、銷售部管理者版本、人事財務管理者版本三種工作檯。天貓工作檯也會分店長、老闆、美工、客服能多種使用角色的工作檯版本。

第二種情況:平台內包含多類業務,業務之間沒有必然聯繫,可以拆分業務功能賣給不同的客戶,這個時候,就需要根據業務屬性設計多個工作檯。比如保險核心業務中續保業務和理賠業務就可以拆分賣出,配套兩個工作檯,理賠中心工作檯、續保中心工作檯。

(3)業務數據類

特點:與業務功能不同的地方在於業務數據作為重要組成部分占據工作檯頂部卡片模塊,而業務功能類的工作檯並不是都含有業務數據的。業務數據類的工作檯以查看業務數據為核心功能。

比如:微盟、淘寶、天貓工作檯,對用戶最重要的部分就是業務數據,查看店鋪的銷售額、業績指標等等。

因B端產品複雜且多樣,以上舉例僅作常用工作檯的分析,並不確保能夠涵蓋所有工作檯的類型,歡迎大家留言補充,幫助自己和他人拓展眼界。

4. 工作檯基本構成

工作檯的基本構成與之前講過的常用功能有區別也有重複,基本構成不代表全部都需要展示在工作檯上,搭配組合皆是為了滿足使用需要。

  • 業務數據工作進度:一般以數據可視化的形式出現,用於告知用戶工作進度
  • 待辦事項:告知用戶當前、當周的任務排期

快捷功能常用功能:快速開展工作或快速跳轉至常用頁面,無需在導航上一步步下鑽,節省時間,提高效率。

消息通知:一般包含系統消息、業務進展、功能信息三類。系統信息包含功能疊代和產品更新;業務最新進展包含最新業務數據更新;功能信息:包含業務流轉進度和上下級提交審核和被審核的進展。可根據重要程度選擇是否展示在工作檯。

個人信息:當身份識別為核心功能時時出現,比如使用不同角色的帳號登陸天貓店鋪工作檯,對應的功能是不同的,有時同一個帳戶兼職兩種身份,為了識別身份需要展示個人信息;但是在強業務屬性工作檯(理賠與續簽)時無需出現,因為在帳號登錄時就已經識別了帳號權限,展示具體業務的內容。所以還需具體情況具體分析。

新手引導幫助中心:當用戶首次登錄時,新手引導負責向用戶介紹業務模塊及對應功能,用戶可以【一鍵跳過】,但當用戶需要的時候,必須有一個【入口】方便快速找到。當用戶從新手轉化為常用用戶時,新手引導也就切換成為了幫助中心。

5. 工作檯功能模塊自定義

因為工作檯的業務屬性、使用角色、使用訴求都有所不同,構成模塊可以根據需要進行展示和隱藏。目前有很多成熟的產品已經支持工作檯內容模塊自定義,分享三個擁有自定義工作檯功能且可以免費試用的產品,方便大家參考:

(1)Pingcode:拆分工作檯功能模塊的體驗良好,可供參考

(2)ClickUp:國際化版本工作檯自定義模塊可參考

(3)匯易聯:設置可見模塊,拖拽即可自定義布局

二、工作檯體驗升級的目標拆解

B端工作檯的設計難點,在於體驗設計師對於產品業務的了解程度。不僅要滿足產品需求出UI圖、出交互邏輯,還需要在產品商業價值、客戶價值、用戶價值上做到平衡。

1. 商業價值、客戶價值、用戶價值的區別

產品商業價值:產品功能滿足市場需求,持續為企業帶來利益,也就是賺錢,而且要賺長久的錢。

B端產品的購買者是客戶,也就是公司的老闆,但是實際使用的用戶是企業的員工。

客戶價值:我們的產品能夠幫助企業降本增效,也就是幫客戶省錢,比如節省人力成本、資源成本等等,對客戶來說就是有價值的。

用戶價值:那麼能夠提高用戶使用的體驗,幫助他們在工作中用的流暢,節省工作時間、提升工作效率,能夠讓他們早下班,這對用戶來說就是有價值的。

如果沒有做到真正的了解用戶,是沒辦法提升對應的價值點的。

2. 獲取客戶價值、用戶價值的渠道

如何了解產品用戶的價值需求呢?這裡跟大家分享兩個方法,一個是用戶調研,一個是競品分析。

用戶調研有兩種結果類型,定性分析和定量分析,搭配使用獲取更多、更全面、更有效的用戶數據。

競品分析是去了解同類競品的功能點、體驗設計優秀的部分,從更全面的角度分析用戶到底需要的是什麼,因為有的時候用戶是做不到準確表達自己的需求的。比如在建造交通工具的例子上,起初用戶描述的需求:想要一匹會飛的馬。但是我們要洞悉出用戶的真實需求是:想要更快速度的交通工具。

看看競品都在什麼功能上「使勁」,B端產品不做模仿,要在標準功能的基礎上做差異化,差異化價值才是我們的「賣點」。

3. 用戶角度:洞察問題

產品在0-1的發展階段時,工作檯往往沒有真實的使用用戶,只能根據產品邏輯和業務思維去建立。但當產品發展到一定階段,積累了用戶群,我們就需要聚焦典型用戶的使用習慣,打造出符合用戶需要的工作檯。因為客戶和用戶是兩類人群,所以我們還要有辨別真偽需求、排列優先級的能力。

用戶調研能夠幫助我們深入各角色的使用場景,分析其業務重心和痛點,了解各個角色對於產品的期望。

用戶調研:

產品用戶可以分為三類:新手用戶、中級用戶、專家級用戶。

  1. 新手用戶:沒有人願意永遠做新手,新手的目標是快速成為中級用戶;
  2. 中級用戶:數量最多且比較穩定的,「即用即走」是他們使用產品的訴求;
  3. 專家級用戶:對產品最為了解的一部分人,對功能有極致要求,以追求產品更好的體驗為己任。

我們的做用戶調研的最終目標是拿到典型用戶畫像和用戶旅程圖。這兩方面的內容會幫助我們分析用戶功能使用的優先級。

在做工作檯用戶調研時常用的方法:

  • 可用性測試:產品發展的不同階段都會使用的一項用戶調研方式。模擬真實的使用場景,一對一觀察用戶的操作路徑,通過用戶的行為,分析用戶的心理,是驗證產品設計的必備手段,屬於定性分析。
  • 用戶訪談:成本高,效果好。屬於定性分析,一般在產品積累了一定用戶人群和使用問題時去做用戶訪談效果最佳。
  • 調研問卷:比較簡單的一種調研方式,可以在短時間內獲取大量用戶反饋的數據,屬於定量分析。因為B端產品的用戶都是付費用戶,獲取的數據具有真實性,但是我們要主觀分析哪些優先級需求更高,更能幫助產品標準化。
  • 現場觀察:當新接觸某一業務領域的產品時,很難真的站在用戶角度思考問題,這個時候去現場觀察用戶真實使用場景,了解行業內幕,工作流程,是幫助產品和設計師快速了解「陌生用戶」的有效方法。

這些用戶調研方法也可以根據優化目標和優化時間段來劃分。

4. 版本優化前後:可用性測試

(1)優化前:定位需求

優化前目標:觀察用戶能否按照我們預設好的路線操作。

方法:召集10-15位目標用戶,使用基於產品邏輯的原型圖demo進行操作,觀察他們完成任務的過程,記錄完成任務所需時間。拿到數據後,分析與事先設想的產品邏輯偏差程度,進行疊代調整。

(2)優化後:驗證目標是否達成

比如我們的目標是提升用戶的操作效率。使用可用性測試,觀察用戶能否快速在工作檯上定位自己想要的功能並完成工作,對比改版前後的使用時間,來確認是否達成優化目標。

5. 搜集用戶需求:調研問卷、可用性測試

(1)調研問卷

因為B端SaaS產品的用戶都是付費用戶,付費用戶有統一維護群,我們可以把調研髮捲發放到客戶群里,也因為是付費用戶他們也更樂意試用並反饋,有效幫助我們定期收集客戶的使用反饋。

(2)可用性測試

預約客戶體驗新功能,通過可用性測試獲取用戶需求是具有針對性的,可以快速定位到功能模塊,助於我們收集用戶需求,展開疊代優化。

6. 定義用戶畫像:現場觀察、調研問卷、用戶訪談

(1)現場觀察

有條件的話一定要到真實的使用現場去觀察,不要做任何判斷、不要說話,就單純觀察。

(2)調研問卷

這個方法能拿到比較多的用戶樣本,讓用戶畫像更為清晰。

(3)用戶訪談

用戶訪談會根據使用角色分類,有針對性的制定訪談方案。成本雖高,確是定義用戶畫像的好幫手。

本篇文章主要針對工作檯體驗設計優化的案例帶練,以上內容就不再過多贅述,感興趣的夥伴可以留言~有機會為大家更系統的講解。

7. 藉助競品:聚焦突破

B端產品的競品找起來是有很大難度的,是較為複雜的課題,這裡僅從工作檯相關角度找尋競品並舉例分析,先分享幾個找B端競品的小技巧。

找B端競品的3個技巧:

  1. 找競品前先向產品經理請教,他們是最懂產品的(注意平常要跟產品互幫互助,他們才會樂於分享)
  2. 找同類競品的TOP:從艾瑞諮詢報告中找到細分領域的TOP1-3,訪問官網查看支持免費試用的產品
  3. 當無直接競品的時:不同業內翹楚性競品、間接競品、細分領域優秀的「競品」都能作為參考點

如果找不到同類領域的工作檯參考也不用著急,因為本身業務屬性、產品定位的不同,就不可能只拿一個競品抄一抄敷衍了事。也正是因為這個特點,我們把工作檯拆分成不同的模塊後,每個模塊都能找到可以參考的競品。

8. 拆分功能模塊的競品分析

拆分工作檯的核心功能。以業務模塊的功能導向去尋找優秀的競品,僅對功能點進行參考。

這裡你可能會問:「哪些競品值得我們借鑑呢?」下面我依據工作檯常用的五個業務模塊、一項特色功能做舉例分析:

(1)待辦事項模塊:對應項目管理專業軟體服務商

HRM系統:典型的項目管理/待辦事項功能,可以作為我們在做工作檯待辦事項時的參考。不要被「直接」競品四個字束縛住,只要是同類功能都具有一定的參考價值。

(2)業務數據模塊:對應BI系統、數據類開源組件庫

數據看板在工作檯上占有「一席之地」,想做好工作檯上的數據模塊,當然要:專業的事情向專業的「人」請教。AntV、ECharts是國內可視化組件庫中的佼佼者。雖然它們「其貌不揚」,但是核心功能點是很「精緻」的,經得起推敲。我們可以借鑑功能框架,在此基礎上優化視覺,前端工程師還可以直接利用可視化組件庫中的代碼進行改寫,不僅節省設計時間,還有效提升開發實現的效率。

(3)常用功能模塊

工作檯中的常用功能一般使用icon+文字的形式展示,功能icon承載了表現產品視覺品牌質感的責任,我們根據B端產品的業務屬性去設計。

(4)消息通知模塊:新聞中心

消息通知若需展示在工作檯,可參考網頁類產品的新聞中心設計,根據消息屬性和通知優先級進行分類展示。

(5)新手引導幫助中心模塊

新手引導通常以模態氣泡卡片樣式+高亮指定區域出現,我在體驗匯易聯產品時,感受到兩點可以借鑑的方向,供大家參考:1.功能介紹的話術精煉,通俗易懂 2.模態可關閉也可快速找到,方便快捷有效。

以上舉例僅作參考,大家要學會發散思維,不要被「競品」二次束縛。

9. 差異化調整

有些內容無法直接拿過來照抄,下面我們看看如何差異化調整,做到「抄」的不留痕跡。

只借鑑」靈魂「,不借鑑「肉身」。

靈魂指功能框架,肉身指視覺效果。功能有相似的部分,用我們需要的邏輯去展示。視覺效果上充分發揮本身產品的品牌調性,利用好品牌的特點。

比如:展示用戶需要錄入信息的內容分類,在功能上它僅僅是步驟條,用基本組件就能表現。但我們想給用戶更好的體驗,就需要無限接近用戶的「心理預期」,做到一方面減少用戶的錄入負擔,另一方面讓其對內容有基礎認知。

定位目標:關聯業務指標

設計優化方案所定位的目標若能與業務指標相關聯則可發揮最大價值。

業務指標與價值強關聯,商業價值指「真金白銀」續費。比如SaaS產品根據用戶的訴求,不斷完善產品標準化,提高簽約率和續費率,為企業賺錢。

客戶價值與用戶價值需藉助專業的度量標準,其中UES模型應用場景較為適合B端產品。

10. 三步實現

如果設計師的方案跟業務指標相關聯時,更容易獲得團隊的認可,推進的也會更加順利。當然這不是一件簡單的事,在工作檯的設計中,可以通過以下三步實現數據度量支撐設計改版:

(1)明確體驗問題

明晰產品發展目標,點對點突破(設計不要自嗨)。以提升操作效率為主,提升相關業務效能為輔。力求每個體驗優化點都能解決實際問題。比如本次改版工作檯要提高管理員下發任務的效率、工作檯易用性、客戶滿意度,效率這個可以用時間度量,易用性和滿意度需藉助度量模型。

任務頁效率(下發效率):指下發功能通過步驟簡單化、減少下鑽、降低理解難度,從而提升效率。

易用性:指功能對用戶來說難度程度高低,比如功能入口是否易識別,可以快速找到;操作步驟是否符合用戶使用習慣;瀏覽內容時可以快速閱讀和理解;不恰當操作時是否有提示和限制;錯誤操作時是否有提示,提示後用戶能夠繼續完成任務等。

滿意度:工作檯在滿足功能的情況下,對用戶有吸引力、產品界面友好給人舒適感、專業性高;當用戶需要幫助和引導時能夠滿足他們的需求;用戶對品牌有讚美、能信任、願意持續使用等。

(2)藉助度量模型或者工具

UES:UES是阿里雲中心基於易用性去擴展而成的度量模型,核心維度包括易用性、一致性、滿意度、任務頁效率、性能。易用性是B端產品的重要屬性,他的背後就是易用性量表的標準,與常規的易用性量表對比來說更為成熟和精細化。

(3)獲取數據驗證

SUS系統可用性度量表:SUS是評估產品可用性的一個花費少,但十分有效的工具。該量表包含了10條定向問題,每個問題均為5分,按強烈反對(1分)到非常同意(5分)評分。

系統可用性量表最終算出的評分達到70分左右,就可以比市面上一半產品可用性要好,也就是說這個產品的用戶體驗算是合格了。(各位感興趣的夥伴可自行網上查詢可用性量表)

CES易用性度量表:易用性包含易學性、易操作性和清晰三個維度。反映產品對用戶而言是否易於學習和使用,改版前後進行分別使用易用性度量表調研用戶使用反饋,對比分析是否達成易用性的提升。

提升易用性可以降低學習成本,從而提升用戶滿意度、操作效率、任務完成率等。

三、工作檯體驗升級的行動和策略

1. 明確使用目標,拆分內容優先級

經過前期的競品分析、用戶調研,我們已經拿到了用戶畫像,對每個角色對應的工作檯功能已經有所了解。下面我們使用矩陣法,拆分內容模塊的優先級。

矩陣法:根據使用頻次和重要程度,分析和劃分業務模塊優先級。矩陣法顧名思義,X軸Y軸分別代表使用頻次和重要程度,右上角為重要程度和使用頻次更高的業務功能模塊,那麼越靠近右上角的功能則優先級越高。

特別是在單一工作檯不能滿足多個使用角色時,矩陣法能夠幫助我們快速辨別功能優先級。

2. 柵格系統助力模塊劃分

柵格系統(Grid Systems):最早來源於平面設計中的網格系統,網際網路發展之後,界面設計將這一概念借用過來,簡易的理解柵格就是一種有規則的參考線。

柵格系統主要由列、水槽、邊距三個基本元素構成。

3. 柵格的作用‍

  • 對用戶:提高內容布局規律性,減少認知成本。通過柵格系統規劃設計功能模塊,頁面信息的展現更加清晰,從而提高用戶的閱讀和瀏覽效率,提供更好的用戶體驗。
  • 對設計師:提高效率與規範化。幫助設計師快速校準元素在界面內的位置,節省基礎度量(小學數學加減法計算間距等)的時間。避免設計師團隊因感覺不一致造成規範不統一的現象。
  • 對開發:提高設計還原度,節約時間成本。柵格系統提高了網頁的規範性,一次開發多次復用,提高開發人員的工作效率。
  • 響應式布局:柵格能夠幫助工作檯在自定義功能模塊時,界定模塊的寬度規範。

常見的兩種刪格:12柵格、24柵格

12刪格:

舉例:屏幕寬度1440px、左側導航寬度256px、兩個間距16px,剩餘寬度為12*列寬+11*槽寬

特點:欄數較少,適合業務簡單的工作檯使用,因為簡單的業務會不出現密集的信息,所以使用12柵格足以。

24刪格:

舉例:屏幕寬度1440px、左側導航寬度256px、兩個間距16px,剩餘寬度為24*列寬+11*槽寬

特點:欄數更多,當工作檯模塊多且複雜時適用,因為欄數越多,分出的模塊越細緻,能夠承載更多複雜的內容,也是目前B端產品常用的刪格列數。

柵格的兩種適配方式:拉伸間距、拉伸邊距

拉伸間距:卡片區域寬度固定,柵格寬度不固定,卡片與卡片之間的距離來適配多餘的寬度

拉伸邊距:與拉伸間距相反,刪格寬度(卡片之間的距離)是固定的,卡片寬度適配多餘的寬度。對齊方式有居左(右邊距伸縮適配)和居中(左右邊距同步適配伸縮),居中的對齊方式更為常用。

4. 建議選擇:柵格固定,拉伸內容

拉伸間距和拉伸邊距時常見的兩種拉伸方式,但是都會壓縮我們的展示空間,所以採用了一種全新的適配方式:即柵格固定,拉伸內容。

簡單來說就是,邊距和間距都採用固定值,適配的過程中會採用不同的縮放策略對卡片內容進行伸縮,用卡片來適配多餘的寬度(或高度),這樣我們的展示空間就隨之變寬,可以承載更多內容。

優勢:採用自動填充布局可以有效提升內容占比,提升屏效。

5. 優化視覺風格,提升品牌質感

關於工作檯的體驗升級策略,前面講到拆分業務功能優先級和柵格系統助力模塊劃分,最後一步才是優化視覺風格。B端產品始終以業務功能服務用戶為導向,視覺設計僅為輔助。下面有三點可以幫助我們做B端工作檯的視覺體驗升級:

(1)幫助/引導/歡迎插畫

插畫設計在B端產品中出現的機會較少,一般在工作檯以情感化傳達出現,期望與用戶建立親密關係,圖片相較於文字傳達效率更高,提升用戶對內容的掌控感和品牌信任度。

(2)常用功能圖標

B端產品體現視覺設計感的地方比較少,圖標設計為其中之一,將品牌質感融入圖標設計中,體現品牌調性,比如科技、金融、創新、友好的關鍵詞都能通過圖標設計去展現。

(3)業務數據

數據可視化的設計點在於用單一卡片模塊展示較多的業務數據,讓用戶在工作檯就能對最新數據有一個了解,這裡就不能以視覺效果為主了,要以功能簡單好用為重點,適當表現產品風格即可。

四、案例拆解

1. 需求與問題

隨著工作檯橫向業務不定期的需求輸入,業務管理平台的功能服務量級的逐步增加,催生設計師思考:如何用設計上的最優解,來搭建交易管理工作檯的體驗框架?這個問題,在共建過程中我們確立了2個核心設計目標:清晰、高效。

問題描述:管理員的首頁工作檯信息過於簡單,查找信息低效,分發能力差,難以完成【快速識別業務進展】【管理下屬的工作內容】的使用訴求。

2. 用戶畫像與使用目標

通過前期用戶調研建立的用戶模型,即用戶畫像(人物模型)幫助我們確定哪些任務重要,原因何在,再提煉出核心使用場景並定義需求,最後優化頁面框架。

使用目標:

管理員:查看最新業務數據、審核員工作完成情況、審批員工申請

業務模塊:

涉及到的業務模塊有:身份信息、待辦事項、數據概覽、交易列表、常用功能、交易列表(業務強相關)等

3. 定位改版目標

從使用問題出發,找到使用訴求與工作檯現狀的差異點,明確改版後工作檯需要擁有的能力,即為本次設計改版目標。

4. 功能拆解與模塊劃分

矩陣法:區分功能優先級

使用矩陣法,區分業務功能的使用頻次和重要程度,重新劃分業務模塊。聚焦管理者關注的核心功能,減少高頻功能的操作下鑽。

24柵格:功能模塊重構

使用24柵格系統為工作檯重新布局,規範化內容區域。清晰明確的操作主線可以減少用戶的理解成本,讓用戶快速準確地按照預期獲取信息,提升用戶使用體驗。

遵循瀏覽動線,優化信息布局和視覺比例,突出核心數據。遵循【清晰】的設計原則,明確的布局結構決定用戶的瀏覽動線,幫助管理員高效便捷的獲取信息。

模塊化設計,還可以為後續業務拓展:新增模塊、功能時提供便利。

5. 視覺質感,體驗細節

(1)強化色彩聚焦

通過顏色對比,強調重點信息,第一眼透傳,聚焦用戶注意力。

(2)提升信息對比

通過文字大小的對比,突出核心信息。

(3)信息降噪

當頁面內容過多時,弱化輔助信息,為頁面降噪。

6. 拿到反饋,持續疊代

我們體驗設計師的目標是幫助產品在體驗設計的角度上不斷進步,幫助產品完成標準化的沉澱,從而「賣給」更多的目標客戶,賺取更多的「真金白銀」,這樣才能體現設計師的能力與價值。

總之,無論是SaaS產品標準化,還是交付項目幫助產品標準化,都需要不斷的疊代和優化,版本疊代上線後,拿到改版前後的數據對比分析,驗證設計方案或找到對應問題的反饋,繼續鑽研疊代下去。

五、文章總結

這篇文章不僅幫助新手B端設計師了解工作檯如何設計和優化,還以全局的角度剖析了頁面改版的「心酸歷程」。

工作檯的體驗優化升級之路難點在於要貼合用戶的使用訴求,抓住用戶、客戶的內心價值點,其他視覺層面的升級僅為輔助。

設計B端工作檯的方法簡化起來很簡單,可總結為3點

  1. 初次設計:以產品訴求為基礎,做出demo驗證功能的可行性。
  2. 優化設計:調研用戶真實使用場景,拿到功能使用路徑,分析優先級。
  3. 視覺設計:模塊劃分、品牌質感、情感化傳達皆為功能輔助,一切以提升使用效率,滿足用戶內心價值點為己任。

本文由 @EllieOne 原創發布於人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議。

關鍵字: