Insert or Drag and Drop your Image

THIẾT KẾ GIAO DIỆN

Jens Martensson


NỘI DUNG
1. Tổng quan
2. Nguyên tắc thiết kế giao diện
3. Quy trình thiết kế giao diện
4. Tiêu chí đánh giá giao diện

Jens Martensson

2


5.1. Tổng quan thiết kế giao diện
•

•

Thiết kế giao diện là một yếu tố trong yêu cầu phi chức năng của hệ thống, nếu thiết kế giao diện tốt
sẽ làm tăng hiệu quả giao tiếp của người dùng và hệ thống phần mềm.
Tùy theo mục đích, yêu cầu của người dùng, các phần tử trên form được phân bố một cách hợp lý.

Jens Martensson

3

5.1. Tổng quan thiết kế giao diện
•

Giao diện phải thể hiện được các tính năng:
•

Tính sẵn sàng và linh hoạt: đáp ứng nhanh với thao tác của người dùng.

•

Tính tập trung: các phần tử trên giao diện phải gây được sự chú ý cua 3
người dùng.

•

Sử dụng phím tắt giúp thao tác nhanh và hiệu quả.

•

Cung cấp các cơng cụ trợ giúp.

•

Màu sắc phải hài hịa giữa các thành phần trên giao diện, font chữ và size
phải thích hợp với các nội dung.

Jens Martensson

4



5.1.1. Kết quả của quy trình thiết kế giao diện
•

Kết quả thiết kế giao diện gồm 2 phần:

•

Sơ đồ màn hình: biểu diễn hệ thống những giao diện của hệ
thống và mối liên quan giữa các màn hình.

•

Mơ tả chi tiết từng màn hình: mơ tả các phần tử trên màn hình
và cách bố trí thích hợp với từng chức năng.
•

Tên màn hình: chức năng được thực hiện trên màn hình

•

Nội dung trên màn hỉnh: các phần tử và chức năng của các phần tử.

Jens Martensson

5


5.1.1. Kết quả của quy trình thiết kế giao diện

•

Ví dụ: Sơ đồ màn hình
•

Ký hiệu

Chuyển điều khiển
Tên màn hình

Jens Martensson

6


5.1.1. Kết quả của quy trình thiết kế giao diện
•

Các phần tử trên màn hình được chia thành 2 nhóm:
•

Nhóm dữ liệu: gồm các phần tử giúp người dùng nhập dữ liệu và thành phần xuất dữ liệu sau khi xử lý:

Ví dụ: textbox, combobox, label
•

Nhóm xử lý: gồm các nút lệnh, thao tác với chuột, phím để thực hiện một chức năng xử lý.

Jens Martensson


7


5.1.2. Phân loại màn hình giao diện
•

Dựa vào các chức năng của phần mềm, giao diện được chia thành nhiều loại phù hợp với từng
chức năng
•

Màn hình chính: chứa các chức năng tổng quát

Ví dụ: chức năng quản lý sinh viên, quản lý đăng ký học phần.
•

Màn hình nhập liệu: giúp người dùng nhập dữ liệu vào hệ thống để xử lý hoặc lưu trữ

•

Màn hình kết quả: kết xuất dữ liệu sau khi xử lý.

•

Màn hình thơng báo: hiển thị các thông, yêu cầu, cảnh báo đối với người dùng trong q trình tương tác với phần mềm.

•

Màn hình tra cứu: hỗ trợ người dùng tìm kiếm thơng tin

Jens Martensson


8


5.2. Nguyên tắc thiết kế giao diện
•

Các lỗi thường gặp trong thiết kế giao diện

•

Thiếu tồn vẹn

•

Phải nhớ q 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 Khơng thân thiện, khó hiểu

Jens Martensson

9


5.2. Nguyên tắc thiết kế giao diện

Jens Martensson

10


5.2. Nguyên tắc thiết kế giao diện
•

Người dùng dễ điều khiển
•

Khơng buộc người dùng phải thực hiện các hoạt động khơng cần thiết hay khơng hay khơng ưa thích

•

Tương tác mềm dẽo, 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


•

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

Jens Martensson

11


5.2. Ngun tắc thiết kế giao diện
•

Người dùng ít phải nhớ
•

Giảm các yêu cầu cần người dùng phải nhớ quá nhiều.

•

Tạo những trường hợp mặc định có ý nghĩa

•

Shortcut trực quan


•

Thể hiện hình ảnh bằng những biểu tượng trong thế giới thực

•

Trình bày thơng tin theo diễn tiến động

Jens Martensson

12


5.2. Ngun tắc thiết kế giao diện
•

Giao diện tồ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 tồn vẹn

•

Mơ hình tương tác trước đó được người dùng ưa chuộng thì khơng nên thay khơng nên thay đổi trừ khi có một lý do thuy lý do
thuyết phục.


Jens Martensson

13


5.2. Nguyên tắc thiết kế giao diện
•

Một số đặc điểm của người sử dụng
•

Khả năng nhớ tức thời của con người bị hạn chế:
•

•

Họ chỉ có thể nhớ ngay khoảng 7 thơng tin. Nếu ta 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.
Khi xãy ra lỗi, nếu 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à gây ra lỗi khác.

•

Người sử dụng có khả năng và sở thích hồn tồn khác nhau

•

Giao diện đa phương tiện dễ thu hút người dùng hơn.

Jens Martensson


14


5.2. Ngun tắc thiết kế giao diện
•

Thói quen của người sử dụng:
•

Giao diện phải được xây dựng dựa trên các thuật ngữ gần gũi với người dùng hơn là những khái niệm liên quan đến máy tính.

Ví dụ:
•

Nên sử dụng những khái niệm thư, tài liệu, cặp giấy…

•

…

Khơng nên sử dụng những khái niệm như thư mục, danh danh mục

•

Thống nhất: các thành phần cùng nhóm chức năng nên cùng định dạng.

•

Nếu một yêu cầu được xử lý theo cách thơng thường thì người sử dụng có thể dự đốn các thao tác của những yêu cầu tương

tự.

Jens Martensson

15


5.2. Nguyên tắc thiết kế giao diện
•

Khả năng phục hồi: hệ thống nên cung cấp một số khả năng phục hồi tới tình trạng trước đó (undo),
xác nhận trước khi sửa xóa…

•

Hướng dẫn người sử dụng: như hệ thống trợ giúp, hướng dẫn trực tuyến …

•

Tính đa dạng: hỗ trợ nhiều loại tương tác cho nhiều loại người sử dụng khác nhau.

Jens Martensson

16


5.2. Nguyên tắc thiết kế giao diện

Giao diện không
đối xứng


Jens Martensson

17


5.2. Nguyên tắc thiết kế giao diện
Các phần tử
được tổ chức
thành nhóm

Jens Martensson

18


5.2. Nguyên tắc thiết kế giao diện

Giao diện sử
dụng cửa sổ con

Jens Martensson

19


5.3. Quy trình thiết kế giao diện
•

Phân tích giao diện

•

•

Xác định người dùng cuối, những người sẽ tương tác với hệ thống thông
qua giao diện;
Các tác vụ mà người dùng cuối phải thực hiện để phục vụ cho cơng
việc,

•

Xác định nội dung sẽ trình bày

•

Mơi trường trong đó các nhiệm vụ này sẽ được thực hiện.

Jens Martensson

20


5.3. Quy trình thiết kế giao diện
•

Phân tích người dùng
•

Người dùng là ai? Trình độ người dùng?


•

Có khả năng sử dụng tài liệu hướng dẫn bằng giấy hay cần phải mở lớp huấn luyện?

•

Độ tuổi người dùng?

•

Người dùng sẽ được lợi như thế nào?

•

Người dùng có sử dụng thường xun cho cơng việc hay khơng?

•

Nếu người dùng gây ra lỗi thì hậu quả như thế nào

Jens Martensson

21


5.3. Quy trình thiết kế giao diện
•

Phân tích tác vụ và mơ hình
•


Trong tình huống đặc trưng thì người dùng thực hiện cơng việc gì?
•

Tác vụ và các tác vụ con? Luồng cơng việc?

•

Hệ thống cấp bậc của tác vụ?

•

Các Use case xác định những tương tác cơ bản

•

Xác định những cơng việc lọc ra những tác vụ tương tác

•

Hình thành những đối tượng nhận diện ra đối tượng giao tiếp (classes)

•

Phân tích luồng cơng việc xác định cách thức cơng việc được hồn tất

Jens Martensson

22



5.3. Quy trình thiết kế giao diện
•

Phân tích nội dung thể hiện bằng hình ảnh
•

Việc bố trí màn hình theo loại dữ liệu

•

Người dùng có thể tùy biến màn hình?

•

Phân chia những báo cáo sao cho dễ hiểu

•

Sử dụng những kỹ thuật thể hiện thơng tin tóm tắt trong việc thu thập dữ liệu

•

Dữ liệu ra cần định dạng phù hợp với thiết bị

Jens Martensson

23



5.3. Quy trình thiết kế giao diện
•

Các thành phần trong thiết kế giao diện
•

The complete UI complete

•

Page layout

•

Forms and input

•

Tables

•

Direct data manipulation

•

Navigation

•


Searching

•

Page elements

•

e-Commerce

Jens Martensson

24


5.3. Quy trình thiết kế giao diện
•

Thiết kế giao diện chính: hệ thống menu có thể chia làm 3 loại
•

Menu hướng chức năng: nhóm chức năng tương ứng với các loại yêu cầu
•

Tổ chức: chứa chức năng liên quan đến tổ chức cùa doanh nghiệp

•

Lưu trữ: chứa chức năng liên quan đến lưu trữ và quản lý dữ liệu,


•

Tra cứu: gồm các chức năng liên quan đến tìm kiếm, tra cứu

•

Menu hướng đối tượng: nhóm chức năng tương ứng với các lớp đối tượng. Một nhóm chức năng tương ứng với đối tượng
thế giới thực.

•

Menu Hướng quy trình: gốm các chức năng liên quan đến các
quy trình của tổ chức.

Jens Martensson

25