后臺交互設計師的收納技能
本篇文章作者提出了有關后臺產品設計的三種思考:優先級的判斷、歸類和擴展性,對此,提出了四種方法。
我們在做后臺產品的設計時,經常會遇到有大量的字段需要用戶填寫的場景,如果把所有的字段全部鋪開,讓用戶填寫,估計很多用戶看到之后,填寫的意愿會降到冰點。
所以,如何在既能滿足業務需求的情況下,讓界面的保持簡潔、達到用戶操作便利、高效的目標?
一、三種思考
1. 優先級的判斷
人的認知資源(人的工作記憶容量是4±1)和屏幕的界面資源(受屏幕尺寸的限制)都是稀缺的,所有內容都重要,那么沒有什么內容是重要的。
對優先級的判斷可以從如下幾個方面著手:
1.1 分用戶
目標用戶是誰?一般我們只能滿足1~2個用戶角色去做設計,如果再多,會導致我們設計目標模糊不清,所以,不要假設我們可以滿足所有用戶的所有需求。
比如:一個廣告的創建流程,我們會優先考慮初級用戶,其次才是高級用戶。
1.2 分場景
同一個字段,在不同的使用場景,它的優先級是不同的。
比如:用戶在瀏覽商品時,商品信息的優先級是高的;而用戶在選好商品,進入到支付環節,商品信息的優先級相對而言,就會下降,而支付信息的優先級會上升。
2. 歸類
根據具體情況,按不同的維度,將內容進行歸類,比較常用的是:按屬性歸類。
示例:臉書的廣告投放平臺將把頁面內容梳理成3類后,頁面展示變得更為簡潔。
3. 擴展性
考慮到各方面的原因,如:使用量暫時沒有上來,開發工作量的限制等,很多功能都是小步迭代的。但是,我們的設計需要考慮到擴展性。
比如:當前產品需求選項不多,如果,后期可能還會往里加更多的選項,那么就要平衡當前界面、目前選項數量、后續選項的數量級,來判斷采用什么樣的控件。
示例:在Adwords的廣告樣式預覽中:
A-1、“桌面設備”的主要廣告樣式的展示,平鋪展示5個樣式,用戶可以一目了然的看到可以投放的廣告樣式。
如果,后續會增加大量的內容,這種展示方式的擴展性就不太友好,因為放太多,用戶會很難記住。
然而,從業務需求上來說,增加內容的可能性比較小,因此,目前的展示方式,是相對合理的。
A-2、“移動設備”的樣式展示,一次只展示一個,其它樣式,通過“←→”進行翻閱,這種方式的擴展性更強,且每次只展示一個廣告的樣式,內容更聚焦。
有個小問題是:這里沒有告之用戶,一共有多少個,因為一直是循環播放,也沒有終點。
所以,要求用戶去記憶每個廣告樣式的具體內容,這個對用戶的要求會有些高。
二、 四個方法:
1. 分步驟展示
這個在后臺中比較常用,
示例:谷歌的Adwords廣告投放平臺,把創建廣告分成了4步:
2. 含蓄的隱藏
隱藏只有專業用戶才會用到的高級選項,采用漸進式呈現的方式。
2.1 考慮到重要程度
- 必填項的高頻操作項;
- 必填項的低頻操作項;
- 選填項的高頻操作項;
- 選填項的低頻操作項;
示例:在Adwords的廣告創建流程中:
A、把要必填的內容直接展開:
B、把選填的內容默認收起:
C、把只有專業用戶才會用到的高級選項,隱藏:
D、非必須且低頻的功能,深度隱藏:D-1、通過符號,含蓄告之有收納內容:
D-2、點擊符號,喚起隱藏的內容:
D-3、通過結果反饋執行的結果:
2.2 考慮到數量
人的工作記憶容量是4±1,對于第5個及5個以上進行隱藏:
示例:在Adwords的人群的查看表格:放出了較為重要的前5個屬性,把第6個進行了隱藏。由用戶按需來決定:第5個和第6個的優先級。
3. 信息分層級展示
示例:在Adwords中廣告創建流程中,突出的是右側的內容,而不是左側的標簽。
在右側的內容中:
- 首先:用圖示的方式,將兩種網絡的廣告會出現的位置用黃色色塊標識出來。(這個用戶最為關心)
- 其次:標題
- 再次:高亮顯示已默認為用戶勾選的內容(這個用戶較為關心)。
- 然后:介紹
- 最后:小問號的內容(隱藏內容,需要用戶鼠標移到小問號上,才會展示)。
4. 信息分組展示(具體分組方案的設計,可以參考格式塔原則)
示例:在Adwords的廣告創建流程中,將廣告歸納為5種,分5個卡片進行展示:
本文由 @崔玲美 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
你們的項目(比如xx后臺),絕大部分界面,表單都是設計好后給程序員?他們按照你們提供的原型做?
多寫點后臺的一些交互吧 大家都在說表格,但是還有搜索,還有新增還有一些信息布局可以講,甚至一些色彩,按鈕,交互動畫也可以寫!感覺小姐姐寫的很棒!
百度的交互小姐姐誒 ??
??
老習慣作者的作品了,有沒有微信號可以跟著前輩學習學習
哈哈,謝謝,我的微信號是“交互設計師隨筆”;你可以告訴我:想了解哪方面,然后,我抽空寫出來。