1. The Overview of HCI
Human-Computer Interaction
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

2. ชื่อวิชา การปฏิสัมพันธระหวางมนุษยกับคอมพิวเตอร
รหัสวิชา INT2104
จํานวนหนวยกิต 3(3-0-6) (หองเรียน – ปฏิบติ – คนควาดวยตนเอง)
ั
เวลาและสถานที่เรียน วันเสารเวลา 14.00 – 17.00 หอง 6203
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

3. 1 2

4. Midterm examination 30 points
Final Examination 40 points
Group Assignment 25 points
Class & Activities Attendance 5 points
Total 100
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

5. Motivation Quiz 1
จงยกตัวอยางอุปกรณเชื่อมตอประสาน
ระหวางมนุษยและคอมพิวเตอรทรจก
ี่ ู ั
มาคนละ 10ชนิด
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

6. Motivation Quiz 2
อะไรคือความแตกตางระหวางการใชงานอุปกรณทั้งสองกลุมนี้ ?

7. Overview
What is HCI ?
ความหมายของปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร (HCI)
ไดถูกนิยามไวโดย Association for Computing,
Special Interest Group of Computer-
Human Interaction (ACM SIGCHI) วา
“แนวทางที่เกี่ยวกับการออกแบบ ประเมินผล และนําไปพัฒนาของ นา
ระบบคอมพิวเตอรที่มีการโตตอบเพื่อใหมนุษยใชงาน และแนวทางที่
เกี่ยวของกับการศึกษาธรรมชาติของสิ่งที่ปรากฏอยูลอมรอบ
ระบบ”
ระบบ
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

8. HCI versus UI
จากนิยมจะพบวา HCI และ UI มีความใกลเคียงกัน แต
สิ่งที่แตกตางกันคือ
-UI จะมุงเนนในการออกแบบใหระบบคอมพิวเตอรนนนาใช และ
ั้
เปนทีนาพอใจ
่
-HCI จะเกี่ยวของกับการการทําอยางไรใหคอมพิวเตอร เขามา
ชวยเหลือใหชวิตมนุษยมีความสะดวกสบายขึ้น
ี
ดังนัน HCI จะมีกรอบการทํางานทีกวางกวา UI ในแงของการ
้ ่
พัฒนาแนวทางใหมๆในทุกดานเพื่อใหคอมพิวเตอรมาชวยงานมนุษย
สวน UI จะมุงเนนรายละเอียดในวิธีที่เลือกแลวใหอยูในจุดที่ดีที่สุด
เชน สี, ขนาดตัวอักษร, ...

9. Overview
Input Device
เปลียนจากmouse & keyboard
่
Gesture
Movement
Multitouch
Speech
Intelligent Context awareness
Mobile Phone Thai Input
Other new methods of interaction
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

10. Overview
Gesture
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

11. Overview
City Wall: Multi-touch
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

12. Overview
Microsoft Surface
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

13. Overview
Output Device
Small to disappearing screen
◦ Intelligent ”Context awareness”
◦ Speech
◦ Virtual 2D, 3D
Large public screen
◦ Intelligent ”Context awareness”
◦ Privacy and Public information
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

14. Overview
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

15. Overview
Adobe Interactive Wall
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

16. Overview
The Sixth Sense Project
PLAYAER
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

17. Overview
Interesting Technology
RFID
Accelerometer
Proximity sensor
Physiological sensors: Temp, EKG, EMG, etc.
Environment sensors: GPS, Light, Sound, etc.
Webcam
Projector
Touch screen
Others such as Bluetooth,
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

18. Overview
Research Topics
Wearable computing
Technology of future mobile, PDA, TV etc.
User interaction การติดตอระหวางคนกับคอมพิวเตอร
Mobile applications
Smart environments
Thai input method for mobile phone
Smart website
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

19. Week 1: What is HCI ?
Outlines
ความเปนมาของ HCI
เปาหมายของ HCI
แผนภาพของ HCI
หลักการที่ทําใหได HCI ที่ดี
ความทาทายของ HCI

20. วิชานี้ไดกําเนิดมาในวงการคอมพิวเตอร 10 กวาปหรือ 20 ปตนๆ
สมัยกอนจะมีสอนในสาขาวิทยาศาสตรคอมพิวเตอร ระดับสูงๆ ตั้งแตระดับ
ปริญญาโทขึ้นไปจนถึงปริญญาเอก....
ปจจุบันมีสาขาเอกใหเลือก ทาง HCI โดยตรง
บุคลากรทางดาน HCI ยังเปนที่ตองการของตลาดอุสาหกรรมซอฟตแวรและโม
บาย
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

21. เปาหมายของ HCI คือการสรางระบบที่สามารถใชงานได, มีความ
ปลอดภัย และสามารถใชงานไดจริง ซึ่งสามารสรุปเปาหมายออกเปน
หัวขอดังนี้
มีความปลอดภัย (Safety)
มีประโยชน (Utility)
มีประสิทธิผล และประสิทธิภาพ (Effectiveness and
Efficiency)
สามารถใชงานได (Usability)
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

22. System
ระบบ มีความหมายที่ครอบคลุมไมไดมีเพียงแคฮารดแวร หรือ
ซอฟตแวร แตหมายถึงสภาพแวดลอมทั้งหมดที่ใช หรือถูก
กระทบโดยเทคโนโลยีคอมพิวเตอร
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

23. Effectiveness and Efficiency
การปรับปรุงประสิทธิผล และประสิทธิภาพ คือการมุงเนนให
ระบบที่พัฒนาขึ้นมีผลการทํางานที่ดี มีความสะดวกสบายใน
แตละสวนของระบบ
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

24. Safety
ความปลอดภัย คือการมุงเนนในเรื่องการออกแบบใหระบบที่
พัฒนามีความปลอดภัยทั้งกับบุคคล และองคกรที่ใชงานระบบ
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

25. Utility
ความมีประโยชน คือการสรางระบบใหสามารใชงานไดจริงของ
ระบบที่ไดพัฒนาขึ้น
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

26. Usability
การใชงานได คือแนวคิดที่เกี่ยวกับการทําระบบใหงายตอการ
เรียนรู และงายตอการใชงานระบบคอมพิวเตอรไมกอความ
ลําบาก หรือรําคาญกับผูใช
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

27. ขั้นตอนทีจะนําไปสูเปาหมายของ HCI
่
ประกอบไปดวย 3 ขันตอนดังนี้
้
Understand คือมีความเขาใจในเรื่องจิตวิทยา, กาย
วิภาคศาสตร, และปจจัยเกี่ยวกับองคกรทางสังคม
Develop คือการใชเทคนิคตางๆในทางคอมพิวเตอรเพือ
่
ใชในการออกแบบ หรือพัฒนาผลงาน
Achieve คือการทําปฏิสัมพันธใหมีประสิทธิภาพ
ประสิทธิผล และปลอดภัยตอทั้งบุคคลและกลุม
วิชา INT2104 การปฏิสัมพันธระหวางมนุษยกบคอมพิวเตอร
ั

28. แผนภาพของ HCI

29. แผนภาพของ HCI
องคประกอบของ HCI แบงออกเปนสี่สวน แสดงดังรูป
U1: กลุมระบบคอมพิวเตอรที่ใชงานในกลุมสังคมที่ทํางาน
รวมกัน
U2: กลุมการใชโปรแกรมประยุกต ระบบ และงานที่ตองนํา
คอมพิวเตอรเขามาใชงาน
U3: กลุมที่ใชงานคอมพิวเตอรแบบเฉพาะบุคคล ตองมีการ
ดัดแปลงเพือใหใชเฉพาะงาน หรือเฉพาะบุคคล
่

30. แผนภาพของ HCI
H1: กระบวนการรับรู และวิเคราะหของมนุษย
H2: ภาษา การสื่อสาร และปฏิสัมพันธ
H3: ลักษณะการทํางานทางกายภาพของมนุษย

31. แผนภาพของ HCI
C1: อุปกรณนําเขา และแสดงผลเปนตัวเชื่อมมนุษยและ
คอมพิวเตอร
C2: เทคนิคที่ใชในขั้นตอนการโตตอบระหวางใชงาน
C3: เทคนิคที่ทําใหเกิดผลในการออกแบบขนาดใหญ
C4: รายละเอียดในสวนสนับสนุนการโตตอบ
C5: การโตตอบหลายเทคนิค ที่นําไปสูการออกแบบระบบ
สถาปตยกรรม

32. แผนภาพของ HCI
D1: การออกแบบสําหรับการโตตอบ
D2: เทคนิคและเครื่องมือสําหรับใชพฒนาใหเกิดผล
ั
D3: เทคนิคการประเมิน
D4: ตัวอยางระบบการออกแบบ และกรณีศึกษาที่เหมาะสม

33. HCI Specialists should
understand factors (influence)
on how people operate and make
use of computer technology)

34. HCI Specialists then develop
tools and techniques to help designers

35. Computer system helps users
to achieve efficient, effective
and safe interactions both
individual and group.

36. แผนภาพของ HCI
Use and Context of Computer การใชงาน และ
บริบทของคอมพิวเตอรเพื่อใหมีความลงตัวในการใชงาน
Human Characteristics เปนหัวขอที่ศึกษาทําความ
เขาใจเกี่ยวกับมนุษย
Computer System and Interface Architecture
เปนสวนประกอบพิเศษที่คอมพิวเตอรมีเพื่อการปฏิสัมพันธ
The Development Process เปนสวนที่เกี่ยวของกับการ
สรางและประเมินผลสวนตอประสานที่ใชกบมนุษย
ั

37. หลักการทีทําใหแนใจถึง HCI ทีดี
่ ่
หลักการทีทําใหแนใจถึง HCI ที่ดีคือ Visibility และ
่
Affordance ซึ่งจะนําไปสูหลักการ Perceived
Affordance
Visibility คือแนวคิดที่ใชเพื่อควบคุมการออกแบบใหสามารถ
มองเห็นวาเราทําอะไร และระบบตอบสนองเชนไร เหมาะสมหรือไม
Affordance คือแนวคิดที่ใชเพื่อควบคุมการออกแบบให
สามารถสื่อสารกับผูใชงานไดอยางชัดเจน โดยไมตองอาศัย
กระบวนการตีความเพิ่มเติม เชนเดียวกับการเห็นเกาอี้ ก็เขาใจได
ทันทีวาใชงานเชนไร

38. ความทาทายทางดาน HCI
ปจจัยที่ทาทายงานวิจัยทางดาน HCI นั้นมีอยู 2

ปจจัยดังนี้
ทําอยางไร จึงจะสามารถเก็บเกี่ยว และกาวตามความ
เปลี่ยนแปลงของเทคโนโลยี
ทําอยางไรจึงจะแนใจวาการประยุกตใชวชา HCI กับ
ิ
การออกแบบในรูปแบบเดิมจะเหมาะสมกวา การนําเอา
เทคโนโลยีใหมๆมาใชทดแทนรูปแบบเดิม

39. เอกสารอางอิง