以一套OA系統(tǒng)為例，做產(chǎn)品設計細節(jié)分析（oa系統(tǒng)設計的原則有哪些）
對具備一定規(guī)模的公司來說，OA是非常常見且致力于提高效率的一套系統(tǒng)。而本文在使用體驗一套OA系統(tǒng)后，也就產(chǎn)品設計、頁面設計等方面的內(nèi)容，展開了一些分析與建議。
隨著互聯(lián)網(wǎng)技術的迅猛發(fā)展，各公司對于內(nèi)部的管理流程，從原來的線下處理逐漸轉(zhuǎn)移至線上，使得公司內(nèi)部的業(yè)務處理效率得到了飛速的提升。但受限于小公司資金不足，無法對線上辦公產(chǎn)品進行全面的開發(fā)，市場中便出現(xiàn)了很多以線下業(yè)務線上化為目的的公司，主要以出售OA系統(tǒng)為主，并以其專業(yè)的OA解決方案，協(xié)助中小企業(yè)以低成本提升公司內(nèi)部業(yè)務處理效率。
我在長期的職業(yè)生涯中，由于互聯(lián)網(wǎng)行業(yè)的特殊性，用過不少的系統(tǒng)，并且經(jīng)常對各系統(tǒng)在設計、流程方面的優(yōu)劣進行總結(jié)或與同事進行探討，但是很少進行正規(guī)的書面內(nèi)容總結(jié)，由于疫情當前，時間多少寬松了些，閑來無事的下午隨機挑了一款OA系統(tǒng)進行頁面設計方面的問題總結(jié)，并整理發(fā)表出來，我所總結(jié)的內(nèi)容未必是正確的，當前文章旨在與產(chǎn)品設計方面與大家進行探討。
以下系統(tǒng)截圖已在重要位置進行馬賽克處理，本人無意丑化任何系統(tǒng)，僅作為與大家討論產(chǎn)品設計為用。隨機在當前平臺中挑選了幾個問題，寫出來與大家探討探討。
一、頁簽切換按鈕過于狹窄
1. 問題探討
我登錄的是web頁面，當前網(wǎng)站所展示的效果如果沒有猜錯的話，也是Web對應的頁面結(jié)構(gòu)，但是對于鼠標操作的用戶來說，定制化首頁的雙屏切換功能設置成扁平形狀是不是有些“不近人情”。
首先，頁面不是大范圍的鼠標感應區(qū)域，無法使用鼠標左右拉取頁面從而達到切屏效果，就像iPad中愛奇藝或者優(yōu)酷那種全屏幕手指感應切換的方式。
第二，大部分臺式機或筆記本都不支持觸屏操作，無法精準的按照使用者的意識瞬間觸達切屏按鈕，建議更換為鼠標可精準操作的其他方式。
2. 建議方案
- 增大按鈕可點擊面積，提升使用者鼠標的精準點擊成功的概率（讓用戶覺得爽才是真的好）。
- 將當前首頁與第二個TAB標簽內(nèi)容相融合，定制化入口頁面做在頁面頂部也是一個很好的選擇，如下圖：
二、定制化首頁可優(yōu)化內(nèi)容
1. 問題探討
OA為了滿足不同使用者的使用需求和習慣，增加了相關的首頁定制功能，這是一個很好的功能設計，毋庸置疑。
我數(shù)了數(shù)，可定制的功能模塊高達24個（可配置模塊數(shù)量可能與各公司系統(tǒng)管理員配置的菜單數(shù)量有關），給我的第一感覺是“不錯”，我確實需要將大量的工作通過定制化頁面展現(xiàn)出來，同時在互聯(lián)網(wǎng)飛速發(fā)展的今天，各個公司都在顆?；褂谜叩男枨螅@不是什么問題。
問題在于“可選菜單”中的24個可定制模塊名稱，無法通過篩選關鍵詞的方式進行定位或查找。這意味著使用者如要想使用定制化首頁功能，就必須將這24個模塊內(nèi)容全部吸收后，才知道自己想要定制的功能是否存在。
2. 建議方案
對于選擇控件中存在大量內(nèi)容的情況，其實只需要在可選菜單的列表內(nèi)容頂部增加一個小小的聯(lián)動篩選控件即可，控件采用實時獲取輸入內(nèi)容，并調(diào)整列表中所展示的結(jié)果與其內(nèi)容相符即可。
三、出勤頁面的默認時間篩選
1. 問題探討
這個不用多說大家也肯定非常清楚，是用來記錄每個人使用辦公管理系統(tǒng)進行打卡的信息記錄，但是讓我很費解的是，進入當前頁面后，篩選項中的考勤日期，永遠都會定格在上一個自然月中。
在我看來，一個絕大部分使用者，進入考勤列表頁面，是為了查看近期的考勤記錄，是否有遲到、忘打卡的現(xiàn)象等異?，F(xiàn)象，如果出現(xiàn)此類現(xiàn)象需盡快進行處理，避免工資結(jié)算時的尷尬。
但是就像剛才所說，無論什么時候進入當前頁面，篩選項中默認設置的時間永遠都是上個自然月的起始與結(jié)束時間。
以下圖為例，如果想查看五月份的數(shù)據(jù)，我需要進入頁面后，將考勤日期的篩選條件清空后，才可以將考勤記錄按照時間倒序的形式進行全盤展示。
2. 建議方案
其實對于當前問題最好的處理方法，就是按照產(chǎn)品設計列表的通用慣例，在進入頁面時，不做任何篩條件的前置，放開當前頁面所展示內(nèi)容，使其用戶可以查找今日到初條數(shù)據(jù)即可。
之所以這樣做，是因為考勤查看的需求，大多情況下發(fā)生在近期，如用戶查看昨天或本月是否有漏打卡的情況，如有相關問題則需要進行處理。上個月的漏打卡相關問題絕大部分已成既定事實，HR恐怕很難通融。
四、自定義字段控件功能同站卻不同法
1. 問題探討
還記得首頁中可自定義選擇選擇入口的空間么（下圖），這個控件與列表頁中可自定義列表字段的功能相同，但是交互方法卻有差異。
如首頁的自定義入口功能中，可選菜單與已選菜單是通過 與x的交互方法來進行實現(xiàn)的，但是列表中的自定義交互方式變更為箭頭可左右增加與移除，或直接對項目內(nèi)容進行拖動，從而達到選擇與刪除的效果。
這個位置的設計很奇怪，雖然用戶都能看明白如何去操作，但還是建議同一個網(wǎng)站中在類似的功能下使用統(tǒng)一的選擇方式與風格，降低用戶的學習成本（雖然這個例子）。
2. 建議方案
其實很簡單，只要保證同一個平臺中，同一個控件或元素的表達、交互方式統(tǒng)一、一致即可。我們互聯(lián)網(wǎng)人總是在談論“用戶的學習成本”，殊不知學習成本可以小到一個字段，大到一套流程，為什么不讓用戶輕輕松松的去操作么？享受這種暢快操作所帶來的快感。
五、異常信息提示無法主動關閉
1. 問題探討
在OA平臺中的請假功能中，如果選擇休假類別與當前賬戶不符合的類型，將會給出相應錯誤提示，這種提示的功能非常好，有效避免了使用者在不符合請假條件的情況下，依然將所有信息完整錄入后，在點擊提交按鈕后才展示出相關的錯誤信息，促使使用者造成所做工的浪費，而達到情緒崩潰的邊緣（還好內(nèi)容少，不然使用者是要罵娘的）。
不過因為這個平臺的錯誤提示交互設計，使用者順利的通過另一種途徑產(chǎn)生了與崩潰類似的情緒變化。
我們來看一下，當錯誤提示信息被觸發(fā)后（下圖2），其展現(xiàn)形式是以彈窗來進行實現(xiàn)的，但這個彈窗是沒有關閉按鈕的，使用者無法使用鼠標主動對錯誤信息進行關閉，而是要在當前狀態(tài)下等待5秒鐘左右的時間，其系統(tǒng)才能自動關閉錯誤彈窗。且當前彈窗級別位于整體頁面最頂層，這意味著當前彈窗不關閉的話，是無法對當前頁面中任何一個元素進行主動操作的。
換句話來講，錯誤彈窗出現(xiàn)后，使用者意識到了自己的問題，從而主動通過鼠標探測的方式尋找關閉當前彈窗的方法（錯誤信息很打臉的），但無論在這5秒鐘的時間里，使用者進行了怎樣的操作，都無法達成自己的意愿。那么在這個環(huán)節(jié)中，使用者經(jīng)歷了兩種心理，休假類型選擇錯誤所帶來的預期破滅，與無法關閉錯誤彈窗的挫敗感。
另外可以看到，“事由”的輸入框中，最大輸入字符為“32766”個字符或漢字，我是有些不解，為什么是這么個不整不零的數(shù)字。
且不說三萬多字在當前這么小的窗口中如何展示，從當前請假需求來看，三萬多字是不是也太多了，不應該是精簡提煉請假事由么？
即便需要大量文字支持，也建議對輸入框的大小做些調(diào)整，使其能夠在更加寬泛的范圍內(nèi)，滿足既定文字的合理輸入空間。
2. 建議方案
- 正常的應對無關閉按鈕彈窗的方式為，輕點彈窗或?qū)Ξ斍绊撁嫫渌课贿M行單擊，完成鼠標觸發(fā)環(huán)節(jié)，成功關閉錯誤提示彈窗。這個環(huán)節(jié)就像是使用者在與系統(tǒng)進行對話， 內(nèi)容為：“好，我知道我錯了，你別說了，我重新寫，YOU不要在刺激我了”。
- 改變彈窗樣式，增加關閉按鈕或小叉子，讓用戶知道如何解決因自身錯誤帶來的流程停滯。
六、頁面結(jié)構(gòu)存在未合理分配情況
1. 問題探討
網(wǎng)站整體頁面采用左側(cè)樹形目錄（狹窄，主要功能在于快速切換不同模塊完成相關需求），右側(cè)內(nèi)容展示的結(jié)構(gòu)進行布局的（對模塊中的內(nèi)容進行細化顯示），在工資的詳情頁中，右側(cè)區(qū)域，每行采用兩個字段元素進行顯示，造成頁面位置大量浪費，就像是一個空空蕩蕩房間布置了些許的擺件，看著還是有些別扭。
2. 建議方案
- 其實建議采用合理化布局，比如增加每行所顯示字段數(shù)，如像其檔案管理中的頁面中的設計，每行元素增加至4個會有更好的展示體驗。
- 如果擔心頁面橫向排列4個元素，造成頁面過短，底部出現(xiàn)大量留白的情況，那么可以對頁面元素使用單獨的單元格部署（不是列表，而是有著邊框的單元格），利用單元格本身所占用的空間，彌補一些頁面空白缺陷，我想還是可取的。
七、獨立頁面對觸發(fā)頁面的影響
1. 問題探討
電腦補貼申請功能比較常用，但是當前頁面可能是獨立頁面，點擊后會新建瀏覽器tab展示其對應內(nèi)容，這一切都很正常。
但是當我點擊電腦補貼申請功能后，當前操作頁面右側(cè)卻從原頁面內(nèi)容突然變?yōu)榭諆?nèi)容，這是一個很奇怪的現(xiàn)象。
2. 建議方案
新建瀏覽器tab打開后，應保證入口頁面右側(cè)內(nèi)容不進行變更，且操作模塊應保留為正在操作的模塊中，這樣會比較合理一些，不然使用者會看到一個大白板。
#專欄作家#
王榮，微信號公眾號：PM_magic，人人都是產(chǎn)品經(jīng)理專欄作家。10年產(chǎn)品，專注互聯(lián)網(wǎng)后臺產(chǎn)品設計，主導電商后臺核心業(yè)務搭建，多套0到1平臺設計、概念落地、多類型系統(tǒng)設計經(jīng)驗。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議。
