對(duì)具備一定規(guī)模的公司來(lái)說(shuō)，OA是非常常見(jiàn)且致力于提高效率的一套系統(tǒng)。而本文在使用體驗(yàn)一套OA系統(tǒng)后，也就產(chǎn)品設(shè)計(jì)、頁(yè)面設(shè)計(jì)等方面的內(nèi)容，展開(kāi)了一些分析與建議。

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

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

以下系統(tǒng)截圖已在重要位置進(jìn)行馬賽克處理，本人無(wú)意丑化任何系統(tǒng)，僅作為與大家討論產(chǎn)品設(shè)計(jì)為用。隨機(jī)在當(dāng)前平臺(tái)中挑選了幾個(gè)問(wèn)題，寫(xiě)出來(lái)與大家探討探討。

一、頁(yè)簽切換按鈕過(guò)于狹窄

1. 問(wèn)題探討

我登錄的是web頁(yè)面，當(dāng)前網(wǎng)站所展示的效果如果沒(méi)有猜錯(cuò)的話，也是Web對(duì)應(yīng)的頁(yè)面結(jié)構(gòu)，但是對(duì)于鼠標(biāo)操作的用戶來(lái)說(shuō)，定制化首頁(yè)的雙屏切換功能設(shè)置成扁平形狀是不是有些“不近人情”。

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

第二，大部分臺(tái)式機(jī)或筆記本都不支持觸屏操作，無(wú)法精準(zhǔn)的按照使用者的意識(shí)瞬間觸達(dá)切屏按鈕，建議更換為鼠標(biāo)可精準(zhǔn)操作的其他方式。

2. 建議方案

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

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

1. 問(wèn)題探討

OA為了滿足不同使用者的使用需求和習(xí)慣，增加了相關(guān)的首頁(yè)定制功能，這是一個(gè)很好的功能設(shè)計(jì)，毋庸置疑。

我數(shù)了數(shù)，可定制的功能模塊高達(dá)24個(gè)（可配置模塊數(shù)量可能與各公司系統(tǒng)管理員配置的菜單數(shù)量有關(guān)），給我的第一感覺(jué)是“不錯(cuò)”，我確實(shí)需要將大量的工作通過(guò)定制化頁(yè)面展現(xiàn)出來(lái)，同時(shí)在互聯(lián)網(wǎng)飛速發(fā)展的今天，各個(gè)公司都在顆粒化使用者的需求，這不是什么問(wèn)題。

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

2. 建議方案

對(duì)于選擇控件中存在大量?jī)?nèi)容的情況，其實(shí)只需要在可選菜單的列表內(nèi)容頂部增加一個(gè)小小的聯(lián)動(dòng)篩選控件即可，控件采用實(shí)時(shí)獲取輸入內(nèi)容，并調(diào)整列表中所展示的結(jié)果與其內(nèi)容相符即可。

三、出勤頁(yè)面的默認(rèn)時(shí)間篩選

1. 問(wèn)題探討

這個(gè)不用多說(shuō)大家也肯定非常清楚，是用來(lái)記錄每個(gè)人使用辦公管理系統(tǒng)進(jìn)行打卡的信息記錄，但是讓我很費(fèi)解的是，進(jìn)入當(dāng)前頁(yè)面后，篩選項(xiàng)中的考勤日期，永遠(yuǎn)都會(huì)定格在上一個(gè)自然月中。

在我看來(lái)，一個(gè)絕大部分使用者，進(jìn)入考勤列表頁(yè)面，是為了查看近期的考勤記錄，是否有遲到、忘打卡的現(xiàn)象等異?，F(xiàn)象，如果出現(xiàn)此類現(xiàn)象需盡快進(jìn)行處理，避免工資結(jié)算時(shí)的尷尬。

但是就像剛才所說(shuō)，無(wú)論什么時(shí)候進(jìn)入當(dāng)前頁(yè)面，篩選項(xiàng)中默認(rèn)設(shè)置的時(shí)間永遠(yuǎn)都是上個(gè)自然月的起始與結(jié)束時(shí)間。

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

2. 建議方案

其實(shí)對(duì)于當(dāng)前問(wèn)題最好的處理方法，就是按照產(chǎn)品設(shè)計(jì)列表的通用慣例，在進(jìn)入頁(yè)面時(shí)，不做任何篩條件的前置，放開(kāi)當(dāng)前頁(yè)面所展示內(nèi)容，使其用戶可以查找今日到初條數(shù)據(jù)即可。

之所以這樣做，是因?yàn)榭记诓榭吹男枨螅蠖嗲闆r下發(fā)生在近期，如用戶查看昨天或本月是否有漏打卡的情況，如有相關(guān)問(wèn)題則需要進(jìn)行處理。上個(gè)月的漏打卡相關(guān)問(wèn)題絕大部分已成既定事實(shí)，HR恐怕很難通融。

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

1. 問(wèn)題探討

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

如首頁(yè)的自定義入口功能中，可選菜單與已選菜單是通過(guò) 與x的交互方法來(lái)進(jìn)行實(shí)現(xiàn)的，但是列表中的自定義交互方式變更為箭頭可左右增加與移除，或直接對(duì)項(xiàng)目?jī)?nèi)容進(jìn)行拖動(dòng)，從而達(dá)到選擇與刪除的效果。

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

2. 建議方案

其實(shí)很簡(jiǎn)單，只要保證同一個(gè)平臺(tái)中，同一個(gè)控件或元素的表達(dá)、交互方式統(tǒng)一、一致即可。我們互聯(lián)網(wǎng)人總是在談?wù)摗坝脩舻膶W(xué)習(xí)成本”，殊不知學(xué)習(xí)成本可以小到一個(gè)字段，大到一套流程，為什么不讓用戶輕輕松松的去操作么？享受這種暢快操作所帶來(lái)的快感。

五、異常信息提示無(wú)法主動(dòng)關(guān)閉

1. 問(wèn)題探討

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

不過(guò)因?yàn)檫@個(gè)平臺(tái)的錯(cuò)誤提示交互設(shè)計(jì)，使用者順利的通過(guò)另一種途徑產(chǎn)生了與崩潰類似的情緒變化。

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

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

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

且不說(shuō)三萬(wàn)多字在當(dāng)前這么小的窗口中如何展示，從當(dāng)前請(qǐng)假需求來(lái)看，三萬(wàn)多字是不是也太多了，不應(yīng)該是精簡(jiǎn)提煉請(qǐng)假事由么？

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

2. 建議方案

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

六、頁(yè)面結(jié)構(gòu)存在未合理分配情況

1. 問(wèn)題探討

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

2. 建議方案

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

七、獨(dú)立頁(yè)面對(duì)觸發(fā)頁(yè)面的影響

1. 問(wèn)題探討

電腦補(bǔ)貼申請(qǐng)功能比較常用，但是當(dāng)前頁(yè)面可能是獨(dú)立頁(yè)面，點(diǎn)擊后會(huì)新建瀏覽器tab展示其對(duì)應(yīng)內(nèi)容，這一切都很正常。

但是當(dāng)我點(diǎn)擊電腦補(bǔ)貼申請(qǐng)功能后，當(dāng)前操作頁(yè)面右側(cè)卻從原頁(yè)面內(nèi)容突然變?yōu)榭諆?nèi)容，這是一個(gè)很奇怪的現(xiàn)象。

2. 建議方案

新建瀏覽器tab打開(kāi)后，應(yīng)保證入口頁(yè)面右側(cè)內(nèi)容不進(jìn)行變更，且操作模塊應(yīng)保留為正在操作的模塊中，這樣會(huì)比較合理一些，不然使用者會(huì)看到一個(gè)大白板。

#專欄作家#

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

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

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