Human and Computer interaction

บทท่ี 8 หลักพน้ื ฐานของการออกแบบระบบปฏิสมั พนั ธ์ 95

แต่ถา้ เปน็ การออกแบบที่ตอ้ งรวมอุปกรณ์ในการใช้งาน (Physical Device) ต้องเพิ่มการ
สารวจดา้ นการออกแบบจากระบบพ้นื ฐานดังน้ี

1) การออกแบบระบบควบคุม (Control) เช่น ปุม่ ควบคมุ ปมุ่ หมุน ปมุ่ ปรบั
2) การออกแบบส่วนของตัวอุปกรณ์ (Physical Layout) เช่น การออกแบบสถานการณ์
การ ล็อกการกดแป้นคีย์บนโทรศัพท์มือถือ ซ่ึงหากต้องการปลดล็อกก็ต้องกด “C” แล้วตามด้วย
“Yes” เป็นการยืนยัน โดยถ้าหากลืมกดล็อก เม่ือใส่ไว้ในกระเป๋าแล้วเผลอโดนป่มุ “Yes” โทรศัพท์ก็
จะเขา้ สู่เบอรโ์ ทรศัพท์ ถา้ กด “C” จะลบรายการ แต่ถ้ากด “Yes” จะโทรออกอกี ครง้ั ซง่ึ การออกแบบ
ในลักษณะน้ี อาจสรา้ งความเสยี หายได้ ควรมกี ารออกแบบเพอ่ื ปอ้ งกันสถานการณด์ ังกลา่ ว
3) การออกแบบในส่วนของสถานะต่าง ๆ ของอุปกรณ์ (Mode of devices)
4) การออกแบบเพ่ือการใชง้ านในสภาวะแวดล้อมจรงิ (Real World)
ในการพิจารณาโครงสรา้ งของระบบ จะแยกการพจิ ารณาเปน็ 4 โครงสรา้ งดงั น้ี
1) โครงสร้างภายในหน้าจอการประมวลผล (Within Screen)
2) โครงสร้างภายในหนา้ จอ (Local) โดยจะมีการพจิ ารณาจากหน้าจอประมวลผลหนึ่งออก
ไปสู่ภายนอก ซ่ึงจะเร่ิมจากจุดเริ่มต้น (Start) จนกระท่ังถึงจุดหมายหรือผลสาเร็จท่ีผู้ใช้ต้องการ
(Goal) โดยในการพจิ ารณาจะต้องพยายามหลีกเล่ียง ไม่ให้มีการทางานหรือการประมวลผลที่ซ้าซ้อน
เกินความจาเป็น โดยกฎในการออกแบบโครงสร้างภายในระบบ ผใู้ ช้ต้องทราบสิง่ ตอ่ ไปน้คี ือ

- รู้ว่าอยู่ตรงจุดไหนของข้ันตอนการออกแบบ (Knowing where you are) รู้ว่ากาลัง
ทาอะไรอยู่ (Knowing what you can do) รู้ว่าอยู่กาลังไปยังตรงจุดไหนของข้ันตอน และจะเกิด
อะไรตอ่ ไป (Knowing where you are going or what will happen) รู้วา่ ผ่านจุดไหนของขั้นตอน
การออกแบบมาแล้วบ้าง (Knowing where you’ve been or what you’ve done)

รปู ที่ 8.2 เสน้ ทางการประมวลผล
ท่มี า : Alan Dix et.al., 2004

บทที่ 8 หลักพื้นฐานของการออกแบบระบบปฏสิ ัมพันธ์ 96

- ทราบวา่ สามารถดาเนินการใดได้บา้ ง แต่ต้องระวังในเรือ่ งการใช้ข้อความอธิบายมาก
เกนิ ไป ซ่ึงอาจกอ่ ให้เกิดความสบั สนได้

- ทราบว่าขัน้ ตอนตอ่ ไปคืออะไร หรอื จะเกดิ เหตกุ ารณใ์ ดต่อจากนี้
- ทราบว่าก่อนจะมาถึงขั้นตอนน้ีได้ ผู้ใช้ได้ทาขั้นตอนใดมาก่อนหรือทาอะไรมาแล้ว
บ้างในขน้ั ตอนก่อนหนา้ นี้
3) โครงสร้างภายในระบบ (Global) โดยจะมีการพิจารณาการส่ือสารระหว่างหน้าจอหรือ
ฟังก์ชันการทางานต่าง ๆ ของโปรแกรมประยุกต์เดียวกัน มีการใช้แผนภาพลาดับช้ัน (Hierarchical
Diagram) ซ่ึงปกติจะมีการแบ่งตามกลุ่มของฟังกช์ นั การทางาน ดังรูปที่ 8.3

รูปท่ี 8.3 แผนภาพแบบลาดับช้ัน
ที่มา : Alan Dix et.al.,2004

นอกจากนี้มีการใช้แผนผังเครือข่าย (Network Diagram) เข้าช่วย เพื่อให้เห็นลักษณะ
ของเส้นทางต่าง ๆ ในระบบเม่ือเลือกแต่ละคาส่ัง โดยมีรายละเอยี ดท่ีแสดงดังนี้คือ ลาดับข้ันตอนของ
คาสั่ง คาสั่งท่ีเกิดขึ้น คาส่ังย่อยต่าง ๆ ในระบบ และเป็นการแสดงแผนภาพท่ีมีการเน้นไปที่ลักษณะ
การทางานของคาสั่งมากกวา่ ลักษณะลาดับชั้นของคาสัง่ ดงั รูปที่ 8.4 ทีแ่ สดงตัวอย่างแผนผังเครอื ข่าย

รปู ที่ 8.4 แผนผงั เครอื ขา่ ย

ทมี่ า : Alan Dix et.al.,2004

บทท่ี 8 หลกั พ้นื ฐานของการออกแบบระบบปฏสิ มั พนั ธ์ 97

4) โครงสร้างของระบบโดยรวม (Wider Still) เป็นการพจิ ารณาความสัมพนั ธ์ของโปรแกรม
ประยุกต์ กับโปรแกรมอืน่ ๆ ในองคก์ ร หรอื สภาวะแวดลอ้ มในการประมวลผลอ่นื ๆ โดยมีขอ้ พิจารณา
คือ

- รูปแบบการใช้งาน มีรูปปแบบที่สอดคล้องกับมาตรฐานอ่ืนที่ใช้อยู่หรือไม่ รวมถึง
พิจารณาความเข้ากันได้ และความถกู ตอ้ งของรูปแบบตา่ ง ๆ

- รูปแบบคาส่ัง มีการอนุญาตให้ใช้งานข้อมูลข้ามระบบหรือไม่ เช่น คาสั่ง cut และ
Paste

- เส้นทางข้อมูล มีการฝังตัวของระบบน้ี หรือระบบอื่น ร่วมกันหรือไม่ ตลอดจนมีการ
เช่ือมโยงระหว่างโปรแกรมในระบบอื่นหรอื ไม่

โครงสรา้ งและการออกแบบหน้าจอ

จะแยกการพจิ ารณาตามหลกั การออกแบบเบ้อื งตน้ การจดั กลุ่มขอ้ มูล โครงสร้าง ลาดบั ก่อนหลัง
การวางเรียง รวมถึงการใชช้ อ่ งว่างท่ีเหมาะสม ดังรายละเอียดต่อไปน้ี

1) หลักการเบื้องต้น (Basic Principles) มีการตั้งคาถามเก่ียวกับส่ิงท่ีผู้ใช้ต้องการดาเนินการ
พิจารณาข้อมูลที่จาเป็นต้องใช้ มีการเปรียบเทียบ หรือจัดลาดับหรือไม่ และทดลองออกแบบตาม
ข้อมลู ที่ได้รบั มา

2) การจัดการต่าง ๆ เกี่ยวกับข้อมูลหรือเครื่องมือสาหรับสร้างโครงร่าง (Tools for layout)
โดยมกี ารดาเนินการดงั น้ี

(1) จัดกลุ่มและโครงสร้าง (Grouping and Structure) ยึดหลักท่ีวา่ ข้อมูลท่ีอยู่รวมกันทาง
กายภาพหรือด้านเอกสารการใช้งานการดาเนินงาน ก็ควรจะได้มีการออกแบบให้อยู่รวมกันในระบบ
การใชง้ านด้วย คือการออกแบบให้สอดคล้องกันดงั ตัวอย่างในรูปที่ 8.5 เป็นการออกแบบหน้าจอของ
ใบสัง่ ซ้ือ ก็ควรจะให้สอดคลอ้ งกบั แบบฟอร์มใบสั่งซอื้ ทใ่ี ชง้ านจริง

รปู ท่ี 8.5 การออกแบบที่สอดคลอ้ ง
ท่ีมา : Alan Dix et.al.,2004

บทที่ 8 หลกั พ้นื ฐานของการออกแบบระบบปฏิสมั พนั ธ์ 98

(2) จดั ลาดบั ของกลมุ่ คาส่ังหรอื กลุ่มข้อมูล (Order of groups and items) โดยพจิ ารณาถงึ
การจัดเรียงตามลาดบั การเรียกใชง้ านคาสัง่ และลาดับการเรยี กใช้งานขอ้ มูล

(3) จัดการตกแตง่ (Decoration) โดยอาจมีการจัดกลุ่มของปุ่ม หรือคาส่ังต่าง ๆ เข้าด้วยกัน
และอาจมกี ารใช้ลกั ษณะของตวั อกั ษรเพอ่ื เน้นข้อความ หรือให้ความสาคัญในกล่มุ ของหัวขอ้ หรือการ
จัดข้อมูลเป็นกลุ่มหัวข้อ แต่ต้องระวังอย่าให้มีการใช้งานมากเกินไป เพราะจะลดความสาคัญของส่ิงที่
ตอ้ งการเน้นได้ ดังแสดงในรูปที่ 8.6 เปน็ การตกแต่งห้าจอดว้ ยกล่องขอ้ ความ และตวั อักษร

รูปที่ 8.6 การตกตา่ งหนา้ จอด้วยกล่องข้อความและตวั อักษร

(4) การจัดเรียงข้อความท่ัวไป (Alignment Text) ให้เป็นไปในลักษณะตามธรรมชาติ โดย
ลักษณะธรรมชาติการอ่านข้อความในภาษาไทย ภาษาอังกฤษ และภาษาในทวีปยุโรป มักจะอ่านจาก
ซ้ายไปขวา ซงึ่ หากจัดเรียงข้อความในลกั ษณะชิดซา้ ย ดงั ในรูปท่ี 7.7 เป็นการจัดข้อความแบบชิดซา้ ย
ถงึ แม้บางคร้งั จะดนู า่ เบ่ือ แต่ก็มีข้อดีคือทาใหอ้ า่ นไดง้ า่ ย

รปู ที่ 8.7 การจดั เรียงข้อความชดิ ซา้ ย

ท่มี า : Alan Dix et.al.,2004

เมื่อเปรียบเทียบกับการจัดข้อความแบบชิดขวา ในรูปที่ 8.8 อาจดูสวยงามและสามารถเน้น
ลกั ษณะการจดั แบบพเิ ศษ แตค่ ่อนขา้ งยากในการอ่านและจับขอ้ ความ

บทท่ี 8 หลักพนื้ ฐานของการออกแบบระบบปฏิสมั พันธ์ 99

รูปที่ 8.8 การจดั ขอ้ ความชิดขวา
ท่มี า : Alan Dix et.al.,2004

(5) การจัดเรียงชื่อบุคคล (Alignment Names) ส่วนใหญ่ตามหลักภาษาอังกฤษมักจะ
จัดเรียงช่ือบุคคลโดยค้นหาตามนามสกุล ดังน้ันหลักท่ัวไปคือ จัดเรียงให้ส่วนของนามสกุลสามารถ
สงั เกตไดโ้ ดยงา่ ย ดังตวั อยา่ งในรปู ท่ี 8.9

รปู ที่ 8.9 การจัดเรียงชือ่ บุคคล
ท่ีมา : Alan Dix et.al.,2004

(6) การจัดเรียงตัวเลข (Alignment Numbers) โดยต้องคานึงถึงวัตถุประสงค์ของข้อมูล
ด้านตัวเลขที่ต้องการสื่อความหมาย ข้อแนะนาในการนาเสนอข้อมูลในกลุ่มตัวเลขคือ ผู้ใช้งานมัก
ต้องการทราบตัวเลขที่มีค่ามากท่ีสุดหรือน้อยท่ีสุด ดังนั้นวิธีมาตรฐานในการนาเสนอคือการจัดให้
ทศนิยมตรงกนั และจดั ชิดขวาในสว่ นของจานวนเต็ม ดงั แสดงในรปู ที่ 8.10

รปู ท่ี 8.10 การจัดเรียงตัวเลข
ทม่ี า : Alan Dix et.al.,2004

บทท่ี 8 หลักพนื้ ฐานของการออกแบบระบบปฏิสัมพันธ์ 100
(7) จัดเรยี งขอ้ มลู หลายคอลมั น์ (Multiple Columns) อาจจะมกี ารใช้เส้นตรงหรือ ตาราง
เขา้ มาช่วย หรอื อาจจะใชส้ ีแยก ข้อมลู แต่ละแถวชดั เจน ดังตัวอยา่ งรูปท่ี 8.11

รูปท่ี 8.11 ปญั หาการจดั เรยี งขอ้ มูลหลายคอลัมภ์
ทม่ี า : Alan Dix et.al.,2004

วิธกี ารแกป้ ญั หาอาจเชื่อมไปยงั ข้อมลู ในคอลมั นถ์ ัดไปดว้ ยเส้นนาสายตา เชน่ ในรปู ท่ี 8.12

รูปท่ี 8.12 การใชเ้ สน้ นาสายตา
หรืออาจใช้วิธีการแยกสีให้เห็นถึงความแตกต่าง โดยอาจจะใช้สีเทาเพื่อป้องกันการพิมพ์
ขอ้ มูลออกมาในเครือ่ งพมิ พ์ขาวดา ทีจ่ ะยงั คงเหน็ ความแตกต่างได้ ดังตวั อย่างรูปท่ี 8.13

รูปที่ 8.13 การใชส้ ีแยกความแตกต่าง
ทีม่ า : Alan Dix et.al.,2004

บทที่ 8 หลักพนื้ ฐานของการออกแบบระบบปฏิสมั พนั ธ์ 101
แม้บางครั้งก็อาจใชล้ ักษณะการจัดเรียงข้อมูลที่ช่วยลดช่องว่างตรงกลางเป็นการจัดชนิด
พิเศษ แต่ควรใช้ด้วยความระมัดระวัง เพราะอาจส่งผลต่อการอ่านและการรับรู้ได้ ดังตัวอย่างรูปท่ี
8.14

รปู ที่ 8.14 การจดั เรียงแบบพิเศษ
ท่ีมา : Alan Dix et.al.,2004

(8) การใชพ้ ้นื ท่วี ่าง (Whitespace) อาจจะสามารถชว่ ยเพ่มิ ประสทิ ธภิ าพการนาเสนอ
ขอ้ มูลโดยวิธีการแยกขอ้ มลู ออกจากกนั (Separate) ดังในรูปท่ี 8.15

รปู ท่ี 8.15 การแยกข้อมลู ออกจากกนั
ที่มา : Alan Dix et.al.,2004

บางครั้งใช้วิธีการจัดโครงสรา้ งหรือกลุม่ ขอ้ มลู (Structure) ดงั แสดงในรปู ที่ 8.16

รูปท่ี 8.16 การจดั โครงสรา้ งหรือกลุ่มขอ้ มลู
ท่ีมา : Alan Dix et.al.,2004

บทที่ 8 หลกั พ้ืนฐานของการออกแบบระบบปฏิสัมพันธ์ 102
การเนน้ ข้อมูลที่มีความสาคญั (Highlight) ดงั แสดงในรปู ท่ี 8.17

รปู ที่ 8.17 การเนน้ ข้อมลู

ทม่ี า : Alan Dix et.al.,2004

ปฏิสมั พันธข์ องผใู้ ชท้ ี่มตี ่อระบบ

ปฏสิ มั พนั ธข์ องผู้ใช้ท่ีมตี อ่ ระบบ (User action and control) แบ่งลกั ษณะสาคญั ของ
ปฏิสัมพันธ์ ออกเป็น 3 กลมุ่ คือ

1. การนาเข้าข้อมูล (Entering information) ส่วนใหญ่ระบบต้องการให้ผู้ใช้ป้อน
ข้อมูลผ่านทางฟอร์ม (Forms) หรือไดอะล็อกบ็อก (Dialogue boxes) ดังน้ันอาจสร้างแบบฟอร์ม
ตลอดจนข้อความอธบิ ายการกรอกขอ้ มลู และการจดั เรยี งตัวอักษรยึดหลัก ตวั อกั ษรชิดซ้าย ตวั เลขชดิ
ขวา ดังตวั อยา่ งรูปที่ 8.23 ลกั ษณะการจัดเรยี งขอ้ มลู ขน้ึ อยกู่ ับการวิเคราห์ภาระงาน (Task Analysis)
เป็นหลัก โดยต้องให้มีความเหมาะสมเป็นไปตามลาดับชั้นตอนการทางานจริงของผู้ใช้ ตัวอย่างเช่น มี
การจดั เรียงจากบนลงล่าง หรือจากซา้ ยไปขวา หรอื ตามวฒั นธรรมการปฏบิ ตั ิงานในกลมุ่ ผู้ใช้นน้ั

รปู ที่ 8.23 เปรยี บเทียบการจดั เรยี งตัวอักษร
ที่มา : Alan Dix et. Al., 2004

บทท่ี 8 หลักพน้ื ฐานของการออกแบบระบบปฏิสมั พนั ธ์ 103

2. การรับรู้ถึงการกระทา (Knowing what to do) ผู้ใช้ต้องมีข้อมูลอยู่เสมอว่า กาลัง
ดาเนินการใดอยู่ หรือขั้นตอนใดที่ได้ดาเนินการผ่านพ้นไปแล้ว ต้องทราบว่าสามารถดาเนินการใด
หรือดาเนินการอย่างไรนขณะนั้นได้บ้าง ซึ่งจะต้องสอดคล้องกับการแสดงข้อความอธิบายหรือการ
นาเสนอข้อมูลที่เหมาะสม การใช้รูปแบบการนาเสนอที่สอดคล้องกันตลอดทั้งระบบ ก็จะช่วยทาให้
ผู้ใช้เกิดความคุ้นเคย เช่น การใช้วิธีการขีดเส้นใต้หรือทาตัวเข้มเพื่อบ่งบอกถึงการเช่ือมโยงเอกสาร
ผ่านทางหน้าเว็บเพจ นอกจากนี้ยังมีเรื่องการแสดงลักษณะของตัวอักษรหรือสัญรปู (Icons) ตา่ ง ๆ ท่ี
เป็นมาตรฐานก็จะช่วยสื่อความหมายได้ดี เช่น การใช้ตัวอักษรเข้ม แสดงสถานะปัจจุบันท่ีกาลัง
ดาเนนิ การอยู่

3. ตัวบ่งบอกการดาเนินการ (Affordance) หมายถึงการออกแบบอุปกรณ์ให้ส่ือความ
หมายถึงผู้ใช้ว่า การจับ การบิด การขว้าง การถือ เช่น แก้วน้ามักจะมีท่ีจับซ่ึงสื่อความหมายว่าผู้ใช้
ควรจับแก้วตรงท่ีจับเป็นต้น หรือเป็นการออกแบบระบบให้ผู้ใช้ใช้งานระบบได้โดยอย่างอัตโนมัติ ไม่
ต้องใช้การจา ฟังก์ชันการทางาน (Cognitive functions) มากมายนัก ดังรูปท่ี 8.24 สาหรับการ
ออกแบบ Icons บนหน้าจอคอมพิวเตอร์ก็จะมีหลักการโดยทั่วไปว่า ถ้าเป็นในลักษณะของปุ่ม
(Button-like) ก็สื่อถึงความต้องการให้ผู้ใช้คลิกเพ่ือเลือกเข้าไปดาเนินการ แต่ถ้าออกแบบให้มี
ลักษณะคล้ายวัตถุทางกายภาพ (Physical-like) ก็มีความหมายว่าต้องการให้ผู้ใช้เลือก เพื่อนาไปใช้
เชน่ รูปคอมพวิ เตอร์ รูปเครื่องพิมพ์ รูปถังขยะ เปน็ ตน้ ตามวฒั นธรรมทางด้านระบบคอมพิวเตอรแ์ ล้ว
เมื่อเห็น Icons น้ันจะส่ือความหมายถึงความต้องการให้ผู้ใช้เลือก โดยการคลิก 1 หรือ 2 คร้ัง โดยมี
ความแตกตา่ งจากปมุ่ ของอุปกรณ์ทางกายภาพ ท่เี พยี งแค่กดเท่านั้น

รูปท่ี 8.24 ตวั บง่ บอกการดาเนนิ การ

บทท่ี 8 หลักพ้นื ฐานของการออกแบบระบบปฏิสัมพนั ธ์ 104

แบบฝกึ หดั ท้ายบท

1. การออกแบบ (Design) หมายความว่าอยา่ งไร
2. การออกแบบ (The Process of Design) มขี น้ั ตอนใดบ้าง
3. ใหย้ กตวั อย่างเปา้ หมาย และ ข้อจากดั ในดา้ นความหมายของการออกแบบมา 3 ตวั อย่าง
4. กฎหลักของการออกแบบปฏิสัมพนั ธ์ กลา่ วไวว้ ่าอยา่ งไร
5. ให้อธบิ ายขน้ั ตอนการออกแบบระบบในส่วนของการสรา้ งต้นแบบและการวนรอบ (Iteration

and prototyping)
6. ใหอ้ ธบิ ายการออกแบบมงุ่ เน้นท่ีผู้ใช้ (User Centered Design)
7. การสร้างสถานการณ์ (Scenario) มจี ุดประสงค์ในการทาเพื่ออะไร
8. การออกแบบสารสนเทศทางคอมพิวเตอร์ท่วั ไป มสี ว่ นประกอบท่ีสาคญั คอื อะไรบ้าง
9. ให้อธบิ ายลักษณะการจัดเรียงขอ้ ความทวั่ ไปสาหรบั ภาษาไทย และการจัดเรยี งตัวเลขที่เหมาะสม
10. ปฏสิ ัมพันธข์ องผ้ใู ช้ทม่ี ตี ่อระบบมกี ารแบง่ ลักษณะสาคัญเป็น 3 กลุ่มคอื อะไรบา้ ง

บทท่ี 9
ระบบปฏิสัมพันธใ์ นกระบวนการพฒั นาซอฟต์แวร์

ในการจัดทาซอฟต์แวร์หรือโปรแกรมประยุกต์ จะพัฒนาภายใต้กระบวนการที่เรียกว่า วิศวกรรม
ซอฟต์แวร์ (Software Engineering) โดยกรรมวธิ ีท่ีนามาใช้ในการพฒั นาระบบเรยี กว่า วงจรชีวิตของ
ซอฟต์แวร์ (Software Life Cycle) ซ่ึงจะเร่ิมตั้งแต่ จุดเร่ิมต้นของการสารวจความต้องการระบบ
จนกระทั่งพฒั นาเสร็จส้นิ และถกู นาไปใชง้ าน การศกึ ษาในบทน้ีจะเนน้ ที่ข้ันตอนทร่ี ะบบปฏิสมั พันธ์จะ
ส่งผลต่อการใช้งาน และประสิทธิภาพของระบบ ซ่ึงเป็นวิธีการและกระบวนการที่ครอบคลุมอยู่ใน
กจิ กรรมส่วนใหญ่ของข้ันตอนการพัฒนาระบบ

วงจรของซอฟต์แวร์

ในการพัฒนาซอฟต์แวร์นั้นถ้ามีการนากระบวนการทางด้านวิศวกรรมเข้ามาใช้ในการพัฒนา
จะช่วยเพิ่มประสิทธิภาพและควบคุมกระบวนการผลิตในทุกข้ันตอนให้เป็นไปตามข้อกาหนดและ
มาตรฐานอื่น ๆ ได้ นอกจากน้ียังมีการพัฒนาเครื่องมือและวธิ ีการตา่ ง ๆ จานวนมากเพื่ออานวยความ
สะดวกและเพิ่มประสทิ ธิภาพใหแ้ ก่แตล่ ะขั้นตอน กระบวนการของการพัฒนารูปแบบการใชง้ านระบบ
ซึ่งเกี่ยวข้องกับการออกแบบระบบปฏิสัมพันธ์น้ัน อาจกล่าวได้ว่า ได้ถูกแทรกซึมในเกือบทุกขั้นตอน
ของวงจรการพัฒนาซอฟต์แวร์ จนไม่สามารถท่ีจะแยกพิจารณาโดยเฉพาะเจาะจงเพียงข้ันตอนใด
ข้ันตอนหน่ึงได้ กลุ่มบุคคลทีเ่ กยี่ วขอ้ งกับข้นั ตอนตา่ ง ๆ ขา้ งตน้ แบง่ ได้ 2 กลุม่ คอื กลุม่ ผใู้ ช้งานระบบ
และกลุ่มผู้พัฒนาระบบ ในบางครั้งผู้ใช้งานระบบก็อาจทาหน้าท่ีในการออกแบบระบบด้วย กลุ่ม
ผใู้ ชง้ านระบบยังแบ่งยอ่ ยออกเป็น 2 ประเภท คือ

1) ผู้ใช้งานที่เป็นผู้เจรจาต่อรองเกี่ยวกับฟังก์ชันการทางานของระบบ เง่ือนไขต่าง ๆ ท่ีต้อง
ปฏบิ ัตติ าม โดยจะเรียกผใู้ ชง้ านในกลุ่มนว้ี า่ ลูกค้า (Customer)

2) ผู้ใช้งานท่ีเป็นผู้ติดต่อระบบหรือปฏิบัติงานโดยตรงกับระบบโดยจะเป็นผู้ทราบ
รายละเอียด หรือข้ันตอนการทางาน ตลอดจนให้คาแนะนาเก่ียวกับปัญหาท่ีอาจเกิดข้ึนได้ จะเรียก
ผใู้ ช้งานในกล่มุ นวี้ า่ เป็น ผู้ปฏิบตั ิงาน (User/End-User)

บางคร้ังผู้ใช้งานระบบท้ังสองกลุ่ม อาจทาหน้าที่ร่วมกันแต่ก็บางกรณีท่ีท้ังสองกลุ่ม
ทางานแยกจากกันอย่างชัดเจน เช่น การพัฒนาระบบโปรแกรมผ่านทางเว็บไซต์ หรือ ระบบพาณิชย์
อิเล็กทรอนิกส์ เป็นต้น โดยทั่วไป วงจรในการพัฒนาระบบจะใช้วงจรแบบลาดับช้ัน (The waterfall
model) ดังแสดงในรูปที่ 9.1

บทที่ 9 ระบบปฏสิ ัมพันธใ์ นกระบวนการพฒั นาซอฟต์แวร์ 106

รูปท่ี 9.1 วงจรพฒั นาระบบแบบลาดบั ข้นั
ท่มี า : Alan Dix et. Al., 2004

จากรูปมรี ายละเอียดของแตล่ ะข้นั ตอนดังนี้
1) การกาหนดความต้องการของระบบ (Requirement Specification) เป็นการ
ทางานร่วมกันระหว่างผู้ออกแบบและผู้ใช้งานระบบ เพ่ือหาข้อตกลงร่วมกัน สาหรับส่ิงที่ระบบ
ตอ้ งการ
2) การออกแบบสถาปัตยกรรมระบบ (Architectural Design) โดยการกาหนด
โครงสร้างฟงั ก์ชนั การทางานและกาหนดเกี่ยวกับความเชอ่ื มโยงของขอ้ มลู ตา่ ง ๆ
3) การออกแบบรายละเอียด (Detailed Design) โดยกาหนดรายละเอียดให้กับทุก
ส่วนประกอบของระบบ จากขน้ั ตอนท่ี 2
4) การเขียนโปรแกรมและการทดสอบส่วนย่อย (Coding and Unit Testing) โดยการ
แปลงรายละเอียดของการออกแบบมาสู่ส่วนของการเขียนโปรแกรม และได้มีการกาหนดวิธีการ
ทดสอบว่าในแต่ละส่วนของโปรแกรมนั้นเป็นไปตามข้อกาหนดหรือไม่ หากมีข้อผิดพลาดก็ดาเนินการ
แกไ้ ขตอ่ ไป
5) การรวมส่วนประกอบและการทดสอบ (Integration and Testing) เพ่ือต้องการ
ทดสอบในเร่อื ง การใช้งานร่วมกนั ของทรัพยากรในระบบ ในขัน้ ตอนน้ี อาจีการทดสอบเพอ่ื ให้ผ้ใู ช้งาน
ยอมรับระบบด้วย เพราะก่อนท่ีระบบจะถูกส่งมอบให้แก่ลูกค้า ก็ต้องผ่านการทดสอบเพ่ือการยอมรับ
เสียก่อน โดยได้มีการกาหนดมาตรฐานการทดสอบระบบ เช่น ISO 9421 ใชท้ ดสอบการใช้งานระบบ
ภายใต้สภาพแวดล้อมของการปฏิบัตงิ านในสานักงานอันส่งผลต่อสุขภาพและความปลอดภัยของผู้ใช้
ซึง่ กจ็ ะเก่ยี วกับการออกแบบ ในสว่ นของระบบปฏิสัมพันธ์ด้วย

บทท่ี 9 ระบบปฏสิ มั พันธ์ในกระบวนการพฒั นาซอฟต์แวร์ 107
6) การปรบั ปรุงระบบ (Maintenance) เป็นข้ันตอนท่เี กดิ ข้นึ ภายหลังการส่งมอบระบบ
ให้กับลูกค้าแล้ว ซึ่งอาจจะเป็นในกรณีของการแก้ไขข้อผิดพลาดที่ได้มีการตรวจพบในภายหลัง การ
เพ่ิมเติมฟังก์ชันการทางานของระบบ หรือแม้กระทั่งการออกแบบระบบใหม่ เพื่อทดแทนระบบเดมิ ท่ี
ลา้ สมัย ขน้ั ตอนของการปรับปรุงระบบนจ้ี ะสง่ ผลให้กระทบกบั ขัน้ ตอนอืน่ ๆ ในระบบเกือบทกุ ขนั้ ตอน
ดังรูปท่ี 9.2 นอกจากนี้ข้ันตอนของการปรับปรุงระบบ ยังเป็นขั้นตอนท่ีใช้เวลามากท่ีสุดในบรรดา
ข้ันตอนต่าง ๆ อีกด้วย

รปู ที่ 9.2 ผลกระทบกับข้นั ตอนอน่ื ๆ

การตรวจสอบความถูกต้องของระบบ เป็นความพยายามลดช่องว่างของการแปลงจากความ
ต้องการระบบมาส่โู ปรแกรมการใช้งาน เพ่ือนาไปสู่ความพึงพอใจของผู้ใช้งาน (Validation) ตลอดจน
การตรวจสอบความถูกต้องของฟังก์ชันการทางาน (Verification) นอกจากความถูกต้องแล้วยังต้อง
ออกแบบระบบให้สอดคล้องกับความต้องการเชิงพาณิชย์ตลอดจนกฎหมายข้อบังคับต่าง ๆ ที่
เก่ยี วข้องอกี ด้วย

การออกแบบด้านการใชง้ านระบบ

การออกแบบด้านการใช้งานระบบ (Usability Engineering) จะต้องปฏิบัติตามข้อกาหนด
ด้านการใช้งานระบบอย่างชัดเจน และออกแบบระบบให้เป็นไปตามข้อกาหนด โดยการสังเกตการณ์
ผู้ปฏิบัติงาน ซึ่งมักจะกาหนดให้เป็นเฉพาะช่วงท่ีผู้ปฏิบัติงานมีปฏิสัมพันธ์กับระบบ ซ่ึงวิธีการน้ีถือว่า
เป็นความสามารถด้านการใช้งานระบบ ไม่ได้จากัดอยู่เพียงส่วนของการติดต่อกับผู้ใช้เท่านั้น แต่ยังมี
ส่วนของการออกแบบโครงสร้าง และการติดต่อระหว่างฟังก์ชันภายในระบบ ซึ่งล้วนแล้วแต่ส่งผลถึง
ประสทิ ธภิ าพในการใชง้ านระบบท้งั ส้ิน

บทที่ 9 ระบบปฏิสัมพนั ธ์ในกระบวนการพฒั นาซอฟตแ์ วร์ 108

ในวงจรชีวิตของการพัฒนาซอฟต์แวร์ ขั้นตอนที่เก่ียวข้องกับการออกแบบด้านการใช้งาน
ระบบจะอยู่ในส่วนแรก คือขั้นตอนการวิเคราะห์ความต้องการของระบบ โดยมีการกาหนดมาตรฐาน
ในการวดั ข้ึนเป็นพิเศษ เพือ่ ใชท้ ดสอบระบบปฏสิ ัมพนั ธโ์ ดยเฉพาะ

ตัวอย่างต่อไปนี้เป็นการนาเสนอตัวอย่างการกาหนดมาตรฐานในการชี้วัด เรื่องการใช้งาน
และระบบปฏิสัมพันธ์ของเครื่องเล่นดีวีดี โดยเน้นท่ีการวัดประสิทธิภาพของการออกแบบระบบให้
สามารถแก้ไขข้อผิดพลาดอันเกิดจากผู้ปฏิบัติงาน (Backward Recoverability) โดยเป็นการแก้ไข
ข้อผิดพลาดที่ค้นพบด้วยวิธีการทาให้ระบบกลับเข้าสู่สถานะเดิมก่อนเกิดการผิดพลาด การกาหนด
มาตรฐานช้วี ดั มีดังนี้

1) แนวคดิ (Measuring Concept) ต้องแกย้ กเลกิ คาส่งั ทีก่ อ่ ใหเ้ กดิ ความผิดพลาด
2) วธิ กี าร (Measuring Method) จานวนคาสั่งท่ีผใู้ ชต้ อ้ งทาเพ่อื ยกเลิกขอ้ ผิดพลาดดังกล่าว
โดยไม่คานึงถึงวา่ ความผิดพลาดนั้นเกดิ ในสถานะใด หรอื ขอ้ ผิดพลาดใดของระบบ
สว่ นท่ีเหลือเป็นมาตรฐาน หรอื ตัวช้วี ดั ความสาเรจ็ ตามวธิ กี ารข้างตน้ ไดแ้ ก่
3) สถานะปจั จุบัน (Now level) เครอื่ งเลน่ ดวี ดี ีในปัจจุบนั ไม่สามารถทาคาสัง่ ยกเลิกนีไ้ ด้
4) สถานการณ์ที่ยอมรับได้ (Worst Case) ไม่จากัดจานวนคาสั่งท่ีต้องใช้เพื่อยกเลิกความ
ผิดพลาด
5) ความมงุ่ หมาย (Planned level) คาสงั่ เพอ่ื การยกเลิกไม่เกิน 2 คาสง่ั
6) สถานการณ์ท่ีดีทสี่ ุด (Best Case) ใช้เพียงคาสั่งเดียวในการยกเลิกข้อผิดพลาด
การกาหนดสถานการณ์ท่ียอมรับได้ ต้องไม่น้อยกว่าสถานะปัจจุบันของระบบท่ีสามารถ
ดาเนินการได้
ตัวอย่างต่อไปนี้เป็นมาตรวัดท่ีกาหนดข้ึนเพ่ือประกอบการพิจารณาในการกาหนดค่าให้กับ
หัวข้อต่าง ๆ ในการประเมินความสามารถด้านการใช้งานระบบ (Usability Metrics) ค่าเหล่าน้ีไดถ้ ูก
นาเสนอโดย Whiteside, Bennett และ Holtzblatt และอ้างอิงใน Alan Dix et al. (2004) และมี
การนาเสนอในหวั ขอ้ ต่าง ๆ ดงั นคี้ อื

1) เวลาท่รี ะบบใชต้ อ่ การประมวลผลคาส่งั
2) รอ้ ยละของจานวนคาสัง่ ทส่ี ามารถใชง้ านได้เทยี บกบั คาสงั่ ทั้งหมดในระบบ
3) ร้อยละของจานวนคาส่ังท่ีสามารถใช้งานไดต้ อ่ ระยะเวลาทก่ี าหนด
4) อตั ราสว่ นของความล้มเหลวในการใช้งานคาส่งั ต่อความสาเรจ็ ของการใชง้ านนัน้
5) เวลาที่สญู เสียไปเมื่อเกิดความผดิ พลาดขึ้นในระบบ
6) รอ้ ยละหรือจานวนคาสง่ั ทเี่ กิดความผิดพลาด
7) ร้อยละหรือจานวนของระบบอื่นที่เป็นคู่แข่งทางการตลาด ซ่ึงมีความสามารถในการ

ใช้งานดีกวา่
8) จานวนคาสง่ั ท่ีมกี ารใช้งาน
9) ความถใ่ี นการใช้งานระบบการให้ความชว่ ยเหลือหรือเอกสารค่มู อื ต่าง ๆ

บทท่ี 9 ระบบปฏิสัมพนั ธ์ในกระบวนการพฒั นาซอฟต์แวร์ 109

10) ร้อยละของคาสงั่ ท่ผี ้ปู ฏิบตั งิ านมีความพงึ พอใจและไมม่ คี วามพงึ พอใจ
11) จานวนคาสั่งผดิ พลาดท่มี กี ารเรยี กใชง้ านซ้า
12) จานวนครัง้ ที่ประมวลผลระบบไดส้ าเรจ็ และจานวนคร้งั ท่ไี ม่ประสบความสาเรจ็
13) จานวนครั้งที่ระบบปฏิสมั พันธก์ ่อใหเ้ กิดความเขา้ ใจผิดพลาดต่อผูใ้ ชง้ านระบบ
14) จานวนของการประมวลผลที่ดแี ละไมด่ ีจากการสอบถามผใู้ ช้งานระบบ
15) จานวนคาสัง่ ท่ไี มไ่ ดม้ กี ารเรียกใชง้ านเลย
16) จานวนของพฤตกิ รรมการประมวลผล แบบทาซ้าโดยเปลา่ ประโยชน์
17) จานวนผู้ใช้งานระบบที่มีความพอใจในการใชง้ าน เมอื่ เปรยี บเทียบกบั ระบบอื่น
18) จานวนคร้ังที่ผู้ใช้งานเสียไป ในการพยายามทาความเข้าใจกับการใช้งานระบบหรือ

การแก้ปญั หาท่ีเกดิ ข้ึน
19) จานวนครง้ั ท่ีผใู้ ชง้ านระบบถูกขัดจงั หวะในการปฏิบัติงาน
20) จานวนคร้ังที่ผูใ้ ช้งานสญู เสียการควบคุมระบบ
21) จานวนครง้ั ที่ผูใ้ ช้งานรู้สึกสับสนหรอื ไม่พอใจในการใชง้ านระบบ

โดยในแตล่ ะระบบจะมีการพจิ ารณาว่ามาตรวัดประเภทใด ควรนาไปใช้เนื่องจากแตล่ ะระบบ
มีความแตกต่างกันในรายละเอียด หากได้มีการพิจารณาอย่างเหมาะสม ย่อมสามารถทาให้การ
พิจารณาเร่ืองความสามารถในการใชร้ ะบบมีความน่าเช่อื ถอื มากข้นึ

มาตรฐาน ISO 9241 ได้มีคาแนะนาในเร่ืองการกาหนดหัวข้อในการทดสอบความสามารถใน
การใชง้ านระบบ เพื่อจะไดน้ าไปเปน็ ส่วนหนึ่งในการวเิ คราะห์ความต้องการของระบบได้ โดยการแยก
พิจารณาออกเป็น 3 ส่วนคือ ทางด้านประสิทธิผลการใช้งาน (Effective measures) ทางด้าน
ประสิทธิภาพการใช้งาน (efficiency measures) และทางด้านความพึงพอใจในการใช้งาน
(Satisfaction measures) โดยแยกพิจารณา ตามวัตถปุ ระสงค์ตา่ ง ๆ ดงั นี้

1) ความเหมาะสมของภาระงาน
ประสทิ ธผิ ล : จานวนรอ้ ยละของความตอ้ งการทีระบบสามารถตอบสนองได้
ประสทิ ธภิ าพ : เวลาท่ใี ชไ้ ปเพอ่ื ทาภาระงานนั้นได้สาเรจ็
ความพงึ พอใจ : ระดบั ชัน้ ของความพึงพอใจ

2) ความเหมาะสมเรือ่ งการฝกึ อบรมผู้ใช้งานระบบ
ประสทิ ธิผล : จานวนคาส่ังท่ีได้มีการฝึกอบรม
ประสทิ ธภิ าพ : ความสามารถในการใชง้ านเมื่อเปรียบเทียบกบั ผูใ้ ชท้ มี่ ีความชานาญ
ความพึงพอใจ : ระดับชั้นของความพงึ พอใจทมี่ ตี ่อการฝกึ อบรม

3) ความสามารถในการเรยี นรรู้ ะบบ
ประสทิ ธิผล : จานวนรอ้ ยละของฟังก์ชันทีไ่ ด้มีการเรียนรู้
ประสทิ ธภิ าพ : เวลาทใ่ี ช้ในการเรียนรู้

บทท่ี 9 ระบบปฏสิ มั พันธ์ในกระบวนการพฒั นาซอฟต์แวร์ 110
ความพึงพอใจ : ระดบั ชัน้ ของความพงึ พอใจต่อความงา่ ยในการเรยี นรู้
4) ความทนทานตอ่ ความบกพร่องของระบบ
ประสิทธผิ ล : จานวนร้อยละของความผดิ พลาดทีส่ ามารถแก้ไขได้
ประสิทธภิ าพ : เวลาทีใ่ ชไ้ ปในการแกไ้ ขความผดิ พลาด
ความพึงพอใจ : ระดบั ช้นั ของความพึงพอใจต่อการจัดการกบั สถานการณผ์ ิดพลาดของ
ระบบ
ขอ้ โต้แยง้ เกย่ี วกับการประเมินความสามารถในการใช้งานระบบก็คือ ถา้ หากใชใ้ นขนั้ ตอนของ
การวิเคราะห์ความต้องการของระบบแล้ว อาจทาให้จานวนบางค่า ไม่สามารถกาหนดได้ตามความ
เป็นจริง อย่างไรก็ตาม หากได้มีการพิจารณากาหนดกรอบของการวิเคราะห์การทางานของระบบ
ร่วมกับกรอบการปฏิบัติงานท่ีเหมาะสม ก็จะช่วยให้สามารถควบคุมระบบให้ดาเนินการจัดทาไปตาม
แนวทางที่เหมาะสมได้

การสรา้ งระบบต้นแบบและการท้าซา้

ตน้ แบบ (Prototype) คือตวั แทนอยา่ งเป็นรปู ธรรมของการออกแบบซ่งึ บางครั้งกอ็ าจจะแยก
ลาบากกบั คาวา่ sketch ซึ่งอาจจะสามารถนาเสนอผา่ นทางกระดาษ หรอื ซอฟตแ์ วร์ ดงั รปู ท่ี 9.3

รปู ที่ 9.3 รปู แบบการสรา้ งต้นแบบ
ที่มา : ผนวกเดช สวุ รรณทัต (Mock) Interaction Design & Prototyping

บทที่ 9 ระบบปฏสิ ัมพันธ์ในกระบวนการพฒั นาซอฟต์แวร์ 111

ในข้ันตอนของการกาหนดความต้องการของระบบถึงแม้ว่าจะมีการใช้เคร่ืองมือเข้าช่วยใน
การวิเคราะห์เพ่ือให้มีความละเอียดรอบคอบเพียงใดก็ตาม ยังไม่สามารถเป็นหลักประกันได้ว่าจะ
สามารถวิเคราะห์ได้ครอบคลุมทกุ ความต้องการ และเปน็ ไปตามท่ผี ู้ใช้งานระบบต้องการ ดงั นัน้ ในการ
ดาเนินการ จะมีการสร้างระบบต้นแบบ สาหรับแต่ละส่วนการทางาน โดยอาจไม่จาเป็นต้องมี
รายละเอียดครบทุกฟงั ก์ชนั หรือประมวลผลได้ครบถว้ นตามความเป็นจริง ระบบต้นแบบนจี้ ะถูกนาไป
ให้ผู้ใช้งานระบบได้ทาการทดสอบเพ่ือหาข้อผิดพลาดตลอดจนคาแนะนาในการใช้งานแล้วนากลับมา
แก้ไข ปรับปรุง แล้วนาไปทดสอบต่อไป ซึ่งเป็นข้ันตอนที่ต้องมีการทาซ้าเพื่อให้ระบบสามารถ
สนองตอบตอ่ ความตอ้ งการและความพงึ พอใจไดด้ ีที่สุด

วิธกี ารในการสรา้ งระบบต้นแบบมี 3 วิธีไดแ้ ก่
1) ต้นแบบชนิดทดสอบแล้วทิ้งไป (Throw-away) โดยมีการสร้างระบบต้นแบบ เพ่ือ
ตรวจสอบความตอ้ งการ จนกว่าจะได้ระบบท่ีสนองตอบต่อความต้องการ หลังจากน้ันกจ็ ะมกี ารบันทกึ
ความต้องการตา่ ง ๆ เพอ่ื นาไปใชใ้ นกระบวนการของการสร้างระบบจรงิ ตอ่ ไป ซึ่งระบบต้นแบบท่ีใช้ใน
การทดสอบกจ็ ะถกู ยกเลิกไปในที่สุด
2) ต้นแบบท่ีมีการเพิ่มเติมในทุกข้ันตอนของการสร้างระบบ (Incremental) คือการใช้
ต้นแบบเดิมแล้วนามาสร้างต้นแบบเพ่ิมเติมเข้าไป หลังจากมีการสารวจความต้องการเพ่ิมขึ้น เม่ือ
ทดสอบแต่ละต้นแบบแล้วก็จะนาความต้องการน้ันไปสร้างระบบจริงทันที โดยมีการเพ่ิมเติมทั้งใน
ระบบต้นแบบและสร้างระบบจริงไปพรอ้ ม ๆ กัน
3) ต้นแบบที่มีการปรับปรุงให้เป็นระบบท่ีสมบูรณ์ (Evolutionary) จะถูกนามาใช้เป็น
พื้นฐานในการสร้างระบบจริงในทุกขั้นตอนของวงจรการพัฒนาระบบ คือหลังจากได้มีการทดสอบว่า
ตรงกับความต้องการผู้ใช้ ท้ังในเร่ืองความถูกต้องของการประมวลผลและความพึงพอใจในการใช้งาน
แลว้ ก็จะนาตน้ แบบนนั้ ไปพฒั นาใหเ้ ป็นโปรแกรมระบบประมวลผลที่สมบูรณเ์ พอ่ื การใช้งานต่อไป
โดยทั่วไปในการสร้างระบบต้นแบบ จะมีเครื่องมือและอุปกรณ์ต่าง ๆ ในการสร้างท่ีทาให้
ระบบต้นแบบ มีความคลา้ ยคลึงกบั ระบบจรงิ ให้มากทีส่ ุด โดยตอ้ งทาภายในระยะเวลาอันรวดเร็ว โดย
ต้นทุนทางด้านแรงงานและค่าใช้จ่ายต้องน้อยมาก แตก่ ็มีข้อโต้แย้งบางประการท่ีมีตอ่ แนวคิด การใช้
งานระบบต้นแบบดงั น้คี ือ
1) ปัญหาด้านระยะเวลา (Time) คือถ้าหากใช้เวลามากเกินไปในการสร้างต้นแบบแต่ใน
ที่สุดต้นแบบน้ันไม่ได้ถูกนามาใช้งาน ก็เกิดปัญหาการใช้เวลาให้สูญไปโดยเปล่าประโยชน์ จึงมีการ
พัฒนาระบบต้นแบบอย่างรวดเร็วข้ึนมา (Rapid Prototyping) เพื่อลดระยะเวลาในการสร้างแต่ใน
ส่วนของการตรวจสอบความถูกต้องและความพึงพอใจของผู้ใช้ยังต้องทาด้วยความละเอียดรอบคอบ
วธิ ีการท่นี ามาใชเ้ พอื่ ลดระยะเวลาการพฒั นาระบบต้นแบบคือ

(1) การใช้โครงร่างเพ่ืออธิบายระบบ (Storyboards) โดยใช้โปรแกรมจาพวกการสร้าง
ภาพกราฟิกด้วยความรวดเร็ว สวยงาม โดยท่ีเม่ือนาไปใช้จะเสมือนของจริง ในการใช้โครงร่างนี้จะไม่
เกย่ี วขอ้ งกับทรัพยากรของระบบ เชน่ ความเร็วในการประมวลผลโปรแกรม ฐานขอ้ มลู เปน็ ต้น

บทท่ี 9 ระบบปฏสิ ัมพันธ์ในกระบวนการพัฒนาซอฟต์แวร์ 112

(2) การจาลองฟงั กช์ นั การทางานบางสว่ น (Limited Functionality Simulations) คือ
การเพิ่มเติมในส่วนของฟังก์ชันการทางานเข้าไปในระบบต้นแบบให้สามารถโต้ตอบกับระบบได้และ
ปฏบิ ัตงิ านจรงิ ไดก้ บั ฟงั กช์ ันบางสว่ น

(3) การใช้ความช่วยเหลือจากโปรแกรมระดับสูง (High-level Programming
Support) เพ่ือช่วยให้ผู้ออกแบบสร้างระบบตน้ แบบที่มีความคล้ายคลึงกับระบบงานจริง โดยสามารถ
ทดสอบท้ังด้านการโต้ตอบ เวลาในการตอบสนอง และมีระบบจัดการตดิ ตอ่ กับผู้ใชง้ านระบบ (UIM-a
user interface management system) ท่ีได้ออกแบบมาเพ่ือสร้างระบบต้นแบบที่รองรับการ
ตอบสนองตอ่ การใชง้ านไดด้ ี

2) ปัญหาด้านการวางแผน (Planning) การใช้งานระบบต้นแบบควบคู่ไปกับการพัฒนา
ระบบงานจริง อาจเป็นสิ่งใหม่สาหรับผู้ควบคุมโครงการ (Project Manager) ซ่ึงถ้าหากในแผนการ
ปฏิบัติงาน ไม่ได้รวมข้ันตอนและเผื่อระยะเวลาสาหรับระบบต้นแบบแล้ว อาจก่อให้เกิดความยุ่งยาก
ได้ ดังนั้นก่อนการวางแผนเกี่ยวกับขั้นตอนและระยะเวลาในการปฏิบัติงาน ควรรวมข้ันตอนการสร้าง
ระบบตน้ แบบและเผอื่ ระยะเวลาไว้ในแผนการปฏิบตั ิงาน

3) ปัญหาด้านการใช้งานท่ีไม่เป็นฟังก์ชันหลัก (Non-functional Features) เช่น การ
ทางานด้านการรักษาความปลอดภัยของระบบ การดาเนินการเพ่ือให้ระบบมีคุณสมบัติของความ
น่าเชือ่ ถือ การวเิ คราะห์เวลาในการตอบสนองของระบบ (Response Time) ไม่สามารถนาเสนอผ่าน
ระบบตน้ แบบได้

4) ปัญหาด้านสัญญาการดาเนินงาน (Contract) ปกติในสัญญาว่าจ้างจะต้องมีการกาหนด
ข้อตกลงเกี่ยวกับลักษณะโปรแกรมไว้แล้ว การใช้ระบบต้นแบบเพียงอย่างเดียวเพื่อสารวจความ
ตอ้ งการและความพึงพอใจของผู้ใช้ อาจก่อให้เกิดปัญหาเร่ืองขอบเขตความตอ้ งการของผูใ้ ชเ้ กินกวา่ ที่
ได้มีการตกลงไว้ในสัญญา เพื่อเป็นการลดปัญหาดังกล่าวการใช้งานระบบต้นแบบเพื่อสารวจความ
ตอ้ งการต้องดาเนนิ การอยา่ งรอบคอบโดยพิจารณาถงึ ขอบเขตของสญั ญาในการจ้างทาระบบด้วย

ข้อควรระวังในด้านการใชง้ านระบบต้นแบบ และการทา้ งานซา้ กค็ อื
1) การตัดสินใจผิดพลาดในขั้นตอนแรก ๆ ของการออกแบบ อาจก่อให้เกิดปัญหาต่อเน่ือง
ไปยังข้ันตอนตา่ ง ๆ ในระบบ จนบางคร้ังยากที่จะแก้ไขได้ เช่น การออกแบบส่วนของการแสดงข้อมลู
เวลาเป็นตัวเลข 2 กลุ่ม คือ 00:00 ซ่ึงถ้าเป็นไปตามระบบคอมพวิ เตอร์แล้ว ตัวเลขน้ีสามารถแสดงค่า
ได้ถงึ 99:99 แตจ่ ากการทดสอบและเปน็ ทีร่ บั รใู้ นกลุม่ ผู้ใชท้ ่ใี ชร้ ะบบนาฬกิ าแบบ 12 ชม. ตวั เลขสงู สุด
คือ 12:59 ซ่ึงผู้ออกแบบและผู้ใช้ต่างก็ยอมรับในข้อจากัดนี้ แต่ปรากฏว่าในการนาไปใช้งานจริงผู้ใช้
บางกลุ่มใชร้ ะบบนาฬิกาแบบ 24 ชม.ทาให้ไม่สามารถกาหนดให้ระบบแสดงผลตามรูปแบบทีต่ ้องการ
ได้ เป็นตน้
2) ปัญหาที่พบในระหว่างการทดสอบระบบ เช่น จากตัวอย่างของปัญหาการจัดการด้าน
เวลาของระบบท่ีใช้นาฬิกาแบบ 24 ชม. หากผู้ออกแบบคิดว่าผู้ใช้มีปัญหายุ่งยากในการต้ังเวลา

บทที่ 9 ระบบปฏสิ มั พนั ธใ์ นกระบวนการพฒั นาซอฟต์แวร์ 113

ผู้ออกแบบอาจแก้ปัญหาด้วยการเปลี่ยนข้อจากัดของเวลาเป็น 24:59 แทนที่จะแค่เพ่ิมเติมข้อมูล
AM,PM เพ่อื ให้ทั้ง 2 ระบบใชง้ านร่วมกันไดด้ ี เปน็ ตน้

ดงั นนั้ ในการใช้งานระบบตน้ แบบ เพ่ือพจิ ารณาปญั หาความต้องการทเ่ี กดิ ข้ึนจึงควรตอ้ งมีการ
ใชห้ ลกั การตา่ ง ๆ ชองการประเมินผลเขา้ รว่ มด้วย เพอื่ จะได้ศกึ ษาความต้องการได้อยา่ งครอบคลุมทุก
ด้านต่อไป

บทที่ 9 ระบบปฏิสมั พนั ธ์ในกระบวนการพัฒนาซอฟต์แวร์ 114

แบบฝกึ หดั ทา้ ยบท

1. กลุ่มผู้ใช้งานระบบแบง่ ออกเป็น 2 ประเภท อะไรบ้าง
2. ขอ้ โตแ้ ยง้ เกี่ยวกับการประเมินความสามารถในการใชง้ านระบบคืออะไร
3. มาตรฐาน ISO9241 กาหนดหัวขอ้ ในการทดสอบความสามารถในการใชง้ านระบบ 3 ดา้ นคอื

อะไรบา้ ง
4. อธิบายลกั ษณะของต้นแบบชนิดทดสอบแล้วท้ิงไป
5. อธบิ ายลักษณะของตน้ แบบทีม่ ีการปรบั ปรงุ ให้เป็นระบบทีส่ มบูรณ์
6. วิธีการท่ีใชเ้ พอื่ ลดระยะเวลาการพฒั นาระบบตน้ แบบมอี ะไรบา้ ง
7. ปญั หาทเี่ กดิ ขน้ึ กบั แนวคดิ ในการสรา้ งระบบต้นแบบมอี ะไรบา้ ง
8. อธิบายปญั หาดา้ นการวางแผน ของการใชง้ านระบบต้นแบบ
9. การใชง้ านระบบตน้ แบบและการทางานซ้าควรคานึงถึงสง่ิ ใดบา้ ง
10. ให้อธบิ ายความแตกตา่ งระหว่างระบบตน้ แบบชนดิ ทดสอบแลว้ ท้งิ ไปและต้นแบบแบบท่มี กี าร

ปรับปรุงใหเ้ ปน็ ระบบท่ีสมบรู ณ์

บทท่ี 10
การออกแบบส่วนตดิ ต่อผู้ใช้

ส่วนติดต่อผู้ใช้งานเป็นส่ิงที่สาคัญมากในระบบคอมพิวเตอร์ทุกประเภทส่วนติดต่อผู้ใช้งานเป็นเพียงส่วน
หน่ึงของคอมพิวเตอร์ในแง่ของ Software ที่มนุษย์จะสามารถรับรู้ผ่านการมองเห็น การได้ยิน การสัมผัส
การพดู คยุ หรอื วธิ กี ารใด ๆ ท่ีทาให้มนษุ ย์และคอมพิวเตอรส์ ามารถส่ือสารกนั ได้ทงั้ ทางตรงและทางอ้อม

User Interface (UI) คือ ส่วนติดต่อผู้ใช้งาน ซ่ึงเป็นส่ิงท่ีสาคัญมากในระบบคอมพิวเตอร์ทุก
ประเภทเป็นศาสตร์หนึ่งท่ีเป็น subset ของ Human-Computer Interactive (HCI) ซึ่งเป็นการศึกษา
การวางแผนและการออกแบบวิธีการที่มนุษย์และคอมพิวเตอร์สามารถทางานร่วมกันได้อย่างมี
ประสิทธิภาพสูงสุด นักออกแบบ HCI จะต้องคานึงถึงปัจจัยหลายอย่าง ได้แก่ มุมมองและสิ่งที่มนุษย์
ตอ้ งการ ข้อจากัดเชิงความสามารถและเชิงกายภาพของมนุษย์ กระบวนการจัดการข้อมูลของระบบ และ
วิธีการท่ีดึงดูดให้มนุษย์สามารถใช้งานระบบได้อย่างดี ซ่ึงแน่นอนว่า HCI จะคานึงถึงข้อจากัดและ
คุณลักษณะของทั้ง Software และ Hardware ส่วนติดต่อผู้ใช้งานจะประกอบด้วยข้อมูล 2 ส่วนหลัก ๆ
คือ ข้อมลู นาเข้า และข้อมลู นาออก

รปู ท่ี 10.1 ตาแหน่งของส่วนติดต่อผู้ใชง้ าน

1) ข้อมลู นาเขา้ (Input) เป็นขอ้ มูลทค่ี อมพิวเตอรจ์ ะต้องนาไปประมวลผล ซึ่งคอมพวิ เตอร์จะ
รับข้อมูลผ่านวิธีการท่ีมนุษย์จะติดต่อสื่อสารโดยการแสดงความต้องการของตนเองไปยังคอมพิวเตอร์
ตัวอย่างเคร่ืองมอื ในการรบั ข้อมูลนาเขา้ เช่น Keyboard, Mouse, Trackball, น้วิ และเสยี ง

บทท่ี 10 การออกแบบส่วนติดตอ่ ผใู้ ช้ 116

2) Output หรือข้อมูลนาออก เป็นข้อมูลที่ไดจ้ ากการประมวลผลของคอมพิวเตอร์ ซ่ึงแสดงผลผ่าน
วิธีการที่คอมพิวเตอร์จะแสดงผลลัพธ์ในการประมวลผลออกมา ซ่ึงข้อมูลดังกล่าวคือสิ่งที่มนุษย์ต้องการ
ปัจจุบันวิธีการแสดงผลข้อมูลนาออกโดยทั่วไป คือ หน้าจอ หรือ Display Screen ซ่ึงเป็นวิธีการท่ีมี
ประโยชน์แกม่ นุษย์ทบ่ี กพรอ่ งด้านการฟงั

รปู ที่ 10.2 ทศิ ทางของข้อมูลนาเข้าและขอ้ มลู นาออก

การออกแบบส่วนติดต่อผู้ใช้งานทดี่ จี ะตอ้ งมีการผสมผสานกลไกในการรับขอ้ มลู นาเข้า และข้อมูล
นาออก ท่ีรองรับความสามารถ และข้อจากัดของผู้ใช้งานได้มากที่สุดเท่าท่ีจะทาได้ และตรงตามความ
ต้องการของผ้ใู ชง้ าน โดยข้อมลู นาเขา้ และข้อมูลนาออกจะมีทศิ ทางการไหลดังรูปท่ี 10.2

ส่วนติดต่อผู้ใช้งานมีความสาคัญ เพราะระบบคอมพิวเตอร์นั้นเป็นการประมวลผลของชุดคาส่ัง
(Source Codes) จานวนมาก ผู้ใช้งานทว่ั ไปจึงไม่สามารถเข้าถึงหรอื สัง่ การได้ ดังนนั้ ส่วนติดต่อผู้ใชง้ านจึง
เป็นส่วนที่ช่วยให้ผู้ใช้งานสามารถติดต่อ (ผ่านการมองเห็น การได้ยิน หรือการส่ง-รับข้อมูล) กับระบบ
คอมพวิ เตอรไ์ ด้

ในการพฒั นาสว่ นตดิ ต่อผูใ้ ช้งานจาเป็นต้องอาศยั หลกั การออกแบบ โดยพ้ืนฐานของการออกแบบ
ส่วนติดต่อผใู้ ช้งานนัน้ ตอ้ งทาให้สว่ นตดิ ต่อผใู้ ช้งานสามารถตอบคาถามได้ 3 ขอ้ คอื

1) จะมหี น้าตาหรอื ส่อื ใหร้ บั รอู้ ยา่ งไร เนน้ ทด่ี ้านการมองเห็น
2) สว่ นติดตอ่ ผูใ้ ช้งานจะสามารถทาใหผ้ ู้ใชง้ านเข้าใจว่าแต่ละสว่ นท่ีปรากฏในสว่ นตดิ ตอ่ ผูใ้ ชง้ าน
คอื อะไร และส่อื ว่าอยา่ งไร
3) ส่วนติดตอ่ ผใู้ ช้งานจะสามารถทาใหผ้ ใู้ ชง้ านมีปฏสิ มั พันธก์ บั มนั ได้อย่างไร

บทท่ี 10 การออกแบบส่วนตดิ ตอ่ ผู้ใช้ 117

ถ้าส่วนติดต่อผู้ใช้งานน้ันไม่ผ่านการออกแบบท่ีดีจะเกิดปัญหา เช่น ระบบไม่สามารถแสดงข้อมูล
ท่ีถูกต้อง และ/หรือครบถ้วน ผู้ใช้งานสับสน ไม่สามารถเข้าใชง้ านระบบได้ ผู้ใชง้ านเกิดความรู้สึกไม่อยาก
ใชง้ านระบบอีก

ส่วนติดตอ่ ผูใ้ ชง้ านสามารถแบง่ เปน็ ยุคได้ 3 ยคุ หลกั ๆ ได้แก่ 1) ยุคของระบบคอมพิวเตอร์
(System) 2) ยุคของเวลิ ดไ์ วด์เวบ็ (WWW) และ 3) ยุคของอุปกรณเ์ คลือ่ นท่ี (Mobile) แสดงดังรูปท่ี
10.3

ยุคของระบบคอมพิวเตอร์ ยคุ ของเวลิ ดไ์ วด์เวบ็ ยุคของอุปกรณเ์ คลอ่ื นที่

รปู ท่ี 10.3 ยคุ ของการพัฒนาส่วนตดิ ต่อผู้ใช้งาน

เทรนดก์ ารออกแบบสว่ นติดตอ่ ผู้ใช้

1. Skeuomorphic คือ การจาลองของจริง ซึง่ ในการสรา้ งคอมพิวเตอร์ใหค้ นทว่ั ไปใช้ในยุคแรก
ผู้ออกแบบส่วนติดต่อผู้ใช้พยายามจาลอง "โลกจริง" มาลงในเครื่อง เพ่ือให้คนคุ้นเคย เช่น มีถังขยะ เก็บ
งานไว้ในแฟ้ม (Folder/Directory) มีพืน้ โตะ๊ (Desktop) เอาไวว้ างของ คนเลยคุน้ เคยได้วา่ จะจดั การไฟล์
ต่าง ๆ อย่างไร จะมีปฏิสัมพันธ์กับส่ิงของต่าง ๆ อย่างไร (เช่น จับไฟล์ลากไปแฟ้มอื่น จับไฟล์ลากลงถัง
ขยะ ฯลฯ) แตท่ ว่าข้อจากัดในการ "ปฏสิ ัมพนั ธ์" กบั สิ่งตา่ ง ๆ เหล่าน้นั เช่น ถา้ เราเห็นป่มุ เหมอื นจรงิ เราก็
คดิ วา่ มนั ควรจะแค่ "กด" ไดอ้ ย่างเดยี ว เพราะปุ่มจริง ๆ ไมส่ ามารถปาดซา้ ยขวา หรอื เขย่า หรือเอยี ง ฯลฯ
ไดท้ าให้เราไมส่ ามารถพัฒนาการโต้ตอบแบบใหม่ๆ ได้

บทท่ี 10 การออกแบบสว่ นติดต่อผใู้ ช้ 118

รูปท่ี 10.4 การออกแบบตามรูปแบบ Skeuomorphic
ทม่ี า: จักรกฤษณ์ ตาฬวฒั น.์ SeedThemes

2. Flat Design เป็นเทรนด์การออกแบบรูปแบบใหม่ท่ีมาพร้อมการเปิดตัวของ iOS7 เป็น
แนวคิดการออกแบบที่ทาเว็บไซต์แบบสะอาด ๆ เรียบ ๆ ไม่เน้น Effect มาก ก่อนหน้าน้ีคนจะชอบแบบ
Skeuomorphism (แบบสมจริง เช่น ใช้ลายไม้ในการออกแบบแอพอ่านหนังสือ หรือใช้รูปไมโครโฟนใน
การออกแบบแอพอัดเสยี ง) หรอื ในไทยกช็ อบแบบ Web 2.0 ท่ีเนน้ การใส่เงา, Gradient เยอะ ๆ พอมาถงึ
ยุคของ Flat Design เป็นการตัดรายละเอียดหลาย ๆ อย่าง เช่น การใช้เงา การไล่ Gradient ออกไป ซึ่ง
จะเน้นการใช้สี / รูปทรงเพ่ือแสดงว่าส่วนไหนสาคัญในเว็บไซต์มากกว่าเม่ือก่อนท่ีปุ่มในเว็บต้องไล่
Gradient เดน่ ๆ เพื่อให้ปุ่มดนู นู และคนมองเหน็ ไดง้ า่ ย

บทที่ 10 การออกแบบส่วนติดตอ่ ผูใ้ ช้ 119

รปู ที่ 10.5 ตัวอยา่ งการดไี ซน์เวบ็ แบบ Flat Design – เว็บไซต์ Mediatemple.net
อย่างไรก็ตาม บางคนมองว่า Flat Design อาจดูธรรมดาเกินไป หรือดูไม่มีความลึกในงานดีไซน์
จึงมีบางส่วนท่ีดีไซน์เป็นแนว Almost Flat Design คือ ไม่ได้เรียบ ๆ ไปหมด แต่บางส่วนมีการใช้
Gradient มาชว่ ยทาให้ดเู ดน่ ข้ึน หรอื มกี ารใช้รูปถ่ายจริงร่วมกับปุม่ แบบ Flat สรา้ งความแปลกใหม่

รปู ท่ี 10.6 ตวั อย่างงานดีไซน์แบบ Long Shadow – รปู ประกอบจากเวบ็ ไซต์ unlimitedtricks.com
3. Material Design ซ่งึ เปน็ หลกั ท่ีใชด้ ไี ซน์ผลิตภณั ฑ์ (Product) ในเครือ Google ท้งั หมด โดย

เนน้ การแสดงความลึกของส่งิ ตา่ ง ๆ ด้วยแสงเงา เลียนแบบเงาของจริง
กเู กลิ เรยี ก Material Design วา่ เปน็ "ภาษาของการออกแบบ" หรอื visual language ท่ีรวบรวม

"หลกั การออกแบบทดี่ ี" ไว้ด้วยกนั โดยใชเ้ ปน็ แนวทางการออกแบบชดุ เดยี วทใี่ ชไ้ ด้ข้ามอปุ กรณร์ องรับการ

บทท่ี 10 การออกแบบส่วนติดต่อผูใ้ ช้ 120

ปอ้ นข้อมูลหลายแบบ ไมว่ ่าจะเป็น จอสมั ผสั สง่ั งานด้วยเสียง หรอื จะเป็นเมาส์และคยี บ์ อร์ด

หลักการออกแบบ (design principle) ของ Material Design

1) ใช้หลักการเลียนแบบ "วัสดุ" (material) ในโลกความเป็นจริง เน้นการใช้พ้ืนผิว (surface) และ
ขอบ (edge) ใช้แสงเงา-ภาพเคลื่อนไหวเหมือนกบั แสงเงา-การเคลอ่ื นไหวของวตั ถุเชิงกายภาพ

2) เป็นการออกแบบที่ "ต้ังใจนาเสนอ" (intentional) ใช้วิธีการนาเสนอแบบเดียวกับส่ิงพิมพ์
กระดาษเชน่ ฟอนต์ ท่วี า่ ง สีสนั ภาพประกอบ

3) แสดงการเคลอื่ นไหว (motion) เพื่อบอกความหมาย (meaning) ของการกระทา

รูปที่ 10.7 หลกั การออกแบบของ Material Design

รปู แบบการโตต้ อบดว้ ย UI

1) การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction: NLI) การโต้ตอบด้วยภาษา
มนุษย์ เป็นการโต้ตอบโดยผู้ใช้งานจะใช้ภาษามนุษย์ หรือภาษาธรรมชาติ เช่น ภาษาเขียน หรือเสียงเป็น
ข้อมูลนาเข้า (input) ไปยังระบบ และระบบจะประมวลผลกลับมาเป็นข้อมูลแสดงผล (output) การ
โต้ตอบประเภทน้ีส่วนใหญ่จะถูกนามาใช้ในเทคโนโลยีด้านปัญญาประดิษฐ์ (Artificial Intelligent: AI)
เช่น Siri ทีส่ ามารถใชง้ านได้ในระบบปฏบิ ตั กิ าร iOS

2) การโต้ตอบด้วยคาสั่ง (Command Language Interaction: CLI) หรือ Command เป็น
การโต้ตอบโดยผู้ใช้งานจะต้องใช้คาส่ังท่ีเป็นตัวอักษร (String) ผ่านคีย์บอร์ดสาหรับเป็นข้อมูลนาเข้าสู่
ระบบ และระบบจะแสดงขอ้ มลู นาออกผ่านหน้าจอ เชน่ Command Line Interface

บทที่ 10 การออกแบบส่วนตดิ ต่อผ้ใู ช้ 121

รูปที่ 10.8 Command Line Interface
3) การโต้ตอบด้วยกราฟิก (Graphics User Interfaces: GUI) เป็นการโตต้ อบทีผ่ ้ใู ชง้ านจะมี
ปฏิสมั พนั ธ์กบั วัตถุ (Objects) ทสี่ ามารถมองเห็น ได้ยนิ หรอื สมั ผสั ได้ เชน่ ภาพกราฟิก ไอคอน การ
เคลือ่ นไหว

รปู ที่ 10.9 การโต้ตอบด้วยกราฟกิ

บทที่ 10 การออกแบบสว่ นตดิ ต่อผ้ใู ช้ 122

ส่วนตดิ ต่อผใู้ ช้งานแบบกราฟกิ (Graphics USER Interface: GUI)

แนวคดิ ดา้ นการจัดการสว่ นติดต่อผูใ้ ช้งานด้วยกราฟิก เปน็ การสร้างสว่ นตดิ ตอ่ ผ้ใู ชง้ านสาหรับ
ติดต่อสื่อสารระหวา่ งผู้ใชง้ านกับเครอื่ งคอมพิวเตอรโ์ ดยผา่ นทางภาพทเี่ ข้าใจได้งา่ ยแทนการพมิ พค์ าสัง่
โดยตรงเพอ่ื ให้คอมพิวเตอรท์ างานตามทต่ี อ้ งการ การใช้งานผ่านระบบ GUI เชน่ การใช้เมาสก์ ดเลอื ก
ไอคอน (Icon) หรือปุ่มคาส่งั ทตี่ อ้ งการ หรือการเลือกคาสง่ั ตามรายการท่อี ยูใ่ นเมนูประเภทตา่ ง ๆ ซง่ึ
ซอฟต์แวร์เตรียมไว้ใหแ้ ล้ว ขอ้ ดีของส่วนตดิ ต่อผูใ้ ช้งานแบบกราฟกิ ภาพทเ่ี ป็นสัญลักษณ์สามารถเขา้ ใจได้
ง่ายกว่าตัวอักษร ภาพทเ่ี ป็นสัญลักษณส์ ามารถทาใหเ้ กิดการเรยี นรไู้ ดเ้ รว็ ขน้ึ

รูปที่ 10.10 การเรยี นรจู้ ากภาพสญั ลักษณ์

จากรูปที่ 10.10 มนุษย์สามารถเรียนรู้และจดจาจากภาพสัญลกั ษณ์ได้ดี เนื่องจากภาพสัญลกั ษณ์
เป็นการออกแบบรูปภาพที่ใกล้เคียงกับลักษณะจริงของส่ิงที่เราต้องการส่ือ เช่น สัญลักษณ์รูปบ้าน เป็น
ไอคอนท่ีสื่อถึงหน้าหลัก (Homepage) เป็นต้น แตภ่ าพสัญลักษณ์จะลดทอนรายละเอียดของภาพให้น้อย
ทสี่ ุดเพือ่ ง่ายต่อการจดจาและออกแบบ นอกจากนี้ มนษุ ยส์ ามารถจดจาภาพได้ดกี วา่ ตัวอักษร

ลักษณะของส่วนตดิ ต่อผใู้ ชง้ านแบบกราฟิก

1) การนาเสนอสิ่งท่ีมีความซับซ้อน (Sophisticated Visual Presentation) การนาเสนอภาพ คือ
การสร้างส่วนติดต่อผู้ใช้งานท่ีทาให้ผู้ใช้งานสามารถรับรู้ผ่านการมองเห็นหน้าจอ โดยการนาเสนอความ
ซับซ้อนของภาพกราฟิกจะต้องใช้เส้น ภาพวาด สัญลักษณ์ ซ่ึงอาจใช้รูปแบบตัวอักษร สี และขนาดท่ีมี
ความแตกตา่ งกัน หรือสามารถนาเสนอข้อมูลผ่านภาพถ่ายภาพเคล่ือนไหว หรือวิดโิ อส่วนตดิ ตอ่ ผู้ใชง้ านท่ี
สามารถส่ือสารผ่านกราฟิก น้ันจะมีหน้าต่าง (Windows) เมนู (Menu bar,pull-down, pop-up,
cascading) สัญลักษณ์หรือไอคอน (Icon) ส่วนรับข้อมูลนาเข้า (text box, list box, combination
box, scroll bars, button) โดยวัตถุประสงค์ของรูปแบบการนาเสนอส่ิงที่มีความซับซ้อนคือเพื่อแสดง
ภาพใหผ้ ้ใู ช้งานสามารถรับรู้ เขา้ ใจความหมายได้อย่างถกู ตอ้ ง ชัดเจนและสมจริงทสี่ ดุ

บทท่ี 10 การออกแบบส่วนตดิ ต่อผู้ใช้ 123

2) การโต้ตอบแบบเลือกและคลิก (Pick-and-Click Interaction) ส่วนติดต่อผู้ใช้งานแบบกราฟิก
จะต้องคาถึงถึงปฏสิ ัมพันธ์ที่ผูใ้ ช้งานจะมตี ่อระบบ โดยส่ิงท่ีผูใ้ ช้ต้องแสดงความต้องการใช้งานของตนอย่าง
แรก คือ การเลือก (Pick) จากนั้นเมื่อผู้ใช้งานต้องการสื่อสารกับระบบว่าเขาได้เลือกแล้วจะต้อง คลิก
(Click) โดยการเลือกและการคลิกเป็นปฏิสัมพันธ์พ้ืนฐานท่ีผู้ใช้งานจะกระทากับส่วนติดต่อผู้ใช้งาน
โดยมากจะใช้ผา่ นพอยเตอร์ (Pointer) เมาสห์ รอื คียบ์ อร์ด

3) การใช้วตั ถุ (Object Orientation) ส่วนตดิ ตอ่ ผใู้ ชง้ านแบบกราฟิกจะประกอบด้วยวตั ถุ (Object)
และปฏสิ ัมพนั ธ์ (Action) โดยวตั ถุคือสิ่งที่ผู้ใช้งานสามารถมองเห็นไดบ้ นหน้าจอ ซึ่งวัตถุต่าง ๆ จะต้องถูก
ผสมผสานให้กลมกลืนเป็นหน่ึงเดียว การออกแบบที่ดีจะทาให้ผู้ใช้งานสามารถโฟกัสไปท่ีวัตถุเหล่าน้ันได้
และจะทาใหส้ ามารถเขา้ ใจวิธกี ารมีปฏสิ ัมพนั ธ์กับวัตถุเหล่าน้ันได้

สว่ นตดิ ตอ่ ผใู้ ช้ของเว็บไซต์ (The Web User Interface)

Web User Interface หรอื สว่ นติดต่อผใู้ ช้งานสาหรับเว็บ เริ่มมีการใช้กราฟกิ มากข้นึ เร่อื ย ๆ โดย
การออกแบบส่วนติดต่อผู้ใช้งานสาหรับเว็บ คือ การออกแบบการนาทาง (Navigation) และการนาเสนอ
ข้อมูลในเว็บนั้น ๆ โดยการออกแบบส่วนติดต่อผู้ใช้งานสาหรับเว็บที่ดีจะต้องออกแบบให้วัตถุแต่ละอย่าง
ในหน้าเว็บนั้นเกิดความสมดุล ไม่ว่าจะเป็นเมนู เนื้อหา เอกสาร และกราฟิกอ่ืน ๆ ท่ีจะต้องมีความ
กลมกลืน เช่ือมโยงกันเป้าหมายของการออกแบบส่วนติดต่อผู้ใช้งานสาหรับเว็บ คือ การสร้างระดับช้ัน
ของเมนูแต่ละเพจท่ีเป็นธรรมชาติตามความต้องการดูข้อมูลของผู้ใช้งานจริง ๆ เช่น การออกแบบการนา
ทาง (Navigation) ในท่ีนี้ หมายถึงการนาทางของการรับข้อมูลจากหน้าจอท่ีผู้พัฒนาต้องสร้างการนาทาง
ทด่ี เี พื่อให้ผู้ใช้งานรับข้อมลู ไปตามลาดบั ทค่ี วรเป็น

บทที่ 10 การออกแบบส่วนติดตอ่ ผ้ใู ช้ 124

รปู ที่ 10.11 การออกแบบการนาทางทีไ่ มเ่ หมาะสม

รูปท่ี 10.12 การออกแบบการนาทางทเ่ี หมาะสม
จากรูปท่ี 10.11 พบวา่ ลาดับการกรอกข้อมูลของผู้ใช้งานจะไม่เปน็ ทิศทาง เน่ืองจากผู้พัฒนาจัด
วางตาแหน่งขององค์ประกอบต่าง ๆ อย่างไม่เป็นระเบียบ ไม่จัดกลุ่ม ซึ่งแม้ว่าผู้ใช้งานจะสามารถกรอก
ข้อมูลได้แต่ทิศทางในการอ่านจะไม่เป็นเชิงเส้นอาจะทาให้เกิดความสับสนได้ ตรงข้ามกับรูปท่ี 10.12
พบว่าข้อมลู นั้นมกี ารจดั กลุม่ ไว้ สง่ ผลใหผ้ ู้ใช้งานสามารถจดั ลาดับการมองข้อมูลได้ง่ายกวา่

ประเภทของ UI

การแบ่งประเภทของ UI น้ันยังไม่มีเกณฑ์ท่ีแน่ชัด บ้างก็แบ่งเป็นประเภทฮาร์ดแวร์และประเภท
ซอฟตแ์ วร์ บ้างก็แบง่ ตามประเภทของส่ือดิจิทัลที่เกี่ยวข้อง บ้างก็แบ่งตามชนิดของประสาทสัมผัสท่ีผู้ใช้ใช้
รับรู้ ลักษณะนี้ทาให้ประเภทของ UI มีหลากหลายและทับซ้อนกันอยู่มาก อีกท้ังยังมี UI ประเภทใหม่ถูก
คิดค้นพัฒนาออกมาเรื่อย ๆ ด้วย ในท่ีนี้จะยกตัวอย่าง UI บางประเภทท่ีเป็นพื้นฐานท่ีใช้แพร่หลายใน
ปัจจุบันและท่ีแม้จะยังไม่แพร่หลายนักแต่ก็กาลังเป็นท่ีสนใจในแวดวงนักวิจัยพัฒนาและผู้รักนวัตกรรม
ดังต่อไปนี้

▪ Text-based/Textual UI : มักหมายความถึง UI ในยุคของ Command Line Interface
(CLI) ก่อนหน้าท่ีจะเปลี่ยนมาเป็นยุคของ Graphic user interface : GUI โดยใน UI ประเภทน้ีจะเน้น
การสื่อสารและแสดงผลด้วยข้อความตัวอักษร

บทท่ี 10 การออกแบบสว่ นติดต่อผใู้ ช้ 125

รูปที่ 10.13 ตวั อย่าง Text based UI
▪ Visual UI : คือ ลักษณะของ UI ที่ใช้หรือเก่ียวข้องกับรูปภาพ เช่น ระบบปฏิบัติการท่ี
แสดงผลแบบ GUI กล้องดิจิทัลที่รับอินพุตเป็นรูปภาพ 2 มิติ หน้าจอสมาร์ทโฟนที่แสดงเอาต์พุตเป็น
รูปภาพสองมิติ เทคโนโลยีท่ีเกี่ยวข้องกับการแสดงภาพสามมิติหรือก่ึงสามมิติ เช่น โฮโลแกรม เทคโนโลยี
projection mapping เทคโนโลยีความเป็นจริงเสมือน (Virtual reality) เทคโนโลยีความเป็นจริงเสริม
(Augmented reality) เทคโนโลยีกล้องวดิ ีโอ 360 องศา เปน็ ตน้

รูปท่ี 10.14 ตวั อย่าง Visual UI
▪ Voice/Audio UI คือ ลักษณะของ UI ที่ใช้หรือเก่ียวข้องกับเสยี ง เช่น ฟีเจอร์การส่ังงานดว้ ย
เสียงบนสมาร์ทโฟน เทคโนโลยีการสร้างเสียงท่ีสมจริงสาหรับแว่นความเป็นจริงเสมือนหรือ Virtual
Reality headset อย่าง Facebook Oculus Rift เป็นต้น

บทที่ 10 การออกแบบส่วนตดิ ต่อผ้ใู ช้ 126

รูปที่ 10.15 ตวั อย่าง Voice UI
▪ Natural language UI คือ ลักษณะของ UI ท่ีอนุญาตให้ผู้ใช้พิมพ์หรือพูดเพื่อโต้ตอบหรือ
ส่ังงานคอมพวิ เตอร์ไดด้ ้วยภาษาธรรมชาติ (Natural Language) ท่ีเราใชแ้ ชตหรือพูดคุยในชีวิตประจาวัน
อยู่แล้ว ตัวอย่างของ UI ประเภทนี้คือ Chatbot หนึ่งในเทคโนโลยีร้อนแรงแห่งปี 2016 ท่ีทั้ง Microsoft,
Facebook และ Google ต่างก็ประกาศเป็นฟีเจอร์ใหม่ เพื่อให้ผู้ใช้สามารถสนทนาโต้ตอบกับ Chatbot
ไดอ้ ยา่ งเป็นธรรมชาติเสมอื นกาลังแขตกับคนจริง ๆ

รปู ที่ 10.16 ตวั อยา่ ง Natural Language UI (Chatbot ของ Facebook)

บทที่ 10 การออกแบบส่วนตดิ ตอ่ ผู้ใช้ 127

▪ Tangible UI หมายถึง UI ที่อนุญาตให้ผู้ใช้มีปฏิสัมพันธ์กับข้อมูลท่ีเป็นดิจิทัลได้ ผ่านสื่อ
กลาง่ีเป็นวัสดุหรือวัตถุทางกายภาพที่มีตัวตนสามารถจับต้องได้จริง โดยคาดหวังว่ารูปธรรมทางกายภาพ
เหล่าน้ีจะช่วยสนับสนุนการมีปฏิสัมพันธ์ การเรีนรู้และการมีส่วนร่วมให้กับผู้ใช้ได้ตัวอย่างเช่น
RoboTable [64] ที่แทนที่ตวั ละครดิจิทัลบางส่วนในเกม RoboPong ด้วยหุ่นยนต์จริงท่เี คลอ่ื นไหวอยู่บน
โต๊ะเลน่ เกมได้ เป็นต้น

รปู ท่ี 10.17 ตวั อย่าง Tangible UI
▪ Touch/Tactile UI หมายถึง UI ท่ีมุ่งเน้นประสาทสัมผัสด้านการสัมผัส (Sense of touch)
ของน้ิวมือผู้ใช้บนพื้นผิวหน่ึง ๆ ตัวอย่างเช่น หน้าจอสัมผัสของสมาร์ทโฟนและแท็บเล็ตคอมพิวเตอร์ที่
สามารถแต่จอเพอื่ สั่งงานได้, Cicret [21] กาไลอัจฉริยะท่ีฉายภาพหน้าจอสมาร์ทโฟนลงบนท่อนแขนของ
ผ้ใู ช้ เปลีย่ นทอ่ นแขนนน้ั ให้กลายเปน็ เสมอื นหนา้ จอท่ีสงั่ งานด้วยการสมั ผสั ได้ เปน็ ต้น

รูปที่ 10.18 ตวั อยา่ ง Touch/Tactile UI

บทที่ 10 การออกแบบสว่ นตดิ ตอ่ ผู้ใช้ 128

▪ Haptic UI เป็นประเภท UI ท่ีมุ่งเน้นประสาทสัมผสั ดา้ นการสัมผสั หรือการรู้สึกผ่านผวิ สัมผัส
คล้ายกับ Tactile UI แต่ Haptic UI จะไม่โฟกัสเฉพาะการสัมผัสแตะต้องระหว่างน้ิวมือและพื้นผิว
(Tactile) แต่รวมถึงการสัมผัส การเคลื่อนไหว หรือแรงอ่ืน ๆ ที่รู้สึกได้ผ่านผิวหนังและกล้ามเน้ือด้วย
(Kinesthetic) ตัวอย่างเช่น ระบบส่ันในโทรศัพท์มือถือ 3D haptic controller ท่ีทาหน้าที่คล้ายเมาส์
สามมิติ โดยในการควบคุมตัวละครในเกมเมื่อตัวละครเดินไปชนกาแพง คอนโรลเลอร์ก็จะสร้างแรงต้าน
ขึ้นทาให้ไม่สามารถขยับคอนโทรลเลอร์ต่อไปข้างหน้าได้ เสมือนคอนโรลเลอร์เองก็กาลังชนกาแพงอยู่
จริง ๆ เปน็ ต้น

รปู ที่ 10.19 ตวั อย่าง Haptic UI
▪ Brain UI หรือท่ีนิยมเรียกว่า Brain Computer Interface (BCI) หมายถึง UI ที่มุ่งเน้นการ
เช่ือมต่อระหว่างคลื่นไฟฟ้าสมองของผู้ใช้กับคอมพิวเตอร์ประมวลผล เช่น อ่านคลื่นสมองของผู้ใช้แล้ว
นามาแปลงเปน็ คาสั่งสาหรับควบคมุ ไฟในบ้านให้เปิดปิดตามทคี่ ดิ หรือในทางตรงข้าม ก็นาข้อมลู บางอย่าง
มาแปลงเป็นคลื่นไฟฟ้าสมองแล้วส่งไปให้ที่สมองของผู้ใช้ เป็นต้น ด้วยความก้าวหน้าและพัฒนาการของ
เคร่ืองอ่านคล่ืนสมองท่ีในระยะหลังมีขายเป็นอุปกรณ์สวมใส่ขนาดเล็กพร้อมชุดพัฒนาซอฟต์แวร์ทาให้
BCI เร่ิมเป็นที่นิยมและแพร่หลายมากข้ึน

บทที่ 10 การออกแบบส่วนตดิ ตอ่ ผู้ใช้ 129

รปู ท่ี 10.20 ตวั อย่าง Brain UI
▪ Multimodal UI หมายถึง UI ที่รวมเอา UI หลาย ๆ ประเภทเข้าด้วยกัน ตัวอย่างหนึ่งท่ีเห็น
ได้ชัดคือ สมาร์โฟนและแท็บเล็ตคอมพวิ เตอร์ท่ีมีท้ัง Visual UI ท่ีใช้กล้องและจอแสดงภาพมี Voice UI ท่ี
ใชไ้ มโครโฟนและลาโพง มี Natural language UI ทใ่ี ช้แอปทม่ี ีคณุ สมบัตขิ อง Chatbot และมี Touch UI
ของหน้าจอสัมผสั

กระบวนการหลกั ในการออกแบบส่วนตดิ ตอ่ ผู้ใชง้ าน

หลักการออกแบบส่วนตดิ ตอ่ ผ้ใู ชง้ าน คอื
1) การออกแบบสว่ นประสานการใชง้ านระหว่างผู้ใช้กับระบบ
2) มุง่ เนน้ ถงึ การปฏสิ มั พันธร์ ะหว่างมนุษย์กับคอมพิวเตอร์ควรออกแบบการโตต้ อบเป็นสาคัญ
3) เพื่อดึงดูดความสนใจแก่ผู้ใช้ และควรเลือกใช้ส่ืออุปกรณ์ท่ีเหมาะสมกับการปฏิสัมพันธ์
ระหวา่ งมนุษยก์ บั คอมพวิ เตอร์
ทีมพฒั นา (The Design Team) จะตอ้ งมีความเชย่ี วชาญดา้ นตา่ ง ๆ ดังน้ี
1) การพฒั นา (Development) สาหรบั พฒั นาระบบหรอื เว็บไซตท์ ีต่ รงตามส่วนตดิ ต่อผู้ใช้งานที่
ออกแบบไว้
2) มนุษยศาสตร์ (Human factors) สาหรับใช้ในการวิเคราะห์พฤติกรรมและคุณลักษณะของ
ผใู้ ชง้ าน

บทที่ 10 การออกแบบสว่ นตดิ ต่อผูใ้ ช้ 130

3) การออกแบบ (Visual design) เพื่อใช้ออกแบบการจัดวางตาแหน่งขององค์ประกอบการใช้
กราฟิก การใชส้ ที ีเ่ หมาะสมและสวยงาม

4) การประเมินการใช้งาน (Usability assessment) เพ่ือใช้ในการประเมินความเหมาะสมของ
ส่วนตดิ ตอ่ ผู้ใช้งานวา่ ตรงตามความต้องการของผงู้ านและความตอ้ งการของระบบหรอื ไม่

5) การทา เอกสาร (Documentation) เพื่อจัดทา เอกสารสาหรับใช้เป็นหลักฐานที่แสดง
รายละเอียดในการพฒั นา เพ่ือใช้ในการตรวจสอบความถูกตอ้ งของการออกแบบและพัฒนาและเพ่ือใช้ใน
การส่อื สารระหวา่ งทมี งานพฒั นา

6) การฝึกฝน หรือนาเสนอการใชง้ าน (Training) เพ่ือนาไปใชใ้ นการทดลองใชง้ าน และส่งมอบ
งานให้แก่ผใู้ ช้งาน

กระบวนการออกแบบสว่ นตดิ ตอ่ ผใู้ ช้งาน

กระบวนการออกแบบ UI ประกอบด้วย 12 ข้ันตอน คอื
1) การทาความรจู้ ักผูใ้ ชง้ าน (Know your user or client)
2) การทาความเข้าใจการทางานของระบบ (Understand the business function)
3) การพัฒนาระบบเมนูและการนาทาง (Develop system menu and navigation)
4) การเลอื กหน้าต่างที่เหมาะสม (Select the proper kinds of windows)
5) การเลือกเครื่องมือในการควบคุมการใช้งานท่ีเหมาะสม (Select the proper device-
based controls)
6) การเลือกเครื่องมือควบคุมการแสดงผลบนหน้าจอท่ีเหมาะสม ( Select the proper
screenbased controls)
7) การเตรียมเนื้อหาหรอื ข้อความทชี่ ดั เจน (Write clear text and message)
8) การสร้างส่วนตอบรับฟีดแบ็กและแนวทางทางการใช้งาน (Provide effective feedback
and guidance and assistance)
9) การสร้างกราฟิก ไอคอน และภาพท่ีสื่อความหมาย (Create Meaningful Graphics,
Iconsand Images
10) การเลอื กใชส้ ที ี่เหมาะสม (Choose the proper colors)
11) การจดั การเลย์เอาท์ หนา้ ตา่ ง และเพจ (Organize and Layout Windows and Pages)
12) การทดสอบ (Test, Test, and Retest)

บทที่ 10 การออกแบบสว่ นตดิ ตอ่ ผใู้ ช้ 131

การทาความรู้จักผู้ใช้งานและการทาความเข้าใจการทางานของระบบเป็นกระบวนการแรกท่ี
ผู้พัฒนาจะต้องนามาปฏิบัติ เน่ืองจากเป็นประบวนการวิเคราะห์ว่าส่วนติดต่อผู้ใช้งานที่จะออกแบบน้ัน
ต้องตอบโจทย์อะไร และเพื่อนามาใช้ในการร่างภาพการแสดงผล และตรวจสอบในภายหลังเม่ือได้ข้อมูล
หลักในการพัฒนา ถัดมาจะเป็นส่วนของการออกแบบสกรีน หรือหน้าจอ ซ่ึงเป็นภาพลักษณ์ท่ีผู้ใช้งานจะ
มองเห็นเมื่อเข้าใช้งานสว่ นตดิ ตอ่ ผ้ใู ช้งาน ในกระบวนการส่วนน้ีจะประกอบดว้ ย การพัฒนาระบบเมนูและ
การนาทาง การเลือกหน้าต่างที่เหมาะสม การเลือกเครื่องมือในการควบคุมการใช้งานและการแสดงผลที่
เหมาะสม และการเตรียมเนื้อหาหรอื ข้อความที่ชดั เจน

เม่ือส่วนติดต่อผู้ใช้งานไดร้ บั การออกแบบองค์ประกอบหลกั ในการแสดงผลแลว้ ถัดมาจะเป็นการ
ออกแบบความสวยงามให้แก่ส่วนติดต่อผู้ใช้งาน โดยจะใช้หลักการของการใช้กราฟิกและสีเพอื่ ทาให้ส่วน
ติดต่อผู้ใช้งานน้ีสวยงามและดึงดูดผู้ใช้งาน โดยกระบวนการน้ีจะต้องสร้างต้นแบบของส่วนติดต่อผู้ใช้งาน
ออกมา โดยอาจะมีส่วนตอบรับฟีดแบ็กและแนวทางทางการใช้งาน เพื่อนาไปใช้ในการทดสอบเบ้ืองต้น
เมอื่ ผา่ นกระบวนการออกแบบแล้วจงึ สามารถนาไปพฒั นาเปน็ ระบบหรือเว็บไซตไ์ ด้

บทท่ี 10 การออกแบบสว่ นตดิ ต่อผใู้ ช้ 132

แบบฝกึ หัดทา้ ยบท

1. ส่วนตดิ ตอ่ ผูใ้ ชง้ านคืออะไร และมีความสาคัญอย่างไร
2. จงอธิบายถงึ ปัญหาของส่วนตดิ ตอ่ ผ้ใู ชง้ านที่พบได้ในปจั จุบนั
3. ส่วนตดิ ตอ่ ผใู้ ช้งานแบ่งออกเป็นก่ียคุ แตล่ ะยคุ มีความโดดเดน่ อยา่ งไร
4. การออกแบบสว่ นติดตอ่ ผ้ใู ช้แบบ Skeuomorphic คือการออกแบบอยา่ งไร ยกตวั อย่างประกอบ
5. การออกแบบส่วนติดตอ่ ผใู้ ช้แบบ Flat Design คอื การออกแบบอย่างไร ยกตวั อยา่ งประกอบ
6. การออกแบบส่วนติดตอ่ ผ้ใู ชแ้ บบ Flat Design และ Almost Flat Design ตา่ งกนั อยา่ งไร
7. การออกแบบสว่ นติดต่อผใู้ ช้แบบ Material Design คอื การออกแบบอย่างไร ยกตัวอยา่ งประกอบ
8. ให้ยกตัวอย่างส่วนติดต่อผู้ใช้งานจากระบบหรือเว็บไซต์มา 1 อัน โดยวิเคราะห์ว่าส่วนติดต่อผู้ใช้งาน
นน้ั เปน็ รปู แบบใด พรอ้ มอภปิ รายขอ้ ดี และขอ้ เสีย
9. ส่วนติดต่อผใู้ ชง้ านแบบกราฟิกมขี อ้ ดี และขอ้ เสยี อยา่ งไร
10. ให้ออกแบบส่วนตดิ ต่อผู้ใชง้ านทเี่ ป็นการสมคั รอเี มล ที่มีการใชก้ ราฟิก และการนาทางข้อมูลที่
เหมาะสม

บทท่ี 11
การทดสอบส่วนติดต่อผู้ใชง้ าน

การออกแบบส่วนติดต่อผู้ใช้ที่มีประสทิ ธภิ าพ คือ การออกแบบส่วนติดตอ่ ผ้ใู ชท้ ่ีผู้ใชส้ ามารถใชง้ านได้
อยา่ งถกู ตอ้ ง และพงึ พอใจ ดงั นนั้ กระบวนการทมี่ ีความสาคัญมากในการออกแบบสว่ นติดตอ่ ผู้ใช้ คอื
กระบวนการทดสอบ ในบทน้นี าเสนอความสาคญั ขอบเขตและการสรา้ งการทดสอบสว่ นติดตอ่ ผใู้ ช้

แนวคิดของ Lean

Lean คือ แนวคิดท่ีให้ความสาคัญกับการลดทอนสิ่งท่ีไม่จาเป็น หลักการของ Lean นั้นจะมุ่งให้
ความสาคัญกับการสร้างคุณคา่ ให้กบั ผู้บริโภคหรอื ผู้ใช้ให้มากท่ีสดุ โดยใช้ทรพั ยากรเท่าทจี่ าเปน็ เทา่ น้ัน

แนวคิดเรื่อง Lean นี้มีพื้นฐานมาจากระบบการจัดการการผลิตของโตโยต้า ( Toyota
ProductionSystem) ที่นาพาโตโยตา้ ส่คู วามสาเรจ็ อนั ยิ่งใหญใ่ นวงการยานยนต์

Validated Learning เรียนรู้ให้แนใ่ จว่าผ้ใู ช้งานต้องการอะไร
กระบวนการของ Lean ให้ความสาคัญกับการเรียนรู้เป็นอย่างมาก ผู้สร้างสรรค์ต้องออกจาก
สถานท่ีทางานของตนเองเพอื่ ไปพบปะพูดคุยกับกลุ่มลูกค้าจริง เช็คดวู ่าความตอ้ งการของพวกเขากับสิ่งที่
ตนคิดนั้นตรงกันหรือไม่ นอกเหนือจากความเข้าใจผู้บริโภคที่เพิ่มมากขึ้นแล้ว ผู้สร้างสรรค์อาจได้ข้อมูล
ใหม่ ๆ ทีไ่ ม่เคยรมู้ ากอ่ นมาเป็นแนวทางสาหรับพฒั นาผลิตภณั ฑ์ตอ่ ไปดว้ ย

รูปที่ 11.1 กระบวนพฒั นาตามแนวคดิ ของ Lean

บทท่ี 11 การทดสอบสว่ นตดิ ต่อผู้ชง้ าน 134

จากรูปที่ 11.1 กระบวนการพัฒนาตามแนวคิดของ Lean จะประกอบด้วย
1) Learn การเรยี นรู้ ในการพฒั นาระบบหรือ Product ใด ๆ จดุ เริม่ ตน้ ผู้พฒั นาจะต้องเรียนรู้
ขอ้ มูลทีเ่ กย่ี วข้องกบั สิง่ ท่ตี นจะพัฒนา เมื่อเรยี นร้แู ลว้ สิง่ ที่จะเกดิ ขึน้ คือ แนวคิดหรือ Idea
2) Build การพฒั นา เปน็ ขนั้ ตอนทจี่ ะนาแนวคดิ ทไ่ี ด้จากการเรียนรู้มาพฒั นาระบบ ซ่ึงจะไดเ้ ปน็
Product
3) Measure การวดั ผล เป็นการทดสอบว่า Product ที่ไดจ้ ากการพฒั นาน้ันมคี วามถกู ตอ้ งหรือ
เหมาะสมมากเพียงใด เม่อื นาผลการทดสอบนั้นมาผา่ นการวเิ คราะห์จะทาใหเ้ กดิ ข้อมูล หรอื Data

จากรูปที่ 11.1 จะเห็นว่ากระบวนการพฒั นาตามแนวคิดของ Lean น้ันเป็นวงจร ซึ่งจะเห็นได้ว่า
เมือ่ ผ้พู ฒั นาทาการทดสอบ Product และวิเคราะหผ์ ลจะทาให้เกดิ ข้อมลู สาหรับนาไปเรียนรู้ใหม่ ดงั น้ันจะ
เหน็ ได้ว่ากระบวนการทดสอบเปน็ กระบวนการท่มี คี วามสาคญั มากในการพัฒนาสงิ่ ใด ๆ

Usability Testing

Usability Testing คือ การทดสอบการใช้งาน โดยการนา Product หรือในท่ีนี่คือส่วนติดต่อ
ผู้ใช้งานไปให้กลุ่มคนท่ีคาดว่าจะเป็น target users ลองใช้งาน โดยการกาหนดเป้าหมายให้เค้าทาให้
สาเร็จเป็นข้อ ๆ แล้วเฝ้าดูและสังเกตวา่ ผใู้ ช้มวี ิธีการคิด การตัดสินใจ การใช้งานสว่ นติดต่อผู้ใชง้ านของเรา
อย่างไร ท่ีจะทาให้เป้าหมายน้ันสาเร็จ ดงั น้ัน Usability Testing เป็นข้ันตอนท่ีจะ Measure และ Learn
ก่อนท่ีจะนาไปปรบั ปรุงส่วนติดตอ่ ผู้ใชง้ านเพือ่ ใชพ้ ัฒนาระบบจรงิ น่นั เอง

ความสาคญั ของ Usability Testing มีดงั น้ี
1) ทาได้ง่าย ในทีน่ ้หี มายถงึ ง่ายกวา่ การทดสอบประเภทอนื่ ๆ เชน่ Unit Testing ซ่งึ จะเปน็ การ
ทดสอบที่ตัวระบบ ดังนั้นผู้พัฒนาจะต้องพัฒนาระบบก่อนแล้วจึงจะทดสอบได้ ดังน้ัน การทดสอบการใช้
งานผ่านสว่ นติดต่อผูใ้ ช้จึงสะดวกในการออกแบบมากกว่า
2) ประหยดั คา่ ใช้จ่ายในระยะยาว นนั่ หมายถึงเม่อื ผู้พัฒนาทดสอบการใช้งานของส่วนตดิ ต่อผู้ใช้
ผู้พัฒนาจะสามารถแก้ไขปัญหาท่ีเกิดข้ึนก่อนนาไปพัฒนาระบบจริง ซึ่งประหยัดค่าใช้จ่ายท่ีต้องใช้แก้ไข
ระบบในภายหลังได้มากกวา่
3) ทาให้เราเข้าใจผู้ใช้มากขึ้น ซ่ึงเมื่อผู้พัฒนานาส่วนติดต่อผู้ใช้ท่ีได้รับการออกแบบไปให้
ผู้ใช้งานทดสอบจะทาให้เห็นถึงรูปแบบความเข้าใจและความพึงพอใจของผู้ใช้งาน ซ่ึงข้อมูลดังกล่าว
สามารถนามาใช้ในการพฒั นาการออกแบบต่อไปได้
4) ช่วยในการตดั สนิ ใจ และวางแผนการพฒั นา Product ได้ง่ายขึน้ หมายถงึ การนาผลการ
วเิ คราะหท์ ่ไี ด้จากการทดสอบมาใช้ในการตดั สนิ ใจปรับปรุงหรือเพมิ่ เตมิ สว่ นต่าง ๆ ไดส้ ะดวกขึ้น

บทท่ี 11 การทดสอบสว่ นติดต่อผู้ช้งาน 135

5) การทดสอบโดยวัดความพึงพอใจจากการออกแบบส่วนติดต่อผู้ใช้งาน ตรงกับทฤษฎีการ
ออกแบบโดยมีผู้ใช้เป็นศูนย์กลาง (User-Centered Design: UCD) ซ่ึงเปน็ ทฤษฎที ่ีผู้พัฒนาและออกแบบ
Product ใด ๆ จะต้องคานึงถึงผู้ใช้เป็นปัจจัยหลักในการออกแบบ ซึ่งส่วนติดต่อผู้ใช้ท่ีจะนาไปใช้ในการ
พัฒนาระบบจริงน้ันจะสอดคล้องกับรูปแบบความเข้าใจของผู้ใช้ และจะทาให้ผู้ใช้มีความพึงพอใจและ
สามารถใช้งานระบบไดอ้ ย่างมีประสทิ ธิภาพ

ข้นั ตอนการทา Usability Testing
1) ต้งั เปา้ หมายในการทดสอบ คอื การกาหนดวัตถุประสงคใ์ นการทดสอบ
2) จัดหาผทู้ จ่ี ะมาทาการทดสอบ คือ การกาหนดผใู้ ชง้ านเป้าหมายท่ใี ชใ้ นการทดสอบ
3) สรา้ งการทดสอบ คอื การสรา้ งแบบทดสอบ และเงอ่ื นไขในการวิเคราะห์
4) เร่ิมทดสอบ
5) สรุปผล คือ การนาผลการทดสอบมาวิเคราะห์ เพอ่ื หาข้อมลู ไปใชใ้ นการแก้ไขปรับปรงุ
6) แกไ้ ขปรับปรงุ เปน็ การนาข้อมูลท่ไี ดจ้ ากการวเิ คราะห์มาปรับปรุงสว่ นติดต่อผู้ใชก้ อ่ นนาไป
พัฒนาระบบจรงิ

การสรา้ งการทดสอบ
1) สร้างตัวอย่างงาน Interactive Prototype คือ การสรา้ งตวั งานท่ีจะนาไปใชใ้ นการทดสอบ
ซึง่ มี 2 รูปแบบ คอื

(1) Low-fidelity prototype คอื ตัวอยา่ งงานแบบหยาบ ๆ ท่ีทาขน้ึ มาเรว็ ๆ เช่น การ
sketch รปู ทว่ี าดดว้ ยดินสอ หรอื ใช้ wireframe ของเวบ็ กส็ ามารถทามาใช้ดู flow การใชง้ านของแอพ/
เวบ็ ได้

(2) Hi-fidelity prototype คือ ตัวอยา่ งงานที่มีรายละเอยี ดมากขึ้น เช่น screen ที่
ออกแบบไว้จาก Photoshop หรอื โปรแกรม Sketch มาทาเปน็ prototype ซึง่ อาจจะไมต่ อ้ งดไี ซน์ให้
ชดั เจนนกั แต่พอใหเ้ หน็ mood & tone ของโปรดัก และยังคงเน้นในเรื่องของ Flow การใช้งาน

2) สร้าง Usability Testing คือ การสร้างแบบทดสอบความพึงพอใจจากผู้ใช้งาน ซ่ึงเป็น
รปู แบบของแบบสารวจหรอื แบบสอบถามทใี่ ชง้ านตามหลกั สถิติทว่ั ไป ท่ีจะประกอบดว้ ยคณุ สมบัติของผใู้ ช้
ท่ีสามารถนาไปวิเคราะห์เป็นข้อมลู ได้ เช่น อายุ, เพศ, ระดับการศึกษา เป็นตน้ โดยเกณฑ์ที่ใช้ในการสร้าง
แบบทดสอบสาหรับการทดสอบความพึงพอใจของส่วนติดต่อผู้ใช้งานจะเป็นไปตามทฤษฎีของ Jacob
Nielsen ผูเ้ ชยี่ วชาญในการออกแบบ Web Usability

บทที่ 11 การทดสอบส่วนติดต่อผู้ช้งาน 136

10 เง่อื นไขทีใ่ ช้ทดสอบการใช้งาน UI
1) ระบบแสดงใหผ้ ใู้ ช้งานเห็นเสมอวา่ ตนกาลงั ทาอะไรอยู่ กาลังจะเกดิ อะไรข้ึน และให้ผล
ป้อนกลับในเวลาท่ีเหมาะสมหรอื ไม่
2) ระบบสามารถพูดภาษาเดยี วกันกบั ผู้ใชโ้ ดยมตี รรกะการใชง้ านทเี่ ปน็ ธรรมชาติ ไม่ใช้ภาษาที่
แปลกไปจากปรกตหิ รือไม่
3) ระบบสนับสนนุ การ Undo และ Redo หรือไม่
4) ระบบมีความสมา่ เสมอและเปน็ มาตรฐานไปทุก ๆ หนา้ จอของการออกแบบ ผใู้ ช้งานไม่
สับสนในเร่ืองการจดั วางหรือขนาดของตัวหนังสือหรอื ไม่
5) ระบบมีคาเตอื นใหร้ ะวังความผดิ พลาดทจ่ี ะช่วยป้องกันความผดิ พลาดหรือไม่ ระบบมกี ารตก
ลงใจซ้าอีกครง้ั เพื่อตรวจสอบความแน่นอนของการตดั สินใจของผใู้ ชห้ รือไม่ เช่น ท่านต้องการแก้ไขหรือไม่
ใหต้ อบ แก้ไข หรอื ไม่แกไ้ ข
6) ผใู้ ชง้ านตอ้ งใช้ความจาในการจดจาคาส่งั ตา่ ง ๆ ในระบบหรอื ไม่ ซง่ึ ระบบมสี ่วนประกอบ
หน้าจอ การออกคาส่ังปฏบิ ตั แิ ละส่วนตวั เลอื กมคี วามชดั เจน วิธีการใช้งานต้องเขา้ ถงึ ไดง้ ่ายและรับรู้ได้ง่าย
หรือไม่
7) มีความยืดหย่นุ สาหรบั ผใู้ ชง้ านหลากหลายกลมุ่ และมีประสทิ ธิผลในการทางานหรอื ไม่
8) การนาเสนอเน้อื หามีเรื่องทไี่ ม่เกี่ยวข้องหรือเรือ่ งทผ่ี ูใ้ ช้ต้องการใช้หรอื ไม่
9) ขอ้ ความแสดงความผดิ พลาดปรากฏในแบบตวั อักษรธรรมดาท่ีเข้าใจไดง้ ่าย ระบุปัญหาและ
บอกวิธแี ก้ไข ใหผ้ ใู้ ชง้ านสามารถแกไ้ ขได้เองได้หรอื ไม่
10) ระบบมีคูม่ ือที่อธิบายวิธกี ารใชง้ าน มกี ารแบ่งสารบญั ข้อมูลทีท่ าให้หางา่ ยเจาะจงไปยงั หนา้ ที่
ต่าง ๆ มีการเรียงลาดับอยา่ งเปน็ ระบบ และไม่มากจนเกินไปหรอื ไม่

การทดสอบ Usability แบบ DIY

ในต่างประเทศการทดสอบ Usability เป็นวิทยาศาสตร์แขนงหน่ึงท่ีสมัยก่อนต้องทาใน
ห้องปฏิบัติการเฉพาะที่สร้างห้องแยกไว้สาหรับให้ผู้สังเกตคอยดูการทดสอบได้ผ่านกระจกสองทาง คือ
กระจกท่ีมองจากด้านหนึ่งเป็นเป็นกระจกเงาธรรมดา แต่เม่ือมองจากอีกด้านจะเห็นเป็นกระจกใสท่ีมอง
ทะลุอีกฝั่งได้ และมีการต้ังกล้องวิดีโอบันทึกการทดสอบไว้ท้ังหมด ผู้เช่ียวชาญด้าน Usability จะเป็นคน
วางแผนและควบคุมการทดสอบทั้งหมด โดยมีการรวบรวมและคัดเลือกผู้ท่ีจะมาทดสอบอย่างเป็นระบบ
และคดั เลอื กมาเป็นจานวนมากพอท่ีจะได้ผลลัพธ์ซ่ึงสามารถนาไปวิเคราะห์ตอ่ ได้อยา่ งมนี ัยสาคัญทางสถติ ิ
ด้วยลักษณะทั้งหมดนี้ทาให้ค่าใช้จ่ายของการทดสอบ Usability หน่ึงคร้ังสูงถึงประมาณ 20,000-50,000
ดอลล่าร์สหรฐั เป็นสาเหตหุ น่งึ ทที่ าใหก้ ารทดสอบนถี้ กู ทาไม่บ่อยนกั ในสมัยกอ่ น แต่ในปี ค.ศ.1989 Jakob

บทที่ 11 การทดสอบสว่ นติดต่อผู้ช้งาน 137

Nielsen ที่ปรึกษาด้าน Usability ชื่อดังขอโลกได้เสนอแนวคิดว่าการทดสอบ Usability ไม่จาเป็นต้อง
สร้างห้องปฏิบัติการเฉพาะหรือเกณฑ์ผู้เข้าทดสอบไม่มากก็สามารถจาได้ผลลัพธ์ที่เหมือนกันด้วยราคาที่
ย่อมเยาว์ลง 4-5 เท่าตัวเหลือประมาณ 5,000-10,000 ดอลล่าร์สหรัฐ ต่อการทดสอบหนึ่งครั้งเท่าน้ัน แม้
จะลดราคาลงมาแล้วแตก่ ็ยังถอื ว่าแพงอยไู่ ม่น้อย หากไม่มปี ัญหาเรอ่ื งงบประมาณการว่าจ้างผู้เช่ยี วชาญมา
ทาการทดสอบ Usability ให้ย่อมการันตีผลลัพธ์ท่ีดีกว่า แต่หากเวลาไม่มีหรืองบประมาณไม่พอ ด้วย
เทคโนโลยีในปัจจุบันเราสามารถทาการทดสอบ Usability ในราคาย่อมเยาด้วยตัวเองแบบ DIY (Do it
Yourself) ได้เช่นกัน โดยสาหรับการทดสอบ Usability ของเว็บไซต์ท่ีกล่าวไว้เป็นแนวทางอ้างอิงใน
หนังสือชื่อดังของ Steve Krug. Don’t make me think revisited: a common sense approach to
web and mobile usability. มีประเดน็ ท่ีนา่ สนใจบางส่วนดงั ต่อไปนี้

1) ทาการทดสอบทุกเดือนเดือนละ 1 ครั้ง การทดสอบแต่ละคร้ังใช้เวลาเพียงคร่ึงวันเช้าในการ
ทดสอบและสรปุ ประเด็นทีท่ มี พัฒนาผลิตภณั ฑ์จะตอ้ งไปแกไ้ ข

- กาหนดการท่ีแน่นอนและเวลาท่ีไม่ยาวเกินไปทาให้ผู้เกี่ยวข้องสะดวกใจท่ีจะเข้าร่วม
สังเกตการณ์ทดสอบมากขึ้น ซึ่งสาหรับการทดสอบ Usability ย่ิงมีผู้เกี่ยวข้องร่วมสังเกตการทดสอบาก
เท่าไรกย็ งิ่ ดเี ท่านั้น

2) ทดสอบกับผใู้ ชเ้ พยี ง 3 คน ตอ่ การทดสอบ 1 คร้งั และใช้เวลาทดสอบ 1 ชั่วโมงต่อผใู้ ช้ 1 คน
- การทดสอบ Usability ไม่ใช่การพิสูจน์สมมติฐานเชิงปริมาณที่ต้องมีนัยสาคัญทางสถิติ

มารับรอง ส่ิงท่ีตอ้ งการจากการทดสอบนค้ี อื ข้อมลู ทร่ี ู้ลึกร้จู ริงถงึ พฤตกิ รรมผใู้ ช้
- การหาปัญหาใหไ้ ดค้ รบทุกประเด็นน้ันเปน็ ไปไมไ่ ด้ แค่ปญั หาท่ีพบจากผ้ใู ช้ 3 คน ภายใน

เวลาทดสอบครึ่งวันนี้ก็มากเกินกว่าที่จะแก้ไขได้ทันภายในหนึ่งเดือนก่อนถึงการทดสอบ Usability รอบ
หน้าแล้ว

3) หากการคดั เลอื กหากลมุ่ เปา้ หมายที่จะมาช่วยทดสอบน้ันยากและกินเวลามากไป ใหค้ ดั เลือก
อย่างหลวม ๆ แต่ไปเน้นทดสอบให้ได้บอ่ ยคร้งั แทนดกี ว่า

- สาหรับปัญหาของ Usability ที่ร้ายแรง ไม่ต้องเป็นผู้ใช้กลุ่มเป้าหมายท่ีมีคุณสมบัติตรง
ขอ้ กาหนดทกุ อย่าง แค่ผใู้ ช้คนทว่ั ไปกเ็ จอปัญหานัน้ ได้แล้ว

- หากระดับของ Usability ดีพอท่ีคนทั่วไปยังสามารถใช้ได้ ผลิตภัณฑ์น้ีย่ิงไม่น่าจะมี
ปญั หาสาหรบั กลมุ่ ผใู้ ชเ้ ปา้ หมายท่มี คี วามร้คู วามรู้ความสามารถเฉพาะทางเกี่ยวกับผลิตภัณฑ์

บทที่ 11 การทดสอบสว่ นตดิ ต่อผู้ช้งาน 138

แบบฝึกหัดท้ายบท

1. แนวคดิ ของ Lean คอื อะไร
2. กระบวนการของ Lean ใหค้ วามสาคัญกับอะไรมากทส่ี ุด
3. กระบวนการพัฒนาตามแนวคดิ ของ Lean จะประกอบดว้ ยกระบวนการใดบา้ ง
4. Validated Learning หมายความวา่ อย่างไร
5. จงอธบิ ายว่า Usability Testing คืออะไร และมีความสาคัญอย่างไร
6. ขัน้ ตอนการทา Usability Testing ประกอบดว้ ยขัน้ ตอนใดบ้าง
7. Low-fidelity prototype และ Hi-fidelity prototype ต่างกันอย่างไร
8. การสร้างการทดสอบสามารถมขี นั้ ตอนการทาอย่างไร
9. จงอธิบายเงอ่ื นไขทใ่ี ชท้ ดสอบการใช้งาน UI
10. การทดสอบ Usability แบบ DIY มีลักษณะอย่างไร

บทท่ี 12
กรณศี กึ ษา

กรณศี กึ ษา : โศกนาฏกรรมของ UI และ UX

ถ้าใครคิดว่า UI และ UX ท่ีไม่ดีก็แค่ทาให้หงุดหงิดราคาญใจเท่าน้ันก็ผิดไปแล้ว เพราะการ
ออกแบบ UI ท่ีไม่ดีถูกวิเคราะห์ในรายงานของ Bloomberg Business [109] ว่าเป็นสาเหตุหนึ่งของ
โศกนาฏกรรมวันท่ี 3 ตุลาคม ค.ศ. 1988 (ช่วงระหว่างสงครามอิรัก-อิหร่าน) ท่ีเคร่ืองบินพาณิชย์ไฟลท์
Iran Air 655 ถูกยงิ ตกโดยมสิ ไซล์ 2 ลูกเพียง 7 นาทหี ลงั ออกเดนิ ทางจากสนามบินในอิหร่านมุ่งหนา้ ไปยัง
สหรัฐอาหรับเอมิเรตส์ โดยคนยิงคือเรือรบของกองทัพเรือสหรัฐอเมริการท่ีเข้าใจผิดว่าเครื่องบินน้ีคือ
เครื่องบินรบ F-14 ที่กาลังลดระดับเพดานบินเพื่อเข้ามาจู่โจมเรือ เน่ืองจากกล่องดาบนเคร่ืองบินถูก
ระเบดิ ไป สาเหตใุ นฝั่งเครื่องบนิ ว่าทาไมจึงไม่ตอบกลับการเตือนนับสิบคร้ังของเรือรบจึงยังเป็นปริศนาอยู่
แต่ท่ีชัดเจนคือความเข้าใจผิดของผู้บัญชาการเรือรบท่ีเป็ผลมาจาก UI และ UX ที่ไม่ดีของระบบเรดาห์
ตรวจจบั วตั ถแุ ปลกปลอมของเรือรบซ่งึ ได้แก่

1. เข้าใจผิดว่าเคร่ืองบินกาลังบินลดระดับลงมา เนื่องจากหน้าจอเรดาห์ของเรือรบน้ันแม้จะ
เป็นจอใหญ่ขนาด 42x42 นิ้ว แต่การแสดงขอ้ มลู ความเรว็ ระยะห่าง หรือระดับความสูงของวัตถุในเรดาห์
จะถูกแสดงในหน้าจอแยกดา้ นล่างที่มีขนาดเพยี ง 12 นิ้ว ข้อมูลท่ีแสดงบนหน้าจอเล็กที่ว่านี้จะแสดงเพียง
ค่าที่วัดได้ ณ ปัจจุบัน หากต้องการรู้ว่าวัตถุในเรดาห์หรือเครื่องบินในที่น้ีกาลังลดหรือเพิ่มเพดานบินอยู่
ต้องอาศัยจาข้อมลู ตวั เลขบนจอแลว้ คิดเลขในใจหรอื จดทดเลขบนกระดาษเอาเอง

2. เขา้ ใจผิดว่าเป็นเคร่ืองบนิ รบ เนือ่ งจากในระบบนีม้ ีเคอเซอร์ 2 ตัวทตี่ อ้ งควบคุมแยกกัน ตวั
หน่งึ คือเคอเซอร์ตดิ ตามอตั โนมัติทใ่ี ชเ้ ลอื กเพอ่ื ตดิ ตามวตั ถุเป้าหมายในเรดาห์ สว่ นอีกตวั คือเคอเซอร์ที่ไม่มี
ระบบติดตามอตั โนมัติท่ีใชเ้ พอื่ คลิกเลือกแสดงข้อมูลของวตั ถุใด ๆ ทตี่ ้องการในเรดาห์ โดยในท่ีน้ีเคอเซอร์
ตัวแรกถูกใช้เพ่ือติดตามอ่านค่าจากเคร่ืองบิน Iran Air อยู่ ส่วนเคอเซอร์ตัวท่ีสองนั้นยังค้างตาแหน่งการ
อ่านค่าอยู่ท่ีสนามบินที่เคร่ือง Iran Air บินออกมา ในขณะที่นาวิกโยธินในเรือรบกาลังเข้าใจผิดว่า
เครื่องบิน Iran Air กาลังลดระดับเพดานบินลงมา (ข้อมูลจากเคอเซอร์ตัวแรก) ก็พอดีว่าเคอเซอร์ตัวที่ 2
จับสัญญาณเคร่ืองบินรบจากเคร่ืองบิน F-14 ของจริงที่จอดนิ่งอยู่ในสนามบินได้ ทาให้เข้าใจผิดไปว่า
เครอ่ื งบนิ ที่กาลังลดเพดานบนิ ลงมาน้ีคือเครอื่ งบินรบ F-14

ประเดน็ เข้าใจผิดแรกนัน้ เป็นผลพวงจากการออกแบบ UI ทีไ่ ม่ดอี ยา่ งชัดเจนเพราะบงั คับให้นาวิก
โยธินที่อยู่ในภาวะการทาสงครามต้องมานั่งจาและคิดคานวณตัวเลขเป็นระยะเวลาต่อเน่ือง ซึ่งวิศวกร

บทที่ 12 กรณศี กึ ษา 140

ผู้ออกแบบระบบน้ีเล่าว่าได้เคยช้ีปัญหาน้ีเสนอให้ผู้บัญชาการแล้ว แต่ก็ถูกปฏิเสธด้วยเหตุผลว่า “หน้าจอ
ไมม่ ีท่ีจะแสดงขอ้ มูลเพ่มิ แล้ว”

ประเด็นเขา้ ใจผดิ อนั หลังนนั้ แสดงใหเ้ หน็ วา่ คนสร้างระบบเรดาหบ์ นเรอื รบนไ้ี ม่ค่อยใหค้ วามสาคัญ
กับการทดสอบ Usability ท่ีต้องมีผู้ใช้จริงมาทดลองน่ังใช้งานซ้าไปมาเพือ่ ค้นหาปัญหาฝั่งผใู้ ช้ทมี่ ีท่ีมาจาก
การออกแบบ UI และ UX ที่ไม่ดี เพราะดูเหมือนเรื่องท่นี ่าสับสนอย่างการท่เี คอเซอร์ 2 ตัวถกู ใช้งานพร้อม
กนั แตต่ อ้ งควบคุมแยกนั ตัวนงึ ติดตามวถั ตุได้อันโนมัติแต่อกี ตวั ทาไม่ได้ จะเปน็ ประเดน็ ที่ถูกละเลยไปโดย
สิ้นเชิง

ไม่ว่าจะคนหรือเครื่องจักร ย่อมไม่สามารถการันตีความพร้อมหรือความถูกต้องของการทางานได้
เตม็ 100% เสมอ ดังน้นั สาหรบั ผูอ้ อกแบบระบบทีไ่ ม่มที างรไู้ ด้ว่าความผิดพลาดจาก UI และ UX ท่ไี ม่ดจี ะ
ส่งผลให้เร่ืองบานปลายไปได้ถึงข้ันไหนน้ัน การออกแบบ UI และ UX ให้ดีไว้เสมอจึงถือเป็นภาระหน้าที่
ของผอู้ อกแบบทด่ี ที จี่ ะชว่ ยป้องกนั ความผิดพลาดต่าง ๆ ให้กบั ผใู้ ช้เอาไว้ไดล้ ่วงหน้านั่นเอง

บทท่ี 12 กรณศี กึ ษา 141

กรณศี กึ ษา : กล้องถ่ายภาพอินฟราเรด

แสงอินฟราเรด (Infrared) คือ แสงพลงั งานต่าชนดิ หนงึ่ ทไ่ี ม่มอี นั ตรายตอ่ ดวงตามนษุ ยแ์ ละ
มนษุ ยเ์ ราไม่สามารถมองเหน็ ได้ด้วยตาเปลา่ สว่ นกลอ้ งถา่ ยภาพอินฟราเรด หมายถงึ กลอ้ งทที่ างานกับ
ชว่ งแสงอนิ ฟราเรดน้ี โดยกล้องถา่ ยภาพอินฟราเรดท่เี ป็นท่รี จู้ กั กนั อยา่ งแพร่หลายนนั้ มี 2 ประเภท คอื

1. กล้องถ่ายภาพความร้อน (Thermal imaging camera) เป็นเซ็นเซอร์ชนิด Passive ท่ีจะ
ตรวจจับรังสีอินฟราเรดช่วงความยาวคล่ืน 8,000-15,000 นาโนเมตรท่ีแผ่ออกมาจากร่างกายคนหรือ
ส่ิงของตามธรรมชาติ นิยมนามาใชใ้ นดา่ นตรวจคนเข้าเมืองของสนามบิน โดยคนท่ีอณุ หภูมิร่างกายสูงกวา่
ปกติที่มีความเสยี่ งว่าอาจเปน็ โรคจะถูกแสดงเปน็ สีแดงบนจอภาพ ทั้งนส้ี ีสันต่าง ๆ ทีเ่ หน็ ในภาพถา่ ยความ
ร้อนน้ีเป็นเทคนิคการใช้สีเพื่อสื่อระดับที่แตกต่างของรังสีอินฟราเรดท่ีวัดได้ให้เห็นอย่างชัดเจนเท่าน้ัน
ไม่ใชว่ ่ากลอ้ งชนดิ น้ถี ่ายภาพสีออกมาไดแ้ ต่อย่างใด

2. กล้องมองกลางคืน (Night vision camera) เป็นเซ็นเซอร์ชนิด Active ท่ีจะปล่อยลาแสง
อินฟราเรดช่วงความยาวคล่ืน 750-1,400 นาโนเมตร ออกไปส่องสว่างส่ิงแวดล้อม และ จับปริมาณแสง
อินฟราเรดที่สะท้อนกลับมาที่กล้องนามาสร้างเป็นภาพ ตวั อย่างเช่น กล้องวงจรปดิ หรือกล้องรักษาความ
ปลอดภยั ท่ัวไป โดยภาพท่ีไดจ้ ะเปน็ ภาพโทนสีเดยี วท่บี ริเวณสว่าง หมายถึงบริเวณท่ีมีการสะท้อนของแสง
อนิ ฟราเรดมากหรอื ได้รับแสงอินฟราเรดตกกระทบมากกว่าบรเิ วณอ่นื

เซ็นเซอร์ชนดิ Passive ในกล้องถ่ายภาพความร้อนจะมีราคาแพงกว่าแบบ Active และค่าใชจ้ ่าย
สาหรับสร้างกล้องมองกลางคืนซึ่งเป็นการเล่นกับแสงอินฟราเรดช่วงความยาวคล่ืนที่คนเราเกือบจะ
มองเห็นได้แล้วน้ันมีราคาต่ากว่ามาก ท้ังตัวเซ็นเซอร์ที่ถูกกว่า ทั้งฟิลเตอร์กรอแสงอินฟราเรดท่ีสามารถ
สร้างได้เองจากฟิลม์ ถ่ายภาพ อกี ท้ังดวงไฟที่เป็นแหลง่ กาเนดิ แสงอินฟราเรดช่วงความยาวคลื่นนีก้ รี าคาไม่
แพงและหาไดท้ ั่วไปในตลาดอิเล็กทรอนิกส์ อย่างไรก็ตามด้วยความก้าวหน้าของเทคโนโลยีปัจจุบนั ราคา
ของกล้องถ่ายภาพความร้อนก็ถือว่าลดลงกว่าสมัยก่อนมาก โดยในปี ค.ศ. 2014 ได้มีการวางจาหน่าย
กล้องถา่ ยภาพความร้อนสาหรบั ใช้กบั สมารท์ โฟนแล้ว

ความก้าวหน้าลา่ สุดของวงการกล้องมองกลางคืน คือ กล้องมองกลางคืนที่มคี ุณสบัตมิ องเหน็ สไี ด้
หรอื Color night vision camera โดยในปี ค.ศ.2014 บรษิ ทั Sharp ได้นาเสนอกลอ้ งมองกลางคืนภาพสี
ตัวแรกของโลกที่ใช้เทคนิคของเซ็นเซอร์ชนิด Active ยิงแสงอินฟราเรดออกไปกระทบส่ิงแวดล้อมและใช้
กระบวนการคิดคานวณบางอย่างวิเคราะห์แสงสะท้อนแปลงกลับมาเป็นสีของวัตถุ ดังตัวอย่างแสดงในรูป
ท่ี 12.1 ขวา ซึง่ คุณสมบตั กิ ารมองเห็นสีของกล้องนถ้ี กู กลา่ ววา่ สามารถทาไดแ้ มใ้ นห้องท่ีมดื สนทิ

บทที่ 12 กรณศี ึกษา 142

รูปที่ 12.1 ภาพซ้ายคือภาพที่เห็นโดยกล้องอินฟราเรดสาหรับมองกลางคืนปกติ ภาพขวาคือภาพท่ี
เหน็ จากกล้องอนิ ฟราเรดภาพสีสาหรบั มองกลางคืนของ Sharp

หลังจากน้ันไม่นานบริษัท Falcon ก็ออกกล้องมองกลางคืนท่ีให้ภาพสีได้ตามมา โดยเป็นการใช้
ชิปประมวลผลตัวใหม่ร่วมกับวิธีการคานวณพิเศษทาให้กล้องมองกลางคืนสามารถเห็นสีของส่ิงต่าง ๆ ใน
ภาพได้โดยไม่ตอ้ งปลอ่ ยแสงอนิ ฟราเรดใดออกมา

บทท่ี 12 กรณีศึกษา 143

กรณีศกึ ษา : เซ็นเซอร์สาหรบั ร้จู าสัญลกั ษณม์ อื

การรู้จาสัญลักษณ์มือหรือสัญลักษณ์น้ิวมือท่ีในภาษาอังกฤษเรียกว่า Hand gesture
recognition นน้ั เปน็ หวั ขอ้ หนง่ึ ทีม่ กี ารศกึ ษาคน้ ควา้ มานานโดยเชอ่ื วา่ เป็นวธิ หี น่ึงทจ่ี ะสรา้ ง UI ท่ีใช้สงั่ งาน
คอมพิวเตอร์ได้อย่างเป็นธรรมชาติ แต่ถ้าพูดถึงภาพชัด ๆ ท่ีแสดงให้เห็นว่าการรู้จาสัญลักษณ์มือน้ีเป็น
อย่างไรหรือเอาไปทาอะไรได้บ้างน้ัน ก็คงไม่พ้นต้องอ้างอิงจากฉากในภาพยนตร์ช่ือดัง เร่ือง Minority
Report ในฉากเปิดเร่ืองที่ Tom Cruise ใช้มือท่ีสวมถุงมือพิเศษควบคุมภาพวิดีโอบนจอได้ ที่กลายเป็น
ตน้ แบบทถ่ี ูกใช้เพ่อื อธิบายประโยชน์ใช้สอยของเทคโนโลยกี ารรจู้ าสญั ลกั ษณม์ อื อยา่ งกว้างขวาง

UI ชนิดอปุ กรณ์สวมมือ

อา้ งอิงจาก [90] ประวัติศาสตร์ของการสร้าง UI เพื่อรู้จาสัญลักษณ์มือเริ่มต้นจาก UI ประเภทถุง
มือหรือ Data glove โดยต้นแบบแรกถูกนาเสนอในปี ค.ศ.1977 เป็นถุงมือท่ีถูกสร้างข้ึนจากวงจรไฟฟ้าที่
ไม่ซับซอ้ น จากวันน้นั จวบจนปจั จุบัน UI ท่ีเป็นอุปกรณ์สวมมอื ไดถ้ กู พัฒนาอย่างต่อเนอ่ื ง โดยระยะหลังจะ
เป็นถุงมือที่มีเซ้นเซอร์ติดซ่อนอยู่ภายในหลายชนิดทาให้สามารถวัดได้ว่าตอนนี้มือท่ีสวมถุงมืออยู่กาลังกา
หรือแบ น้ิวแต่ละน้ิวกาลังยืดหรืองออยู่มากน้อยแค่ไหน ซึ่งในปี ค.ศ.1987 Data glove ลักษณะน้ีได้ถูก
วางจาหน่ายเป็นครัง้ แรกในฐานะผลติ ภณั ฑ์สาหรบั ผู้ใชท้ ่วั ไป

แมใ้ นปัจจุบันกย็ ังมี UI ชนดิ อปุ กรณ์สวมมือออกมาเร่ือยๆ พรอ้ มเทคโนโลยอี านวยความสะดวกที่
เพิ่มขึ้นท้ังการรับส่งข้อมูลแบบไร้สาย การเช่ือมต่อกับแอปพลิเคชันสมาร์ทโฟน รูปลักษณ์ท่ีใช้ง่ายมีวงจร
และสายต่อระโยงรยางค์น้อยลง โดยมากแล้วชนิดของเซ็นเซอร์ท่ีใช้ใน UI อุปกรณ์สวมมือจะเป็นชนิด
Passive ที่เน้นวัดการขยับ การบิด หรือ การงอของมือ ข้อมือ หรือ นิ้วมือ ในส่วนของข้อเสียของ UI
อุปกรณ์สวมมือคือการล่วงล้า (intrusive) ความเป็นธรรมชาติของผู้ใช้ ทาให้ผู้ใช้ต้องสวมอุปกรณ์แปลก
แยกเพมิ่ จากปกติ

UI ชนดิ กลอ้ งสองมติ ภิ าพสี

UI สาหรับรู้จาสัญลักษณ์มอื ถือชนิดหนึ่งท่ีเกิดในช่วงปี ค.ศ.1980 ตาม Data glove มาติด ๆ คือ
UI ท่ีรู้จาสัญลักษณ์มือโดยวิเคราะห์จากภาพถ่ายของมือที่กล้องจับไว้ เทียบกับ UI แบบสวมมือของ Data
glove แลว้ UI ท่ใี ช้กลอ้ งถ่ายภาพสี (ภาพสองมติ )ิ ทั่วไปเพยี งตวั เดยี วคู่กับข้ันตอนวิธีการวเิ คราะหร์ ูปภาพ
น้นั มขี อ้ ดีและขอ้ เสียหลัก ๆ พอสรปุ ได้ดงั ต่อไปน้ี
ขอ้ ดี

1) ราคาถูกและสร้างไดง้ ่าย มีคอมพิวเตอร์และกล้องถ่ายภาพสีทัว่ ไปเพยี งตัวเดียวก็สามารถสรา้ งได้

บทที่ 12 กรณศี ึกษา 144

2) ผู้ใช้ไม่ตอ้ งสวมอปุ กรณ์ใดเพิม่ เติม และ การเคลื่อนไหวของมือรวมถึงนิ้วมือก็ไม่ถูกจากัดดว้ ยการ
ยึดโยงอุปกรณ์

3) สามารถรู้จาสัญลักษณ์มือได้จากระยะห่าง และสามารถรู้จาสัญลักษณ์มือของทุกมือท่ีปรากฏใน
ภาพได้ไมจ่ ากดั แค่เพียง 2 มอื

ข้อเสีย
1) การวิเคราะห์รูปภาพเป็นกระบวนการที่กินเวลาและทรัพยากรในการคานวณมากย่ิงขึ้นตอนวิธี
ซับซ้อนมากยิ่งยากที่จะได้ผลลัพธ์ออกมาต่อเน่ืองรวดเร็วพอที่ จะปฏิสัมพันธ์โต้ตอบกับผู้ใช้ได้
ทนั ทว่ งที
2) การค้นหาและแยกแยะว่า มือท่ีจะวิเคราะห์ อยู่บริเวณใดในภาพสีน้ียุ่งยากไม่น้อย โดยเฉพาะถ้า
ฉากหลังมีสีคล้ายกับสีผิว ฉากหลังเปล่ียนไปมา แสงในสิ่งแวดล้อมน้อยเกินไป แสงเงาใน
ส่ิงแวดล้อมไม่คงที่ สีผิวของผู้ใช้แต่ละคนต่างกันมากหรือระยะห่างระหว่างผู้ใช้และกล้องเปลี่ยน
อยู่ตลอด
3) การรู้จาและตีความสัญลักษณ์มือบางสัญลักษณ์ท่ีมีความเป็นสามมิติจากภาพสองมิติถ่ายจากมุม
เดยี วนยี้ ากทจี่ ะทาได้ครบถว้ นสมบูรณ์
4) พื้นที่การใช้งานถูกจากัดเฉพาะบริเวณหน้ากล้องเท่าที่กล้องสามารถมองเห็นได้โดยไม่ถูกบัง
เทา่ น้นั

จะเห็นว่าแม้กล้องภาพสีสองมิติซ่ึงจัดเป็นเซ็นเซอร์ชนิด Passive ดูจะแก้ปัญหาการก้าวล่วงผู้ใช้
ของ UI อปุ กรณ์สวมมือได้ในทางทฤษฎีแลกดว้ ยปัญหาอ่ืน ๆ ที่เพิ่มขึ้นมา แต่ในทางปฏิบัติความพยายาม
ในกรแก้ข้อเสียข้อ 2 เรื่องการแยกแยะภาพมือออกจากพ้นื หลังให้ไดน้ ั้นมีต้ังแต่การใหผ้ ู้ใชส้ วมถึงมอื ผ้าทมี่ ี
สีหรือลวดลายพเิ ศษ สวมถุงมือที่ทาจากวสั ดุพิเศษท่ีสะทอ้ นแสงไดม้ าก ติดสัญลักษณ์สีไวท้ ี่น้ิวมือแต่ละนว้ิ
ติดดวงไฟ LED ที่ปลายน้ิว ซ่ึงวิธีเหล่าน้ีช่วยให้การแยกมือและน้ิวมือง่ายขึ้นจริง แต่ก็ขัดกับหลักการ
ZeroUI และเพิ่มการก้าวล่วงผู้ใช้ด้วยถุงมือและสัญลักษณืพิเศษไม่ต่างจาก UI อุปกรณ์สวมมือท่ีกล่าวไป
ก่อนหนา้

ในการแก้ขอ้ เสียขอ้ 3-4 นั้น ทาได้โดยการเพิ่มจานวนกล้องเข้าไปเพื่อใหส้ ามารถมองเหน็ ภาพมือ
ได้จากหลายมุมมอง การทาเช่นน้ีในทางปฏิบัตินอกจากจะทาให้การติดต้ังใช้งานยุ่งยากและจากัดพื้นที่
การใช้งานยิ่งขึ้นแล้ว ในแง่การคานวณก็ซบั ซอ้ นกวา่ เดิมหลายเท่า ทั้งต้องปรับจูนกล้องแต่ละตัวใหท้ างาน
เข้ากันได้ ต้องหาว่านิ้วแต่ละน้ิวปรากฏอยู่ที่บริเวณใดในภาพไหนบ้าง ก่อนจะนาข้อมูลทั้งหมดมา
ประมวลผลรวมกันแบบสามมิติ ซ่ึงทั้งหมดน้ีไม่ใช่เร่ืองง่ายโดยเฉพาะถ้ากล้องทั้งหมดยังเป็นกล้องสองมิติ