什麼樣的首頁設計才有好賣相?

網路使用者就像鯊魚一樣,一定要不斷往前游,否則就活不下去;他們永遠都在瀏覽,挖掘有趣的東西。

在這個現實下,你的產品如果沒有辦法立刻引起注意,並召喚使用者採取行動,就表示這個產品的賣相不是很好。技術很優秀,服務設想很週到,但就是沒人鳥;這是一件很枉然的事情。

這篇文章要介紹的就是提昇賣相的幾個好方法,而決勝點就在你的首頁(登入頁面?第一個頁面?反正你知道這是什麼意思) 

  • 立刻引起注意的簡明標題

這其實就是任何產品首頁最重要的特質。

一句清楚、有力,又能感動人的標題,讓使用者一秒就被抓著,然後想要再逛看看;當撰寫這個標題的時候,可以用下列問題評估這句話有沒有效:

  1. 對這個讀者而言,我們產品最重要的「好處」是什麼?
  2. 有沒有包含下面這四個 U:有用(Useful)、特別(Unique)、說明清楚(Ultra-specific),以及急迫性(Urgent)

說明好處,不要陳述功能

特別要注意的是,「好處」不等於「功能」,例如以下的例子:

產品:ipod 64GB。

功能:有 64GB 的儲存空間。

好處:可以在你口袋塞 10000 首歌,用它 party 一整夜。

在首頁,應該對使用者強調的是好處,因為這才是他們真正需要的。而且,下標可以是一件相當嚴肅的事情;事實上,就算是用整個團隊的精力去 brain storming,或是頻繁地分組測試(只為了一句標題),也在所不惜。

一句話說完

而對這個議題,UX Movement 則指出,如果要建立獨特的賣點,就要在一句話把重點講完。要容易閱讀,不要咬文嚼字的,讓讀者一眼就看出訴求是什麼;例如 coacademy 的例子:

圖片左邊是他們現有的標題,就是屬於咬文嚼字的那種。但事實上他們可以用一句話把事情說完,右邊的標題的確比左邊的簡單明瞭。

避免使用可以用在任何人身上的模糊形容詞

要描述你的網站其實可以有很多方式,但問題出在有些形容詞真的太廣泛了,誰都可以用,用這些形容詞不會讓你的網站特別有趣。不如使用更精準、獨特的詞描述你可以帶給使用者什麼好處。這能讓讀者對你能提供的東西有更清楚的印象,知道你的產品跟別人有什麼不一樣,進而想了解更多。 

sideTour 的網站就滿特別而有趣的,但是使用者卻沒有辦法從原本的標題中看出獨特的賣點是什麼。他們的標題使用太廣泛的形容詞,每個網站都可以用;不如仔細想想怎麼樣才最能形容你的產品,例如上圖,第二句會比第一句明確很多。

字體真的很重要

Oliver Reichenstein 早在 2006 年就提出了 網頁內容有 95%都是「typography」,字型排版學。

選一個好看的字體,以及畫出順眼的 layout 都可以大幅增加網站的賣相,即便只有簡單的字體、區塊與線條,仍然很好看。

例如 Onswipe 就用了一個優雅的字體達成獨特的賣點。這可以讓使用者感覺到產品是時尚而具有創意的。還有,這行字也相當清楚明確,搭配適合的字體使用,更為加分。值得注意的是,他們放的是 web font,而不是用圖,不但可以增強 SEO,也不會在跨裝置的時候產生解析度的問題。

關於選字與排版,可以參考下面這些來源:

20 個優雅的字體,幫助達成簡單明瞭的設計

30 個超級優雅的襯線字體

網頁排版:湯品 – 垂直的韻律

  • 首頁引發使用者行動的訊息(Call to action) 只能有一個

所有的內容,都有一個要讓使用者採取的動作,然後要確保使用者容易採取這個動作。

為了讓使用者順利完成動作,任何表單或連結上的按鈕都要非常清楚,要夠大、夠明顯;這同時也表示,首頁引發使用者行動的訊息(call-to-action)只能有一個,讓使用者接收一致的訊息,並且只執行一個動作。

分歧的訊息只會讓使用者混淆,然後讓他們開始考慮;而,讓使用者考慮要不要使用是最糟的情況,他們甚至會開始想:「我到底在這裡幹嘛」,並且打消剛剛下的購買決定。

  • 減少「摩擦」

除了要確保 call to action 的訊息有經過清楚包裝之外,減少「摩擦」也很重要;這意思是要設法免除使用者的一些焦慮。

可以思考到陌生頁面時,你通常會想什麼,例如:我真的需要這個東西嗎?這個對我有什麼好處?其他地方還有什麼東西可以按?還有誰會用這個?是真的有一家公司在經營這個嗎?他們會怎麼處理我的 email 帳號?他們會不會盜用我信用卡啊?

仔細思考這些疑慮,可以更幫助你跟使用者有效溝通。

使用者可能懷疑「我需不需要這個」或「這產品有什麼好處」,這個時候,就給他們實際的數據或有公信力的第三方證明,可以有效增進更深入的對話。至於信用卡相關的問題,給他們看安全措施、防詐騙措施,以及來自營運團隊的保證書等等,都會某些程度的降低使用者的焦慮。

(資料來源:QuoraUX Movement;圖片來源:Βethan, CC Licensed)