Bài giảng Thiết kế giao diện người dùng

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

GV : Ngô Bá Nam Phương Khoa CNTT – ĐHKHTN

Nội dung

 Mục tiêu  Kiến trúc màn hình  Cách thức tiến hành  Cải tiến màn hình với tính tiện dụng và hiệu quả  Thiết kế màn hình tra cứu  Thiết kế màn hình thực đơn

1. Giới thiệu

 Mục đích của việc thiết kế giao diện là nhằm

mô tả cách thức giao tiếp giữa người sử dụng và phần mềm.

 Kết quả:

 Danh sách các màn hình.  Thông tin chi tiết của từng màn hình.  Màn hình thực đơn (Màn hình chính).  Sơ đồ màn hình

2. Kiến trúc màn hình

 Thành phần nhập liệu  Thông tin kết quả  Các nút xử lý

 Mục tiêu: cho phép người sử dụng nhập dữ liệu

dưới nhiều hình thức khác nhau.

 Hình thức 1:

 Hình thức 2:

 Hình thức 3:

 Hình thức 4:

2.2 Thành phần thông tin kết quả

 Mục tiêu: cho phép người dùng xem trực tiếp kết quả hay các thông tin tương ứng với dữ liệu nhập trên màn hình.

 Hình thức 1:

 Hình thức 2:

2.3 Các nút xử lý

 Mục tiêu: cho phép người dùng lựa chọn các tác

vụ cần thực hiện trên màn hình giao diện.

3. Cách thức tiến hành

Lưu ý

 Thành phần nhập liệu quyết định tính đúng đắn

của màn hình giao diện. Nói một cách khác, màn hình giao diện với tính đúng đắn chỉ thành phần nhập liệu mà thôi.

 Thành phần thông kết quả quyết định tính hiệu

quả và tiện dụng của màn hình giao diện.

 Khi thiết kế giao ta không cần thiết kế các nút xử lý vì trách nhiệm này thuộc về khâu “Thiết kế xử lý”.

Bài tập làm ngay

 Hãy thiết kế màn hình cho yêu cầu phần mềm

lập phiếu mượn sách với tính đúng đắn.

4. Cải tiến màn hình với tính tiện dụng và hiệu quả

 Hãy cải tiến màn hình cho mượn sách với tính

tiện dụng và tính hiệu quả.

 Màn hình cho mượn sách với tính đúng đắn:

Cải tiến với tính tiện dụng

 Kĩ thuật 1: Cung cấp thêm thông tin cho người

dùng.  Ví dụ:

Cải tiến với tính tiện dụng

Cải tiến với tính hiệu quả

 Kĩ thuật 2: Cung cấp giá trị định sẵn cho ô nhập

liệu.

Cải tiến với tính hiệu quả

Cải tiến với tính tiện dụng

 Kĩ thuật 3: Cho phép nhập nhiều giá trị đồng thời

Cải tiến với tính tiện dụng

 Kĩ thuật 4: Suy nghĩ thấu đáo về nghiệp vụ và đưa ra các cải tiến phục vụ tối đa cho người dùng.

Bài tập về nhà

 Hãy thiết kế và cải tiến các màn hình với tính

đúng đắn đã làm

5. Thiết kế màn hình tra cứu

 Mục tiêu: tăng tính tiện dụng và hiệu quả của

người dùng khi tra cứu dữ liệu.

 Kiến trúc màn hình tổng quát:

5.1. Kiến trúc màn hình tra cứu

 Tiêu chuẩn tra cứu  Kết quả tra cứu  Các nút xử lý

5.2. Tiêu chuẩn tra cứu

 Là các thông tin mà người dùng có thể dựa vào

đó để tra cứu dữ liệu.

 Các dạng thông tin người dùng có thể sử dụng

để tìm kiếm dữ liệu là:  Chuỗi ký tự.  Ngày tháng.  Giá trị số.  Loại.

5.3. Kết quả tra cứu

 Là dữ liệu thỏa mãn các tiêu chuẩn tra cứu của người dùng đưa vào được thể hiện hiện trên màn hình.

Áp dụng

 Vấn đề: Hãy thiết kế màn hình tra cứu Đại lý với tính đúng đắn và sau đó cải tiến màn hình này với tính hiểu quả và tiện dụng.

 Màn hình tra cứu đại lý với tính đúng đắn.

 Cải tiến màn hình tra cứu đại lý bằng cách bổ

sung kết quả tra cứu.

 Cải tiến màn hình tra cứu đại lý bằng cách cải

tiến kết quả tra cứu.

 Cải tiến màn hình tra cứu đại lý bằng cách bổ sung các ô nhập liệu ứng với thông tin của đối tượng tìm kiếm.

6. Thiết kế màn hình thực đơn

 Mục tiêu: cho phép người sử dụng chọn các

công việc trên máy tính.

 Kết quả:

 Màn hình thực đơn với các nhóm công việc.  Chi tiết từng nhóm công việc cụ thể.

Các bước thực hiện

 Bước 1: Thiết kế màn hình thực đơn với tính

đúng đắn.

 Bước 2: Cải tiến màn hình thực đơn với tính tiện

dụng và hiệu quả.

Các yêu cầu khi thiết kế màn hình thực đơn

 Yêu cầu nghiệp vụ.  Yêu cầu chất lượng  Yêu cầu hệ thống

Thiết kế thực đơn với tính đúng đắn

 Bước 1: Thiết kế màn hình thực đơn với tính

đúng đắn: đơn giản là xác định danh sách các công việc và các nghiệp vụ mà phần mềm hỗ trợ.

Thiết kế với tính tiện dụng

 Bước 2: Thiết kế màn hình thực đơn với tính tiện

dụng đơn giản là phân nhóm các công việc.

Các cách phân nhóm

 Cách 1: Phân nhóm theo chức năng tin học.

 Hệ thống  Lưu trữ, Cập Nhật  Tra cứu  Tính toán  Báo biểu

 Cách 2: phân nhóm theo đối tượng

 Cách 3: phân nhóm theo nghiệp vụ, quy trình.

Ứng dụng

 Hãy thiết kế màn hình thực đơn cho đề tài quản

lý thư viện

 Bước 1: Thiết kế màn hình thực đơn với tính

1. Lập thẻ độc giả 2. Tiếp nhận sách 3. Cho mượn sách 4. Trả sách 5. Tra cứu sách 6. Lâp báo cáo thống kê tình hình cho mượn sách. 7. Gia hạn thẻ 8. Tra cứu độc giả 9. Báo cáo thống kê độc giả 10. Thanh lý sách 11. Lập báo cáo thống kê sách

đúng đắn.  Yêu cầu công việc nghiệp vụ:

 Bước 1: Thiết kế màn hình thực đơn với tính

12. Cập nhật bảng tham số 13. Cập nhật loại độc giả 14. Cập nhật thể loại sách 15. Cập nhật lý do thanh lý sách

đúng đắn (tt)  Yêu cầu chất lượng-Tính tiến hóa