這學期我在大學兼了 2 學分的選修課,說是設計系大三生的 UI 課,實際上有一半在講使用者經驗研究。沒有講使用者經驗就教學生直接動手畫 UI…我相信視覺設計是他們的強項,不需要我來錦上添花,所以這次準備的課程內容大都在訓練他們的「邏輯」。

(這篇文應該在一個月前跟著上課進度貼出來,但今年下半年度人太忙太累幾乎垮了,看醫生養身體,拖到現在才有力氣開始寫文。)

課程規劃

一學期 18 週的課程規劃如下,看得出來比較偏重使用者測試的部份。我認為軟體操作相關的教學資源非常豐富,身為設計學院多媒體系的大三生還不熟 Photoshop 真該回去重修,不想浪費課堂時間教軟體操作。反倒是湊一組人聚在一起用「研究方法」討論產品設計這件事非常難得,就連在業界搞不好也沒有多少機會可以實際演練…好吧這是我的私人偏見,訓練未來的設計師邏輯能力越早開始越好,不然畢業後和工程師合作會被釘得滿頭包。

  1. 互動設計、介面設計、使用者體驗是什麼。業界開發流程
  2. 分析工作角色、工作任務、目標,層級工作分析法
  3. 使用者測試訪談
  4. 學生自己實作使用者測試訪談
  5. 1010 放假
  6. 親和圖(上)
  7. 親和圖(中)
  8. 親和圖(下)
  9. 人物誌
  10. 使用者旅程圖(上)
  11. 使用者旅程圖(下)
  12. Wireframe
  13. 優化之前測試的 App(上)
  14. 優化之前測試的 App(下)
  15. Prototype 介紹
  16. Prototype 自訂任務、實測
  17. 期末發表 Prototype 實測影片
  18. 期末發表 Prototype 實測影片

第一週我就遇到問題了,脫離學生時期太久,忘記 2 堂課也不過 100 分鐘,扣掉管秩序、學生問問題…真正能教學的時間可能只有 90 分鐘真的太短,一些研究方法只能拆成數週來講了。

(這邊就當成是上課教材的補充吧,順帶舒發一些個人心情…)

使用者經驗、互動設計、介面設計

使用者經驗

如果使用者體驗存在產品本身,那每個人看到摸到這個產品感覺都應該是一樣的。也就是「這個產品被附與了一個 FU,這個 FU 呢可以灌頂到所有人的腦子裡。」

但現實生活光是一盤義大利麵,有人覺得好吃有人覺得難吃。從上圖可以看得出來,使用者體驗是存在使用者身上,並不是存在「產品本身」,就連摸不到的「服務」、抽象的「品牌印象」都算在使用者體驗範圍內。甚至連企業文化、開發流程、產品策略都和 UX 有關聯。

使用者體驗並不只存在手機或網站裡。我很常舉「迪士尼樂園」當例子。當人們走進迪士尼樂園這個賣夢想的地方時,不管是園區硬體規劃、服務人員、遊樂設施、甚至音樂、食物、紀念品等等,整體氛圍都給人「忘卻煩惱享受玩樂」的印象。這些印象都可以稱為「使用者經驗」。

但只有過去或現在產生的印象才能被稱之為「經驗」,沒有經歷過、未來的狀況沒有辦法被稱為經驗啊!

視覺設計不是 UI 設計,UI 設計不是 UX 設計,可以參考我之前寫過的文章:

UI/UX 相關工作職責參考
網路上對於 UI 和 UX 的謬談
UI/UX 工作的職責劃分

互動設計

互動設計的範圍也非常廣泛,不管是透過螢幕、透過實體產品、甚至是無形的服務體驗都能被稱之為「互動」。

並非只有摸得到的東西才算是「互動」,打電話給銀行的客服人員,你和客服人員進行了什麼樣的對談?客服人員的態度給你產生什麼樣的感覺?

不要跟我說在打電話的過程中你摸得到客服人員啊!但就算摸不到,他們的態度和語氣能影響你的感覺。

很久以前我參加過一個行銷方面的演講,講者說了個非常有趣的故事:

A. 你走在街上,突然聞到一陣咖啡香。繼續往前走看到一間咖啡店,停在店門發現咖啡香更濃郁了。推開店門走進去,不止咖啡香,你還聞到其他食物的香氣。

此時,你對這間咖啡店的印象如何?

B. 你口渴了想找間咖啡店買喝的,當你站在店門口,深吸一口氣,沒有聞到任何咖啡香氣。推開玻璃門走進去,再深吸一口氣,仍然沒有任何咖啡香。

此時,你對這間咖啡店的印象如何?更慘的是推開咖啡店門,聞到漂白水味…是我就轉身離開這間咖啡店了,俺是來買飲料不是來買漂白水的!

香味摸得到嗎?摸不到。但在「去咖啡店買一杯咖啡」這個過程中,香氣能對顧客產生不同的印象,也能讓顧客對這間店有不同的「體驗」。

延伸閱讀:

互動設計概論

介面設計

不要用平面設計的思維做 UI 文中有提到,介面設計包含輸入、輸出、運作規則

視覺設計師和 UI 設計師的差異,請見:UI/UX 相關工作職責參考

目前台灣把介面設計師當成網頁設計師在用的公司非常多,還要求要包 F2E 的工作。我很常收到訊息問:「當 UI 設計師需不需要學寫 HTML、CSS、JS。」

那不就是「網頁設計師」了嗎?不然 UI 設計師和網頁設計師差在哪?一位要做 App+網頁、另一位只需要做網頁?

初學者不需要跨去學網頁技術,有點概念就好,你們要學的東西太多,不要把跨度跨得這麼大。

先把重心放在「看懂平台設計規範」、「和不同部門的人怎麼合作」上。

Apple 設計規範
https://developer.apple.com/design/#//apple_ref/doc/uid/TP40013289

Android 設計規範
https://developer.android.com/design/

Material Design
https://material.io/design/

Bootstrap 設計規則
https://getbootstrap.com/

如果視覺設計的技術不錯,把這幾份看完,能把網頁、App 兜個有模有樣的成品出來,找工作不是什麼太難的事。剩下實戰就靠做專案、以及與他人合作時不停出包糾正修改磨合來成長吧。設計師怎麼可能不出包不被 RD 念、也不可能永遠一次過關的啦!

以前寫過讀者來信:UI 設計流程 ,但這篇文完全沒提到 UX 研究怎麼和 UI 設計過程結合。

本次課程雖然會把 UX 研究結果拿去畫 Wireframe 和做 Prototype 進行使用者測試,但不會提到其他 UI 產出,畢竟時間有限。

回家作業

6 個人一組,各組交 60 個難用的 APP 或網頁。請截圖說明為什麼難用。(建議做成簡報,一頁一個 App,轉 PDF 上傳到 Google 硬碟。)

我在規劃作業時都會以 1 小時的工作量當基準。第一週嘛,先來個很簡單的練手,習慣下,之後再慢慢加深難度…想是這樣想,大概是太輕鬆好寫,我收到「新細明體的簡報」這種玩意,是該慶幸他們沒交「標楷體」過來嗎?讓我立刻放棄當個溫柔老師的念頭,兇一點嚴格一點學生才會認真(好幾位大學教授跟我說教學生要兇要嚴他們才聽話,我不信是我的錯)…之後他們交出來的作業果然好很多,還有拿下 10 分滿分的組別。

作業繳交時限是 23:59,我得改 11 組的作業…半夜被新細明體氣到,颱風尾還不小心掃到老公。

R:「要是電腦裡只有新細明體妳也不能怪他們啊~」
A:「哪個設計大三生電腦裡只有新細明體和標楷體的?不會去下思源黑體?」
A:「你以為設計系和資工系一樣嗎?大學 4 年靠新細明體就能畢業?」

(不、資工系靠新細明體也不能畢業。)

comments powered by Disqus