Bài giảng Phân tích thiết kế hệ thống thông tin - Chương 9: Thiết kế giao diện

25/02/2016

1

25/02/2016

PHÂN TÍCH THIẾT KẾ
HỆ THỐNG THƠNG TIN
Chương 9. Thiết kế giao diện

25/02/2016

2

Bức tranh PTKTHT

1


25/02/2016

25/02/2016

3

Nội dung
• Giới thiệu
• Nguyên lý thiết kế giao diện người dùng
• Quy trình thiết kế giao diện người dùng
• Thiết kế chuyển hướng giao diện
• Thiết kế giao diện đầu vào

• Thiết kế giao diện đầu ra

25/02/2016

4

Giới thiệu
• Giao diện người dùng: thể hiện hệ thống sẽ tương tác
•
•
•
•
•

của hệ thống và các đối tượng bên ngoài như thế nào.
Các giao diện hệ thống: thể hiện hệ thống trao đổi thông
tin với các hệ thống khác như thế nào
Kỹ thuật định hướng: hỗ trợ cách thức cho người dùng
“yêu cầu” hệ thống làm những gì
Kỹ thuật nhập liệu: định nghĩa cách thức cho người dùng
“yêu cầu” hệ thống làm những gì.
Kỹ thuật xuất thơng tin: định nghĩa cách thức hệ thống
cung cấp thông tin đến người dùng hoặc hệ thống khác
Giao diện người dùng đồ họa: là phương pháp được đa
số mọi người lựa chọn để phát triển ứng dụng

2


25/02/2016

25/02/2016

5

Nguyên lý thiết kế giao diện người dùng
• Bố cục (layout)
• Nội dung trình bày
• Tín thẩm mỹ
• Kinh nghiệp người dùng
• Tính nhất qn
• Hỗ trợ tối đa người dùng

25/02/2016

6

Bố cục màn hình
• Màn hình thường được chia làm 3 khu vực
• Khu vực định hướng (Navigation): ở đầu
• Khu vực trạng thái (Status area): ở dưới
• Khu vực thao tác cơng việc (Work area): ở giữa
• Thơng tin có thể được thể hiện ở nhiều khu vực
• Khu vực giống nhau thường được gom nhóm lại với nhau

3


25/02/2016

25/02/2016

7

Bố cục màn hình
• Người dùng di chuyển tối thiểu từ khu vực này đến khu

vực khác, hoặc từ thông tin này đến thơng tin khác.
• Các khu vực sẽ duy trì nhất qn trong:
• Kích thước
• Hình dạng
• Sắp xếp dữ liệu
• Thể hiện dữ liệu

25/02/2016

8

4


25/02/2016

25/02/2016

9

Nội dung trình bày
• Tất cả các giao diện nên có các tiêu đề
• Thực đơn (menu) nên thể hiện:

• Bạn đang ở đâu?
• Từ đâu bạn có thể đến đây?
• Thơng tin ở mỗi khu vực nên rõ ràng
• Các thuộc tính và nhãn cho thuộc tính nên được lựa chọn

một cách cẩn thận.
• Đưa thơng tin ngày và thông tin số phiên bản cho người
dùng hệ thống

25/02/2016

10

5


25/02/2016

25/02/2016

11

Tính thẩm mỹ
• Giao diện cần được chức năng hóa và lơi cuốn người

dùng
• Tránh sự ép buộc khá nhiều, đặc biệt cho người mới sử
dụng
• Thiết kế văn bản(text) một cách cẩn thận
• Lưu ý font và kích thước

• Tránh sử dụng tất cả các từ viết hoa

25/02/2016

12

Tính thẩm
• Màu sắc và các kểu nên được sử dụng một cách cẩn

thận
• Kiểm thử chất lượng của màu sắc bằng cách thử giao diện với

màn hình trắng đen
• Sử dụng màu sắc để phân cách và phân loại các thành phần.

6


25/02/2016

25/02/2016

13

Kinh nghiệm của người dùng
• Chương trình dễ dàng để học.
• Chương trình dễ dàng để sử dụng cho các chun gia.
• Xem xét để thêm vào các phím tắt cho các chuyên gia

25/02/2016

14

7


25/02/2016

25/02/2016

15

Sự nhất qn
• Cho phép người dùng có thể tiên đốn chuyện gì có thể

xảy ra.
• Giảm tải việc học lịng vịng
• Xem xét các thành trong phạm vi một ứng dụng và xun
qua các ứng dụng.
• Thích hợp với nhiều mức khác nhau.
• Quản lý hướng di chuyển
• Thuật ngữ
• Thiết kế báo biểu và giao diện (form)

25/02/2016

16

Hỗ trợ tối đa người dùng
• Luật 3 lần nhấn (chuột hoặc phím)

• Người dùng đi từ điểm bắt đầu hoặc thực đơn chính của một hệ
thống để nhìn thấy thơng tin hoặc hoạt động mà họ muốn trong
phạm vi không hơn 3 lần click chuột hoặc 3 lần nhấn phím.

8


25/02/2016

25/02/2016

17

Nội dung
• Giới thiệu
• Nguyên lý thiết kế giao diện người dùng
• Quy trình thiết kế giao diện người dùng
• Thiết kế chuyển hướng giao diện
• Thiết kế giao diện đầu vào
• Thiết kế giao diện đầu ra

25/02/2016

18

Quy trình thiết kế giao diện người dùng

9

25/02/2016

25/02/2016

19

Xây dựng kịch bản sử dụng
• Phác thảo các bước của cơng việc thực hiện.
• Trình bày đơn giản thơng qua lược đồ use case hoặc

cộng tác.
• Cung cấp tài liệu các đường dẫn chung nhất thơng qua
mơ hình use case để giao diện thiết kế dễ dàng sử dụng
cho các tình huống.

25/02/2016

20

Ví dụ

10


25/02/2016

25/02/2016

21

Ví dụ

25/02/2016

22

Thiết kế cấu trúc giao diện
• Xây dựng lược đồ minh họa sự liên quan giữa các màn

hình, biểu mẫu và báo cáo.
• Chỉ ra cách thức làm thế nào để người dùng di chuyển từ
màn hình này đến màn hình khác.
• Sử dụng lược đồ đơn giản với các hình vng và mũi tên.
Mỗi hình vng minh họa cho một màn hình, mỗi mũi tên
minh họa cho sự di chuyển từ màn hình này đến màn
hình khác.

11


25/02/2016

25/02/2016

23

Thiết kế cấu trúc giao diện

25/02/2016

24

Thiết kế cấu trúc giao diện

12


25/02/2016

25/02/2016

25

Thiết kế các chuẩn giao diện
• Các thành phần cơ bản thường chồng chéo ở các màn

hình riêng rẽ trong phạm vi một ứng dụng.
• Giao diện từ khái niệm thực tế
• Desktop, checkbook, shopping cart

• Giao diện danh mục
• Giao diện hoạt độnt

• Giao diện hình tượng
• Giao diện mẫu

25/02/2016

26

Thiết kế mẫu giao diện
• Là một màn hình giả lập
• Các phương pháp phổ biến gồm:
• Thiết kế trên giấy
• Window layout Diagram
• Bản mẫu HTML
• Bản mẫu bằng ngơn ngữ lập trình

13


25/02/2016

25/02/2016

27

25/02/2016

28

14


25/02/2016

25/02/2016

29

Đánh giá giao diện
• So sánh thiết kế với danh sách tiêu chí (checklist)
• Đánh giá thơng qua các bước mơ phỏng.
• Đánh giá tương tác
• Kiểm tra tính tiện dụng

25/02/2016

30

Thiết kế chuyển hướng
• Giả định cho người dùng
• Tất cả các đối tượng (control) nên rõ ràng và dễ hiểu, và

được đặt nơi trực quan của màn hình.

15


25/02/2016

25/02/2016

31

Thiết kế chuyển hướng
• Ngăn ngừa lỗi
• Giới hạn lựa chọn
• Đừng bao giờ hiển thị các nút lệnh mà khơng thể sử dụng.
• Nhắc nhở các hành động mà rất khó hoặc khơng thể quay ại.

• Khơi phục các lỗi đơn giản
• Dùng ngơn ngữ nhất qn

25/02/2016

32

Thiết kế thực đơn
• Menu bar
• Drop – Down menu
• Hyberlink menu
• Pop-up menu
• Tan menu
• Tool bar
• Image map

16


25/02/2016

25/02/2016

33

Các thủ thuật về thơng điệp
• Nên rõ ràng chính xác và trọn vẹn
• Nên sử dụng đúng ngữ pháp, khơng sử dụng các thuật

ngữ khó hiểu và viết tắt (ngoại trừ các thuật ngữ đó là của

người dùng)
• Tránh dùng phủ định và hài hước.

25/02/2016

34

Các loại thơng điệp
• Thơng điệp lỗi
• Thơng điệp xác nhận
• Thơng điệp thơng báo
• Thơng điệp chờ
• Thơng điệp trợ giúp
• Thơng điệp chờ
• Thông điệp hỗ trợ/giúp đỡ

17


25/02/2016

25/02/2016

35

Thiết kế giao diện đầu vào
• Xử lý trực tuyến: ghi nhận tức thời giao dịch vào cơ sở dữ

liệu tương ứng.
• Xử lý theo lơ: thu thập dữ liệu thông qua một khoảng thời

gian và nhập chúng vào hệ thống tại một thời điểm theo
lơ.
• Xử lý theo lơ làm đơn giản sự liên lạc dữ liệu và các xử lý
khác, tập tin chủ không được cập nhật theo thời gian
thực.

25/02/2016

36

Ghi nhận dữ liệu nguồn
• Giảm cơng việc chồng lắp
• Giảm thời gian xử lý
• Giảm chi phí
• Giảm xác suất về lỗi.

18


25/02/2016

25/02/2016

37

Tự động hóa dữ liệu nguồn
• Có thể đặt được từ các cơng nghệ sau:
• Cơng cụ đọc mã vạch
• Cơng cụ nhận dạng ký tự quang học
• Cơng cụ đọc vạch từ

• Cơng cụ đọc thẻ thơng minh

25/02/2016

38

Thao tác phím tối thiểu
• Các đơn vị dữ liệu liên kết với các thuộc tính
• Văn bản (text)
• Số (numbers)
• Lựa chọn (selection boxes)
• Check boxes
• Radio buttons
• On-screen list boxes
• Drop-down list boxes
• Combo box

19


25/02/2016

25/02/2016

39

25/02/2016

40

Các loại kiểm tra hợp lệ đầu vào
• Kiểm tra tính trọn vẹn: kiểm tra một số thuộc tính phải
•
•
•
•

được nhập trước khi màn hình xử lý.
Kiểm tra format: dữ liệu mã hóa hoặc ký số.
Kiểm tra vùng dữ liệu.
Kiểm tra nhất quán.
Kiểm tra cơ sở dữ liệu.

20


25/02/2016

25/02/2016

41

Thiết kế giao diện đầu ta
• Mục tiêu là thể hiện thơng tin cho người dùng để học có

thể hiểu được chính xác nội dung đó.
• Hiểu được tính hữu dụng của bảo biểu
• Mức độ thường xuyên
• Báo biểu theo lơ hay thời gian thực

• Quản lý việc xuất thơng tin
• Khơng q nhiều và cũng khơng q ít
• Tất cả thông tin cần thiết – không là “tất cả”
• Thể hiện độ lệch thơng tin

25/02/2016

42

Một số loại báo biểu
• Báo biểu chi tiết
• Báo biểu tổng kết
• Báo biểu xoay vịng: đầu ra được tìm kiếm và trở thành

đầu vào
• Biểu đồ và độ họa

21