有關“待辦”模塊的設計復盤思考
于B端用戶而言,待辦功能是相對常用的一個模塊,待辦模塊如果設計得不合理,則可能會降低整體的工作效率。這篇文章里,作者對待辦功能的設計優化做了復盤總結,一起來看看吧。
待辦作為一個B端用戶常用的模塊,測試每天都需要在這里處理今天的全部任務,因此待辦對于測試的執行者以及管理者而言具有提高工作效率的作用。通過任務清單、優先級設定、進度跟蹤等功能,可以更加清晰地了解自己的任務,及時完成任務,減少遺漏和延誤,從而提高整體工作效率。
一、業務場景以及難題
現有業務之中,待辦是測試執行每天必看的板塊,但是現有的待辦出現了幾個問題。
1. 空間布局擁擠,拓展性不足
現在業務之中待辦分類是不斷地增加(現有6個),名字相對又很長,最長的有到7個字,再加上后面多語言要翻譯成英文在國外用戶使用,橫向空間完全不足。1920頁面的拓展性不足,小屏幕更佳難以使用。
2. 視覺平整,信息對比不強烈
現有的表格之中更多的是字和填充的按鈕呈現,整體的對比度較低,導致了用戶識別關鍵信息難度加大。
3. 表格復雜操作多,操作成本高
待辦針對的全部的測試角色,每個角色對于表格內容的操作項的權限和需求都是不同的,既要查看到關鍵的信息,又要能快速的處理任務。
二、設計優化
1. 優化空間結構,減去頂層統計
為了增加表格空間,刪除頂部統計卡片,將里面的統計信息總和信息以及環比信息放置到單選選項之中,提高表格的容量,降低用戶查找的成本。
2. 添加縱向展示,增加拓展性
在實際的業務之中,有的名字很長(不算英文,有的6個7個字),再加上多語言版本還有統計數和提升的數字,導致了橫向空間會隨著設備的變化而變小,1920空間中最多只能承受6個內容拓展性不足。
因此在橫向的基礎上添加了縱向展現切換模式,增強導航的內容拓展性以及直觀性。
3. 導航多樣化元素,強化元素對比
不僅僅在交互形式之上做了優化,也在不同的內容之上適配不同的顏色還有圖標,增強內容的對比度的顏色圖標與相關的任務進行綁定,降低測試相關人員記憶與選擇的成本。
4. 表格元素樣式優化,加強視覺對比
優化前,表格主要使用的主色底的按鈕或者是藍色的字進行鏈接呈現,表格內容較多,呈現方式比較單一,內容之間對比度很弱,用戶查看成本較高。因此先將所有的表格內容進行分類:
- 狀態:按照動靜結合分為——階段結果(靜)和當前所屬階段(動)
- 基礎信息:主要是測試要打達成的條件
- 其他:設計到一些時間以及備注
這次的業務重點是優化狀態顯示,除了擁有特別語義的顏色(黃,橙,紅,綠)外,其他的顏色的參考ANT Design的標準進行呈現,還有關于臨期和逾期的事表達上遵循特殊語義顏色進行表達。其他類別中常見的進度以進度條的方式呈現。
5. 表格交互原話,減少操作距離
現有業務需求之中,測試相關人員要操作功能欄的內容需要移動到最右邊,為了用戶能更加快捷的使用。因此參考了用戶常用的單擊表格進行郵件選擇操作,用戶可以點擊某個表格進行相關的操作,這里在設計的時候需要考慮到用戶的操作權限,需要做好相關調研。
6. 自定義內容,加強靈活性
業務中單個表格多達15到25個,單頁很長放得下,全部看完需要滑動多屏進行查看。在交互上添加了自定義操作,用戶可以根據自己的喜好將表格定制為自己覺得合適的表格順序以及內容。
7. 操作功能收納,增強功能區兼容性
現有的功能區是根據用戶權限做的顯示,常見的有4個至7個,導致了筆記本的適配效果以及功能的拓展性極差。所以,在交互上進行了收納的操作,除了高頻的詳情以及編輯還有流程節點外,其余的由“更多”進行收納,用戶點擊查看即可。
三、未來規劃
現有的右鍵原位操作只能支持單個,第二次迭代的會優化群宇選擇優化項。
四、效果驗證
效果驗證從主觀和客觀2個角度上進項思考:
- 主觀:問卷調研用戶滿意度提高12.3%。
- 客觀:單頁表格容量從17提升到24,用戶編輯效率提高23.6%
總結
UX設計師工作時候除了要思考業務之外,更要思考用戶到底需要什么設計。最好的設計是“沒有設計”。
專欄作家
一只雞腿,微信公眾號:B端設計一只雞腿,人人都是產品經理專欄作家。一個吃貨的B端設計師。
本文原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自 Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!