脈絡設計

Peter Tsai
不悶燒工作坊
Published in
8 min readMar 13, 2018

脈絡思考

什麼是脈絡?

  • 脈絡就是事情運行的原由
  • 愈複雜的問題,愈需要釐清脈絡,才能對問題有深刻的了解,也因此才不至於誤診,使得導入的方案反而惡化既有的問題

脈絡可以分成三個重要的概念

  • 脈絡中有情境,情境中有人在特定的時間與地點,進行特定的活動,當使用者的工作實務串在一起時,這個過程隨著時間演化就成了歷程
  • 分析脈絡時要考量組織作為(organizing),也就是組織經過一定時間的發展所形成的運行原則,支持著創新有效地運用
  • 創新的過程中,使用者不是在真空中創新。任何使用者都必須在機構下進行開發或導入創新
引用來源:
學會思考脈絡,設計出令人驚嘆的創新 https://www.ithome.com.tw/node/70237

脈絡設計

  • 以客戶為中心的工作流程
  • 每個步驟都與客戶的資料緊緊相依,讓設計師能夠具體、清楚能與人分享。
  • 隨著組織文化與專案的不同,會有不同的步驟細節
  • Rapid Contextual Design (K. Holtzblatt),建議將流程分為下列步驟
● 脈絡訪查● 詮釋會議● 工作模型&親和圖● 願景(Vision)和分鏡圖(Storyboard)● 使用者環境設計● 紙上模型訪談
The Encyclopedia of Human-Computer Interaction, 2nd Ed.- Ch8 Contextual Design, https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/contextual-design

1. 脈絡訪查

  • 先觀察使用環境,瞭解使用者沒有說出口的資訊的先決條件
  • 研究人員實地參與訪查,找出隱藏的工作結構

2. 詮釋會議

  • 目的: 從個別的脈絡訪結果中,識別並記錄下設計的重點
  • 在團隊中的每一個人,以自身的觀點來闡述訪查的資料,並分享自己的設計、行銷以及商業相關的影響
  • 會議完成後同時將理解的內容建立成五種工作模型
  • 建立一個能夠共享的客戶需求環境

3. 工作模型與親和圖

工作模型

  • 互動模型(Flow Model)
  • 序列模型(Sequence Model)
  • 文化模型(Culture Model)
  • 器物模型(Artifact Model)
  • 實體模型(Physical Model)

親和圖

uxsphere — Affinity Diagram ,UX Cowboy http://uxsphere.com/view/affinity-diagram-post-its/ODwVf

3–1. 互動模型(Flow Model)

  • 有哪些角色參與
  • 角色做了哪些事情
  • 如何溝通與協調
  • 如何傳遞訊息
  • 使用什麼工具
  • 傳遞過程中是否發生困難
The Encyclopedia of Human-Computer Interaction, 2nd Ed.- Ch8 Contextual Design, https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/contextual-design

3–2. 序列模型(Sequence Model)

  • 行為過程的細部展開
  • 過程中可能發生的任何行為
  • 瞭解使用者的策略、意圖
  • 行為過程的步驟中所發生的困難
脈絡研究整理法, Ian Jang, https://uxidesign.wordpress.com/2012/08/02/脈絡研究整理法

3–3. 文化模型(Culture Model)

  • 瞭解外部影響與人為因素
  • 規範與組織文化
  • 非正式之潛規則
  • 作中的自我定位
  • 他人的主觀感受
  • 人、群體、組織彼此間的相互影響感受
脈絡研究整理法, Ian Jang, https://uxidesign.wordpress.com/2012/08/02/脈絡研究整理法

3–4. 器物模型(Artifact Model)

  • 物件內容
  • 物件組成
  • 物件呈現
  • 使用方式
  • 使用目的
  • 使用條件
  • 使用經驗
  • 相關改造的部分
  • 使用上的阻礙
Online Collaborative Environment, Pankaj Avhad, http://pankajavhad.com/once.html

3–5. 實體模型(Physical Model)

  • 實體環境
  • 佈局結構
  • 被使用的目的
  • 被使用的方式
  • 角色在裡面的活動路線
  • 各種工具器物的位置
  • 在實體環境中所遇到的困難
脈絡研究整理法, Ian Jang, https://uxidesign.wordpress.com/2012/08/02/脈絡研究整理法

3–6. 親和圖

  • 透過實地訪查收集到不同用戶的行為
- 需求
- 痛點
- 期望
- 特徵
  • 將原始素材逐一細化成親和點(便條紙)
  • 將親和點分組整理構成親和圖,有助於理解用戶以及他們的需求
uxsphere — Affinity Diagram ,UX Cowboy http://uxsphere.com/view/affinity-diagram-post-its/ODwVf

4. 願景&分鏡圖

4–1. 願景(Vision)

  • 聚集數個跨領域的團隊,以討論的方式來建立產品的概念、服務以及需要使用的技術,來達成客戶的需求
  • 願景的重點以蒐集到的客戶資料重新檢視為起使,分析出關鍵的因素及議題。然後以敘述故事的方式,來講解新方法的概念以及方法所對應的情境,是如何能夠解決客戶的問題
  • 願景的應該需要包含系統,以及系統本身所傳遞的價值以及用到方法架構,並且以使用者的角度來檢視系統是如何達成客戶的需求
The Encyclopedia of Human-Computer Interaction, 2nd Ed.- Ch8 Contextual Design, https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/contextual-design

4.2. 分鏡圖(Storyboard)

  • 將建立完成的願景分成為許多情境
  • 每個情境中使用者如何在新的方法系統中運作
The Encyclopedia of Human-Computer Interaction, 2nd Ed.- Ch8 Contextual Design, https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/contextual-design

5. 使用者環境設計

  • 以實做面向的系統「平面圖」
  • 記錄系統各部分的功能及流程,可以改善目前的行為
Introduction to HCI & Contextual Design, Step 5 — User Environment Design, Jerry Weinberg, https://hci.cs.siue.edu/NSF/Files/Semester/Week1-2/PPT-Text/Slide16.html

6. 紙上模型訪談

The Encyclopedia of Human-Computer Interaction, 2nd Ed.- Ch8 Contextual Design, https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/contextual-design

--

--