Chuong 9 Thi?t K? Giao Di?n

1
Chuong 9 Thi?t K? Giao Di?n Ð?i Tho?i
Faculty of MIS
GV LÊ TH? QU?NH NGA
2
N?i Dung

• Gi?i thích ti?n trình thi?t k? giao di?n d?i
  tho?i.
• Các phuong pháp áp d?ng cho tuong tác v?i HT.
• Li?t kê mô t? các thi?t b? nh?p khác nhau các
  y?u t? ?nh hu?ng d?n kh? nang s? d?ng chúng.
• Mô t? các hu?ng d?n cho vi?c thi?t k? khuôn m?u
  giao di?n, c?u trúc các vùng nh?p li?u, ph?n h?i,
  tr? giúp HT.
• Thi?t k? giao di?n ngu?i dùng d? h?a.

3
(No Transcript)
4
Thi?t K? Giao Di?n /d?i tho?i (Interface/Dialogue
Design)

• Khuôn d?ng (Layout of widgets, text, table
  data)
• C?u trúc nh?p li?u (tab order)
• Ki?m soát nh?p li?u d?ng th?c giá tr? h?p l?
• Ph?n h?i (prompting, status, warning, error
  messages)
• Trình t? d?i tho?i

5
Ð?c T? Thi?t K? Giao Di?n /d?i tho?i
Tuong t? nhu thi?t k? form, nhung còn bao g?m
d?c t? trình t? d?i tho?i
6
Ð?c T? Thi?t K? Giao Di?n /d?i tho?i

• T?ng Quan
• Tên giao di?n/d?i tho?i
• Ð?c trung ngu?i s? d?ng (ai là ngu?i dùng) kinh
  nghi?m, h?c v?n, tính cách
• Ð?c trung c?a nhi?m v? (m?c dích là gì?)
• Ð?c trung c?a HT (các ph?n m?m HT) tác d?ng t?i
  các thi?t b? và cách th?c tuong tác.
• Ð?c trung c?a môi tru?ng (tuong tác v?i h? ngoài
  nào) vai trò c?a ngu?i dùng, d? chi?u sáng, âm
  thanh,

7
Ð?c T? Thi?t K? Giao Di?n /d?i tho?i

• M?u thi?t k? giao di?n/d?i tho?i
• M?u thi?t k? giao di?n/d?i tho?i
• Bi?u d? trình t? d?i tho?i mô t? thao tác s?
  d?ng
• Ki?m th? dánh giá tính kh? d?ng
• Ki?m th? m?c tiêu
• Ki?m th? các th? t?c
• Ki?m th? k?t qu? th?i gian h?c, t?c d? hoàn
  thành, t? l? l?i, th?i gian còn nh? du?c sau l?n
  s? d?ng cu?i, s? tho? mãn c?a ngu?i dùng nh?n
  th?c khác

8
Các Phuong Pháp Tuong Tác

• Giao di?n (Interface) phuong pháp mà ngu?i dùng
  tuong tác v?i HTTT
• Các phuong pháp tuong tác chung
• Ngôn ng? l?nh (Command line)
• Th?c don (Menu)
• Bi?u m?u (Form)
• H?a ti?t (Object-based)
• Ngôn ng? t? nhiên (Natural language)

9
Tuong tác b?ng Ngôn ng? l?nh

• Ngu?i dùng nh?p các l?nh tu?ng minh vào HT d? g?i
  th?c hi?n thao tác
• Ví d? ? MS DOS
• COPY CPAPER.DOC APAPER.DOC
• Sao chép t?p tin t? dia C vào dia A
• Bao g?m các phím nóng phím ch?c nang

10
Các Phuong Pháp Tuong Tác

• Giao di?n (Interface) phuong pháp mà ngu?i dùng
  tuong tác v?i HTTT
• Các phuong pháp tuong tác chung
• Ngôn ng? l?nh (Command line)
• Th?c don (Menu)
• Bi?u m?u (Form)
• H?a ti?t (Object-based)
• Ngôn ng? t? nhiên (Natural language)

11
Tuong Tác B?ng Th?c Ðon

• Danh sách các tùy ch?n du?c cung c?p l?nh c?
  th? s? du?c g?i th?c hi?n khi ngu?i dùng ch?n 1
  tùy ch?n c?a th?c don
• Có 2 lo?i th?c don ph? bi?n
• Th?c don con (Pop-up) Th?c don d?t g?n v? trí
  con tr? chu?t
• Th?c don kéo th? (Drop-down) Ði?m truy xu?t th?c
  don d?t ? dòng d?u c?a display, th?c don th?
  xu?ng khi di?m truy xu?t du?c n?p chu?t

12
(No Transcript)
13
Các Hu?ng D?n Thi?t K? Th?c Ðon

• T? dùng T?a d? có nghia, d?ng t? l?nh rõ ràng,
  ph?i h?p ch? in ch? thu?ng
• T? ch?c Nguyên t?c t? ch?c nh?t quán
• Ð? dài t?t c? các tùy ch?n n?m trong d? dài màn
  hình
• L?a ch?n Phuong pháp l?a ch?n d? dàng, rõ ràng
  nh?t quán
• Highligh ch? các tùy ch?n du?c ch?n (selected
  options) hay các tùy ch?n không s?n sàng
  (unavailable options)

14
Tuong Tác B?ng Th?c Ðon
15
Tuong Tác B?ng Th?c Ðon
16
Các Phuong Pháp Tuong Tác

• Giao di?n (Interface) phuong pháp mà ngu?i dùng
  tuong tác v?i HTTT
• Các phuong pháp tuong tác chung
• Ngôn ng? l?nh (Command line)
• Th?c don (Menu)
• Bi?u m?u (Form)
• H?a ti?t (Object-based)
• Ngôn ng? t? nhiên (Natural language)

17
Tuong Tác B?ng Bi?u M?u

• Cho phép ngu?i dùng di?n vào các ch? tr?ng khi
  làm vi?c v?i HT
• Các do lu?ng thi?t k? hi?u qu?
• Tiêu d? vùng t?a d? d? hi?u
• Các vùng du?c t? ch?c theo nhóm logic
• Có các ranh gi?i phân bi?t
• Các giá tr? m?c nhiên (Default values)
• Th? hi?n d? dài vùng thích h?p
• T?i thi?u hóa nhu c?u cu?n c?a s?

18
(No Transcript)
19
Các Phuong Pháp Tuong Tác

• Giao di?n (Interface) phuong pháp mà ngu?i dùng
  tuong tác v?i HTTT
• Các phuong pháp tuong tác chung
• Ngôn ng? l?nh (Command line)
• Th?c don (Menu)
• Bi?u m?u (Form)
• H?a ti?t (Object-based)
• Ngôn ng? t? nhiên (Natural language)

20
Tuong Tác B?ng H?a Ti?t

• Các ký hi?u du?c dùng d? bi?u di?n l?nh hay ch?c
  nang.
• H?a ti?t (Icons)
• Bi?u tu?ng hình ?nh gi?ng nhu tùy ch?n x? lý mà
  chúng bi?u di?n
• Dùng ít kho?ng tr?ng màn hình
• Có th? hi?u 1 cách d? dàng b?i ngu?i dùng

21
Tuong Tác B?ng H?a Ti?t
Tuong tác b?ng h?a ti?t v?i PowerDesigner
22
Các Phuong Pháp Tuong Tác

• Giao di?n (Interface) phuong pháp mà ngu?i dùng
  tuong tác v?i HTTT
• Các phuong pháp tuong tác chung
• Ngôn ng? l?nh (Command line)
• Th?c don (Menu)
• Bi?u m?u (Form)
• H?a ti?t (Object-based)
• Ngôn ng? t? nhiên (Natural language)

23
Tuong Tác B?ng Ngôn Ng? T? Nhiên

• Input output là ngôn ng? nói t? nhiên
• D?a trên nghiên c?u trí tu? nhân t?o (artificial
  intelligence)

24
Các Thi?t B? Tuong Tác

• Bàn Phím (Keyboard)
• Con Chu?t (Mouse)
• C?n di?u khi?n (Joystick)
• Bóng xoay (Trackball)

• Màn hình c?m ?ng (Touch Screen)
• Bút t? (Light Pen)
• B?ng d? h?a nh? (Graphics Tablet)
• Âm thanh (Voice)

25
Thi?t K? Giao Di?n

• Dùng d?ng th?c chu?n tuong t? bi?u m?u báo cáo
  trên gi?y
• HT di?u khi?n (navigation) t? trái qua ph?i, t?
  trên xu?ng du?i
• Nang d?ng nh?t quán
• Di chuy?n t? do gi?a các vùng
• M?i phím l?nh gán cho 1 ch?c nang

26
C?u Trúc D? Li?u Nh?p (Structuring Data Entry)
Entry Không bao gi? dòi h?i d? li?u dã có s?n trong HT hay có th? x? lý d? t?o ra du?c
Defaults Luôn cung c?p giá tr? ng?m d?nh trong vùng thích h?p
Units C?n ch? rõ don v? do c?a d? li?u nh?p
Replacement Dùng ký t? thay th? khi thích h?p
Captioning Luôn d?t 1 ph?n thích h?p vào 1 vùng (d?u ngo?c don, kho?ng tr?ng, g?ch ngang)
Format Cung c?p m?u d?nh d?ng (d?u phân d?nh ngày, tháng nam)
Justify T? d?ng cân ch?nh d? li?u nh?p
Help Cung c?p s? tr? giúp nh?y c?m tao ng? c?nh khi thích h?p
27
Entering Text
28
Ki?m Soát D? Li?u Nh?p

• M?c tiêu gi?m sai sót khi nh?p li?u
• Sai sót ph? bi?n
• Appending Thêm ký t?
• Truncating M?t ký t?
• Transcripting nh?p d? li?u không h?p l?
• Transposing d?o ngu?c tr?t t? ký t?

29
Các Lo?i Ki?m Tra H?p L?

• Vùng tr? (Range)
• S? h?p lý (Reasonableness)
• Kích thu?c (Size)
• Giá tr? (Values)

• L?p hay k?t c?u
• Các giá tr? mong d?i
• D? li?u thi?u
• Khuôn m?u (Pictures/Templates)

30
Thông Tin Ph?n H?i (Feedback Messages)

• Thông tin tr?ng thái thông báo cho ngu?i dùng
  cái gì dang di?n ra, h?u d?ng khi ngu?i dùng ph?i
  ch? dáp ?ng c?a HT
• Nh?c nh? (Prompting cues) nói v?i ngu?i dùng khi
  nào thì c?n nh?p li?u, làm th? nào d? cung c?p
  input
• C?nh báo hay sai sót (Warning or Error) Thông
  báo ngu?i dùng cái gì sai

31
Cung C?p Tr? Giúp

• Ð?t b?n vào v? trí ngu?i dùng khi thi?t k? tr?
  giúp
• Hu?ng d?n
• Ðon gi?n
• Thông tin tr? giúp nên ng?n g?n di vào di?m
  chính. Cho ngu?i dùng ch? cái mà h? c?n bi?t,
  cho kh? nang có th? tìm thêm thông tin
• Có t? ch?c
• Thông tin trong thông báo tr? giúp ph?i du?c chú
  ý c?a ngu?i dùng. Dùng danh sách chia nh? thành
  nh?ng m?ng qu?n lý du?c
• Ch? cho th?y (Show)
• Hu?ng d?n 1 cách tu?ng minh cho ngu?i dùng làm
  th? nào d? th?c hi?n 1 thao tác. Cung c?p ví d?
  thích h?p.

32
(No Transcript)
33
Ð?i Tho?i là gì?

• Trình t? tuong tác gi?a HT ngu?i dùng
• Thi?t k? d?i tho?i bao g?m
• Thi?t k? trình t? d?i tho?i (dialogue sequence)
• Xây d?ng b?n m?u (prototype)
• Ðánh giá tính kh? d?ng

34
Bi?u Ð? Ð?i Tho?i (Dialogue Diagramming)
1 phuong pháp hình th?c d? thi?t k? bi?u di?n
các d?i tho?i ngu?i-máy b?ng cách dùng bi?u d?
dòng h?p
35
Bi?u d? d?i tho?i dua ra trình t?, nhánh di?u
ki?n, các d?i tho?i l?p l?i.
36
(No Transcript)
37
Thi?t K? Giao Di?n Ð?i Tho?i Trong Môi Tru?ng
Ð? H?a

• Hãy tr? thành ngu?i dùng chuyên trong môi tru?ng
  d? h?a.
• Hi?u các ?ng d?ng khác du?c thi?t k? nhu th? nào.
• Hi?u các chu?n.
• Ð?t du?c s? hi?u bi?t v? các ngu?n s?n có chúng
  có th? du?c dùng nhu th? nào.
• Tr? nên quen v?i các chu?n cho th?c don bi?u
  m?u.

38
Các V?n Ð? Trong Thi?t k? Ð?i Tho?i Giao Di?n
Ngu?i Dùng Ð? H?a

• M?c tiêu là d? thi?t l?p trình t? các màn hình mà
  ngu?i dùng s? g?p khi làm vi?c v?i HT.
• Kh? nang c?a các môi tru?ng GUI d? nh?y t? ?ng
  d?ng này d?n ?ng d?ng khác hay t? màn hình này
  d?n màn hình khác t?o ra th? thách cho trình t?.
• 1 cách ti?p c?n là làm cho ngu?i dùng luôn gi?i
  quy?t yêu c?u d?i v?i thông tin tru?c khi x? lý.
• Bi?u d? d?i tho?i giúp nhà phân tích qu?n lý t?t
  hon s? ph?c t?p c?a thi?t k? giao di?n d? h?a.