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

การออกแบบส่ วนติดต่ อผู้ใช้้
(Interfaces and Dialogues)
กระบวนการออกแบบแบบฟอร์มและรายงาน
• เก็บรวบรวมข้อมูลการใช้งานแบบฟอร์มและรายงาน
• ร่ างแบบของแบบฟอร์มและรายงาน
• สร้างต้นแบบ
รู ปแบบของเอกสารต้นฉบับ
สื่ อที่ใช้้
– เครื่ องพิมพ์
– หน้าจอ
–
–
–
–
Plotter
Computer Output Microfilm (COM)
เสี ยง
Device
ส่ วนแสดงผลที่เป็ นรายงาน
• Hard copy เป็ นการแสดงผลออกมาเป็ นรายงาน
• Soft copy เป็ นการแสดงผลทางหน้าจอ เป็ นการแสดงผลแบบ
ชัว่ คราว
– CRT (cathode ray tube)
– VDT (Video display terminal)
การออกแบบการพิมพ์รายงาน
• รายงานตามความต้องการ
– รายงานที่มีรายละเอียดครบ (Detail reports)
– รายงานแบบมีเงื่อนไข (Exception reports)
– รายงานสรุ ป (Summary reports)
• รายงานตามการแจกจ่ายให้แก่ผใู ้ ช้
– รายงานภายในองค์กร (Internal reports)
– รายงานภายนอกองค์กร (External reports)
การออกแบบหน้ าจอส่ วนแสดงผล
•
•
•
•
การออกแบบหน้าจอ
การออกแบบตัวอักษร
การออกแบบรู ปกราฟส่ วนแสดงผล
การออกแบบเอฟเฟ็ คพิเศษในการแสดงหน้าจอ
การออกแบบส่ วนนาเข้ า
• วิธีการในการนาเข้า
– แบบช่วงเวลา (Batch)
– แบบตลอดเวลา (Online)
อุปกรณ์ ใชนการนาเข้ าข้ อมูล
•
•
•
•
•
Keyboard
Mouse
Touch screen
Touch-tone telephone
เครื่ องมือนาเข้าข้อมูลแบบกราฟฟิ ก (Graphic input
device)
• เครื่ องมือเสี ยง
หน้ าจอแสดงส่ วนการนาเข้ าข้ อมูล
หน้ าจอควบคุมการปฏิบัตงิ าน
• การใช้เมนู
• การใช้หน้าจอพร็ อมท์
• การรวมทั้งสองแบบเข้าด้วยกัน (Combination screen)
หน้ าจอการควบคุมการประมวลผลแบบเมนู
หลักทั่วไปใชนการจัดการส่ วนนาเข้ าและส่ วนแสดงผล
Gebhardt & Stellmacher (1978) เสนอเกณฑ์ใน 8
ประเด็นหลัก
1. ความเรี ยบง่าย (Simplicity)
–
–
–
–
มีคาสั่งไม่มากนัก
ใช้ส่วนนาเข้าที่เรี ยบง่าย
ใช้คาสั่งที่ส้ นั
ใช้คาสั่งที่สื่อความหมาย
2. ความชัดเจน (Clarity)
–
–
–
–
มีโครงสร้างแบบลาดับชั้น
มีหน้าที่เฉพาะกิจกรรม
มีความสม่าเสมอ
แก้ไขปั ญหาตรงจุด
3. ความเป็ นเอกลักษณ์ (Uniqueness)
– มีเป้ าหมายชัดเจน
– มีขอบเขตที่กาหนดแน่นอน
4. ภาษาที่ใช้ได้สะดวก (Comfortable language)
–
–
–
–
เป็ นคาสัง่ ที่มีพลัง
มีความยืดหยุน่
ใช้การตอบโต้ที่กระทัดรัด
ใช้โครงสร้างข้อมูลที่ง่ายต่อการจดจา
5. การอานวยความสะดวกสบายอื่น ๆ ในการให้คาสัง่
(Other comfort)
–
–
–
–
ความสะดวกในการนาเข้า
การสั่งแทรกขณะระบบกาลังดาเนินการ
การใช้ภาษาของส่ วนแสดงผล
ให้ความสะดวกด้านอื่น ๆ
6. การยืนยันและการนามาใช้ใหม่ (Evidence &
reusability)
– การยืนยัน
– ให้ความช่วยเหลือ
– การนากลับมาใช้ใหม่
7. มีความมัน่ คงในคาสัง่ (Stability)
– การจัดการแก้ไขข้อผิดพลาด
– ไม่บีบบังคับผูใ้ ช้
8. มีความมัน่ คงปลอดภัยในข้อมูล (Data security)
การออกแบบ Interfaces
• การออกแบบการจัดวาง (Layouts) ของหน้าจอ
• โครงสร้างของการป้ อนข้อมูล (Structure Data Entry)
• การควบคุมความถูกต้องในระหว่างป้ อนข้อมูล (Controlling Data
Input)
• การตอบสนองของระบบ (Providing Feedback)
• การแสดงส่ วนช่วยเหลือ (Help)
• การออกแบบการควบคุมการเข้าถึงข้อมูลของผูใ้ ช้
• การออกแบบลาดับการเชื่อมโยงจอภาพ (Dialogue Design)
การออกแบบการจัดวางของหน้ าจอ
1.
2.
3.
4.
5.
6.
7.
ส่ วนหัวเรื่ อง: ใช้แสดงชื่อของเอกสารหรื อฟอร์มนั้น ๆ
ส่ วนแสดงลาดับและวันที่: ใช้แสดงเลขลาดับและวันที่หรื อเวลา
ส่ วนแนะนาหรื อแนวทางในการใช้: ใช้อธิบายข้อแนะนาการใช้ฟอร์ม
ส่ วนรายละเอียดข้อมูล: ใช้แสดงสาระสาคัญของเอกสารหรื อฟอร์ม
ส่ วนแสดงผลรวม: ใช้แสดงค่าผลรวม เช่น ยอดเงิน ยอดขาย เป็ นต้น
ส่ วนการลงนามผูม้ ีอานาจ: ใช้แสดงนามผูม้ ีอานาจของเอกสารหรื อฟอร์ม
ส่ วนแสดงความคิดเห็น: ใช้ในการเขียนข้อความที่เป็ นความคิดเห็น
เกณฑ์ การจัดการใชส่ ข้อมูล
•
•
•
•
•
ความคงที่ของการใส่ ขอ้ มูล
วิธีการสัง่ ดาเนินการใส่ ขอ้ มูล
การลดปริ มาณสัง่ การที่ผใู ้ ช้ตอ้ งจดจา
ความสมดุลในการใส่ ค่าข้อมูลเข้ามากับการนาเสนอผลลัพธ์
ความคล่องตัวของผูใ้ ช้ในการใส่ ค่าข้อมูลเข้ามา
การกระตุ้นความสนใชจของผู้ใช้้
•
•
•
•
•
•
ระดับความลึก (intensity)
การเน้นความสาคัญ (marking)
ขนาดและรู ปแบบ (size & fonts)
การสลับสี และการกะพริ บ (inverse video & blinking)
การใช้สี (color)
การใช้เสี ยง (audio)
หลักการพืน้ ฐานของการออกแบบกราฟฟิ ก
• นาเสนอส่ วนที่เป็ นข้อความ และส่ วนที่เป็ นสัญลักษณ์กราฟฟิ กให้ความ
ชัดเจน สื่ อความหมายว่าต้องการให้ผใู ้ ช้ทาอะไร
• ออกแบบระบบที่เสนอโครงสร้างและขั้นตอนของการดาเนินการอย่าง
ชัดเจน
• ในกรณี ที่ผใู ้ ช้สงั่ ดาเนินการไม่ตรงตามขั้นตอนการทางาน ควรให้มีการ
เตือน หรื อเสนอสัญลักษณ์ที่ผใู ้ ช้ทราบได้ในทันทีวา่ ควรจะแก้ไขอย่างไร
หลักการใช้้ สีบนจอภาพ
• กระตุน้ ความสนใจของสายตา
• สร้างความน่าสนใจให้กบั เนื้อหาและการนาเสนอข้อความที่ซบั ซ้อนไม่
น่าสนใจ
• แยกแยะความแตกต่างของระบบงานที่ซบั ซ้อน
• เน้นการจัดโครงสร้างของระบบงานให้เข้าใจง่ายขึ้น
• เน้นเตือนผูใ้ ช้ดา้ นต่าง ๆ
• เสริ มแรงปฏิกริ ยาทางอารมณ์ของผูใ้ ช้
กฎเกณฑ์ พนื้ ฐานใชนการใช้้ สี
•
•
•
•
•
•
•
•
อย่าฟุ่ มเฟื อยในการใช้สี
จากัดจานวนสี
ใช้เทคนิคการกาหนดความหมายให้กบั สี ที่ใช้
เปิ ดโอกาสให้ผใู ้ ช้ควบคุมการนาเสนอสี
ควรออกแบบโดยคานึงถึงจอภาพแบบสี เดียวเป็ นอันดับแรก
ใช้สีในการสร้างรู ปแบบ
เลือกใช้สีที่ตรงกับความคาดหวังของผูใ้ ช้
เลือกจัดสี ที่นาเสนออย่างระมัดระวัง
เกณฑ์ การจัดจอภาพ
•
•
•
•
•
ความคงที่ของการนาเสนอ
การเสนอข้อมูลที่ผใู ้ ช้เข้าใจได้
การลดปริ มาณสิ่ งที่ผใู ้ ช้ตอ้ งจดจา
ความสมดุลระหว่างการนาเสนอผลลัพธ์และการกาหนดใส่ ขอ้ มูลเข้ามา
ความคล่องตัวของผูใ้ ช้ในการควบคุมการนาเสนอ
การออกแบบการจัดวางของหน้ าจอ
• การออกแบบหน้าจอของฟอร์มหรื อรายงานต่างๆ ควรจะจัดวางรู ปแบบ
ให้เหมือนกับเอกสารมากที่สุด
• การเชื่อมโยงการป้ อนข้อมูลในแต่ละรายการหรื อแต่ละฟิ ลด์
–
–
–
–
ต้องลาดับการเชื่อมโยงในการป้ อนข้อมูลในแต่ละฟิ ลด์
การกรอกจะคล้ายกับการกรอกบนเอกสารจริ ง
เริ่ มกรอกจากซ้ายไปขวา และจากบนลงล่าง
ควรมีความยืดหยุน่ และสอดคล้องในการทางาน สามารถย้าย cursor ไป
มาระหว่างฟิ ลด์ที่ตอ้ งการแก้ไข
Bad Flow in a Form
Good Flow in a Form
สิ่ งทีต่ ้ องเตรียมความสามารถของหน้ าจอป้อนข้ อมูล
•
•
•
•
การควบคุมตัวกระพริ บ (Cursor)
การแก้ไขตัวเลขหรื อข้อมูล
การใช้คาสัง่ ออก (Exit)
มีส่วนช่วยเหลือ (Help)
โครงสร้ างของการป้ อนข้ อมูล
(Structure Data Entry)
การออกแบบโครงสร้างการป้ อนข้อมูล คือ การออกแบบเพื่อกาหนดรู ปแบบ หรื อ
ลักษณะของช่องป้ อนข้อมูล เพื่อเตรี ยมความสะดวกให้กบั ผูใ้ ช้ เช่น การกาหนดค่า
เริ่ มต้น การจัดวางข้อมูล เป็ นต้น
หลักเกณฑ์ การออกแบบ
– การป้ อนข้ อมูล (Entry) พยายามให้ผใู ้ ช้ป้อนข้อมูลเท่าที่จาเป็ นเท่านั้น
– ค่ าเริ่มต้ น (Default Value) ค่าของข้อมูลใดที่สามารถกาหนดค่าเริ่ ม
ให้ได้ ควรใส่ ให้ผใู ้ ช้ทีนที เพื่อเพิ่มความสะดวก เช่น วันที่ หรื อหมายเลข
Running Number เป็ นต้น
– หน่ วยของข้ อมูล (Unit) ระบุหน่วยข้อมูลให้ชดั เจน เช่น บาท ดอลลาร์
กิโลกรัม เป็ นต้น
– คาอธิบาย หรือ คาอธิบาย้่ องป้ อนข้ อมูล(Caption) แสดงคาอธิ บาย
ฟิ ลด์วา่ ต้องการให้ผใู ้ ช้ใส่ ขอ้ มูลอะไร เป็ นจัดวางให้เหมาะสม
– รู ปแบบของข้ อมูล (Format) ถ้าต้องการให้มีสัญลักษณ์พิเศษ ควรเตรี ยม
สัญลักษณ์เหล่านี้ให้อตั โนมัติ
– การจัดวางข้ อมูล(Justify) ออกแบบให้มีการจัดวางข้อมูลโดยอัตโนมัติ
เช่นตัวเลขชิดขวา ข้อความชิดซ้าย เป็ นต้น
– ส่ วน้่ วยเหลือ (Help) เตรี ยมส่ วนช่วยเหลือระหว่างผูใ้ ช้ป้อนข้อมูล เช่น
ปุ่ ม F1 เพื่อขออ่านคาอธิ บาย
– การติดต่ อกับผู้ใช้้ ใชนการป้ อนข้ อมูลด้ วยกราฟิ ก (GUI)
การติดต่ อกับผู้ใช้้ แบบกราฟิ ก
(Graphic User Interface: GUI)
•
•
•
•
เทคโนโลยีที่นามาใช้ เรี ยกว่า GUI Input Control
ช่วยให้ผใู ้ ช้ระบบสามารถใช้งานระบบได้ง่ายขึ้น
ช่วยให้ขอ้ มูลที่นาเข้าสู่ระบบมีรูปแบบเดียวกัน
ช่วยป้ องกันความผิดพลาดในระหว่างการป้ อนข้อมูล
รูปแบบของ GUI
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
Text Box
Radio Button
Check Button
List box
Drop-down List Box
Combination Box
(Combo Box)
Spin Box (Spinner Box)
Menu bars
Toolbars
Dialog boxes
Toggle buttons
Scroll bars
Calendars
Status Bar
ตัวอย่ าง Graphic User Interface
Radio Button
TextBox
ComboBox
ListBox
Common GUI Components
Text box
List
box
Drop
down
list
Can edit
Spin
box
Radio
button
Check
box
Button
Advanced GUI Components
Advanced GUI Components
Input Prototype for
Data Maintenance
Input Prototype for Transaction
Input Prototype for Data
Maintenance
Input Prototype for Web Interface
Input Prototype for Web Interface
การควบคุมความถูกต้ องใชนระหว่ างป้ อนข้ อมูล
(Controlling Data Input)
•
•
•
•
•
ควรตรวจสอบชนิดของข้อมูล
ควรตรวจสอบการป้ อนข้อมูลไม่ครบตามที่ระบุไว้
ควรตรวจสอบรู ปแบบที่ป้อนข้อมูล
ควรตรวจสอบค่าสู งสุ ดและต่าสุ ดของข้อมูล
ควรตรวจสอบความครบถ้วนของข้อมูลในแต่ละฟิ ลด์
การตอบสนองของระบบ
(Providing Feedback)
มีอยูด่ ว้ ยกัน 3 ชนิด คือ
1. แจ้งสถานะการทางาน (Status Information)
2. แสดงความพร้อมในการรับคาสัง่ (Prompting Cues)
3. ข้อความแจ้งหรื อเตือนเมื่อมีขอ้ ผิดพลาด (Error/Warning
Messages)
แจ้งสถานะการทางาน (Status Information)
• แจ้งให้ผใู ้ ช้ทราบถึงความสถานะปัจจุบนั ในกาทางานของระบบ เช่น
• แสดงเลขหน้าที่กาลังทางานอยู่
• แสดงความคืบหน้าในการประมวลผล
Combination of Text and Graphics for End User feedback
แสดงความพร้อมในการรับคาสัง่
(Prompting Cues)
• เป็ นการออกแบบเพื่อแจ้งสถานะความพร้อมในการรับคาสั่ง
• เช่น หน้า Login เข้าระบบ cursor กระพริ บรอรับ username
• หรื อ กรุ ณาป้ อนรหัสวิชา :_ _ _-_ _ _
ข้อความแจ้งหรื อเตือนเมื่อมีขอ้ ผิดพลาด
(Error/Warning Messages)
• การแสดงข้อความเมื่อเกิดข้อผิดพลาด และแนะแนวทางในการแก้ไข
เพื่ออธิบายให้ผใู ้ ช้สามารถแก้ไขปัญหาด้วยตนเองได้
การแสดงส่ วน้่ วยเหลือ (Help)
แนวทางการใช้ Help มีลกั ษณะ ดังนี้
1. สามารถใช้งานง่าย (Simplicity)
2. มีการจัดรู ปแบบอย่างเป็ นระเบียบ (Organization)
3. มีการแสดงตัวอย่าง (Example)
ตัวอย่าง Help
Poorly designed help display
Improved designed help display
ตัวอย่าง Help
การออกแบบควบคุมการเข้ าถึงข้ อมูลของผู้ใช้้
1. จากัดความสามารถในการมองเห็นข้อมูลจากฐานข้อมูล
(View/Subschema)
2. สิ ทธิในการเข้าถึงข้อมูล (Authorization Rules)
3. การเข้ารหัส (Encryption Procedures)
4. การตรวจสอบการเข้าใช้ระบบ (Authentication
schemas)
การออกแบบลาดับการเ้ื่อมโยงจอภาพ
•
•
เป็ นการออกแบบลาดับของการแสดงส่ วนติดต่อกับผูใ้ ช้ของ
โปรแกรม หรื อลาดับของการแสดงส่ วน User Interface ทางหน้าจอ
คอมพิวเตอร์
แผนภาพแสดงลาดับการเชื่อมโยงจอภาพ (Dialogues Diagram)
ประกอบไปด้วย 3 ส่ วน คือ
1. ส่ วนบน: เลขลาดับหน้าจอ
2. ส่ วนกลาง: ชื่อหน้าจอการทางาน
3. ส่ วนล่าง: เลขลาดับหน้าจอที่อา้ งอิงมา ต่อไป หรื อ ย้อนกลับ
Dialogues Diagram
• Dialogues Diagram เป็ นแผนภาพแสดงลาดับการเชื่อมโยง
ของจอภาพ
• สัญลักษณ์
เลขลาดับหน้าจอ
ชื่อหน้าจอการทางาน
เลขลาดับที่อา้ งอิงมา
ตัวอย่าง Dialogue diagram for
Customer Information System
การออกแบบรายงาน
• เป็ นไปตามรู ปแบบรายงานที่ระบบเดิมมี หรื อต้องการ
• หากไม่มี สิ่ งที่ตอ้ งคานึง
– วันที่พิมพ์รายงาน (อาจมีเวลาด้วย)
– ชื่อหน่วยงาน (อาจมีหรื อไม่มีกไ็ ด้ แต่ส่วนใหญ่จะต้องมี)
– ชื่อรายงาน (ชื่อของรายงานอยูก่ ลางหน้ากระดาษ ชื่อโปรแกรมฯ อยูท่ างมุมบน
ด้านขวา หรื อมุมบนด้านซ้าย)
– ระยะเวลาของการพิมพ์รายงาน เช่น ประจาเดือน .....
– รายละเอียด
– ผูส้ งั่ พิมพ์ หรื อผูด้ าเนินการ
ตัวอย่ างรายงาน
•
•
•
•
•
•
รายงานสรุ ปยอดซื้อประจาปี
รายงานรายการซื้อประจาปี
รายงานสรุ ปยอดซื้อปัจจุบนั
สิ นค้าคงเหลือ ณ วันที่ ....
รายงานสิ นค้าที่ตอ้ งสัง่ ซื้อ
ฯลฯ
แบบฝึ กหัด
• ออกแบบ User Interface หน้าจอรับคาสั่งซื้ อ Pizza โดยมีรายละเอียด
ดังนี้
– ลูกค้าโทรมาสัง่ Pizza หรื อมาซื้อที่ร้าน
– ถ้าโทรมาสัง่ สามารถตรวจสอบที่อยูจ่ ากเบอร์โทรศัพท์ที่เคยโทรมาก่อนหน้า ถ้าเป็ นลูกค้า
ใหม่ตอ้ ง input ข้อมูลของลูกค้าใหม่ดว้ ย
– แจ้งข้อมูลรายการ Pizza และโปรโมชัน่
– เมื่อลูกค้าเลือกรายการเรี ยบร้อยแล้ว ทวนคาสัง่ ซื้ อ และบอกราคารวมทั้งสิ้ น และเวลาการ
จัดส่ ง
• และออกแบบใบเสร็ จรับเงิน
Your Work
• ให้นกั ศึกษาออกแบบ User Interface และ วาด Dialogue
Diagram ของระบบงานที่จะนาเสนอ