如何提高產品易用性?高手總結了3個層面!

本篇文章絕對不是 ChatGPT 生成的...無論從事什么行業的設計工作,產品易用性都是離不開的話題,我們都希望自己的產品可以給用戶提供更好的體驗。事實上,即使是同樣的產品,界面和環境都相同,對于不同的用戶而言,易用性也是不同的。這取決于不同的認知能力、知識背景、使用經驗等。本篇文章從表達、行為、心理 3 個層面,解釋產品如何自上而下的影響用戶易用性感受,希望對大家有幫助。

更多作者干貨:

一、寫在前面

提到易用性設計,很多人第一反應是互聯網軟件的設計,實際上,這只會限制了設計的邊界。說到易用性設計,在互聯網行業還沒崛起之前,寶潔公司一直是行業的標桿。舉一款肥皂設計的例子,幫助大家更好的理解可用性和易用性。

  1. 可用性(Availability):這款肥皂能不能有效的清洗污漬,能不能有效的消殺細菌
  2. 易用性(Usability):這款肥皂握住的時候舒不舒服,沾水之后防滑程度怎么樣,能不能讓它聞起來更舒適...

映射到軟件上來看,可用性指的是產品解決問題的能力,它關注的是系統是否能幫助用戶解決問題。易用性則是指產品被多數用戶使用時是否流暢、舒適。

二、如何提高產品易用性

和產品體驗設計不同的是,體驗設計是按照戰略-范圍-結構-框架-表現 5 個層面從下而上去進行的。而用戶感受恰恰相反,它是一種自上而下的過程。用戶在接觸產品的時候,產品表象是最初的感受,當用戶和產品有了互動之后,用戶產生了行為層面的感受,最后用戶會結合自己的過往認知、使用經驗等產生對產品的綜合感受,即心理感受。

了解了用戶感受的基本邏輯后,我們可以針對不同的層次,使用一些設計原則和技巧去提高用戶的易用性感受。總的來說,這 3 個層面在易用性上的側重點不同。

表達層關注傳達準確性,行為層關注使用效率,心理層關注心智構建。

下文中會具體展開...

如何提高產品易用性?高手總結了3個層面!

1. 表達層

表達層關注的是傳達準確性。大到產品風格,小到文本大小,產品總希望通過一定的設計手段將信息傳達給用戶,而所有傳達的信息無外乎準確一詞。對于用戶來說,你傳達的是用戶想要的,帶給用戶的易用性感受就越強。具體可分為以下 5 點:看起來可訪問、減少認知負荷、區分視覺權重、貼合用戶環境、表達一致性。

① 看起來可訪問

目前對于可訪問性的定義多數指的是針對殘障用戶的設計,不過我所指的可訪問性是用戶看到產品時的第一直觀感受--看起來可訪問。

說通俗點,就是“看起來能不能用”,雖然“用”和“看”并沒無本質上的聯系。好看的產品并不等于易用性高的產品,但視覺并不是和易用性毫無關系。人們在使用產品之前,會迅速確定自己是否喜歡某個事物的外觀。美觀會立刻為產品贏下下載量與信任感,并且增加設計的說服力。如果你的網站或產品看起來還是 5-10 年前的設計風格,可能用戶還未嘗試之前,就選擇了放棄體驗。雖然產品的美觀程度無法提高它的易用性,但能讓用戶感覺它更好用,所以“看起來可訪問”在表達上很重要。

舉例子:以下圖淘寶網頁為例,右圖中設計風格老舊的電商網頁,視覺上給人老氣陳舊的印象,并不能快速的與消費者建立信任,我們可能還未瀏覽就已經放棄體驗。相反,左圖中的設計會給人更舒適的視覺感受。

如何提高產品易用性?高手總結了3個層面!

② 減少認知負荷

認知負荷指的是用戶完成任意一件事情時,大腦所執行處理的總量。理論上來說,一個人面臨的選擇越多,做出決定所花費的時間就越長,所帶來的認知負荷就越大。減少認知負荷的方法有很多,《簡約至上》一書提出,讓交互簡單易用的 4 種策略:刪除、分層、隱藏、轉移。

  1. 刪除:刪除指的根據交互流程的每個節點,合理刪除不必要的內容。
  2. 分層:對內容按照一定的規律組織,該分組分組,該合并合并,把信息分成塊和單元來處理復雜問題,提高用戶認知效率。
  3. 隱藏:對內容進行高頻和低頻的拆分,強化高頻內容,對低頻內容進行合適的隱藏。
  4. 轉移:對復雜任務進行巧妙轉移,拆成好幾步來完成,讓每一步都容易理解。

舉例子:小宇宙 App 新戶信息收集頁,把 4 個問題分為了 4 個步驟,減少認知負荷,確保每一步都容易操作。

如何提高產品易用性?高手總結了3個層面!

③ 區分視覺權重

視覺權重是衡量事物吸引觀眾眼球的一個方法,在用戶不得不面對較多選項時, 對主要和次要的選項做視覺權重區分,做好設計上的歸類,能夠提升用戶做決定的效率。一般來說,用戶對權重的視覺規律呈以下特點。

  1. 尺寸越大,權重越大
  2. 形狀越規則,權重越大
  3. 垂直對象比水平對象權重大
  4. 立體對象比扁平對象權重大
  5. 色彩越飽和,權重越大
  6. 對比度越高,權重越大
  7. 有紋路比沒紋理權重大
  8. 陰影越大,權重越大
  9. 動態元素比靜態元素權重大

舉例子:餓了么 App 首頁金剛區通過大小、立體上的對比來區分視覺權重,傳達功能模塊的重要性。而盒馬 App 首頁金剛區則是通過大小、實物和矢量的對比區分視覺權重。

如何提高產品易用性?高手總結了3個層面!

④ 貼合用戶環境

不同的用戶和場景會影響表達的準確性。如果你的受眾是上了年紀或者有視覺障礙的人,你可以考慮采用大號字體來提升可讀性。如果你的受眾是紅綠色盲的特殊人群,最好不要使用紅綠色來做“正確”和“錯誤”提示的顏色。文案表達上也是如此,避免使用生僻或專業的術語。

舉例子:京東 App 貼合了不同用戶的購物場景,設計了 3 種不同的展示模式-標準模式;極簡模式;老年模式。標準模式下功能全面、信息豐富。極簡模式下布局簡單、購物便捷。老年模式下字大清晰、操作簡單。

如何提高產品易用性?高手總結了3個層面!

⑤ 表達一致性

一致性是產品設計最為基礎且重要的原則之一,表達一致性指的是在一個復雜功能集合的產品中,結構布局、圖標設計、顏色應用等需要保持一致。一致性會使人產生預期,當用戶預計到某物的表達方式,并且產品是按照預計的表達去呈現時,產品對于用戶來說就越易用。

舉例子:潮汐 App 詳情頁的表達元素中,圖片風格、框架結構、顏色配比、文字樣式均保持一致性,帶給用戶相同的表達感受。

如何提高產品易用性?高手總結了3個層面!

2. 行為層

行為層聚焦效率,效率的提升可以帶來直觀的易用性感受。用戶完成任務花費的時間越短,帶來的易用性感受就越強。具體可分為以下 6 點:選擇代替輸入、降低沉沒成本、減少重復過程、防止用戶犯錯、行為一致性、智能化引導。

① 選擇代替輸入

輸入的行為成本很高,特別是在復雜表單的錄入中。行為成本高意味著用戶完成一件事情需要付出更多的代價。你可以想象,10 道選擇題和 10 道填空題同樣放到你面前,你肯定會優先選擇 10 道選擇題進行錄入。選擇代替輸入的直接結果是提高錄入效率,所以在表單的設計中,對于可以選擇的輸入項,盡量避免用戶輸入。

舉例子:喜馬拉雅 App 在修改個人信息時,提供“一鍵同步微信”的選項,可以快捷帶入微信的頭像昵稱。智行 App 個人信息頁可以直接選擇性別標簽。

如何提高產品易用性?高手總結了3個層面!

② 降低沉沒成本

人們在進行某些行為決策時,不僅看這件事對自己有沒有好處,也看過去是不是已經在這件事情上有過投入。設計朋友們一定對“Control+S”印象深刻,在 PS 里辛辛苦苦畫了一天的圖,因為異常關閉導致文件丟失,這可能是 PS 帶給用戶最崩潰的事情。現在 ps 已經支持恢復異常關閉的文件,降低了可能發生的沉沒成本,大大的提高了產品的易用性。

舉例子:哈啰 App 在進行車主認證的時,會將已上傳的信息保留 14 天,用戶可先提交部分信息,降低沉沒成本。

如何提高產品易用性?高手總結了3個層面!

③ 減少重復過程

重復的行為是無效的,所有的用戶都不希望每次使用微信都要重新登錄一次。一般來講,用戶初次使用產品時,所需要填寫的信息是最多的,當用戶已經有了一定的行為時,設計者可以根據用戶已有的行為數據,減少重復過程來提高產品的易用性。常見方法有以下幾點:

  1. 保存用戶輸入信息,下一次自動補全。
  2. 把最常用的設為默認值或模板,這樣大多數人都無需更改設置。
  3. 為用戶提供“一鍵 XX” ”再次 XX"的快捷操作。

舉例子:貨拉拉 App 在發貨輸入的時候保存上次輸入的地址標簽,點擊地址標簽自動帶入,大大減少了用戶每次需要輸入的成本。12306 在登錄時會記錄已有的賬號信息,選擇對應號碼可以快捷登錄。

如何提高產品易用性?高手總結了3個層面!

④ 防止用戶犯錯

防錯不同與容錯,防錯原則認為大部分的意外都是由于設計的疏忽,而不是人為操作失誤,通過優化設計可以把失誤降到最低。即解決用戶錯誤的最好方法就是防止用戶犯錯。在交互設計中,經常通過自檢提示、視覺暗示、二次確認等方法防止用戶可能出現的錯誤。

舉例子:支付寶在登錄時輸入框無內容或輸入內容不完全時,注冊按鈕處于禁用的置灰狀態,通過視覺暗示防止用戶犯錯,在返回時,彈出彈窗,通過二次確認的方法防止用戶犯錯。

如何提高產品易用性?高手總結了3個層面!

⑤ 行為一致性

大腦是一臺識別模式的機器,它能把曾經做過的事情做得更好。在產品內有很多交互操作的邏輯本質是相同的,不用為這些相同的交互操作設計多種邏輯或方案。和表達一致性一樣,當用戶對某種行為有了一定預期后,就會期望產品按照預期的方式執行,一致的交互行為便可以提高用戶的易用感受。

舉例子:字節旗下的汽水音樂 App,切換歌曲的交互區別了傳統的音樂軟件,采用和抖音相同的交互模式,通過上滑完成切換,確保了行為的一致性。

如何提高產品易用性?高手總結了3個層面!

⑥ 基于行為的智能化引導

這是一種基于算法的易用性提升,在大數據、人工智能等技術支持下,產品具備的主動滿足人各種需求的屬性。當用戶對某個功能/內容做出一定的行為時,系統會根據用戶的行為做出一些引導。合適的引導不僅僅能夠提高產品的易用性,還能夠幫助產品取得更多轉化。

舉例子:咸魚 App 猜你喜歡模塊,根據歷史行為推薦相關的商品內容。小宇宙 App 根據用戶的收聽內容,推送相同愛好的聽眾也喜歡聽的其他播客。

如何提高產品易用性?高手總結了3個層面!

3. 心理層

心理層關注的是心智的構建。所有以人的感受為終端的本質上都是心理學,心理層次相對內容和行為層較為抽象,對易用性的提升并不會很直接,但了解一些易用性心理,能夠幫助我們更好的進行設計決策。

① 貼近心智模型

心智模型是存在于用戶頭腦中對一個產品應具有的概念和行為的知識。這種知識可能來源于用戶以前使用類似產品沉淀下來的經驗,或者是用戶根據使用該產品要達到的目標而對產品概念和行為的一種期望。簡單說,用戶在使用產品之前會根據過往的經驗對產品有一定的預期,我們做出的產品越符合用戶的預期,用戶就會感到越簡單、越易用。

《Adout face 4:交互設計精髓》一書中提出實現模型、心理模型、呈現模型的概念,可以很好的解釋用戶在試圖使用數字產品時到底發生了什么。其中,實現模型映射技術,心理模型映射用戶的愿景,呈現模型代表軟件的運行機制。

如何提高產品易用性?高手總結了3個層面!

如果把實現模型比作一個不規則的形狀,心理模型比作一個圓。那么呈現模型越趨于這個圓,用戶的易用性感受就越高,反之則越低。若想設計出貼合用戶心智的產品,常規的設計思路是要求設計者具備研究者的能力。在進行設計工作之前,進行大量的研究,包括用戶的行為習慣及使用場景,同過 Persona 和 Scenario 確定的大部分用戶場景。并系統化的把研究轉化為設計方案。

舉例子:windows 系統關閉網頁的操作大多在右上角,mac 系統的關閉是在左上角,這是兩種不同的實現模型。如果我們經常使用 windows 系統,養成了右上角關閉的心理模型,那么切換為 mac 電腦使用時,mac 的實現模型會和我們的心理模型有較大偏差,呈現模型就會較差,從而導致用戶會習慣性的犯錯。

如何提高產品易用性?高手總結了3個層面!

② 創造認知規律

人在識別物體時會尋找規律,發現規律有助于快速處理接收的感官信息,快速建立用戶心智。即使本無規律,人眼和大腦也會嘗試創造規律。也就是說,規律性越強的產品,對于用戶來說就越易用性就越強。

簡單來說,設計師設計產品時,需要有一定的規律來引導用戶,這樣可以幫助用戶更有效率更舒適地使用產品,另一個角度,產品設計應該有一定的控制度和局限性,不能讓用戶完全天馬行空地操作。如果產品設計沒有一定的規律,用戶就會自己創造規律,那時產生的用戶操作就會是設計師無法預知無法掌控的了。

相反,當用戶的大腦處理了某些規律時,與規律相悖的事物就會引起用戶的警覺。比如一個靜態頁面中出現某個動態的消息,一排灰色文字中出現某個帶顏色的文字等等。

舉例子:傳統的認知規律中,紅色的燈光具有警示性,產品設計中利用了這一認知規律,使用小紅點暗示新消息的提示。用戶在感官中接受到小紅點的信息后,會本能的認為有新消息的提示。

如何提高產品易用性?高手總結了3個層面!

三、總結

易用性感受是因人而異的,隨著互聯網行業的發展,人們對易用性的標準也在提高。身為設計師,我們要不斷洞察用戶的需求,在設計執行時,綜合利用以上策略,帶給用戶更優質的易用性感受。以上就是對提高產品易用性的分享,感謝大家耐心閱讀,筆芯~

收藏 91
點贊 49

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