簡介說明

1. 原理表述

當界面被設計得足夠美觀時,用戶往往會容忍一些較為輕微、影響較小的可用性問題。

2. 實驗背景

1995 年,日立設計中心的研究員 Massaki Kurosu 和 Kaori Kashimura 通過 26 種不同的 ATM 交互界面對 252 位參與者進行詳細的用戶體驗測試,并對界面中表觀可用性的決定因素(比如數字鍵布局、操作流程等)進行了評估。結果發現,這些因素中很大一部分對真實可用性的影響微乎其微,反而界面美觀度對真實可用性的影響出乎預料的大。

注:文獻中的數據表明,表觀可用性的決定因素對真實可用性的影響系數大多在 0.000-0.310 之間,而界面美觀度這個數據達到了 0.589。

設計案例

從正面影響來說,將界面設計得足夠美觀,其作用是毋庸質疑的,每個設計師都應該朝著這個方向不斷努力,用戶對好看的界面中一些輕微的可用性問題會相當寬容。

應用案例?1:Everest 官方主頁

https://www.everest.agency

頁面中項目列表的滾動使用了一種極其酷炫的方式,動畫自然流暢不拖沓,雖然整個頁面利用率和操作效率沒有比直接展示在一個列表中的好,但是使用者的感覺依然非常好。

應用案例?2:潮汐 APP 首頁

潮汐將四個功能劃分成了兩個模塊,并且下方模塊使用左右滾動的形式隱藏了一部分,對用戶來說操作成本是增加的。我們完全可以使用右側的方式,將功能模塊排列出來,讓操作更簡潔。

但是為了界面的美觀度,增加功能視覺上的層次感,采取左右滾動的卡片形式是不會造成用戶的反感的。

應用案例 3:微信讀書 APP 發現頁

首頁使用橫向滑動的卡片,一屏一張卡片一個主題,相比較其他讀書類 APP(比如起點、京東讀書)而言,這種界面的組織方式瀏覽效率不高,且浪費大量屏幕空間,但簡潔、優雅的設計,就有了讓我們多花一點耐心和操作成本看下去的欲望。

通過上面的案例,可能讀者會認為交互和視覺似乎是對立的,設計師為了更美觀的界面就要降低用戶操作的效率。這種想法是錯誤的,和交互一樣,良好的視覺設計也是體驗的一部分,只是我們需要對具體的頁面進行評估,強調視覺帶來的體驗是否能超過犧牲掉的交互體驗。

如果一味強調美觀性,以此作為設計的主旨,是得不償失的,不會帶來真正的進步和提升,也不是 「美即好用效應」的本意。

注意事項

了解完它的使用案例,我們再看看該理論有哪些應該注意的常見問題。

注意點 1:

「美即好用」并不意味著一味追求界面好看,設計者應極力避免設計出好用但丑、美卻難用這兩種極端的界面,無論是哪一種對用戶的吸引力都會大打折扣。

好用但丑的界面不用多說,我們作為設計師最終的目的就是消滅丑陋。丑的界面即便沒有任何可用性問題,依然會引起用戶的爭論和差評。比如下面這個安卓應用 Fui 的界面和具有類似功能的 VOUN 相比較:

即使兩者界面的結構幾乎一樣,交互也差不太多,但是 Fui 界面粗糙,所以看起來 Fui 更難用,更不討喜。

美卻難用,這是我們更容易進入的極端──追求極致的美而大幅忽略可用性。用戶對可用性極其敏感,即便他們自己可能還沒有意識到這一點,但他們會用行動證明,再好看的界面,太難用就手動再見。

反面案例 1:

https://florianmonfrini.com

比如上面這個 Florian Monfrini 的網站,好看酷炫是沒錯,但是強烈的前后景視差和后景縮放,形成了類似哈哈鏡的效果,對于一部分用戶來說會產生眩暈、不適的感受。

反面案例 2:

再比如這個名為 Vantage 的日歷類應用,在交互和視覺上都做出了比較極致的個性,看起來很酷炫但實際使用起來略感無奈,多了很多不必要的視覺壓力和操作成本,無法有效地將視覺焦點集中在想要看到的日程日期上,它用行動解釋了什么叫 「用力太猛,過猶不及」。

注意點 2:

用戶并不是忽略了這些問題,只是容忍,只是能夠接受。所以在可用性測試階段時,測試者同樣可能因為「美即好用效應」而容忍一些可用性問題,在反饋中忽略了這一部分的講述。

如何在測試過程中發現那些被測試者「隱藏」起來的可用性問題,簡單來說,一旦測試者答非所問,反饋的主要點都在「界面好看」上面,那么測試主持者就需要更加謹慎,這意味著「美即好用效應」可能正在發揮作用,有些問題測試者并沒有反饋出來。

在 Nielsen Norman Group 的文章《The Aesthetic-Usability Effect》「2」中,對更加細分的情況有具體的闡述,有興趣的可以去看一看。

總結

  • 盡量將界面設計得好看,而不影響其可用性。
  • 權衡之下可以犧牲輕微的可用性,而將頁面設計得更為美觀,需要依靠經驗來保持它們的平衡。
  • 可用性測試過程中應留意測試者的反饋,從而消除「美即好用效應」的影響,覺察到真正需要改進的問題。

參考文獻

  1. 《Apparent Usability vs. Inherent Usability. Conference companion on Human factors in computing systems》Kurosu, M. & Kashimura, K. (1995)
  2. 《The Aesthetic-Usability Effect》?Kate, M. (2017)
  3. 《The Aesthetic-Usability Effect: Why beautiful-looking products are preferred over usable-but-not-beautiful ones》?Abhishek, C. (2017)

歡迎關注作者的微信公眾號:「超人的電話亭」

點贊 6
收藏 101
繼續閱讀相關文章

發表評論 已發布 5

還可以輸入 800 個字
 
 
載入中....
5 收藏