[譯] 扁平化的 UI 元素既樸實又玄乎

歐長坤發表於2017-09-19
UI

扁平化的 UI 元素既樸實又玄乎

摘要：扁平化介面通常伴隨著弱指示符（weak signifier）。通過在眼球追蹤試驗中比較不同類別的點選提示發現，具有弱指示符的 UI 元素比起具有強指示符（strong signifier）的 UI 元素來說，需要使用者耗費更多精力。

數字介面中扁平化設計的流行伴隨著與之相關的指示符（signifier）的缺失。許多現代 UI 已經被使用者依賴的那些用於理解什麼是可點選的明顯提示所破壞。

我們利用眼球追蹤實驗來記錄並視覺化使用者的眼睛在介面上的移動行為，研究了強點選性指示符（strong clickability signifier）（傳統的提示諸如下劃線、藍色字眼或臃腫的 3D 按鈕）、弱指示符（weak signifier）及零指示符（absent signifier）對使用者處理和理解網頁的影響。

研究描述

網頁作為刺激

影響使用者與介面互動的因素有很多。為了直接研究互動元素視覺處理中強、弱的和零指示符之間的區別，我們需要去除全部的混淆變數。

我們從實時網站中選取了九個 Web 頁面，並對它們進行了修改，建立了兩個幾乎完全相同的頁面，它們的佈局、內容和視覺風格完全一樣。這兩種版本的不同之處在於互動元素（按鈕、連結、標籤、滑動條）的強、弱和零指示符。

在某些情況下，這意味著要使用一個已經是扁平化設計的頁面，對其新增陰影、漸變及增加文字的深度，從而提升指示符點選性的強度。在其他情況下，我們使用的頁面已經有了傳統意義上的強指示符，併為其建立了一個極致扁平的版本。我們謹慎地認為，我們所提供的修改是合理且現實的。

酒店房間的某個具體頁面的兩個修改版本：具有強指示符的版本（左）包含了具有輕微 3D 樣式按鈕，而淡紫色的顏色只在互動元素上使用；而具有弱指示符的版本（右）則是扁平化的按鈕。

我們選擇的介面研究物件在大多數情況下都是相當不錯的設計，代表了網路上的諸多優秀網站。同時，我們打算隔離指示符豐富和指示符匱乏的介面之間的差異，而不是去評估這些站點的設計。

為此，我們選擇了來自六個不同領域的九個網站：

  • 電子商務（書店、太陽鏡零售店、高階珠寶店）
  • 非盈利
  • 賓館
  • 旅行（汽車租賃、航班搜尋引擎）
  • 科技
  • 金融

對於每一個刺激組，我們編寫了一個簡短的任務，用以將使用者的注意力引導到頁面上的一個特定的互動元素上。例如，對於酒店網站，任務是：「你會看到酒店網站上的某一頁。預訂這家酒店的房間。當你找到你要點選的地方時，請告訴我們。」

所有十八個頁面的設計和所有九個使用者任務的措辭均可以在這裡檢視。

方法

我們使用了眼球追蹤裝置和一臺桌面電腦進行了一次定量實驗。我們招募了 71 名普通的網路使用者來參與這個實驗。每個參與者被展示了九不同網站的兩個版本中的一個，並給出了相應的任務。當參與者看到他們想要點選完成任務的目標 UI 元素時，他們說「我找到了」並停止當前任務。

我們記錄了參與者在執行這些任務時的眼球運動。我們測量了每個頁面上的凝視次數（number of fixations）以及任務時間（當目光注視並停留在頁面上感興趣的地方時，記為一次凝視）。

這兩種方法都反映了使用者耗費的精力：完成任務的時間花費越多，處理的工作量就越高，任務也就越困難。此外，我們還通過疊加參與者在頁面上檢視最多的區域來建立視覺化的熱圖。

這個研究採用被試間設計（between-subjects design）（譯註：又稱組間設計，between-groups design），每個參與者只能看到每個頁面的一個版本。我們隨機分配到每個頁面的版本，以及參與者看到頁面的順序（請參考我們的課程瞭解更多關於使用者體驗度量的定量研究設計）。

所有的參與者都是在同一刺激下開始的實踐任務，從而確保他們在開始真正的任務之前能夠理解這些步驟。特別是在像這樣的定量研究中，使用練習來確保參與者理解任務步驟是一個好的想法（在開始真正的研究之前，最好進行試點測試（pilot testing），進而消除任何關於方法論的問題）。

這個試驗不是一項可用性研究。我們的目標是瞭解使用者如何處理單個頁面的設計以及他們如何更加容易地找到目標元素，而不是識別設計中的可用性問題（網站的可用性研究很少涉及到網站上的單一頁面；大多數情況下，參與者會被要求瀏覽整個網站來完成一個目標）。

結果

頁面上的凝視次數及時間

當我們比較了平均凝視次數和人們在每一頁上完成目標任務花費的平均時間，我們發現：

  • 在帶有弱指示符的版本上花費的平均時間比帶有強指示符的版本要高得多。參與者平均多花 22% 的時間（例如：完成任務的效能更差，花費的時間更長）來檢視帶有弱指示符的頁面。

  • 在具有弱指示符的版本中，平均凝視次數也要明顯高於帶有強指示符的版本。平均而言，人們在頁面上的凝視次數增加了 25%。

（以網站作為隨機因子實施配對 t 檢驗，兩個研究項結果顯著，p < 0.05。）

這意味著，當檢視帶有弱指示符的設計時，使用者花費更多的時間檢視頁面，他們必須檢視頁面上更多的元素。由於這個實驗使用了有針對性的可檢索性（findability）任務，花更多的時間和精力在頁面目標周圍進行瀏覽是不好的。這些發現並不意味著使用者更「專注於」頁面的互動。相反，它們暗示了參與者其實是在努力尋找他們想要的元素，或者表明了當他們第一次看到目標時的不確定。

22% 任務時間的增加，對於使用弱指示符的設計來說可能看起來很糟糕。但請記住，我們的度量標準反映了在尋找點選目標時所花費的時間。我們測量的任務非常具體，只代表了真實 Web 任務的一小部分。在常規的 Web 使用中，人們花費更多的時間在其他任務方面，比如閱讀頁面上的資訊。當你增加其他方面的時候，對於一個完整的任務花費時間的增加（比如買一雙新鞋）的通常會低於我們所測量的 22%。

另一方面，在採用弱指示符的設計中增加的點選不確定性，很可能有時會導致人們偶然地點選錯誤的東西 —— 這是我們在本研究中沒有進行測量的。從錯誤的點選中回過神來可以很容易地消耗更多的時間，尤其是因為使用者並不能總是馬上意識到他們的錯誤。除了浪費的時間之外，情緒影響所增加的點選不確定性和減少的使用者權力的是一個典型的使用者體驗設計損害品牌認知的例子。

熱圖

熱圖（heatmap）是一種量化的視覺化技術，它可以累計在刺激（也就是 UI）上的眼睛凝視數和持續時間。它們可以根據參與者的凝視資料建立出來，只要它們都屬於同樣的任務並接受相同的刺激。

基於所有參與者資料的熱圖傳達了與任務相關的頁面區域的重要資訊（前提是參與者的數量足夠多）。在我們的顏色編碼中，紅色區域是接收次數最多和時間最長的凝視區域。橙色、黃色和紫色區域受到的關注較少，沒有覆蓋顏色的區域沒有被測試參與者看到。

當比較每組頁面對的兩種版本（強指示符 vs. 弱指示符）時，我們發現頁面變成兩組：具有幾乎相同的使用者凝視模式的兩個版本的頁面、具有不同使用者凝視模式的頁面（如熱圖所示）。

具有不同使用者凝視模式的頁面對

在我們測試的頁面中，九對頁面對中的六對有不同的使用者凝視模式。除了指示符的強度之外，我們在給定的一對頁面中消除了頁面設計中所有的其他變化，因此我們可以得出結論，指示符改變了使用者在任務中處理頁面的方式。

當比較這六對頁面時，一個主要的差異出現了。具備弱指示符版本的頁面導致了整個頁面的凝視位置分佈更加廣泛：人們不得不檢視更多的內容。這一結果進一步印證了我們的發現：弱指示符需要更多的凝視次數和更多的凝視時間，而強指示符則不是。

我們從來沒有看過這種相反的模式：弱指示符版本比強指示符具有更廣泛的凝視分佈區域。

Priceline 的搜尋結果：強指示符版（左）顯示了凝視在目標元素之上（出發時間的滑動條）。弱指示符版（右）顯示了一個更大的「熱」區域，這表明在頁面中，凝視的分佈更加均勻。

這一差異表明，參與者必須思考具有弱指示符的版本中存在的更多潛在的互動元素。因為目標元素（連結、標籤、按鈕、滑動條）缺乏強大的、傳統意義上的標誌，它們沒有相同的能力來吸引參與者的注意力或信心。在大部分情況下，參與者都盯著目標元素，然後轉移到頁面上的其他元素上 —— 大概是因為他們沒有馬上意識到這是任務的解決方案。

Hertz 主頁：關閉目標標籤（檢視、修改、取消預訂）的強（左）和弱（右）指示符版本的區域性放大圖

Hertz 主頁的強指示符版本：參與者被要求取消他們在這一頁上的租車預訂。熱圖顯示了圍繞目標標籤的大多數凝視區域（如紅色區域所示）。

Hertz 主頁的弱指示符版本：除了關注目標標籤外，這個熱圖顯示了很多集中在頁尾連結、促銷專案以及在目標標籤附近的預訂表單上的其他專案。對頁面頁尾的關注增加尤其令人不安，因為這個訊號表明使用者已經變得非常絕望了。

在這六個網站中，有一個頁面對的圖片在熱圖上出現了天差地別。最初用於產生刺激的介面佈局是一個精緻珠寶網站的「之字型（zig-zag）」佈局。頁面佈局有三個部分，每個部分都有標題、短段文字、產品圖片和文字連結。

為了該頁面建立具有強指示符的版本，文字連結做了傳統的連結樣式的處理：藍色和下劃線的文字。為了建立弱指示符版本，我們從一種常用的極致扁平化設計策略中獲得靈感，並使文字連結與靜態文字完全相同。文字連結（段落下方）的放置位置在兩個刺激中都是相同的。

Brilliant Earth 的強指示符版本

參與者被要求在網站上尋找指定的珠寶首飾。預定的目標是在頁面底部的一個「Shop Pearl」連結。

Brilliant Earth：點選強指示符（左）和弱指示符（右）版本目標連結（圖中的 Shop Pearl）的區域性放大圖

Brilliant Earth：強指示符版（左）的熱圖顯示，參與者將注意力集中在感興趣的區域上，並將注意力集中在目標連結上。相比之下，弱指示符版（右）的熱圖顯示，儘管大多數的注意力都集中在珍珠珠寶部分，但它們主要集中在標題上，而不是目標連結上。

弱指示符版本顯示紅色區域主要位於頂部的主要導航區，頁面上的「3 Year: Pearl」標題也是如此。相比之下，在強指示符版本中，目標連結則獲得了更多的凝視數。當我們檢查單個參與者資料時，我們發現許多使用者（ 24 個參與者中的 9 個）在檢視弱指示符版本時候，看到在子標題就停止了，並且從未檢視過文字連結。他們相信，他們可以點選那個子標題去接觸珍珠首飾，而沒有繼續下去看這個連結。

在強指示符版中，86% 的參與者（ 29 名中有 25 名）首先關注標題，然後轉移到「Shop Pearl」目標連結上。在弱指示符版中，只有 50%（ 24 名中有 12 名）遵循這種模式（這種差異在統計學上是顯著的；p < 0.005）。類似靜態文字那樣的連結風格並沒有將使用者的視線從子標題往下吸引，相反傳統的連結風格則能夠做到。

具有幾乎相同使用者凝視模式的頁面對

九個網站中有三個在強指示符和指示符版本之間沒有區別。為什麼這三頁對幾乎是一樣的，而其他的六對卻有大量的差異呢?

下面這些答案為我們提供了一些有趣的資訊，這些資訊可以告訴我們在不破壞互動的情況下，扁平化 UI 什麼時候可以奏效。

眾多刺激對中的一種是將目標元素的內嵌文字連結作為刺激：淡紫色、無下劃線的連結 vs. 傳統的藍色、下劃線的連結。在這個對，弱指示符刺激的熱圖只顯示了包含目標連結的一段稍微更寬的凝視分佈。

Ally Bank 的刺激對：強指示符版本（左）使用下劃線、藍色文字連結，而弱指示符版本（右）使用紫色文字連結。

這表明，與普通文字相比，低對比度內嵌連結表明這可能是一個輕微的弱指示符，但不夠明顯。然而，在 Brilliant Earth 的例子中，如上圖所示缺乏對比色的連結有很大的影響。我們可以推測，存在一個對比度的序列：連結和文字之間的顏色對比度越強，使用者識別它們的機率就越高。如果我們在 Ally Bank 的弱指示符版本中使用了淺灰色的高光顏色，我們可能會期望看到在凝視模式上有更大的不同。只要在行內文字連結以一種對比色顯示，使用者就能識別他們的目的，即使沒有下劃線。

其他沒有明顯的熱圖差異的兩種刺激對，在弱指示符和強指示符的版本之間有一些共同的特徵，與其他刺激相比，它們：

  • 資訊密度低。這些頁面包含的內容相對較少，空白的地方也很大，這意味著即使是那些不太顯眼的東西也會脫穎而出，因為它們並沒有與其他頁面元素競爭。
  • 佈局傳統。元素（按鈕、連結、導航）位於標準位置，使用者通常也期望它們在那個位置。
  • 目標突出、且對比度高。目標元素與周圍的元素形成了鮮明的對比，並且有足夠的空間將它們與這些元素分開，使它們更加引人注目。

弱指示符增加了互動成本

我們希望我們的使用者擁有簡單、無縫和愉快的體驗。使用者需要能夠檢視頁面，並立即瞭解他們的選擇。他們需要能夠一眼看到他們想要的東西就馬上知道：「沒錯，就它了。」

但問題本身並不在於使用者永遠不會注意到那個帶有弱指示符的 UI 元素。真正的問題在於，即使當他們看到弱指示符時，他們也相信這不是他們想要的，所以他們會一直在看頁面的其他部分。

具有弱點選性的指示符的設計其實是在浪費使用者的時間：根據捕獲的熱圖顯示（平均凝視數、平均任務時間），人們在頁面上檢視更多的 UI 元素需要花費更多的時間。這些發現都表明，在使用弱指示符時，使用者所能感受到的網站給予他們的權力和判斷力更為匱乏。他們經歷的是其實是「點選的未知性」。

扁平化設計何時奏效

這些發現另一方面也證實了扁平化設計在某些條件下可以比其他的更好。正如我們在這個實驗中所看到的，當網站的資訊密度低、佈局較為傳統或一致，並將重要互動元素放置在周圍元素中時，弱指示符的潛在負面影響就會減少。

理想情況下，為了避免點選的未知性，三個標準都應該滿足，而不僅僅是一兩個。一個擁有大量潛在內容的站點，或者是全新的頁面佈局或模式，在採用極致扁平設計時應該小心謹慎。這些特性與我們在不破壞互動的情況下采用扁平化 UI 的建議相呼應。

注意，這些特徵同樣也是非常好的基本 UX 設計的最佳實踐：視覺簡單性、外部一致性、清晰的視覺層次結構及對比。一般來說，如果你有一個經驗豐富的 UX 團隊，他們關心使用者研究，你會比其他的產品團隊做得更好。如果你的設計已經很強大，那麼扁平化的設計所帶來的任何潛在的弱點都將被削弱。如果你正在進行常規的使用者研究，那麼在實現一個扁平 UI 時所犯的任何錯誤都將被識別和糾正。

研究的侷限性

為了從這個試驗中獲得可比較、可解釋的結果，我們必須讓使用者在單個頁面上做非常集中而且簡短的任務。但在實際生活中，使用者並不會這樣做。他們訪問你的網站時，不知道這個網站是什麼，也不知道這個網站是幹什麼的。他們使用頁面的導航訪問其他不同的頁面，並不知道他們能否會找到他們想要的東西，他們只是在探索這裡有些什麼選擇。

記住，可檢索性和可發現性（discoverability）是有區別的。在使用者關心尋找特定內容的情況下，強指示符是很有幫助的。在你關心使用者能否發現一個他們不知道的功能時，他們起到了決定性的作用。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章