當屬於自己的網站落成之後,我們都很期待它能立刻打開網路商機大門,讓訂單自然湧入,然而網站就如同實體商店,需要有好的行銷、和客人建立良好印象和互動,來增加吸引客人上門的機會。好的網頁設計都是經過背後嚴謹的討論、設計出引導消費者行動的路徑,讓使用者擁有滑順的體驗,引導進流量池或名單,讓他訂閱成為粉絲、進行消費、再行銷。

目錄

了解網頁設計的套路

當你逛街的時候,吸引你走進一間店面的因素有哪些?可能店裡熱鬧的人潮、明星商品、展示與空間設計,或剛好是背景音樂吸引你。

網頁的設計像是一場空間與商品的策展,引導使用者閱覽動線的移動,放上吸引人的內容,最後取得用戶的資料或訂購意願,這些都在設計範圍之內。在一開始先設定好你的行銷目的:是獲取新用戶 email 名單、引導到下一步內容還是引導購買,都會影響你整個網頁設計的規劃。

下面舉幾個網站範例,拆解網頁設計元素

網頁設計元素分析

1.Pop up(彈跳視窗、覆蓋版面視窗)

彈跳視窗是個相當引人注目的引導功能,從彈跳視窗的內容可以觀察這個網站目前的營運與行銷策略,以提供空間風格設計服務的 Lo-Fi House 為例,一點進官網會有將近 ⅓ 的版面請你留下email 訂閱電子報,作為獲取新用戶的方式。

而全台最大的活動上架平台活動通,最近也進行了不一樣的改版,點進官網會發現左下角有個pop up,引導人下載 app,目前活動通正積極引導新舊用戶下載 app,將用戶行為引導往 app 發展,提升行動版用戶的占比和使用黏著度。

設計 Pop up 為入口,下一步的用戶旅程就不能中斷,通常使用者點進這個 Pop up,代表他是電腦版的用戶,如何讓他促進下一步行動「成為行動版用戶」?

活動通設計了一個清楚的頁面向用戶介紹 app 的強大,由於現階段的用戶對於活動通 app 還停留在「取票」的印象,只在活動報到時才會開啟,而忽略了其他活動、內容資訊的強大性。在這個頁面,活動通向用戶介紹了 app 同樣可以瀏覽活動、購票、查看熱門話題等,引導用戶下載安裝。

然而,Pop up 有個小缺點,就是當使用關閉之後,要如何再次有效出現在使用者面前,進行再行銷,又不失打擾體驗?在使用者載入別的頁面時候,思考一個適合的方式再次出現使用者面前或引導使用者點入,都是網頁設計的下個環節

2. 資訊板塊

資訊板塊就是在一個網站頁面上,如何精準有效的呈現資訊,他像是實體店面的展示櫥窗,內容介於商家想要行銷的商品,以及使用者感興趣的內容之間抓取平衡。

B2C案例:朕川姬
保養品電商

朕川肌的官網並沒有選擇將所有產品放進官網首頁,而是優先呈現用戶品牌帶給人的形象與精神:如同皇室寵妃般的奢華保養品。

之後放上明星商品,將使用者的注意力聚焦在這個商品上,通常第一次登入的使用者,有過半的機率沒有明確的消費需求,因此將注意力聚焦在少數商品,減少使用者亂逛找不到注意力聚焦點,而產生高跳出率的可能性。

點進商品故事後,會看到完整的頁面介紹「滿月換容之帖」的內含品項,功能與成分,設計美感上同時程序著品牌精神,不用過多的內部連結、雜亂資訊去干擾使用者體驗。

B2B案例:adGeek
結合 AI 技術的科技行銷服務

B2B 提供的服務,由於通常需求已經明確,能夠發揮文字,聚焦亮點和服務優勢,以及利於 SEO 上的優勢,B2B 形象官網常常展現在專業的服務上,文案會針對客戶的痛點去琢磨,介紹服務的優勢來吸引客戶閱覽和合作

一頁式的簡潔頁面能夠引導使用者關注你想讓他聚焦的地方,為了解決高跳出率,留下用戶的注意力與流量至關重要,因此會有內容行銷的出現。當你提供越多優質的內容給用戶,替用戶解決疑問和需求,用戶會越信任你的品牌,會越樂意使用你的產品。

在網頁設計上,一直以來都有人熱烈討論究竟是一頁式網頁設計還是完整的網站擁有比較好的獲客成效,兩邊都各有擁護者,也各有長短處,然而不論採取何者,最重要是其內容和網頁設計是否能留住用戶的吸引力,打中他們的需求並採取進一步具體的行動。

3.部落格

部落格的經營在網頁 SEO 上扮演重要的角色,他能持續為你帶進新用戶與舊用戶的回流,成為一個良好的行銷渠道,部落格的文章內容比起你的官網本身,更容易觸進、擴散給更大的用戶族群,就像撒出去的魚網,當用戶收網回來進而找到你的產品,讓你來解決他的疑問。

回饋購物金平台 ShopBack 的部落格為官網平均每月帶來 200 萬的訪客流量,每年 Q4 是娛樂生活服務產業的一級戰場,透過關鍵字部署、內部連結導引以及初次使用優惠,有效留住用戶,讓用戶認識這個平台、採用他們的服務。

4.促成行動(CTA)

無論你的網頁設計如何部署,用戶旅程如何設定,當用戶看到最後一步,別讓他什麼都不做就離開。創造與他的連結和互動,促成你們下一次互動的機會,都是 CTA 的重要性。

這些 CTA 可以依據你的旅程階段而設定,在每到一個行銷旅程告一個段落後,引導或吸引他的下一步如何走。它可以是:

1. 留下連繫資料與問題,讓企業有管道聯繫用戶
2. 增加其他文章連結,看更多篇相關文章
3. 請求訂閱電子報
4. 拿取首次折扣優惠
5. 下載應用程式、PDF 檔案

找尋專家完成你的網頁設計之旅

對於網頁設計上的事前研究,可以參考如何規劃抓住顧客喜好的網站?如何找WordPress網頁設計公司?架站前要準備什麼? 相信在部署網路事業的道路上,你會有更多的觀念和掌握度。

更多網頁設計規劃以及內容部署,可以參考這篇:
https://www.eg-creative.com/seo/

相關文章