網頁設計Check！網站首頁必備的內容元素

你沒有第二次機會為你的網站打造第一印象！你的網站首頁是你的網頁設計中最重要的頁面，通常它也是帶來最高流量的頁面，而要如何讓造訪你的網站的使用者，對你留下深刻的印象，一目瞭然你在做什麼，甚至留下他們的聯絡方式，最後還成為你的客戶？這幾網站首頁必備的內容元素你都做到了嗎？這篇讓你好好對照檢查自己的網站
 

1. 大標題

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

2. 次標題

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

3. 主要的CTA

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

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

 

4. 意象圖片

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

· 大標題：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嚴格把關且精挑細選過的。


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


 

7. 網站使用導覽

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

大型連鎖知名傢具IKEA在台灣的首頁網站導覽則是這樣設計：找產品、找空間、找新品及優惠、找靈感。在2017年5月以前，IKEA在台灣是沒有開放線上購物功能的，後來率先於中台灣開放，在2017年的年末才陸續在全台灣開放線上購物功能。因此網站導覽目前主要還是搜尋功能為重，「找xx」，當使用者點選「線上購物」時，才會看到專為線上購物設計的頁面內容。
 

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

 

8. 主要服務項目

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

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

 

9. 額外的資訊

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

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

 

【結語】

首頁就是品牌的門面，不論你是在經營電商網站或是B2B網站，對使用者來說，他們來到你的頁面就是希望能夠在最短的時間內認識你、了解你，以及你能為他們帶來什麼樣的幫助，或是你的產品可以解決他們什麼樣的煩惱。而要讓人們信賴、信任並且停留在你的網站，除了要有好的網站架構之外，勢必也要有好的網站內容，甚至是移動裝置優化（響應式設計, RWD）也是基本的門檻了。

資料來源：TRANSBIZ