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

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

課程規劃

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

  1. 互動設計、介面設計、使用者體驗是什麼。業界開發流程
  2. 分析工作角色、工作任務、目標,層級工作分析法
  3. 使用者測試訪談
  4. 學生自己實作使用者測試訪談
  5. 10/10 放假
  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 年靠新細明體就能畢業?」

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

系列文章:大學生的 UI 選修課

之前我在實踐大學開了一門 UI 設計課,簡單大略地從 UX 研究開始介紹、怎麼察覺使用者的痛點、到 UI Flow、Wireframe、Prototype。在 Blog 寫點除了課堂教學外的延伸思考。

comments powered by Disqus