「我是誰?我在哪?」-怎麼設計出讓人不用懷疑自己的首頁

August 14, 2021

內附案例探討(以Hahow為例)

你是否曾經滿懷期待地使用某個網頁或App,然後發現不知如何找到自己想要的資訊或是不明白下一步是什麼?

本文會介紹三個讓頁面變得更加容易理解的設計原則。

透過應用這些原則,你的用戶可以更輕鬆地了解你的品牌價值與產品賣點。這意味著更低的跳出率、更高的銷售與更高的顧客忠誠

在文章後半,我也會以 Hahow 的首頁 為例,探討在設計時如何實際應用這些設計原則。

1. 簡單直接,先說重點

一份2014的研究表示,平均的用戶只會花費15秒在一個頁面上。

給個參照 - 2014 是 iPhone 6 發行的年份

用戶都是很不耐煩的。如果頁面中的訊息太多,讓他們需要額外動腦或手指,都可以讓他們一去不回。

因此在設計時,盡量減少訊息量與視覺負擔。一份Google的研究表示,越簡潔的頁面用戶覺得越好看,而建立這個印象只需要 0.05 秒。

使用的文字也盡量簡單好懂。在Google的電商UX建議手冊中,「清楚」、「直接描述」等字眼出現了17次以上。

最後,請確保最重要的訊息(如CTA 按鈕)保持在第一個畫面中最顯眼的位置,這樣的設計可以讓用戶清楚明白下一步是什麼。


2. 你各位呀,不要標新立異

Source: PictureQuotes

用戶不僅沒有耐心,也不喜歡看到不熟悉的東西,因為他們需要動腦學習這些新事物。

這代表在設計裡標新立異通常不是好點子。

在UX設計中,我們傾向不打破常見的設計模式。這就是為什麼你會看到100個網站 logo 都在頁面左上、登入按鈕在右上、放大鏡提示搜尋、三條線代表菜單。

這並不是因為我們不願意動腦,而是因為這些常見的設計可以減少用戶的學習成本,讓他們留有更多心力去理解網站的主要內容。

上一個段落出現過的 Google 研究也表明,用戶不約而同地認為樣子越是經典(沒創意)的網站越是好看。因此,讓大家都輕鬆點,不要標新立異。

3. 設計清晰的視覺層級

視覺層級是利用元素的顏色、粗細、大小等屬性,提示用戶元素間的隸屬關係以及重要程度。

清晰的視覺層級可以讓用戶一眼看到重要的內容,並了解內容之間的關係,這降低了心理負擔、引導了他們的視線,讓整個瀏覽體驗變得輕鬆寫意。

關於如何利用視覺元素創造視覺層級可以參考這篇文章

Source: Key Principles of Visual Hierarchy in UX Design

案例探討 — Hahow 好學校的首頁

為了演示,我使用了 Hahow 的首頁為例,提出修改建議並做了改良提案。文中的設計截圖於 2021.08.08,你看到本文的時候可能已經長得不一樣了。

基本介紹

Hahow 是台灣的線上課程平台,於2015年創立。平台上有超過600門不同領域的課程,不乏設計、數位、程式開發等。擁有超過50萬名會員。

現行設計


這個版本給我的第一印象是干擾過多且視覺層級不清晰,不知道應該著眼於何處。我也發現在內容上有些令人困惑的地方。經過研究之後,我將發現的問題整理如下。

如何改良?

在確定問題之後,我的主要改動包含以下幾點:

  1. 整理導覽列,讓選項排列更合理、呈現更有重點。我也新增了熱門分類以刺激探索。
  2. 在導覽列中突出搜尋與註冊,刺激用戶搜尋以及與成為會員。
  3. 調整主要 CTA 區域的視覺層級。增加按鈕、凸顯CTA、弱化點綴性元素,並同時以插圖與字級引導視線走向。
  4. 調整價值主張區(原學無止境……等三塊內容)的文案與呈現方式,方便用戶理解平台的特點。

修改完成之後效果如下。如果是用電腦的話,也可以參考我的 Figma Presentation(建議),裡面有更詳盡的探討:

結語

本文探討了三個在設計頁面時,讓頁面清楚易懂的設計原則,包含:

  1. 簡單直接,先說重點
  2. 盡量使用常見的設計模式
  3. 設計清晰的視覺層級

希望這些資訊可以幫助你設計出更好的首頁體驗。另外,這些原則其實並不僅限於首頁設計,在所有的著陸頁(Landing Page)設計上都應該被重視。