研究顯示，訪客剛進入網站的 0.05 秒，已建立好對網站的第一印象，而這個印象的好壞，超過九成都取決於網頁設計！SHOPLINE 電商教室 的【網店說明書】來到第四集，將透過 UI 和 UX 解構網頁設計與網店表現的關係，並提供 7 個可改善 UI 、UX 的方法，教你從中提升網店轉換率！
網頁設計合集：UI、UX 如何直接影響網店轉換率？｜5 分鐘輕鬆學會網站製作｜ 6個免費網站架設平台｜網頁設計公司價錢比較
UI、UX 是什麼？
UI： User Interface，中文是「使用者介面」。簡單來說，UI 就是應用程式或網站的視覺設計，所有視覺元素包括排版、按鈕、字型設計、圖像、顏色等等，都屬於 UI 的一部分。UI 設計師的主要職責，是透過設計和鋪排各種視覺元素，令網頁更具美感，從而建立品牌形象，甚至引導訪客採取進一步行動，例如訂閱、購買等等。
UX：User Experience，中文是「使用者體驗」。相比起 UI，UX更重視網頁功能，所以牽涉的範圍會更加廣。專業的 UX 設計師會仔細研究使用者習慣，根據數據決定網頁架構、使用流程和內容規劃等，務求為訪客提供最便利、順暢的使用體驗。同樣地，改善 UX 的最終目的還是增加訪客對網站的好感，並引導他們採取行動，為機構或公司帶來實際回報。
UI、UX 與網店轉換率有什麼關係？
網店轉換率（Conversion Rate）可定義為訪客當中會採取行動的百分比，而目標行動可以是訂閱內容、註冊會員、活動報名等，不只有消費才算成功轉換。要鼓勵訪客採取行動，網頁設計擔當著重要角色，設計越吸引，使用感覺越良好，訪客對於網站的信心自然越大，亦會有更大誘因去採取行動，而非看過就算，甚至過目即忘。
7 個透過改善 UI 、 UX 提升網店轉換率的方法：
網頁設計雖然分為 UI 和 UX 兩部分，但其實兩者息息相關，而且同樣重要！以下 7 個小技巧將能幫助你改善網店的 UI、UX，唯有同時兼顧「外表」和「內在」，才能更全面提升網店效益，進而提高網店轉換l率！
1. 善用 F 型閱讀模式
美國 UI、UX 權威 The Nielsen Norman Group 研究顯示，普遍網站訪客的閱讀模式都是呈 「F」形狀。這就是很多網站都會將搶眼的橫額放在頁面頂端的原因，希望以最短的時間表達重要資訊和品牌定位，讓訪客可以迅速建立良好的第一印象，並選擇繼續瀏覽網站其他內容。
店主不妨將這個閱讀模式融入網頁排版之中，並加插節日行銷、折扣優惠，或者新品資訊到精心設計的橫額上，把握黃金時機留住訪客！
2. 加入 CTA 按鈕
Hubspot 的一篇網誌指出，某合作公司只是在首頁加上清晰的 CTA （Call To Action）按鈕，就成功增加了 105.9% 的轉換率，足足超出一倍，可見行動呼籲按鈕的重要性！
以 SHOPLINE 首頁為例，我們在橫額加入了顯眼的 「免費試用」按鈕，並以簡潔的設計，襯托出期望訪客會採取的行動，絕對有助提升網站點擊率和轉換率！有關 CTA 按鈕的另一個小知識是，某公司將 CTA 按鈕從綠色轉換成紅色後，竟增加了 34% 的轉換率，雖然顏色對於訪客的影響並非絕對，但店主也可以參考一個這個數據呢！
3. 上載產品影片
研究顯示，在登陸頁面（Landing Page）加入影片，可以提升轉換率高達 80%！不過，要注意的是，如果影像質素較低，超過六成的訪客都會對網站產生負面感覺，所以務必要使用高品質的影片！
店主可以嘗試拍攝產品試用影片，或者品牌宣傳片段，這樣不但能更清晰、立體地傳遞品牌及產品資訊，還能提升訪客對於網站的印象和興趣，有助增加轉換率！
4. 簡化網頁設計
設計界的著名理論 —— Hick’s Law （希克定律）指出，當人面對越多選擇，就需要越多時間去選擇，下決定所需的時間也會隨之增加。所以，維持簡潔清晰的網頁介面，除了可以讓訪客瀏覽得更舒適，並提升使用流暢度，還能減少顧客下決定的時間，加快提升轉換率！
SHOPLINE 為店家提供近 30 款網店設計模板，即使毫無設計底子的店家，也能輕鬆設計出簡潔好用的網店！多元的風格選擇，更能配合不同商品類型的店家，建立品牌形象！
根據 SHOPLINE 統計，目前最受店家歡迎的設計模板，就是 Ultra Chic！有興趣的店家歡迎到設計模板頁面，瀏覽更多商店模板並了解更多！
5. 使用響應式網頁設計
隨著流動裝置的發展和普及，越來越多人依賴手機或平板電腦進行生活中的大小事情，當然也包括網上購物。 SHOPLINE 2021 開店白皮書 數據顯示，使用智能電話下單購物的比率已反超電腦裝置（包括桌上型電腦及手提電腦），成為最熱門網購消費裝置，佔整體近 57%！
一般而言，網頁設計師需要因應裝置，分開設計網站，如果需要更新網站內容，也就需要分別更新兩次，以致資料修復等程序也不能同步進行。但使用 RWD 設計的網站就能避免這些不便了。
RWD 即 Responsive Web Design，中文是「響應式網頁設計」。RWD 一個設計，可以讓網站內容，在不同型號的電腦、手機以及平版，顯示一致的網站內容。萬一有任何修改或更新，也只需要改動一個設計，就能應用在不同裝置。RWD 的架構，還能將網頁，和其中文字、圖片，甚至是特殊效果，自動縮放成符合不同視窗尺寸的頁面。
使用 RWD 不但能為你減省時間成本，讓網店營運更有效率，Mobile Friendly （流動裝置友好）的設計更能提升 SEO表現，增加網站流量！更重要的是，RWD 可以改善顧客的使用體驗，並提升他們對品牌的好感度、加強購物慾，進而提升轉換率！
SHOPLINE 的網店架構均內置 RWD 設計，店主們不用另聘網站設計師，也能輕易採用 RWD 設計！
6. 提升網頁速度
研究顯示，兩秒內完成載入的網站之跳出率（Bounce Rate）只有 7%，但如果網站需要五秒才成功載入，跳出率就會上升到 38%！成功轉換顧客之前，首先要留住他們，才能繼續吸引他們消費，如果還未開始瀏覽，就因為體驗未如理想而離開網頁，店主就會白白流失轉換顧客的機會了！
你可以先透過 Google 的 免費檢測網站 評估網店目前的速度表現，並找出拖慢網頁速度的原因，加以改善。常見會影響網頁表現的因素包括，影響檔案太大、伺服器不穩定、原始碼或外掛程式過多、出現程式錯誤等，建議店主先從壓縮圖片檔案和減少依賴外掛程式著手改善。如果想進一步提升網店表現，也可以預約 SHOPLINE 開店顧問免費諮詢，獲取更多專業諮詢和意見！
7. 增加付款方法
國際知名的市場調查公司 Ipsos 指出，有 30% 網購用戶均表示，如網站未能提供慣用付款方式，就會放棄購物，可見提供更多元化的付款方法，是其中一個有效防止顧客棄單，並提升轉換率的方法！
政府最近公布 $5,000 消費卷將適用於本地網上購物，你的網店串接了合適的支付方案，準備好迎接消費浪潮了嗎？SHOPLINE 網店方案，除了支援一般 Visa 和 Master 信用卡付款、Apple Pay 和 Google Pay 等，亦有支援政府 $5000 電子消費券計劃的指定支付平台 AlipayHK，而且 SHOPLINE 更是 AlipayHK 的官方指定夥伴！
不想因為缺乏合適支付選項，而錯失訂單，就趕快開通 SHOPLINE 14 天免費試用，裝備好網店去迎接消費券用戶吧！
用消費券也可以開網店？即看 SHOPLINE 消費券攻略，教你善用消費券賺到盡，店主也要趕上消費券購物熱潮！
結語
除了活用上述技巧，店主平日亦應定期檢視網店表現，例如透過收集客戶意見，找出網站優勝和需要加強的地方，才能全面改善網店 UI 和 UX，從而提升轉換率！
其實，UI 和 UX 不只是網頁設計，還涉及視覺藝術、消費心理、顧客行為和數據分析等知識和技巧，認真執行起來絕不容易！
不過，有了 SHOPLINE 的全方位開店服務，缺乏經驗的店主也能輕易、快速建立一間好的網店，所以趕快啟動 SHOPLINE 14 天免費試用，親身體驗吧！如果新手店主對於網店營運、網頁設計方面，尚有疑問或想更進一步，歡迎預約開店顧問免費諮詢！
【網店說明書】系列其他文章：
【開網店教學】Google Tag Manager 是甚麼？強大 GTM 讓你輕鬆管理第三方行銷工具！
【開網店教學】客戶關係管理（CRM）是什麼？建立好顧客忠誠度不再擔心顧客流失！
【開網店教學】POS 系統 是甚麼？6 招教你善用 POS 輕鬆實踐 O2O 全方位零售！
SHOPLINE HK 的 Content Marketing 團隊成員。嚮往自由，討厭標籤。希望可以協助店家在電商世界裡面不斷進步，一同發掘更多可能。