一文讀懂B端交互設計
雖然相較于C端而言,B端的交互設計投入會相對較低,但這并不能說明B端一側的交互設計不重要,相反,其中有許多細節(jié)和事項值得我們深入探究。這篇文章里,作者就分享了他關于B端交互設計、原型設計等方面的心得,一起來看。
B端產品流行的一句話是:又不是不能用。相較于C端,B端產品對于交互設計的研究和投入肯定是相對較低的。
那么是否就能說明B端產品不需要關注交互設計呢?顯然也是不可以的。因為B端產品最重要的價值之一就是提升用戶工作效率,為企業(yè)降本增效。
合理的交互設計是面向用戶,而直觀的原型設計則是面向開發(fā)。本文將探究作者日常工作中對兩者的心得體會及避坑指南。
一、交互設計的內容
交互設計是一門龐大復雜的學科,產品經理日常工作中接觸到的往往僅是冰山一角。對于交互設計,百度百科給出的定義是:交互設計,是定義、設計人造系統(tǒng)的行為的設計領域,它定義了兩個或多個互動的個體之間交流的內容和結構,使之互相配合,共同達成某種目的。
那么對于B端產品來說,就可以翻譯為用戶與系統(tǒng)之間的互動交流(用戶決策選擇,系統(tǒng)決策反饋等等),共同解決某一業(yè)務場景下的用戶需求。
比如,喝一杯水的行為如何設計?
解法1:拿起杯子-放到嘴邊-喝
解法2:拿一根吸管-放在杯中-吸
更復雜一點呢,比如有兩個人要喝這杯水?
解法1:人物1拿起杯子-放到嘴邊-喝-交給人物2-放到嘴邊-喝
解法2:人物1,人物2同時拿一根吸管放入杯中-吸
如果問題繼續(xù)復雜,你會發(fā)現(xiàn)行為設計的解法就有更多種,那么就要交互設計來確定眾多行為中最符合當下場景的最優(yōu)解。
交互設計中“交互”一詞,英文是interaction,其中inter是“互相”的意思,action就是“行動”,所以interaction直觀上解釋就是“互相的行動”,也就是主體行動一下,客體再行動一下,彼此往復,你來我往。
將循環(huán)展開成一個流程,如下:
比如提交新增客戶,看到新增按鈕-點擊新增按鈕-看到要錄入哪些信息-錄入信息點擊確定-添加完成。
每個節(jié)點和這套流程的設計就是簡單交互設計,比如移動端交互設計:界面原型就是每個節(jié)點,節(jié)點間的前后關系就是流程,最后完成什么任務,就是一套交互設計。
然而這只是最理想的一條交互路徑,在實際的場景中往往會出現(xiàn)各種各樣的異常情況,所以節(jié)點和流程就會越來越復雜,交互設計也就越需要花費精力去考慮。
二、開始設計之前
交互設計是脫離不開用戶和場景的,因此交互設計要圍繞需求分析的結果來進行。目前市面上有很多成熟的交互設計,可以參考,但在使用前一定要結合實際情況進行分析,不能直接照搬!?。⊥瑯拥暮Y選設計,放在PC端和移動端的交互是肯定不同的。PC端的空間大,篩選條件可以直接顯示在列表上。
移動端空間小,這里又會分不同場景:
- 篩選條件少且高頻可直接放在列表;
- 篩選條件多且低頻,可考慮篩選圖標點擊彈窗等等。
三、簡約四要素
交互設計不是炫技,越簡單的交互往往越能深得用戶喜愛,因為復雜的交互會提高用戶學習成本.你的用戶大部分并不是【專家用戶:專家型用戶愿意探索你的產品或服務,并且會給你提出各種改進建議】,往往會因為你一個按鈕的擺放就在心理大罵:哪個XX產品經理設計的。
在《簡約至上》這本書中,作者提出了四點關鍵方法去簡化交互設計。
這四點在我最開始接收的工作任務中發(fā)揮了很大的作用,當時需要將PC系統(tǒng)上的常用功能做成移動端的功能。我們都知道手機的空間有限,因此首要任務就是簡化簡化再簡化,這四個指導思想起到了至關重要的作用。項目已經上線穩(wěn)定運行,但回過頭來看其實還是能夠做的更好。
四、常用的交互設計方法論
我們都聽說過尼爾森交互設計十大原則和交互設計七定律,這里對兩大黃金交互理論組進行去重并融會貫通,保留一些重要且常用的進行介紹。
1. 菲茨定律
預測點擊一個目標的時間取決于目標和當前位置的距離+目標大小。
- 提高產品可用性中的效率指標,減少移動距離,相關元素靠近,幫助用戶更快速的完成某個操作或任務流
- 減少誤操作的可能性——費茨定律的反向應用
- 屏幕的邊界“無限大“,更容易觸達(如Mac系統(tǒng))
2. 米勒定律
神奇的7+-2法則,普通人只能在工作記憶(短期記憶)中保持7+-2項信息
- 減少選擇,但不能無限減少(簡約四要素中的-刪除)
- 對信息進行分組(簡約四要素中的-分類)
- 減少用戶的記憶量
3. 操作可預期
飛書這個產品給我最大的一個體驗的感覺就是它好像隨時都能預判到我下一步要做什么而提前做好準備。就好比你在生活中有個管家隨時為你準備好接下來的事情,這樣的交互設計是會極大的提升用戶體驗的。這就需要我們對用戶的場景足夠了解。
在經歷了互聯(lián)網多年的發(fā)展,操作可預期已經在潛移默化的培養(yǎng)著用戶習慣,你可以讓用戶操作YES/NO,也可以選擇是/否,但不能讓用戶操作T/F。
4. 狀態(tài)可感知
面對B端復雜的業(yè)務流,我們是很有必要幫助用戶去減少記憶和操作負擔的。因此應該時刻讓用戶清清楚當前發(fā)生了什么事,讓用戶了解自己處于何種狀態(tài)以及對未來去向有所了解。
5. 一致性
- 通過保持內部和外部兩種類型的一致性來提高學習能力。
- 在單個產品或產品系列中保持一致性(內部一致性:交互、結構、顏色等方面)。
- 遵循既定的行業(yè)慣例,減少用戶學習成本(外部一致性)。
6. 防錯原則
B端的用戶操作一不小心就可能造成毀滅性的效果,一不小心就可能造成成百上千萬的損失。因此防錯原則也是在設計中務必要考慮的原則。可通過操作前、操作中、操作后三個階段層層布防。
① 操作前,提醒防錯
詳盡的說明文字,突出顯示。
當結果不可逆時,詢問用戶讓其知道操作的后果,分為輕度中度重度三種提示程度。
② 操作中,實時感知
對用戶的操作進行視覺化呈現(xiàn),并及時回饋。
適當限制用戶的某些交互操作。
③ 操作后,及時反饋良好引導
錯誤發(fā)生時,及時反饋錯誤并提供糾錯幫助。
允許用戶犯錯,并支持操作可逆。
④ 阻斷與非阻斷的平衡
防錯原則本身沒有錯但要注意防錯與不防錯的平衡,試想你做一步事情跳出來一個東西提醒你阻止你,你會不會有砸電腦的沖動。
五、一些建議
- 借鑒成熟產品
- 不要高估用戶水平和用戶設備水平
- 易上手,可定制
- 采用標準控件
- 有>好用>好看
六、有關原型
在真正成為B端產品經理前,也曾把原型看的很重要,花費了很多時間去學習一些復雜的Axure交互。在入職以后一個小需求也想做成完全可操作的原型,往往耗費了大量的時間精力。
在我看來產品經理的原型會主要面對兩類對象,用戶和開發(fā)。原型是一個和他們之間高效溝通的載體,最大的作用是高效準確的傳達出你想對他們表達的內容。以下是我對B端原型設計的一些避坑建議。
- 不要過度追求高保真原型,有時候箭頭加界面往往更直觀的讓開發(fā)理解。
- 根據(jù)交互設計的一致性原則,相同的項目可生成可復用的組件庫,提高工作效率
- 原型繪制要細心,不要給開發(fā)向你提問的機會。
- 避免接到需求立刻進入原型繪制,需求分析必不可少
- 原型改動點要有單獨的版本更新頁面記錄,避免開發(fā)忽略
本文由 @B端阿超 原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于 CC0 協(xié)議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
我簡自豪表示很贊
筆芯