TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP TP.HCM MÔN HỌC CÔNG NGHỆ PHẦN MỀM Chương Thiết kế giao diện người dùng

TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP TP.HCM
MÔN HỌC
CÔNG NGHỆ PHẦN MỀM

Chương 7

Thiết kế giao diện người dùng

CNPM/NN

1


Thiết kế giao diện
1. Nguyên tắc thiết kế giao diện
2. Quy trình thiết kế giao diện
3. Các mẫu thiết kế giao diện
4. Giới thiệu Web

CNPM/NN

2


1. Nguyên tắc thiết kế giao diện
Thiết kế giao diện cần phải
Dễ học?
Dễ dùng?
Dễ hiểu?

CNPM/NN

3


Lỗi đặc trưng

Thiếu tồn vẹn
Phải nhớ q nhiều
Khơng có hướng dẫn, trợ giúp
Không nhạy với ngữ cảnh
Đáp ứng nghèo nàn
Không thân thiện, khó hiểu

CNPM/NN

4


Luật vàng





CNPM/NN

Người dùng dễ điều khiển
Người dùng ít phải nhớ
Giao diện toàn vẹn

5


Người dùng dễ điều khiển








Không buộc người dùng phải hoạt động khơng cần thiết hay
khơng ưa thích
Tương tác mềm dẽo (bàn phím, chuột, bút,..)
Tương tác người dùng có thể ngắt và undo
Tương tác theo luồng và cho phép tùy biến tương tác (macro)
Che dấu kỹ thuật bên trong
Tương tác trực tiếp với những đối tượng trên màn hình
“to control the computer, not have the computer control”,
“System reads their mind, it knows what the users want to do
before the user need to do”

CNPM/NN

6


Người dùng ít phải nhớ








Giảm nhu cầu nhớ ngắn, nên đưa những gợi ý trực
quan
Tạo những trường hợp mặc định có ý nghĩa
Đường dẫn tắt (Shortcut) trực quan
Thể hiện hình ảnh bằng những biểu tượng theo thế
giới thực
Trình bày thơng tin theo diễn tiến động

CNPM/NN

7


Một số đặc điểm của người sử dụng








CNPM/NN

Khả năng nhớ tức thời của con người bị hạn chế: con
người chỉ có thể nhớ ngay khoảng 7 thơng tin. Nếu ta
biểu diễn nhiều hơn thì có thể khiến người sử dụng
khơng nhớ hết và gây ra các lỗi.
Người sử dụng có thể gây ra lỗi, khi đó những thơng báo
khơng thích hợp có thể làm tăng áp lực lên người sử
dụng và làm cho dễ xảy ra lỗi khác.
Người sử dụng có khả năng và sở thích hồn tồn khác
nhau
Giao tiếp đa phương tiện dễ thu hút người dùng

8


Giao diện toàn vẹn




Cho phép người dùng sử dụng các tác vụ theo ngữ
cảnh
Các giao diện trong ứng dụng phải toàn vẹn





Cùng cách thức nhập liệu
Cùng cách thức chuyển từ cơng việc này sang cơng việc

khác

Mơ hình tương tác trước đó được người dùng ưa
chuộng thì khơng nên thay đổi trừ khi có một lý do
thuyết phục

CNPM/NN

9


CNPM/NN

10


Các nguyên tắc thiết kế giao diện…


Sự quen thuộc của người sử dụng: giao diện phải được
xây dựng dựa trên các thuật ngữ và các khái niệm mà người
sử dụng có thể hiểu được hơn là những khái niệm liên quan
đến máy tính.


Ví dụ: hệ thống văn phịng nên sử dụng các khái niệm như thư,
tài liệu, cặp giấy… mà không nên sử dụng những khái niệm như
thư mục, danh mục …



Thống nhất: hệ thống nên hiển thị ở mức thống nhất thích
hợp. Ví dụ: các câu lệnh và thực đơn lệnh (menu) nên có
cùng định dạng…



Tối thiểu hố sự bất ngờ: nếu một yêu cầu được xử lý theo
cách thơng thường thì người sử dụng có thể dự đốn các
thao tác của những yêu cầu tương tự.
11

CNPM/NN


…Nguyên tắc thiết kế giao diện






Khả năng phục hồi: hệ thống nên cung cấp một số
khả năng phục hồi tới tình trạng trước đó: hồn tác
vụ (undo), xác nhận một lần nữa trước khi sửa xóa…
Hướng dẫn người sử dụng: như hệ thống trợ giúp,
hướng dẫn trực tuyến …
Tính đa dạng: hỗ trợ nhiều loại tương tác cho nhiều
loại người sử dụng khác nhau.


CNPM/NN

Ví dụ: nên hiển thị phơng chữ lớn với những người cận thị.

12


CNPM/NN

13


CNPM/NN

14


CNPM/NN

15


CNPM/NN

16


CNPM/NN

17


CNPM/NN

18


Đánh giá ???


MS Office




CNPM/NN

Chọn File/Print
Nhấn Print
Ctrl-P

19


2. Qui trình tạo giao diện người dùng
(UI User - Interface)

CNPM/NN

20


Phân tích người dùng, tác vụ, mơi trường











Khả năng sử dụng tài liệu hướng dẫn bằng giấy hay cần phải
mở lớp huấn luyện?
Tuổi tác người dùng?
Người dùng có sử dụng thường xun cho cơng việc hay
khơng?
Phân tích luồng cơng việc, xác định cách thức cơng việc được
hồn tất khi có nhiều người tham gia.
Vị trí sử dụng?
Tư thế sử dụng?
Khơng gian, ánh sáng, tiếng ồn…?

CNPM/NN

21

Bốn loại mơ hình
1. Kỹ sư phần mềm tạo Mơ hình thiết kế (design model)
2. Người phụ trách về nhân sự tạo ra Mơ hình người dùng
(user model)
3. Người dùng cuối phát triển Mơ hình nhận biết hệ thống
(system perception)
4. Người thực thi tạo Mơ hình thực thi (implementation model)

CNPM/NN

22


Thiết kế nội dung thể hiện bằng hình ảnh









Việc bố trí màn hình theo loại dữ liệu (hình ảnh thì thường thể
hiện phía tay phải bên trên màn hình…)
Người dùng có thể tùy biến màn hình?
Phân chia những báo cáo lớn như thế nào cho dễ hiểu?
Những biểu diễn hình ảnh có tính thống kê dữ liệu?
Dữ liệu ra (Output) dạng hình ảnh có thể hiện vừa vặn?

Sử dụng màu sắc?
Thể hiện lỗi và cảnh báo?

CNPM/NN

23


Những lưu ý khi đưa ra thiết kế




Thời gian đáp ứng: Độ dài (length) và Độ dao động
(variability) thời gian đáp ứng
Những tiện ích trợ giúp








Integrated help: đựợc thiết kế ngay trong phần mềm
Add-on help: được bổ sung thêm vào phần mềm sau khi
hệ thống đã được xây dựng, người dùng phải dị tìm thơng
qua 1 danh mục

Xử lý lỗi

Menu và lệnh…
Khả năng truy cập ứng dụng
Quốc tế hóa (Internationalization)
/>
CNPM/NN

24


3. Các mẫu thiết kế giao diện

CNPM/NN

25