掌握這三個要素,打造Wonderland一般的Landing Page

Daily UI #003|Landing Page

最近開始了DailyUI Challenge,已經做完#001 Sign Up Page和#002 Credit Card Checkout Page,現在以龜速進行到#003 Landing Page。我在挑戰開始之前喜歡先蒐集資料、進行統整,再去找相關案例(實際上線的網站或app),最後才是手稿跟實作,完全沒辦法以Daily的速率去挑戰⋯⋯。

這次也是找了不少有關Landing Page的資源來看,它應該具備哪些元素?設計上有哪些眉角?若是跟我一樣毫無頭緒的人,這篇文章或許可以給你一點方向,那就讓我們開始吧!


什麼是 Landing Page

中文有人翻譯成「著陸頁」或「到達頁」,它是一個單頁的網頁,主要目的是為了讓瀏覽網頁的使用者採取特定的「行動」(註冊帳號、下載手冊或電子書、購買商品或服務⋯⋯),簡單來說,就是透過Landing Page將使用者「轉換」為忠實用戶或顧客。

這個網站蒐集了不少優秀的Landing Page設計案例
這篇文章解析了目前的Langing Page設計趨勢

什麼是 above the fold

「fold」的原意是指報紙摺疊後可視的部分,人們會依據這個區域的內容決定要不要購買。而在UI/UX設計裡的「fold」就是在不滾動螢幕的情況下,可以被使用者看到的畫面。

「fold」的原意(source)
「fold」的引申意(source)

NNGroup曾經做過一個研究,結果指出使用者會花費約80%的時間停留在「above the fold」區域,而停留在「below the fold」區域的時間僅有20%。所以「above the fold」的空間非常珍貴,必須明確指出網站的核心價值、提供的商品或服務,吸引使用者繼續瀏覽網站。

延伸閱讀:
What’s “Above the Fold” in the Best User Interface Web Designs
Fold or Scroll: Above and Beyond the Web Design Myth

Landing Page 的三大要素

若能確實掌握這三個要素,也能把Landing Page打造為Wonderland!

文案:具有吸引力和說服力、簡單卻又精確

文案就是具有影響力的文字,可以利用簡單精確的語言吸引使用者,讓使用者在不自覺的情況下被說服,採取特定行動。(雖然我不懂得怎麼寫出好文案,可是很會被好文案給魅惑啊啊啊⋯⋯清醒的時候錢包已經空一半了)

Landing Page裡最重要的兩行字:

  1. 主標:第一眼抓住使用者的文字
  2. 副標:進一步詮釋內容

在下筆以前,可以先思考下列四個問題:

  1. 你的主要目標客群是誰
  2. 他們習慣用什麼樣的語言和文字
  3. 你能提供什麼樣的價值或利益
  4. 為什麼你的主要目標客群要為你所提供的服務或商品買單
下列網站有不少寫作文案的要領和案例

首圖(Hero Image):轉換成敗就在它

網頁首圖是使用者對網站的第一印象,利用視覺去加強文案所要傳達的訊息,轉換率的好壞就看它了!網頁首圖不限定於圖片的形式,也可以運用一段影片做呈現,或者是插圖、手繪元素。一個共通的設計大方向是:移除不必要的元素、減少色系使用、精準傳遞資訊

下列文章提供幾個在挑選網頁首圖時的要點
  1. 跟產品和服務具有直接的相關性(一眼就讓使用者明白你提供的內容)
  2. 情感連結、氣氛營造(給予使用者正向的感受)
  3. 高像素品質圖片
  4. CTA才是主體,不要喧賓奪主(可以運用圖片視線方向導引到CTA上)
  5. 和標題文字有對比度,使文字有高度可讀性(這裡有幾個CSS實例
  6. 考量在不同螢幕尺寸下的圖片呈現效果

行為召喚(CTA):強而有力、顯而易見

希望使用者去採取特定行動的行為就叫做CTA(Call To Action)。CTA會經過位置、尺寸、顏色等設計,引導使用者實際採取行動,注意這裡說的是「引導」而非「要求」或「呼籲」,因為CTA的最終目標是要讓使用者「自己想要採取行動」。成功的CTA可以突出廣告的效果,且引發潛在的客群。

這篇文章非常清楚地解釋CTA的定義
這篇文章介紹了CTA的手法和案例
延伸閱讀:
提高轉換率!Call to Action 按鈕的最佳實踐與技巧
如何提高Call to Actions (CTA) 的效能?

案例分析

在瀏覽數十個網站以後,根據三個要素綜合評比,我選擇了三個我最喜歡的Landing Page設計:)

Survey Cake

參考網站
  1. 主標:直接破題主打服務為何
  2. 副標:帶入品牌名稱,進一步說明服務內容
  3. CTA:利用「免費」的字眼吸引使用者,和背景有高度對比性
  4. 首圖:雙手擺放的位置和方向讓使用者的視線可以聚焦在重要內容上
  5. 「無限流量+終身免費,酷吧」用輕鬆的語氣傳遞品牌價值訊息
  6. 下方有大企業的使用見證,是很好的社會認同(social proof)元素

Apple Music

參考網站
  1. 主標:直接來一個品牌名稱
  2. 副標:三個字的強大文案⋯⋯「樂」具有趣、快、音等多重含義
  3. CTA:利用「免額外付費」和「試用三個月」吸引使用者
  4. 首圖:手機朝向的方向將視線自然帶往重要內容,背景使用景深增加對比

Typeform

參考網站
  1. 主標:好喜歡這個文案!告別舊形式的表單,跟Typeform說嗨囉~
  2. CTA:利用「free」吸引使用者開始利用Typeform製作表單
  3. 首圖:將重要內容放置在中央,不同螢幕尺寸也說明表單運用RWD設計
  4. 首圖運用gif圖片動態展示填寫表單時的實際狀況,有更佳的視覺效果
  5. 手機版的CTA和電腦版不同,移至導覽列上方

關於本篇文章有任何想法或建議都歡迎跟我分享噢!
參考文章:
打造最強Landing Page,讀這一篇就夠了!