[UX設計案例] 利用 3 個設計原則,優化你的頁面著陸體驗

Photo by Elsa Tonkinwise on Unsplash

本文介紹 3 著陸頁面(如首頁)變得更加容易理解的 UX 設計原則。

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

在文章後半,我也會以 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萬名會員。

現行設計

首頁現況 (2021.08.08)

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

建議標注圖一
建議標注圖二

如何改良?

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

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

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

強調主要 CTA 、調整了導航與價值主張,引導視覺與操作
左為原版,右為修改版

結語

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

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

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

--

--

--

UX Designer @ EyeBuyDirect, SH China. Follow me on Instagram 👉 https://www.instagram.com/feifan.design/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
鄭斐凡 Ian Zheng | UX & Product Design

鄭斐凡 Ian Zheng | UX & Product Design

UX Designer @ EyeBuyDirect, SH China. Follow me on Instagram 👉 https://www.instagram.com/feifan.design/

More from Medium

Smart Mask Collector

Calendars 🗓 started filling up, emails 📧, chats and not to forget the meetings :)

When the new quarter starts

5 tips for a Sustainable Digital Design

Is Visual Hierarchy the secret ingredient of Design?

Is Visual Hierarchy the secret ingredient of Design? (banner)