一，簡介說明

原理表述：

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

實驗背景：

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

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

二，設計案例

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

應用案例1：Everest官方主頁

https://www.everest.agency

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

應用案例 2：潮汐 APP 首頁

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

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

應用案例 3：微信讀書 APP 發(fā)現頁

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

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

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

三，注意事項

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

注意點1：

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

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

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

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

反面案例1：

https://florianmonfrini.com

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

反面案例2：

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

注意點2：

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

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

在 Nielsen Norman Group 的文章he Aesthetic-Usability Effect[2]中，對更加細分的情況有具體的闡述，有興趣的可以去看一看。

四，總結

1，盡量將界面設計得好看，而不影響其可用性。

2，權衡之下可以犧牲輕微的可用性，而將頁面設計得更為美觀，需要依靠經驗來保持它們的平衡。

3，可用性測試過程中應留意測試者的反饋，從而消除「美即好用效應」的影響，覺察到真正需要改進的問題。

參考文獻

Kurosu, M., & Kashimura, K. (1995). Apparent Usability vs. Inherent Usability. Conference companion on Human factors in computing systems .

Kate, M. (2017). The Aesthetic-Usability Effect. online Available at https://www.nngroup.com/articles/aesthetic-usability-effect/(29/01/2017)

Abhishek, C. (2017), The Aesthetic-Usability Effect: Why beautiful-looking products are preferred over usable-but-not-beautiful ones. . online Available at https://medium.com/coffee-and-junk/design-psychology-aesthetic-usability-effect-494ed0f22571(04/10/2017)

原創(chuàng)： 酸梅干超人（ 超人的電話亭）