Trường Đại học Thủ Dầu Một

Viện Kỹ thuật Công nghệ

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

THÔNG TIN THEO HƯỚNG ĐỐI TƯỢNG

CHƯƠNG 9
THIẾT KẾ GIAO DIỆN
 Nội dung
• Giới thiệu
• Các loại giao diện người dùng
• Nguyên lý thiết kế giao diện người
dùng
• Phương pháp thiết kế giao diện
• Một số lưu ý khi thiết kế giao diện
• Đánh giá giao diện.

Chương 9. Thiết kế giao diện 2

 Giới thiệu
• Giao diện người dùng thể hiện hệ thống sẽ tương
tác với các đối tượng bên ngoài như thế nào

• Giao diện hệ thống thể hiện hệ thống sẽ trao đổi

với hệ thống khác như thế nào

• Giao diện: Nên được thiết kế sao cho nó đáp ứng

được kỹ năng, kinh nghiệm và mong đợi của
người dùng.

Chương 9. Thiết kế giao diện 3

 Giới thiệu (tt)
• Đa số người dùng đánh giá chất lượng của 1 hệ
thống thông qua giao diện hơn là thông qua chức
năng.

• Một thiết kế giao diện không tốt

- Có thể gây nên những lỗi trầm trọng.
- Là lý do tại sao nhiều hệ thống phần mềm không
bao giờ được sử dụng.

Chương 9. Thiết kế giao diện 4

 Nhân tố con người trong thiết kế giao diện
• Khả năng nhớ hữu hạn
– Con người có thể nhớ được khoảng 7 thuật ngữ về thông tin
ngay lập tức, nhưng nếu bạn đưa ra nhiều hơn thì có thể dẫn
đến sai phạm.
• Tạo ra lỗi là bình thường
– Khi con người gây ra lỗi, hệ thống chạy sai, nếu các thông
báo lỗi ko thích hợp > stress > gây nhiều lỗi hơn.
• Khả năng của từng người khác nhau
– Khả năng của mỗi người thiết kế khác nhau nên thiết kế theo khả
năng của họ.
• Sở thích khác nhau
– Mỗi người thích tương tác với giao diện khác nhau (một số thích
hình ảnh, một số thích text).

Chương 9. Thiết kế giao diện 5

 Các loại giao diện người dùng
• Theo hình thức tương tác
– Tương tác trực tiếp bằng tay
– Chọn menu
– Điền vào mẫu cho sẵn
– Dùng ngôn ngữ lệnh
– Dùng ngôn ngữ tự nhiên
• Theo chức năng
– Giao diện nhập
– Giao diện cập
nhật
– Giao diện xuất

Chương 9. Thiết kế giao diện 6

 Nguyên lý thiết kế giao diện người dùng
-Cần xem xét nhu cầu, kinh nghiệm và khả năng sử
dụng của người dùng.
-Xem xét giới hạn của người dùng có thể nhận dạng lỗi
xảy ra.
- Tuân theo các nguyên tắc sau:

Chương 9. Thiết kế giao diện 7

 Nguyên lý thiết kế giao diện người dùng (tt)
• Quen thuộc với người dùng
– Các thuật ngữ và khái niệm trên giao diện nên lấy từ kinh
nghiệm từ những người dùng hệ thống thường xuyên
• Nhất quán
– Giao diện nên được thiết kế nhất quán về thao tác trên cả
hệ
thống
• Giảm thiểu tối đa “sự bất ngờ”
– Người dùng không nên bị bất ngờ trước hành vi của hệ
thống
• Có khả năng khôi phục
– Giao diện nên có các cơ chế nhắc nhở - khôi phục khi
người dùng làmChương
sai 9. Thiết kế giao diện 8
 Nguyên lý thiết kế giao diện người dùng (tt)
• Hướng dẫn người dùng
– Giao diện nên có phản hồi cho người dùng khi có lỗi và hỗ
trợ người dùng trong các ngữ cảnh khác nhau
• Tính đa dạng cho người dùng
– Giao diện nên cung cấp các tương tác thích hợp cho các
người dùng khác nhau
• Thiết kế trực quan
– Giao diện có thể sử dụng ngay lần đầu tiên, không cần đào
tạo
• 3 clicks
– Hệ thống menu 3 clicks để truy cập thông tin mong muốn

Chương 9. Thiết kế giao diện 9

 Nguyên lý thiết kế giao diện người dùng (tt)
Sơ đồ tổng

Chương 9. Thiết kế giao diện 10

 Nguyên lý thiết kế giao diện người dùng (tt)
• Duyệt qua các Use case, với mỗi Use case phác thảo
các giao diện của use case sử dụng một công cụ
thiết kế giao diện nào đó.

Chương 9. Thiết kế giao diện 11

Nguyên lý thiết kế giao diện người dùng (tt)

Chương 9. Thiết kế giao diện 12

 Phương pháp thiết kế giao diện
• Bước 1: Xác định thông tin
– Nếu đã có các mô hình dữ liệu thì dựa vào đó để xác
định thông tin (mô hình ER, mô hình lớp, mô hình
quan hệ,… )
• Bước 2: Thiết kế giao diện đúng
– Chỉ quan tâm tới tính đúng đắn. Không quan tâm
tới tính tiện dụng
• Bước 3: Tinh chỉnh giao diện
– Quan tâm tới tính tiện dụng dựa vào phân tích hoạt
động của người dùng

Chương 9. Thiết kế giao diện 13

Phương pháp thiết kế giao diện (tt)

Chương 9. Thiết kế giao diện 14

Phương pháp thiết kế giao diện (tt)

Chương 9. Thiết kế giao diện 15

Phương pháp thiết kế giao diện (tt)

Chương 9. Thiết kế giao diện 16

Phương pháp thiết kế giao diện (tt)

Chương 9. Thiết kế giao diện 17

Phương pháp thiết kế giao diện (tt)

Chương 9. Thiết kế giao diện 18

Phương pháp thiết kế giao diện (tt)

Chương 9. Thiết kế giao diện 19

 Ví dụ
• Hãy thiết kế giao diện Thêm sản phẩm

Chương 9. Thiết kế giao diện 20

 Ví dụ (tt)
• Hãy thiết kế giao diện Thêm sản phẩm

Nhận xét
??

Chương 9. Thiết kế giao diện 21

 Ví dụ (tt)
• Hãy thiết kế giao diện Thêm sản phẩm

Chương 9. Thiết kế giao diện 22

 Một số lưu ý khi thiết kế giao diện
• Phân tích người dùng
– Nếu không nắm được những gì người dùng muốn làm với
hệ thống > không thiết kế được giao diện hiệu quả.
– Người dùng và người thiết kế phải hiểu nhau.
– Ngữ cảnh > mô tả kịch bản sử dụng. Đây là một cách để
mô tả các phân tích.
• Phân tích kĩ thuật
– Phân tích công việc: Mô tả các bước bên trong một công
việc.
– Sử dụng phỏng vấn và bảng câu hỏi: Hỏi người dùng về
công việc mà họ làm
– Quan sát: Quan sát người dùng tại nơi họ làm việc

Chương 9. Thiết kế giao diện 23

 Một số lưu ý khi thiết kế giao diện (tt)
• Nguyên tắc sử dụng màu sắc
– Hạn chế số lượng màu sử dụng và thận trọng khi dùng
chúng.
– Dùng sự thay đổi của màu sắc để trình bày một thay đổi
trạng thái của hệ thống.
– Dùng màu sắc để mã hóa các công việc mà người dùng
cần
thực hiện.
– Cần thận trọng và nhất quán khi sử dụng màu sắc
– Cẩn thận khi kết hợp màu sắc

Chương 9. Thiết kế giao diện 24

 Một số lưu ý khi thiết kế giao diện (tt)
• Các lỗi thường gặp trong việc sử dụng màu sắc khi
thiết kế UI:
– Sử dụng màu sắc để diễn đạt ý nghĩa
– Lạm dụng màu sắc trong hiển thị.

Chương 9. Thiết kế giao diện 25

 Một số lưu ý khi thiết kế giao diện (tt)
• Thông báo lỗi
– Thông báo lỗi rất quan trọng, thông báo lỗi tồi sẽ dễ làm
người dùng ko muốn sử dụng hệ thống.
– Thông báo lỗi nên: lịch sự , súc tích, thống nhất và có tính
xây dựng.
– Nền tảng và kinh nghiệm của người dùng nên là nhân tố
chính được quan tâm khi thiết kế thông báo lỗi.

Chương 9. Thiết kế giao diện 26

 Một số lưu ý khi thiết kế giao diện (tt)
• Các nhân tố thiết kế trong thông báo lỗi

Chương 9. Thiết kế giao diện 27

 Một số lưu ý khi thiết kế giao diện (tt)
• Giả sử rằng một người y tá đang tìm hồ sơ bệnh
nhân và gõ sai tên bệnh nhân này.

Chương 9. Thiết kế giao diện 28

 Một số lưu ý khi thiết kế giao diện (tt)
• Giả sử rằng một người y tá đang tìm hồ sơ bệnh
nhân và gõ sai tên bệnh nhân này.

Chương 9. Thiết kế giao diện 29

 Đánh giá giao diện
• Nên tiến hành đánh giá UI để xem giao diện đó đã
hợp lý hay chưa.
• Đánh giá đầy đủ rất tốn kém và thường không thực tế
đối với đa số hệ thống.
• Về lý tưởng, một giao diện nên được đánh giá dựa
vào đặc tả tính sử dụng.
• Tuy nhiên, các đặc tả như vậy hiếm khi được tạo ra.

Chương 9. Thiết kế giao diện 30

 Đánh giá giao diện (tt)
• Các tiêu chí đánh giá

Chương 9. Thiết kế giao diện 31

 Đánh giá giao diện (tt)
Các kỹ thuật đánh giá đơn giản
• Câu hỏi để lấy phản hồi từ người dùng.
• Quay video về việc sử dụng hệ thống và đánh giá.
• Cài các mã thu thập thông tin về các tiện ích sử dụng
và lỗi người dùng.
• Cung cấp chức năng trong chương trình để thu thập
phản hồi trực tuyến từ người dùng.

Chương 9. Thiết kế giao diện 32

 Thảo luận

Chương 9. Thiết kế giao diện 33