UI UX設計是什麼? 8招教你如何提高網站轉換率

什麼是UI UX設計?

你是不是常聽到UI、UX設計師,但不清楚UI、UX是什麼? 工作範圍上UX、UI有哪些差別? 這篇透過幾張圖讓你快速了解UI、UX差異,並且解析如何運用在網站行動號召CTA(Call to Action)上,提升轉換率的方法。

UI(User Interface)使用者介面,主要是設計頁面上的功能、顧及使用的便利性、整體網頁設計的美學;UX(User Experience)使用者體驗,注重使用者的習慣和感受,安排整個網站頁面的內容流程規劃。

UI是整個互動使用介面,UX是使用者感受與習慣

UI是整個互動使用介面,UX是使用者感受與習慣

講解到這Erian將用幾個簡單的圖片說明UX與UI的差異,讓你能更快了解兩者間的區別。

UI是整個互動使用介面,就像你拿著手機、IPad等使用互動介面都是屬於UI的範疇,UI專注在產品表面、外觀功能上,UI如同桌子、椅子、盤子、和餐具。

UX是專注在解決用戶問題的過程,是站在使用者角度去設計如何符合使用者的習慣、感受與直覺,UX如同服務、食物口味、燈光、氣氛等。

以上定義節錄至Ken Norton — Google Ventures合夥人/Google前產品經理。

UI與UX的工作範疇差異

Writing for designers UI、UX工作範疇差異

UI就是事物的表象,UX就是事物的運作方式。

上圖指出UX常使用網站骨架設計(Wireframe And Prototype)作為工具,設計版面位置該放哪些內容符合使用者習慣? 網站互動如何設計才符合使用者直覺? UX設計師工作還包含,使用者的研究(User Research)的訪談和數據,以及測試情境分析(Scenario),如下圖所示

UX設計圖

使用者研究及情境分析必須透過問卷調查、主要目標受眾分析、眼球追蹤熱點分析、背景調查等,才能分析並得到潛在客群的使用習慣報告。

透過上方的使用者研究與情境分析後,網站基本架構出來後,接著UI才將UX設計師的理念加以實踐,UI是美學工程師,他必須兼顧網頁程式、視覺設計等,包括整個網站的顏色、字型、字體大小、語法運行可行性等。

What’s The Difference Between UX And UI Design?

你還可以透過此影片更加了解UI與UX兩者差異。

你是如何愛上UI與UX

圖片來源: 如何讓你愛上我 從服務設計看UI/UX

UX就像上圖中上半段的位置表示,UX的強項在研究並了解心儀對象,並使心儀的對象心理產生變化轉折,是一種無形的設計過程,在乎「感受」。

UI則是透過一步步實踐所有UX陳述的感受,UI必須思考如何透過「實體」的方式,透過視覺安排設計具體呈現UX想呈現的產品包裝樣式,以達到UX希望產生的心理轉變。

UI和UX工作範圍重疊部分

UI與UX的工作範圍 圖片來源-Asinthecity
UI與UX的工作範圍

Craig MorrisonRecordSetter的產品負責人(Usability Hour的創始人)曾主張:「UX和UI設計之間沒有區別,因為它們是兩個彼此無法比較的東西。」

UX與UI某些層面上有重疊的部分,且分別包含其他所屬的範疇,因此難以相互比較,你可以藉由下方列表更了解UX與UI的範疇。

UX Designer包含:‧互動設計(Interaction Design)‧研究(Research): 包含使用者研究/情境分析等‧資訊設計(Information Design)

-

UI Designer包含:‧互動設計(Interaction Design)‧視覺設計師(Visual Design)/視覺界面設計師(Graphic User Interface Design)‧前端工程(Front-End): 包含html/CSS/JS
UI與UX在CTA按鈕的決策標準 圖片來源:Strategyanddesign
以行動號召按鈕為例(Call to Action, 簡稱CTA),看看UX與UI如何分工:‧UX的使用者行為研究:提出為什麼需要那個按鈕,並如何讓使用者滿意‧UI的視覺設計:是負責設計按鈕的樣貌(如形狀、顏色、大小、特效等)‧UX/UI重疊的互動設計:當使用者點選CTA後,要導向哪個網頁/廣告等。其中UI著重在CTA按鈕功能可行性;UX是著重在CTA按鈕的內容文字、導向的網頁是否滿足使用者習慣、使用者期待。

UI與UX工作內容簡圖比較

UI與UX工作內容簡圖比較 圖片來源:Abdevlabs

UI設計產品外觀,UX發掘使用者需求並由UI改進產品外觀

UI與 UX設計過程的不同 圖片來源:Techtic

UI設計產品實際呈現樣貌,UX設計內容物組合如何滿足使用者內心期待

UI與 UX設計的不同 圖片來源:Deptofmarketing

UI重視工具實用性,UX重視內容物及食用感受

UI與UX如何設計你的麥片早餐 圖片來源:Icarehealth

UI:「你需要什麼樣的用戶介面?」,UX:「為什麼用戶會想用這版的介面?」

UI與UX考量層面的不同 圖片來源:Uxinterface

看到這大家應該大致上了解UI與UX的差異,也由上圖理解到UX必須顧慮的層面廣泛,或多或少有與UI重疊的部分,因此大多數的企業很常將UI、UX搞混,如同Craig Morrison所說這UX、UI是。

下方將開始介紹如何透過UI及UX設計,增加網站的各項轉換率。

利用網站UI與UX設計招提升轉換率

1. 一目了然

Ditto透過動畫展示兩種眼鏡型號效果

一個網站最重要的就是一目了然的畫面,避免在首頁塞入過多的訊息,因此首頁只放最重要的賣點內容,除了引起消費者關注外,還要想辦法讓消費者產生好奇後,往下看看你的產品、點擊你的CTA等。

Ditto網站就是一個很好的例子,它利用動畫引起消費者注意,接著讓消費者知道眼鏡戴上的效果,讓消費者更想知道Ditto還有哪些眼鏡款式。

網站首頁的架構設會由UX開始設計,UX需要透過使用者研究、情境分析了解網站架設時需要使用到哪些功能、獲得什麼資訊,以此來架構網站的選單和層級。而網站的字體、字型大小、粗體、斜體、底線使用上是由UI進行設計,並由UI接收UX指示的功能,做網站實際使用上的設計。

UI網站設計建議:1. 每一行的文字建議在20–30個字的長度2. 每行間距不要超過600–650px3. 內文最小不要小於16px4. 避免使用手寫字體,減少消費者的閱讀負擔
過多留白、過小字體

crazy egg、各式設計理論書籍皆有提及,標題或內容需要有足夠的留白空間,留白除了可以讓消費者的注意力提升20%,更能讓人感受到活力、專注在你的主要訴求上。

留白上唯須注意,若留白過多容易造成渙散、空洞、懶散的印象。

2. 閱讀直覺-響應式設計(Responsive Web Design, 簡稱RWD)

Google 搜尋引擎眼球追蹤分析 (a) 2008年 (b) 2018年

所有的網頁排版、CTA位置設計都需要合乎直覺,而這些直覺分析就是需要UX對使用者進行各項調查,如問卷調查、主要目標受眾(TA)分析、眼球追蹤熱點分析、背景調查等,再設計合乎使用者習慣的網站編排。

Ditto整體網頁視覺瀏覽方向

另外,你可以使用 Resizer 確定你的響應式設計(Responsive Web Design, 簡稱RWD)可以適用在任何網頁架構版型上,不論是手機、平板、電腦都是完整的版面尺寸。

Resizer 測試各載具的版面尺寸

每一個版型都是UX需要逐一設計,UI落實在各種尺寸RWD網頁上。

延伸閱讀:你一定要知道的SEO優化3大技巧|創造源源不絕的免費流量!

3. 恰到好處-使用影片、圖片、符號

符號icon

消費者可以藉由符號快速找到網站訴求重點,若icon(CTA)放的位置符合消費者使用習慣,不僅可以增加網站的轉換率、CTA點擊率,更可以讓你的網站更生動。

在分工上,UX設計icon擺放的位置,UI則是設計確定icon大小、顏色、扁平、使用性等。

客戶評價影片

影片比文字更能抓住消費者的目光,提升消費者對你的商品/服務的信任程度。光是放上客戶替你站台,拍攝好評影片轉換率就有機會增加30~40%以上,增加消費者與你的網站互動程度。

UX將進行使用者研究後,即可以設計或優化網站的首頁、分頁哪些位置該放上圖片、影片等,增加消費者對你的產品/服務了解程度及購買意願;UI則是將影片嵌入至網站中,確定其是否可以使用。

4. 搜尋功能

Amaozn搜尋功能

電商平台、一般網站、部落格,搜尋功能可以大量減少使用者的搜尋時間,以最有效率的方式找到他們所需要的資訊。

Google進階搜尋

很多電商平台、部落格網站都包含了「進階搜尋」功能,讓使用者找到精準的資訊、消費者更快找到可能會喜歡的商品。

UX的工作範圍是在搜尋功能位置設計、搜尋功能需要有哪些細項分類,又該讓搜尋功能在哪些頁面出現;而UI的工作範疇,想辦法呈現UX所指定的位置、頁面,並考量分類功能在頁面的整體美觀性。

5. 指令清楚的行動號召按鈕CTA (Call To Action)

Sparktoro 明確CTA

CTA在任何網站中都是高轉換率不可或缺的元素。這個CTA的按鈕要求必須非常明確,知道在何時導引消費者到網站哪個頁面、採取哪些行動。

Sparktoro在CTA上就指令非常明確,甚至在你停滯未動作時,跳出視窗會出現兩個選項「訂閱Sparktoro電子報跟專家一起學習」、「我不想要學習」,利用看似有選擇的方式,引導部落格使用者點擊「訂閱電子報」的選項,因為UX設計者知道大部分使用者不會希望自己是「不想學習的人」。

而在設計分工上,UX須考量消費者最可能點擊CTA位置、最想讓消費者關注的內容及配置、CTA需要哪些文字內容等;UI則是要考量CTA整體網站的CTA配色、大小、文字效果、CTA是否加入動畫效果等。

延伸閱讀:如何用CTA的14大關鍵-悄悄影響消費者,提升電商平台轉換率

6. 特惠活動、熱銷產品在網站顯眼處露出

MOMO購物網-活動露出

許多消費者研究重複發現:「60%的消費者特別關注商品是否有促銷活動?」這也說明大部分的電商平台消費者都在找特價的商品。

這就是UX的使用者研究、調查的成果。因此,任何主打商品、主推活動放在眼球追蹤的熱點位置至關重要!

7. 網站購物平台必備-「推薦功能」

金石堂網路書店-其他讀者也買

從提升轉換率、每筆訂單客單價上,你的網站平台必定要有推薦功能。

「推薦功能」各種型式:● 加價購● 可能也會喜歡…● 其他人也買…● 大家也瀏覽過…結帳時,可以這麼設計提升客單價● 你還差一本書,即可享有77折優惠● 差50元則享有免運

-

追加銷售(upselling)原則:● 推薦加購的商品價格 (是原購物車中商品價格60%) < 已放在購物車裡產品價格

如你在網購平台購買一支Iphone手機,追加銷售則會跳出手機保護殼、手機擴充功能線材等,且手機保護殼價格可能賣600元、Iphone手機價格則是30,000元以上,因此手機保護殼價格低於60%。

工作分配上,UX決定「推薦」網頁位置,並且確定出現什麼資訊,像是「優惠價格」、「直接加入購物車」、「期間限定」等;UI決定推薦功能中圖片內容、文字效果、整體網頁協調性。

8. 檢查網站各種不必要元素

Online Broken Link Checker 確認網站正確性

為了提供消費者、使用者良好的網站體驗,過多不必要且過時元素都必須定期移除,例如:過期廣告、圖文不符的圖片、惱人的Banner、無人經營社群媒體連結、無助於網站主題正向發展的廣告評論及不相干評論、檢查網頁錯字等。

使用Online Broken Link Checker,你可以檢查網站連結有誤的地方,且即時修復(Google Search Console同樣可以辦到)。

最後…

PChome紛亂的UX及UI設計

過去時代的產物PChome平台,到現代還是網站處於版面亂糟糟、產品照規格不一致,研究影響用戶體驗,當然其中有一原因是程式設計停留在過去思維,在商品繁多的情況下,網頁優化、語法邏輯修改困難重重,是否僅有「砍掉重練」一途?

在「推薦功能」上PChome不會再推薦更多你感興趣的商品,與亞馬遜平台個性化服務相差甚遠。

亞馬遜平台之所以能夠脫穎而出,就是做到了個性化服務,經過不斷測試、優化用戶體驗等,讓各種消費者能擁有個人化選擇進行商品選購、產生黏性,進而讓消費者成為付費會員,享受亞馬遜更多元豐富的服務(Amazon Prime)。

台灣屬於中小企業組成為主的國家,因此UI設計師兼做UX設計師的工作,屢見不鮮。

UX需要有更多的背景知識與調查研究,才能有效地讓消費者在瀏覽網頁時,影響消費者心理並採取行動,達到網頁所需的轉換率;若獨有UX專業,缺乏UI的網站呈現協調性、程式語法能力,那可能網站難以架設完成,即使辛苦完成了一個網站,也是不夠完整的網站。

全球皆有UX及UI分兩種專業存在必定有它的道理,最好的方式還是讓兩種專業的設計師相互配合,才能呈現最完整的網頁。

跨境電商-關鍵知識:如何選擇跨境電商代營運公司? 台灣品牌10大選擇關鍵eBay與Amazon如何比較和選擇? |你的產品適合在跨境電商賣嗎? |教你如何快速進軍海外市場打造品牌|該如何選擇比較Amazon亞馬遜-Rakuten樂天? |兩家跨境電商平台的8大差異如何調查品牌在Amazon亞馬遜-eBay-樂天Rakuten的電商市場需求? –9大產品銷售潛力的調查技巧-什麼是亞馬遜賣家一定要會知識?|什麼是FBA 與FBM |有效交互使用節省成本進軍海外市場Amazon亞馬遜物流FBA是什麼? |亞馬遜FBA賣家實用技巧-費用計算教學Amazon亞馬遜台灣/美國賣家註冊常見9大問題-FDA法規-UPC及EAN是什麼-亞馬遜可以賣什麼? 快速掌握關鍵進軍海外市場-Amazon亞馬遜SEO|產品標題最佳化的7大技巧-提升亞馬遜站內排名-產品轉換率什麼是Amazon亞馬遜站內廣告? 亞馬遜站內廣告投放的5大要點什麼是品牌定義? 實用品牌定位策略7步驟,找到你的產品市場定位策略,打造知名品牌Amazon亞馬遜品牌註冊(Amazon Brand Registry)是什麼? 申請亞馬遜品牌註冊的6大優勢Amazon亞馬遜品牌商店(Amazon Store)是什麼? 亞馬遜品牌商店的5大優勢-提升產品刊登自然流量與銷售-Amazon亞馬遜客戶滿意度-8大技巧提升客戶服務Amazon亞馬遜品牌數據分析工具(ABA) -6大功能|提升品牌電商賣家產品銷售-降低廣告費用Amazon亞馬遜產品攝影優化的8大技巧-提升跨境電商消費者購買率-服務推薦:亞馬遜代營運諮詢服務
【本文作者:Erian-ViewEC視宇 行銷部經理 X Wiser團隊】我是資深品牌/產品/電子商務/網頁行銷企劃,在此分享電商|行銷|社群|網頁設計|設計、品牌經營等,未來預計將分享職場工作術、各類書評/影評等議題,致力讓各種行銷走入人們的生活,樂於享受自己的工作與學習。【官方網站網址】ViewEC視宇跨境電商整合專家 | Wiser亞馬遜代營運管理師【官方粉絲專頁】ViewEC視宇跨境電商整合專家 | Wiser亞馬遜代營運管理師【官方合作方式】service@viewec.tw(跨境電商健檢/代營運/異業合作等)

--

--

--

台灣第一家整合電商平台數據並發展大數據人工智能工具的代營運服務商。擁有eBay官方認證之推介導師企業及第三方大數據及刊登軟體工具認證,同時為日本及台灣樂天市場獨家跨境電商合作執行通路。合作請洽:service@viewEC.tw。

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Wiser秩宇 | 亞馬遜營運管理師

Wiser秩宇 | 亞馬遜營運管理師

亞馬遜官方協力服務廠商,擁有10年亞馬遜銷售經驗,提供營運管理師跨境電商專業輔導/顧問/代營運服務,協助進行品牌轉型以及形象規劃。合作請洽:service@wwwiser.com.tw。

More from Medium

Responsive Design

UI Case Study: Global Girl Media 🎤

Building a Sketch Design System: Tips & Tricks

Designing a responsive landing page design in Figma: A Visual Design Case study

Image showing different layouts and visuals of a website design