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

更新於 發佈於 閱讀時間約 6 分鐘
  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(當然書裡提及後來有改善)

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


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

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


關於我


留言
avatar-img
留言分享你的想法!
avatar-img
Lynn Li's
2會員
45內容數
產品設計|UX設計|設計思考 學習歷程,還有一些產品觀察跟讀書報告。
Lynn Li's的其他內容
2024/05/10
章節進度:3–7 運算式設計思考
Thumbnail
2024/05/10
章節進度:3–7 運算式設計思考
Thumbnail
2024/05/01
章節進度:3–8 使用性工程
Thumbnail
2024/05/01
章節進度:3–8 使用性工程
Thumbnail
2024/04/25
章節進度:1-8 使用者需求與研究分析
Thumbnail
2024/04/25
章節進度:1-8 使用者需求與研究分析
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
本篇內容整理至edX UX Design 免費線上課程。 我們在這個免費線上課程的第三章囉!沒有看過第二章的話,請見之前發布過的文章: Innovations 三種不同形式的創新 在UX領域研究中,會碰到這三種不同形式的創新 Incremental Innovation 漸進式創新 隨著
Thumbnail
本篇內容整理至edX UX Design 免費線上課程。 我們在這個免費線上課程的第三章囉!沒有看過第二章的話,請見之前發布過的文章: Innovations 三種不同形式的創新 在UX領域研究中,會碰到這三種不同形式的創新 Incremental Innovation 漸進式創新 隨著
Thumbnail
本篇整理至 edX UX Research 線上免費課程。 UX (user experience),也有人稱 UE,指的是一個產品所帶給使用者的感受。在這個「以人為本」的時代,機器是用來服務人類,因此要創造宜人的產品便是首要目標。 UX writing 是 UX writer 使用語言達到提升
Thumbnail
本篇整理至 edX UX Research 線上免費課程。 UX (user experience),也有人稱 UE,指的是一個產品所帶給使用者的感受。在這個「以人為本」的時代,機器是用來服務人類,因此要創造宜人的產品便是首要目標。 UX writing 是 UX writer 使用語言達到提升
Thumbnail
在這堂課程中,您將學會如何輕鬆地註冊和登入Midjourney的專業平台,了解如何運用AI繪圖技術來創造和生成設計概念;您可以選擇多種設計風格和主題,加入自己的創意思維,Midjourney將迅速為您產出獨特的設計概念圖,當然除了Midjourney,用其他AI生成式設計平台也能完成類似的功能!
Thumbnail
在這堂課程中,您將學會如何輕鬆地註冊和登入Midjourney的專業平台,了解如何運用AI繪圖技術來創造和生成設計概念;您可以選擇多種設計風格和主題,加入自己的創意思維,Midjourney將迅速為您產出獨特的設計概念圖,當然除了Midjourney,用其他AI生成式設計平台也能完成類似的功能!
Thumbnail
AI 的進展通常分為四個階段: 被動機器 (Reactive machines) 有限的記憶體 (Limited memory) 心智理論 (Theory of mind) 自我意識 (Self aware)
Thumbnail
AI 的進展通常分為四個階段: 被動機器 (Reactive machines) 有限的記憶體 (Limited memory) 心智理論 (Theory of mind) 自我意識 (Self aware)
Thumbnail
軟體工程師體驗營的第三周,對於知識、學習、課程、社群的感想,持續內化中,我不想只有上課,也希望從學習過程獲得更多經驗,所以寫下了這篇記錄。我也意外發現剛學習的 JavaScript,說不定能讓我重拾學習程式互動藝術,這很令人開心,即使我正在考慮轉職,但創作是終生的,希望下次發作品能有些新展現。
Thumbnail
軟體工程師體驗營的第三周,對於知識、學習、課程、社群的感想,持續內化中,我不想只有上課,也希望從學習過程獲得更多經驗,所以寫下了這篇記錄。我也意外發現剛學習的 JavaScript,說不定能讓我重拾學習程式互動藝術,這很令人開心,即使我正在考慮轉職,但創作是終生的,希望下次發作品能有些新展現。
Thumbnail
  其實講到現在已經是第三篇,這裡還是不會有程式結構及語法的介紹.因為這個專欄是為了讓初學,或是學了很久停滯不前的同學朋友而生的.
Thumbnail
  其實講到現在已經是第三篇,這裡還是不會有程式結構及語法的介紹.因為這個專欄是為了讓初學,或是學了很久停滯不前的同學朋友而生的.
Thumbnail
有一些具體的關鍵詞。有與流勢有關的關鍵詞,有與人體圖的不同角度有關的關鍵詞,比如說性關鍵詞。有各種各樣的關鍵詞——它們都是方程式。
Thumbnail
有一些具體的關鍵詞。有與流勢有關的關鍵詞,有與人體圖的不同角度有關的關鍵詞,比如說性關鍵詞。有各種各樣的關鍵詞——它們都是方程式。
Thumbnail
每周一篇文章的讀書會心得報告摘要與筆記,本次分享文章為:UI/UX哪裡不同?白話文一次搞懂UX/UI。 1.UX 和UI有什麼不一樣? 2.UX:使用者體驗 User Experience 3.UI:使用者介面 User Interface 4.UX 和UI如何影響彼此? 5.UX 和UI職能大不同
Thumbnail
每周一篇文章的讀書會心得報告摘要與筆記,本次分享文章為:UI/UX哪裡不同?白話文一次搞懂UX/UI。 1.UX 和UI有什麼不一樣? 2.UX:使用者體驗 User Experience 3.UI:使用者介面 User Interface 4.UX 和UI如何影響彼此? 5.UX 和UI職能大不同
Thumbnail
《人本×互動設計》有溫度的思考,讓設計滿足使用需求 發布第一篇《【UI閱讀筆記】UI設計大進擊!》文章時,因為有讀者在Dcard反映《操作介面設計模式》對新手來說還是太難了!並推薦了另一本《人本×互動設計》給我做參考(真的很想好好謝謝他讓我遇到這麼棒的一本書!),就這樣,這篇文章就誕生啦🎉。
Thumbnail
《人本×互動設計》有溫度的思考,讓設計滿足使用需求 發布第一篇《【UI閱讀筆記】UI設計大進擊!》文章時,因為有讀者在Dcard反映《操作介面設計模式》對新手來說還是太難了!並推薦了另一本《人本×互動設計》給我做參考(真的很想好好謝謝他讓我遇到這麼棒的一本書!),就這樣,這篇文章就誕生啦🎉。
Thumbnail
「藝術,就是將你的經驗、想法做轉化(Transform),每個人獨特的轉化會形成個人的美學與風格。」 對於創作者,什麼是好的轉化呢?推薦大家可以帶著這樣的想法走進「超機體」展覽,在過程中試圖跟自己辯證。因為「試圖」是件很重要的事,就像這試圖探討界線模糊的人機關係吧。
Thumbnail
「藝術,就是將你的經驗、想法做轉化(Transform),每個人獨特的轉化會形成個人的美學與風格。」 對於創作者,什麼是好的轉化呢?推薦大家可以帶著這樣的想法走進「超機體」展覽,在過程中試圖跟自己辯證。因為「試圖」是件很重要的事,就像這試圖探討界線模糊的人機關係吧。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News