Bài giảng Chương 10: Thiết kế tầng giao diện người-máy

Chương 10: Thiết kế tầng giao diện người-máy

1


Mục tiêu của chương:
- Hiểu một số nguyên tắc chung trong thiết kế giao diện hệ thống
- Hiểu được qui trình thiết giao diện
- Hiểu được cách thiết kế cấu trúc giao diện
- Hiểu được cách thiết kế các tiêu chí cho giao diện

- Hiểu được các nguyên tắc và kỹ thuật phổ biến trong thiết kế điều
hướng hệ thống

2


-

Hiểu được các nguyên tắc và kỹ thuật phổ biến trong thiết kế đầu vào
và đàu ra của hệ thống.

-

Có khả năng thiết kế được giao diện

-

Hiểu được sự tác động của các yêu cầu phi chức năng đối với tầng
giao diện

3


Giới thiệu
- Thiết kế giao diện chính thức hóa sự tương tác của hệ thống với các
thực thể bên ngoài hệ thống.
- Các giao diện hệ thống (system interfaces) là giao diện giao tiếp giữa
hai hệ thống với nhau và được xem như là một phần của tích hợp hệ
thống.
- Giao diện người dùng (User interfaces) là giao diện giao tiếp giữa con
người với máy tính và là nội dung chính của chương này.

4


Các nguyên tắc thiết kế giao diện
Thiết kế giao diện là một nghệ thuật và cần thỏa mãn các điều kiện sau:
-

Dễ sử dụng: giao diện dễ sử dụng ngay cả với những người khơng
có kinh nghiệm

-

Dễ học: các chức năng gần gũi với tư duy của người sử dụng để họ
có thể nắm bắt được dễ dàng nhanh chóng

-

Tốc độ thao tác: thao tác không quá phức tạp hay dài

-

Dễ phát triển: giao diện dễ dàng, sẵn sàng đáp ứng các yêu cầu thay
đổi của người dùng

5


Các nguyên tắc thiết kế giao diện bao gồm:
-

Có layout bố cục hợp lý, ổn định: Giao diện nên gồm một chuỗi
các vùng có mục đích khác nhau trên màn hình được sử dụng một
cách ổn định. VD bố cục header, footer, left, right của website.

-

Đoán nhận nội dung: Hệ thống luôn cung cấp các thông tin phản
hồi về công việc đang tiến hành và cung cấp thông tin về phần hệ
thống đang được sử dụng cho người sử dụng biết.

-

Thẩm mỹ: Tỷ lệ khoảng trắng, hình ảnh, màu sắc, font chữ. VD Tỷ
lệ khoảng trắng vừa đủ để cho mắt được nghỉ ngơi nhưng cũng
không làm cho giao diện quá tẻ nhạt và cảm giác thông tin sơ sài

-

Các giao diện có sự đồng nhất cao

6


-

Phù hợp với kinh nghiệm người sử dụng: Giao diện nên thân thiện
với người dùng và phù hợp với kinh nghiệm, trình độ của các lớp
người dùng khác nhau. Hệ thống sẵn sàng cung cấp các trợ giúp khi
người sử dụng cần.

-

Tối thiểu hóa sức lực của người dùng: Hạn chế tối đa tiêu phí sức
lực khơng cần thiết của người sử dụng. Dễ cho phép người sử dụng
thoát ra khỏi hộp thoại/ trạng thái hiện tại dễ dàng bằng các thao tác
quen thuộc (vd: ESC, Alt-F9). Cho phép hủy bỏ các thao tác đã tiến
hành, tăng tính khoan dung của chương trình.

6


Một cửa sổ giao trong ứng dụng windows thường được chia làm 3 vùng:
- Vùng điều hướng
- Vùng form hoặc report
- Vùng trạng thái

7

Nguyên tắc thiết kế khuôn dạng giao diện:
- Mỗi vùng trong giao diện có thể được chia nhỏ hơn
- Mỗi vùng là độc lập
- Thông tin trong các vùng nên được biểu diễn theo luồng trực quan tự
nhiên để giảm thiểu chuyển động của người dùng từ vùng này sang
vùng khác.

8


Giao diện hỗ trợ được NSD đoán trước được nội dung:
- Khi nhìn vào giao diện, NSD có thể trả lời được các câu hỏi: Tôi đang
ở đâu? và Tôi làm được gì ở đây?
- Mỗi vùng con trong giao diện cũng cần giúp được NSD đoán được nội
dung. Do đó. Các các trường thơng tin có trong form nhập mà có liên
quan với nhau thì nên được sắp xếp cùng nhau, các thông tin báo cáo
cũng nên được sắp xếp cùng nhau.

9


Ví dụ, giao diện trên slide chia thơng tin của bệnh nhân và của bác sĩ ra
hai vùng khác nhau. Trong vùng thông tin của bệnh nhân, hai thông tin họ
và tên của bệnh nhân được đặt liền nhau (tên trước, họ sau) theo thứ tự
tên của các nước Châu Âu. Nhưng với người Việt Nam, thứ tự của tên
phải là Họ trước và tên sau.

Tương tự, các thông tin về địa chỉ của bệnh nhân cũng được xếp liền
nhau.

10


Ví dụ cách sắp xếp thơng tin của một website.

11


Giao diện cần có tính thẩm mĩ cao:
- Các giao diện cần thể hiện được chức năng, thu hút NSD và ưa nhìn.
- Một thiết kế đơn giản và tối giản là tốt nhất.
- Mỗi biểu mẫu hay báo cáo cần có một khoảng trắng tối thiểu được chủ
địnhđể trống.
- Mật độ thơng tin có thể chấp nhận tỷ lệ thuận với sự chuyên nghiệp của
người dùng.
- Nói chung, người dùng mới hoặc không thường xuyên sử dụng giao
diện thường thích giao diện có mật độ thơng tin thấp dưới 50 phần trăm
(tức là, dưới 50 phần trăm giao diện bị chiếm dụng bởi thơng tin).
Người dùng có nhiều kinh nghiệm hơn thích mật độ cao hơn, có khi lên

12


đến 90% vì họ biết thơng tin được đặt ở đâu và như thế sẽ giúp họ đỡ
mất công chuyển qua lại giữa các giao diện.

12

Ví dụ về một giao diện biểu mẫu có mật độ thông tin cao.

13


Phù hợp với kinh nghiệm người sử dụng

14


15


Sự đồng nhất của giao diện:

- Tính nhất quán trong thiết kế có lẽ là yếu tố quan trọng nhất giúp hệ
thống dễ sử dụng vì nó cho phép người dùng dự đốn điều gì sẽ xảy ra.
Khi các giao diện được thiết kế nhất quán, người dùng có thể tương tác
với một phần của hệ thống và sau đó biết cách tương tác với phần cịn
lại.
- Tính nhất qn trong các điều khiển điều hướng (Navigation controls)
chuyển tải cách thực hiện các hành động trong hệ thống.
- Sự nhất quán về cách dùng thuật ngữ cũng rất quan trọng. Có nghĩa là,
nên sử dụng cùng một từ cho các thành phần trên biểu mẫu và báo cáo.

16


Ví dụ, khơng nên sự dụng từ “Customer” trên biểu này nhưng lại dùng
từ “Client” trên biểu mẫu khác khi cả hai cùng có nghĩa là khách hàng.

16


Tối thiểu hóa sức lực người sử dụng:

- Giao diện phải tối thiểu hóa được sự tiêu tốn sức lực của NSD cần dùng
để hồn thành các vơng việc.
- Giao diện thiết kế cần tuân theo quy tắc ba lần nhấp (three-clicks):
người dùng có thể bắt đầu đi từ menu chính của hệ thống đến vị trí
thơng tin hoặc hành động họ muốn trong không quá ba lần nhấp chuột
hoặc ba lần nhấn phím.

17


Quy trình thiết kế giao diện

18


Quy trình thiết kế giao diện bao gồm 5 bước lặp lại:
1. Xây dựng kịch bản sử dụng: các nhà phân tích dựa vào các các ca sử
dụng, các sơ đồ tuần tự và các báo cáo phỏng vấn NSD để phát triên
các kịch bản sử dụng
2. Thiết kế cấu trúc giao diện: các nhà phân tích xây dựng biểu đồ điều
hướng cửa sổ (WND) để xác định cấu trúc cơ bản của giao diện. Biểu
đồ này hiển thị tất cả các giao diện như màn hình, biểu mẫu và báo cáo
trong hệ thống và cách chúng được kết nối.
3. Thiết kế các tiêu chuẩn cho giao diện hệ thống: các nhà phân tích thiết kế các tiêu

chuẩn giao diện, đó là các qui tắc cơ bản mà các giao diện trong hệ thống phải
tuân theo.

4. Làm mẫu giao diện thiết kế: các nhà phân tích tạo ra các mẫu thiết kế

19


giao diện cho từng giao diện riêng lẻ trong hệ thống.
5. Đánh giá giao diện: từng giao diện được đánh giá và xét duyệt để xác
định xem chúng có cần chỉnh sửa thêm gì khơng.

19


Xây dựng các kịch bản sử dụng:

20


21