對具備一定規(guī)模的公司來說，OA是非常常見且致力于提高效率的一套系統(tǒng)。而本文在使用體驗一套OA系統(tǒng)后，也就產品設計、頁面設計等方面的內容，展開了一些分析與建議。

隨著互聯(lián)網技術的迅猛發(fā)展，各公司對于內部的管理流程，從原來的線下處理逐漸轉移至線上，使得公司內部的業(yè)務處理效率得到了飛速的提升。但受限于小公司資金不足，無法對線上辦公產品進行全面的開發(fā)，市場中便出現了很多以線下業(yè)務線上化為目的的公司，主要以出售OA系統(tǒng)為主，并以其專業(yè)的OA解決方案，協(xié)助中小企業(yè)以低成本提升公司內部業(yè)務處理效率。

我在長期的職業(yè)生涯中，由于互聯(lián)網行業(yè)的特殊性，用過不少的系統(tǒng)，并且經常對各系統(tǒng)在設計、流程方面的優(yōu)劣進行總結或與同事進行探討，但是很少進行正規(guī)的書面內容總結，由于疫情當前，時間多少寬松了些，閑來無事的下午隨機挑了一款OA系統(tǒng)進行頁面設計方面的問題總結，并整理發(fā)表出來，我所總結的內容未必是正確的，當前文章旨在與產品設計方面與大家進行探討。

以下系統(tǒng)截圖已在重要位置進行馬賽克處理，本人無意丑化任何系統(tǒng)，僅作為與大家討論產品設計為用。隨機在當前平臺中挑選了幾個問題，寫出來與大家探討探討。

一、頁簽切換按鈕過于狹窄

1. 問題探討

我登錄的是web頁面，當前網站所展示的效果如果沒有猜錯的話，也是Web對應的頁面結構，但是對于鼠標操作的用戶來說，定制化首頁的雙屏切換功能設置成扁平形狀是不是有些“不近人情”。

首先，頁面不是大范圍的鼠標感應區(qū)域，無法使用鼠標左右拉取頁面從而達到切屏效果，就像iPad中愛奇藝或者優(yōu)酷那種全屏幕手指感應切換的方式。

第二，大部分臺式機或筆記本都不支持觸屏操作，無法精準的按照使用者的意識瞬間觸達切屏按鈕，建議更換為鼠標可精準操作的其他方式。

2. 建議方案

1. 增大按鈕可點擊面積，提升使用者鼠標的精準點擊成功的概率（讓用戶覺得爽才是真的好）。
2. 將當前首頁與第二個TAB標簽內容相融合，定制化入口頁面做在頁面頂部也是一個很好的選擇，如下圖：

二、定制化首頁可優(yōu)化內容

1. 問題探討

OA為了滿足不同使用者的使用需求和習慣，增加了相關的首頁定制功能，這是一個很好的功能設計，毋庸置疑。

我數了數，可定制的功能模塊高達24個（可配置模塊數量可能與各公司系統(tǒng)管理員配置的菜單數量有關），給我的第一感覺是“不錯”，我確實需要將大量的工作通過定制化頁面展現出來，同時在互聯(lián)網飛速發(fā)展的今天，各個公司都在顆?；褂谜叩男枨?，這不是什么問題。

問題在于“可選菜單”中的24個可定制模塊名稱，無法通過篩選關鍵詞的方式進行定位或查找。這意味著使用者如要想使用定制化首頁功能，就必須將這24個模塊內容全部吸收后，才知道自己想要定制的功能是否存在。

2. 建議方案

對于選擇控件中存在大量內容的情況，其實只需要在可選菜單的列表內容頂部增加一個小小的聯(lián)動篩選控件即可，控件采用實時獲取輸入內容，并調整列表中所展示的結果與其內容相符即可。

三、出勤頁面的默認時間篩選

1. 問題探討

這個不用多說大家也肯定非常清楚，是用來記錄每個人使用辦公管理系統(tǒng)進行打卡的信息記錄，但是讓我很費解的是，進入當前頁面后，篩選項中的考勤日期，永遠都會定格在上一個自然月中。

在我看來，一個絕大部分使用者，進入考勤列表頁面，是為了查看近期的考勤記錄，是否有遲到、忘打卡的現象等異?，F象，如果出現此類現象需盡快進行處理，避免工資結算時的尷尬。

但是就像剛才所說，無論什么時候進入當前頁面，篩選項中默認設置的時間永遠都是上個自然月的起始與結束時間。

以下圖為例，如果想查看五月份的數據，我需要進入頁面后，將考勤日期的篩選條件清空后，才可以將考勤記錄按照時間倒序的形式進行全盤展示。

2. 建議方案

其實對于當前問題最好的處理方法，就是按照產品設計列表的通用慣例，在進入頁面時，不做任何篩條件的前置，放開當前頁面所展示內容，使其用戶可以查找今日到初條數據即可。

之所以這樣做，是因為考勤查看的需求，大多情況下發(fā)生在近期，如用戶查看昨天或本月是否有漏打卡的情況，如有相關問題則需要進行處理。上個月的漏打卡相關問題絕大部分已成既定事實，HR恐怕很難通融。

四、自定義字段控件功能同站卻不同法

1. 問題探討

還記得首頁中可自定義選擇選擇入口的空間么（下圖），這個控件與列表頁中可自定義列表字段的功能相同，但是交互方法卻有差異。

如首頁的自定義入口功能中，可選菜單與已選菜單是通過 與x的交互方法來進行實現的，但是列表中的自定義交互方式變更為箭頭可左右增加與移除，或直接對項目內容進行拖動，從而達到選擇與刪除的效果。

這個位置的設計很奇怪，雖然用戶都能看明白如何去操作，但還是建議同一個網站中在類似的功能下使用統(tǒng)一的選擇方式與風格，降低用戶的學習成本（雖然這個例子）。

2. 建議方案

其實很簡單，只要保證同一個平臺中，同一個控件或元素的表達、交互方式統(tǒng)一、一致即可。我們互聯(lián)網人總是在談論“用戶的學習成本”，殊不知學習成本可以小到一個字段，大到一套流程，為什么不讓用戶輕輕松松的去操作么？享受這種暢快操作所帶來的快感。

五、異常信息提示無法主動關閉

1. 問題探討

在OA平臺中的請假功能中，如果選擇休假類別與當前賬戶不符合的類型，將會給出相應錯誤提示，這種提示的功能非常好，有效避免了使用者在不符合請假條件的情況下，依然將所有信息完整錄入后，在點擊提交按鈕后才展示出相關的錯誤信息，促使使用者造成所做工的浪費，而達到情緒崩潰的邊緣（還好內容少，不然使用者是要罵娘的）。

不過因為這個平臺的錯誤提示交互設計，使用者順利的通過另一種途徑產生了與崩潰類似的情緒變化。

我們來看一下，當錯誤提示信息被觸發(fā)后（下圖2），其展現形式是以彈窗來進行實現的，但這個彈窗是沒有關閉按鈕的，使用者無法使用鼠標主動對錯誤信息進行關閉，而是要在當前狀態(tài)下等待5秒鐘左右的時間，其系統(tǒng)才能自動關閉錯誤彈窗。且當前彈窗級別位于整體頁面最頂層，這意味著當前彈窗不關閉的話，是無法對當前頁面中任何一個元素進行主動操作的。

換句話來講，錯誤彈窗出現后，使用者意識到了自己的問題，從而主動通過鼠標探測的方式尋找關閉當前彈窗的方法（錯誤信息很打臉的），但無論在這5秒鐘的時間里，使用者進行了怎樣的操作，都無法達成自己的意愿。那么在這個環(huán)節(jié)中，使用者經歷了兩種心理，休假類型選擇錯誤所帶來的預期破滅，與無法關閉錯誤彈窗的挫敗感。

另外可以看到，“事由”的輸入框中，最大輸入字符為“32766”個字符或漢字，我是有些不解，為什么是這么個不整不零的數字。

且不說三萬多字在當前這么小的窗口中如何展示，從當前請假需求來看，三萬多字是不是也太多了，不應該是精簡提煉請假事由么？

即便需要大量文字支持，也建議對輸入框的大小做些調整，使其能夠在更加寬泛的范圍內，滿足既定文字的合理輸入空間。

2. 建議方案

1. 正常的應對無關閉按鈕彈窗的方式為，輕點彈窗或對當前頁面其他部位進行單擊，完成鼠標觸發(fā)環(huán)節(jié)，成功關閉錯誤提示彈窗。這個環(huán)節(jié)就像是使用者在與系統(tǒng)進行對話， 內容為：“好，我知道我錯了，你別說了，我重新寫，YOU不要在刺激我了”。
2. 改變彈窗樣式，增加關閉按鈕或小叉子，讓用戶知道如何解決因自身錯誤帶來的流程停滯。

六、頁面結構存在未合理分配情況

1. 問題探討

網站整體頁面采用左側樹形目錄（狹窄，主要功能在于快速切換不同模塊完成相關需求），右側內容展示的結構進行布局的（對模塊中的內容進行細化顯示），在工資的詳情頁中，右側區(qū)域，每行采用兩個字段元素進行顯示，造成頁面位置大量浪費，就像是一個空空蕩蕩房間布置了些許的擺件，看著還是有些別扭。

2. 建議方案

1. 其實建議采用合理化布局，比如增加每行所顯示字段數，如像其檔案管理中的頁面中的設計，每行元素增加至4個會有更好的展示體驗。
2. 如果擔心頁面橫向排列4個元素，造成頁面過短，底部出現大量留白的情況，那么可以對頁面元素使用單獨的單元格部署（不是列表，而是有著邊框的單元格），利用單元格本身所占用的空間，彌補一些頁面空白缺陷，我想還是可取的。

七、獨立頁面對觸發(fā)頁面的影響

1. 問題探討

電腦補貼申請功能比較常用，但是當前頁面可能是獨立頁面，點擊后會新建瀏覽器tab展示其對應內容，這一切都很正常。

但是當我點擊電腦補貼申請功能后，當前操作頁面右側卻從原頁面內容突然變?yōu)榭諆热?，這是一個很奇怪的現象。

2. 建議方案

新建瀏覽器tab打開后，應保證入口頁面右側內容不進行變更，且操作模塊應保留為正在操作的模塊中，這樣會比較合理一些，不然使用者會看到一個大白板。

#專欄作家#

王榮，微信號公眾號：PM_magic，人人都是產品經理專欄作家。10年產品，專注互聯(lián)網后臺產品設計，主導電商后臺核心業(yè)務搭建，多套0到1平臺設計、概念落地、多類型系統(tǒng)設計經驗。

本文原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議。