15-Aug-23

BỘ NỘI VỤ
TRƯỜNG ĐẠI HỌC NỘI VỤ HÀ NỘI

THIẾT KẾ GIAO DIỆN

Tháng 08/2023

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

3. Kiểm thử giao diện – UI testing

3.1. Lỗi đặc trưng
- Thiếu toàn vẹn
- Phải nhớ quá 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

 Chú ý: Giao diện “tốt” phải đáp ứng:

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

1
 15-Aug-23

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

 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”

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

 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

 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 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 hoàn toàn khác nhau
 Giao tiếp đa phương tiện dễ thu hút người dùng

2
 15-Aug-23

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

 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

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

3
 15-Aug-23

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

 Kiểm tra DL nhập

+ Qui cách DL  sử dụng khuôn mẫu, VD: MM/DD/YY hoặc MM/DD/YYYY
+ Ràng buộc toàn vẹn khi nhập DL  các tùy chọn kiểm tra: kiểm tra ngay khi
DL được nhập vào ô nhập liệu, kiểm tra sau khi nhập xong 1bản ghi, kiểm tra sau
khi nhập 1 vùng DL

- Nguyên tắc:
+ Các ràng buộc về miền giá trị của DL được kiểm tra ngay
+ Các lỗi lôgic được phát hiện sau và có thống kê nội dung bị sai

- Thông báo lỗi:

+ Thông báo lỗi tồi sẽ dễ làm người dùng không muốn sử dụng
+ Thông báo lỗi nên: lịch sự , súc tích, thống nhất
+ Nền tảng và kinh nghiệm của người dùng cần được tính đến khi thiết kế thông
báo lỗi

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

 Kiểm tra thiết kế (phần có 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?

4
 15-Aug-23

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

 Kiểm tra các yếu tố liên quan

- 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)

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

 Kiểm tra tải (Load Testing)

- N: số người dùng đồng thời

- T: số giao dịch trực tuyến trong một đơn vị thời gian
- D: lượng dữ liệu được xử lý bởi server cho một giao dịch

Công thức
Tải của hệ thống P = N x T x D

5
 15-Aug-23

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

 Chú ý
- Tránh dùng nhiều text vì việc đọc trên màn hình thường chậm hơn 25% so với
đọc trên giấy

- Tránh phải dùng thanh cuộn nhất là thanh cuộn ngang

- Khi người dùng tìm kiếm thông tin thì bao nhiêu thao tác mà người dùng phải
thực hiện?  nên ở mức tối thiểu

- Việc nhập thông tin cho biểu mẫu phức tạp có thể thực hiện mà không làm
người dùng bực mình

- Khả năng tìm kiếm theo nhiều khả năng và điều kiện tìm kiếm là rất quan trọng

- Cần lưu ý đảm bảo ứng dụng được thiết kế cho phép những người có trình độ
máy tính khác nhau sử dụng

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

 Lưu ý các nguyên tắc

- Nguyên tắc 7±2: Nghiên cứu của Geogre A.Mikker cho rằng bộ nhớ ngắn hạn
của con người chỉ có thể chứa khoảng 5-9 điều cùng một lúc. Thực tế này
thường được sử dụng như một luận cứ nhằm hạn chế sự lựa chọn trong menu
điều hướng là 7

- Nguyên tắc 2 giây: Người dùng không chờ đợi quá 2 giây cho một số phản
ứng của hệ thống

- Nguyên tắc Click: Theo nguyên tắc này, người dùng sẽ không tiếp tục sử dụng
Ứng dụng nếu họ không tìm thấy thông tin hoặc không thể truy cập các tính năng
trong vòng 3 cú click chuột

- Nguyên tắc 80/20 (Nguyên tắc Pareto): 20% khách hàng/người dùng cố gắng
sử dụng hệ thống thì có thể đóng góp để xác định được đến 80% khối lượng
các yêu cầu

6
 15-Aug-23

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

 VD: Form testing  Kiểm thử lỗi syntax + logic + run-time

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

4. Mô hình thiết kế Web

7
 15-Aug-23

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

4. Bố cục điển hình của trang Web

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

4. Qui trình thiết kế trang Web và bố trí điều hướng

8
 15-Aug-23

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

4. Web testing

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

 Bài tập về kiểm thử giao diện UI

1. Thiết kế giao diện nhập điểm thi kết thúc học phần cho Phòng đào tạo trường ĐH
 Yêu cầu đảm bảo tính toàn vẹn (syntax + logical + run-time error testing), biết:
- Người sử dụng: Nhân viên phòng đào tạo
- Nhân viên thường nhập điểm theo từng túi bài thi. Mỗi túi bài thi là của một phòng
thi. Mỗi môn thi sẽ được thi tại nhiều phòng với danh sách sinh viên tương ứng.
- Trường có khoảng 20000 sinh viên. Mỗi sinh viên trung bình học 6 môn.

2. Thiết kế giao diện gọi món tại một quán Coffee  Yêu cầu đảm bảo tính toàn
vẹn (syntax + logical + run-time error testing), biết:
- Người sử dụng: Nhân viên phục vụ sử dụng phần mềm trên thiết bị di động để
thực hiện ghi nhận thông tin gọi món cho khách hàng
- Khi khách hàng gọi món có thể gọi nhiều món cùng lúc, khách hàng có thể đưa
thêm những yêu cầu đặc biệt (ví dụ: cà phê ít đường, nhiều đường, ...)
- Khách hàng không cần cung cấp thông tin khách hàng

9
 15-Aug-23

Chương 3. KIỂM THỬ VÀ SỬA LỖI GIAO DIỆN

 Bài tập về kiểm thử giao diện UI

3. Thiết kế giao diện lập hoá đơn bán hang tại một siêu thị  Yêu cầu đảm bảo tính
toàn vẹn (syntax + logical + run-time error testing), biết:
- Một hoá đơn mua nhiều sản phẩm
- Nhân viên thường xuyên phải thối lại tiền thừa cho khách hàng
- Một ngày mỗi nhân viên có thể lập đến 200 hoá đơn.
- Nhân viên có thể thêm và xoá các sản phẩm (khi nhập sai hoặc cần thay đổi)

4. Thiết kế giao diện phân công nhiệm vụ cho nhân viên trong một dự án  Yêu
cầu đảm bảo tính toàn vẹn (syntax + logical + run-time error testing), biết:
- Việc phân công được thực hiện theo từng dự án
- Mỗi nhân viên không thực hiện quá 5 dự án và tổng thời gian của tất cả dự án mà
nhân viên tham gia không quá 50 giờ
- Những dự án đã kết thúc rồi thì không phân công nữa
- Mỗi lần phân công có thể thực hiện phân công nhiều nhân viên
- Ưu tiên phân công cho các nhân viên cùng phòng với phòng chủ trì của dự án

Xin trân trọng cảm ơn!

Nguyễn Hoài Thu,

Tel: 84-0918673105

nhthu3@gmail.com

10