DMA01
UI與UX有什麼差異?

UI與UX有什麼差異?

What’s the difference between UI and UX

寓意科技

本章將探討何謂 UX 以及 UI 與 UX 的差異

在上一單元我們已經說明了什麼是使用者介面 (User Interface),它就是用戶第一眼看到的產品樣貌,從視覺美感到版面排版都是與 UI 有關。因此,介面上的按鈕、欄位、文字、圖片,任何與用戶可以產生互動的都可被視為 UI 的一環。聽起來UI已經涵蓋了所有操作介面,那麼 UX 到底指的是什麼?

什麼是 UX

首先,UI 和 UX 是完全不同的東西,UX 的全名是 User Experience,顧名思義它的重點關乎用戶在使用產品過程中的體驗,舉例來說:用戶使用的過程是否流暢、簡潔、直覺而自然?是否讓人困惑,甚至不知道如何使用?這些都攸關 UX,我們也可以說 UX 就是「讓用戶能夠無困難地完成任務操作,並達成用戶使用它的目標」的這整個過程。

用戶行為

認知心理學專家 Don Norman,同時也是《設計中的心理學》的作者,他是這麼描述UX:

“User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

– Don Norman, Cognitive Scientist & User Experience Architect

你會發現 UX 在 Don Norman 的描述,並不侷限在介面之上,它跨大到從公司、服務、以及現實生活中的產品。回憶一下你在星巴克的購物體驗,不會只有享用到一杯飲料,同時包含店員對你親切的尊稱,或你獨自坐在店內的一種氛圍,甚至單純到走在路上手持一杯印有星巴克 Logo 的杯子的感受。以Nespresso的產品為例,他們不是只是提供便利的膠囊咖啡,同時涵蓋體驗到這杯咖啡尊絕不凡的享受。實際上,UX 可以說是企業怎麼與用戶互動的一種總稱,其中最直接感受到的則是企業提供的產品,也就是每位產品經理者所負責的產品。

提到 UX 你不得不知道的是由 Peter Moreville 提出的《Usability Honeycomb》。它們普遍公認為 UX 的普世基準,同時也可迅速提供 UX 的基礎。以下我們概要的簡要的說明每個原則:

  • Useful:對用戶是否好用?
  • Usable:對用戶是否容易使用?
  • Desirable:對用戶是否具備吸引或渴望?
  • Findable:對用戶是否易於尋找?或用戶清楚他們正在哪個頁面或步驟?
  • Accessible:你的產品是否也能讓殘障人士同樣易於上手使用?
  • Credible:對用戶是否值得信任
  • Valuable:最重要,也是集所有原則的核心,對用戶是否有價值?

UX與UI的差異

了解 UX 之後,你認為 UX 和 UI 有什麼差異呢?在這裡,為了讓大家更能理解UI和UX的差異,以下用幾個快速例子進行對比。

  • UX 考慮用戶的使用情境;UI 考慮用戶的使用元件。
  • UX 是感官上的總匯;UI 是視覺上的饗宴。
  • UX 尋找產品流程上的解決方案;UI 決定產品的美學樣貌。
  • UX 專注在用戶流程的每個節點串連;UI 專注在產品的那一頁面的呈現。
  • UX 是用戶在完成任務後,能夠帶走的體驗;UI 創造了所有UX上需要的元素。

單元思考

  • 用 Peter Moreville 提出的《Usability Honeycomb》檢視你常使用的網站或應用程式吧!看看這些慣用的網站是否符合這些原則,思考一下為何符合?為何不符合?
  • 察覺一下你的生活中有哪些好的體驗和不好的體驗,試著找人一起討論吧!
寓意科技
寓意科技

寓意科技提供專業的及系統資訊科技管理顧問服務,協助企業規劃並完成軟體建置

fable寓意科技官方網站:https://www.fable.com.tw/

fable寓意科技 Medium:https://medium.com/@fableltd

UX設計師運用Google Analytics協助網站改版的網站分析小技巧
本文延續《談UX設計師網站改版三招:利害關係人訪談/數據分析/Prototype》這篇網站改版話題,從數據分析的角度再整理一次網站改版過程中UX設計師們可以運用的實務技巧。
團隊的 GIT 分支管理策略 (5) : 其他分支模式與總結
分支是強大的,讓我們可以把複雜度切分處理,但分開處理完還需要整合才會是一個完整的產品。
敏捷開發
藉由本文,你會學到: 1. 什麼是敏捷開發 2. 敏捷式開發與瀑布式開發的比較 3. 敏捷開發的適用性