《UX 三刀流》課程筆記+心得整理 Week 8

1. 本系列內容為 UX 三刀流 2024 春季班 課程進度內容
2. 本篇依據自身當下手抄筆記再次統整歸納為貼文
3. 心得依照講義影片頁面順序
4. 對課程有興趣者可參考

Week 8 ：章節進度 2-3 人機互動設計入門筆記環節

1. HCI 架構人與電腦的對話

(1) 人機互動（Human-Computer Interaction，HCI）

a. 研究「人與電腦互動」的科學，包含 
• 電腦科學 —— 電腦產品、互動裝置研究設計 
• 認知科學 —— 使用者 
• 人因工程 —— 人、互動事物與人造物間關係 

b. CHI （Computer-Human Interaction）＝人因工程在電腦系統中運用

(2) HCI 的核心 

Don Norman：互動循環（Interaction Cycle）

［使］ — 執行：傳達意念狀態或控制———→ ［系］
［用］—————［介面］————————［　］
［者］←—評估：顯示狀態、信息、結果等回饋［統］

a. 執行（Execution）階段的組成元素：確認目標、形成意圖、將執行順序具體化、執行動作
b. 評估（Evaluation）階段的組成元素：感知、解析、評估系統狀態
c. 人機互動由「意圖」主導任務進行，對裝置進行「控制」，並由介面結果「評估」成效

(3) 人機互動設計上的兩個落差（易用性評估）

a. 使用者規劃的行動和系統接收兩者間落差（Gulf of execution） 
b. 系統表現和使用者期待之間的落差（Gulf of evaluation）

(4) 使用者介面皆是支撐人機溝通的橋樑

a. Commend Line Interface （CLI）：編輯式、標準嚴謹，ex. 鍵盤滑鼠 
b. Graphic User Interface（GUI）：圖形隱喻、探索式，ex. 觸控螢幕 
c. Nature User Interface （NUI）：直接互動、直覺式，ex. 聲控裝置

(5) 人機互動設計在「優化人與機器間的效益」

2. 人機互動設計的範疇和應用

(1) HCI 的任務：人、機、任務組成下進行設計與研究

a. 使用者：資訊處理、語言邏輯、人因工程與人體工學
b. 電腦：輸入輸出裝置、對話技術（元件）、圖像、架構邏輯
c. 應用領域和情境：社會組織與工作、應用場域、人機協同
d. 發展流程：洞察需求、實作技術與工具、評估技術、雛形開發與案例分析

(2) 學習 UX 必須從「認知及互動設計」的主題切入學習「人與電腦的互動本質」

(3) HCI 研究的理論與原則提供了UX設計時的基本邏輯

a. 理論（Theories）：從根本了解人與系統互動原理，理解人們認知處理狀態
b. 原則（Principles）：理論歸納後引導設計方向
c. 規範（Guidelines）：具體制定主題與相應規格達到設計溝通與一致性

(4) 經典的 HCI 設計原則之一：Norman’s 7 Principles

a. 運用「外界和腦內知識」，避免用戶過多記憶
b. 「簡化」任務結構
c. 訊息「可視化」，降低執行和評估的鴻溝
d. 建立「正確匹配」（心智模型）
e. 合理利用自然和人為的「限制因素」
f. 「容錯」設計
g. 當所有其他方法都失敗時，「標準化」

(5) 經典的 HCI 設計原則之二：Shneiderman’s 8 Golden Rules

a. 力求「一致性」
b. 「通用性」化的可使用性
c. 提供「明確的反饋」
d. 設計「對話框」以產生回饋訊息
e. 避免錯誤 f. 允許「返回重做」 
g. 讓用戶「掌握控制權」
h. 「減少」短期記憶負荷

心得環節

人機互動設計上的兩個落差（易用性評估）部分讓我想到在網路上滑到的一個短片，內容是一個聲控燈。

短片的人用非常清楚的發音說「開燈(゜▽゜)」，燈沒有反應；第二次增加音量的發音「開、燈(゜▽゜)」，燈還是沒有反應；最後用了非常奇特的腔調「凱 damnnnnnn！！╰（‵□′）╯」

……是的，燈終於亮了🤣
姑且不論是否有誇大成分，此短片的情境我想滿能表達人機互動設計上的兩個落差的。

使用者規劃行動（使燈亮而說「開燈」）和系統接收（接收器聽不懂使用者的「開燈」）的落差；系統表現（「凱 damnnnnnn！」才會使燈亮）和使用者期待（簡單說句「開燈」就要開燈）的落差。

從兩位大師的原則想到最近從圖書館借了《我們的行為是怎樣被設計的》一書，裡頭第一章提到的三哩島核電廠例子。發現三哩島核電廠就這麼恰巧跟這些原則唱了大反調XDD（當然書裡提及後來有改善）

回頭再看看這本書的例子配著這部份就更加了解兩位大師的設計原則多麼必要且重要了。

※課程指定作業：分享一個你生活上的人機互動例子，拆解他的”輸入”和”輸出”的流程

因為我前天剛好去吃了麥當勞，我以麥當勞自助點餐機為例╰(*°▽°*)╯
輸入 ↔ 輸出（排版亂請見諒）
開始點餐 ↔ 選擇內用外帶畫面
選取內用 ↔ 進入餐點選擇頁
選取餐點 ↔ 餐點列入購物車
點選購物車結帳 ↔ 進入付款與載具確認流程
刷載具刷支付 ↔ 收據與取餐單印出

關於我