Chapter 04:ส่วนต่อประสานและอุปกรณ์เสริมของคอมพิวเตอร์
222122 การออกแบบการปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์Pratya Nuankaew, Ph.D.
School of Information and Communication Technology, University of Phayao
เค้าโครงเนื้อหา
องคป์ระกอบพื้นฐานของคอมพิวเตอร์
อุปกรณ์น าเข้าขอ้มูลที่เป็นข้อความ
การหาต าแหน่ง การชี ้และการวาด
อุปกรณ์แสดงภาพ
ระบบความเป็นจริงเสมือนและปฏิสัมพันธแ์บบ 3 มติิ
การควบคุมทางร่างกาย
กระดาษ: เครื่องพิมพ์และเครื่องกราดภาพ
ไมโครฟิล์ม
บาร์โค้ด
คิวอาร์โค้ด
อาร์เอฟไอดี
ไวท์บอร์ดแบบปฏสิัมพันธ์
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
2
องค์ประกอบพ้ืนฐานของคอมพิวเตอร์
องค์ประกอบพื้นฐานของคอมพิวเตอร์ คือ จอภาพ (Monitor) แผงแป้นอักขระ (Keyboard) เมาส์ (Mouse) หรือ แผ่นรองรับตดิตามการเคลื่อนไหว (Trackpad)
วิวัฒนาการของรูปแบบคอมพิวเตอร์ Desktop > Laptop > PDA > Smart Phone ท าให้อุปกรณ์สามารถรับค าสั่งตามสไตล์ของปฏิสัมพันธท์ี่มีอยูใ่นระบบคอมพิวเตอร์แตกต่างออกไป หมายความว่า “ถ้าใช้อุปกรณ์ที่แตกต่างออกไป จะท าให้รูปแบบของปฏิสัมพันธ์แตกต่างไปด้วย”
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
3
ตัวอย่างการใช้เคร่ืองคอมพิวเตอร์สมยัแรก
คอมพิวเตอรท์ี่ใชร้ว่มกับบัตรเจาะรู
จินตนาการถงึการใชเ้วลาของการอ่านข้อมูลเพื่อวิเคราะห์
จินตนาการถงึการบันทึกข้อมูลที่ไดจ้ากการวิเคราะห์
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
4
อุปกรณ์น าเข้าข้อมูลที่เป็นข้อความ (Text Entry Devices)
โดยทั่วไปแล้วการน าเข้าข้อมูลที่เป็นข้อความ ประกอบด้วย 3 ส่วน ได้แก่ แผงแป้นอักขระ (Keyboard) การน าเข้าด้วยลายมือ และการน าเข้าข้อมูลด้วยเสียงพูด
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
5
การน าเข้าข้อมูลด้วยแผงแป้นอักขระ (Keyboard)
แผงแป้นอักขระคิวเวอรต์ี้ (QWERTY) เป็นแป้นพมิพ์ที่เป็นมาตรฐานที่สุด ตั้งช่ือตามการเรียงตัวอักษร 6 ตัว ในแถวแรก
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
6
การน าเข้าข้อมูลด้วยแผงแป้นอักขระ (Keyboard)
แผงแป้นอักขระแบบเรียงตัวอักษร (Alphabetic Keyboard) คือ แป้นพมิพ์ที่เรียกอักษร A-Z บทแป้นพมิพ์
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
7
การน าเข้าข้อมูลด้วยแผงแป้นอักขระ (Keyboard)
แผงแป้นอักขระแบบดาโวแรก (Dvorak Keyboard) มีลักษณะการวางตัวอักษรปกตไิว้ใต้นิ้วท่ีมคีวามส าคัญ โดยที่คนที่ถนัดขวาจะได้เปรียบกว่าคนถนัดซา้ย
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
8
การน าเข้าข้อมูลด้วยแผงแป้นอักขระ (Keyboard)
แผงแป้นอักขระแบบพิเศษ (Special Keyboard) ถูกออกแบบมาเพื่อลดการบาดเจ็บจากการใชง้านกล้ามเนื้อเดิมซ้ า ๆ
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
9
การน าเข้าข้อมูลด้วยแผงแป้นอักขระ (Keyboard)
แผงแป้นอักขระคอร์ด (Chord Keyboard) มีจ านวนแป้นพิมพ ์4-5 แป้น การพิมพ์จะขึน้อยู่กับความสัมพันธ์ของการกดแป้น
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
10
การน าเข้าข้อมูลด้วยแผงแป้นอักขระ (Keyboard)
แผงแป้นอักขระเพื่อการยศาสตร์ (Ergonomic Keyboard)
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
11
การน าเข้าข้อมูลด้วยแผงแป้นอักขระ (Keyboard)
แผงแป้นอักขระส าหรับโทรศัพท์มือถือ และข้อมูลรับเข้าแบบ T9 (Phone Pad and T9 Entry Keyboards) คือ การใชแ้ป้นพมิพ์ตัวเลข 0-9 รว่มกับตัวอักษร
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
12
การน าเข้าข้อมูลด้วยลายมือ
การน าเข้าข้อมูลด้วยลายมือ คอื การแปลงรูปแบบการบันทึกจากการช้ีต าแหน่งผสมผสานกับการแปลงเป็นข้อความ (text)
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
13
การน าเข้าข้อมูลด้วยเสียงพูด
การน าเข้าข้อมูลด้วยเสียงพูด คอื การแปลงเสียงพูดเป็นข้อความ โดยใชห้ลักการเทียบเคยีงการออกเสียงขอค าและคล่ืนความถี่
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
14
การหาต าแหน่ง การช้ี และการวาด
เมาส์ (Mouse) หลักการท างาน คือ การชี้ต าแหน่งการเคล่ือนไหวเชิงระนาบ (Planar Movement) ได้แก่ เมาส์กลไก (Mechanical Mouse), เมาส์เท้า (Foot Mouse) เมาส์แสง (Optical Mouse)
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
15
การหาต าแหน่ง การช้ี และการวาด
แผ่นรองรับการสัมผัส (Touchpad) เป็นอุปกรณ์ท่ีท างานด้วยการรับการสัมผัสจังหวะการลากนิ้ว (Stroke)
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
16
การหาต าแหน่ง การช้ี และการวาด
แทร็กบอล (Trackball)
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
17
การหาต าแหน่ง การช้ี และการวาด
ก้านควบคุม (Joystick)
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
18
การหาต าแหน่ง การช้ี และการวาด
หน้าจอสัมผัส (Touch Screen)
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
19
การหาต าแหน่ง การช้ี และการวาด
เครื่องอ่านพิกัดดิจิทัล (Digitizing Tablet)
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
20
การหาต าแหน่ง การช้ี และการวาด
เครื่องรับข้อมูลโดยใช้ตาเพ่งมอง (Eye Gaze) หรือ โดยใช้การติดตามการมอง (Eye Tracking)
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
21
อุปกรณ์แสดงภาพ (Display Devices)
การแสดงภาพแบบบิตแมป (Bitmap Displays) คอื การแสดงโดยจุดของสีที่มีจ านวนมากบนหน้าจอคอมพิวเตอร ์โดยที่ความละเอียด หรือความคมชัด (Resolution) ขึ้นอยู่กับขนาดบิตตอ่พิกเซล หรือ ความกว้างต่อความสูง
Pixels = Width x Height
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
22
อุปกรณ์แสดงภาพ (Display Devices)
ความหนาแน่นของพกิเซล มีหน่วยเป็นจุดตอ่ 1 นิว้ (dpi = dots per inch) โดยทั่วไปจะมีความหนาแน่นอยู่ระหว่าง 72-96 จุดต่อตารางนิ้ว
อัตราความกว้างและสูงของจอภาพ มีอัตราส่วนอยู่ท่ี 4 : 3 ส าหรับจอปกต ิในขณะที่จอกวา้ง (Wide-Screen) จะมอีัตราส่วนอยูท่ี่ 16 : 9
ความลึกของสี (Color Depth) เช่น 8 บติต่อพกิเซล = 28 สี = 256 สี
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
23
อุปกรณ์แสดงภาพ (Display Devices): เทคโนโลยีการแสดงภาพ
CRT Monitor (Cathode Ray Tube)
มลีักษณะจอภาพโค้งนูน มีหลอดภาพเป็นหลอดแก้วขนาดใหญ่ เรยีกวา่ “หลอดรังสีคาโธด” ท าให้จอภาพมีขนาดใหญ่เทอะทะ
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
24
อุปกรณ์แสดงภาพ (Display Devices): เทคโนโลยีการแสดงภาพ
LCD Monitor (Liquid Crystal Display)
ใชว้งจรอเิล็กทรอนกิส์เพ่ือแปลงสัญญาณ อนาล๊อกจากการด์จอเป็นสัญญาณดิจิทัล และใช้ผลึกเหลว (Liquid Crystal) แทนหลอดภาพ ท าให้ LCD มีลักษณะแบน น้ าหนักเบา
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
25
อุปกรณ์แสดงภาพ (Display Devices): เทคโนโลยีการแสดงภาพ
LED Monitor (Light Emitting Diodes)
LED ท าจากสารอนิทรีย ์ท าให้จอภาพมีความสว่าง ภาพมคีวามเข้มดีกวา่ จอบาง เบา มองได้จากมุมมองที่กว้างในการแสดงผล และ ประหยัดพลังงานกว่า LCD
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
26
ระบบความเป็นจริงเสมือนและปฏิสัมพันธ์แบบ 3 มิติ
ถุงมือข้อมูล (Data Glove) ใชร้ะบบใยแก้วน าแสง จับต าแหน่งการเคล่ือนไหวของนิว้มือ
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
27
ระบบความเป็นจริงเสมือนและปฏิสัมพันธ์แบบ 3 มิติ
หมวกแสดงผลเป็นจรงิเสมือน (Virtual Reality Helmets: VR Helmets)
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
28
ระบบความเป็นจริงเสมือนและปฏิสัมพันธ์แบบ 3 มิติ
การจับความเคลื่อนไหวทั่วร่างกาย (Whole Body Tracking)
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
29
เคร่ืองพิมพ์ (Printer)
ใช้แสดงผลข้อมูลที่ได้จากการประมวลผลเครื่องคอมพิวเตอร์ลงกระดาษ หรือสิ่งพิมพ์ แบ่งออกเป็น 2 ประเภท ได้แก่
เคร่ืองพิมพ์แบบกระทบ (Impact Printer) เช่น Dot Matrix Printer, Line Printer
เครื่องพิมพ์แบบไมก่ระทบ (Nonimpact Printer) เช่น Ink-Jet Printer, Laser Printer
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
30
เคร่ืองพิมพ์แบบกระทบ (Impact Printer)
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
31
Dot Matrix Printer Line Printer
เคร่ืองพิมพ์แบบไม่กระทบ (Nonimpact Printer)
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
32
เคร่ืองพิมพ์แบบไม่กระทบ (Nonimpact Printer)
เคร่ืองพิมพ์ Plotter คือ เคร่ืองพิมพ์เฉพาะงานด้านกราฟิก เช่น การเขียนแบบ แผนผัง แผนที่ และงานกราฟิกท่ีมขีนาดใหญเ่กินกวา่เคร่ืองธรรมดาจะรองรับได้
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
33
ไมโครฟิล์ม (Microfilm)
ไมโครฟิล์ม คือ ฟิล์มถ่ายรูปขนาดเล็กมากใช้บันทกึภาพของสิ่งต่างๆ ที่มขีนาดย่อส่วนลงมากๆ
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
34
บาร์โค้ด (Bar code)
บาร์โค้ด หมายถงึ เลขประจ าตัวสินคา้ ใชแ้ทนด้วยสัญลักษณ์แทง่ยาวสีขาว-ด า
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
35
คิวอาร์โค้ด (QR Code)
QR Code or Quick Response Code คอื บารโ์คด้ 2 มิต ิมีสัณฐานสีเหลี่ยมมพืี้นหลังสีขาว
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
36
อาร์เอฟไอดี (RFID: Radio-Frequency Identification)
การน าเข้าจากคล่ืนแม่เหล็กไฟฟ้า เช่น RFID Tags, and RFID Reader
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
37
ไวทบ์อร์ดแบบปฏิสัมพันธ์ (Interactive White Board: IWB)
Interactive White Board: IWB คอื จอแสดงผลแบบปฏิสัมพันธข์นาดใหญท่ี่เช่ือมต่อกับคอมพิวเตอร์
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
38
จากเว็บไซต์ https://bit.ly/2ZrxSMR จงตอบค าถาม
ก าหนดให้นิสิตค้นหาค าตอบจากเว็บไซต์ และตอบในกระดาษค าถาม
เก็บคะแนนและเฉลยหลังเลกิเรียน 11.30 น.
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
39
Q & A THANK YOU
40
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
กระบวนการพัฒนาซอฟต์แวร์
การจัดท าโปรแกรมประยุกต์ จะท าภายใต้กระบวนการท่ีเรียกว่า
“วิศวกรรมซอฟต์แวร์ (Software Engineering)”
โดยขั้นตอนต่างๆ ในการพัฒนาระบบเรียกว่า
“วงจรชีวิตของซอฟต์แวร์ (Software Life Cycle)”
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
41
กระบวนการพัฒนาซอฟต์แวร์
กลุ่มผู้ใช้งานระบบ แบ่งออกเป็น 2 ประเภท ได้แก่
1. ผู้ใช้งานท่ีเป็นผู้เจรจาต่อรอง ซ่ึงเกี่ยวข้องกับฟังก์ชันการท างานของระบบ
และเงื่อนไขต่างๆ หรือเรียกผู้ใช้งานกลุ่มนี้ว่า “ลูกค้า (Customer)”
2. ผู้ใช้งานท่ีเป็นผู้ติดต่อกับระบบ หรือผู้ปฏิบัติงานโดยตรงกับระบบ ท าหน้าที่แนะน าเกี่ยวกับการแก้ไขปัญหาท่ีอาจเกิดข้ึน หรือเรียกผู้ใช้งานกลุ่มนี้ว่า
“ผู้ปฏิบัติงาน (User / End-User)”
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
42
กระบวนการพัฒนาซอฟต์แวร์
วงจรในการพัฒนาระบบแบบล าดับชัน้ (Waterfall Model) ประกอบด้วย 6 ขั้นตอน ได้แก่
1. การก าหนดความตอ้งการของระบบ (Requirement Specification)
2. การออกแบบสถาปัตยกรรมของระบบ (Architectural Design)
3. การออกแบบรายละเอียด (Detailed Design)
4. การเขียนโปรแกรมและการทดสอบส่วนย่อย (Coding and Unit Testing)
5. การรวมส่วนประกอบและการทดสอบ (Integration and Testing)
6. การปรับปรุงระบบ (Maintenance)
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
43
กระบวนการพัฒนาซอฟต์แวร์
กระบวนการท าให้ระบบกลับเข้าสู่สถานะเดมิ ม ี6 วิธ ีดังนี้
1. แนวคิด (Measure in concept) ต้องแกย้กเลกิค าสั่งที่เกดิข้อผดิพลาด
2. วิธีการ (Measuring Method) พจิารณาจ านวนค าสั่งที่ผู้ใช้ตอ้งท าเพ่ือยกเลิกข้อผดิพลาด
3. สถานะปัจจุบัน (Now Level)
4. สถานะที่ยอมรับได้ (Worst Case)
5. ความมุ่งหมาย (Planned Level)
6. สถานการณท์ี่ดทีี่สุด (Best Case)
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
44
Q & A THANK YOU
45
Tue. August
27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)
Top Related