超全面!高手總結的18條交互設計原則(二)

這是一套較系統的交互設計原則,我將會結合一些案例進行講解,希望你有收獲。

上期回顧:《超全面!高手總結的18條交互設計原則(一)》

此書屬于作者博客分享,并未成書出版,總結于14年,在閱讀翻譯過程中發現很多案例及原則已經過時,因此結合當下的互聯網產品和新潮的交互設計原則對其進行了補充。國內交互設計起步較晚,我在杭州曾經結識過第一位中央美院的交互設計專業畢業生學姐,那是國內第一屆交互設計專業畢業生,且最終學姐從事的是運營設計。

因此國內交互設計領域的發展,既要依托大廠優秀設計團隊的成長與分享,也要依靠外部大環境下愈發重視交互的趨勢的形成。雖然職能劃分目前仍沒有一個定論,是獨立劃分出交互設計師,還是 UI 晉升產品設計師、UED設計師?但有一個準則卻是大概可以達成共識的,那就是,產品經理職能愈發向業務層傾斜,懂得在戰略層業務向高屋建瓴籌備戰略的產品經理,能為企業創造更多的價值。而交互邏輯信息架構等交互設計領域的職能必然分發下來,由中下游的設計師來負責,即在座的各位。有壓力但也是一條康莊大道,共勉。

超全面!高手總結的18條交互設計原則(二)

超全面!高手總結的18條交互設計原則(二)

一、可發現性

1. 隱藏復雜性的行為可能會導致增加復雜性

設計嘗試隱藏一些元素控件以使得界面更加輕盈簡潔,或者希望減少多余元素對用戶的干擾,使用戶聚焦于核心任務。這種做法是沒有錯的,且多用于移動端產品,如閱讀類app,為打造沉浸式閱讀體驗而隱藏操作欄。

超全面!高手總結的18條交互設計原則(二)

但在執行這一設計時要考慮需要隱藏的內容是否會對用戶造成困擾,在這里分享一個案例。

微信掃一掃功能將手電筒隱藏,通過判斷掃描內容的情況來調取手電筒功能。這個設計本身沒有錯,結合用戶場景在最恰當的時機觸發,在其余場景隱藏以保證界面簡潔。但這個設計實際上犯了一個較大的原則性錯誤——用戶自治(上一篇文章中有講到),產品設計者太過自信于機器的識別效率,自信于代碼的精湛,而沒有在廣泛的實際場景中進行大量測試。導致用戶無法按照自己的意愿執行操作,大大降低效率并引發用戶反感。

使用時會出現的問題:我在晚上急切的想要掃碼騎車,打開微信掃一掃后它需要很長時間(有時超過十秒)才判定我處于黑暗場景,然后出現輕觸照亮的按鈕,點擊按鈕手電筒會打開。(有時候只是略微暗一些,但二維碼是無法被識別成功的,而手電筒的判斷也無法實現)在此期間我只能干等著,因為掃一掃功能占用了手電筒,因此即便我手動去開啟手電筒,也會顯示此功能已被占用。很多人也出現過類似的狀況。

超全面!高手總結的18條交互設計原則(二)

2. 使用新手引導(功能引導)告知用戶使用新功能

永遠不要認為用戶是高級用戶,產品設計者不能主觀臆想用戶很容易理解你所設計的功能,主觀想法沒有實際測試的數據可靠,這是準則。

當產品迭代后應對新增的功能進行解釋和必要的引導,否則這些功能對用戶來說是隱形不可用的。大版本迭代更新,設計者一般會主動進行引導和宣傳,如常用的開屏引導,遮罩功能引導等。對于一些極小的功能增添或改動,也應當提供必要的說明。

3. 必要控件和必要內容始終可見

要實現用戶體驗目標需要一個核心的任務路徑,用戶要依照這個路徑完成其核心任務并達成目標。例如我需要購買一件 T恤,用戶需要在淘寶下單以完成這個目標。反映在界面中,需要為用戶提供購買按鈕、付款按鈕等必要控件,同時當然也需要展示商品價格、商品尺寸等必要信息。

反觀京東部分商品的購買界面是沒有直接購買這一按鈕的,而是替換為加入購物車。從體驗角度講這是一個錯誤的設計,用戶需要執行加入購物車 - 進入購物車 - 結算三步操作,和單獨的立即購買按鈕相比,效率低下,容易造成流失。但從業務角度講,加入購物車容易觸發用戶購買多件商品的欲望,另外單件商品不足99元無法享受包郵,要額外付郵費,這一點容易對用戶購物體驗構成阻礙,原理參照下面的解釋。因此產品設計要綜合體驗業務各方面的因素,沒有絕對的準則,只有絕對的適合。

超全面!高手總結的18條交互設計原則(二)

4. 通過用戶測試來判斷界面的可發現性

用戶測試能夠幫助產品發現是否有關鍵元素被隱藏從而降低體驗。用戶測試是一種極好的用戶研究策略,如果設計人員沒有足夠精力完成問卷或訪談等專業調研工作的話,可以考慮尋找身邊的用戶進行簡單測試,優于埋頭苦干。

二、提高用戶效率

1. 從提高用戶工作的效率出發,而不是提高機器的效率

雖然提高機器工作效率貌似必然提升用戶工作效率,實則相反。這里作者舉例,輸入電話號碼這一用戶行為,從機器效率角度設計,最好輸入一連串的十幾位的數字,而從用戶角度講,為避免輸錯而導致的效率低下及經濟損失,應當將數字每幾位隔開。而很多時候,人力成本比機器成本要高得多,因此無論從體驗角度還是從業務收入角度,都應當以人為本進行設計。

2. 提高軟件的效率需要從系統架構入手而不是表面的設計

可以理解為:交互設計對于提高軟件的工作效率有著更重要作用,相比信息設計視覺設計等。引申到現代的產品設計流程中,要求產品經理和交互設計師在產品設計的前期應該將更多時間花費在用戶調研,數據分析,以及信息架構上,而不是流于表面的交互稿,二八原則中的八用來進行前期數據整理和研究分析,而剩余的百分之二十的時間用來完成交互稿的構建即可。

這是已經被騰訊網易等大廠設計團隊提到過多次的設計方法,即實際設計稿的產出時間應當是整個產品設計流程中占用最短的,更多的時間應當用于調研分析和架構,在明確業務目標和用戶體驗目標后,以目標為導向開展設計,可以避免反復修改等問題,從而提高產品設計的效率。

3. 異常信息應當由專業人員編寫

使用產品過程中不可避免會出現一些異常狀態、錯誤提示。這些提示文案應當由專業人員編寫,其內容需要包括:

  • 解釋什么是錯的;
  • 告訴用戶如何處理它。

超全面!高手總結的18條交互設計原則(二)

三、可探索的路徑

概括來說就是清晰易用的導航。

1. 為用戶提供核心工作路徑但也允許用戶以自己的方式探索產品

不要強制用戶按照預先設置好的方式使用產品,允許用戶自己探索(針對那些想要主動探索和發現的用戶)但同時一定要提供一個最快捷高效的工作路徑,以滿足新用戶的需求。以滴滴為例,強工具類產品以提供核心服務為主,應當保證所有用戶能夠迅速實現體驗目標:打車并抵達目的地。其他次要功能或者運營需求都應當不影響這一核心工作路徑。

超全面!高手總結的18條交互設計原則(二)

2. 提供穩定的home選項,使用戶隨時可以找到自己的主頁

home 選項的設計應當符合行業標準,如淘寶 tab欄的第一項,如 PC產品左上角的 logo,都屬于 home 路徑,且早已培養好用戶習慣,設計師可以直接復用這一規則,而不應重新設計 home 的樣式或位置。

在此基礎上,移動端 home 選項有很多運營機會和體驗機會,如瀏覽 feed流很久后,點擊 home 鍵回到頂部就是一個很驚艷的體驗點。

3. 使行動可逆

使大部分操作可逆意味著用戶可以以自己的方式工作又不會造成損失。此原則應當靈活運用,可逆的成本應當結合產品來設計。例如填寫表單后重新輸入,加入購物車后刪除,付款后取消訂單,他們的成本應當是依次遞增的。

表單是純體驗向的東西,設計人員更關注其填寫效率,因此其可逆操作成本應當降到最低。購物和付款相關可逆操作是和業務掛鉤的,設計人員應當考慮成本,考慮如何阻止用戶執行逆操作從而提高轉化率付款率,減少取消訂單的比率。因此我們平時接觸的電商類產品,下單后去尋找取消訂單或退款需要花費一定時間。

所以原則可以正向使用也可以反向使用,大家不要局限思維,需要培養業務觀。

4. 始終允許撤銷

如我們在編輯文章等行為時可以通過 command+Z 撤銷文字。此撤銷不同于行動可逆,是一種更加便捷成本更低的交互。例如微信聊天提供撤銷操作,撤銷后會提供重新編輯的選項,此撤銷提高用戶編輯的效率,是一個體驗向的優化點。

四、費茨定律

距離越長,所用時間越長,目標越大,所用時間越短。

1. 將大對象用于希望用戶執行的功能,如CTA按鈕。將小對象用于不希望用戶執行的功能或希望用戶次要考慮的功能

超全面!高手總結的18條交互設計原則(二)

2. 獲取多個目標需要的成本是獲取每個目標的成本的總和

因此在使用費茨定律時,不僅要考慮距離和大小,還要減少用戶需要考慮的目標的數量。即提供更少的選擇可以幫用戶更快的完成決策。

五、人機界面對象

即界面中的視覺或交互元素。

超全面!高手總結的18條交互設計原則(二)

1. 人機界面對象應當有一個標準的操作方式

比如 button 觸發點擊的操作,滑塊觸發滑動的操作。

2. 人機界面對象具有標準的結果行為

如 mac系統中,垃圾桶并不是真的將文件刪除,而是將其儲存在垃圾桶中, 只有傾倒廢紙簍才能將文件徹底刪除。

3. 當希望用戶以不同的方式進行交互的時候,應當使用新對象

一般情況,我們應當在產品使用常用的控件樣式和交互方式,如點擊,滑動,雙擊等,不同平臺要入鄉隨俗,iOS平臺常用左滑喚出操作控件,而安卓則是長按喚出,特殊情況如業務需要,或考慮開發成本,雙端合一出一稿設計時可以適當打破規則,而有時為了滿足不同平臺的用戶習慣,我們需要提供兩種樣式的操作方式。如在小程序平臺,無法判斷他是iOS還是安卓的用戶,也就無法僅提供一種交互樣式來滿足所有用戶。

六、降低延遲(用戶等待時間)

1. 盡可能使用多線程將延遲推送到后臺

盡量保證用戶在等待進程時可以繼續完成其他工作或瀏覽其他內容。如上傳視頻后不必在原頁面等待,可以瀏覽其他信息。

2. 優化用戶延遲體驗

通過50毫秒內的視覺或者聽覺反饋確認所有按鈕點擊,避免多次點擊的陷阱。(在網速卡時,人們通常會多次點擊按鈕,而后臺應避免多次發送請求從而導致卡頓)

3. 等待時需要告知用戶,信息盡量完整,如具體等待時間

加載樣式多樣,應當選取最適合產品及場景的樣式。程度較重的如全屏加載,輕度加載如微信 button 加載樣式。

超全面!高手總結的18條交互設計原則(二)

「延伸閱讀,設計原則在產品中的運用」

收藏 106
點贊

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。