3/12/2020

Bài 6

THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

12/11/2019 LÊ HỮU DŨNG 193

Tài liệu tham khảo

• Chapter 9 in [7]

12/11/2019 LÊ HỮU DŨNG 194/234

1
 3/12/2020

1. Khái niệm
• Thiết kế giao diện là quá trình định nghĩa cách
mà hệ thống sẽ giao tiếp/tương tác với các tác
nhân ngoài (hay ngược lại)[7]
• Các loại giao diện phần mềm:
– Console
– Desktop Application
– Web Application
– Mobile Application

12/11/2019 LÊ HỮU DŨNG 195/234

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

• Mô tả các bước sử dụng
• Thiết kế cấu trúc giao diện
• Thiết kế chuẩn giao diện
• Làm bản mẫu thiết kế giao diện

12/11/2019 LÊ HỮU DŨNG 196/234

2
 3/12/2020

2.1 Mô tả các bước sử dụng

• Các bước sử dụng là các bước mà người dùng
(sẽ) thực hiện để hoàn thành công việc (mong
muốn của họ)
• Đầu vào:
– Tài liệu đặc tả tiến trình
– Tài liệu đặc tả chức năng
– Logical DFD tương ứng

12/11/2019 LÊ HỮU DŨNG 197/234

• Đầu ra:
Bản mô tả các bước sử dụng chức năng

Bước Mô tả
1 ….
2 ….
… ….

12/11/2019 LÊ HỮU DŨNG 198/234

3
 3/12/2020

NÊN KHÔNG NÊN

Cung cấp thông tin về tình huống sử dụng mà

Tránh đặt ra những gì hệ thống đang làm, ta
người dùng thực có thể tìm thấy chúng (dựa
chưa xác định cách bạn sẽ thực hiện nó.
vào công việc mà người dùng vẫn quen làm).

Cung cấp các hoạt động hoặc các nhiệm vụ và Tránh chỉ định bất kỳ thành phần Giao diện
quyết định mà người dùng có thể cần thực hiện Người dùng nào(VD: [nhấp chuột vào nút OK]).
trong một phiên liên tục duy nhất Việc này là Quá sớm.

Hãy cụ thể (Giống như đang xem và ghi lại sự Tránh cung cấp các kịch bản khác nhau cho các
tương tác thực sự) nhiệm vụ tương tự.

Tập trung vào hành động của người dùng và Tránh các trường hợp sử dụng nhỏ chỉ có một
chọn động từ và mô tả là độc lập công nghệ hoặc hai hoạt động và ít quyết định.

12/11/2019 LÊ HỮU DŨNG 199

2.2 Thiết kế Cấu trúc giao diện

• 1 sơ đồ cấu trúc giao diện
(Interface Structure Diagram –
ISD) thể hiện cách mà toàn thể
màn hình, forms, reports được sử
dụng và liên quan với nhau đồng
thời cho biết cách người dùng có
thể chuyển giao diện này sang
giao diện khác.
• Kí hiệu: Hình chữ nhật chứa 3
phần:
– Số (trên): để phân biệt
– Tên: để phân biệt
– Số (dưới): xác định Process nào
trong DFD được hỗ trợ bởi giao
diện (1 Process có thể được hỗ trợ
bởi nhiều giao diện khác nhau)

1 ví dụ về ISD[7]
12/11/2019 LÊ HỮU DŨNG 200

4
 3/12/2020

2.3 Thiết kế chuẩn giao diện

• Chuẩn giao diện là những phần tử giao diện
cơ bản chung nhất giữa các thành phần giao
diện (như screen, form, report):
– Ẩn dụ giao diện/hình ảnh (Interface Metaphor)
– Mẫu giao diện (Interface templates)
– Các đối tượng giao diện (Interface Objects)
– Các hành động trên giao diện (Interface Actions)
– Các biểu tượng (Interface Icons)

12/11/2019 LÊ HỮU DŨNG 201/234

2.4 Làm bản mẫu thiết kế giao diện

• Theo [7]:
– Một bản mẫu thiết kế giao diện là mô hình giả lập
hoặc mô phỏng một screen/form/report.
– Một bản mẫu được tạo ra cho mỗi giao diện
trong hệ thống để cho người sử dụng và các lập
trình viên biết hệ thống sẽ hoạt động như thế nào
• Các bước:
Sketch>Wireframe>Mockup>Prototype

12/11/2019 LÊ HỮU DŨNG 202/234

5
 3/12/2020

• Thực hiện:
– Vẽ tay
– Công cụ:
• Visio/Online tools
• Dùng chính công cụ lập trình để tạo giao diện mẫu

12/11/2019 LÊ HỮU DŨNG 203/234

3. Thiết kế một số giao diện đặc biệt

• Điều hướng
• Đầu vào (Input)
• Đầu ra (Output)

12/11/2019 LÊ HỮU DŨNG 204/234

6
 3/12/2020

3.1 Thiết kế Điều hướng

• Thành phần Điều hướng cho phép người dùng
Chọn/duyệt/thực hiện hành động và nhận
Thông báo về kết quả thực hiện hành động
đó.
• Yêu cầu:
– Tổ chức menu có phân cấp
– Thâm nhập nhanh và dễ dàng
– Có thể thoát ra ở bất kỳ chỗ nào
– Mới: Hambuger Menu

12/11/2019 LÊ HỮU DŨNG 205/234

3.2 Thiết kế Đầu vào

• Yêu cầu:
– Đáp ứng được yêu cầu của người sử dụng
– Không nhận dữ liệu có lỗi (kiểm tra ngay khi nhập)
– Trình bày dễ hiểu, dễ dùng
– Thao tác phím, chuột ít nhất.

12/11/2019 LÊ HỮU DŨNG 206/234

7
 3/12/2020

• Các dạng dữ liệu nhập:

– Không biết trước:
• Nhập tự do (VD: địa chỉ)
• Theo khuôn dạng (VD: ngày sinh, biển số xe, CMTND)
– Chọn một hoặc một số phần tử từ tập dữ liệu:
• Cố định (VD: giới tính, tên tháng, ..)
• Biến động (VD: Nhóm hàng, Chuyên mục tin, ..)

12/11/2019 LÊ HỮU DŨNG 207/234

3.3 Thiết kế Đầu ra

• Yêu cầu đối với dữ liệu đầu ra
– Đầy đủ, chính xác (giá trị, mẫu biểu)
– Dễ hiểu, dễ đọc, phù hợp văn hóa vùng địa lí
– Có thứ tự xác định, cho phép thay đổi
– Tương thích đa thiết bị?
(desktop/printer/web/mobile)

12/11/2019 LÊ HỮU DŨNG 208/234

8
 3/12/2020

3.3 Thiết kế Đầu ra

• Dạng thức đưa ra
– Đơn thể (VD: xem chi tiết)
– Tập hợp (VD: xem danh sách khách hàng)
– Kết hợp 2 dạng trên
• Kết hợp tìm kiếm/lọc:
– Theo nhiều tiêu chí không xác định trước
– Thông minh

12/11/2019 LÊ HỮU DŨNG 209/234