0 ภาพรวม HCI และ UX Design
🎯 หลักการสำคัญ: HCI ไม่ใช่แค่การออกแบบหน้าจอ (UI) แต่เป็นการออกแบบเพื่อตอบสนอง กระบวนการภายในของมนุษย์ ทั้ง 8 ด้าน (คิด, ตัดสินใจ, รับรู้, ความจำ, พฤติกรรม, ความรู้สึก, ไว้ใจ, ปลอดภัย)
1. HCI คืออะไร? (What is HCI?)
HCI (Human-Computer Interaction) เป็นศาสตร์ที่ศึกษาเกี่ยวกับการออกแบบ ประเมินผล และนำอินเทอร์เฟซคอมพิวเตอร์มาใช้งาน เพื่อให้มนุษย์สามารถใช้งานได้อย่างมีประสิทธิภาพและพึงพอใจสูงสุด
- Multidisciplinary Nature: เป็นศาสตร์สหวิทยาการที่ผสมผสาน 4 สาขาหลัก ได้แก่
- Computer Science (เทคโนโลยี/ระบบ/โค้ดดิ้ง)
- Psychology & Cognitive (จิตวิทยา/ความจำ/การรับรู้)
- Design & Ergonomics (สุนทรียภาพ/การจัดระเบียบข้อมูล)
- Sociology & Ethnography (บริบทสังคม/วัฒนธรรม)
- Continuous Loop: ไม่ใช่เพียงหน้าจอ แต่เป็นกระบวนการส่งสารและรับรู้ระหว่างมนุษย์และระบบอย่างต่อเนื่อง
2. ทำไมต้องศึกษา HCI?
- เพื่อศึกษาการออกแบบที่ลดช่องว่างระหว่างมนุษย์และคอมพิวเตอร์ให้น้อยที่สุด
- โดยจำลองการทำงานและการรับรู้ของมนุษย์ เพื่อให้คอมพิวเตอร์สามารถเข้าถึงผู้ใช้งานได้
- ทำให้ระบบง่ายต่อการเรียนรู้และง่ายต่อการใช้งาน ไม่ก่อปัญหาให้กับผู้ใช้
3. Usability Goals (ความสามารถในการใช้งาน)
การออกแบบต้องคำนึงถึง 5 ปัจจัยพื้นฐาน:
👁️ Input: ข้อมูลที่ป้อน
🧠 Memory: ภาระในการจำ
👆 Output: การใช้แรงทางกายภาพ
🎯 Needs: ตอบสนองความต้องการจริง
⚠️ Errors: ป้องกันความผิดพลาด
4. ช่องทางการปฏิสัมพันธ์ (Interaction Channels)
ปัจจุบันไม่ได้มีแค่เมาส์หรือคีย์บอร์ด แต่ขยายไปสู่:
- Touch: สัมผัส (เช่น iPad, Apple Watch)
- Speech: เสียง (เช่น Siri, AI Voice)
- Gesture: ท่าทาง (เช่น Apple Vision Pro)
5. สมองมนุษย์เกลียด "การคิดซับซ้อน"
🚨 Action Slips (ความผิดพลาดทางกายภาพ): สมองมักเข้าสู่โหมด "Autopilot" เพื่อประหยัดพลังงาน หากวัตถุ 2 อย่างออกแบบมาคล้ายกัน แต่อรรถประโยชน์ต่างกัน (เช่น เผลอกดเจลล้างมือใส่แก้วกาแฟเพราะขวดเหมือนขวดน้ำเชื่อม) จะส่งผลให้ผู้ใช้ทำสิ่งแปลกปลอมโดยไม่ตั้งใจ
🧠 แบบฝึกหัด — บทปูพื้นฐาน HCI
ข้อ 1: HCI คืออะไร? และทำไมจึงเรียกว่าเป็นศาสตร์สหวิทยาการ (Multidisciplinary)?
ข้อ 2: Action Slips คืออะไร? ยกตัวอย่างจากชีวิตประจำวัน
ข้อ 3: จงยกตัวอย่าง Bad Design ที่คุณเคยพบ และอธิบายว่ามันละเมิดหลัก HCI อย่างไร
✏️ โจทย์เติมคำ — บทแนะนำ HCI
1. HCI เป็นศาสตร์แบบ ________ เพราะผสมผสานความรู้จาก Computer Science, ________, Design & Ergonomics และ Sociology
2. เป้าหมาย UX 3 ระดับจากล่างขึ้นบน ได้แก่ ________, ________ และ ________
3. ปรากฏการณ์ที่ผู้ใช้กดเจลล้างมือใส่แก้วกาแฟเพราะขวดมีรูปร่างเหมือนกัน เรียกว่า ________
4. Interaction Modalities มี 4 รูปแบบ ได้แก่ Touch, ________, ________ และ Physical Interaction
5. ระบบที่ดีต้องสร้าง ________ (กรอบนิรภัย) เพื่อป้องกันไม่ให้การกดพลาดสร้างความเสียหายร้ายแรง
✅❌ โจทย์ถูก/ผิด — บทแนะนำ HCI
💡 ถ้าผิด ต้องแก้ให้ถูกด้วยนะครับ!
1. HCI คือการออกแบบหน้าจอ (Screen Design) เป็นหลัก
2. Dark Pattern คือการออกแบบที่จงใจหลอกล่อให้ผู้ใช้ตัดสินใจในสิ่งที่ไม่ต้องการ
3. Action Slips เกิดขึ้นเพราะผู้ใช้ไม่ตั้งใจใช้งาน
4. ระบบที่ Useful หมายความว่าใช้งานง่าย เรียนรู้ได้เร็ว
1 ปัจจัยด้านมนุษย์ (The Human) — สรุปเจาะลึกทุกประเด็น
🎯 แก่นหลักของบท: มนุษย์คือระบบประมวลผลข้อมูล (Human Processor) ที่มีขีดจำกัดทางชีวภาพและจิตวิทยา! การออกแบบ UI ที่ดีต้อง "เข้าใจข้อจำกัดของตา หู มือ และสมองของมนุษย์ เพื่อลดภาระและป้องกันความผิดพลาด"
👁️ 1. ระบบการมองเห็น (Vision & Visual Perception)
การมองเห็นไม่ได้เป็นแค่การบันทึกภาพเหมือนกล้อง แต่เป็น กระบวนการตีความของสมอง (Active Cognitive Decoding)
1.1 สองขั้นตอนหลักของการมองเห็น (Two Distinct Stages)
- Physical Reception of Stimulus: แสงสะท้อนจากวัตถุเข้าสู่เลนส์ตา ตกกระทบจอประสาทตา (Retina) เป็น ภาพหัวกลับ (Inverted Image)
- Processing & Interpretation: สมองถอดรหัสสัญญาณประสาท แปลงเป็นภาพและแบบจำลองทางความคิด (Mental Model) โดยอิงจากประสบการณ์เดิม
1.2 สรีรวิทยาการทำงานของดวงตา (Visual Physiology 5 ขั้นตอน)
- Light Reflection: แสงสะท้อนจากวัตถุเดินทางเข้าสู่ดวงตา
- Light Receiving & Refraction: กระจกตาและเลนส์ตาช่วยหักเหแสง รูม่านตา (Pupil) ปรับขนาดควบคุมปริมาณแสง
- Inverted Image Projection: ภาพฉายตกกระทบแบบกลับหัวลงบนฉากหลังของเรตินา (Retina)
- Retinal Photoreception: เซลล์รับแสง 2 ชนิดแปลงแสงเป็นกระแสประสาท:
- Rod Cells (เซลล์รูปแท่ง ~120 ล้านเซลล์): ไวต่อแสงมาก ทำงานใน ที่มืด/แสงสลัว (Night Vision) ไม่แยกแยะสี (เห็นขาว-ดำ)
- Cone Cells (เซลล์รูปกรวย ~6 ล้านเซลล์): อยู่หนาแน่นตรงกลาง (Fovea) ทำงานใน ที่สว่าง รับรู้สีและความคมชัดสูง
- Ganglion Cell Coding: รวมกลุ่มสัญญาณส่งผ่านเส้นประสาทตา (Optic Nerve) เข้าสู่สมอง
1.3 การรับรู้ทางสายตา (Visual Perception: 3 มิติพื้นฐาน)
A. ขนาดและมิติความลึก (Size & Depth):
- Visual Angle (องศาการมองเห็น): องศามาก = รู้สึกว่าวัตถุใหญ่ | องศาเท่ากันได้ถ้าขนาดต่างกันแต่อยู่คนละระยะ (ใกล้-ไกล)
- Visual Acuity: ขีดจำกัดทางชีวภาพในการแยกแยะรายละเอียดเล็กๆ ของสายตา
- UX Takeaway: จัดลำดับความสำคัญ (Size Hierarchy) โดยปรับขนาดฟอนต์และระยะเงา (Elevation) เพื่อบอกความสำคัญและมิติความลึก
B. ความสว่างและความต่างแสง (Brightness & Luminance):
- Luminance: ปริมาณแสงทางฟิสิกส์ที่วัดได้จริง
- Brightness: ความสว่างที่มนุษย์รู้สึก (Subjective) ขึ้นอยู่กับ Contrast ของฉากหลัง
- UX Takeaway: ทำ Light/Dark Mode และรักษาค่า Contrast ระหว่างตัวหนังสือกับพื้นหลังให้อ่านง่าย (WCAG Standard)
C. สีและข้อจำกัด (Color & Constraints):
- 3 มิติของสี = Hue (เฉดสี), Intensity (ความสว่าง), Saturation (ความสดอิ่มตัว)
- 🚨 Blue Acuity Limit: ตาจับโฟกัสสีน้ำเงินได้แย่ที่สุด ห้ามใช้ตัวหนังสือสีน้ำเงินขนาดเล็ก
- 🚨 Color Blindness (ตาบอดสี ~8% ในผู้ชาย): ห้ามใช้สีเป็นตัวบอกสถานะเพียงอย่างเดียว ต้องมีไอคอน/ข้อความกำกับเสมอ
- Functional Colors: สีเขียว = สำเร็จ/ปลอดภัย, สีแดง = ผิดพลาด/อันตราย, สีเหลือง = เตือน/รอ
1.4 บริบทและภาพลวงตา (Contextual Resolution & Illusions)
- Ambiguous Shape: รูปเส้น
|3สมองจะอ่านเป็น 'B' เมื่ออยู่ในกลุ่มA |3 Cแต่อ่านเป็น '13' เมื่ออยู่ในกลุ่ม12 |3 14➜ สมองใช้บริบทแวดล้อมช่วยตีความสิ่งที่กำกวม - Optical Illusions: Ponzo Illusion (เส้นลู่รางรถไฟหลอกตาว่าเส้นบนยาวกว่า), Muller-Lyer (ลูกศรหุบ-กาง)
1.5 กลไกการอ่านของมนุษย์ (Reading Process)
- Fixations (การเพ่งนิ่ง 200-250ms): เป็นช่วงเดียวที่สมองอ่านและรับรู้ข้อมูลตัวอักษร (ครั้งละ 9-15 ตัว)
- Saccades (การกระโดดของตา 20-30ms): ช่วงที่สายตากระโดดข้ามคำ สมองจะไม่อ่านข้อมูล
- Word Shape: สมองอ่านเป็น "รูปคำ" และใช้บริบทช่วยเดาคำ (เช่น "Aoccdrnig to rscheearch...")
- Negative Contrast: ตัวหนังสือเข้มบนพื้นสว่าง อ่านง่ายสบายตาที่สุดบนหน้าจอคอมพิวเตอร์
👂 2. ระบบการได้ยิน (Hearing & Auditory Perception)
- ช่วงความถี่ที่ได้ยิน: 20 Hz – 15 kHz (หรือ 20 Hz – 20 kHz)
- คุณสมบัติเสียง: Pitch (ความถี่สูง-ต่ำ Hz), Loudness (ความดัง dB), Timbre (น้ำเสียง/คุณภาพเสียงที่บอกชนิดเครื่องดนตรี/อุปกรณ์)
- Cocktail Party Phenomenon: สมองสามารถกรองตัดเสียงจอแจรอบข้าง เพื่อโฟกัสฟังเฉพาะเสียงคู่สนทนาคนเดียวได้
- ตัวอย่างเสียงใน UX: เสียงแจ้งเตือน LINE, สแกนจ่ายเงิน "ติ๊ง", AirPods Spatial Audio, เสียงเตือน Tesla
- 🎯 Golden Rule: "เสียงที่ดี ไม่ใช่เสียงที่ดังที่สุด แต่คือเสียงที่ผู้ใช้ควรได้ยินในเวลาที่เหมาะสม"
✋ 3. สัมผัสและการตอบสนอง (Touch & Movement)
3.1 ตัวรับสัมผัสใต้ผิวหนัง (Skin Receptors)
- Mechanoreceptors: ตรวจจับแรงกดและแรงสั่นสะเทือน (หัวใจของระบบสั่น Haptic Feedback)
- Thermoreceptors: ตรวจจับความร้อน-เย็น
- Nociceptors: ตรวจจับความเจ็บปวด
- Kinesthesis: การรับรู้ตำแหน่งกล้ามเนื้อและข้อต่อ ช่วยให้พิมพ์สัมผัสได้โดยไม่ต้องก้มมองแป้น
3.2 ความเร็วในการตอบสนอง (Reaction Time — ออกสอบบ่อย! ⭐)
$ ext{Total Response Time} = ext{Reaction Time (เวลารับรู้/คิด)} + ext{Movement Time (เวลาขยับกล้ามเนื้อ)}$
| ประสาทสัมผัส | Reaction Time เฉลี่ย | การนำไปใช้ใน UX |
|---|---|---|
| 🥇 Auditory (เสียง) | ~150 ms (เร็วที่สุด) | ใช้เสียงเตือนเหตุฉุกเฉินเพื่อให้คนตอบสนองทันที |
| 🥈 Visual (ภาพ/แสง) | ~200 ms | ใช้แสงกะพริบหรือเปลี่ยนสีปุ่ม |
| 🥉 Pain (ความเจ็บปวด) | ~700 ms | การตอบสนองช้าสุด |
🧠 4. โครงสร้างความจำมนุษย์ (Human Memory: 3 ระดับ)
1. Sensory Memory
เก็บบันทึกสิ่งเร้าชั่วคราว เสี้ยววินาที
เก็บบันทึกสิ่งเร้าชั่วคราว เสี้ยววินาที
- Iconic (ภาพ): 0.3 – 0.5 วินาที (ไฟควงเป็นเส้นสาย Sparkler)
- Echoic (เสียง): 3.0 – 4.0 วินาที
- Haptic (สัมผัส): ~1.0 วินาที
2. Short-Term Memory (STM)
กระดาษทด (Scratch-pad) หรือ RAM สมอง
กระดาษทด (Scratch-pad) หรือ RAM สมอง
- Access time: ~70ms
- Decay: สลายตัวใน ~200ms - 30s
- Miller's Law: ความจุจำกัดที่ 7 ± 2 Chunks (5-9 ก้อน)
- Chunking: จัดกลุ่มเบอร์โทร
081-234-5678
3. Long-Term Memory (LTM)
Hard Disk สมอง ความจุไม่จำกัด
Hard Disk สมอง ความจุไม่จำกัด
- Episodic: จำประสบการณ์และเรื่องราวตามลำดับเวลา
- Semantic: จำข้อเท็จจริง กฎเกณฑ์ ภาษา โครงสร้างความรู้
- Decay: ค่อยๆ ลืมตามกาลเวลา
การลืมใน LTM (LTM Interference):
- Retroactive Interference (รบกวนย้อนหลัง): เรียนรู้ระบบใหม่แล้วทำให้ลืมวิธีใช้ระบบเก่า
- Proactive Inhibition (ขัดขวางไปข้างหน้า): ความคุ้นชินจากระบบเดิมมาขัดขวางการเรียนรู้ระบบใหม่
🏆 Recall vs Recognition (หัวใจสูงสุดของ UX Design ⭐⭐⭐)
| มิติเปรียบเทียบ | Recall (นึกจำขึ้นมาเอง) | Recognition (จำได้เมื่อเห็นตัวเลือก) |
|---|---|---|
| กระบวนการ | สมองต้องขุดค้นข้อมูลจากความว่างเปล่า | สมองระบุข้อมูลได้ทันทีเมื่อมีสิ่งชี้นำ (Cues) |
| ภาระสมอง | ใช้พลังงานสูง (High Cognitive Effort) | ใช้พลังงานต่ำมาก (Minimal Load) |
| เปรียบข้อสอบ | ข้อสอบข้อเขียน / ข้อสอบเติมคำ | ข้อสอบกา (Multiple Choice) |
| ตัวอย่างใน UI | หน้าจอดำพิมพ์คำสั่ง (CLI) ต้องจำเอง | ไอคอน GUI, เมนู Dropdown, Auto-complete |
| ตัวอย่าง Netflix | ต้องจำเองว่าซีรีส์ค้างที่ตอนไหน นาทีไหน | แถบ "Continue Watching" โชว์โปสเตอร์ทันที |
💡 UX Golden Rule: ออกแบบระบบที่เน้น Recognition มากกว่า Recall เสมอ!
💡 5. การคิดและการให้เหตุผล (Thinking & Reasoning 3 รูปแบบ)
| ประเภท Reasoning | กระบวนการคิด | ตัวอย่างจริง | การนำไปใช้ใน UX/UI |
|---|---|---|---|
| 1. Deductive (นิรนัย) | "จากทั่วไป $
ightarrow$ สู่เฉพาะ" ใช้กฎใหญ่มาตัดสิน |
กฎ: ปุ่มแดง = อันตราย เจอปุ่มแดง $ ightarrow$ รู้ทันทีว่าอันตราย |
UI Standards: ปุ่มแดง=ลบ, ปุ่มเขียว=ตกลง, กากบาท=ปิด |
| 2. Inductive (อุปนัย) | "จากเฉพาะ $
ightarrow$ สู่ทั่วไป" ใช้ประสบการณ์สรุปเป็นกฎ |
เห็น 10 แอปมีเมนูซ้ายบน $ ightarrow$ สรุปว่าแอปที่ 11 ก็ต้องมี | Pattern Design (Jakob's Law): วางตำแหน่งตามที่ผู้ใช้คุ้นเคย |
| 3. Abductive (สมมตินัย) | "เดาสาเหตุจากผลลัพธ์ที่เห็น" ข้อมูลจำกัด จึงเดาสิ่งที่เป็นไปได้สุด |
เห็นรูปดาวข้างชื่อสินค้า $ ightarrow$ เดาว่าหมายถึงบันทึกรายการโปรด | Intuitive UI: วางตำแหน่งไอคอนให้เดาง่าย และบอก Error ชัดเจน |
📌 Wason's Cards Task (ไพ่ 7, E, 4, K): พิสูจน์ว่ามนุษย์มักมี Confirmation Bias ชอบมองหาแต่หลักฐานยืนยันความคิดตนเอง มากกว่ามองหาหลักฐานหักล้าง
⚠️ 6. ข้อผิดพลาดและอิทธิพลของอารมณ์ (Errors & Emotion)
Slips (ความพลั้งเผลอทางกายภาพ)
• เจตนาถูกต้อง แต่ มือพลาดทางกายภาพ เช่น จะกด Save แต่โดน Cancel
• วิธีแก้ใน UI: เว้นระยะห่างปุ่ม, ใส่ Confirmation Dialog ก่อนลบ
• เจตนาถูกต้อง แต่ มือพลาดทางกายภาพ เช่น จะกด Save แต่โดน Cancel
• วิธีแก้ใน UI: เว้นระยะห่างปุ่ม, ใส่ Confirmation Dialog ก่อนลบ
Mistakes (ความเข้าใจผิดเชิงความคิด)
• เจตนาผิดตั้งแต่แรก เพราะเข้าใจระบบผิด (Mental Model ไม่ตรงกับระบบจริง)
• วิธีแก้ใน UI: แสดงสถานะระบบให้โปร่งใส (Status Visibility)
• เจตนาผิดตั้งแต่แรก เพราะเข้าใจระบบผิด (Mental Model ไม่ตรงกับระบบจริง)
• วิธีแก้ใน UI: แสดงสถานะระบบให้โปร่งใส (Status Visibility)
อารมณ์และความแตกต่างของบุคคล (Emotion & Differences):
- Positive Affect & Aesthetic-Usability Effect: ความสวยงามสบายตาทำให้ผู้ใช้รู้สึกผ่อนคลาย คิดสร้างสรรค์ และ ยอมให้อภัยข้อผิดพลาดเล็กๆ ของระบบได้ง่ายขึ้น (Relaxed users are more forgiving)
- Negative Affect (ความเครียด): ทำให้สมองคิดแคบ (Narrow Thinking) ตื่นตระหนกและแก้ปัญหาไม่ออก
- Inclusive Design: ออกแบบเผื่อความหลากหลาย เช่น ผู้สูงอายุ (Age-Responsive), ผู้พิการทางสายตา, และความเหนื่อยล้าชั่วคราว
🧠 แบบฝึกหัด — บทที่ 1: The Human
ข้อ 1: Miller's Law กล่าวถึงอะไร? มีผลต่อการออกแบบ UI อย่างไร? ยกตัวอย่าง
ข้อ 2: Recognition vs. Recall ต่างกันอย่างไร? และนักออกแบบ UI ควรสนับสนุนอะไร?
ข้อ 3: ทำไม Brightness และ Color ถึงมีบทบาทต่างกันในการออกแบบ UI?
✏️ โจทย์เติมคำ — บทที่ 1: The Human
1. ความจำระยะสั้นของมนุษย์สามารถจดจำได้ประมาณ ________ ชิ้นข้อมูล ตามกฎของ Miller's Law
2. เซลล์รับแสงที่ไวต่อแสงสลัวและไม่แยกแยะสี คือ ________ ส่วนเซลล์ที่ทำงานในที่สว่างและรับรู้สี คือ ________
3. ความจำระยะยาวที่เกี่ยวข้องกับ "ทักษะการขี่จักรยาน" จัดอยู่ในประเภท ________
4. การรับรู้ข้อมูลตัวอักษรขณะอ่านจะเกิดขึ้นเฉพาะในช่วง ________ ส่วนการกระโดดของสายตาเรียกว่า ________
5. เรียนรู้ระบบใหม่แล้วลืมระบบเดิม เรียกว่า ________ ส่วนความคุ้นชินระบบเดิมขัดขวางการเรียนรู้ระบบใหม่ เรียกว่า ________
6. ประสาทสัมผัสที่ Reaction Time เร็วที่สุด (~150ms) คือ ________
✅❌ โจทย์ถูก/ผิด — บทที่ 1: The Human
💡 ถ้าผิด ต้องแก้ให้ถูกด้วยนะครับ!
1. Long-Term Memory มีความจุจำกัดเช่นเดียวกับ Short-Term Memory
2. ภาพที่ตกกระทบเรตินาของดวงตามีลักษณะเป็นภาพกลับหัว (Inverted)
3. สีน้ำเงินเป็นสีที่ดวงตามนุษย์มองเห็นได้ชัดเจนที่สุด จึงนิยมใช้เป็นสีตัวอักษร
4. Mistakes คือความผิดพลาดที่เกิดจาก Mental Model ของผู้ใช้ไม่ตรงกับระบบจริง
5. อินเทอร์เฟซที่สวยงามมักถูกผู้ใช้รับรู้ว่าใช้งานง่ายกว่าความเป็นจริง เรียกว่า Aesthetic-Usability Effect
2 Paradigm and Conceptualizing
🎯 ภาพรวม: วิวัฒนาการของคอมพิวเตอร์ที่ส่งผลต่อการออกแบบ และการสร้างโมเดลความเข้าใจระหว่างคนกับระบบ
1. Paradigm Shifts (กระบวนทัศน์ทั้ง 6 ยุค)
ประวัติศาสตร์ของเทคโนโลยีคอมพิวเตอร์ที่นำมาสู่วิวัฒนาการด้านการออกแบบ:
- 1950s: Batch Processing - ป้อนบัตรเจาะรู ไม่มีจอภาพ ไม่มีการโต้ตอบแบบเรียลไทม์ระหว่างทำงาน
- 1960s: Time-Sharing - คอมฯ 1 เครื่องแชร์ให้หลายคนใช้ผ่านจอ Terminal เริ่มมีการโต้ตอบ
- 1980s: GUI (WIMP) - กำเนิด Desktop Metaphor มี Windows, Icons, Menus, Pointers (เช่น Apple Macintosh)
- 1990s: Web Era - ระบบ Hypertext ข้ามข้อจำกัดสถานที่
- Modern: Ubiquitous Computing - เทคโนโลยีล่องหนและกลมกลืนไปกับสิ่งของรอบตัวในชีวิตประจำวัน (Mark Weiser)
- Future: AI & Agentic AI - AI ไม่ใช่แค่เครื่องมือ แต่เป็น "คู่คิดเสมือนจริง"
2. Mental Model vs Conceptual Model
| Mental Model | Conceptual Model |
|---|---|
| ภาพจำและความคาดหวังที่ ผู้ใช้ (User) คิดไว้ | โครงสร้างตรรกะที่ นักออกแบบ (Designer) สร้างขึ้น |
| เกิดจากประสบการณ์อดีตและการสังเกต | สร้างขึ้นเพื่อให้ตรงกับสิ่งที่ผู้ใช้คาดหวัง |
3. องค์ประกอบของ Conceptual Model
- Metaphors & Analogies (อุปลักษณ์/การอุปมา): การเปรียบเทียบกับโลกจริง เช่น "Inbox" คือกล่องจดหมายหน้าบ้าน หรือ "Trash" คือถังขยะ
- ปัญหาที่พบบ่อย: Dead Metaphors (สัญลักษณ์ที่ไม่มีอยู่แล้วในชีวิตจริง เช่น แผ่น Floppy Disk), หรือ Cultural Bias (ความเข้าใจข้ามวัฒนธรรมไม่เหมือนกัน)
- Domain Concepts: วัตถุ คุณลักษณะ หรือการกระทำหลักในระบบ (เช่น ใน Email ประกอบด้วย Subject, Sender, Timestamp)
- Relationship Mappings: การเชื่อมโยงการกระทำเข้ากับผลลัพธ์ (เช่น ปัดขวา = ย้ายไปถังขยะ)
4. รูปแบบการปฏิสัมพันธ์ (Interaction Types) 5 รูปแบบ
1. Instructing (สั่งการ): ออกคำสั่งตรงๆ รวดเร็ว (พิมพ์ Command, กดตู้เต่าบิน)
2. Conversing (สนทนา): โต้ตอบด้วยภาษาธรรมชาติ (Siri, ChatGPT)
3. Manipulating (จัดการ): ควบคุมวัตถุโดยตรง เช่น ลาก ปรับขนาด (Drag & Drop, Canva) ขับเคลื่อนด้วยหลัก Direct Manipulation
4. Exploring (สำรวจ): เคลื่อนที่ไปในโลก 3D (VR, เกม)
5. Responding (ตอบสนอง): ระบบรับรู้และแจ้งเตือนก่อนให้เราตอบสนอง (Smartwatch จับการล้ม หรือเตือนฝนตก)
🧠 แบบฝึกหัด — บทที่ 2: Paradigms & Conceptual Model
ข้อ 1: จงเรียงลำดับ Paradigm การโต้ตอบจากยุคแรกจนถึงปัจจุบัน พร้อมระบุลักษณะเด่นของแต่ละยุค
ข้อ 2: Conceptual Model ของ Email มีองค์ประกอบ 3 ส่วนอะไรบ้าง? จงอธิบายพร้อมตัวอย่าง
ข้อ 3: Interface Metaphor คืออะไร? มีข้อดีและข้อเสียอย่างไร? ยกตัวอย่าง "Dead Metaphor"
✏️ โจทย์เติมคำ — บทที่ 2: Paradigm
1. กระบวนทัศน์ยุค 1950s ที่ผู้ใช้ต้องป้อนบัตรเจาะรูแล้วรอผลลัพธ์ เรียกว่า ________
2. Mark Weiser กล่าวว่าเทคโนโลยีที่ลึกซึ้งที่สุดคือเทคโนโลยีที่ ________
3. Mental Model เป็นของ ________ ส่วน Conceptual Model เป็นสิ่งที่ ________ สร้างขึ้น
4. ไอคอน Floppy Disk ที่ยังใช้เป็นสัญลักษณ์ Save ทั้งที่แผ่นดิสก์ไม่มีใช้แล้ว เรียกว่า ________
5. Interaction Type ที่ระบบเป็นฝ่ายส่ง Notification ก่อน แล้วผู้ใช้ตัดสินใจตอบสนอง เรียกว่า ________
✅❌ โจทย์ถูก/ผิด — บทที่ 2: Paradigm
💡 ถ้าผิด ต้องแก้ให้ถูกด้วยนะครับ!
1. Batch Processing คือกระบวนทัศน์ที่ผู้ใช้สามารถโต้ตอบกับระบบได้แบบ Real-time ระหว่างที่โปรแกรมทำงาน
2. Interface Metaphors มีแต่ข้อดี ช่วยให้ผู้ใช้เข้าใจระบบได้ทันที ไม่มีข้อเสีย
3. Mental Model และ Conceptual Model เป็นสิ่งเดียวกัน ใช้แทนกันได้
3 Interaction Design (IxD)
🎯 Golden Rule of UX:
"You CANNOT design a user experience — you can ONLY design FOR a user experience."
(เราไม่สามารถออกแบบประสบการณ์โดยตรงได้ เพราะมันเกิดในใจผู้ใช้ เราทำได้เพียงออกแบบสภาพแวดล้อมเพื่อเหนี่ยวนำให้เกิดประสบการณ์ที่ดี)
"You CANNOT design a user experience — you can ONLY design FOR a user experience."
(เราไม่สามารถออกแบบประสบการณ์โดยตรงได้ เพราะมันเกิดในใจผู้ใช้ เราทำได้เพียงออกแบบสภาพแวดล้อมเพื่อเหนี่ยวนำให้เกิดประสบการณ์ที่ดี)
1. 3 มิติหลักของการออกแบบ (What to Design?)
- Who (Users): ใครคือผู้ใช้? ข้อจำกัด ความรู้ ช่วงวัย
- What (Activities): พวกเขาเข้ามาทำอะไร? กิจกรรมหลักคืออะไร?
- Where (Context): สภาพแวดล้อมตอนใช้งานเป็นอย่างไร? (แสง เสียง การเคลื่อนที่)
2. เป้าหมายของการออกแบบ
Hassenzahl's Model แบ่ง UX เป็น 2 ด้าน ซึ่งสินค้าที่ดีต้องสร้างสมดุล:
- Pragmatic Quality (เน้นฟังก์ชัน): เร็ว มีประสิทธิภาพ แก้ปัญหาได้ (เช่น Grab — จองรถเสร็จใน 5 วินาที)
- Hedonic Quality (เน้นอารมณ์): สนุก ภูมิใจ บอกตัวตน (เช่น TikTok — ไถเพลินไม่ยอมหยุด)
3. Usability Goals 6 ประการ (เป้าหมายด้านการใช้งาน)
- Effective: ทำงานสำเร็จตามเป้าหมาย (ทำได้)
- Efficient: ทำสำเร็จรวดเร็ว ขั้นตอนน้อย (ทำไว)
- Safe: ป้องกันความผิดพลาด และถ้าพลาดต้องมีทางแก้ (Undo)
- Good Utility: มีฟีเจอร์ที่ตรงกับเนื้องาน
- Learnable: ผู้ใช้ใหม่เรียนรู้ได้เร็ว
- Memorable: ผู้ใช้เดิมกลับมาใช้ใหม่ก็ยังจำได้
4. Accessibility vs Inclusiveness
| Accessibility (การเข้าถึง) | Inclusiveness (ความครอบคลุม) |
|---|---|
| ออกแบบให้ ผู้พิการ/มีความบกพร่อง ใช้งานได้ | ออกแบบให้ครอบคลุม ทุกคน (วัย, เพศ, สถานการณ์) |
| ตัวอย่าง: Screen reader (VoiceOver) | ตัวอย่าง: Subtitle สำหรับดูวิดีโอตอนอยู่บนรถไฟฟ้า |
* ทุกคนในโลกล้วนเคยเผชิญ Situational Disability (ข้อจำกัดตามสถานการณ์) เช่น อุ้มลูกอยู่ หรือโดนแดดสะท้อนหน้าจอ
5. Don Norman's 6 Design Principles (หลัก 6 ประการคลาสสิก)
1. Visibility (การมองเห็น): ฟังก์ชันสำคัญต้องเห็นชัด (เช่น โชว์ปุ่มจ่ายเงิน ไม่ซ่อนในเมนู)
2. Feedback (การตอบสนอง): ทำอะไรไปต้องรู้ผล (คลิกแล้วมีเสียง, สีเปลี่ยน) ความเงียบคือศัตรูของความมั่นใจ
3. Constraints (ข้อจำกัด): บล็อกทางเลือกเพื่อกันพลาด (เช่น สาย USB-C, ปุ่มเทากดไม่ได้ถ้ากรอกข้อมูลไม่ครบ)
4. Consistency (ความสม่ำเสมอ): กฎเดียวกันทั้งระบบ (เช่น ปุ่มลบสีแดงเสมอ) *แต่สามารถแหกกฎได้ถ้าจำเป็นจริงๆ
5. Affordance (ชี้นำการใช้): รูปทรงบอกวิธีใช้ในตัว (ปุ่มนูน=ให้กด, แผ่นเรียบ=ให้ผลัก)
6. Mapping (ความสอดคล้อง): จับคู่การควบคุมให้ตรงธรรมชาติ (ลูกบิดเตาแก๊สเรียงตรงหัวเตา)
โจทย์ข้อที่ 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
✓ บันทึกเรียบร้อย
✏️ โจทย์เติมคำ — บทที่ 3: Interaction Design
1. กฎทองคำของ UX Design คือ "You cannot design a ________, you can only design ________ a user experience"
2. Hassenzahl แบ่ง UX ออกเป็น 2 ด้าน คือ ________ Quality (เน้นฟังก์ชัน) และ ________ Quality (เน้นอารมณ์ความรู้สึก)
3. ใน 6 Usability Goals ข้อที่หมายถึง "ผู้ใช้เก่ากลับมาใช้ซ้ำได้ทันทีไม่ลืม" คือ ________
4. หลักการออกแบบของ Don Norman ที่กล่าวว่า "วัตถุสื่อวิธีใช้งานในตัวเอง เช่น ปุ่มนูนบอกว่ากดได้" เรียกว่า ________
5. Accessibility เน้นที่ ________ ส่วน Inclusiveness เน้นที่ ________
6. การออกแบบปุ่มให้เป็นสีเทาในสถานะที่ยังกดไม่ได้ เป็นการใช้หลักการ ________ ของ Don Norman
✅❌ โจทย์ถูก/ผิด — บทที่ 3: Interaction Design
💡 ถ้าผิด ต้องแก้ให้ถูกด้วยนะครับ!
1. Usability Goal ข้อ Safe หมายความว่าระบบต้องไม่มีข้อผิดพลาดเกิดขึ้นเลย
2. Feedback สามารถอยู่ในรูปแบบของเสียง การไฮไลต์สี ภาพเคลื่อนไหว หรือการสั่น (Haptic)
3. Accessibility และ Inclusiveness มีความหมายเหมือนกัน ใช้แทนกันได้
4. ประชาชนทุกคนมีโอกาสประสบกับข้อจำกัดตามสถานการณ์ (Situational impairment) ในชีวิต
5 Interfaces — 20 รูปแบบอินเทอร์เฟซ
🎯 Chapter Outcome: การเลือก Interface ที่ดีที่สุดคือการ "จับคู่วิธีการปฏิสัมพันธ์ให้เหมาะกับ ผู้ใช้ (Users), งาน (Tasks) และบริบท (Context)" ไม่ใช่หลับตาเลือกตามเทรนด์เทคโนโลยี
1. 20 อินเทอร์เฟซ (แบ่งเป็น 4 กลุ่มหลัก)
กลุ่ม 1: Screen & Software
- Command-line (CLI): เหมาะกับผู้เชี่ยวชาญ ทำงานซ้ำๆ เร็ว แต่ Recall Load สูงมาก
- Graphical (GUI): ถือกำเนิดหลัก WIMP (Windows, Icons, Menus, Pointers)
- Multimedia: รวมข้อความ ภาพ เสียง เข้าด้วยกัน
- Web: สิ่งสำคัญที่สุดคือการตอบ Veen's 3 Questions: 1. ฉันอยู่ที่ไหน? 2. ไปไหนต่อได้บ้าง? 3. หน้านี้มีอะไร?
- Mobile: ต้องคำนึงถึง Fitts' Law (เป้าใหญ่/ใกล้ยิ่งกดง่าย) Touch Target ขั้นต่ำบนมือถือคือ 44 × 44 points
กลุ่ม 2: Natural Input
- Voice (VUI): ฟีเจอร์สำคัญ: Barge-in คือการอนุญาตให้ผู้ใช้พูดแทรกขณะระบบกำลังพูดได้เลย ไม่ต้องรอจบประโยค
- Touch / Pen / Gesture / Multimodal
กลุ่ม 3: Immersive & Physical
- VR (Virtual Reality) / AR (Augmented Reality):
ข้อควรระวัง: ปัญหา Off-registration ใน AR คือความผิดพลาดวิกฤต (เมื่อภาพเสมือนเหลื่อมตำแหน่ง ไม่ตรงกับวัตถุจริง) - Haptic: การสื่อสารด้วยแรงสั่น (Apple Watch, จอยเกม)
- Shareable / Tangible: เชื่อมข้อมูลดิจิทัลกับของที่จับต้องได้
กลุ่ม 4: Embedded & Intelligent
- Appliance (เครื่องใช้ในบ้าน): เลือกระหว่าง Hard Controls (ปุ่มกดจริง ทนทาน สัมผัสได้) กับ Soft Controls (ปุ่มบนจอ ยืดหยุ่นเปลี่ยนง่าย)
- Wearables: กรณีศึกษา Google Glass ล้มเหลวเพราะ Social Acceptability (การยอมรับทางสังคม) คนรอบข้างกลัวโดนแอบถ่าย
- Robots / BCI / Smart Interfaces: Smart UI ต้องมี 4 คุณสมบัติ คือ Connected, Context-aware, Adaptive และ Controllable (ผู้ใช้ควบคุมและสั่งการทับได้เสมอ)
2. รูปแบบของ Icon Mapping ใน GUI
| ประเภท | ลักษณะ | ตัวอย่าง |
|---|---|---|
| Similar | รูปเหมือนสิ่งของจริง (เข้าใจเร็วสุด) | รูปแผ่นกระดาษ = ไฟล์เอกสาร |
| Analogical | ใช้อุปมาเปรียบเทียบจากหน้าที่ของสิ่งนั้น | รูปกรรไกร = คำสั่ง Cut (ตัด) |
| Arbitrary | กำหนดขึ้นเอง ไม่มีเค้าโครงจริง ต้องอาศัยเรียนรู้ | เครื่องหมาย X = ปิด หรือ ลบ |
✏️ โจทย์เติมคำ — บทที่ 5: Interfaces
1. โมเดลพื้นฐานของ GUI คือ ________ ซึ่งย่อมาจาก Windows, Icons, Menus, Pointing Device
2. ไอคอนรูปกรรไกรแทนคำสั่ง Cut เป็นการใช้ Icon Mapping แบบ ________
3. กฎที่กล่าวว่าปุ่มหรือเป้าหมายที่ใหญ่และอยู่ใกล้จะถูกกดได้เร็วกว่า คือกฎ ________
4. ฟีเจอร์ที่ให้ผู้ใช้พูดสั่งการแทรกระบบโต้ตอบด้วยเสียง (VUI) ได้ทันทีโดยไม่ต้องรอให้พูดจบ เรียกว่า ________
5. ปัญหาในระบบ AR ที่ภาพเสมือนทับซ้อนเหลื่อมกับตำแหน่งของวัตถุจริง เรียกว่า ________
✅❌ โจทย์ถูก/ผิด — บทที่ 5: Interfaces
💡 ถ้าผิด ต้องแก้ให้ถูกด้วยนะครับ!
1. ไอคอนเครื่องหมายกากบาท (X) สำหรับปิดหน้าต่าง เป็นการใช้ Icon Mapping แบบ Similar
2. ปุ่มกดจริง (Hard Controls) เช่น ลูกบิดเตาแก๊ส หรือปุ่มแอร์ในรถยนต์ มีความคงทนและให้สัมผัส (Tactile feedback) ดีกว่าปุ่มบนจอสัมผัส (Soft Controls)
3. Smart Interfaces ที่ดีควรทำงานอัตโนมัติทั้งหมดโดยไม่ให้ผู้ใช้เข้ามาแทรกแซง
4. Google Glass เป็นตัวอย่างของเทคโนโลยี Wearables ที่ประสบความสำเร็จด้าน Social Acceptability อย่างมาก