網路上對於 UI 和 UX 的謬談 這篇留言數量頗多,其中一則留言我另開這篇文來回答。

這張圖是 Dan Saffer 畫的,指的是 UX 包含那些範圍,可以看到並沒有「UI」的圓圈。

他說:「UX 包含產品或服務的整體經驗,而且也包含UI。UI 由視覺設計(外觀和感覺)和互動設計(如何運作)組成。」

可以得知 UI 在互動設計和視覺設計交錯的那個區塊。

既然 UI 設計由視覺設計和互動設計組成。組成代表的是兩者必需同時存在。你不會說「水是 H2O 組成,所以 H2 是水,O 也是水。」

介面必須包含輸入、輸出、運作內容,可以互動才可被稱為 UI,也就是說不能動的通通不能被當成 UI。就像你不會說電影海報是 UI、大潤發 DM 是 UI 一樣,它們是視覺設計或平面設計。

動畫是不是 UI? 當然不是,使用者怎麼操作動畫?一定要包含輸入、輸出、運作內容這三點,才可被稱為 UI。(會動不是指畫面元素會動這件事,而且能不能和使用者互動。)

例子

留言中提到 10 個情況,問決策過程,依本文的概念該由誰來處理。

(先假設一切完美、沒有 GGYY 的客戶或主管、沒有時程壓力、沒有技術限制、沒有外在干擾。開發團隊至少包含 PM、RD、UX Researcher、Interaction Designer、Visual Designer 等等,且所有人都有一定程度的實務經驗、知道如何跨領域相互支援、團隊合作和溝通上無問題。)

有個大前提:團隊合作並不是某人說了算,而是某個職務上的人做了這樣的提議後,專案成員皆同意、共同負責。當在大家都同意的情況下,產品失敗不會是其中一個人的責任。

關於 UI 設計的職責劃分可以參考:What are the differences between UX, Interaction, UI and graphic/visual designers? Are these distinctions helpful or damaging to our field?

  • 滑鼠移過購物車圖示,要滑出一個迷你購物車,誰來決定迷你購物車內是否要放產品照片、應付金額的文字尺寸要不要加大?

要不要放產品照片這件事,得先看客戶資料端有沒有照片資料。可能 RD 可能 PM 要去把資料找出來。

畫 Wireframe 的是誰?他要決定畫面包含哪些內容、各種頁面狀態,Interaction Designer。

應付金額的文字尺寸要不要加大?

Interaction Designer 只會處理內容(文字、圖片、聲音、影片)和使用者之間的互動關係,至於內容長什麼樣是 VD 的工作。

PS. 內容:就是文字、圖片、聲音、影片。和文字(是不是今天寒流來)、圖片(是貓還是狗)、影片(是卡通還是電影)無關。

為什麼要加大呢?可能是 UX Researcher 發現目前版本能有改善的空間,找 VD 處理。

UX Researcher 做的是「發現」,他只能告訴你問題出在哪,但沒辦法直接告訴你問題要怎麼解決。解決問題是「創造」,歸設計師思考。思考出解法再交給 UX Researcher 驗證。

  • 承上,誰來決定迷你購物車是整塊從上往下滑入,還是裡面的項目是一條一條從畫面外淡入飛入?

Interaction Designer 必須考慮所有和使用者有關的互動行為,產出 Wireframe 給 RD 和 VD 。

補充:有專門處理動畫的職務。Motion Designer - Jobs - Google Design

  • 滑鼠點擊選擇折價券,會跳出一個「會員現有的折價券清單」的 modal,決定這個 modal 是要選擇折價券之後自動關掉,還是要點選「我已選擇完成」之後才關掉的人是誰?

畫 Wireframe 的那個人決定,Interaction Designer 。

UX Researcher 驗證這個作法會不會讓使用者跑光。

  • 承上,決定這個 modal 在電腦上要多寬,「我已選擇完成」的按鈕要在 modal 的右下角、左下角還是中間的 是?

在電腦上要多寬和按鈕位置是是 VD 的工作。但決定這個畫面上要不要有 modal 、有按鈕,是 Interaction Designer 。

Do Visual Design and Interface Design have a similar job objective?

  • 會員購物明細中,地址、收件人、電話、手機、備註、商品明細、折扣明細……等各種項目的顯示順序。

Interaction Designer 畫 Wireframe 時提出,但不代表 VD 不能改。改完會不會被 UX Researcher 測一測說有問題…不知道。

  • 某按鈕上的文字常常被使用者誤解點錯,讓客服電話接不完,決定按鈕上的文字要怎麼寫的人是?

PM 或 Planner。

不,我開玩笑的。

常常被誤點就是 UX Researcher 的工作,既然他已經知道問題出在文字上,就得提出建議給實作人員。可能兩者會配合多測幾組文字,看看使用者的反應以找出較好的那組文字。

可能另外有專人負責文案,如果沒有特定的人,只好看 Wireframe 誰畫誰處理了。(Interaction Designer:「又是我!?」)

補充:Google 有專門寫文案的職務。 UX Writer - Jobs - Google Design

  • 承上,要改善系統流程,避免誤點了之後發生無法挽回的事,提出新流程規畫的人是?

提出新流程規劃=舊有問題待解決,UX Researcher 必須找出舊版的問題出在哪,給 Interaction Designer 建議,共同討論新作法。

UX Researcher 會告訴 Interaction Designer 使用者的操作習慣、容易出錯的部份、為什麼出錯。至於怎麼修改是 Interaction Designer 的工作。

改完再給 UX Researcher 驗證…

  • 某一線上型錄頁面中有一個 Download 按鈕,點擊之後會把檔案下載到本機。決定按鈕上的圖示要用一朵雲+向下的箭頭,還是磁片的人是?

VD。

如果被 UX Researcher 測出使用者看不明白就會被打回重做。

  • 某一線上型錄頁面中已經有一紅、一黃、一藍的按鈕,現在要再增加一個功能與其他顆完全相異的按鈕,決定新的按鈕要用什麼顏色的人是?

和視覺有關的都找 VD。

至於新的顏色能不能讓使用者看得懂,UX Researcher 要去測。

  • 執行某動作之前有一段說明文字,「避免有人沒看說明,要先等待 5 秒才會跑出執行按鈕」,決定「」內操作流程的人是?

Interaction Designer。至於 5 秒會不會太久、或這樣作法會不會讓使用者抓狂…UX 要去測。

. . .

上線前會有 UX Researcher 把關品質的,不然沒辦法證明這樣子的設計能給使用者良好的體驗。上線前先測一下,總比上線後被使用者罵來得好。(快和頭皮屑一樣多的研究方法就是為了各種情況、階段的測試和驗證而生,種類繁複應有盡有…)

但一個產品或服務給人使用的體驗不好,絕對不只是 UX 的錯,整個團隊都有份。程式寫太爛常常崩潰會失去使用者的信用啊!程式穩定和與設計師們無關對吧。要知道整個專案成員都在執行「讓產品給使用者更好的體驗」這項任務。

團隊合作不是把自己手上的事情做完扔出去就沒事了。要去看看其他專案成員在做什麼,拿到自己給出的檔案後接下來會怎麼處理,自己有沒有可能配合對方做微調讓雙方都好做事。

先不管是不是我亂嘴砲胡扯,起碼跨領域多懂一點、讓工作順利,多學一點總是好的。

補充:

Jobs - Google Design

Google 分工的很細,有些職務如 Filmmaker、Industrial Designer,我就不熟悉這個領域的工作內容了。

comments powered by Disqus