UI / UX 與 Usability (易用性) 區別是什麼?如何影響網站設計?

設計師不可不知的技術差異

#網站知識

UI / UX 與 Usability (易用性) 區別是什麼?如何影響網站設計?

談論到現代的網站設計,肯定無法脫離 UI 與 UX 的討論,以及探討兩者的差別,同時也有一個以前常見但現在很少用的名詞,我們稱為「易用性」(Usability),今天這邊文章,我們稍微介紹這幾個名詞,並說明他們的異同。

什麼是 UI 與 UX?

首先探討最多人討論的,什麼是 UI 與 UX?其實在早年可能還有許多人分不出來,但這幾年隨著各大網站不停的努力介紹,市面上的公司漸漸開始理解 UI 與 UX 並不是同一件事,也不是同一種工作。

UI 原文為 User Interface,也就是人門用來操作軟體的介面。如下圖,可以看到右邊的 UI 更強調於「視覺設計」、「色彩調整」、「版面規劃」與「字體的選用」等等,更偏向於感性層面。

而 UX 稱為 User Experience,指的是人們使用軟體時的整體感受。下圖左邊的 UX 更傾向於討論「互動」、「原型」、「資訊架構」與「使用者研究」,更偏向感性的層面。

當然,他們也有一些重疊的領域,參考下圖(來源

我們必須要有一個理解,UI / UX 雖然常常放在一起講,但他們其實是完全不一樣的專業知識領域,一般來說,不應該期待一個單一的人力可以兩邊精通。專業的 UI / UX 工作者,應該要選擇一邊精通,因為這兩個領域在國際上的軟體發展領域中,都有非常專業可以深造的知識體系。但是,又不應該只會中一邊,確對另一邊的知識完全不熟,因為兩邊是息息相關的。

相關知識體系可以參考 UI/UX Roadmap:

2020 UI/UX Designer Roadmap 繁體中文版

UI UX Roadmap 2024

UI 設計師的工作是什麼?

UI 設計師,主要的工作就是繪製與規劃視覺可以看見的 UI 介面,但並不是只要會「畫圖」就好了。UI 設計比起一般的設計,有非常多知識與眉角。例如如何用線條與色塊引導使用者操作、如何優化閱讀動線、如何善用心理學降低操作學習負擔。這些東西都來自非常多的理論與學習,一個成熟的 UI 設計師,必須要是有高度同理心的人員,要能設身處地的去想像使用者操作學習時的感受。

至於 UI 設計師的常用工具有哪些,例如繪製 Prototype 的 AxureRP, Invision, Marvel 等等,繪製 UI 專用的 Figma, Adobe XD, Sketch 等等,還有與工程師協作用的 Figma Dev, Zeplin 等工具。

UX 企劃人員的工作是什麼?

我們稱 UX 為企劃人員,是因為 UX 嚴格說起來不屬於視覺設計,其實他的工作更近似於行銷企劃人員。UX 的領域包含前期行銷如何集客,進入網站後的文案、引導、操作流程等設計、網站導覽頁面結構規劃、介面操作感受等等。其中最重要的是,需要包含前期研究與後期評估成效,所以 UX 人員必須從數據理性出發。

至於 UX 人員常用的工具,包含用來繪製 Wireframe 的 AxureRP, Balsamiq,統計分析用的GA, Hotjar, Fathom 等等,A/B Testing 用的 Userpolit, Amplitude, VWO 等等,團隊規劃討論用的 Miro, FigJam, Mural 等等,或是調查分析用的 SurveyCake, SurveyMonkey 等等。主要就是嘗試掌握並理解數據,幫助作未來的改善。

via newbreedrevenue

什麼是 Usability (易用性)

Usability 又稱易用性、優使性或好用性,是 UX 這個詞風行以前,主要用來討論 UI 操作介面感受的詞。Usability 主要專注在 UI、HCI (人機互動)、Interaction(互動設計)、Universal Design(通用設計)、數據化分析等等層面。你會發現其實 Usability 研究的東西與 UX 非常像,只是他較著重於「如何優化 UI」這件事。

Usability 的主要概念是「Don't Make Me Think」,他認為好的 UI 設計,是直覺的、容易學習的,不需要強迫使用者重新認知全新的操作方式。如果能直覺操作就應該直覺操作,有提示就應該提示,如果過去有人用類似的方法,就直接學習,讓使用者不用思考就能沿用過去經驗,這就是 Usability 的主要概念。

下圖是十幾年前的 Firefox 首頁,他是少數將下載按鈕直接放在首頁,讓你下載了就走的設計,因為 Mozilla 認為,你會去網站上就是為了下載軟體,不會有別的目的,達成目標就快離開吧。這成為早期 Usability 的經典案例之一。

Image from here

下圖則是一個經典案例,來自「Don't Make Me Think」這本書,他認為人們不會專心閱讀,而是只會快速掃描頁面。設計師容易一廂情願的設計大量文字給使用者閱讀,嘗試引導他們一步一步完成任務,但其實使用者根本不會照著路徑操作,而是快速掃描頁面看看有沒有亮點,然後找到(或找不到)自己想要的東西就會立刻離開。

結論:專精,但不應偏廢

從上面可以看到,無論是 UI / UX / Usability 三者其實個自有其專業領域,各自延伸但其實也息息相關。好的設計師無論專精於哪一邊,都要額外廣泛涉略相關的知識體系,幫助自己做出更好的設計。

但無論如何,最重要的是認知到,設計軟體就是在「幫助使用者解決問題」,一個好的 UI / UX 設計師,應該是設計出一個讓人感覺不到的介面,但是無意間就已經完成自己要處理的任務。在 UI / UX 領域,越是感受不到的設計,才是最好的設計。

相關文章