提升信息效率的5條原則——京東用戶後台設計規範

提升信息效率的5條原則——京東用戶後台設計規範

信息設計是除了圖形以外的文字、數據等內容設計,通過信息設計可以提高人們應用信息的性能,在眾多信息中能夠迅速找到自己所需要的,並且使得信息能被有效地理解。所以,信息設計的關鍵在於如何將信息有效地展示,而不是強調如何藝術性的表達。

因此,以下總結了5條信息設計的原則,同時結合了後台設計的實際案例進行應用。

靠近與動態

這主要針對信息提示的設計。 “靠近”指的是信息需要靠近行為目標,顯示在用戶的中央凹區域內;“動態”可理解為“變化”的,但不僅是內容的變化,還需要有位置樣式的變化。

因為人們的視覺系統分為兩個區域,一個是中央凹區域,而剩餘的是邊緣視覺區域(相當於視覺盲區)。人們可以輕易的感知到中央凹區域裡的事物,而對於落在邊緣視覺區域的事物,他們的存在都很難被發現。除非這個事物是動態的,才會引起人們中央凹區域的轉移,將視線轉移到這個動態事物上。

在界面設計中,這將會影響信息的可見性。比如在我們之前的後台,有個關於當前“網絡狀態”的信息設計。在正常情況下,界面頂部會顯示“網絡良好”的橫幅,當用戶沒聯網的時候,頂部的橫幅內容會變為“網絡異常”… 但當時我們因為這個設計被用戶投訴了。

(在實際操作過程中,右邊的提示設計比左邊的更容易讓用戶看到)

因為用戶在後台中進行的都是主流程操作,根本沒注意到頁面頂部的信息變化,進而導致了後面操作的失敗。所以我們將這裡的提示信息進行調整,只有異常情況才會顯示toast提示以引起用戶的注意。

讓提示信息顯示在用戶的目標行為附近,或通過動態的展示以引起用戶的注意。

適應與側重

“適應”指信息設計需要考慮產品屬性與應用場景,“側重”是根據不同場景需求,適當調整信息呈現的側重點

一個產品可能是作為線上獨立運作的平台,也可能只是線下的輔助拓展;可能是供娛樂消遣的內容展示,也可能是作為實用的專業工具運用。甚至比如在一個運動類產品中,用戶動態下使用的頁面,與靜態時使用的頁面,信息的導向、可觸發的範圍設計都可能產生變化。同時,不同的產品屬性與應用場景,對應不用的用戶人群,這些人群的需求也相差迥異。

像當時在我們後台裡,有一個關於商品列表的設計。常規的商品列表會包含商品圖、商品標題與價格,而商品價格通常被重點突出用來吸引消費者;但在後台中,用戶群體是我們的商家,他們最關注的其實是這個商品“我賣了多少份”、“我賺了多少錢”,商品價格反而不是最重要的點。

(相比左邊的設計僅是把信息“添加”進頁面中,右邊的設計同時適當調整了信息層級,讓信息效用於當下的場景)

所以我們在做這塊商品列表設計的時候,棄用了常規的商品列表組件,重新設計了信息層級以適應當前的商家場景,側重展示用戶最關注的信息。

根據不同的場景適當調整設計,有側重性地呈現信息以提高使用效率。

前置、直達

嚴謹的框架界定、完整的信息展示有時候並不是最佳解決方案。 “前置”“直達”意為將二級頁面(或獨立功能)信息前置於主頁面中展示,為用戶提供更快捷的直達入口

其實對於大部分用戶來說,用的只是一個產品中的某個核心功能而不是全部功能,所以如果從使用效率上講,將這個核心功能入口前置展示在主頁面,要比用戶先進入二級頁面、再在全部功能中尋找這個核心功能的使用效率更高。

這種設計理念我們也可在ios14中見到,通過小組件的形式,在主屏幕展示每個APP最核心的內容,用戶無需進入APP即可直達功能入口。

特別是對於後台這種專業型工具來說,對產品精準、便捷的訴求會更加明顯。比如當時我們後台中有一個邀請功能,包含主頁的歷史邀請列表與設置邀請條件的二級頁。這個二級頁中有是否接受邀請的開關、對邀請級別與粉絲量的限制;如果關閉這個開關,則此時頁面中對級別與粉絲量的限制設置失效。

(在實際運用場景下,右邊的設計不僅能快速進行操作,而且這個開關與列表、更多設置選項之間的承接關係也表達地更加清晰)

所以我們將這個決定了二級頁中其他選項“生死”的開關前置到列表主頁中,畢竟在關閉開關的情況下,用戶已沒必要為了其他無效的設置選項進入這個二級頁。

通過將關鍵功能前置,打破頁面層級間的分隔,幫助用戶直達關鍵功能。

非必要折疊

保持簡潔似乎是設計師恆定不變的主題,在許多常規頁面中,如果一個內容包含ABCD不同分類,這些分類信息基本上會被“合併同類項”,折疊成左右滑動的菜單欄樣式。

不過除了圖片的折疊還較為顯眼,對於文字標題的折疊還是需要慎用的。因為用戶進入一個頁面會快速瀏覽頁面中的主要內容(或占比大的模塊),同時經過長久以往的瀏覽習慣,用戶操作界面的滾動方向都是上下為主;所以當文字標題作為輔助信息不僅佔比較小、且是左右滑動的菜單欄樣式時,位於菜單欄第2項以後的內容會被大部分用戶自動忽略。

在我們之前的後台設計中,有一個關於活動類型的切換就是採用這種左右滑動的菜單欄形式,這也間接導致了當時位於第2、3項菜單中的類型被選中率特別低。

(對於一些重要功能的切換,右邊的設計比左邊更能引起用戶注意,讓用戶進入選擇的狀態)

後來我們將這裡進行優化,把原本作為頂部滑動菜單欄的活動類型下移、並變成3個展開的選項,將活動類型的選擇作為需要用戶操作的主要內容的一部分,繞開用戶的自動忽略

折疊為左右滑動的文字菜單欄,由於樣式不顯眼與用戶瀏覽習慣的影響,除了第一項以外的其他內容,通常會被用戶忽略。

默認與引導

“默認”指界面中一些默認選項,這些默認的設計可幫助我們引導用戶的操作,同時對於用戶而言,他們並不會輕易改變這些默認信息。

因為用戶對於有可能導致自己失去一些權利或其他什麼的時候會表現的無比敏感。當用戶面對不同選項時,如果此時有個默認選項(不選擇)將比選擇一個可能導致自己失去什麼的選項更能獲得安慰。所以被動的選擇默認狀態會讓用戶感到安全感,更加簡單,和更小的風險。

基於這種默認項心理,也可以引導用戶按我們推薦的路徑操作,盡量減少異常情況的發生。比如我們後台設計中有個數據分析模塊,用戶可篩選不同時間段查看數據情況。但如果用戶頻繁切換時間段,將會增加我們系統的計算負荷進而導致數據異常。

(面對不同篩選項時,左邊的設計給用戶的第一反應是“這裡還有2個選項,我切換試試有什麼反應”;右邊的默認項設計可有效削弱用戶對“可選擇”的敏感度)

所以我們將時間篩選中的某一項作為默認項,並將其他時間選項收起(如果說前面說的“非必要折疊”是繞開用戶的自動忽略,這裡的“默認”選項則是進入用戶的自動忽略),用戶來回切換的頻率減少,相應也降低了系統的計算負荷。

運用默認項設計,營造用戶在使用過程中的安全感,引導用戶的同時盡量減少異常情況的發生。

寫在最後

以上關於信息設計的原則,幫助我們把信息更加高效地傳遞給用戶。

不過除了“信息傳遞”的使命之外,設計也在不斷地探索著對用戶行為與決策的推動,嘗試著各種讓設計價值最大化的可能。 詳見我們之前分享的這篇關於“行為助推”文章【點擊進入傳送門】

我們正在探索的路上,期待你也一起來。

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。