human-computer interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...human-computer...
TRANSCRIPT
![Page 1: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/1.jpg)
UNIT 1
Human-Computer Interaction
สอการสอน รายวชาการปฏสมพนธระหวางมนษยกบคอมพวเตอร อ.จรวด โยยรมย สาขาวชาเทคโนโลยสารสนเทศ
คณะวทยาศาสตร มหาวทยาลยราชภฏบรรมย
![Page 2: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/2.jpg)
Outline
o Human-Computer Interaction คออะไร o ความเปนมาของ HCI o ท าไมตอง HCI o สวนประกอบของ HCI o ตวอยางของการออกแบบจาก HCI
![Page 3: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/3.jpg)
Human-Computer Interaction คออะไร
การปฏสมพนธระหวางมนษยและคอมพวเตอร (Human computer interaction: HCI)
เรยกยอๆ วา HCI คอ การศกษาการปฏสมพนธระหวางคนซงเปนผใชกบคอมพวเตอร โดยเปนการศกษาทเชอมโยงเกยวเนองกนของหลายๆ ศาสตร เชน วทยาการคอมพวเตอร (computer science)พฤตกรรมศาสตร (behavioral science) จตวทยา และการออกแบบ เปนตน
![Page 4: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/4.jpg)
Human-Computer Interaction คออะไร
แสดงความเกยวของระหวาง HCI กบสาขาวชาตางๆ
![Page 5: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/5.jpg)
Human-Computer Interaction คออะไร
การปฏสมพนธระหวางผใช (users) และคอมพวเตอรเกดขนทสวนตดตอผใช (user interface) ทงทางดานซอฟตแวรและฮารดแวร ตวอยางเชน • ตวอกษรหรอวตถ ทแสดงบนหนาจอของเครองคอมพวเตอร ผานซอฟตแวร • การรบขอมลจากผใชผานฮารดแวรทเปนอปกรณตอพวงกบคอมพวเตอร (peripherals) เชน คยบอรด และเมาส • การปฏสมพนธกบผใชในระบบคอมพวเตอรขนาดใหญ เชน ในเครองบน หรอในโรงงานก าเนดไฟฟา เปนตน
Wikipedia: Human computer interaction
![Page 6: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/6.jpg)
Human-Computer Interaction คออะไร
ไดนยาม HCI วา คอ องคความรทเกยวของกบการออกแบบ การประเมนผล และการน าไปใชของระบบคอมพวเตอรแบบมปฏสมพนธของมนษย และศกษาเกยวกบ ปรากฏการณตางๆ ทเกยวของ
ACM หรอ the Association for Computer Machinery
![Page 7: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/7.jpg)
Human-Computer Interaction คออะไร
โดยสรป HCI หมายถง การศกษาและวเคราะห เกยวกบ ปฎสมพนธ ระหวางอปกรณคอมพวเตอร หรอระบบคอมพวเตอร กบผใชงาน เพอตอบโจทยวาท าอยางไรจงจะท าใหระบบคอมพวเตอร ใชงานงาย มประสทธภาพ และประสทธผล โดยประยกตใชศาสตรหลายๆ ดานเขาดวยกน
สรป
![Page 8: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/8.jpg)
ความเปนมาของ HCI
o วชานไดก าเนดมาในวงการคอมพวเตอร 10 กวาปหรอ 20 ปตนๆ
o สมยกอนจะมสอนในสาขาวทยาศาสตรคอมพวเตอร ระดบสงๆ ตงแตระดบปรญญาโทขนไปจนถงปรญญาเอก
o ปจจบนมสาขาเอกใหเลอก ทาง HCI โดยตรง o บคลากรทางดาน HCI ยงเปนทตองการของตลาดอตสาหกรรมซอฟตแวรและอปกรณเคลอนท (Mobile)
![Page 9: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/9.jpg)
การน าความรจากหลายสาขามาประยกต
o ความรดานจตวทยา o ดานการเรยนร o ดานการออกแบบภาพกราฟก o ดานสถาปตยกรรมขอมล o ดานสงคม o ฯลฯ
![Page 10: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/10.jpg)
ท าไมตอง HCI
ระบบโรงพยาบาลทออกแบบเรองการกรอกขอมลคนไข o การออกแบบมมของจอทไมเหมาะสม อาจจะทาใหเกดความผดพลาดท าใหคนไขเสยชวตได
เดกเลนเกมสจนลมเวลา o นาจะออกแบบใหมนเตอนระยะเวลา
เรองเกยวกบการออกแบบหนาจอใหใชงานได โดยสามารถ เรยนรการออกแบบไดจาก
o ศกษาจากโปรแกรมทฮต o ศกษาจากความผดพลาดของโปรแกรมอน o การใชงานไดจรง o การงายตอการใชงาน
![Page 11: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/11.jpg)
องคประกอบของ HCI
HCI
Computer
Interactive
Use and Context
Human
![Page 12: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/12.jpg)
องคประกอบของ HCI
o Use and Context o Human o Computer o Interactive
![Page 13: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/13.jpg)
องคประกอบของ HCI
Use and Context
เปนการจดความเหมาะสมในการท างานของผใช กบระบบคอมพวเตอร ใหทงสองสวนสามารถท างานไดดวยกนไดอยางสอดคลองสมดล โดยวเคราะห 3 สวนคอ 1.ลกษณะการท างานขององคกร 2. ลกษณะของระบบงาน 3. การพฒนาระบบเพอเชอมโยงมนษยและระบบงานเขาดวยกน
![Page 14: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/14.jpg)
องคประกอบของ HCI
Human
ผใชหรอกลมผใชทท างานดวยกน ซงจะน าเอาการรบรของผใช เชน การมอง การไดยน และการสมผส มาใชในควบคมการสงผานขาวสารขอมลซงจะมความแตกตางกน ตามแตละความถนดของผใช หรอตามหลกการขอกาหนดของการใชงานทแตกตางกน หรอแตกตางตามความสามารถในการเรยนรและองคความรทมอย รวมไปถงความแตกตางทางธรรมชาตและวฒนธรรม
![Page 15: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/15.jpg)
องคประกอบของ HCI
Computer
คอมพวเตอรเราจะนกไปถงเทคโนโลยในขอบขายของเครอง PC แตในความหมายของคอมพวเตอรทกลาวถงนมความหมายถงระบบตางๆ ทมขอบเขตอยางกวางขวาง รวมไปถงเครองจกรกล เทคโนโลยตางๆ
![Page 16: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/16.jpg)
องคประกอบของ HCI
Interactive
เนองจากคน และเครองจกรกลมความแตกตางกนอยางมาก HCI จงเปนสงทน าเขามาชวยใหทงสองสามารถท างานดวยกนใหเปนระบบทสามารถใชงานไดอยางสมบรณ ดงนน HCI จงตองถกพฒนาขนมาโดยทตองสามารถรบรการกระตนจากมนษยซ งเปนผใชงานและสามารถทจะสงผานค าสงทเปนการสงใชคอมพวเตอรท างานไดตามความตองการ
![Page 17: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/17.jpg)
องคประกอบของ HCI
Interfaces in the Real World
ไมใชเฉพาะคอมพวเตอรเทานน o Smart Phone o Wear o Car o Television o Airline reservation o Air traffic control o Running shoes!
![Page 18: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/18.jpg)
ตวอยางอปกรณ Interactive
Multi touch
![Page 19: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/19.jpg)
ตวอยางอปกรณ Interactive
o Movement o Touch o Speech
![Page 20: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/20.jpg)
ตวอยางอปกรณ Interactive
Speech
![Page 21: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/21.jpg)
เปาหมายของการศกษาการปฏสมพนธ ระหวางมนษยและคอมพวเตอร
เปาหมายของ HCI คอ การพฒนาการปฏสมพนธระหวางผใชและคอมพวเตอร โดยท าใหคอมพวเตอรใชงานไดมากขน และตรงตามความตองการของผใช และเปนการออกแบบระบบทลดชองวางระหวางมนษยและคอมพวเตอรใหเหลอนอยทสด โดยจะตองจ าลองการท างานและการ รบร ของมนษยออกมาเปนโมเดลเพอให คอมพวเตอรสามารถเขาใจผใชงานได
(Wikipedia)
![Page 22: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/22.jpg)
เปาหมายของการศกษาการปฏสมพนธ ระหวางมนษยและคอมพวเตอร
o Safety การผลตระบบการปฏสมพนธระหวางมนษยและคอมพวเตอรทมความปลอดภย
o Utility ท าใหมประโยชนใชไดจรง o Effectiveness มประสทธผลท างานไดเรวม
ประสทธภาพ o Efficiency ใชทรพยาการคมคา o Usability สามารถน าไปใชไดจรง งายตอการเรยนร
โดยมประสทธภาพ + ประสทธผล
![Page 23: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/23.jpg)
สงจ าเปนส าหรบการออกแบบงานทางดาน HCI
o คนทใชระบบคอมพวเตอรควรมาเปนอนดบแรก ความตองการ ความสามารถ และความพงพอใจของคนเพอท ากจกรรมตางๆใหส าเรจควรบอกถงแนวทางทระบบจะถกออกแบบและถกน าไปใชงานใหเกดประโยชน
o คนไมควรตองเปลยนตวเองใหเขากบระบบ ระบบควรถกออกแบบใหตรงกบความตองการของพวกเขา
![Page 24: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/24.jpg)
ข นตอนทจะน าไปส เปาหมายของการพฒนาระบบ HCI
คอขนตอนทจะพฒนาระบบทสามารถใชงานไดอยางสมบรณและใชงานไดอยางปลอดภยในซงในการพฒนาระบบจ าเปนตองพจารณาถงสงเหลานคอ • Understand คอเขาใจในเรองจตวทยา กายศาสตร และปจจยเกยวกบองคกรและสงคมของคนเพอพฒนาระบบใหผใชสามารถทจะใช
งานระบบไดอยางงาย • Develop คอ เครองมอหรอเทคโนโลยตางๆ ทจะน ามาใชในการพฒนาระบบ • Achieve คอ ผลส าเรจและประสทธภาพของระบบ และปลอดภยในการปฏสมพนธทงตอบคคลและตอกลม
![Page 25: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/25.jpg)
ตวอยางระบบ HCI
Ubiquitous เทคโนโลย...ในการเรยนรทกททกเวลา ยบควตส (Ubiquitous) เปนค าภาษาลาตนมความหมายวาทกหนทกแหง สวนเทคโนโลยยบควตสนนมความหมายถง เทคโนโลยอจฉรยะ (intelligent technology) เทคโนโลยการสอสารในทกท ทกเวลา ซงจะชวยสรางสภาพแวดลอมทางการสอสารในรปแบบใหมทสามารถอ านวยประโยชน ใหมนษยท าการสอสารได
![Page 26: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/26.jpg)
ตวอยางระบบ HCI
ตวอยางเทคโนโลยใชแทน Mouse
FootMouse http://www.youtube.com/watch?v=If-jkWIa1mg&feature=related NO HANDS MOUSE www.footmouse.com http://www.youtube.com/watch?v=pOaJeRPXU48&feature=related
![Page 27: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/27.jpg)
ตวอยางระบบ HCI
Face recognition การรจ าใบหนา www.youtube.com/watch?v=V7UdYzCMKvw&feature=related
www.youtube.com/watch?v=98Q-DgVxBr4&feature=related
![Page 28: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/28.jpg)
ตวอยางระบบ HCI
Augmented Reality (AR) เปนเทคโนโลยใหมทพฒนารปแบบ
Human-Machine Interface ทอาศยเทคโนโลยคอมพวเตอร และระบบเสมอนจรง (Virtual Reality) โดยทวตถเสมอนนนๆ จะถกสรางมาผสมกบสภาพในโลกจรงในรป 3D และแสดงผลแบบ real time โดยเทคโนยนจะตองประกอบดวย 3 ระบบ คอ
o ระบบ tracking เชน พวก Marker ตางๆ กบกลอง หรออาจจะ sensor แบบอนๆ
o ระบบแสดงภาพ เชน จอภาพ o ระบบประมวณผลเพอสรางวตถ 3D เชน ตว
โปรแกรมทเราลงไวในคอมพวเตอร
![Page 29: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/29.jpg)
ตวอยางระบบ HCI
Gesture Recognition เทคโนโลยตรวจจบภาษากาย ศาสตรแหงการบรณาการระหวางสงมชวต กบจกรกล (Life and Machine Integration) คอ HMI (Human-Machine Interface) หรอการเชอมตอระหวางมนษยกบจกรกล ซงจะท าใหการเชอมตอในเรองของการแสดงออกทางภาษากาย หรอ อากปกรยา ระหวางมนษยกบจกรกลเกดขนได
![Page 30: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/30.jpg)
ASSIGNMENT
ใหยกตวอยางอปกรณ เทคโนโลย ในปจจบน ทมการปฏสมพนธกบผใชงาน หรอ Interactive คนละ 1 ตวอยาง พรอมบอกรายละเอยด o ผใชคอใคร o อปกรณคออะไร o ชองทางปฏสมพนธระหวางอปกรณกบผใช o วาดรปอปกรณและผใชในการท างาน
งานเดยว
![Page 31: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/31.jpg)
ค าถามทายบท
1. อธบายความหมายของระบบปฏสมพนธ 2. บอกประโยชนทไดจากการออกแบบระบบปฏสมพนธ 3. อธบายองคประกอบของระบบ HCI 4. จงอธบายระบบตอไปน
Gesture Recognition Augmented Reality Face recognition Ubiquitous
![Page 32: Human-Computer Interactionblog.bru.ac.th/wp-content/uploads/bp-attachments/8272/...Human-Computer Interaction ค ออะไร การปฏส ม พน ธร ะหว างมน](https://reader035.vdocument.in/reader035/viewer/2022071108/5fe33e3b378f2e06bd04e36a/html5/thumbnails/32.jpg)
Q & A
Thank you … Aj.jiravadee yoyram