Bài giảng Hệ thống thông tin: Chương 9 - GV. Lê Thị Quỳnh Nga

Faculty of MIS
Faculty of MIS
Chương 9
Thiết Kế Giao Diện & Đối Thoại
Faculty of MIS
Faculty of MIS
GV: LÊ THỊ QUỲNH NGA
Faculty of MIS
Faculty of MIS
Nội Dung

Giải thích tiến trình thiết kế giao diện & đối thoại.

Các phương pháp áp dụng cho tương 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 hưởng đến khả năng sử dụng
chúng.

Mô tả các hướ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 người dùng đồ họa.
Faculty of MIS
Faculty of MIS
Faculty of MIS
Faculty of MIS
Thiết Kế Giao Diện /đố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ự đối thoại
Faculty of MIS
Faculty of MIS
Tương tự như thiết
kế form, nhưng còn
bao gồm đặc tả
trình tự đối thoại
Đặc Tả Thiết Kế Giao Diện /đối thoại
Faculty of MIS
Faculty of MIS
Đặc Tả Thiết Kế Giao Diện /đối thoại
a. Tổng Quan
-
Tên giao diện/đối thoại
-
Đặc trưng người sử dụng (ai là người dùng): kinh
nghiệm, học vấn, tính cách
-

Đặc trưng của nhiệm vụ (mục đích là gì?)
-
Đặc trưng của HT (các phần mềm HT): tác động tới
các thiết bị và cách thức tương tác.
-
Đặc trưng của môi trường (tương tác với hệ ngoài
nào) : vai trò của người dùng, độ chiếu sáng, âm
thanh, …
Faculty of MIS
Faculty of MIS
Đặc Tả Thiết Kế Giao Diện /đối thoại
b. Mẫu thiết kế giao diện/đối thoại
-
Mẫu thiết kế giao diện/đối thoại
-
Biểu đồ trình tự đối thoại & mô tả thao tác sử dụng
c. Kiểm thử & đá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 độ hoàn thành, tỉ
lệ lỗi, thời gian còn nhớ được sau lần sử dụng cuối,
sự thoả mãn của người dùng & nhận thức khác
Faculty of MIS
Faculty of MIS
Các Phương Pháp Tương Tác

Giao diện (Interface): phương pháp mà

người dùng tương tác với HTTT

Các phương pháp tương tác chung

Ngôn ngữ lệnh (Command line)

Thực đơn (Menu)

Biểu mẫu (Form)

Họa tiết (Object-based)

Ngôn ngữ tự nhiên (Natural language)
Faculty of MIS
Faculty of MIS
Tương tác bằng Ngôn ngữ lệnh

Người dùng nhập các lệnh tường minh
vào HT để gọi thực hiện thao tác

Ví dụ ở MS DOS:

COPY C:PAPER.DOC A:PAPER.DOC

Sao chép tập tin từ đĩa C: vào đĩa A:

Bao gồm các phím nóng & phím chức
năng
Faculty of MIS
Faculty of MIS

Các Phương Pháp Tương Tác

Giao diện (Interface): phương pháp mà
người dùng tương tác với HTTT

Các phương pháp tương tác chung

Ngôn ngữ lệnh (Command line)

Thực đơn (Menu)

Biểu mẫu (Form)

Họa tiết (Object-based)

Ngôn ngữ tự nhiên (Natural language)
Faculty of MIS
Faculty of MIS
Tương Tác Bằng Thực Đơn

Danh sách các tùy chọn được cung cấp & lệnh
cụ thể sẽ được gọi thực hiện khi người dùng
chọn 1 tùy chọn của thực đơn

Có 2 loại thực đơn phổ biến:

Thực đơn con (Pop-up): Thực đơn đặt gần vị trí con
trỏ chuột

Thực đơn kéo thả (Drop-down): Điểm truy xuất thực

đơn đặt ở dòng đầu của display, thực đơn thả xuống
khi điểm truy xuất được nấp chuột
Faculty of MIS
Faculty of MIS
Faculty of MIS
Faculty of MIS
Các Hướng Dẫn Thiết Kế Thực Đơn

Từ dùng: Tựa đề có nghĩa, động từ lệnh rõ
ràng, phối hợp chữ in & chữ thườ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ài
màn hình

Lựa chọn: Phương pháp lựa chọn dễ dàng, rõ
ràng & nhất quán

Highligh: chỉ các tùy chọn được chọn (selected
options) hay các tùy chọn không sẵn sàng
(unavailable options)
Faculty of MIS
Faculty of MIS
Tương Tác Bằng Thực Đơn
Faculty of MIS
Faculty of MIS
Tương Tác Bằng Thực Đơn
Faculty of MIS
Faculty of MIS

Các Phương Pháp Tương Tác

Giao diện (Interface): phương pháp mà
người dùng tương tác với HTTT

Các phương pháp tương tác chung

Ngôn ngữ lệnh (Command line)

Thực đơn (Menu)

Biểu mẫu (Form)

Họa tiết (Object-based)

Ngôn ngữ tự nhiên (Natural language)
Faculty of MIS
Faculty of MIS
Tương Tác Bằng Biểu Mẫu

Cho phép người dùng điền vào các chỗ trống khi
làm việc với HT

Các đo lường thiết kế hiệu quả:

Tiêu đề vùng & tựa đề dễ hiểu

Các vùng đượ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ài vùng thích hợp

Tối thiểu hóa nhu cầu cuốn cửa sổ
Faculty of MIS
Faculty of MIS
Faculty of MIS
Faculty of MIS
Các Phương Pháp Tương Tác

Giao diện (Interface): phương pháp mà
người dùng tương tác với HTTT

Các phương pháp tương tác chung

Ngôn ngữ lệnh (Command line)

Thực đơn (Menu)

Biểu mẫu (Form)

Họa tiết (Object-based)

Ngôn ngữ tự nhiên (Natural language)
Faculty of MIS
Faculty of MIS
Tương Tác Bằng Họa Tiết


Các ký hiệu được dùng để biểu diễn lệnh
hay chức năng.

Họa tiết (Icons):

Biểu tượng hình ảnh giống như 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 người dùng
Faculty of MIS
Faculty of MIS
Tương Tác Bằng Họa Tiết
Tương tác bằng họa tiết với PowerDesigner
Faculty of MIS
Faculty of MIS
Các Phương Pháp Tương Tác

Giao diện (Interface): phương pháp mà
người dùng tương tác với HTTT

Các phương pháp tương tác chung

Ngôn ngữ lệnh (Command line)

Thực đơn (Menu)

Biểu mẫu (Form)


Họa tiết (Object-based)

Ngôn ngữ tự nhiên (Natural language)
Faculty of MIS
Faculty of MIS
Tương 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)
Faculty of MIS
Faculty of MIS
Các Thiết Bị Tương Tác

Bàn Phím
(Keyboard)

Con Chuột
(Mouse)

Cần điều khiển
(Joystick)

Bóng xoay
(Trackball)

Màn hình cảm ứng
(Touch Screen)


Bút từ (Light Pen)

Bảng đồ họa nhỏ
(Graphics Tablet)

Âm thanh (Voice)
Faculty of MIS
Faculty of MIS
Thiết Kế Giao Diện

Dùng dạng thức chuẩn tương tự biểu mẫu
& báo cáo trên giấy

HT điều khiển (navigation) từ trái qua phải, từ
trên xuống dưới

Năng độ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 năng