Download - Chương Thiết kế tầng giao diện người
![Page 1: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/1.jpg)
Chương 10: Thiết kế tầng giao diện người-máy
1
![Page 2: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/2.jpg)
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
![Page 3: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/3.jpg)
- 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
![Page 4: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/4.jpg)
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
![Page 5: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/5.jpg)
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
![Page 6: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/6.jpg)
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
![Page 7: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/7.jpg)
- 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
![Page 8: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/8.jpg)
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
![Page 9: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/9.jpg)
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
![Page 10: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/10.jpg)
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
![Page 11: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/11.jpg)
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
![Page 12: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/12.jpg)
Ví dụ cách sắp xếp thông tin của một website.
11
![Page 13: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/13.jpg)
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
![Page 14: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/14.jpg)
đế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
![Page 15: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/15.jpg)
Ví dụ về một giao diện biểu mẫu có mật độ thông tin cao.
13
![Page 16: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/16.jpg)
Phù hợp với kinh nghiệm người sử dụng
14
![Page 17: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/17.jpg)
15
![Page 18: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/18.jpg)
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ự đoá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 quán 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
![Page 19: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/19.jpg)
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
![Page 20: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/20.jpg)
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
để hoà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
![Page 21: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/21.jpg)
Quy trình thiết kế giao diện
18
![Page 22: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/22.jpg)
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
![Page 23: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/23.jpg)
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
![Page 24: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/24.jpg)
Xây dựng các kịch bản sử dụng:
20
![Page 25: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/25.jpg)
21
![Page 26: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/26.jpg)
22
![Page 27: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/27.jpg)
23
![Page 28: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/28.jpg)
24
![Page 29: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/29.jpg)
25
![Page 30: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/30.jpg)
26
![Page 31: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/31.jpg)
- Interface metaphor:
- defines how the interface will work
- An interface metaphor is a concept from the real world that is
used as a model for the computer system
- Often, the metaphor is explicit but sometime it is implicit or
unstated.
- xx
27
![Page 32: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/32.jpg)
- Interface metaphor:
- defines how the interface will work
- An interface metaphor is a concept from the real world that is
used as a model for the computer system
- Often, the metaphor is explicit but sometime it is implicit or
unstated.
- xx
28
![Page 33: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/33.jpg)
- Interface metaphor:
- defines how the interface will work
- An interface metaphor is a concept from the real world that is
used as a model for the computer system
- Often, the metaphor is explicit but sometime it is implicit or
unstated.
- xx
29
![Page 34: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/34.jpg)
- Interface metaphor:
- defines how the interface will work
- An interface metaphor is a concept from the real world that is
used as a model for the computer system
- Often, the metaphor is explicit but sometime it is implicit or
unstated.
- xx
30
![Page 35: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/35.jpg)
- Interface metaphor:
- defines how the interface will work
- An interface metaphor is a concept from the real world that is
used as a model for the computer system
- Often, the metaphor is explicit but sometime it is implicit or
unstated.
- xx
31
![Page 36: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/36.jpg)
- Interface metaphor:
- defines how the interface will work
- An interface metaphor is a concept from the real world that is
used as a model for the computer system
- Often, the metaphor is explicit but sometime it is implicit or
unstated.
- xx
32
![Page 37: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/37.jpg)
33
![Page 38: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/38.jpg)
34
![Page 39: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/39.jpg)
35
![Page 40: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/40.jpg)
36
![Page 41: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/41.jpg)
37
![Page 42: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/42.jpg)
38
![Page 43: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/43.jpg)
39
![Page 44: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/44.jpg)
40
![Page 45: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/45.jpg)
41
![Page 46: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/46.jpg)
42
![Page 47: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/47.jpg)
43
![Page 48: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/48.jpg)
44
![Page 49: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/49.jpg)
45
![Page 50: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/50.jpg)
46
![Page 51: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/51.jpg)
47
![Page 52: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/52.jpg)
48
![Page 53: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/53.jpg)
49
![Page 54: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/54.jpg)
50
![Page 55: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/55.jpg)
51
![Page 56: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/56.jpg)
52
![Page 57: Chương Thiết kế tầng giao diện người](https://reader030.vdocuments.pub/reader030/viewer/2022012720/61b3063e2b60cd634e62c8f1/html5/thumbnails/57.jpg)
53