網頁設計Checklist:10個網站首頁必備的內容元素

你沒有第二次機會為你的網站打造第一印象!你的網站首頁是你的網頁設計中最重要的頁面,通常它也是帶來最高流量的頁面,而要如何讓造訪你的網站的使用者,對你留下深刻的印象,一目瞭然你在做什麼,甚至留下他們的聯絡方式,最後還成為你的客戶?

 

這 10 個網站首頁必備的內容元素你都做到了嗎?這篇讓你好好對照檢查自己的網站

你必須在三秒內告訴瀏覽你的網站的使用者,你在做些什麼。你的大標題可能只有簡短的幾個字,但是它將會是在你的整個網站裡最重要的一個環節。因此你必須要盡可能用最短的字,吸引使用者的目光。

2. 次標題

次標題則是進一步針對你所要提供的商品或服務做簡短的說明,最好是能夠為主要目標的痛點,提供解決的方式。

3. 主要的CTA

首頁最重要的目的就是要讓造訪網頁的人對你留下深刻的印象,甚至成為你的長青客戶,因此除了主要標題、次標題之外,你還要有一個明確的行動呼籲(call to action, CTA),讓人們可以明顯採取「下一步」,進而有機會獲取更多與瀏覽者相關的資訊,甚至是他的 email。比如 Buzzsumo 是一個專門研究現在議題熱門程度的網站,一進去網站頁面就告訴你,他們幫助你尋找最熱門的議題、或是競爭對手的網頁中什麼文章是最熱門的。除此之外他還能夠協助你找到意見領袖,讓你能夠推廣你的優質內容。

 

不過因為它是搜尋的功能,所以它的CTA呈現的方式是邀請你輸入一個主題或是網址來分析內容。

4. 意象圖片

透過清楚明瞭的簡易圖片,可以輔助說明你的產品或服務,讓人們只要透過圖像就能直覺地想到你所販賣的商品或服務。而最好的圖片是能激起使用者的情緒,讓他們能夠有所行動。

 

從 Slack 這個通訊軟體的首頁你可以重新再將上述重要的 3 點回顧一次。

 

  • 大標題:Where Work Happens 說明在哪裡使用
  • 次要內容:When your team needs to kick off a project, hire a new employee, deploy some code, … 說明適用的場合
  • 主要 CTA:(Get Started)邀請使用者開始使用

 

而透過左手邊的意象圖,你可以在還沒有看到文字的時候,先瞭解到它可能是一個與文件、報表、辦公溝通相關的工具。

 

又或者像是 Uber 的官方網站,點進去是簡單的標題和一個人在開車的樣子,就和他所提供的服務相符,讓人們可以在看到圖片的時候知道 Uber 是跟車子、或是一個人在開車有相關連。

5. 好處

除了在上一個階段對造訪者做簡短的「自我介紹」之外,更重要的是,你要讓使用者更進一步了解你,能為他們帶來什麼樣的好處,為什麼要選擇你們家的產品或服務而不選擇其他品牌或廠商。

 

繼續沿用剛剛 Uber 的例子,在第一個階段和使用者擁有簡單的接觸之後,接續就是告訴使用者選搭 Uber 的好處。比如上車之後司機就會知道你要抵達的目的地,不需要掏錢包就可以下車,不需要事前預約,隨時隨地提供服務,並且提供各種款式的車型。

 

而國內的 TaxiGo 則是主打合作的司機都是經過嚴格的評估和挑選,避免乘客叫了車可是搭到素質較不優的司機。此外,他們強調在完成搭乘後,乘客可以對司機評分,提供意見回饋。最後則是搭乘的安全性,能讓乘客在車上的每一刻都知道司機的 GPS 和旅程資料,並且可以分享給親友隨時追蹤。

 

雖然 Uber 和 TaxiGo 都是叫車服務,不過在網站首頁的介紹就可以看到二者鎖定的族群不大一樣,可能 Uber 是想要招攬商務行旅客、而 TaxiGo 則強調優質服務品質跟評分回饋。

 

 

因此在好處的這塊,你要思考的是,儘管你與競爭對手賣的假設都是同一類型的商品,但你要針對哪一種最主要的族群下手?對你的哪一類 TA 說話?

 

或是你也可以像 Dropbox 這樣,是透過不同的顏色板塊,每一個板塊做好處的說明。但建議顏色不要那麼多、盡量以簡單清楚為主,不然顏色太多的話,使用者可能也沒有耐心讀完那些花花綠綠的內容。

6. 推薦證言、實際案例

要讓初次造訪你的網站的使用者或者是重複瀏覽的使用者加深對你的信任,就是透過使用者見證、實際的案例分享,圖文並茂地為你的產品或服務背書。

 

hahow 好學校是一個線上課程募資的平台,在首頁的最下方你可以看到「學生的滿分回饋」。根據不同的課程內容,有不同的使用者回饋見證,為 hahow 這個平台背書,讓使用者信任能夠在 hahow 募資的課程,或是推薦的課程,本質上都是經過 hahow 嚴格把關且精挑細選過的。

 

又如 TransBiz 的服務項目以協助品牌跨境美國或是 Amazon 銷售為主,但想要做美國跨境的廠商要怎麼能夠相信 TransBiz 有能力協助他們打造品牌、成功在海外帶動銷量?以實際的服務案例與成果與潛在的 TA 對話,可以增強 TransBiz 的專業感和實踐力。

 

另外像是許多做電商會使用的平台媒介 Shopify 也在它們的首頁中間加入了使用者見證,為想要使用 Shopify 架自營電商官網的使用者添增信心。

7. 網站使用導覽

什麼是網站使用導覽呢?

 

就是使用者到你的網站之後,他要如何更進一步認識你、了解你、怎麼與你聯絡、你的商品或服務頁面在哪裡等這些資訊。一般來說常見的會包括:關於我們、聯絡我們、產品種類/服務介紹、常見疑問。

 

大型連鎖知名傢具 IKEA 在台灣的首頁網站導覽則是這樣設計:找產品、找空間、找新品及優惠、找靈感。

 

在 2017 年 5 月以前,IKEA 在台灣是沒有開放線上購物功能的,後來率先於中台灣開放,在 2017 年的年末才陸續在全台灣開放線上購物功能。因此網站導覽目前主要還是搜尋功能為重,「找 xx」,當使用者點選「線上購物」時,才會看到專為線上購物設計的頁面內容。

 

但若是偏向軟體類的網站或是應用程式工具,網站導覽的方式則比較不同,通常會有預約實際使用的簡短會議、價格這兩個 TA 使用者最關心的內容(怎麼用?多少錢)。

8. 懶人包下載處

為了要獲得使用者更進一步的聯絡方式,你可以使用一些方法讓訪客留下他們的資訊。以內容為主或是B2B的網站可能就是提供資訊的懶人包,讓使用者覺得你是很專業的,或者是讓他們能夠透過這個懶人包在短時間內了解你能為他們帶來什麼樣的好處或是價值。

 

而除了獲取他們的 email 之外,你也可以搭配 Chatbot 建立一個對話訊息的群組,讓首次和你的網站有所互動的使用者,可以持續接收你的實惠資訊。

 

以 TransBiz 自身為例,網站有「免費資源」區,讓對 Amazon 銷售或是數位行銷學習以興趣的訪客留下他們的 email,以獲得電子書的下載連結,後續也還會寄送 2~3 封的電子郵件,指引使用者到網站的其他部分對 TransBiz 有更進一步的了解。

 

假設你是一個賣傢俱的廠商,想要獲取潛在零售商的資料或是小型店家販售的資料,那麼你就要思考,什麼樣的內容可能會是零售業者想要知道的,或是他們通常會在網路上做什麼類型資訊的搜集,而你的網站可以在短短兩頁 pdf 的內容裡整理出他們會想要的內容,透過 email 或是留言。

9. 主要服務項目

除了列出能夠為使用者帶來的好處之外,你也可以列出你的主要服務項目內容,特別是軟體的網站,你可以顯示不同的服務方案之價格比較,或者是你希望使用者多造訪的商品型錄,讓使用者初訪你的網站首頁時就可以對你有更深層的認識,進而點選其他頁面再進一步了解你。

 

協助建立電商網站平台的 Shopify(又出現了!),在網站首頁的下方寫出了 Shopify 更細節的功能內容,讓想要使用 Shopify 作為自營電商網站的使用者,可以在首頁就對 Shopify 有更進一步的了解,同時也能增加停留在網站的時間。

10. 額外的資訊

訪客通常不會在第一次造訪你的網站的時候就成為你的顧客,因此你要打造一些讓使用者能夠發掘更多資訊的地方,比如說「最新文章」、「最新產品」、「最新發表」,或是下面的 Banner 要很清楚補足在首頁大區塊未完整呈現的部分。

 

下面這個例子就是蒐集 email 的協助工具 Mailchimp 的下排 Banner 內容

 

而在 2018 年 9 月 Mailchimp 改版,網站的最下方的資訊列則以此種方式呈現。

 

結語

首頁就是品牌的門面,不論你是在經營電商網站或是 B2B 網站,對使用者來說,他們來到你的頁面就是希望能夠在最短的時間內認識你、了解你,以及你能為他們帶來什麼樣的幫助,或是你的產品可以解決他們什麼樣的煩惱。

 

而要讓人們信賴、信任並且停留在你的網站,除了要有好的網站架構之外,勢必也要有好的網站內容,甚至是移動裝置優化(響應式設計, RWD)、App 優化(AWD)也是基本的門檻了。

 

更重要的是,你的網站設計與內容也要與時俱進。

 

不要還停留在「只要有網站就好」這樣老古板的想法!

 

要打造一個能解決潛在消費客群的網站,並且讓網站自帶流量,那麼,你的網站才真正具有價值!(如果你有跨境銷售以英語系為主的國家之網站製作需求,也歡迎私訊 TransBiz—讀到最後的人才有這個福利哦!

想請 TransBiz 幫忙,為你的品牌說故事?

TransBiz 獨家心法 PPCGO

與 Tami 諮詢 30 分鐘

跨境雙週報

讓你掌握跨境趨勢與新知,超越對手!
你可能也想知道...

B2B、B2C外銷網站怎麼做?7大台灣廠商愛用網路開店系統比較

集客行銷是什麼?企業必學自帶流量的網路行銷成功密技。內文有舉例練習和案例分享

數位行銷不能不懂!你的行銷漏斗(Marketing Funnel)做對了嗎?

在下方填寫資訊,開始免費訓練 ↓↓↓

在下方填寫資訊,開始免費訓練 ↓↓↓