跳到主要內容區塊

政府網站營運交流平台-中文

網路趨勢與社群應用分享

給UX學習者的入門指南(下) — UX所涵蓋的領域

在前一篇文章中,我們大致上介紹與定義了UX,大家也應該都了解到UX有多麼的廣泛,要真的專精UX的所有面相是十分困難的。實際上,這世上並不存在著一個科目叫做UX,UX是各式各樣不同的專業相互累加最終集大成者,因此若是沒有相關根基,比方說資工、設計、或心理背景,那在學習UX的道路上容易碰壁,有一種雖知其然卻不知其所以然的感覺。所以在這裡我依照自己的經驗,列舉一些可以作為UX根基的核心與相關科目。

這裡要特別強調,我並不一定是這一些領域的專家,僅僅是將我所學到的以簡化的方式呈現給各位讀者,所以如果你發現我有所偏頗或是提供錯誤的資訊,還請不吝指正。

UX在學什麼?

為了區分,以下我將這些專業分為核心以及相關科目,其中核心科目指的是如果你接受正規的UX訓練,比方說認證課程或是學士碩士學位(博士不在此討論),這些將會是必修的核心科目。但是只靠這一些核心是不夠的,一個好的UX專家,還必須要熟悉其他的相關科目,並將之作為根基與核心科目相連結,畢竟UX最重要的便是一切都有其道理,不是靠著感覺或是個人喜好,而是透過這種科學的研究方式來創造出最人性化的設計。

核心科目

核心科目顧名思義便是UX的主要核心,不管你將來要往Researcher、Designer、甚至Engineer的方向走,這一些科目都是必須要學會並且融會貫通的。這些科目也是所有UX相關的學位課程都會要求的必修科目。

User-Centered Design(使用者中心設計)

關於UCD在前一篇文章中已經有所介紹,這裡不再贅述。對我來說UCD便是詢問5W1H:

  • Who:誰是你的產品/系統/服務(以下簡稱產品)的目標族群?他們有什麼樣的特質?
  • Where:產品會在哪裡被使用。該環境有哪些特質與該注意的地方?
  • When:產品會在什麼時機下被使用?
  • What:使用者想要做什麼?你的產品想讓使用者做什麼?
  • Why:為什麼使用者需要做這件事?為什麼他們要使用你的產品?
  • How:在知悉5W之後,你的產品如何能夠幫助使用者,達到他們的目標?

作為UX的核心,UCD可以說是貫串所有核心科目以至於相關科目的重要專業。UCD不應該是一門學問,而是一種哲學與習慣。雖然你可以找到很多文章或是書籍在教導UCD,但方法什麼的老實說並不重要,重要的是最為一名UX從業者,你應當無時無刻不在思考如何能夠給予你的目標使用者更好的體驗,釐清5W1H,並融合其他相關的專業知識來為你的設計與研究背書。

Prototyping (原型設計與製作)

Prototyping是使用者研究與設計中很重要的一環,主要的目的是透過製作相對低成本的原型來觀察使用者如何與之互動。除了學習各種不同的Protoyping方式,比方說Wireframing(用Sketch、Illustrator、或Axure RP等軟體來製作UI)、Paper Prototyping(使用紙張或是手邊的材料拼貼製作出模型或是介面)、Physical Prototyping(使用諸如3D Printer, Laser Cutter等等機器來協助製作原型)、Hardware Prototyping(使用Arduino等開發版)、Wizard of Oz(用模擬等方式來呈現產品的運作與互動)等等,更重要的是了解哪一種Prototype可以回答哪一些設計上的問題,以及如何在成本與時間的限制下製作出能夠反應真實使用情形的原型。舉例來說,如果想要設計一個網站,就必須依照不同的設計問題,在不同的開發階段製作不同的原型:

  • 如果想了解整體內容的配置,可以使用Paper Prototype,把東西大致上畫出來即可,抑或是用Sketch製作Wireframe
  • 想知道當使用者按下一個按鈕之後,可以接受畫面在反應上有多少延遲。這種就無法用Paper Prototype呈現,可以考慮用PowerPoint的計時器。
  • 想要知道這個網站是否真的可以提供使用者要的內容,那便需要製作MVP(Minimum Viable Product:可以最低限度的呈現產品運作的原型)

製作原型的主要目標是快速,所製作出來的原型可以很醜,很陽春,但需要能夠展現產品之核心設計概念(Design Concept)。充分的掌握原型製作的技巧將可以大大的提升獲得使用者回饋的精確度以及提升和團隊中其他成員的溝通效率,確保大家最於產品的理解是一致的。

這裡提供一個我在碩士班製作的畢業專題,一個關於室內空間設計的VR Application的Prototype影片給大家參考看看。

Interaction Design(互動設計)

互動設計所探討的是人和產品間的互動(Interaction),產品如何引導人正確的使用(Affordance),以及產品如何給予人回饋(Feedback)。互動設計嘗試去詢問的問題包含但不限於:

  • 何時該使用標籤、使用哪一種標記(文字、圖像)?
  • 該如何透過視覺、聽覺、觸覺等感官呈現資訊與給予回饋?
  • 使用者如何要如何與產品互動?(觸控、滑鼠?)
  • 如何正確的引導使用者使用產品?

由於上述的概念過於壟統,所以Gillian Crampton Smith在探討了各式議題之後,將之切割為4個維度(Dimension),隨後Kevin Silver又再加上了一個維度。而這5D便成了當代Interaction Design的基礎。

1D —Words: 探討文字的使用時機與內容。文字必須要提供足夠但不過量的訊息予使用者。

2D — Visual representations: 探討任何的圖像,包含圖片、文字、圖示、按鈕的使用,和文字一樣,這些圖像亦需要給予使用者互動上的訊息。

3D — Physical objects or space: 探討使用的媒介、實體的空間與使用情境。使用者透過何種媒介與設計互動?在何處使用?

4D — Time: 探討任何會影響到使用感受的感官上的回饋。比方說動畫的快慢與聲音的延遲等等。更進一步的還有使用者使用的時間長短以及情境等等。

5D — Behaviour: 作為最後一個D,5D探討的是How,在前面4D之上,產品會被如何使用?使用者的行為為何?以及該如何夠過前面4個D來定義一個產品該提供何種的互動經驗。

如果覺得上面有講的有些抽象,Interaction Design Foundation製作了一個小動畫來介紹這5D是如何被整合進網站設計之中的。

Interaction Design 5D
來源:https://www.interaction-design.org/literature/article/what-is-interaction-design

User Research Methodology(使用者研究法)

使用者研究法所介紹的是各式各樣的研究使用者的方法,包含了質化(Qualitative)與量化(Quantitative)的研究法。前者包含了大家比較常聽到的,比方說用戶訪談(User interviewing)、焦點團體(Focus group)、使用者測試(User testing)、日誌法(Diary study)、情境訪查(Contexture inquiry)等等,後者則包含問卷(Survey)、伺服器紀錄分析(Server log analysis)、A/B測試(A/B testing)等等。學習使用者研究法最重要的便是去了解各種方法的優缺點以及實際的執行方式,比方說如何撰寫Screener、如何找受試者(Recruiting),需要多少受試者,得到的結果可以以及不可以回答哪些研究或是設計上的問題等等。更重要的是如何整理得到的結果以便將之換為可以執行的Insight和Recommendation。

一些會在使用者研究法中學到的實驗設計上的範例包括:

  • 眼動實驗要有多少參與者才可以得到有效的結果?
  • 使用者對不同設計的偏好度是否有顯著的差異?
  • 問卷調查要得到多少份的回應才能足以推論母群?

除此之外,也會有一些較為專業的研究問題,可能需要整合不少相關研究知識才能規劃研究方法,比方說:

  • HoloLens的影像亮度要多少lux才能夠確保使用者可以清楚的同時看到影像與其背景?
  • 不同的介面設計在不同認知負載(Cognitive workload)下是如何影響到使用者的表現?
  • 廣告應當設置於網頁上的哪個位置才能夠吸引到使用者的注意力(Attention)但又不至於影響其工作效率?

Christian Rohrer製作了一張表格,羅列一些常用的使用者研究法,並將各方法偏向質化或量化,探討的是態度(Attitudinal)或是行為(Behavioral)來予以劃分,有興趣的可以參考看看。

常用的使用者研究法
資料來源:https://www.nngroup.com/articles/which-ux-research-methods/

相關科目

除了上述的核心科目以外,UX專業人員之所以可以侃侃而談並應對各種多元的研究與設計問題,便是根基在其他和UX有或進或遠關係的其他專業領域。所以不管是想要以UX為專業的學生,或是想要轉行到UX領域的專業人士,亦或單純只是對UX有興趣,想要將之帶入自己的工作或生活之中的一般大眾。學習下面的這些科目將可以大大的擴展你的視野,讓你在UX這條路上更加如魚得水。

Experimental Design(實驗設計)

實驗設計涵蓋如何定義一個研究問題、設計實驗、排除掉干擾因子,執行研究上的技巧與細節、到最後數據的分析與結果呈現。

使用者研究是一門以人類為對象的研究學門,也因此有很多必須要注意的細節。實驗設計在研究方法這個學門上更進一步的深入研究中所需要用到的平衡(Counterbalancing)、可能遇到的混淆變相(Confoundings),效度與信度(Validity & Reliability)、各種分析與統計的方法等等。

實驗設計是執行一個嚴謹且高品質研究的基礎,特別是有朝一日要將研究發表於期刊或研討會上,即便在業界鮮少進行如此高度控制的研究。不過對於立志要進大公司做Design Research的人,深入了解實驗設計是必要的,而且最好還有相對應的實作經驗。這也是為什麼大公司的User Researcher偏好找實驗心理學或是人類學的碩博士。

經典的索羅門四組設計(Solomon four-group design)
經典的索羅門四組設計(Solomon four-group design)

Cognitive Psychology (認知心理學)

心理學的範圍非常的廣泛,而其中專注於探討人類如何應對與處理環境訊息的領域有兩門: 知覺心理學(Perceptual Psychology)以及認知心理學(Cognitive Psychology)。其中知覺心理學探討的是我們如何感知資訊,比方說眼睛的如何接收光線,聽覺系統如何運作等等,而認知心理學則探討人在獲得這些資訊後,是如何進行處理以至於影響到我的認知與行為。

認知心理學可以說是心理學裡面作接近UX的一塊,也因此學習這門學問將可以大大的提升對人這個要素的理解。其所探討的範圍包含但不限於:

  • Perception(知覺): 前面所說的知覺心理學,探討人如何從環境中獲取資訊。
  • Attention(注意力): 人類如何選擇性的接收或是處理資訊。
  • Learning(學習): 人類如何增進其對於環境中事物的反應表現。
  • Memory(記憶): 探討記憶的種類、成形與限制。
  • Concept formation(概念的成形):人類如何能夠歸類、彙整不同的訊息形成可以應用的概念。
  • Reasoning(推理): 探討所謂的邏輯是成形並且被評估與改良。
  • Judgment & decision-making(決斷): 探討人類如何統整訊息並做出判斷。
  • Problem solving(解決問題): 當面對複雜的問題時,如何將其分解並逼近答案。
  • Language processing(語言處理): 語言的學習、理解與使用。

認知心理學很大程度的構成了現今的UX design guideline,比方說在人因工程中時常探討對於環境狀態的意識(Situational Awareness),對於系統反饋的感受(Perceived Performance)、因為注意力的限制而產生的忽略現象(Inattentional blindness)等等。

除了認知心理學以外,還有不少的心理學領域也與UX相關,比方說完形心理學(Gestalt Psychology)強調「整體不同於其部件的總和」,其四大關鍵特徵整體性(Emergence)、具體性(Reification)、組織性(Multi-stability)和恆常性(Invariance)發展出了很多不同的設計與資料視覺化方法。而工業心理學(Engineering Psychology)則彙整了各種人類感官認知的特性以及限制,為學習人因工適學的人所必須了解的學門。

由 Erik Flowers所製作的UX和Psychology的Infographic
由 Erik Flowers所製作的UX和Psychology的Infographic, 原版可以在http://www.helloerik.com/the-brain-behind-ux找到

Information Architecture (資訊架構)

資訊架構所研究的是如何有意義的整合與分類資訊,包含系統組織、導覽、及分類標籤的組合結構。而現今Information Architecture這個學門主要以數位環境為對象,探討傳統上的資訊和設計方法如何在數位平台上實踐,其原先被運用於知識管理系統(Knowledge management system)和圖書資訊系統中,但先今幾乎所有的網站和App都有應用到其設計原理。IA的核心有二:可用性(Usability)和可尋性(Findability)。前者探討的是系統是否容易學習、有一致性、提供足夠的反饋、允許使用者輕鬆的在不同區塊之中來回等等,後者探討的則是訊息是否被合理的排列、適當的標示、有意義的結構以至於使用者可以很容易的找到其所要的資訊等等。

資訊架構被廣泛的應用於各種網路服務之中,其中又以圖書館系統和線上購物網站最為重要,因而會通常會請專職的資訊架構師(Information Architec)或是內容管理者(Content Strategist)來做設計。而對於一般的App和網站來說這則會是UX Designer和Researcher的責任,有名的Card Sorting便是一個常見的IA方法。適當的了解IA可以讓UX Designer由上而下的理解整個產品規劃,並進一步的設計出有效且合理的內部關聯性與如何呈現複雜的內容。

IA的八大項目
IA的八大項目,取自A Beginner’s guide to Information Architecture

Front-End Web Development (前端網站開發)

前端設計開發一般指的是透過撰寫HTML、CSS、JavaScript(以及相關的框架(Framework)、比方說Angular.js、React.js、Vue.js等)來開發出可以實際運作的、給使用者使用的介面與服務。除此之外,有包含測試不同的動畫或轉場效果(Animation),以及製作簡單的Web App來驗證設計。對於UX Designer來說,高度的程式開發能力並非必要的,因為真正的開發是由工程們來執行,UX Designer僅需要給予其產品呈現上的細節規格與互動效果。

前端開發和一般程式開發有些不同的是其演進的速度非常的快,每幾年甚至每年就會有全新的技術或是Framework出現,不然就是瀏覽器的核心與既有Framework的更新,這些都會迫使開發者必須要不斷的關注並學習各種新的技術,甚至會遭遇到某些技術被棄用而面臨需要大改程式的挑戰。比方說過去紅極一時的Flash現在幾乎已經銷聲匿跡,Angular 1 到2的大幅改動,React和Vue的崛起等等。所幸對於UX Designer來說,學習前端開發最重要的目的便是驗證設計,把設計想法透過Code呈現出來以便進行使用者測試或是將之呈現給工程師看以減少溝通上的失誤,所以只要能夠好好的學好一套Framework,能夠把自己的設計想法呈現出來就足夠了。在這之上,開發的經驗也可以協助在設計之時,避免開出太過天馬行空的規格,並更好的和工程師們合作。

Google trends所顯示的幾個主流Framework在這幾年中的搜索上的競爭
Google trends所顯示的幾個主流Framework在這幾年中的搜索上的競爭

Visual Communication Design (視覺傳達設計) &Data/Information Visualization (資料視覺化)

視覺傳達設計是設計中的一個分支,雖然也探討美學上的設計,比方說字體(Type)、顏色(Color)和間隔(Space)的運用,但更重要的如何有意義、有效率、淺顯易懂的呈現複雜的資訊。而資料視覺化則是更進一步的探討如何將複雜得資料數據視覺化以便觀看者可以簡單的理解甚至操作,包含圖表、表格、統計繪圖甚至是如何加入動態或互動元素等等。在這之上,也包含了如何在設計中加入關於品牌與形象的元素,確保視覺上的一致性,以及適當的調配呈現訊息的數量與方法等等。簡而言之便是如何透過視覺上的元素來向觀看者傳達想要的資訊。

視覺傳達設計可以說是所有UX Design的基礎,相較於美術的部分,UX Designer更應專注在如何減少使用者的負擔,幫助使用者在眾多的資訊中找到目標,以及協助使用者更加簡單的理解資訊的內容。這在這個資訊爆炸的現代尤其重要,同時不只是對外,在公司內部提Proposal、組內或是跨部門溝通時,也會需要良好的視覺呈現來增進溝通的效率。說實話不只是學UX的人,現代社會種的任何人都應該要掌握基礎的VCD和Information Visualization能力。

值得一提的是一般來說,UX專家是不太需要去煩惱美術上的設計,在中大型公司之中多半都會有專職的視覺設計師來進行,UX Designer只需要提供Wireframe或Prototype即可。然而,現實中很多UX Designer都被迫兼做視覺設計(這也是網路上的一個萬年議論: UX Design不等於UI Design的一個原因),所以如果公司對於UX Design和Visual Design的區別不清楚,多半都會以Visual Design的角來切入。但排除掉這一點,學好VCD與Data/Information Visualization無疑可以增進設計上的廣度、品質與精緻度。

資料視覺化的例子The Disciplines of User Experience Design
資料視覺化的例子The Disciplines of User Experience Design

Project Management (專案管理)

專案管理是一門運用各種管理的知識、工具和技術來使一個團隊得以起草、規劃、執行、監控、與結束一項專案已達到預定目標的學門。這裡所指的管理包含了領導、組織、用人、計劃及控制等五項主要工作。專案管理是一門幾乎完全根基在實務經驗上的學門,雖然充滿著不少的理論,但是念10本專案管理書可能還比不上實際上管理一次專案的經驗。

適當的專案管理能力對於任何一名可以獨立作業的人員都是必要的,對User Researcher來說,由於很多的User Research計畫十分的複雜,往往需要投入大量的人力與資源,甚至跨團隊、跨公司與跨國,雖然說團隊中的PM通常可以協助處理,但是對於很多特定的研究資源與經費多半都需要由Researcher去爭取,並需要進一步制定計畫所需的時間與人力。而對於UX Designer來說,由於UX Designer往往是團隊中UCD的推力,因此理想上應與PM合作將UCD植入各個設計與開發階段,甚至主持工作坊或團隊活動來提升團隊整體對於UCD的意識。

這裡把這一門學問放在最後說,主要的原因在於專案管理對於剛踏入這個職場的UX專家們並不是非常的重要,可以有所理解很好,但通常團隊中會有專職的PM(此指Project/Product/Program Manager)來進行專案管理,所以只要做好自己的本分並充分地進行團隊溝通即可。然而,隨著經驗的增加,UX Designer和Researcher將會漸漸的轉換到一個管理專案的位置,需要統整小組內外的資源、管理組內的工作進度、預估並規劃好需要的執行時間並進行大量跨部門的合作,這時候專案管理就會成為一個很重要的技能。所以有志於想要領討一個團退的各位建議花時間來了解這門學問。

5 Phases of Project Management
5 Phases of Project Management

總結

UX是一個新興的學門,雖然從二戰時期的Human Factors開始就不斷的在發展,但相對於其他的科學研究其仍然相當的年輕,並非常容易地受到當今科技與主流文化的影響,進而產生各式各樣的子領域。比方說隨著智慧型手機的普及興起了研究UX for 小型手持終端的研究,智慧電視的出現則促使各大公司投資研究10 feet UX(中距離下的使用者經驗),2016年虛擬實境(Virtual Reality, VR)技術的崛起,更是引領了大量UX專家投入研究如何在虛擬環境中提供良好的使用者體驗與互動模式。而隨著更多不同領域專家的投入,過去沒有用在UX研究或設計的技術或是研究法也慢慢地被加入到了這個領域之中。比方說Expedia和Facebook開始採用腦電圖(Electroencephalography, EEG)去探討人們對於不同設計或是廣告的反應、或是使用Narrative Clip這個小型相機來記錄人們一天的生活以理解使用者的行為模式、抑或是透過VR來創造一個虛擬的研究室,讓使用者和尚未開發出來的產品在不同的環境中互動等等。對於一名UX專家來說,我們必須要不斷地學習新的事物,因應研究與設計的需求來尋找合適的工具,並進一步的探討如何連結學術與業界,將不同領域的研究與設計法相互整合,以便達到我們的終極目的:創造出一個正向的、良好的使用者體驗。

這一系列的文章到此也告一個段落了,謝謝各位的閱讀,也歡迎各位有任何問題可以寄信給我,聯絡方式可以在我(最近沒有什麼在維護的)個人網站上找到。最後,我想分享一個Mike Alger關於VR空間中互動設計的影片,大家可以想一想,當面對一個全新的科技時,你會如何進行UX設計與研究。

StevenDong

原文出處Medium;政府網站營運交流平台授權轉載