Bài giảng Thiết kế và phát triển giao diện - Trịnh Thị Kim Chi

Giảng viên: Trần Thị Kim Chi


1

Các lỗi thiết kế hệ thống tương tác

2

Tính sử dụng là gì?

3

Các thuộc tính của tính sử dụng

4

Mơ hình sự chấp nhận của hệ thống

5

Nguyên lý thiết kế hệ thống có tính sử dụng

6

Kỹ nghệ của hệ thống có tính sử dụng


1

Các lỗi thiết kế hệ thống tương tác

Các thí dụ về lỗi thiết kế hệ thống tương tác
• Thí dụ 1: phiếu bầu cử tổng thống Mỹ năm 2000
• Thí dụ 2:Thiết kế cửa ra vào
• Thí dụ 3:Thiết kế hộp thoại in mẫu các chứng chỉ(p 21)


1

Các lỗi thiết kế hệ thống tương tác

Các thí dụ về lỗi thiết kế hệ thống tương tác
How do you open the toothpaste?
• Design suggestion
• A more obvious design might be to provide the type of sealed
cap used on many soft-drink bottles, where unscrewing the
cap breaks the seal.
• At the very least it would be helpful to include directions on
the tube for piercing the seal. The directions should be
illustrated graphically so they could be understood by
speakers of any language.


1

Các lỗi thiết kế hệ thống tương tác

Các thí dụ về lỗi thiết kế hệ thống tương tác

1

Các lỗi thiết kế hệ thống tương tác

Các thí dụ về lỗi thiết kế hệ thống tương tác
• Where do you plug the
mouse?
• Where do you plug the
keyboard?
• top or bottom connector?
• Do the color coded icons
help?


1

Các lỗi thiết kế hệ thống tương tác

Các thí dụ về lỗi thiết kế hệ thống tương tác
(i) A provides direct adjacent mapping
between icon and connector

(ii) B provides color coding to associate
the connectors with the labels


1

Các lỗi thiết kế hệ thống tương tác

Các thí dụ về lỗi thiết kế hệ thống tương tác

So sánh

Coffee machine


1

Các lỗi thiết kế hệ thống tương tác

Plugging in a USB connector
Plugging in a USB connector

So sánh


1

Các lỗi thiết kế hệ thống tương tác

Các thí dụ về lỗi thiết kế hệ thống tương tác


1

Các lỗi thiết kế hệ thống tương tác

Các thí dụ về lỗi thiết kế hệ thống tương tác

2

Tính sử dụng Usability
Định nghĩa tính sử dụng (Usability)
 Tính sử dụng được : “Khả năng hệ thống được sử dụng
bởi con người một cách dễ dàng và hiệu quả” (Shacked
1991)
 Tính sử dụng được là phạm vi trong đó sản phẩm được
sử dụng bởi nhóm người xác định để đạt được những
mục tiêu xác định.
 Các đặc tình của tính sử dụng:
 Tính hiệu quả (effectiveness),
 Năng suất(efficiency) và
 Sự thỏa mãn (satisfaction) trong ngữ cảnh sử dụng xác định.


2

Tính sử dụng Usability
Định nghĩa tính sử dụng (Usability)
 Hiệu quả (effectiveness): Đem lại kết quả đúng như dự
kiến. Đạt được mục tiêu một cách chính xác và đầy đủ.
 Năng suất (Efficiency): tiêu hao năng lượng và tài
nguyên phù hợp để đạt được mục tiêu một cách chính
xác và đầy đủ. Là thước đo mức độ cố gắng của người
sử dụng để đạt được mục tiêu đề ra
 Thỏa mãn (satisfaction ): khơng bực dọc, lo lắng và có
quan điểm tích cực với việc sử dụng sản phẩm
 Ngữ cảnh ứng dụng: Người sử dụng, nhiệm vụ, thiết bị (phần

cứng, phần mềm,…), môi trường vật lý, xã hội.
 Nhiệm vụ (task): Các hoạt động cần thiết để đạt được mục tiêu


2

Tính sử dụng Usability
Định nghĩa tính sử dụng (Usability)

Đặc tả các thành phần sử dụng và mối quan hệ giữa chúng


2

Tính sử dụng Usability

Khung làm việc của tính sử dụng (Usability)
 Hiệu năng (performance): effectiveness + efficiency
 Hiệu năng và sự thỏa mãn của người sử dụng được sử dụng vào việc đo tính sử dụng.
 Độ đo về hiệu năng và sự thỏa mãn của người sử dụng là nền tảng của sự so sánh tính
sử dụng của các hệ thống khác nhau.
 Tính sử dụng có thể cải thiện bằng cách tích hợp các đặc trưng thuộc tính đã biệt trong
ngữ cảnh sử dụng cụ thể.


3

Các thuộc tính của tính sử
dụng
Sáu thuộc tính của tính sử dụng (Usability)

 Hiệu quả (Effectiveness):Tính chính xác và tính đầy đủ mà với nó người sử dụng đạt được
mục tiêu xác định trước
 Tính học được (Learnability): Hệ thống có dễ học khơng?
 Năng suất (Effciency): Một khi đã dễ học, có sử dụng nhanh khơng?
 Tính dễ nhớ (Memorability):Có dễ nhớ những gì đã học?
 Các lỗi (Errors): Ít lỗi, dễ gỡ lỗi?
 Thỏa mãn mục đích (Subjective Satisfaction):Có thích thú sử dụng hệ thống ?


3

Các thuộc tính của tính sử
dụng

• 1994, Mandel liệt kê 10 vi phạm ảnh hưởng đến tính sử dụng bao gồm:
 Menu và biểu tượng nhập nhằng
 Ngôn ngữ chỉ cho phép đi theo một hướng trong hệ thống
 Hạn chế đầu vào và thao tác trực tiếp
 Hạn chế lựa chọn và điểm nổi bật
 Trình tự các bước không rõ ràng
 Nhiều bước quản lý giao diện hơn thực hiện nhiệm vụ
 Liên kết phức tạp với các ứng dụng khác và giữa các ứng dụng
 Phản hồi và khẳng định khơng phù hợp
 Hệ thống đề phịng kém và kém thông minh
 Các thông điệp lỗi, trợ giúp, tài liệu không phù hợp


4

Mơ hình sự chấp nhận được của hệ thống

Utility
Social
Acceptability

System
Acceptability

Practical
Acceptability

Usefulness

Cost

effectiveness

Learnability
Usability
Efficiency

Compatibility

Reliability

Memorability

Errors

Satisfaction

Định hướng thiết kế hướng đến người dùng
Bảy nguyên tắc thiết kế của Donal (trình bày kỹ phần này)
1. Sử dụng kiến thức trong đầu và trên thế giới
2. Đơn giản cấu trúc nhiệm vụ
3. Làm cho mọi điều dễ nhìn thấy
4. Nhận quyền ánh xạ
5. Khai thác sức mạnh của những khó khăn (tự nhiên và
nhân tạo) –Thách thức thiết kế
6. Thiết kế cho lỗi
7. Tiêu chuẩn thiết kế lấy người dùng làm trung tâm


5

Ngun lý thiết kế hệ thống có tính sử dụng
của Donal A Noran

 Sự rõ ràng (Visibility)
 Phản hồi (Feedback)
 Ràng buộc (Constraints)
 Ánh xạ (Mapping)

De
sig
n

 Nhất quán (Consistency)
 Gợi ý (Affordance)

Evalu
ate
Imple
ment


5

Ngun lý thiết kế hệ thống có tính sử dụng

• Sự rõ ràng (Visibility):
– Những phần hệ thống liên quan phải được nhìn thấy
– Là nguyên tắc cơ bản nhất trong mơ hình giao tiếp với người sử
dụng
– UI cần có khả năng giúp người sử dụng nhận biết trạng thái
hiện hành của hệ thống và cần biết phải thực hiện thao tác nào.

• Vd: giao diện MS WORD


5

Ngun lý thiết kế hệ thống có tính sử dụng

• Sự phản hồi (Feedback)
– Những gì hệ thống đáp ứng khi người dùng thực hiện hành
động.
– Khi những gì thay đổi, thì nó phải được nhìn thấy. vd: change
the font face (ms word), remove file (explorer)

– Các loại phản hồi bao gồm : thị giác, âm thanh, xúc giác


3

Ngun lý thiết kế hệ thống có tính sử dụng

• Sự gợi ý (Suggest, Affordance)

– Tập các thao tác hay thủ tục thực hiện trên đối tượng.
– “Gợi ý quan sát” là những gì người sử dụng nghĩ
rằng nó có thể được thực hiện trên đối tượng
– Khả năng tưởng tượng liên quan đến khả năng người
sử dụng xác định cách sử dụng đối tượng chỉ bằng
quan sát
• Các đối tượng vật lý : hình dáng bề ngồi gợi ý cách sử
dụng đối tượng đó. Vd: cái ghế, phím nhấn, nút trượt,
cánh cửa ra vào,…


5

Ngun lý thiết kế hệ thống có tính sử dụng

• Sự gợi ý (Suggest, Affordance)
– Sự gợi ý trong GUI:

• Con chạy gợi ý trỏ, hình dáng con chạy gợi ý một thao
tác, …
• Các button gợi ý nhấn để thực hiện nhiệm vụ

• Bàn phím gợi ý nhấn để thao tác
• Làm lõm các phần tử gợi ý disable
• Màn hình trắng và có con chạy nhấp nháy gợi ý người
dùng nhập thơng tin
• Các phần tử có nền xám gợi ý khơng thể thao tác được
• Những đường nối gợi ý có thể dịch chuyển được


5

Ngun lý thiết kế hệ thống có tính sử dụng

• Sự gợi ý (Suggest, Affordance)