0 ปูพื้นฐาน HCI และการปฏิสัมพันธ์
🎯 ครูบอก: HCI ไม่ใช่แค่การออกแบบหน้าจอ — มันคือการเข้าใจการคิด ตัดสินใจ รับรู้ ความจำ พฤติกรรม และความรู้สึกของมนุษย์ แล้วค่อยแสดงออกมาเป็น UI ครับ
1. HCI คืออะไร?
Human-Computer Interaction (HCI) คือ ศาสตร์สหวิทยาการ ที่ศึกษาเกี่ยวกับการออกแบบ ประเมินผล และการนำอินเทอร์เฟซคอมพิวเตอร์มาใช้งาน เพื่อให้มนุษย์สามารถใช้งานได้อย่างมีประสิทธิภาพและพึงพอใจสูงสุด
- Multidisciplinary Nature — ผสมผสานความรู้ด้านวิทยาการคอมพิวเตอร์ จิตวิทยา การออกแบบ และพฤติกรรมมนุษย์
- Continuous Loop — ไม่ใช่เพียงหน้าจอ แต่เป็นกระบวนการส่งสารและรับรู้ระหว่างมนุษย์และระบบอย่างต่อเนื่อง
💡 จาก Slide อาจารย์: "HCI ไม่ได้ถามว่าจะออกแบบหน้าจออย่างไร แต่ถามว่า มนุษย์คิด รู้สึก ตัดสินใจ และทำผิดพลาดอย่างไร"
2. ทำไมต้องศึกษา HCI?
- 🛡️ ลดช่องว่างระหว่างมนุษย์และคอมพิวเตอร์ให้เหลือน้อยที่สุด
- 🧠 จำลองการทำงานและการรับรู้ของมนุษย์ เพื่อให้คอมพิวเตอร์เข้าถึงผู้ใช้งานได้
- ✅ ทำให้ระบบง่ายต่อการเรียนรู้และใช้งาน ไม่ก่อความลำบากให้ผู้ใช้
- ⚠️ ป้องกัน Bad Design / Dark Patterns ที่หลอกลวงหรือสร้างความสับสน
3. Usability Goals (เป้าหมายความสามารถใช้งานได้)
| Goal | ความหมาย |
|---|---|
| Input | ข้อมูลที่ผู้ใช้ป้อนเข้าสู่ระบบ |
| Memory | ผู้ใช้ต้องจำอะไรบ้างในการใช้งาน |
| Output | การกระทำทางกายภาพที่ต้องใช้ (Physical Effort) |
| Needs | ระบบตอบสนองความต้องการของผู้ใช้ได้จริง |
| Errors | ลดโอกาสผิดพลาด และฟื้นตัวได้ง่าย |
4. ช่องทางการปฏิสัมพันธ์ (Interaction Channels)
👆 Touch
แตะหน้าจอ, Gesture
แตะหน้าจอ, Gesture
🎤 Speech
Siri, Google Assistant
Siri, Google Assistant
🤚 Gesture
Air gesture, Kinect
Air gesture, Kinect
👁 Visual
Eye tracking, AR
Eye tracking, AR
⌨️ Keyboard/Mouse
Classic WIMP
Classic WIMP
📍 Physical
Haptic, Wearables
Haptic, Wearables
🚨 Action Slips: สมองผู้ใช้ตกลึก "การคิดซับซ้อน" — เมื่อเข้าสู่โหมด Autopilot มนุษย์ชอบทำงานด้วยความคุ้นชินโดยอัตโนมัติ เช่น กดปั๊มเจลล้างมือโดยไม่ตั้งใจแทนที่จะเป็นน้ำเชื่อม เพราะดีไซน์คล้ายกัน
🧠 แบบฝึกหัด — บทปูพื้นฐาน HCI
ข้อ 1: HCI คืออะไร? และทำไมจึงเรียกว่าเป็นศาสตร์สหวิทยาการ (Multidisciplinary)?
ข้อ 2: Action Slips คืออะไร? ยกตัวอย่างจากชีวิตประจำวัน
ข้อ 3: จงยกตัวอย่าง Bad Design ที่คุณเคยพบ และอธิบายว่ามันละเมิดหลัก HCI อย่างไร
1 ปัจจัยด้านมนุษย์ (The Human)
🎯 ครูบอก: บทนี้เน้น 3 กลุ่มใหญ่: (1) Information I/O (Vision/Hearing/Touch) (2) Memory (Sensory/STM/LTM) (3) Processing (Reasoning/Error) — ต้องอธิบายแต่ละอย่างพร้อมยกตัวอย่างได้!
1. ภาพรวม: มนุษย์ในฐานะระบบประมวลผลข้อมูล
- 📥 Information I/O — Visual, Auditory, Haptic, Movement
- 🧠 Memory — Sensory, Short-Term (Working), Long-Term
- ⚙️ Processing — Reasoning, Problem Solving, Skill, Error
- ❤️ Emotion — ส่งผลต่อความสามารถของมนุษย์
- 👤 Individual Differences — แต่ละคนมีความแตกต่างกัน
2. การมองเห็น (Vision)
2.1 Visual Angle — มุมมองของสายตา
- มุมมองมากกว่า = วัตถุดูใหญ่กว่า
- วัตถุขนาดต่างกันอาจมีมุมมองเท่ากัน หากระยะห่างต่างกัน
- วัตถุขนาดเท่ากันอาจมีมุมมองต่างกัน หากวางใกล้-ไกลต่างกัน
2.2 Brightness & Color
- Brightness ช่วยให้มองเห็น — แยกแยะ contrast
- Color ช่วยให้เข้าใจ — สื่อความหมายเพิ่มเติม
- 8% ของผู้ชายมีภาวะตาบอดสี → อย่าใช้สีอย่างเดียวในการสื่อสาร ต้องมี Label/Icon ด้วย
2.3 Reading — สมองอ่านเป็น "คำ" ไม่ใช่ตัวอักษร
- เราไม่ได้อ่านทีละตัวอักษร แต่สมองอ่านเป็นคำและใช้บริบทช่วยเดา
- Reading เป็นพื้นฐานของการออกแบบเว็บไซต์ แอป และอินเทอร์เฟซทั้งหมด
- Ambiguous Shape / Optical Illusions — สมองอาจตีความภาพผิดได้
💡 UX Takeaway: ออกแบบให้ใช้ Recognition มากกว่า Recall — แสดงไอคอนและตัวเลือกให้คลิกได้เลย แทนที่จะบังคับให้พิมพ์จำคำสั่งเอง เพื่อลดความล้าสมอง
3. การได้ยิน (Hearing)
- Sound Feedback สำคัญมากใน Modern Interfaces
- ตัวอย่าง: LINE Notification, AirPods Spatial Audio, Tesla Warning Sound, Apple Watch Haptic + Sound
- เสียงที่ดี ≠ เสียงที่ดังที่สุด แต่คือเสียงที่ผู้ใช้ควรได้ยินในเวลาที่เหมาะสม
- ผู้มีความบกพร่องทางการได้ยิน → ต้องมี Visual Alternative เสมอ
4. หน่วยความจำของมนุษย์ (Memory)
| ประเภท | ระยะเวลา | ความจุ | ตัวอย่าง |
|---|---|---|---|
| Sensory Memory | 0.5–3 วินาที | ใหญ่มาก หายไปเร็ว | เห็นแฟลชแล้วยังติดตา |
| Short-Term (Working) | 15–30 วินาที | 7 ± 2 chunks | จำเบอร์โทรที่เพิ่งเห็น |
| Long-Term Memory | ตลอดชีวิต | แทบไม่จำกัด | จำชื่อเพื่อน จำวิธีขับรถ |
Miller's Law & Chunking (จาก Slide)
ความจุ STM = 7 ± 2 chunks — ก้อนที่มีความหมายจะจำได้ง่ายกว่า ความซับซ้อนของแต่ละก้อนไม่เท่ากัน
ตัวอย่างจาก Slide: 422 A Police, นก, 60*2+8, เครื่องพิมพ์ดีด — แต่ละ "คำ/ความคิด" คือ 1 chunk
Recognition vs. Recall
- Recognition — เห็นแล้วจำได้ (ง่ายกว่า) เช่น เห็นไอคอน Save แล้วรู้ว่าบันทึก
- Recall — ต้องนึกขึ้นมาเองโดยไม่มีตัวช่วย เช่น พิมพ์คำสั่ง CLI จำเอง
- → ออกแบบ UI ให้ใช้ Recognition มากกว่า Recall เสมอ!
5. การคิดและการตัดสินใจ (Thinking & Reasoning)
| ประเภท | ลักษณะ | ตัวอย่าง |
|---|---|---|
| Deductive | หลักการทั่วไป → สรุปเฉพาะเจาะจง | "ปุ่มแดง=ยกเลิก → ปุ่มนี้แดง → กดแล้วยกเลิก" |
| Inductive | จากตัวอย่างหลายๆ ครั้ง → สรุปหลักการ | ลองกดหลายปุ่ม แล้วสรุปว่า "เขียว=ยืนยัน" |
| Abductive | เดาสาเหตุจากผลที่เห็น (best guess) | "หน้าจอค้าง → น่าจะมี process หนักกำลังทำงาน" |
6. Emotion ส่งผลต่อการใช้งาน
- ผู้ใช้ที่รู้สึกดี (Positive Emotion) ยืดหยุ่นและเรียนรู้ได้ดีกว่า
- ผู้ใช้ที่ stressed หรือ frustrated จะตัดสินใจผิดพลาดและแก้ปัญหายากขึ้น
- → Good UX ต้องลด Cognitive Load และหลีกเลี่ยงการสร้าง Frustration
🧠 แบบฝึกหัด — บทที่ 1: The Human
ข้อ 1: Miller's Law กล่าวถึงอะไร? มีผลต่อการออกแบบ UI อย่างไร? ยกตัวอย่าง
ข้อ 2: Recognition vs. Recall ต่างกันอย่างไร? และนักออกแบบ UI ควรสนับสนุนอะไร?
ข้อ 3: ทำไม Brightness และ Color ถึงมีบทบาทต่างกันในการออกแบบ UI?
2 วิวัฒนาการความสัมพันธ์และการออกแบบเชิงแนวคิด
🎯 ครูบอก: บทนี้มี 2 ส่วนหลัก: (1) Paradigm Shifts ตั้งแต่ยุค Batch จนถึง AI และ (2) Conceptual Model + Interface Metaphor ต้องอธิบายพร้อมตัวอย่างได้!
Part 1: วิวัฒนาการ Paradigm การโต้ตอบ
Paradigm คือ กรอบทฤษฎีหรือมุมมองหลักของศาสตร์ที่ครอบงำในยุคนั้นๆ — HCI มีการเปลี่ยน Paradigm หลายครั้งตามเทคโนโลยี
| ยุค | Paradigm | ลักษณะ | คำถามหลัก |
|---|---|---|---|
| 1950s | Batch Processing | ป้อนข้อมูลผ่านบัตรเจาะรู รอรับผลลัพธ์ ไม่มี real-time interaction | จะประมวลผลอย่างไร? |
| 1960s | Time-Sharing | แชร์ CPU หลายคนพร้อมกัน, VDU Terminal, Interactive computing | จะโต้ตอบอย่างไร? |
| 1980s | Desktop GUI (WIMP) | Windows, Icons, Menus, Pointer; Apple Mac; WYSIWYG; Direct Manipulation | จะใช้งานให้ง่ายอย่างไร? |
| 1990s | World Wide Web | Hypertext, Browser, การเชื่อมโยงข้อมูลทั่วโลก, CSCW (Email) | จะเชื่อมโยงข้อมูลอย่างไร? |
| 2000s+ | Ubiquitous Computing | คอมพิวเตอร์ล่องหนแทรกซึมชีวิต, IoT, Wearables, Sensors, AR | จะอยู่กับมนุษย์อย่างไร? |
| ปัจจุบัน | AI & Agentic AI | คู่คิดเสมือนจริง ร่วมคิด วางแผน แก้ปัญหาแทนเรา | จะร่วมคิดและตัดสินใจอย่างไร? |
📌 Ubiquitous Computing (Mark Weiser, 1991): "เทคโนโลยีที่ล้ำที่สุดคือเทคโนโลยีที่หายไป ผสมกลมกลืนกับชีวิตประจำวันจนแยกไม่ออก" — คอมพิวเตอร์ควรทำงานเงียบๆ โดยไม่รบกวนความสนใจของผู้ใช้
Ubiquitous Computing → Paradigms สมัยใหม่
- 🌐 Pervasive Computing — ฝังในอุปกรณ์ชีวิตประจำวัน
- ⌚ Wearable Computing — Smart Watch, Fitness Band
- 🤲 Tangible Bits — แปลงข้อมูลดิจิทัลเป็นวัตถุจับต้องได้
- 🕶️ Augmented Reality (AR) — ซ้อน Digital บน Physical world
- 🏠 Attentive Environments — ใช้ sensor/กล้องปรับตัวตามมนุษย์
Part 2: Conceptualizing Interaction Design
ทำไมต้อง Conceptualize?
- Feasibility — ทำได้จริงภายใต้ข้อจำกัดหรือไม่?
- Desirability — ผู้ใช้อยากใช้จริงๆ หรือเปล่า?
- ระบุ Assumptions และ Claims ไว้ก่อน ทดสอบซ้ำๆ อย่างสม่ำเสมอ
Conceptual Model คืออะไร?
คือ "แบบแผนการทำงานระดับสูง" ที่นักออกแบบสร้างขึ้น เพื่อให้ผู้ใช้เข้าใจวิธีการทำงานของระบบ (Johnson & Henderson, 2002)
| องค์ประกอบ | คำอธิบาย | ตัวอย่าง (Email App) |
|---|---|---|
| Metaphors & Analogies | เปรียบเทียบกับสิ่งที่คุ้นเคย | "Inbox" ≈ กล่องจดหมายจริง, "Trash" ≈ ถังขยะ |
| Domain Concepts | แนวคิดหลักที่ผู้ใช้ต้องรู้ | Email, Folder, Subject, Sender, Timestamp |
| Relationships/Mappings | ความสัมพันธ์ระหว่างแนวคิด | กด Send → Draft เปลี่ยนเป็น Sent; กด Delete → ย้ายไป Trash |
Interface Metaphors — ยืมความคุ้นเคยจากโลกจริง
| ประเด็น | ข้อดี | ข้อเสีย |
|---|---|---|
| เรียนรู้เร็ว | ✅ ผู้ใช้เข้าใจทันทีเพราะรู้จักจากชีวิตจริง | ❌ Dead Metaphors: ไอคอน 💾 (Floppy disk) คนรุ่นใหม่ไม่รู้จักแล้ว |
| ลด Error | ✅ คาดเดาผลลัพธ์ได้จากประสบการณ์เดิม | ❌ จำกัดความคิดสร้างสรรค์ (Limit Creativity) |
| เพิ่มความมั่นใจ | ✅ ผู้ใช้กล้าลองเพราะคิดว่าเข้าใจแล้ว | ❌ Cultural Bias: ไอคอน Mailbox แตกต่างกันในแต่ละประเทศ |
Interaction Types (5 ประเภท — จากสไลด์)
| ประเภท | ลักษณะ | ตัวอย่าง |
|---|---|---|
| 1. Instructing | ผู้ใช้สั่งงานระบบโดยตรง | กดปุ่ม Print, ตู้กดน้ำ, Word Processor |
| 2. Conversing | สนทนาโต้ตอบกับระบบเหมือนคุยกับคน | Siri, ChatGPT, IKEA Anna chatbot |
| 3. Manipulating | ลาก ซูม ย้าย วัตถุ | Pinch to Zoom, Drag & Drop, Google Maps หมุนแผนที่ |
| 4. Exploring | สำรวจสภาพแวดล้อม 3D/Sensor | VR Game, Google Street View, Apple Vision Pro |
| 5. Responding | ระบบริเริ่มการโต้ตอบก่อน | Push Notification, Alarm, Tesla Warning |
🧠 แบบฝึกหัด — บทที่ 2: Paradigms & Conceptual Model
ข้อ 1: จงเรียงลำดับ Paradigm การโต้ตอบจากยุคแรกจนถึงปัจจุบัน พร้อมระบุลักษณะเด่นของแต่ละยุค
ข้อ 2: Conceptual Model ของ Email มีองค์ประกอบ 3 ส่วนอะไรบ้าง? จงอธิบายพร้อมตัวอย่าง
ข้อ 3: Interface Metaphor คืออะไร? มีข้อดีและข้อเสียอย่างไร? ยกตัวอย่าง "Dead Metaphor"
3 การออกแบบปฏิสัมพันธ์เพื่อความพึงพอใจและสำหรับทุกคน (Interaction Design & UX)
1. นิยามของ Interaction Design (IxD) vs User Experience (UX)
- Interaction Design (IxD - การออกแบบปฏิสัมพันธ์): การออกแบบ **ระบบเชิงโต้ตอบ (Interactive Systems)** เพื่อสนับสนุนวิถีชีวิต การทำงาน และการสื่อสารของมนุษย์ โดยเน้นที่กระบวนการโต้ตอบ พฤติกรรมการใช้งาน และการสร้างโครงสร้างการปฏิสัมพันธ์ที่ใช้งานได้จริง
- User Experience (UX - ประสบการณ์ผู้ใช้): ความรู้สึก การรับรู้ และการตอบสนองเชิงจิตวิทยาของบุคคลที่เกิดขึ้นจากการได้ใช้งานผลิตภัณฑ์หรือบริการนั้นๆ โดย UX ไม่สามารถ "ออกแบบตรงๆ" ได้ เนื่องจากเป็นเรื่องของอารมณ์ส่วนบุคคล แต่เราสามารถ **"ออกแบบเพื่อเอื้ออำนวย (Design for)"** ให้เกิดประสบการณ์ที่ดีได้
2. แบบจำลองประสบการณ์ผู้ใช้ของ Hassenzahl (Hassenzahl's UX Model) - ออกสอบอัตนัยบ่อย!
Marc Hassenzahl เสนอว่าคุณลักษณะของผลิตภัณฑ์ (Product Features) จะกระตุ้นประสบการณ์ผ่านคุณลักษณะ 2 ด้านหลัก:
| มิติคุณลักษณะ (Dimension) | คำอธิบาย | ตัวอย่างปัจจัยหลัก | ตัวอย่างในโลกจริง |
|---|---|---|---|
| 1. Pragmatic Attributes (คุณลักษณะเชิงปฏิบัติการ) | ความมีประโยชน์ ความสามารถในการตอบสนองเป้าหมายงานของผู้ใช้ เน้นความเสถียรและใช้งานง่าย | ความลื่นไหลในการกดสั่งสินค้า, โครงสร้างเมนูค้นหาที่ชัดเจน, ระบบชำระเงินที่ไว้ใจได้ | ปุ่มสั่งของ 1-Click ของ Amazon, ระบบสแกนหน้าจ่ายตังค์ของโมบายแบงก์กิ้งที่รวดเร็ว |
| 2. Hedonic Attributes (คุณลักษณะเชิงอารมณ์/ความพึงพอใจ) | การตอบสนองความต้องการทางจิตวิทยา ความหมายส่วนบุคคล ความงาม และความรู้สึกภูมิใจเมื่อเป็นเจ้าของ | - Stimulation (กระตุ้น): ความแปลกใหม่ท้าทาย
- Identification (อัตลักษณ์): สะท้อนตัวตนของผู้ใช้ - Evocation (ความทรงจำ): ความรู้สึกผูกพันอดีต |
แอนิเมชันเปิดหน้าจอที่ดูหรูหราของ Apple Watch, การปลดล็อกเหรียญตราเกียรติยศ (Badges) ใน Duolingo |
3. เป้าหมายการออกแบบ: เป้าหมายการใช้งาน (Usability Goals) vs เป้าหมายประสบการณ์ (UX Goals)
นี่คือจุดแบ่งขอบเขตของเกณฑ์ชี้วัดระหว่างความสำเร็จเชิงเทคนิคและเชิงอารมณ์:
- Usability Goals (เป้าหมายการใช้งาน - วัดผลเป็นตัวเลข/วัตถุวิสัย):
- Effectiveness (ประสิทธิผล): ระบบทำงานได้สำเร็จตรงเป้าหมายที่กำหนดไว้หรือไม่
- Efficiency (ประสิทธิภาพ): ผู้ใช้ใช้เวลาหรือจำนวนขั้นตอนน้อยที่สุดในการทำงานนั้นสำเร็จหรือไม่
- Safety (ความปลอดภัย): ระบบป้องกันความผิดพลาดและกู้ข้อมูลกลับคืนได้ง่ายหรือไม่ (เช่น ถามยืนยันก่อนลบถาวร)
- Utility (ประโยชน์ใช้สอย): ระบบมีฟังก์ชันงานที่จำเป็นและเอื้ออำนวยให้ทำงานได้สมบูรณ์หรือไม่
- Learnability (การเรียนรู้ง่าย): ผู้ใช้ใหม่สามารถเข้าใจวิธีใช้งานขั้นพื้นฐานได้ง่ายหรือไม่
- Memorability (การจำได้ง่าย): ผู้ใช้เก่าที่ไม่ได้ใช้ระบบนานๆ กลับมาใช้ใหม่แล้วยังจำวิธีใช้ได้โดยไม่ต้องเรียนรู้ใหม่
- User Experience (UX) Goals (เป้าหมายประสบการณ์ผู้ใช้ - อารมณ์ความรู้สึก/จิตวิสัย):
เน้นความรู้สึกขณะใช้งาน เช่น ความสนุกสนาน (Fun), ความพึงพอใจ (Satisfying), ความน่าดึงดูด (Aesthetically pleasing), การเสริมสร้างแรงบันดาลใจ (Motivating), และการได้รางวัลผลตอบแทน (Rewarding)
4. หลักการออกแบบ 6 ประการของ Don Norman (Don Norman's 6 Design Principles) - จำสูตรไปตอบข้อเขียน!
หลักการทางจิตวิทยาที่เป็นรากฐานของการสร้างอินเทอร์เฟซให้มนุษย์ใช้งานได้โดยสัญชาตญาณ:
- Visibility (การมองเห็นเด่นชัด): ตัวเลือกและปุ่มควบคุมหลักต้องปรากฏชัดเจนในจังหวะที่ต้องใช้งาน ไม่ซ่อนอยู่ในซอกลึกที่หาไม่เจอ
ตัวอย่าง: ปุ่มค้นหา (Search) หรือปุ่มกดส่ง (Submit) ควรมีสีสันเด่นตาเด่นเด่นขึ้นมาจากพื้นหลัง - Feedback (ข้อมูลป้อนกลับเพื่อยืนยัน): การส่งสัญญาณตอบสนองทันทีเมื่อผู้ใช้กระทำสิ่งใดลงไป เพื่อยืนยันว่าระบบรับคำสั่งแล้ว
ตัวอย่าง: เครื่องกดเงินสั่นและส่งเสียงเมื่อแตะปุ่ม, ปุ่มเปลี่ยนสถานะสี หรือมีแถบ Loading เด้งแสดง - Constraints (ข้อจำกัดการทำงาน): การปิดกั้นหรือจำกัดทางเลือกการใช้งานที่ไม่ถูกต้อง เพื่อป้องกันผู้ใช้กดพลาดตั้งแต่แรก
ตัวอย่าง: ปุ่มบันทึกยังเป็นสีเทากดไม่ได้จนกว่าจะกรอกฟอร์มครบ, รูเสียบ USB ที่ถูกจำกัดรูปร่างให้เสียบถูกด้านเท่านั้น - Consistency (ความสม่ำเสมอสอดคล้องกัน): การใช้สัญลักษณ์ สีสัน ตำแหน่ง หรือขั้นตอนแบบเดียวกันสำหรับงานที่คล้ายกัน
- Internal Consistency: ความสอดคล้องภายในระบบเดียวกัน (เช่น ทุกหน้าจอปุ่มเซฟอยู่มุมขวาบนเสมอ)
- External Consistency: ความสอดคล้องกับมาตรฐานภายนอก (เช่น ปุ่มรูปบ้านแทนหน้าแรก Home, ปุ่มรูปรถเข็นแทนการสั่งซื้อ) - Affordance (การเอื้ออำนวยความเข้าใจเชิงสัญลักษณ์): รูปลักษณ์ภายนอกของวัตถุบ่งบอกวิธีกด/ใช้ในตัวมันเองโดยไม่ต้องมีคู่มือสอน
ตัวอย่าง: ปุ่มนูนในแอปที่ออกแบบให้ดูมีแสงเงาชวนเอาปลายนิ้วกด, แถบที่มีขอบมุมมนชวนให้ลากเลื่อนปัด - Mapping (การจัดความสอดคล้องเชิงพิกัด): การวางจัดวางปุ่มควบคุมให้สอดคล้องทางกายภาพกับผลลัพธ์ที่จะเกิดจริง
ตัวอย่าง: ปุ่มควบคุมกระจกไฟฟ้ารถยนต์ที่วางเรียงในตำแหน่งเดียวกับตัวกระจกข้างคนขับ/ผู้โดยสาร
5. การออกแบบเพื่อคนทุกคน (Universal Design) และการจำแนกความบกพร่อง (Impairments)
Universal Design (การออกแบบสากล): การออกแบบผลิตภัณฑ์ที่เข้าถึงได้และเป็นมิตรกับคนทุกคน โดยไม่มีความขวางกั้นทางกายภาพหรือสถานะทางความบกพร่องทางร่างกาย ซึ่งแบ่งกลุ่มความบกพร่องออกเป็น 3 รูปแบบ:
- 1. Permanent Impairment (บกพร่องถาวร): ความบกพร่องทางกายภาพที่ไม่สามารถกู้คืนได้ เช่น ผู้พิการทางสายตา, ผู้พิการทางหู
➜ การออกแบบไอที: เพิ่มฟังก์ชันอ่านเสียง (Screen Reader) หรือคำบรรยายใต้วิดีโอ (Captions) - 2. Temporary Impairment (บกพร่องชั่วคราว): ความบกพร่องระยะสั้นจากอุบัติเหตุหรือปัญหาสุขภาพชั่วคราว เช่น กระดูกข้อมือหักต้องเข้าเฝือก, ม่านตาขยายชั่วคราวจากการตรวจสุขภาพ
➜ การออกแบบไอที: เพิ่มปุ่มสัมผัสขนาดใหญ่พิเศษ หรือการป้อนข้อมูลด้วยเสียงสั่งงาน (Voice Control) - 3. Situational Impairment (บกพร่องตามสถานการณ์): ความบกพร่องที่เกิดชั่วครู่จากการเปลี่ยนผ่านสภาพแวดล้อม เช่น การใช้มือถือกลางแดดจ้าสะท้อนตา, การอุ้มเด็กทารกไว้ข้างหนึ่งแล้วเหลือมือเดียวในการควบคุมหน้าจอ
➜ การออกแบบไอที: ออกแบบสัดส่วนแอปพลิเคชันที่รองรับการใช้งานด้วยมือข้างเดียว (One-Handed mode) และปรับคอนทราสต์สีหน้าจอสูง
🏋️ โจทย์ซ้อนแผนหลักการออกแบบ HCI ระดับข้อสอบ
ครูคัดสรรข้อสอบวิเคราะห์สถานการณ์ตามแนวสไลด์ HCI มาให้นักเรียนได้ศึกษาทบทวนครับ:
โจทย์ข้อที่ 1: วิเคราะห์จุดพังของ Don Norman Principles
คำสั่งโจทย์: หน้าจอบอร์ดควบคุมเครื่องซักผ้ารุ่นใหม่มีปุ่มสัมผัสแบนราบขนาดเท่ากันเป๊ะ 15 ปุ่มวางเรียงหน้าเสมอกัน และไม่มีเสียงตอบรับเวลากด ผู้ใช้งานรายใหม่มักต้องกดเดาสุ่มไปเรื่อยๆ จนกว่าจะได้รอบซักที่ถูกต้อง
จงระบุว่าการออกแบบนี้ขัดแย้งกับหลักการของ Don Norman ข้อใดบ้าง และอธิบายวิธีแก้ไข
โจทย์ข้อที่ 2: จำแนก Usability Goals vs UX Goals
คำสั่งโจทย์: ในการประเมินผลระบบ คณะกรรมการตั้งคำถามดังนี้:
1) 'ระบบแอปพลิเคชันตัวนี้ทำงานได้เสถียรและผู้ใช้ทำขั้นตอนจ่ายเงินสำเร็จโดยไม่เกิดความผิดพลาดหรือไม่?'
2) 'ผู้ใช้นิยามว่าการเรียนภาษาอังกฤษผ่านเกมนี้รู้สึกตื่นเต้นท้าทายและอยากแชร์ต่อให้เพื่อนๆ หรือไม่?'
จงบอกว่าแต่ละประโยคเป็นการประเมินประเภทใดระหว่าง Usability Goals และ UX Goals
โจทย์ข้อที่ 3: วิเคราะห์ความบกพร่องตามสถานการณ์ (Universal Design)
คำสั่งโจทย์: พนักงานส่งของ (Rider) กำลังจอดรถและต้องใช้แอปพลิเคชันค้นหาที่อยู่ลูกค้าผ่านหน้าจอมือถือท่ามกลางแสงแดดตอนบ่ายที่สะท้อนหน้าจอและเขากำลังสวมหมวกกันน็อกทำให้ไม่สะดวกใช้สองมือ
1) นี่จัดเป็นประเภทความบกพร่องแบบใด?
2) ในฐานะดีไซเนอร์ จะปรับอินเทอร์เฟซรองรับอย่างไรได้บ้าง?
📝 บันทึกส่วนตัว — บทที่ 3
✓ บันทึกเรียบร้อย