Chapter 04...Chapter 04: ส วนต อประสานและอ ปกรณ เสร มของคอมพ วเตอร 222122การออกแบบการปฏ

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


แผงแป้นอักขระแบบเรียงตัวอักษร (Alphabetic Keyboard) คือ แป้นพมิพ์ที่เรียกอักษร A-Z บทแป้นพมิพ์

Tue. August

27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

7


แผงแป้นอักขระแบบดาโวแรก (Dvorak Keyboard) มีลักษณะการวางตัวอักษรปกตไิว้ใต้นิ้วท่ีมคีวามส าคัญ โดยที่คนที่ถนัดขวาจะได้เปรียบกว่าคนถนัดซา้ย

Tue. August

27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

8


แผงแป้นอักขระแบบพิเศษ (Special Keyboard) ถูกออกแบบมาเพื่อลดการบาดเจ็บจากการใชง้านกล้ามเนื้อเดิมซ้ า ๆ

Tue. August

27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

9


แผงแป้นอักขระคอร์ด (Chord Keyboard) มีจ านวนแป้นพิมพ ์4-5 แป้น การพิมพ์จะขึน้อยู่กับความสัมพันธ์ของการกดแป้น

Tue. August

27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

10


แผงแป้นอักขระเพื่อการยศาสตร์ (Ergonomic Keyboard)

Tue. August

27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

11


แผงแป้นอักขระส าหรับโทรศัพท์มือถือ และข้อมูลรับเข้าแบบ 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


LCD Monitor (Liquid Crystal Display)

ใชว้งจรอเิล็กทรอนกิส์เพ่ือแปลงสัญญาณ อนาล๊อกจากการด์จอเป็นสัญญาณดิจิทัล และใช้ผลึกเหลว (Liquid Crystal) แทนหลอดภาพ ท าให้ LCD มีลักษณะแบน น้ าหนักเบา

Tue. August

27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

25


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


หมวกแสดงผลเป็นจรงิเสมือน (Virtual Reality Helmets: VR Helmets)

Tue. August

27, 2019222122 [2562-01-AEC] HCI Design 3(2-2-5)

28


การจับความเคลื่อนไหวทั่วร่างกาย (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

https://bit.ly/2ZrxSMR

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)

Documents

Chapter 04...Chapter 04: ส วนต อประสานและอ ปกรณ เสร มของคอมพ วเตอร 222122การออกแบบการปฏ