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是使用者感受與習慣

講解到這Viewider視宇小編將用幾個簡單的圖片說明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包含:

-

UI Designer包含:
UI與UX在CTA按鈕的決策標準 圖片來源:Strategyanddesign
以行動號召按鈕為例(Call to Action, 簡稱CTA),看看UX與UI如何分工:

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網站設計建議:
過多留白、過小字體

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網頁上。

延伸閱讀:

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是否加入動畫效果等。

延伸閱讀:

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

MOMO購物網-活動露出

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

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

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

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

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

「推薦功能」各種型式:

-

追加銷售(upselling)原則:

如你在網購平台購買一支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分兩種專業存在必定有它的道理,最好的方式還是讓兩種專業的設計師相互配合,才能呈現最完整的網頁。

跨境電商-關鍵知識:
【本文作者:Erian-Viewider 行銷部經理

台灣視宇 ViewEC | 跨境電商整合專家

台灣第一家整合電商平台數據並發展大數據人工智能工具的代營運服務商。擁有eBay官方認證之推介導師企業及第三方大數據及刊登…

台灣視宇 ViewEC | 跨境電商整合專家

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

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

Written by

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

台灣視宇 ViewEC | 跨境電商整合專家

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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