School of Information & Communication Technology

งานนำเสนอเรื่อง: "School of Information & Communication Technology"— ใบสำเนางานนำเสนอ:

1 School of Information & Communication Technology
Input Design Start Sanchai Yeewiyom School of Information & Communication Technology University of Phayao Next

2 การออกแบบการนำข้อมูลเข้า
วัตถุประสงค์ เพื่ออธิบายถึงจุดมุ่งหมายของการนำข้อมูลเข้า (Input) เพื่ออธิบายถึงความแตกต่างระหว่าง Data Capture, Data Entry และ Data Input เพื่ออธิบายถึงความแตกต่างระหว่างการนำข้อมูลเข้าแบบ ช่วงเวลา (Batch Line Input) และการนำข้อมูลเข้าแบบ ออนไลน์ (Online Input) Back Next

3 วัตถุประสงค์ (ต่อ) วัตถุประสงค์
เพื่อแจกแจงและอธิบายถึงการตรวจสอบข้อมูลก่อนการ นำข้อมูลเข้า เพื่ออธิบายถึงผลกระทบของการออกแบบเอกสารที่เป็น แหล่งข้อมูล (Source Document) เพื่อสามารถออกแบบใบระเบียนการนำข้อมูลเข้า (Input Records) เพื่ออธิบายถึงแนวทางที่มีผลต่อการออกแบบหน้าจอ Back Next

4 วัตถุประสงค์ (ต่อ) วัตถุประสงค์ เพื่ออธิบายการออกแบบหน้าจอดาต้าเอนทรี
(Data Entry Screens), หน้าจอควบคุมการปฏิบัติงาน (Process Control Screens), กราฟิกที่ติดต่อกับผู้ใช้ (Graphical Use Interfaces), และหน้าจอช่วยการทำงาน (Help Screens) เพื่ออธิบายเทคนิคที่ใช้ควบคุมการนำข้อมูลเข้า (Input Data) Back Next

5 ความหมายของ Data Capture, Data Entry, Data Input
Back Next

6 ขั้นตอนในการออกแบบการนำข้อมูลเข้า
มี 6 ขั้นตอน คือ การออกแบบหรือปรับปรุงเอกสารที่เป็นแหล่งข้อมูล (Source Document) การออกแบบขั้นตอนการนำข้อมูลเข้าระบบ การออกแบบใบระเบียนการนำข้อมูลเข้า (Input Records) การออกแบบหน้าจอดาต้าเอนทรี การออกแบบส่วนติดต่อผู้ใช้ (User Interface Screens) 6. การออกแบบการควบคุมการนำข้อมูลเข้า (Input Control) Back Next

7 จุดมุ่งหมายในการออกแบบการนำข้อมูลเข้า
เพื่อให้ได้ข้อมูลที่มีคุณภาพเข้าสู่ระบบ กระทำได้โดย 1. มีการเลือกใช้สื่อและวิธีการที่เหมาะสมในการนำข้อมูลเข้า 2. มีการนำข้อมูลเข้าอย่างมีประสิทธิภาพ 3. มีการลดปริมาณของข้อมูลที่ต้องเข้าระบบ 4. มีการลดความผิดพลาดของข้อมูลที่นำเข้าระบบ Back Next

8 การเลือกใช้สื่อกลางและวิธีการที่เหมาะสมในการนำข้อมูลเข้า
วิธีการนำข้อมูลเข้าแบ่งเป็น 2 แบบ คือ การนำข้อมูลเข้าแบบออนไลน์ (Online) ผู้ใช้สามารถนำข้อมูลเข้าได้โดยตรง ต้องมีการออกแบบ Data Entry ให้มีรูปแบบที่สามารนำข้อมูลเข้าได้ตลอดเวลา การนำข้อมูลเข้าแบบช่วงเวลา (Batch) Data Entry จะถูกใช้เป็นช่วงๆ อาจเป็นชั่วโมง เป็นวัน หรือเป็นสัปดาห์ ขึ้นอยู่กับลักษณะการรวบรวมข้อมูล หรือขึ้นกับแหล่งข้อมูล Back Next

9 สื่อที่ใช้ในการนำข้อมูลเข้า
เครื่องมือที่ใช้ในการเข้าข้อมูล (Input Device) คำอธิบาย (Description) Back คีย์บอร์ด (Keyboard) การนำเข้าข้อมูลส่วนใหญ่มักใช้เครื่องมือ นี้โดยเฉพาะในแบบการนำข้อมูลเข้าแบบ ออนไลน์ หรืออาจใช้การจดบันทึกไว้ ก่อนแล้วค่อยคีย์เข้าระบบ ส่วนในกรณี เครื่องเทอร์มินอล (Terminal) แบ่งเป็น 2 แบบ คือ แบบแรกใช้คีย์บอร์ดในการ แสดงหน้าจอและแบบที่ 2 สามารถเก็บข้อมูล หรือทำการประมวลผลได้โดยผ่านคีย์บอร์ด Next

10 สื่อที่ใช้ในการนำข้อมูลเข้า
เครื่องมือที่ใช้ในการเข้าข้อมูล (Input Device) คำอธิบาย (Description) Back เมาส์ (Mouse) เป็นเครื่องมือตัวเล็ก ๆ ที่ใช้เคลื่อนเคอร์เซอร์ (Cursor) บนหน้าจอและใช้ในการเลือกหัวข้อ ในการทำงาน (Option) ทัชสกรีน (Touch screen) เป็นการติดต่อกับผู้ใช้โดยการแตะที่หน้าจอ เพื่อเลือกหัวข้อในการทำงาน Next

11 สื่อที่ใช้ในการนำข้อมูลเข้า
เครื่องมือที่ใช้ในการเข้าข้อมูล (Input Device) คำอธิบาย (Description) Back ทัช-โทน เทเลโฟน การใช้โทรศัพท์โดยผู้ใช้กดปุ่มของเครื่อง (Touch-tone telephone) โทรศัพท์เพื่อส่งรายการ (Transactions) ตัวอย่าง เช่น การโอนเงินผ่านโทรศัพท์ หรือ การลงทะเบียนนักศึกษา เป็นต้น เครื่องมือเข้าข้อมูลแบบ เครื่องมือแบบนี้จะหมายถึง ปากกาแสง กราฟิก (Graphic input (Light Pen) ดิจิไตเซอร์ (Digitizer) หรือ device) กราฟิกแทเบล็ท (Graphic Tablet) ซึ่งสามารถ นำข้อมูลที่เป็นรูปกราฟิก (Graphic) เข้าเครื่อง Next

12 สื่อที่ใช้ในการนำข้อมูลเข้า
เครื่องมือที่ใช้ในการเข้าข้อมูล (Input Device) คำอธิบาย (Description) Back เครื่องมือเสียง เครื่องมือนี้เป็นการใช้คำพูดหรือเสียงป้อน เข้าเครื่อง เครื่องอ่าน MICR เครื่องมือนี้เป็นเครื่องอ่านตัวอักษรแม่เหล็ก โดย ผู้ใช้รุ่นแรก คือ ธนาคารที่ใช้หมึกที่เป็นแม่เหล็ก พิมพ์ตัวอักษรลงในเช็ค สแกนเนอร์(Scanner)/ เครื่องมือนี้เป็นเครื่องที่ใช้อ่านรหัสที่พิมพ์เป็นตัว เครื่องออพติคอล (Optical อักษร และรูปภาพได้โดยตรงจากดาต้าแคปเจอร์ recognition device) (Data Capture) Next

13 สื่อที่ใช้ในการนำข้อมูลเข้า
เครื่องมือที่ใช้ในการเข้าข้อมูล (Input Device) คำอธิบาย (Description) Back เครื่องเก็บข้อมูล เครื่องมือนี้เป็นเครื่องนำข้อมูลเข้าเฉพาะ เช่น (Data collection device) ตามโกดังเก็บของ ตามร้านค้า มีเครื่องนำข้อมูล เข้า คือ บาร์โค้ดเพื่อเช็คสินค้า เป็นต้น Next

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

15 การลดปริมาณการนำข้อมูลเข้า
การลดปริมาณการนำข้อมูลเข้าก็เพื่อลดจำนวนและขนาดของข้อมูลในการ นำเข้า การลดปริมาณการนำข้อมูลเข้าเท่ากับเป็นการช่วยลดค่าใช้จ่ายทางด้าน แรงงาน ลดเวลาในการทำงานของเครื่องคอมพิวเตอร์ และลดความผิดพลาด ของข้อมูล แนวทางการลดปริมาณการนำข้อมูลเข้าระบบมี 4 แนวทาง คือ 1. การนำข้อมูลเข้าเฉพาะที่มีความสำคัญ 2. อย่านำข้อมูลซึ่งสามารถดึงมาจากแฟ้มข้อมูลอื่น หรือสามารถคำนวณได้จากข้อมูลอื่นมาเป็นข้อมูลเข้า 3. อย่านำเข้า ข้อมูลที่เป็นค่าคงที่เช่น วันที่ป้อนข้อมูล กรณีที่ใช้รหัสแทนข้อมูลนั้นได้ ก็ควรที่จะใช้รหัส เนื่องจากใช้เวลาในการบันทึกสั้นกว่าการต้องป้อนข้อมูลทั้งหมด ซึ่งจะช่วยในการลดเวลาในการป้อนข้อมูลและประหยัดหน่วยความจำ Back Next

16 การลดความผิดพลาดของนำข้อมูลเข้าระบบ
การตรวจสอบการเรียงลำดับ (Sequence Checks) การตรวจสอบว่ามีการนำข้อมูลเข้า (Existence Checks) การตรวจสอบประเภทของข้อมูล (Class Checks) การตรวจสอบช่วงของข้อมูล (Range Checks) การตรวจสอบความสมเหตุสมผล (Reasonableness Checks) การตรวจสอบความถูกต้อง (Validity Checks) Back Next

17 การลดความผิดพลาดของนำข้อมูลเข้าระบบ
การตรวจสอบความสัมพันธ์ของข้อมูล (Combination Checks) การตรวจสอบในกรณีการนำข้อมูลเข้าเป็นช่วงเวลา (Batch Input Checks) Back Next

18 เอกสารที่ใช้เป็นแหล่งข้อมูล (Source Document)
เอกสารที่เป็นแหล่งข้อมูล หมายถึง เอกสารที่ใช้ในการรวบรวมข้อมูล เช่น จดหมายเวียน เอกสารบันทึกข้อมูล แบบฟอร์มต่างๆ เป็นต้น ซึ่งเอกสารที่เป็นแหล่งข้อมูล ก็คือ Data Capture ที่ใช้เพื่อเป็นกลไกในการเก็บรวบรวมข้อมูล เพื่อเตรียมไว้นำข้อมูลเข้า และเตรียมเป็นระเบียนซึ่งใช้เป็นต้นฉบับของข้อมูล โดยตัวอย่างเอกสารที่ใช้เป็นแหล่งข้อมูลแสดงได้ดังสไลด์ถัดไป Back Next

19 Back Next

20 การเรียงลำดับโซนต่าง ๆ ในเอกสาร
Back Next

21 ตัวอย่างเอกสารที่ใช้เป็นแหล่งข้อมูล

22

23

24

25 การออกแบบใบระเบียนนำข้อมูลเข้า (Input Record Design)
การออกแบบระเบียนข้อมูล จะใช้ในกรณีเมื่อเป็นการนำข้อมูลเข้าระบบแบบใช้ช่วงเวลา เนื่องจากต้องมีการรวบรวมข้อมูลก่อนมีการนำข้อมูลเข้า การนำข้อมูลเข้าที่รวบรวมนั้นต้องมีการเก็บไว้ในแฟ้มข้อมูลชั่วคราว ซึ่งแฟ้มข้อมูลชั่วคราวนั้น จะกลายเป็นแฟ้มข้อมูลที่ถูกนำเข้า ดังนั้นจึงมีการใช้ใบระเบียนนำข้อมูลเข้า เพื่อใช้ในการบันทึกเฉพาะข้อมูลที่จำเป็นต้องเข้าเครื่องโดยใช้โปรแกรมพิมพ์งาน (Word Processor) และใช้พจนานุกรมข้อมูล (Data Dictionary) ในการอธิบายรูปแบบของระเบียนนั้นทั้งหมด Back Next

26 ใบรายการบันทึกข้อมูลการลงทะเบียนของนักศึกษา

27 พจนานุกรมข้อมูลใบระเบียนการนำข้อมูลเข้าการลงทะเบียนของนักศึกษา

28

29 แสดงการป้อนข้อมูลตามการจัดเรียงที่ไม่ถูกต้อง

30 แสดงการป้อนข้อมูลตามการจัดเรียงที่ถูกต้อง

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

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

33 การออกแบบหน้าจอรับข้อมูล
3. ถ้าช่องรับข้อมูลนั้นมีรูปแบบเฉพาะให้แสดงรูปแบบเฉพาะนั้นเพื่อให้ผู้ใช้ป้อนข้อมูลไม่ผิดพลาด เช่น DD/MM/YYYY ในทุกครั้งที่ป้อนข้อมูลในช่องรับข้อมูลนั้นครบถ้วนให้ผู้ใช้กด “Enter” เพื่อไปยังช่องรับข้อมูลถัดไปหรือในกรณีที่ใส่ข้อมูลเท่าจำนวนของข้อมูลนั้นแล้ว Cursor ควรไปยังช่องรับข้อมูลถัดไปอัตโนมัติเพื่อรับข้อมูลถัดไป เพื่ออำนวยความสะดวกต่อผู้ใช้ Back Next

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

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

36 การออกแบบหน้าจอรับข้อมูล
12. ควรเตรียมปุ่มรับคำสั่ง เพื่อเคลื่อนย้าย Cursor ไปในฟิลด์ ต่าง ๆ ในหน้าจอเพื่อให้ผู้ใช้ได้แก้ไขก่อนจะบันทึกเข้าเครื่อง เช่น ปุ่ม TAB เป็นต้น 13. ถ้าผู้ใช้ Data Capture เพื่อป้อนข้อมูล ในการออกแบบหน้าจอ Data Entry นั้นควรให้สอดคล้องกับ Data Capture นั้น Back Next

37 การออกแบบหน้าจอรับข้อมูล
Back Next

38 หน้าจอดาต้าเอนทรี (Data Entry Screen)
Back Next

39 การออกแบบหน้าจอควบคุมการปฏิบัติงาน (Process Control Screen Design)
หน้าจอที่ออกแบบเพื่อควบคุมการปฏิบัติงาน เรียกว่า หน้าจอควบคุมการปฏิบัติงาน (Process Control Screen) หรือหน้าจอไดอะล็อก (Dialogue Screen) ซึ่งต้องออกแบบให้ตอบสนองต่อผู้ใช้ระบบได้ทันที การออกแบบนี้ใช้ตอบสนองกับระบบสารสนเทศที่มีการประมวลผลแบบออนไลน์ (Online Process) Back Next

40 การออกแบบเมนู (Menu) หรือ พรอมท์ (Prompt)
Back ตัวอย่าง 1 ตัวอย่าง 2 Next ตัวอย่าง 1 ตัวอย่าง 2

41 เมนูแบบง่ายของระบบการประมวลผลแบบออนไลน์ (Online Processing) ของระบบ Project Tracking
Back Next

42 Back Next

43 หน้าจอพรอมท์ (Prompt Screens)
Back Next N

44 หน้าจอพรอมท์ (Prompt Screens)
Back Next

45 กราฟิกที่ใช้ติดต่อกับผู้ใช้ (GUI)
Back คลิกดูตัวอย่างเทคนิค GUI ทั้ง 8 แบบ Next

46 ตัวอย่างการใช้ GUI ที่ใช้แทนเมนูหลักของระบบการให้เกรด น.ศ.
Back Next Back

47 เมนูพูลดาวน์ (Pull-Down Menu)
Back Next

48 หน้าต่างป๊อบอัฟ (Pop-up Window)
Back Next

49 แสดงเทคนิคทาง GUI 8 แบบในการนำข้อมูลเข้าหรือเลือกคำสั่ง
Radio Button Back Next

50 การออกแบบหน้าจอช่วยการทำงาน (Help Screen Design)
Back Next

51 เมนูช่วยผู้ใช้งาน Back Next

52 Back Next

53 Back Next

54

55

56 Design Example Best Mobile UI UX Design
Best Free Mobile App UI PSD Design Best Responsive Web Design Best web design Top-class website templates Back Next

57 การควบคุมการนำข้อมูลเข้า (Input Control)
การควบคุมการนำข้อมูลเข้า คือ ตัววัดความสำเร็จของข้อมูลที่ใส่เข้าระบบว่ามีความถูกต้องสมบูรณ์ของข้อมูล ในกรณีนำข้อมูลเข้าแบบช่วงเวลา (Batch Input) นั้น สามารถทำได้โดยการนำเอกสารที่เป็นแหล่งข้อมูล (Source Document) มาตรวจสอบก่อนนำข้อมูลเข้าระบบ ในกรณีการนำข้อมูลเข้าแบบออนไลน์ (Online) นั้น สามารถดักข้อมูลต่าง ๆ ได้โดยการตรวจสอบข้อมูลก่อนนำเข้า Back Next

58 การออกแบบการการนำข้อมูลเข้าอัตโนมัติ (Automated Design Tools)
ปัจจุบันนี้จะมีโปรแกรมประยุกต์หลายแบบที่ช่วยในการผลิตการนำข้อมูลเข้าทั้งส่วนของการสร้างหน้าจอหรือแบบฟอร์มอัตโนมัติ นั่นคือ DBMS 4GL และ CASE ซึ่งจะช่วยให้การออกแบบการนำข้อมูลเข้าเป็นไปได้อย่างสะดวก รวดเร็ว ถูกต้อง และสวยงาม Back Next

59

60 Wireframe https://wireframe.cc/

61

62 Example : Design specification for the design of forms and reports (Source : Microsoft Corporation)

63 Example : Design specification for the design of forms and reports (Source : Microsoft Corporation)
Back Next

64 Example : Design specification for the design of forms and reports (Source : Microsoft Corporation)
Back Next

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