Author :: อาจารย์พิชญา สุขปลั่ง NPRU Open Courseware more info :: http://courseware.npru.ac.th/index.php

1. บทที่ 8
การออกแบบเอาต์พุต/การออกแบบอินพุต
1

2. วัตถุประสงค์ในการออกแบบ Output
(Output Design Objectives)
• Design Output to serve the intended purpose
– ออกแบบให้ output ตรงตามวัตถุประสงค์ของการใช้งาน
• Design Output to fit the user
– ออกแบบให้ตรงตามความต้องการของ user
• Deliver the appropriate quantity of output
– คานึงถึงปริมาณข้อมูลที่แสดงใน output
• Make sure that the output is where it is needed
– คานึงถึงการกระจาย output ไปยังที่ต่าง ๆ ได้ทั่วถึง
• Provide the output on time
– ออกแบบ output ให้ทันกับความต้องการและทันเวลาในการนาไปใช้
งาน
• Choose the right output method
– เลือกวิธีการนาเสนอ output ให้เหมาะสม

3. ชนิดของ Output
• Internal Output : Output ที่ใช้ภายในองค์กรoutput ที่ได้จากระบบ
สารสนเทศนั้นจะถูกส่งออกไปนอกหน่วยงาน การออกแบบต้องสวยงาม
พิถีพิถัน มีคุณภาพดี เช่น ใบเสร็จรับเงิน เช็ค รายงานประจาปี โฆษณา
เป็นต้น
• External Output : Output ที่ส่งออกภายนอกองค์กร เช่น ใบเสร็จรับเงิน
เป็นต้น
– Turnaround output : Output ที่ส่งออกภายนอกองค์กร และมี
บางส่วนที่ส่งกลับมายังองค์กร เช่น ใบฝากถอนเงิน ใบส่งสินค้า เป็น
ต้น

4. • รายงานการยกเว้น เช่นรายงานสินค้าที่ผิดพลาด
• รายงานสรุป รายงานแสดงผลรวมตัวเลขต่างๆ รายงานเกรดเฉลี่ย

5. Output Technology
1. Printed output พิมพ์ออกมา
– Tabular output presents information in columns.
– Zoned output places text and numbers into designated
“areas”
2. Screen output แสดงผลทางหน้าจอ
– Graphic output is the use of pictorial charts to convey
information in ways that demonstrate trends and
relationships that cannot be easily seen in tabular formats.
3. Audio
4. CD-ROM
5. Electronic Output

6. การเลือกใช้อุปกรณ์ในการแสดงผล
(Choosing Output Technology)
• ข้อพิจารณาในการเลือกอุปกรณ์ในการแสดงผล
– ใครเป็นผู้ใช้
– จานวนผู้ใช้มากน้อยเพียงใด
– Output ถูกใช้งานที่ไหน
– วัตถุประสงค์ของ Output คืออะไร
– ความเร็วที่ต้องการได้ Output
– ความถี่ในการใช้ Output
– ระยะเวลาที่ต้องการจัดเก็บ Output นานเพียงใด
– การผลิต Output ภายใต้กฎ ข้อบังคับอะไรหรือไม่
– งบประมาณในการจัดหา Technology และการบารุงรักษา
– สิ่งแวดล้อมในการใช้ Output เป็นอย่างไร

7. การจัดรูปแบบสารสนเทศเพื่อหลีกเลี่ยงความหมายของ
ข้อมูลผิดไป
1. การเรียงลาดับ
• ตามตัวอักษร
• ตามวันเดือนปี
• ตามค่าของข้อมูล เช่น ต่าสุด มากที่สุด เป็นต้น
เช่นการแสดงรายชื่อ Supplier ตามตัวอักษร
โดยไม่ได้แสดงราคาขายของสินค้า ผู้ใช้อาจ
เข้าใจว่าเรียงตามราคาขายต่าสุดก็ได้ ดังนั้นควร
แสดงค่าของข้อมูลที่ใช้ในการเรียงลาดับด้วย

8. การจัดรูปแบบสารสนเทศเพื่อหลีกเลี่ยงความหมายของ
ข้อมูลผิดไป
2. การกาหนด limit ในการแสดงข้อมูล เช่น ต้องการแสดงเฉพาะที่ลูกหนี้ที่มี
ยอดหนี้มากกว่า 200,000,000 ซึ่งอาจไม่มีสารสนเทศถูกแสดงออกมาเลยก็
ได้
• การตั้ง limit ต่าเกินไป -> สารสนเทศถูกแสดงออกมามากเกินไป
• การตั้ง limit สูงเกินไป -> สารสนเทศถูกแสดงออกมาน้อย หรือไม่
มีเลย

9. การจัดรูปแบบสารสนเทศเพื่อหลีกเลี่ยงความหมายของ
ข้อมูลผิดไป
3. การใช้ graphic ในการแสดงผล เช่น การวาดกราฟโดย
กาหนด scale ละเอียดเกินไป ทาให้สารสนเทศที่ได้ดูมาก
เกินจริง หรือการใช้สัญลักษณ์ต่าง ๆ แทนข้อมูลอาจดูแล้ว
ไม่สื่อถึงความมาก หรือน้อยของข้อมูล

10. 0
5
10
15
20
25
30
35
North South East West
Car A
Car B
Car C
10
15
20
25
30
35
North South East West
Car A
Car B
Car C
8a.
8b.
Graphical Scaling Bias

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

12. การจัดรูปแบบรายงาน
1. หัวรายงาน (Heading)
2. รายละเอียด (Details)
3. ผลสรุป (Summary)
4. หมายเหตุ (Remark)

13. หัวรายงาน (Heading) ประกอบด้วย
• ชื่อรายงานเพื่อสื่อความหมายของข้อมูลในรายงาน
• เลขกากับหน้า
• ชื่อบริษัทหรือหน่วยงาน
• วันเวลาที่พิมพ์รายงาน

14. ตัวอย่าง หัวรายงาน
ชื่อองค์กรหรือหน่วยงาน
ชื่อรายงาน
วันที่พิมพ์รายงาน
เลขหน้า1/2

15. รายละเอียด (Details)
• ใช้แสดงรายละเอียดของข้อมูลต่อเนื่องกันไป อาจมีการกาหนดเงื่อนไขการ
การพิมพ์ และการควบคุมข้อมูล (Control break)
• เงื่อนไขการพิมพ์ เช่น ตั้งแต่วันที่ 1 ,มกราคม 2549 ถึง 30 มิถุนายน 2549
• Control break การรวบรวมข้อมูลตามกลุ่มของข้อมูล เช่น รายงานแสดง
ยอดขายแบ่งตามประเภทสินค้า เป็นต้น

16. ผลสรุป (Summary)
• ส่วนของการสรุปข้อมูลในรายงาน เช่น สรุปยอดขายรวมทั้งสิ้น

17. หมายเหตุ (Remark)
• รายงานบางประเภทจาเป็นต้องมีรายละเอียดหรือคาแนะนา
เพื่อให้ผู้อ่านได้เข้าใจความหมาย เช่นบอกความหมายของตัวย่อ
เป็นต้น

18. ประเภทของรายงาน (Report)
–Detailed reports present information with
little or no filtering.
–Summary reports categorize information for
managers who do not want to wade through
details.
•Increasingly presented inn graphical
formats using charts.
–Exception reports filter detailed information
before presenting it.

19. การนาเสนอข้อมูลในรายงาน
• ตาราง (Tabular Format)
• กราฟ (Graph Format)
• ไอคอน (Using Icon)

20. •Table

21. •Graph

22. External Document

23. Turnaround Document

24. Chapter 11.
การออกแบบส่วนติดต่อผู้ใช้
(User Interface & Design)

25. System Development Life
Cycle : SDLC
กิจกรรมในขั้นตอนนี้ได้แก่
1. การออกแบบฟอร์มและรายงาน
2. การออกแบบ GUI
3. การออกแบบฐานข้อมูล

26. กระบวนการในการออกแบบ
User Interface
 User Interface หมายถึง
– ส่วนติดต่อระหว่างผู้ใช ้กับระบบ
– เพื่อการเตรียมสารสนเทศและการนาสารสนเทศนั้นไปใช ้โดย
การตอบโต ้กับคอมพิวเตอร์
 Dialogues หมายถึง
– ลาดับการเชื่อมโยงจอภาพซึ่งจะทาให ้ทราบว่าจอภาพหนึ่งจะ
เชื่อมโยงไปยังจอภาพใดต่อไป

27. กระบวนการออกแบบแบบฟอร์มและรายงาน
• เก็บรวบรวมข้อมูลการใช้งานแบบฟอร์มและรายงาน
• ร่างแบบของแบบฟอร์มและรายงาน
• สร้างต้นแบบ

28. รูปแบบของเอกสารต้นฉบับ

30. การออกแบบส่วนนาเข้าข้อมูล
• วิธีการในการนาเข้า
–แบบช่วงเวลา (Batch)
–แบบตลอดเวลา (Online)

31. อุปกรณ์ในการนาเข้าข้อมูล
• Keyboard
• Mouse
• Touch screen
• Touch-tone telephone
• เครื่องมือนาเข้าข้อมูลแบบกราฟฟิก (Graphic input device)
• เครื่องมือเสียง

32. หน้าจอแสดงส่วนการนาเข้าข้อมูล

33. หน้าจอควบคุมการปฏิบัติงาน
• การใช้เมนู
• การใช้หน้าจอ Prompt
• การรวมทั้งสองแบบเข้าด้วยกัน (Combination screen)

34. หน้าจอการควบคุมการประมวลผลแบบเมนู

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

36. หลักทั่วไปในการจัดการส่วนนาเข้าและส่วนแสดงผล
Gebhardt & Stellmacher (1978) เสนอเกณฑ์ใน 8 ประเด็นหลัก
1. ความเรียบง่าย (Simplicity)
– มีคาสั่งไม่มากนัก
– ใช้ส่วนนาเข้าที่เรียบง่าย
– ใช้คาสั่งที่สั้น
– ใช้คาสั่งที่สื่อความหมาย

37. หลักทั่วไปในการจัดการส่วนนาเข้าและส่วนแสดงผล
2. ความชัดเจน (Clarity)
– มีโครงสร้างแบบลาดับชั้น
– มีหน้าที่เฉพาะกิจกรรม
– มีความสม่าเสมอ
– แก้ไขปัญหาตรงจุด
3. ความเป็นเอกลักษณ์ (Uniqueness)
– มีเป้าหมายชัดเจน
– มีขอบเขตที่กาหนดแน่นอน

38. หลักทั่วไปในการจัดการส่วนนาเข้าและส่วนแสดงผล
4. ภาษาที่ใช้ได้สะดวก (Comfortable language)
– เป็นคาสั่งที่มีประสิทธิภาพ
– มีความยืดหยุ่น
– ใช้การตอบโต้ที่กระทัดรัด
– ใช้โครงสร้างข้อมูลที่ง่ายต่อการจดจา

39. หลักทั่วไปในการจัดการส่วนนาเข้าและส่วนแสดงผล
5. การอานวยความสะดวกสบายอื่น ๆ ในการใช้คาสั่ง
(Other comfort)
– ความสะดวกในการนาเข้า
– การสั่งแทรกขณะระบบกาลังดาเนินการ
– การใช้ภาษาของส่วนแสดงผล
– ให้ความสะดวกด้านอื่น ๆ

40. หลักทั่วไปในการจัดการส่วนนาเข้าและส่วนแสดงผล
6. การยืนยันและการนามาใช้ใหม่ (Evidence & reusability)
– การยืนยัน
– ให้ความช่วยเหลือ
– การนากลับมาใช้ใหม่
7. มีความมั่นคงในคาสั่ง (Stability)
– การจัดการแก้ไขข้อผิดพลาด
– ไม่บีบบังคับผู้ใช้
8. มีความมั่นคงปลอดภัยในข้อมูล (Data security)

41. การออกแบบ Interfaces
• การออกแบบการจัดวาง (Layouts) ของหน้าจอ
• โครงสร้างของการป้อนข้อมูล (Structure Data Entry)
• การควบคุมความถูกต้องในระหว่างป้อนข้อมูล (Controlling Data Input)
• การตอบสนองของระบบ (Providing Feedback)
• การแสดงส่วนช่วยเหลือ (Help)
• การออกแบบการควบคุมการเข้าถึงข้อมูลของผู้ใช้
• การออกแบบลาดับการเชื่อมโยงจอภาพ (Dialogue Design)

42. การออกแบบการจัดวางของหน้าจอ
1. ส่วนหัวเรื่อง: ใช้แสดงชื่อของเอกสารหรือฟอร์มนั้น ๆ
2. ส่วนแสดงลาดับและวันที่: ใช้แสดงเลขลาดับและวันที่หรือเวลา
3. ส่วนแนะนาหรือแนวทางในการใช้: ใช้อธิบายข้อแนะนาการใช้ฟอร์ม
4. ส่วนรายละเอียดข้อมูล: ใช้แสดงสาระสาคัญของเอกสารหรือฟอร์ม
5. ส่วนแสดงผลรวม: ใช้แสดงค่าผลรวม เช่น ยอดเงิน ยอดขาย เป็นต้น
6. ส่วนการลงนามผู้มีอานาจ: ใช้แสดงนามผู้มีอานาจของเอกสารหรือฟอร์ม
7. ส่วนแสดงความคิดเห็น: ใช้ในการเขียนข้อความที่เป็นความคิดเห็น

43. เกณฑ์การจัดการใส่ข้อมูล
• ความคงที่ของการใส่ข้อมูล
• วิธีการสั่งดาเนินการใส่ข้อมูล
• การลดปริมาณสั่งการที่ผู้ใช้ต้องจดจา
• ความสมดุลในการใส่ค่าข้อมูลเข้ามากับการนาเสนอผลลัพธ์
• ความคล่องตัวของผู้ใช้ในการใส่ค่าข้อมูลเข้ามา

44. การกระตุ้นความสนใจของผู้ใช้
• ระดับความลึก (intensity)
• การเน้นความสาคัญ (marking)
• ขนาดและรูปแบบ (size & fonts)
• การสลับสีและการกะพริบ (inverse video & blinking)
• การใช้สี (color)
• การใช้เสียง (audio)

45. หลักการพื้นฐานของการออกแบบกราฟฟิก
• นาเสนอส่วนที่เป็นข้อความ และส่วนที่เป็นสัญลักษณ์กราฟฟิก ให้
ความชัดเจน สื่อความหมายว่าต้องการให้ผู้ใช้ทาอะไร
• ออกแบบระบบที่เสนอโครงสร้างและขั้นตอนของการดาเนินการ
อย่างชัดเจน
• ในกรณีที่ผู้ใช้สั่งดาเนินการไม่ตรงตามขั้นตอนการทางาน ควรให้มี
การเตือน หรือเสนอสัญลักษณ์ที่ผู้ใช้ทราบได้ในทันทีว่าควรจะ
แก้ไขอย่างไร

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

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

48. เกณฑ์การจัดจอภาพ
• ความคงที่ของการนาเสนอ
• การเสนอข้อมูลที่ผู้ใช้เข้าใจได้
• การลดปริมาณสิ่งที่ผู้ใช้ต้องจดจา
• ความสมดุลระหว่างการนาเสนอผลลัพธ์และการกาหนดใส่ข้อมูล
เข้ามา
• ความคล่องตัวของผู้ใช้ในการควบคุมการนาเสนอ

49. การออกแบบการจัดวางของหน้าจอ
• การออกแบบหน้าจอของฟอร์มหรือรายงานต่างๆ ควรจะจัดวาง
รูปแบบให้เหมือนกับเอกสารมากที่สุด
• การเชื่อมโยงการป้อนข้อมูลในแต่ละรายการหรือแต่ละฟิลด์
– ต้องลาดับการเชื่อมโยงในการป้อนข้อมูลในแต่ละฟิลด์
– การกรอกจะคล้ายกับการกรอกบนเอกสารจริง
– เริ่มกรอกจากซ้ายไปขวา และจากบนลงล่าง
– ควรมีความยืดหยุ่นและสอดคล้องในการทางาน สามารถย้าย cursor
ไปมาระหว่างฟิลด์ที่ต้องการแก้ไข

50. Bad Flow in a Form

51. Good Flow in a Form

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

53. การออกแบบหน้าจอรับข้อมูล
5. กรณีข้อมูลรับเข้าเป็นตัวอักษรพิเศษแล้วควรออกแบบให้สามารถใส่ตัวอักษร
พิเศษอัตโนมัติโดยผู้ใช้ไม่ต้องใส่เอง
6. กรณีข้อมูลรับเข้าต้องการแสดงผลรับเป็นเลข “0” ให้แสดงโดยผู้ใช้ไม่ต้อง
ป้อนเอง
7. กรณีที่ข้อมูลรับเข้าเป็นจานวนเลขที่นาไปคานวณค่าควรมี “,” คั่นหลักพันหรือ
จุดทศนิยมขึ้นอัตโนมัติ
8. กรณีช่องรับข้อมูลนั้นมีค่าที่สามารถกาหนด (Default) ได้ระบบนั้นควรแสดงค่าที
กาหนดนั้น (Default) ที่ช่องนั้น

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

55. สิ่งที่ต้องเตรียมความสามารถของหน้าจอป้อนข้อมูล
• การควบคุมตัวกระพริบ (Cursor)
• การแก้ไขตัวเลขหรือข้อมูล
• การใช้คาสั่งออก (Exit)
• มีส่วนช่วยเหลือ (Help)

56. โครงสร้างของการป้อนข้อมูล
(Structure Data Entry)
การออกแบบโครงสร้างการป้อนข้อมูล คือ การออกแบบเพื่อกาหนดรูปแบบ หรือ
ลักษณะของช่องป้อนข้อมูล เพื่อเตรียมความสะดวกให้กับผู้ใช้ เช่น การกาหนดค่า
เริ่มต้น การจัดวางข้อมูล เป็นต้น

57. หลักเกณฑ์การออกแบบ
– การป้อนข้อมูล (Entry) พยายามให้ผู้ใช้ป้อนข้อมูลเท่าที่จาเป็นเท่านั้น
– ค่าเริ่มต้น (Default Value) ค่าของข้อมูลใดที่สามารถกาหนดค่าเริ่มให้ได้ ควร
ใส่ให้ผู้ใช้ทันที เพื่อเพิ่มความสะดวก เช่น วันที่ หรือหมายเลข Running
Number เป็นต้น
– หน่วยของข้อมูล (Unit) ระบุหน่วยข้อมูลให้ชัดเจน เช่น บาท ดอลลาร์
กิโลกรัม เป็นต้น
– คาอธิบาย หรือ คาอธิบายช่องป้อนข้อมูล(Caption) แสดงคาอธิบายฟิลด์ว่า
ต้องการให้ผู้ใช้ใส่ข้อมูลอะไร เป็นจัดวางให้เหมาะสม

58. – รูปแบบของข้อมูล (Format) ถ้าต้องการให้มีสัญลักษณ์พิเศษ ควรเตรียม
สัญลักษณ์เหล่านี้ให้อัตโนมัติ
– การจัดวางข้อมูล(Justify) ออกแบบให้มีการจัดวางข้อมูลโดยอัตโนมัติ เช่น
ตัวเลขชิดขวา ข้อความชิดซ้าย เป็นต้น
– ส่วนช่วยเหลือ (Help) เตรียมส่วนช่วยเหลือระหว่างผู้ใช้ป้อนข้อมูล เช่นปุ่ม F1
เพื่อขออ่านคาอธิบาย
– การติดต่อกับผู้ใช้ในการป้อนข้อมูลด้วยกราฟิก (GUI)
หลักเกณฑ์การออกแบบ

59. การติดต่อกับผู้ใช้แบบกราฟิก
(Graphic User Interface: GUI)
• เทคโนโลยีที่นามาใช้ เรียกว่า GUI Input Control
• ช่วยให้ผู้ใช้ระบบสามารถใช้งานระบบได้ง่ายขึ้น
• ช่วยให้ข้อมูลที่นาเข้าสู่ระบบมีรูปแบบเดียวกัน
• ช่วยป้องกันความผิดพลาดในระหว่างการป้อนข้อมูล

60. รูปแบบของ GUI
1. Text Box
2. Radio Button
3. Check Button
4. List box
5. Drop-down List Box
6. Combination Box
(Combo Box)
7. Spin Box (Spinner Box)
8. Menu bars
9. Toolbars
10. Dialog boxes
11. Toggle buttons
12. Scroll bars
13. Calendars
14. Status Bar

61. ตัวอย่าง Graphic User Interface
ListBoxTextBox
Radio Button
ComboBox

63. Common GUI Components
Can edit
Text box
Radio
button
Check
box
List
box
Spin
box
Drop
down
list
Button

64. Advanced GUI Components

65. Advanced GUI Components

66. Input Prototype for
Data Maintenance

67. Input Prototype for Transaction

68. Input Prototype for Data Maintenance

69. Input Prototype for Web Interface

70. Input Prototype for Web Interface

71. การควบคุมความถูกต้องในระหว่างป้อนข้อมูล
(Controlling Data Input)
• ควรตรวจสอบชนิดของข้อมูล
• ควรตรวจสอบการป้อนข้อมูลไม่ครบตามที่ระบุไว้
• ควรตรวจสอบรูปแบบที่ป้อนข้อมูล
• ควรตรวจสอบค่าสูงสุดและต่าสุดของข้อมูล
• ควรตรวจสอบความครบถ้วนของข้อมูลในแต่ละฟิลด์

72. การตอบสนองของระบบ
(Providing Feedback)
มีอยู่ด้วยกัน 3 ชนิด คือ
1. แจ้งสถานะการทางาน (Status Information)
2. แสดงความพร้อมในการรับคาสั่ง (Prompting Cues)
3. ข้อความแจ้งหรือเตือนเมื่อมีข้อผิดพลาด (Error/Warning Messages)

73. แจ้งสถานะการทางาน
(Status Information)
• แจ้งให้ผู้ใช้ทราบถึงความสถานะปัจจุบันในกาทางานของระบบ เช่น
• แสดงเลขหน้าที่กาลังทางานอยู่
• แสดงความคืบหน้าในการประมวลผล
Combination of Text and Graphics for End User feedback

74. แสดงความพร้อมในการรับคาสั่ง
(Prompting Cues)
• เป็นการออกแบบเพื่อแจ้งสถานะความพร้อมในการรับคาสั่ง
• เช่น หน้า Login เข้าระบบ cursor กระพริบรอรับ username
• หรือ กรุณาป้อนรหัสวิชา :_ _ _-_ _ _

75. ข้อความแจ้งหรือเตือนเมื่อมีข้อผิดพลาด (Error/Warning
Messages)
• การแสดงข้อความเมื่อเกิดข้อผิดพลาด และแนะแนวทางในการแก้ไข
เพื่ออธิบายให้ผู้ใช้สามารถแก้ไขปัญหาด้วยตนเองได้

76. การแสดงส่วนช่วยเหลือ (Help)
แนวทางการใช้ Help มีลักษณะ ดังนี้
1. สามารถใช้งานง่าย (Simplicity)
2. มีการจัดรูปแบบอย่างเป็นระเบียบ (Organization)
3. มีการแสดงตัวอย่าง (Example)

77. ตัวอย่าง Help
Poorly designed help display Improved designed help display

78. ตัวอย่าง Help

79. การออกแบบควบคุมการเข้าถึงข้อมูลของผู้ใช้
1. จากัดความสามารถในการมองเห็นข้อมูลจากฐานข้อมูล
(View/Subschema)
2. สิทธิในการเข้าถึงข้อมูล (Authorization Rules)
3. การเข้ารหัส (Encryption Procedures)
4. การตรวจสอบการเข้าใช้ระบบ (Authentication schemas)

80. การออกแบบลาดับการเชื่อมโยงจอภาพ
• เป็นการออกแบบลาดับของการแสดงส่วนติดต่อกับผู้ใช้ของโปรแกรม
หรือลาดับของการแสดงส่วน User Interface ทางหน้าจอคอมพิวเตอร์
• แผนภาพแสดงลาดับการเชื่อมโยงจอภาพ (Dialogues Diagram) ประกอบไป
ด้วย 3 ส่วน คือ
1. ส่วนบน: เลขลาดับหน้าจอ
2. ส่วนกลาง: ชื่อหน้าจอการทางาน
3. ส่วนล่าง: เลขลาดับหน้าจอที่อ้างอิงมา ต่อไป หรือ ย้อนกลับ

81. Dialogues Diagram
• Dialogues Diagram เป็นแผนภาพแสดงลาดับการเชื่อมโยงของจอภาพ
• สัญลักษณ์
เลขลาดับหน้าจอ
ชื่อหน้าจอการทางาน
เลขลาดับที่อ้างอิงมา

82. ตัวอย่าง Dialogue diagram for Customer Information
System

83. ตัวอย่าง Dialogue diagram for e-commerce

84. ตัวอย่าง Dialogue diagram

85. การออกแบบรายงาน
• เป็นไปตามรูปแบบรายงานที่ระบบเดิมมี หรือต้องการ
• หากไม่มี สิ่งที่ต้องคานึง
– วันที่พิมพ์รายงาน (อาจมีเวลาด้วย)
– ชื่อหน่วยงาน (อาจมีหรือไม่มีก็ได้ แต่ส่วนใหญ่จะต้องมี)
– ชื่อรายงาน (ชื่อของรายงานอยู่กลางหน้ากระดาษ ชื่อโปรแกรมฯ อยู่
ทางมุมบนด้านขวา หรือมุมบนด้านซ้าย)
– ระยะเวลาของการพิมพ์รายงาน เช่น รายเดือน รายปี .....
– รายละเอียด
– ผู้สั่งพิมพ์ หรือผู้ดาเนินการ

86. ตัวอย่างรายงาน
• รายงานสรุปยอดซื้อประจาปี
• รายงานรายการซื้อประจาปี
• รายงานสรุปยอดซื้อปัจจุบัน
• สินค้าคงเหลือ ณ วันที่ ....
• รายงานสินค้าที่ต้องสั่งซื้อ
• ฯลฯ