[含實際案例] 用 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設計與產品管理的相關工具與技巧。