到了 2017 年,扁平設計已主宰網路,隨之而來的是介面被剝除了那些表明什麼可以點擊的提示:藍色加底線的連結、帶斜角的按鈕和陰影,讓位給幽靈按鈕和與正文難以區分的文字。業界以品味爭論這項取捨——設計師為簡潔外觀辯護,易用性專家憑軼事警告使用者正迷失方向,而雙方都沒有數據。

尼爾森諾曼集團(Nielsen Norman Group)進行了一項受控的眼動追蹤實驗,以測量取代意見。他們從六個網域——電子商務、非營利、飯店、旅遊、科技與金融——取來九個實際運作的頁面,為每個頁面製作兩個版本,兩者僅在提示強度上有所不同。71 名一般網路使用者被隨機分配到其中一個版本,任務是找出他們會點擊的位置,同時眼動追蹤設備記錄其注視與時間。

提示薄弱的頁面確實造成額外負擔:使用者在找到目標前多花了 22% 的時間、多做了 25% 的注視,且九組頁面中有六組呈現不同的凝視模式——注意力散布在整個頁面上,因為沒有任何東西看起來明確可點擊。在精緻珠寶頁面上,強提示版本有 86% 的使用者從區塊標題移向「選購珍珠」連結,而弱提示版本僅 50%,其中 24 名使用者有九名試圖點擊標題本身。

同樣有價值的是扁平設計奏效之處:三組頁面沒有差異,而它們共同具備低資訊密度、傳統版面與高對比目標。這項研究並未譴責扁平設計,而是指明它在何時是安全的。研究發表後引發足夠的討論,NN/g 因此發表了對批評的回應,而其發現也在往後數年成為該公司扁平設計指引的依據。

以測量平息品味之爭:配對頁面僅在可點擊性提示上不同,並以眼動追蹤觀察「找出按鈕」任務

配對頁面將除提示強度以外的每個設計變數都保持不變,因此一項實際頁面研究得以主張因果關係,而非僅是相關性。

注視與任務時間將一場美學爭論轉化為任何利害關係人都能比較的努力成本。

採用 71 名隨機分配使用者的受試者間設計,使差異具統計顯著性(p < 0.05)。

透過發表扁平頁面無害的情境,這項研究給了設計師可付諸行動的答案,而非一個會被忽視的裁決。

公開的熱區圖讓效果一目了然:薄弱的提示使注意力散布於頁面,這正是使用者四處尋找按鈕的特徵。

當一個產業以品味爭論時,將爭議變數隔離於配對之中並公布數字;爭論便會轉變為一個有明確條件的可修正問題。

這項研究成為 NN/g 最受爭議的文章之一:發表隔天它在 Hacker News 上獲得 354 點與 171 則留言,而 NN/g 自己的記述指出該文引發了「關於扁平設計的大量討論」,並以一篇已發表的批評回應作答。這些發現滋養了一個更廣泛的研究計畫——關於扁平設計何時可行的後續文章、長期暴露如何緩慢降低使用者效率,以及一個修正後的扁平美學需要什麼——將單一實驗轉化為設計師選擇視覺風格時持久的參考依據。

追溯依據

參考來源

  1. Flat UI Elements Attract Less Attention and Cause Uncertainty Nielsen Norman Group · nngroup.com ·
  2. Flat UI Elements Attract Less Attention and Cause Uncertainty — Hacker News discussion Hacker News · news.ycombinator.com ·