相信大家常常聽過 UI 和 UX，也常看到國內公司開出 UI Designer 的職稱，但其實對於 UI UX 確切定義並不太清楚。其實 UX 是 User Experience 使用者經驗的簡稱，而 UI 則是 User Interface 使用者介面的簡稱。今天我們一起來看看 UI UX 的確切定義、區別，以及 Google 等知名的跨國大公司他們是如何替自己的網站設計UX。
UI UX是什麼？
UX（User Experience）使用者體驗設計
UX（User Experience）主要的範疇為根據使用者的習慣設計優化用戶體驗，主要考慮的是「產品用起來的感覺」，也就是使用者介面設計。鑽研如何妥善安排整個網站頁面的內容規劃，例如行動呼籲按鈕（Call to Action）的位置應該擺在哪裡、哪些區塊的內容要先在網站上出現等等。
UX設計一般包含使用者的研究（User Research）和情境分析（Scenario），一般有資源的公司會透過使用者歷程追蹤、問卷及實際訪談調查，或是內部資料庫分析等等，分析潛在TA的使用習慣和行為，而後再三修飾創作出「最棒的」使用者體驗。
若公司只開一個 UX Designer 職缺，那這位 UX Designer 主要是做網站的骨架設計，產出網站地圖模板、網頁 Wireframe & Prototype，以及配合行銷數據去進行使用者研究報告。
UI （User Interface）使用者介面設計
UI主要是負責設計，將介面上的按鈕、區塊等等，主要考慮「產品怎麼呈現」，以使用者便利性與整個設計的美學為出發點設計，依 UX 的理念和架構設計，包括整個網站產品的顏色、字型、字體大小，主要是根據 PM 或是 UX設計師給的架構設計網頁或是 App介面，是產品的美學工程師。
而 UI設計師和網頁設計師的差別，一般網頁設計師除設計網頁的視覺呈現之外，也要求必須懂得前端切版，需要具備前端程式語言 HTML+CSS 甚至 JS 的能力；而 UI 設計師更重視使用者流程與使用者體驗的細節，產出的網頁比較偏向功能性網頁，重視使用者流程。
UI UX設計與行銷的關聯
與一般傳統商店相同，數位網站需要漂亮的門面、簡單直覺的使用者介面及舒適的購物體驗，吸引人的首頁設計能讓來到網站的客戶能一眼看出你是賣什麼、或是正在舉辦什麼促銷活動，以增加轉換率。在 UI UX設計中，會用顧客旅程地圖來掌握消費體驗與流程，進而找出改善方向。
而對於行銷人員而言， UI UX 設計的好壞會直接關乎到每個人員的 KPI 關鍵指標和成效，可以說是不得不重視的領域：
專案經理
專案經理被時間追著跑，可藉由評估 UX 成本與效益的取捨，並給出最適合客戶的建議。
SEO操作
網站體驗會直接影響使用者的停留時間、瀏覽頁數等網站分數，進而提升 SEO 成效。進行 SEO 規劃時，從使用者的角度看待網站，安排好網站的視覺動線，在文案內容架構中曝光關鍵字，就能兼顧兩者。
業務
在接洽或談判時，可藉由客戶網站優化情況，知己知彼百戰百勝。
廣告投手
好的 UX 能提升 Landing page 體驗，優化廣告成效。
UI UX設計之間的關係？
一般 UI UX 設計為上下游關係，UX 先透過研究分析使用者需求，思考哪些版面位置該放哪些內容及互動設計，在將網頁的架構勾勒出來，接著才交棒給負責整體視覺呈現的 UI 設計師；UI 設計師透過視覺安排與設計具體呈現，達成 UX 期望傳達給使用者的邏輯與感覺。
台灣有些中小型的新創公司因為人員資源有限，會選擇融合 UI 和 UX 設計這兩個角色，並期許這位 UI 設計師可以兼具 UX 設計能力，最好還要會些前端程式語言，直接產出符合使用者體驗+美感的網頁。
相反，若大公司要將 UI UX Designer 職缺細分成更專業的分工，依種類可以再細分成視覺設計（Visual Design）、互動設計（Interaction Design），以及設計研究（Design Research）/使用者研究（User Research）。
視覺設計 / 圖像設計 （Visual Design）
視覺設計跟我們一般認知的 UI設計最相近，也最符合大眾認為的「網頁設計師」。視覺設計不需注意畫面之間如何連接，也不必在乎網頁互動性，視覺設計師最主要的工作是設計出美觀且符合品牌直觀概念的圖示、控制鈕、視覺元素和運用合適的字型，決定每個視覺元素應該呈現的樣子，最常使用 Photoshop、Sketch 等軟體進行設計。
工作時， Visual Designer 會根據 Interaction Designer 畫好的流程及 Wireframe 進行視覺化的設計，他們必須在視覺上呈現想要給用戶的感覺，較難用主觀的條件論來評斷成品好壞，畢竟每個人的美感不盡相同。
Visual Designer 看中繪畫能力及設計能力，對美感尤其要求，對學歷的要求比較沒那麼多，想應徵 Visual Designer 可以多著墨於自己的作品集以及設計的經驗。
互動設計 / 動態設計（Interaction Design）
視覺設計擅長處理靜止物件，而動態設計師主要設計動畫呈現，也就是「使用者按了以後介面要有什麼反應」，包含按鈕&選單等元素，動畫設計元素移進來&退出的轉場效果，動態效果可以引導使用者的使用流程，提供使用產品的視覺線索，讓介面更加完整，因此必須擁有動畫設計能力。
Interaction Design 需要將流程系統化且合乎邏輯的串起來，幫助使用者可以更順利的使用產品，拿網頁來說就是網頁架構，因此非常考驗設計者的邏輯能力。
工作上和工程師的合作會比其他角色來的更加緊密。許多分工沒那麼細的中小型公司不會將這個職位分出來，由 PM 和 Visual Designer 一起瓜分工作內容。
設計研究（Design Research）/ 使用者研究（User Research）
主要工作為設計題目，並且邀請使用者進行深度訪談，並從訪談中洞察使用行為，並判斷出使用者軌跡，提出相對應的路徑和按鈕。身為設計研究需要相當的邏輯能力和觀察力，深度了解使用者需求。
除了實體訪談，研究員通常也會研究目前的使用數據，用 A/B test 來得知哪個設計選項最適合使用者，根據需求不斷重複更改設計。
網站UX入門 – Google UX Playbook重點摘要
Google 身為搜尋引擎龍頭，擁有各大企業到達頁面的數據，2019年初發布了最新版的 Google UX Playbook ，涵蓋電商、新聞媒體、旅遊、金融財經、不動產以及顧客經營等領域，今天針對這些領域，我們綜合自身代操經驗，替大家翻譯整理出一些通用的 UX設計技巧，你可以根據以下我們為您整理的要點，替你的網站做份UX健檢。
如果想進一步了解我們是如何架設出精美又符合 UX及SEO搜尋引擎優化的網頁，可以點進我們的網站架設頁面了解更多。
不過提醒各位，Google 今天是以宏觀角度去看每一個網站，想當然爾大公司品牌的流量、權重都比中小企業來的高很多，因此蒐集到的數據皆以國際知名品牌品牌為主，建議每一個中小企業還是要根據自身品牌的目的去設計想要的顧客旅程。
Google UX Playbook 建議指南
- Retail (零售)、ECommerce (電商)
https://services.google.com/fh/files/events/pdfretailux_playbook.pdf
- Travel (旅遊)
https://services.google.com/fh/files/events/pdftravelux_playbook.pdf
- Finance (金融)
https://services.google.com/fh/files/events/pdffinanceux_playbook.pdf
- RealEstate (不動產)
https://services.google.com/fh/files/events/pdfrealestateux_playbook.pdf
- News (新聞)、Content (內容)
https://services.google.com/fh/files/events/pdfnewsux_playbook.pdf
- LeadGen (潛在客戶)
https://services.google.com/fh/files/events/pdfleadgenux_playbook.pdf
網站UX設計目的
對顧客優點
- 降低逛網站的摩擦力
- 快速找到他們需要的資訊，降低搜尋成本
對網站主價值
- 降低流失率
- 優化行銷漏斗
- 提升品牌信賴和形象
- 控制訪客在網站的行為
UX 金字塔
A、消費者洞察
在消費者洞察中，你必須模擬網站訪客的心態，找出
- 顧客需求 – 他想要什麼
- 顧客的心智模型 – 他是怎麼思考的，消費者的思考邏輯？
- 顧客旅程 – 使用者的三個 What：這是什麼網站？能帶給我什麼好處？我需要做什麼才能獲得好處？
B、網站資訊架構
- 視覺動線 – 如何安排資訊？好的視覺動能要能配合受眾直覺，並且符合資訊邏輯。
- 可用性 – 可用性可以理解成防呆設計，盡量設計的簡單易用，讓使用者以更少的程序就能工作，並且避免錯誤的使用情況。
C、內容優化
- 該寫甚麼 – 內容架構
- 該怎麼寫 – 文案與內文撰寫
零售電商篇 UX 技巧
今天詳細介紹 Landing Page 中最常見的零售電商，其餘旅遊、金融、不動產、新聞媒體以及名單型網站將另外開篇詳細介紹。
如何定義自己是否為零售電商的 landing page？在電商網站地圖中，關鍵點在於產品頁和結帳流程，因此只要能從網站上買到東西就可以當作電商網站去優化。
關於網站內的 SEO，在內容和html的編排上主要是首頁、分類頁、產品頁及部落格皆使用關鍵字做 SEO，甚至所有網站內會出現的文字資訊都需要做 SEO，以增加關鍵字和網站的吻合度，幫助搜尋引擎能在關鍵字被搜尋時能立即找到你的網站。
改善UX體驗的 6 大關鍵環節與 46 個優化原則
A、首頁/登陸頁（Homepage/Landing page）
降低摩擦
- 不要使用插頁式廣告
- 移除自動輪播圖
- 字體大小清晰可閱讀，確保在手機上閱讀舒服
- 使用第三方認證
| 修改難度 | 影響校度 | KPI | |
| 1 | 易 | 高 | 跳出率 Bounce Rate |
| 2 | 易 | 高 | 跳出率 Bounce Rate |
| 3 | 易 | 高 | 停留時間 |
| 4 | 中 | 高 | 跳出率 Bounce Rate |
協助理解
- 首頁含最熱門的內容/品類，以及主類別
- 在不動頁面的情況下 (Above the fold)，可看到呼籲按鈕
- 情境描述式 CTA ，而非直敘型
- 首頁必須有明確的價值主張文案
- 加入足夠的社群佐證
| 修改難度 | 影響校度 | KPI | |
| 1 | 中 | 高 | 按鈕點擊率、跳出率 |
| 2 | 易 | 高 | CTA 點擊率、跳出率 |
| 3 | 易 | 中 | CTA 點擊率、跳出率 |
| 4 | 易 | 高 | 跳出率、轉化率 CVR |
| 5 | 易 | 中 | 跳出率 |
範例：BFFECT
- 首頁簡單明瞭，操作提示清楚
- 字體適中
- 有價值主張與 CTA 按鈕
降低摩擦
- 有置頂收合式的選單
- Menu 長度限制在一頁內，讓用戶一次就可以看完所有選項
- 固定欄位（包含收合式選單）< 頁面1/5
| 修改難度 | 影響校度 | KPI | |
| 1 | 中 | 中 | 瀏覽頁數 |
| 2 | 中 | 中 | 瀏覽頁數 |
| 3 | 中 | 高 | 總瀏覽量成長情況 |
協助理解
- 主項目以流量、熱門度排序，子項目以字母排序
- 在選單加上促銷訊息
- 在選單加上地點圖標
- 在選單加上電話連結
- 把售後服務也放在選單裡，例如查詢物流地點、會員中心
| 修改難度 | 影響校度 | KPI | |
| 1 | 易 | 中 | 瀏覽頁數 |
| 2 | 易 | 中 | 瀏覽頁數 |
| 3 | 易 | 高 | 按鈕點擊率 |
| 4 | 易 | 高 | 按鈕點擊率 |
| 5 | 中 | 高 | 瀏覽頁數 |
範例：Boots
- 有置頂收合式的選單
- 固定欄位 < 1/5
C、搜尋（Search）
降低摩擦
- 要有搜索欄位
- 讓搜尋欄清楚易見，讓人找的到
- 打字時自動列出推薦項目，也就是自動建議選項
- 自動修正拼字錯誤
- 永遠都有搜尋結果，不要只有 404 or nothing found，可以提出類似的建議結果提升畫面點閱率
- 列出搜尋歷史/熱門搜尋字詞
| 修改難度 | 影響校度 | KPI | |
| 1 | 高 | 高 | 搜尋/網頁總流量 %，轉換率 |
| 2 | 易 | 高 | 搜尋/網頁總流量 %，搜尋深度 |
| 3 | 中 | 高 | 網頁跳出率/搜尋量，搜尋深度 |
| 4 | 中 | 中 | 網頁跳出率/搜尋量，搜尋深度 |
| 5 | 中 | 中 | 網頁跳出率/搜尋量，搜尋深度 |
| 6 | 中 | 中 | 網頁跳出率/搜尋量，搜尋深度 |
範例：肉鬆王國
- 擁有搜索欄位
- 擁有自動推薦功能
- 列出熱門搜尋
D、分類/品類（Category / Product）
降低摩擦
- 確認篩選器功能容易操作
- 確認分類邏輯與可用性
- 條列式產品敘述，敘述簡單易懂
- 添加次要的呼籲按鈕（如：收藏、加入購物車）
| 修改難度 | 影響校度 | KPI | |
| 1 | 高 | 高 | 品類頁跳出率/搜尋頁 |
| 2 | 高 | 高 | |
| 3 | 易 | 高 | |
| 4 | 中 | 中 | 按鈕點擊率 |
協助理解
- 價格資訊位置在頁面上方，比較好找
- 加上緊急/限量的 CTA（僅剩 3 件！或是倒數幾天）
- 在產品頁強調購買利益（8 折免運）
- 在每個頁面強調品牌價值主張
- 產品頁增加顧客評論
- 將瀏覽器欄顏色變更為品牌色
| 修改難度 | 影響校度 | KPI | |
| 1 | 易 | 高 | 加到購物車、跳出率 |
| 2 | 高 | 高 | 轉換率 |
| 3 | 易 | 高 | 轉換率、購物車跳出率 |
| 4 | 易 | 中 | |
| 5 | 中 | 高 | 轉換率 |
範例：Juniqe
Google 建議三種創造危機感的 CTA
- 最後 3 件
- 倒數 2 天
- 情人節禮物
E、轉化頁（Conversion）
降低摩擦
- 有社群帳號註冊功能
- 允許非會員結帳
- 使用進度條，讓使用者知道自己在哪個步驟
- 加入購物車後不要直接導向結帳頁
- 允許編輯購物車
- 減少跳出流程的按鈕，也就是限制可能跳出流程的因素，可以盡量引導使用者到首頁或回到購物車
- 可以跨裝置 (X-device) 儲存資料
- 一個驗證過的 API 位址，讓使用者不需要再次輸入帳號密碼登入，也無須重複驗證
協助理解
- 創建帳號時，需說明原因或價值主張
- 在購物車頁面再次強調價值主張以及好處/利益，例如：免運費
| 修改難度 | 影響校度 | KPI | |
| 1 | 中 | 中 | 轉換率、跳出率 |
| 2 | 中 | 高 | 轉換率、跳出率 |
| 3 | 中 | 高 | 轉換率、跳出率 |
| 4 | 中 | 高 | 平均瀏覽頁數、客單價 |
| 5 | 中 | 低 | 轉換率、跳出率 |
| 6 | 中 | 高 | 轉換率、跳出率 |
| 7 | 高 | 高 | 跨裝置轉換，設為微觀轉換 |
| 8 | 高 | 高 | 轉換率、跳出率 |
| 9 | 易 | 中 | 註冊率、跳出率 |
| 10 | 易 | 中 | 轉換率、跳出率 |
範例：lativ
- 允許編輯購物車
- 減少跳出流程
- 綁帳號跨裝置儲存資料
F、結帳資訊欄/表格優化（Form optimization）
降低摩擦
- 使用框內顯示驗證結果，而不是送出資料後才顯示
- 自動填入已知資訊
- 刪除選填項目
- 低於四個選項時，不要使用下拉選單
- 不同的填寫欄位，呼叫對應的數字或英文鍵盤
| 修改難度 | 影響校度 | KPI | |
| 1 | 中 | 中 | 表單完成度/率 |
| 2 | 中 | 中 | 表單完成度/率 |
| 3 | 中 | 中 | 表單完成度/率 |
| 4 | 易 | 低 | 表單完成度/率 |
| 5 | 易 | 低 | 表單完成度/率 |
協助理解
- 在必填欄位加上星號*註記
UX 優化結論
做任何優化前一定要 A/B Test
也就是做差異化測試觀察成效，可以使用google 最佳化工具安插程式碼，也可以使用lihi，他是 A/B test 分流短網址，方便做 A/B test 並記錄瀏覽器紀錄。
避免打斷使用者的瀏覽注意力
注意力被打斷的情況有兩種，第一是被跳出的新資訊打斷，所以建議不要有太突出的動畫、顏色或跳出畫面，除非這是網站的關鍵行為；第二種則是因為缺乏下個目標，所以注意力因此轉移，這件事就關係到網站的 UX設計和網站架構了。
企業建議做 UX之前，先釐清 UI與UX 的差別，並根據上述提到的 Google UX 設計要點，使自身網站進一步朝使用者的體驗需求靠攏。
透過SEO、數位廣告、社群、口碑及KOL多渠道行銷資源整合，
打造全方位的網路行銷通路佈局，
數據驅動完整的行銷漏斗達到獲客、養客、留客3大黃金流程！
免費預約數位顧問諮詢
Inbound Asia集客數據行銷公司，專注於集客式行銷服務，
協助客戶網站建置、SEO流量成長、社群操作、內容行銷、數位廣告、數據分析，
以專業數位顧問角色協助客戶成功！
