Transcript User Interface - reg.ksu.ac.th

การออกแบบส่ วนติดต่ อผู้ใช้
(User Interfaces)
1
วัตถุประสงค์
1.
2.
อธิบายกระบวนการออกแบบส่ วนติดต่อกับผูใ้ ช้ และแผนภาพแสดง
ลาดับการเชื่อมโยงจอภาพได้
สามารถประยุกต์ใช้ขอ้ แนะนาในการออกแบบส่ วนติดต่อกับผูใ้ ช้กบั
ระบบงานที่ทาการศึกษาได้
2
User Interfaces
►User
Interface หมายถึง
 ส่ วนติดต่อระหว่างผูใ้ ช้กบั ระบบ
 เพื่อการเตรี ยมสารสนเทศและการนาสารสนเทศนั้นไปใช้โดย
การตอบโต้กบั คอมพิวเตอร์
3
กระบวนการในการออกแบบ
User Interface
1.
2.
3.
รวบรวมข้อมูลการติดต่อกับระบบทางหน้าจอของผูใ้ ช้
ออกแบบส่ วนติดต่อกับระบบอย่างคร่ าว ๆ
ใช้ Case Tools สร้างตัวต้นแบบ (Prototyping)
และทดสอบ
4
รู ปแบบของ User Interfaces
► เพื่อให้ผใู ้ ช้งานสามารถโต้ตอบกับระบบอย่างมีประสิ ทธิ ภาพ
► นิ ยมใช้แบบกราฟิ ก (Graphic User Interface :GUI)
► มีรูปแบบดังนี้ คือ





การโต้ตอบด้วยคาสั่ง (Command Language Interaction)
การโต้ตอบด้วยเมนูคาสั่ง (Menu Interaction)
การโต้ตอบด้วยแบบฟอร์ม (Form Interaction)
การโต้ตอบด้วยการทางานเชิงวัตถุ (Object-Based Interaction)
การโต้ตอบด้วยภาษามนุษย์ (Natural Language Interaction)
5
การโต้ ตอบด้ วยคาสั่ ง
(Command Language Interaction)
►
►
►
►
เป็ นการโต้ตอบกับระบบโดยที่ผใู้ ช้จะต้อง
พิมพ์คาสัง่ ลงในช่องป้ อนคาสัง่ เพื่อกระตุน้
ให้เกิดการทางานในระบบ
ผูใ้ ช้จะต้องจาคาสัง่ ไวยากรณ์ และกฎเกณฑ์
ต่างๆ
เช่น ผูใ้ ช้ที่ชานาญการใช้ระบบปฏิบตั ิการ
DOS
ลดความนิยมในปัจจุบนั
คำสง่ ั copy ไฟล์จำก drive c: ไปย ัง drive a:
C:\copy ex1.doc a:ex1.doc
6
หน้ าจอพรอมท์
(Prompt Screens)
Do you wish to add, edit, delete, display, or print records?
>PRINT
Which report do you want printed?
>CLOSED CLASSES
Printing…
Do you want another report?
>YES
Which report do you want printed?
OPEN CLASSES
Printing…
Do youN want another report?
> O
7
หน้ าจอพรอมท์
(Prompt Screens)
Do you wish to add, edit, delete, display, or print records?
>ADD
What source document will be used to add the records?
>REGISTRATION
8
การโต้ ตอบด้ วยเมนูคาสั่ ง
(Menu Interaction)
►เป็ นการโต้ตอบกับระบบด้วยการแสดงเมนูคาสัง่
โดยผูใ้ ช้ไม่
จาเป็ นต้องป้ อนคาสัง่ เอง
►รู ปแบบเมนูมีดงั นี้ คือ
►Pull-down
Menu
►Pop-up Menu
9
Pull-down Menu
Pull-down Menu
เมนูแสดงคำสงั่ โดยแบ่ง
รำยกำรของคำสงั่ เป็ น
้ กจะ
หมวดหมู่ เมือ
่ ผู ้ใชคลิ
แสดงรำยกำรคำสงั่ จำก
บนลงล่ำง
10
Pop-up Menu
Pop-up Menu เมนู
้ ก
แสดงคำสงั่ เมือ
่ ผู ้ใชคลิ
เลือกวัตถุ หรือ object ใด
ๆ ในจอภำพ คำสงั่ หรือ
คุณสมบัตท
ิ เี่ กีย
่ วข ้องกับ
object นัน
้ จะถูกแสดง
ออกมำ
11
หลักเกณฑ์ ในการออกแบบเมนูคาสั่ ง
1.
2.
3.
4.
5.
6.
แต่ละเมนูคาสั่งควรเลือกใช้คาสั่งที่สื่อความหมายได้ชดั เจน
ควรมีการใช้ตวั อักษรพิมพ์ใหญ่หรื อตัวอักษรพิมพ์เล็กตามความเหมาะสม
ควรมีการจัดกลุ่มคาสัง่ ที่มีความเกี่ยวข้องกันไว้ในกลุ่มเดียวกัน
ไม่ควรมีจานวนเมนูคาสัง่ มากเกินไป
ควรมีเมนูยอ่ ยสาหรับเมนูคาสัง่ ที่มีการทางานย่อยภายในมากเกินไป
เมื่อมีการเลือกเมนูคาสั่ง ควรออกแบบให้มีแถบสี ปรากฏที่เมนูคาสั่งที่ถูกเลือก
12
Menu Building within a graphical
user interface environment
13
การโต้ ตอบด้ วยแบบฟอร์ ม
(Form Interaction)
► เป็ นการโต้ตอบที่ผใู ้ ช้ระบบจะต้องป้ อนข้อมูลลงในช่องว่างที่อยูใ่ น
แบบฟอร์มที่แสดงหน้าจอคอมพิวเตอร์
► คล้ายการกรอกแบบฟอร์ มลงในกระดาษ
► ชื่อของช่องป้ อนข้อมูลต้องสื่ อความหมาย
► แบ่งส่ วนของข้อมูลบนฟอร์ มให้เหมาะสม
ั ช่องป้ อนข้อมูลที่ตอ้ งใช้ขอ้ มูลนั้นบ่อยครั้ง
► ควรแสดงข้อมูลเริ่ มต้นให้กบ
► ช่องป้ อนข้อมูลไม่ควรยาวมากจนเกินไป
14
ตัวอย่ างการโต้ ตอบด้ วยแบบฟอร์ ม
15
การโต้ ตอบเชิงวัตถุ
(Object-Based Interaction)
► เป็ นการโต้ตอบกับระบบที่ใช้สญ
ั ลักษณ์
► สัญลักษณ์เป็ นตัวแทนคาสัง่ ที่ใช้ในการปฏิบตั ิงาน
► สัญลักษณ์รูปภาพแทนคาสัง่ การทางานเรี ยกว่า ไอคอน
(Icon)
► ประหยัดพื้นที่บนหน้าจอ
16
การโต้ ตอบด้ วยภาษามนุษย์
(Natural Language Interaction)
►เป็ นการโต้ตอบกับระบบด้วยการใช้เสี ยงพูดของผูใ้ ช้
ระบบ
►ใช้เสี ยงพูดทั้งการนาข้อมูลเข้าและออกจากระบบ
17
การออกแบบ Interfaces
► การออกแบบการจัดวาง (Layouts)
ของหน้าจอ
► โครงสร้างของการป้ อนข้อมูล (Structure Data Entry)
► การควบคุมความถูกต้องในระหว่างป้ อนข้อมูล (Controlling Data
Input)
► การตอบสนองของระบบ (Providing Feedback)
► การแสดงส่ วนช่วยเหลือ (Help)
► การออกแบบการควบคุมการเข้าถึงข้อมูลของผูใ้ ช้
► การออกแบบลาดับการเชื่อมโยงจอภาพ (Dialogue Design)
18
การออกแบบการจัดวางของหน้ าจอ
1.
2.
3.
4.
5.
6.
7.
ส่ วนหัวเรื่ อง: ใช้แสดงชื่อของเอกสารหรื อฟอร์มนั้น ๆ
ส่ วนแสดงลาดับและวันที่: ใช้แสดงเลขลาดับและวันที่หรื อเวลา
ส่ วนแนะนาหรื อแนวทางในการใช้: ใช้อธิ บายข้อแนะนาการใช้ฟอร์ม
ส่ วนรายละเอียดข้อมูล: ใช้แสดงสาระสาคัญของเอกสารหรื อฟอร์ม
ส่ วนแสดงผลรวม: ใช้แสดงค่าผลรวม เช่น ยอดเงิน ยอดขาย เป็ นต้น
ส่ วนการลงนามผูม้ ีอานาจ: ใช้แสดงนามผูม้ ีอานาจของเอกสารหรื อฟอร์ม
ส่ วนแสดงความคิดเห็น: ใช้ในการเขียนข้อความที่เป็ นความคิดเห็น
19
รู ปแบบของเอกสารต้ นฉบับ
20
KING
MONGKUT
UNIVERSITY
Last Name
REGISTRATION FORM
Student Number
First Name
Street Address
Course
Subj. Number
Initial
Local Telephone Number
City
Section
(A, A1, 01)
Cr
Semester/Year
Days
Date
State
Times
Zip
Room Bidg.
Total Credits =
Date Received/Initial
Advisor Approval
Date
21
heading
zone
GALLAGHER IMPORTS
EXPENSE VOUCHER
EMPLOYEE
EMPLOYEE NUMBER
DEPARTMENT
control
zone
List each expense separately. Attach receipts for all expenses except those for meals, personal car use, parking, tolls,taxis, and tips.
Date
Automobile
Miles Cost
Meals
Br/Lun/Din Cost
Lodging
Other
Description Cost
Total
Expense
body
zone
Totals:
I certify that this statement of account is correct.
authorization
Signature of Employee
zone
Approved By
Date
Date
totals
zone
Less Advance
Net Total
22
BATES VIDEO CLUB-- MEMBERSHIP APPLICATION
Print the following information:
Name
Address
City
State
Zip Code
Home Phone
Work Phone
Security: Check the applicable box
VISA [ ] Card#
MasterCard [ ]
American Express [ ]
Other [ ] Expiration Date
I agree to the following video club membership terms:
1. I may keep no rented video for longer than seven (7) days.
2. I may have no more than ten (10) rented videos at any one time.
3. If I fall to comply with the above terms, I understand that I will be obligated to return all
rented videos at once, and that my video club membership may then be terminated.
Signed
Date
For office use only:
Accepted: [ ]
Member Number: [
] Date: [
]
23
Rejected: [ ]
BATES VIDEO CLUB - VIDEO RENTAL FORM
Member Number
Date
Title
ID#
Rental Fee Date Returned
Total Rental Amount:
I agree to return the above rented videos within seven (7) days.
Signed:
24
25
การออกแบบหน้ าจอ
การออกแบบหน้าจอทั้งหมดมีจุดมุ่งหมาย 2 อย่าง คือ เพื่อนาเสนอ
ข้อมูลและช่วยในการปฏิบตั ิงานในการใช้ระบบ มีแนวทางมากมายใน
การออกแบบที่ตอ้ งพิจารณาคือหน้าจอทั้งหมดที่ปรากฏควรดึงดูดใจให้
อยากใช้งาน ไม่ควรแน่นเกินไป
26
การออกแบบการจัดวางของหน้ าจอ
► การออกแบบหน้าจอของฟอร์ มหรื อรายงานต่างๆ ควรจะจัดวางรู ปแบบให้เหมือนกับ
เอกสารมากที่สุด
► การเชื่อมโยงการป้ อนข้อมูลในแต่ละรายการหรื อแต่ละฟิ ลด์




ต้องลาดับการเชื่อมโยงในการป้ อนข้อมูลในแต่ละฟิ ลด์
การกรอกจะคล้ายกับการกรอกบนเอกสารจริ ง
เริ่ มกรอกจากซ้ายไปขวา และจากบนลงล่าง
ควรมีความยืดหยุน่ และสอดคล้องในการทางาน สามารถย้าย cursor ไปมาระหว่างฟิ ลด์ที่
ต้องการแก้ไข
27
การออกแบบหน้ าจอรับข้ อมูล
1. เมื่อเข้าไปที่หน้าจอรับข้อมูลเคอร์เซอร์ (Cursor) ต้องอยูท่ ี่
ตาแหน่งแรกของข้อมูลรับตามเนื้อหาของหน้าจอนั้น ตาแหน่งนั้น
ควรอยูม่ ุมบนซ้ายมือ หลังจากผูใ้ ช้ใส่ ขอ้ มูลแล้วเคอร์เซอร์
(Cursor) ควรเลื่อนไปที่ช่องรับข้อมูลถัดไปเสมอ คือ ด้านล่าง
หรื อด้านข้างถัดไปเพื่อให้การป้ อนข้อมูลเป็ นธรรมชาติจากบน
ซ้ายไปขวา แล้วจึงลงมาบรรทัดใหม่
2. ทุกช่องรับข้อมูลต้อมีคาอธิบาย โดยแสดงกากับที่ช่องนั้น ซึ่ง
จะต้องระบุให้ชดั เจนและอยูใ่ นตาแหน่งที่ถูกต้องและควรมี
รู ปแบบเดียวกันเพื่อให้ผใู ้ ช้ไม่สบั สนในการทางาน
28
การออกแบบหน้ าจอรับข้ อมูล
3. ถ้าช่องรับข้อมูลนั้นมีรูปแบบเฉพาะให้แสดงรู ปแบบเฉพาะนั้น
เพื่อให้ผใู ้ ช้ป้อนข้อมูลไม่ผดิ พลาด
4. ในทุกครั้งที่ป้อนข้อมูลในช่องรับข้อมูลนั้นครบถ้วนให้ผใู ้ ช้กด
“Enter” เพื่อไปยังช่องรับข้อมูลถัดไปหรื อในกรณี ที่ใส่ ขอ้ มูล
เท่าจานวนของข้อมูลนั้นแล้ว เคอร์เซอร์ควรไปยังช่องรับข้อมูล
ถัดไปอัตโนมัติเพื่อรับข้อมูลถัดไป เพื่ออานวยความสะดวก
29
การออกแบบหน้ าจอรับข้ อมูล
5. กรณี ขอ้ มูลรับเข้าเป็ นตัวอักษรพิเศษแล้วควรออกแบบให้
สามารถใส่ ตวั อักษรพิเศษอัตโนมัติโดยผูใ้ ช้ไม่ตอ้ งใส่ เอง
6. กรณี ขอ้ มูลรับเข้าต้องการแสดงผลรับเป็ นเลข “0” ให้แสดงโดย
ผูใ้ ช้ไม่ตอ้ งป้ อนเอง
7. กรณี ที่ขอ้ มูลรับเข้าเป็ นจานวนเลขที่นาไปคานวณค่าควรมี “,”
คัน่ หลักพันหรื อจุดทศนิยมขึ้นอัตโนมัติ
8. กรณี ช่องรับข้อมูลนั้นมีค่าที่สามารถกาหนด (Default) ได้
ระบบนั้นควรแสดงค่าที่กาหนดนั้น (Default) ที่ช่องนั้น
30
การออกแบบหน้ าจอรับข้ อมูล
9. สาหรับข้อมูลรับที่เป็ นรหัสที่ตอ้ งมีการตรวจสอบก่อน
บันทึก คือ ค่านั้นมีความสัมพันธ์กบั ค่าอื่นที่บนั ทึกไว้เดิม
แล้ว เมื่อมีการป้ อนรหัสนั้นต้องรับค่านั้นไปตรวจสอบที่
แฟ้ มข้อมูลที่อา้ งถึง
10. ควรมีปุ่มคาสัง่ ต่าง ๆ ตามความเหมาะสมของการใช้งาน
หน้าจอนั้น
11. หลังจากป้ อนข้อมูลในหน้าจอนั้น ๆ สมบูรณ์แล้วและ
ได้รับการตรวจสอบแล้วควรมีการใช้ผใู ้ ช้ได้ตรวจสอบและ
ยืนยันหรื อยกเลิกก่อนบันทึกข้อมูลเข้าเครื่ อง
31
แสดงการป้ อนข้ อมูลตามการจัดเรียงทีไ่ ม่ ถูกต้ อง
START
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
32
แสดงการป้ อนข้ อมูลตามการจัดเรียงทีถ่ ูกต้ อง
START
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
XXXXXX
33
Bad Flow in a Form
34
Good Flow in a Form
35
การออกแบบหน้ าจอรับข้ อมูล
36
หน้ าจอดาต้ าเอนทรี (Data Entry Screen)
37
สิ่ งที่ต้องเตรียมความสามารถของหน้ าจอป้ อนข้ อมูล
►การควบคุมตัวกระพริ บ (Cursor)
►การแก้ไขตัวเลขหรื อข้อมูล
►การใช้คาสัง่ ออก (Exit)
►มีส่วนช่วยเหลือ
(Help)
38
โครงสร้ างของการป้อนข้ อมูล
(Structure Data Entry)
กำรออกแบบโครงสร ้ำงกำรป้ อนข ้อมูล คือ กำร
่ งป้ อน
ออกแบบเพือ
่ กำหนดรูปแบบ หรือลักษณะของชอ
่ กำร
ข ้อมูล เพือ
่ เตรียมควำมสะดวกให ้กับผู ้ใช ้ เชน
กำหนดค่ำเริม
่ ต ้น กำรจัดวำงข ้อมูล เป็ นต ้น
39
มีหลักเกณฑ์การออกแบบดังนี้
 การป้ อนข้ อมูล (Entry) พยายามให้ผใู ้ ช้ป้อนข้อมูลเท่าที่จาเป็ นเท่านั้น
 ค่ าเริ่มต้ น (Default Value) ค่าของข้อมูลใดที่สามารถ
กาหนดค่าเริ่ มให้ได้ ควรใส่ ให้ผใู ้ ช้ทีนที เพื่อเพิม่ ความสะดวก เช่น วันที่ หรื อ
หมายเลข Running Number เป็ นต้น
 หน่ วยของข้ อมูล (Unit) ระบุหน่วยข้อมูลให้ชดั เจน เช่น บาท ดอลลาร์
กิโลกรัม เป็ นต้น
 คาอธิบาย หรือ คาอธิบายช่ องป้ อนข้ อมูล (Caption) แสดง
คาอธิ บายฟิ ลด์วา่ ต้องการให้ผใู ้ ช้ใส่ ขอ้ มูลอะไร เป็ นจัดวางให้เหมาะสม
40
มีหลักเกณฑ์การออกแบบดังนี้
 รู ปแบบของข้ อมูล (Format) ถ้าต้องการให้มีสัญลักษณ์พิเศษ ควร
เตรี ยมสัญลักษณ์เหล่านี้ ให้อตั โนมัติ
 การจัดวางข้ อมูล (Justify) ออกแบบให้มีการจัดวางข้อมูลโดย
อัตโนมัติ เช่นตัวเลขชิดขวา ข้อความชิดซ้าย เป็ นต้น
 ส่ วนช่ วยเหลือ (Help) เตรี ยมส่ วนช่วยเหลือระหว่างผูใ้ ช้ป้อนข้อมูล
เช่นปุ่ ม F1 เพื่อขออ่านคาอธิ บาย
 การติดต่ อกับผู้ใช้ ในการป้ อนข้ อมูลด้ วยกราฟิ ก (GUI)
41
การติดต่ อกับผู้ใช้ แบบกราฟิ ก
(Graphic User Interface: GUI)
► เทคโนโลยีที่นามาใช้ เรี ยกว่า GUI Input Control
► ช่วยให้ผใู ้ ช้ระบบสามารถใช้งานระบบได้ง่ายขึ้น
► ช่วยให้ขอ้ มูลที่นาเข้าสู่ ระบบมีรูปแบบเดียวกัน
► ช่วยป้ องกันความผิดพลาดในระหว่างการป้ อนข้อมูล
42
รู ปแบบของ GUI
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
1.
43
ตัวอย่ างการใช้ GUI ทีใ่ ช้ แทนเมนูหลักของ
ระบบการให้ เกรด น.ศ.
44
เมนูพลูดาวน์ (Pull-Down Menu)
45
หน้ าต่ างป๊ อบอัฟ (Pop-up Window)
46
แสดงเทคนิคทาง GUI 8 แบบในการนาข้ อมูลเข้ า
หรือเลือกคาสั่ ง
47
ตัวอย่ าง Graphic User Interface
Radio Button
TextBox
ListBox
ComboBox
48
49
Common GUI Components
Text box
List
box
Drop
down
list
Can edit
Spin
box
Radio
button
Check
box
Button
50
Advanced GUI Components
51
Advanced GUI Components
(continued)
52
Input Prototype for Transaction
53
Input Prototype for Web Interface
54
Input Prototype for Web Interface
55
การควบคุมความถูกต้ องในระหว่ างป้ อนข้ อมูล
(Controlling Data Input)
► ควรตรวจสอบชนิ ดของข้อมูล
► ควรตรวจสอบการป้ อนข้อมูลไม่ครบตามที่ระบุไว้
► ควรตรวจสอบรู ปแบบที่ป้อนข้อมูล
► ควรตรวจสอบค่าสู งสุ ดและต่าสุ ดของข้อมูล
► ควรตรวจสอบความครบถ้วนของข้อมูลในแต่ละฟิ ลด์
56
การตอบสนองของระบบ
(Providing Feedback)
มีอยูด่ ว้ ยกัน 3 ชนิด คือ
1. แจ้งสถานะการทางาน (Status Information)
2. แสดงความพร้อมในการรับคาสัง่ (Prompting Cues)
3. ข้อความแจ้งหรื อเตือนเมื่อมีขอ้ ผิดพลาด (Error/Warning
Messages)
57
แจ้ งสถานะการทางาน
(Status Information)
►
แจ้งให้ผใู้ ช้ทราบถึงความสถานะปัจจุบนั ในกาทางานของระบบ เช่น
แสดงเลขหน้าที่กาลังทางานอยู่
►
แสดงความคืบหน้าในการประมวลผล
►
Combination of Text and Graphics for End User feedback
58
แสดงความพร้ อมในการรับคาสั่ ง
(Prompting Cues)
เป็ นการออกแบบเพื่อแจ้งสถานะความพร้อมในการรับคาสัง่
► เช่น หน้า Login เข้าระบบ cursor กระพริ บรอรับ username
►
►
หรื อ กรุ ณาป้ อนรหัสวิชา :_ _ _-_ _ _
59
ข้ อความแจ้ งหรือเตือนเมื่อมีข้อผิดพลาด
(Error/Warning Messages)
► การแสดงข้อความเมื่อเกิดข้อผิดพลาด และแนะแนวทางในการแก้ไข เพื่ออธิ บายให้
ผูใ้ ช้สามารถแก้ไขปั ญหาด้วยตนเองได้
60
การแสดงส่ วนช่ วยเหลือ
(Help)
แนวทางการใช้ Help มีลกั ษณะ ดังนี้
1. สามารถใช้งานง่าย (Simplicity)
2. มีการจัดรู ปแบบอย่างเป็ นระเบียบ (Organization)
3. มีการแสดงตัวอย่าง (Example)
61
ตัวอย่ าง Help
Poorly designed help display
Improved designed help display
62
ตัวอย่ าง Help
63
แบบฝึ กหัด
► ออกแบบ User
รายละเอียดดังนี้
Interface หน้าจอรับคาสัง่ ซื้อ Pizza โดยมี
 ลูกค้าโทรมาสัง่ Pizza หรื อมาซื้ อที่ร้าน
 ถ้าโทรมาสั่ง สามารถตรวจสอบที่อยูจ่ ากเบอร์ โทรศัพท์ที่เคยโทรมาก่อนหน้า
ถ้าเป็ นลูกค้าใหม่ตอ้ ง input ข้อมูลของลูกค้าใหม่ดว้ ย
 แจ้งข้อมูลรายการ Pizza และโปรโมชัน่
 เมื่อลูกค้าเลือกรายการเรี ยบร้อยแล้ว ทวนคาสั่งซื้ อ และบอกราคารวมทั้งสิ้ น
และเวลาการจัดส่ ง
► และออกแบบใบเสร็ จรับเงิน
64