5Tips–助力管理平臺的信息設(shè)計

0 評論 3848 瀏覽 16 收藏 12 分鐘

首先我們來看下面這幅圖:左邊是Dribbble聯(lián)合創(chuàng)始人設(shè)計師Dan Cederholm的辦公桌,非常干凈整潔。右邊是天才工程師?Jim Williams的辦公桌,大家第一眼感覺如何?是不是很凌亂。我們常說設(shè)計要謹(jǐn)記“Less is More”,簡潔干凈是人人都追求的,但有時有些復(fù)雜是不可避免的,比如下圖中工程師的桌面。仔細(xì)觀察其桌面,你會發(fā)現(xiàn)雖然這些物件看起來雜亂無章,但其 擺放還是有規(guī)律可尋的。

我進(jìn)入公司的兩年時間里,一直在做管理平臺的設(shè)計工作,而目標(biāo)用戶就是工程師。這些管理平臺都有共同的特點:業(yè)務(wù)邏輯復(fù)雜,信息數(shù)據(jù)海量,而且還要考慮用戶特定的使用場景和操作習(xí)慣。所以在設(shè)計中首要的兩個目標(biāo)就是:

1、保證功能完整流暢,同時兼顧易用性。

2、保證信息組織合理,同時兼顧可讀性。

在實現(xiàn)這些目標(biāo)的過程中,我總結(jié)了5條設(shè)計小技巧。下面,我將用一些產(chǎn)品實踐和案例來詳解設(shè)計過程中小技巧的應(yīng)用。

Tip1:合理組織表單內(nèi)容

管理平臺的功能大部分需要通過填寫表單來實現(xiàn),但由于其業(yè)務(wù)特點,它的表單填寫內(nèi)容繁多,邏輯復(fù)雜。若直接羅列所有表單內(nèi)容,一定會讓用戶望而生 畏,且容易出錯。這時可以根據(jù)內(nèi)容類型,關(guān)聯(lián)邏輯等維度將表單分成多個主題,再根據(jù)前后邏輯關(guān)聯(lián)性,將這些主題分到多個網(wǎng)頁或單個網(wǎng)頁的不同部分,如果是 多個網(wǎng)頁,最好配以進(jìn)程提示,告知用戶需要的填寫步驟以及當(dāng)前所處進(jìn)度。有研究表明,比起完成一項大任務(wù),人們更愿意去完成10個小任務(wù),因為每完成一個 小任務(wù)就能給人帶來一定成就感。

云計算-云主機(jī)服務(wù)中,創(chuàng)建云主機(jī)的過程需要填寫15項內(nèi)容,根據(jù)信息類型和業(yè)務(wù)邏輯將內(nèi)容分為了三類,再加上一個確認(rèn)步驟,將整個表單填寫分到了四個網(wǎng)頁,雖然步驟變多,但卻可以讓信息更加有序,減少錯誤的發(fā)生。

運維平臺中添加監(jiān)控項需完成9項內(nèi)容,但前后主題之間沒有很強(qiáng)的邏輯關(guān)聯(lián),因此在一個網(wǎng)頁中分成3個主題,即可添加成功。

Tip2:選擇合適的標(biāo)簽對齊方式

最貴的不一定是最適合自己的,標(biāo)簽的對齊方式也是如此。根據(jù)不同的使用場景也要選擇不同的對齊方式。業(yè)界比較認(rèn)可的標(biāo)簽對齊方式有頂對齊、左對齊和 右對齊三種,Matteo Penzo的眼動實驗比較了三種方式的完成速度,頂部對齊標(biāo)簽方式,標(biāo)簽移動到輸入框需50毫秒,比左對齊標(biāo)簽方式(500毫秒)快了10倍,比右對齊標(biāo) 簽方式(240毫秒)快了5倍左右。通過下表,可以看出三種對齊方式各有其優(yōu)缺點。但有時,完成時間并不是表單設(shè)計的唯一考慮因素。

(引用自Justin Mifsud的《An Extensive Guide To Web Form Usability》)

對于簡易表單可以使用頂對齊;對于較復(fù)雜表單,更傾向于選擇右對齊,而對于布局復(fù)雜的表單則可以用左對齊的方式。

云計算-關(guān)系型數(shù)據(jù)庫的創(chuàng)建實例中標(biāo)簽都較長,且要填寫的表單項數(shù)較多,綜合考慮后,為了讓用戶在一屏環(huán)境下填完,我選擇了更適合的標(biāo)簽右對齊方式。

雖然標(biāo)簽右對齊比左對齊的完成效率高些,但若在布局復(fù)雜的情況下標(biāo)簽右對齊會讓界面顯得非常混亂,從而影響整體的信息瀏覽閱讀。所以在布局復(fù)雜的表單中一般會選擇左對齊。

當(dāng)然,對于一些空間受限,內(nèi)容又繁多的表單,還有一些創(chuàng)意的處理方法,如Matt?D.?Smith的設(shè)計。

Tip3:漸進(jìn)展開額外內(nèi)容

漸進(jìn)展開額外內(nèi)容也是應(yīng)對復(fù)雜信息的一種手段。根據(jù)用戶的使用場景和習(xí)慣,將部分內(nèi)容預(yù)先隱藏,在用戶需要時,通過點擊適合的控件,再出現(xiàn)更多額外內(nèi)容,這樣可使界面保持簡潔,操作邏輯清晰。

云計算中創(chuàng)建安全組的表單,大部分用戶創(chuàng)建一條安全組規(guī)則即可滿足需求。對于有額外需求的用戶可通過點擊添加按鈕來補(bǔ)充。這樣在大多數(shù)情況下,頁面簡潔,而有需要時,也可以快速添加,不打斷用戶的操作流。

Airbnb個人資料表單的緊急聯(lián)系人選項,默認(rèn)情況只有一個說明,若需添加時,點擊編輯才會展開更多內(nèi)容。

云計算的時間選擇控件,對多數(shù)用戶來說,這些快捷選項基本滿足查看不同時間范圍內(nèi)的數(shù)據(jù)變化,所以自定義時間范圍就作為高級功能隱藏起來,如有需要通過鼠標(biāo)點擊自定義即可觸發(fā)。

Tip4:即時幫助和即時驗證

雖然管理平臺的用戶多半都是經(jīng)驗型用戶,但復(fù)雜的表單和特定的規(guī)則難免會讓他們有困惑的時候。在輸入框旁邊適時地顯示幫助信息,及時地告訴用戶該如 何填寫,以此減輕用戶的記憶負(fù)荷。同時,管理平臺的表單內(nèi)容通常會很多,如果在最后提交時才告知用戶有錯誤,無法提交,想必此時用戶肯定會怨聲載道索性放 棄填寫。即時驗證讓長表單的填寫成為一種實時溝通,它可以及時確認(rèn)用戶填寫的內(nèi)容是否合適,或者實時更新數(shù)據(jù)給用戶填寫參考。

填寫集群的名稱有其特殊的復(fù)雜規(guī)則,如果沒有即時幫助,讓用戶每次創(chuàng)建都記住規(guī)則再來填寫,顯然不可能,而每一步的實時驗證,可以補(bǔ)救用戶在規(guī)則查看之余還會犯的錯誤,順利完成任務(wù)。

每個用戶的數(shù)據(jù)庫服務(wù)器數(shù)量都有一個初始值,隨著創(chuàng)建會逐漸減少,限制提示可以提醒用戶填寫一個合理的數(shù)值。

對于一些較復(fù)雜的表單項,也可以嘗試在標(biāo)簽上添加提示。

而難以解釋的表單項,除了文字提示之外,還可以嘗試使用圖片來表達(dá)。例如信用卡的CVC碼,一般人都不清楚是什么,但用圖片來表達(dá)就一目了然了。

Tip5:?借助圖形化表達(dá)

通常來說,文字可以準(zhǔn)確地表達(dá)信息,但是過多的文字卻會給界面帶來閱讀負(fù)擔(dān),若將部分文字信息通過圖形化表達(dá),則可以把信息更加直觀、準(zhǔn)確、清晰地傳達(dá)給用戶,以獲得理解和共鳴,甚至快速地被記住。在表格中適當(dāng)借助圖標(biāo)來代替文字還可以減少占用空間,讓表格主次分明。

在云主機(jī)名稱旁邊放上云硬盤的圖標(biāo),用戶一目了然就可看出哪些云主機(jī)掛載了云硬盤,而無需再專門加一列數(shù)據(jù),表明云硬盤的掛載情況。

性能監(jiān)控平臺的場景管理中,對每一個輪次都會有一系列使用頻繁的操作,為了讓用戶可以快速找到,且不迷失在文字理解中,用圖標(biāo)來表示這些操作既美觀又便捷。

sbb.ch的火車班次查詢列表,很多信息會通過圖標(biāo)來表達(dá),很大程度地縮減了占用面積。雖然有一些圖標(biāo)的認(rèn)知需要一定的學(xué)習(xí)成本,但在熟悉之后,會讓信息傳達(dá)變得直觀高效。

結(jié)語

以上就是我對管理平臺信息設(shè)計的一點心得。雖然管理平臺的用戶受眾面遠(yuǎn)不及內(nèi)容型產(chǎn)品,但這些用戶都是專業(yè)用戶,對數(shù)據(jù)的操作和瀏覽有更嚴(yán)格的要求,如何在實現(xiàn)所有功能的基礎(chǔ)上讓用戶覺得這類產(chǎn)品的使用是靈活且便捷,還有許多研究的點值得深入挖掘。

 

原文來自網(wǎng)易UED

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!