1. เอกสารประกอบการสอน เรื่อง ภาพรวมของปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร (Overview of HCI)
เนื้อหา: 1) ปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร (HCI) คืออะไร
2) เปาหมายของ HCI
3) แผนภาพของ HCI
4) หลักการที่ทําใหแนใจถึง HCI ที่ดี
5) ความทาทายทางดาน HCI
---------------------------------------------------------------------------------------------------------------------------------------------------
1. ปฏิสัมพันธระหวางมนุษยและคอมพิวเตอรคืออะไร
ความหมายของปฏิสัมพันธระหวางมนุษยและคอมพิวเตอรหรือ Human-Computer Interaction (HCI) ไดถูกนิยามไวโดย
Association for Computing Machinery, Special Interest Group of Computer-Human Interaction (ACM SIGCHI) วา
“แนวทางที่เกี่ยวของกับการออกแบบ ประเมินผล และนําไปพัฒนาของระบบคอมพิวเตอรที่มีการโตตอบเพื่อใหมนุษยใช
งานและแนวทางที่เกี่ยวของกับการศึกษาธรรมชาติของสิ่งทีปรากฏอยูลอมรอบระบบ”
่  
นอกจากนี้ ความรูทางดาน HCI มักถูกนําไปใชในการออกแบบสวนตอประสานทีเ่ ปนมิตร (User Friendly
Interface) ซึ่งสวนตอประสาน (User Interface หรือ UI) คือ “สวนตางๆของระบบที่ผูใชเขามาติดตอดวย” หรืออีก
ความหมายหนึ่งคือ “ภาษานําเขาสําหรับผูใช ภาษาแสดงผลสําหรับเครื่องคอมพิวเตอร และตัวกําหนดสําหรับการ
ปฏิสัมพันธ”
จากคํานิยามจะพบวาทั้ง HCI และ UI มีความแตกตางกัน คือ UI ที่มีความเปนมิตรนั้นจะตองเกิดจากการทําให
สิ่งตางๆของระบบคอมพิวเตอรนาใชและเปนที่นาพอใจ สวน HCI จะเกี่ยวของกับการทําอยางไรใหคอมพิวเตอรชวยทั้ง
งานและชีวิตของคนสะดวกและดีขึ้น ซึ่งในรายละเอียดนั้น HCI ถูกสนใจในเรื่องความสามารถและขอจํากัดของผูใชที่เปน
มนุษย นั่นคือการทําความเขาใจเกี่ยวกับประชากรและคนที่มีการโตตอบกับระบบคอมพิวเตอร นอกจากนี้ปจจัยสําคัญที่มี
สวนทําใหการใชระบบคอมพิวเตอรไดสําเร็จหรือลมเหลวนั้นไดแกประเด็นการฝกอบรมและการฝกปฏิบัติงาน ประเด็น
การบริหารและการจัดองคกรและสิ่งที่เปนอันตรายตอสุขภาพ
2. เปาหมายของ HCI
เปาหมายของ HCI คือ ผลิตระบบที่สามารถใชงานได มีความปลอดภัย และสามารถปฏิบัติงานไดจริง หรืออีกนัยหนึ่งคือ
การพัฒนาหรือปรับปรุงระบบ (System) ที่ประกอบดวยคอมพิวเตอรใหมีความปลอดภัย (Safety) มีประโยชน (Utility) มี
ประสิทธิผล (Effectiveness) มีประสิทธิภาพ (Efficiency) และสามารถใชงานได (Usability)
2.1. System
ระบบไมไดเปนเพียงฮารดแวรหรือซอฟตแวร แตหมายถึงสภาพแวดลอมทั้งหมดที่ใชหรือถูกกระทบโดยเทคโนโลยี
คอมพิวเตอร ซึ่งสภาพแวดลอมทั้งหมดนั้นไดแก การจัดองคกรของคนในที่ทํางาน บาน หรือ ความเกี่ยวพันกับงาน
อดิเรก
2.2. Effectiveness and efficiency
การปรับปรุงประสิทธิผลและประสิทธิภาพสามารถบอกไดดวยตัวของมันเองและมีวัตถุประสงคอยูทั่วไป
2.3. Safety
เอกสารประกอบการสอนวิชา 204462 ♣ ปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร หนาที่ 1 /7
เรื่อง: ภาพรวมของปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร
โดย: อ.ดร. ชุรี เตชะวุฒิ ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร มหาวิทยาลัยเชียงใหม

2. การสงเสริมความปลอดภัยในสวนที่เกี่ยวของกับระบบคอมพิวเตอรเปนสิ่งสําคัญยิ่งในการออกแบบระบบที่ตองการความ
ปลอดภัยมาก
2.4. Utility
ความมีประโยชนอางถึงการปฏิบัติงานไดจริงของระบบใดระบบหนึ่ง หรืออีกนัยหนึ่งคือ สิ่งตางๆที่ระบบสามารถทําได
2.5. Usability
การใชงานไดคือแนวคิดหลักของ HCI ที่เกี่ยวกับการทําระบบใหงายตอการเรียนรูและงายตอการใชงาน ระบบ
คอมพิวเตอรที่ขาดการออกแบบที่ดีสามารถกอความรําคาญใหกับผูใชได
2.6. สิ่งจําเปนสําหรับการออกแบบและวิจัยทางดาน HCI
สิ่งจําเปนสําหรับการออกแบบและวิจัยทางดาน HCI คือ ความเชื่อที่วา
• คนที่ใชระบบคอมพิวเตอรควรมาเปนอันดับแรก ความตองการ ความสามารถ และความพึงพอใจของคนเพื่อทํา
กิจกรรมตางๆใหสําเร็จควรบอกถึงแนวทางที่ระบบจะถูกออกแบบและถูกนําไปใชงานใหเกิดประโยชน
• คนไมควรตองเปลียนตัวเองใหเขากับระบบ ระบบควรถูกออกแบบใหตรงกับความตองการของพวกเขา
่
2.7. ขั้นตอนที่จะนําไปสูเปาหมายของ HCI
ประกอบดวย 3 ขั้นตอนดังนี้
• Understand คือเขาใจในเรื่องจิตวิทยา การยศาสตร และปจจัยเกี่ยวกับองคกรและสังคมของคน
• Develop คือพัฒนาเครื่องมือและเทคนิคตางๆในการชวยเหลือนักออกแบบเพื่อใหแนใจถึงการใชงานไดของระบบ
คอมพิวเตอร
• Achieve คือทําการปฏิสัมพันธใหมีประสิทธิภาพ ประสิทธิผล และปลอดภัยในการปฏิสัมพันธทั้งตอบุคคลและตอ
กลุม
3. แผนภาพ HCI
องคประกอบทีประกอบขึนเปน HCI แบงเปน 4 สวน แสดงดังรูปที่ 1.1
่ ้
U1: ระบบคอมพิวเตอรมีการใชงานอยูภายในกลุมสังคม องคกรและกลุมที่ทํางานรวมกัน
U2: ภายในบริบทนี้มีการประยุกตโปรแกรม ระบบ และงาน ที่เราตองนําคอมพิวเตอรเขามาใชดวย
U3: แตกระบวนการที่จะทําใหคอมพิวเตอรทํางานนั้นหมายความวามนุษย เครื่องคอมพิวเตอรหรืออุปกรณตางๆ
และงานที่มีอยู ณ.สภาวะที่ตองการสรางประโยชน จะตองถูกนําเขามาใหพอดีกับการเรียนรูของมนุษย ความสามารถใน
การปรับแตงระบบหรือกลยุทธอนๆ ่ื
เนื่องจากการใชงานและบริบททางสังคมของคอมพิวเตอรทางดานมนุษยนั้นเราตอง
H1: ถือวาเรื่อง กระบวนการรับรูและวิเคราะหขอมูลของมนุษย
H2: ภาษา การสื่อสาร การปฏิสัมพันธ และ
H3: ลักษณะทางกายภาพของมนุษย เปนสิ่งสําคัญ
ทางดานคอมพิวเตอร เทคโนโลยีที่หลากหลายไดถูกพัฒนาขึ้นเพื่อสนับสนุนการปฏิสัมพันธกับมนุษย
C1: อุปกรณนําเขาและแสดงผลเปนตัวเชื่อมมนุษยและคอมพิวเตอร
C2: ซึ่งอุปกรณเหลานี้ถูกใชรวมกับเทคนิคตางๆเพื่อสราง “การโตตอบ”
เอกสารประกอบการสอนวิชา 204462 ♣ ปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร หนาที่ 2 /7
เรื่อง: ภาพรวมของปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร
โดย: อ.ดร. ชุรี เตชะวุฒิ ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร มหาวิทยาลัยเชียงใหม

3. Use and Context
U1: Social Organization and Work U3: Human-Machine Fit and Adaptation
U2: Application Areas
Human Computer
C2: Dialogue C4: Computer
H1: Human Techniques Graphics
Information
Processing
Aa
C3: Dialogue C5: Dialogue
H2: Language, Genre Architecture
Communication C1: Input and
and Interaction Output Devices
H3: Ergonomics
D4: Example Systems
D3: Evaluation and Case Studies D2: Implementation
Techniques Techniques and Tools
D1: Design
Approaches
Development Process
รูปที่ 1.1 แผนภาพ HCI (ที่มา: ACM SIGCHI)
C3: เทคนิคเหลานี้ถูกใชทําใหเกิดผลในสวนยอยของการออกแบบที่มีขนาดใหญขึ้นเชน ลําดับขั้นของการ
ออกแบบสวนตอประสาน
C4: การลงลึกสูฐานของเครื่องคอมพิวเตอรที่สนับสนุนการโตตอบ ซึ่งอาจใชเทคนิคคอมพิวเตอรกราฟกมาชวย
C5: การโตตอบทีซบซอนนําไปสูการพิจารณาสถาปตยกรรมระบบทีตองเกิดการสนับสนุนขึนไดแก โปรแกรมใช
่ั  ่  ้
งานทีสามารถเชือมตอถึงกัน การใชงานหนาตาง การตอบสนองแบบทันที การสือสารขอมูลเปนตน
่ ่ ่
สุดทายคือกระบวนการพัฒนาทีรวมเอา
่
D1: การออกแบบสําหรับการโตตอบระหวางมนุษยและคอมพิวเตอร
D2: เทคนิคและเครื่องมือสําหรับใชพัฒนาใหเกิดผล
D3: เทคนิคการประเมินผล
D4: และปริมาณการออกแบบที่มีคุณคาสําหรับการศึกษา
รายละเอียดสําหรับแตละ องคประกอบทีประกอบขึนเปน HCI อธิบายไดดังนี้
่ ้
3.1. Use and context of computers
การใชงานและบริบทของคอมพิวเตอร ในหัวขอนี้เปนเรื่องของการแกไขปญหาใหมีความลงตัวระหวางคอมพิวเตอรและ
การใชงานคอมพิวเตอร รวมถึงบริบทของการใชงาน
เอกสารประกอบการสอนวิชา 204462 ♣ ปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร หนาที่ 3 /7
เรื่อง: ภาพรวมของปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร
โดย: อ.ดร. ชุรี เตชะวุฒิ ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร มหาวิทยาลัยเชียงใหม

4. ทางดาน Social organization and work จะเกี่ยวของกับมนุษยที่มีการปฏิสัมพันธปรากฏอยูในสังคม โดยเราจะ
พิจารณาถึงธรรมชาติการทํางานโดยใชแบบจําลองกิจกรรมการทํางานของมนุษยทั้งในกลุมเล็กและกลุมใหญระดับองคกร
รวมถึงคุณภาพชีวิตการทํางานและความพึงพอใจในงาน
ทางดาน  Application areas จะมุงประเด็นไปที่ลักษณะของการประยุกตใชงาน เชน สวนตอประสานจะถูก
พัฒนาขึ้นเพื่อการใชงานสวนบุคคลหรือเปนกลุม รูปแบบที่นิยมใชไดแก การพัฒนาสวนตอประสานในงานผลิตเอกสาร
(Text editing) การพัฒนาสวนตอประสานในการสือสาร (Email และ Voice message) การพัฒนาสวนตอประสานในระบบ
่
ฝงตัว (Embedded system) เชน การควบคุมบันไดเลื่อน และตัวควบคุมอุปกรณเครื่องใชในบานตางๆไดแก โทรทัศนและ
ไมโครเวฟเปนตน
ทางดาน Human-machine fit and adaptation จะทําการปรับปรุงความลงตัวหรือความพอดีระหวางวัตถุที่ออกแบบ
ไวกับการใชงาน
3.2. Human characteristics
ในหัวขอนี้ตองทําความเขาใจเกี่ยวกับมนุษย โดยเปรียบมนุษยเหมือนกับระบบประมวลผลขอมูลและศึกษาถึงการ
ติดตอสื่อสารและความตองการทางกายภาพและจิตวิทยาของมนุษย
ทางดาน Human information processing จะศึกษาถึงลักษณะของมนุษยเหมือนกับตัวประมวลผลขอมูล โดยดู
รายละเอียดตางๆของมนุษย เชน หนวยความจํา ความเขาใจ การแกปญหา การเรียนรูและการมีทักษะ แรงจูงใจและความ
หลากหลาย
ทางดาน Language, communication and interaction จะศึกษาในแงมุมของภาษา ตั้งแตโครงสรางและความหมาย
ลักษณะการปฏิสัมพันธเมื่อเกิดการสนทนา และภาษาพิเศษอื่นๆ
ทางดาน Ergonomics หรือการยศาสตร มุงเนนลักษณะทางมานุษยวิทยาและสรีรศาสตรของมนุษยและ
ความสัมพันธกับพื้นที่และสภาพแวดลอมในการทํางาน เชน การจัดเตรียมการแสดงผลและตัวควบคุม
3.3. Computer system and interface architecture
ในหัวขอนี้เนนที่สวนประกอบพิเศษที่คอมพิวเตอรมีเพื่อการปฏิสัมพันธกับมนุษย
ทางดาน Input and output devices จะศึกษารายละเอียดกลไกและลักษณะของอุปกรณฮารดแวร ลักษณะการ
ทํางานของมนุษยและระบบ อุปกรณซึ่งทํางานในพื้นที่จํากัดและอุปกรณเสมือน
ทางดาน Dialogue techniques จะศึกษาเทคนิคการสรางการสนทนาโตตอบของมนุษยและสถาปตยกรรม
ซอฟตแวรพื้นฐาน เชน การโตตอบเพื่อนําขอมูลเขาและแสดงผลลัพธ และกระบวนแบบตางๆของการปฏิสัมพันธ
ทางดาน Dialog genre หรือประเภทการโตตอบ จะเกี่ยวของกับแนวคิดการใชงานที่จะนําเทคนิคตางๆมาใช
โดยทั่วไปมีปรากฏในการจัดการแฟมขอมูลและการออกแบบกราฟก เชน การสรางเมตาฟอ (Metaphor) ของการโตตอบ
และการปรับเปลียน (Transition) ซึ่งไดแก การเลื่อน (Fade) และการขยายภาพมุมกวาง (Pan)
่
ทางดาน Computer graphics เกี่ยวของกับแนวคิดพื้นฐานเฉพาะของคอมพิวเตอรกราฟกที่เปนประโยชนตองาน
ทางดาน HCI เชน รูปทรงเรขาคณิต 2 มิติหรือ 3 มิติ และการเลือกใชสี
ทางดาน Dialogue architecture หรือสถาปตยกรรมของการโตตอบ ซึ่งจะเกี่ยวของกับสถาปตยกรรมซอฟตแวร
และมาตรฐานสําหรับสวนตอประสาน เชน การใชหนาตางการทํางาน และการตอบสนองแบบทันที (Real time)
3.4. The development process
เอกสารประกอบการสอนวิชา 204462 ♣ ปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร หนาที่ 4 /7
เรื่อง: ภาพรวมของปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร
โดย: อ.ดร. ชุรี เตชะวุฒิ ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร มหาวิทยาลัยเชียงใหม

5. ในหัวขอนี้เกี่ยวของกับการสรางและประเมินผลสวนตอประสานที่ใชกับมนุษย ซึ่งแตละดานจะถูกผูกติดกันไว การเลือก
ทําสวนใดสวนหนึ่งจะมีผลตอสวนอื่นๆในกระบวนการดวย
ทางดาน Design approaches เกี่ยวของกับขั้นตอนการออกแบบการโตตอบ ซึ่งอาจนําความรูทางดานวิศวกรรม
ซอฟตแวร การวิเคราะหงาน การออกแบบอุตสาหกรรม และการออกแบบกราฟกมาใชเปนตน
ทางดาน Implementation techniques and tools เกี่ยวของกับเทคนิคและเครื่องมือสําหรับใชพัฒนาใหเกิดผล และ
ความสัมพันธระหวางการออกแบบ ประเมินผลและพัฒนา เชน เทคนิคการทําตนแบบ ชุดเครื่องมือสรางการโตตอบ
ขั้นตอนวิธีและการนําเสนอขอมูล
ทางดาน Evaluation techniques หรือเทคนิคการประเมินผลซึ่งเกี่ยวของกับวิธีการทางจิตวิทยาและวิธีการเฉพาะ
สําหรับการประเมินผล เชนประเมินประโยชนทจะไดรบ และการทดสอบการใชงานได
่ี ั
ทางดาน Example systems and case studies เกี่ยวของกับระบบที่ใชเปนแบบอยางและกรณีศึกษา ซึ่งสวนใหญ
สามารถใชเปนตนแบบหรือตัวอยางประเภทของการออกแบบสวนตอประสาน
4. หลักการที่ทําใหแนใจถึง HCI ที่ดี
2 หลักการที่ทําใหแนใจถึง HCI ที่ดี คือ Visibility และ Affordance และจาก 2 หลักการนี้จะนําไปสูหลักการสําคัญอีก
อันหนึ่งคือ Perceived affordance
4.1. Visibility
คือการมีตัวควบคุมที่สามารถมองเห็นไดและเชื่อมกับผลการทํางานของตัวควบคุมไดอยางเหมาะสม หรืออีกนัยหนึ่งคือเรา
สามารถมองเห็นวาเราทําอะไรและการตอบสนองสามารถถูกตอบกลับมาในทันที
4.2. Affordance
คือการแนะถึงหนาที่ ฟงกชั่นการทํางาน หรือคุณสมบัติของวัตถุ นั่นคือ การจัดการแบบใดสามารถนํามากระทําการกับ
วัตถุนั้น เชน ประตูมีไวเปด เกาอี้ใชสําหรับนั่ง เปนตน
Affordance อาจหมายถึง “The perceived and actual properties of the thing, primarily those fundamental
properties that determine just how the thing could possibly be used.”
เมื่อเกิด Affordance แลว มนุษยหรือผูใชเพียงแคมองดูวัตถุก็รูไดทันทีวาจะตองทําอะไร โดยที่ไมตองมีรูป ปาย
หรือคําแนะนํามาอธิบายถึงวิธีใช วัตถุหรือสิ่งของที่มีความซับซอนอาจตองการคําอธิบาย แตสิ่งของที่ไมมีความซับซอนไม
ควรมีคําอธิบาย เมื่อไหรก็ตามที่สิ่งของที่ไมมีความซับซอนนั้นตองการรูป ปายหรือคําแนะนํามาอธิบายถึงวิธีใช การ
ออกแบบนั้นถือวาลมเหลว
4.3. Perceived affordance
คือ มนุษยหรือผูใชคิดจะกระทําอะไรกับวัตถุ
Perceived affordance อาจหมายถึง “the actions a user perceives to be possible.”
4.5. ตัวอยางการออกแบบประตู
ตัวอยางการออกแบบประตูที่แนะวามันควรจะถูกดึงหรือผลัก รูปที่ 1.2 และ 1.3 เปนการออกแบบทีไมชดเจนสวนรูปที่ 1.4
่ ั
และ 1.5 เปนการออกแบบประตูที่ดีที่ใช Affordance ในการออกแบบ
เอกสารประกอบการสอนวิชา 204462 ♣ ปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร หนาที่ 5 /7
เรื่อง: ภาพรวมของปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร
โดย: อ.ดร. ชุรี เตชะวุฒิ ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร มหาวิทยาลัยเชียงใหม

6. A knob affords turning, but do A horizontal bar affords
you push or pull? pushing, but which side do you
push on?
รูปที่ 1.2 ประตูที่ใชลูกบิดแทนมือจับ แตไมรู รูปที่ 1.3 ประตูทมมอจับในแนวนอนแนะให
่ี ี ื
วาควรผลกหรอดง
 ั ื ึ ผลัก แตไมรูวาควรผลักดานไหน
A flat panel affords pushing and A vertical handle affords grasping
the broadness indicates which and pulling.
side to push.
รูปที่ 1.4 ประตูที่ใชมือจับแบบแผนราบ รูปที่ 1.5 ประตูที่มีมือจับแนวตั้งแนะวาใหจับ
ระบุไดวาใหผลัก ซึ่งสวนกวางเปนตัวบอก และดึง
วาตองผลกดานไหน
  ั 
(ที่มา: Andrews, 2005)
5. ความทาทายทางดาน HCI
2 สิงทีทาทายนักออกแบบทางดาน HCI มีดังนี้
่ ่ 
• ทําอยางไรจะเก็บเกี่ยวและกาวทันตามการเปลี่ยนแปลงของเทคโนโลยี
• ทําอยางไรจึงจะแนใจวาการออกแบบของนักออกแบบจะให HCI ที่ดีพอๆกับการนําฟงกชั่นที่มีศักยภาพของ
เทคโนโลยใหมๆมาใช
ี 
เอกสารประกอบการสอนวิชา 204462 ♣ ปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร หนาที่ 6 /7
เรื่อง: ภาพรวมของปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร
โดย: อ.ดร. ชุรี เตชะวุฒิ ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร มหาวิทยาลัยเชียงใหม

7. เอกสารอางอิง
1. Association for Computing Machinery, Special Interest Group of Computer-Human Interaction (ACM SIGCHI).
http://sigchi.org/cdg/cdg2.html
2. Dix, A., Finlay, J., Abowd, G.D., and Beale, R. Human-Computer Interaction. 3rd edn. Prentice Hall. (2004)
3. Andrews, K. Lecture Note: Human-Computer Interaction. http://courses.iicm.edu/hci/ (2005)
เอกสารประกอบการสอนวิชา 204462 ♣ ปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร หนาที่ 7 /7
เรื่อง: ภาพรวมของปฏิสัมพันธระหวางมนุษยและคอมพิวเตอร
โดย: อ.ดร. ชุรี เตชะวุฒิ ภาควิชาวิทยาการคอมพิวเตอร คณะวิทยาศาสตร มหาวิทยาลัยเชียงใหม