一，簡(jiǎn)介說明

原理表述：

當(dāng)界面被設(shè)計(jì)得足夠美觀時(shí)，用戶往往會(huì)容忍一些較為輕微、影響較小的可用性問題。

實(shí)驗(yàn)背景：

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

注：文獻(xiàn)中的數(shù)據(jù)表明，表觀可用性的決定因素對(duì)真實(shí)可用性的影響系數(shù)大多在 0.000-0.310 之間，而界面美觀度這個(gè)數(shù)據(jù)達(dá)到了0.589。

二，設(shè)計(jì)案例

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

應(yīng)用案例1：Everest官方主頁(yè)

https://www.everest.agency

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

應(yīng)用案例 2：潮汐 APP 首頁(yè)

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

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

應(yīng)用案例 3：微信讀書 APP 發(fā)現(xiàn)頁(yè)

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

通過上面的案例，可能讀者會(huì)認(rèn)為交互和視覺似乎是對(duì)立的，設(shè)計(jì)師為了更美觀的界面就要降低用戶操作的效率。這種想法是錯(cuò)誤的，和交互一樣，良好的視覺設(shè)計(jì)也是體驗(yàn)的一部分，只是我們需要對(duì)具體的頁(yè)面進(jìn)行評(píng)估，強(qiáng)調(diào)視覺帶來的體驗(yàn)是否能超過犧牲掉的交互體驗(yàn)。

如果一味強(qiáng)調(diào)美觀性，以此作為設(shè)計(jì)的主旨，是得不償失的，不會(huì)帶來真正的進(jìn)步和提升，也不是 「美即好用效應(yīng)」的本意！

三，注意事項(xiàng)

了解完它的使用案例，我們?cè)倏纯丛摾碚撚心男?yīng)該注意的常見問題：

注意點(diǎn)1：

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

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

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

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

反面案例1：

https://florianmonfrini.com

比如上面這個(gè) Florian Monfrini 的網(wǎng)站，好看酷炫是沒錯(cuò)，但是強(qiáng)烈的前后景視差和后景縮放，形成了類似哈哈鏡的效果，對(duì)于一部分用戶來說會(huì)產(chǎn)生眩暈、不適的感受。

反面案例2：

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

注意點(diǎn)2：

用戶并不是忽略了這些問題，只是容忍，只是能夠接受。所以在可用性測(cè)試階段時(shí)，測(cè)試者同樣可能因?yàn)椤该兰春糜眯?yīng)」而容忍一些可用性問題，在反饋中忽略了這一部分的講述。

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

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

四，總結(jié)

1，盡量將界面設(shè)計(jì)得好看，而不影響其可用性。

2，權(quán)衡之下可以犧牲輕微的可用性，而將頁(yè)面設(shè)計(jì)得更為美觀，需要依靠經(jīng)驗(yàn)來保持它們的平衡。

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

參考文獻(xiàn)

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)： 酸梅干超人（ 超人的電話亭）