[含實際案例] 用 3 個UX設計原則減少頁面跳出率
本文會介紹 3 個讓頁面變得更加容易理解的設計原則，讓你降低跳出率、提升銷售與顧客滿意度。
1. 簡單直接，先說重點
一份2014的研究表示，平均的用戶只會花費15秒在一個頁面上。
用戶都是很不耐煩的。如果頁面中的訊息太多，讓他們需要額外動腦或手指，都可以讓他們一去不回。
因此在設計時，盡量減少訊息量與視覺負擔。一份Google的研究表示，越簡潔的頁面用戶覺得越好看，而建立這個印象只需要 0.05 秒。
使用的文字也盡量簡單好懂。在Google的電商UX建議手冊中，「清楚」、「直接描述」等字眼出現了17次以上。
最後，請確保最重要的訊息（如CTA 按鈕）保持在第一個畫面中最顯眼的位置，這樣的設計可以讓用戶清楚明白下一步是什麼。
2. 你各位呀，不要標新立異
用戶不僅沒有耐心，也不喜歡看到不熟悉的東西，因為他們需要動腦學習這些新事物。
這代表在設計裡標新立異通常不是好點子。
在UX設計中，我們傾向不打破常見的設計模式。這就是為什麼你會看到100個網站 logo 都在頁面左上、登入按鈕在右上、放大鏡提示搜尋、三條線代表菜單。
這並不是因為我們不願意動腦，而是因為這些常見的設計可以減少用戶的學習成本，讓他們留有更多心力去理解網站的主要內容。
上一個段落出現過的 Google 研究也表明，用戶不約而同地認為樣子越是經典（沒創意）的網站越是好看。因此，讓大家都輕鬆點，不要標新立異。
3. 設計清晰的視覺層級
視覺層級是利用元素的顏色、粗細、大小等屬性，提示用戶元素間的隸屬關係以及重要程度。
清晰的視覺層級可以讓用戶一眼看到重要的內容，並了解內容之間的關係，這降低了心理負擔、引導了他們的視線，讓整個瀏覽體驗變得輕鬆寫意。
關於如何利用視覺元素創造視覺層級可以參考以下這篇文章。
案例探討 — Hahow 好學校的首頁
為了演示，我使用了 Hahow 的首頁為例，提出修改建議並做了改良提案。文中的設計截圖於 2021.08.08，你看到本文的時候可能已經長得不一樣了。
🌻 聲明：在每個實際設計案中，背後都有千萬個考量因素。作為局外人不知曉也不受制於這些，因此事後諸葛是容易許多許多的。每個為好設計努力的設計師都值得被尊重與敬佩。基本介紹
Hahow 是台灣的線上課程平台，於2015年創立。平台上有超過600門不同領域的課程，不乏設計、數位、程式開發等。擁有超過50萬名會員。
現行設計
這個版本給我的第一印象是干擾過多且視覺層級不清晰，不知道應該著眼於何處。我也發現在內容上有些令人困惑的地方。經過研究之後，我將發現的問題整理如下。
如何改良？
在確定問題之後，我的主要改動包含以下幾點：
- 整理導覽列，讓選項排列更合理、呈現更有重點。我也新增了熱門分類以刺激探索。
- 在導覽列中突出搜尋與註冊，刺激用戶搜尋以及與成為會員。
- 調整主要 CTA 區域的視覺層級。增加按鈕、凸顯CTA、弱化點綴性元素，並同時以插圖與字級引導視線走向。
- 調整價值主張區（原學無止境……等三塊內容）的文案與呈現方式，方便用戶理解平台的特點。
修改完成之後效果如下。如果是用電腦的話，也可以參考我的 Figma Presentation(建議)，裡面有更詳盡的探討：
結語
本文探討了三個在設計頁面時，讓頁面清楚易懂的設計原則，包含：
- 簡單直接，先說重點
- 盡量使用常見的設計模式
- 設計清晰的視覺層級
希望這些資訊可以幫助你設計出更好的首頁體驗。另外，這些原則其實並不僅限於首頁設計，在所有的著陸頁(Landing Page)設計上都應該被重視。
鄭斐凡 Ian Zheng | UX & Product Design
謝謝你閱讀到這裡。如果喜歡我的文章，請拍手、追蹤或是訂閱我的Medium。也別忘了在 Youtube 或 Instagram 上追蹤我，我會定期以簡單的方式分享 UX設計與產品管理的相關工具與技巧。
