電商知識

如何運用UI、UX設計，優化你的電商的轉換率？

美勢科技編輯團隊· 發布 2021-02-08· 更新 2021-02-08· 約 17 分鐘閱讀

市場上，UI、UX設計者往往分佈在新創公司，又或是產業別需要透過不斷更新、去調整營運策略的企業，而且事實上這樣的比例相當高，他們最普遍會接觸以及思考的層面會是需要掌握的是「產品要如何呈現」。

這些人負責設計每一個與使用者互動的網頁或畫面呈現，因此他們大多並非單打獨鬥、管好自己的事情，而是並肩作戰，也就是說，有相當高比率的工作職掌是相輔相成的。UI設計師被期待在視覺上也已經普遍要能傳達UX 設計師想要呈現的理念。

又根據調查，市場上甚至有將近四分之一的註冊轉換率跟UI設計師和UX 設計師有關，尤其是核心採用線上消費的電商圈。當UI和UX能完整搭配，並且透過不斷的優化文案、設計、產品功能和口碑行銷，就更能了解自己的UX設計準則大概的方向。而我在這過程中累積了不少使用者體驗的設計經驗，進而分享此篇文章，讓我們了解電商與網路上的整體呈現，是多麼的密不可分。

UI、UX？涵蓋層面傻傻分不清楚？

說到UI和UX，這兩個看似相似的概念，究竟所涵蓋的範疇和市場切點為何？UI、UX的定義到底是什麼？工作項目上又有哪些相同又或者是相異之處？網站的UX設計又要如何提高轉換率？

不過，在談優化使用者體驗前，我們得先知道市場營運的終極目標為何？大多時候，一家公司的終極目標是能夠長期且持續的獲利。而UI（User Interface）是針對使用者介面的視覺去做配搭，也涵蓋頁面上的功能、使用者使用的方便性以及網站整體美感；而UX（User Experience）則是專注於使用者體驗後的感受面，因此，使用者在網站介面上滑鼠點擊和遊走的軌跡，不難呈現出使用者的習慣。

如此一來，UX的設計者就可根據使用者軌跡，規劃整個網站頁面的內容—究竟哪一些內容要先在網站上出現。再來才是處理網頁按鈕出現的先後順序的層面，更包含所謂的行動呼籲按鈕（Call to Action, CTA）的位置應該落點在哪個位置。整體而言，這樣的應用就是為了要讓電商網站上的使用者，在不刻意引起動機的情況下，引導至UI、UX設計者策略規劃的「導引內容頁」，最終的目的是為了將使用者將網頁瀏覽的時間與頻率轉化為實質上完成一套消費。

成交不成交？UI、UX設計決定最初的勝負！

在此我想要藉由電商打轉將近8年的經驗累積提供幾個可掌握的實際作為：

引起使用者的消費動機：先不論使用者是否已經接觸到各種線上的平台，包含：線上購物商城、拍賣平台、電商網站等，我們都該先找到使用者所需，對症下藥、提供完善的服務或是配套，才能引起使用者成為真正的消費者。原因是，銷售產品核心價值的傳遞，再加上有效地觸及使用者內心的需求，往往比短期單一銷售產品來得重要，幫助我們品牌能讓使用者有更大的動機成為忠誠客戶，才能成功提升轉換率。
降低消費門檻、簡化程序：為了要讓使用者能真正走完我們希望的整套消費流程，品牌在UI和UX設計時，必須朝著：降低使用者介面使用的阻礙，因此，除了能夠依照使用者瀏覽軌跡和操作邏輯，來佈建合宜的操作介面外，更該在界面上加入更人性化的貼心提醒，其中，最重要的是儘可能在使用者進入介面時，就給予給予使用指南或提示，以引導使用者能夠一次就上手。
穿插遊戲化介面：可設計小任務破關的橋段，並且適時給予回饋，正如同我先前文章曾提到的遊戲話理論和八角框架分析，在使用者操作介面的過程中，提供多接的任務解鎖功能，會讓這次的消費旅程更具趣味也更有挑戰。同時，一件大任務拆成好幾件小任務，讓使用者一一完成，同時累積成就感與參與感。

不要再想著要如何銷售產品，反而該試問品牌價值傳出了沒有？

事實上，影響轉換率的變數和操作手法層出不窮，企業在做品牌只需要把握一個原則—設身處地的為使用者著想，所以撇除產品本身的銷售，還是要回歸到產品核心的價值的呈現和傳遞。意味著：企業力求卓越的態度，將攸關是否能夠實質提供完善的服務，優化UI和UX設計的同時，才能讓每個轉換自然而然的發生。

圖片來源：unsplash
文章出處：林克威

行動裝置優先：台灣電商流量的真實戰場

原文談的是 UI、UX 的整體概念與導引邏輯，但在台灣電商的實際情境裡，多數蝦皮、momo、Yahoo 賣場的下單行為發生在手機上，桌機版設計得再漂亮，若手機體驗卡頓，轉換率一樣難以拉抬。行動優先的設計不只是把畫面縮小，而是要重新思考拇指能輕鬆觸及的操作範圍、表單欄位的數量，以及載入速度對跳出的影響。

當你同時經營官網與第三方賣場時，更要意識到使用者在不同通路的操作慣性不同：在蝦皮習慣往下滑看評價與規格圖，在官網則期待清楚的分類與搜尋。針對手機情境逐一檢視關鍵頁面，往往比重做整站視覺更能立即改善成交。

把主要 CTA 按鈕放在拇指容易點到的螢幕下半部，避免使用者需要兩手操作
結帳表單盡量縮減必填欄位，地址、超商門市可用選單或定位輔助，減少打字
商品圖第一張就傳達賣點，因為手機版使用者多半只看前一兩張就決定要不要往下滑
串接 LINE 或第三方快速登入，降低註冊與重複輸入的摩擦
用實機而非模擬器測試載入速度，圖片過大是手機跳出的常見元兇

用數據驗證設計，而不是憑感覺改版

原文強調 UI、UX 設計者的策略規劃與導引內容頁，但設計的好壞最終要靠數據說話。許多賣家改版後憑主觀感覺判斷成效，卻沒有建立可比較的衡量基準，導致無法分辨轉換率變化是來自設計調整還是檔期、流量來源的差異。

建議在動工前先界定要優化的單一指標，例如加入購物車率、結帳完成率或特定頁面的停留與離開點，再針對單一變因進行調整與觀察。第三方賣場後台雖然數據顆粒度有限，但仍可從轉換漏斗與商品頁的點擊資料找出明顯的流失環節，作為改善的優先順序依據。

改版前先記錄現況指標，留下可對照的基準線
一次只調整一個明確假設，避免多處同時更動而無法歸因
善用官網的事件追蹤工具，定位使用者在哪一步流失最多
蝦皮、momo 後台的商品頁數據雖有限，仍可比較不同版面圖文的點擊差異
累積足夠樣本再下結論，避免被短期波動或單一檔期誤導

信任感設計：成交前的臨門一腳

原文聚焦在引導與遊戲化的動機設計，但在台灣消費者實際下單前，信任感往往才是決定性因素。退換貨政策是否清楚、評價與問答是否真實、付款與物流選項是否齊全，這些信任元素若呈現不到位，再順暢的導引也可能在最後一步功虧一簣。

信任感不是靠誇大文案堆砌，而是把使用者真正在意的疑慮，主動且誠實地呈現在他們會看到的位置。把退貨流程、出貨時間、客服聯絡方式放在商品頁與結帳頁的顯眼處，能有效降低猶豫，讓使用者更願意完成最後的付款動作。

在商品頁明確標示出貨天數與物流方式，減少使用者對到貨時間的不確定
退換貨與保固條件用白話說明，放在結帳前看得到的地方
提供超商取貨付款等台灣消費者習慣的選項，降低付款焦慮
真實呈現評價與問答，負評的妥善回覆反而能強化可信度
客服管道如 LINE 官方帳號要容易找到，讓有疑問的人不必離站去問

結帳流程的斷點工程：把每一次跳出都當成漏水點來補

很多賣家把心力全放在商品頁的視覺,卻忽略真正流失訂單的地方往往是結帳這一段。從加入購物車到付款成功,每多一個欄位、每多一次頁面跳轉,都是一個可能讓使用者放棄的斷點。建議把整段流程拆成一格一格的步驟,逐格觀察使用者在哪一步停下來、回頭、或直接關閉視窗。台灣消費者習慣的金流(信用卡、LINE Pay、超商取貨付款、貨到付款)如果在最後一步才暴露限制,例如不支援他慣用的付款方式,前面累積的購買動機會瞬間歸零。把流程設計成「先讓他看到能用熟悉方式付款」,比任何促購文案都有效。

實務上最容易被忽略的是錯誤提示的寫法。當使用者填錯手機或地址格式,如果只跳出一行紅字而沒指出是哪一欄、該怎麼改,他多半會直接放棄。好的 UX 會把錯誤即時標在該欄位旁、用人話說明,而不是等他按下送出才整頁報錯。

把結帳拆成「購物車→填資料→選物流金流→確認→完成」每格獨立觀察跳出率
付款方式(信用卡/LINE Pay/超商取貨付款/貨到付款)在第一步就清楚列出,別等最後才讓人撲空
表單只留必填欄位,生日、推薦碼這類非必要欄位移到成交後再問
錯誤訊息標在該欄位旁、用白話講清楚怎麼修正,不要整頁紅字
提供訪客結帳(免註冊),把「強迫先加入會員」這個最大斷點拆掉

跨平台的體驗一致性:蝦皮、momo、官網不能各長一個樣

台灣電商很少只經營單一通路,通常蝦皮、momo、Yahoo、官網、LINE 官方帳號同時在跑。問題是每個平台的版型、字數限制、圖片規格都不同,如果放任各通路各自為政,使用者從蝦皮看到的品牌印象跟點進官網看到的完全是兩回事,信任感會被稀釋。UI/UX 的進階課題不是把單一頁面做美,而是建立一套跨通路都能落地的視覺與訊息規範:主視覺色系、商品命名邏輯、賣點呈現順序要一致。

具體做法是先把官網或品牌主場當成「母版」,訂出商品圖的構圖規則(第一張一定是情境圖或主賣點圖、第二張規格、第三張尺寸對照),再因應各平台限制做最小幅度調整,而不是每上一個平台就重畫一套。這樣使用者不論從哪個入口進來,看到的都是同一個品牌,回購時也不會因為認不出來而流失。

訂一份跨平台的商品圖規範:第一張、第二張各放什麼內容固定下來
品牌主色、字體風格、賣點措辭在蝦皮/momo/官網保持一致
商品命名用同一套邏輯(品名+規格+賣點),方便消費者跨平台比對是同一件
各平台的客服話術、退換貨說明統一,避免同品牌講法不同造成不信任
用 LINE 官方帳號當回購入口,把各平台流量收攏回自己能掌握的池子

從第一筆到回購:用體驗設計把一次性買家養成熟客

轉換率不該只算「首次成交」,真正撐起電商獲利的是回購。第一次成交後的體驗,往往比商品頁更能決定他會不會再來。出貨通知、物流進度、開箱後的引導,這些「成交後」的接觸點多數賣家做得很潦草,等於把辛苦換來的客人晾在一旁。進階的 UX 思維是把售後也納入設計範圍:訂單成立後主動推播進度、到貨後適時遞出評價邀請或回購優惠,讓使用者感覺被照顧而不是被收割。

設計回購誘因時要避開常見錯誤:折扣碼門檻訂太高、效期太短、或在錯的時間推播,都會讓人反感。比較有效的是依消耗品的使用週期推算回購時機(例如保養品約一個月用完前提醒),用對時間點遞上恰到好處的理由,而不是無差別轟炸全會員。