Bài giảng Công nghệ phần mềm: Chương 5 - ĐH Công nghệ TP.HCM

Bài giảng Công nghệ phần mềm: Chương 5 Thiết kế giao diện cung cấp cho người học những kiến thức như: Tổng quan; Nguyên tắc thiết kế giao diện; Quy trình thiết kế giao diện; Tiêu chí đánh giá giao diện. Mời các bạn cùng tham khảo!

Trang 1

THIẾT KẾ GIAO DIỆN

Trang 2

Jens Martensson

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

2

NỘI DUNG

Trang 3

• 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ý

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

Trang 4

Jens Martensson

• 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.

phải thích hợp với các nội dung.

4

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

Trang 5

• 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.

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

Trang 6

Jens Martensson

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

• Ký hiệu

6

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

Trang 7

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

Ví dụ: textbox, combobox, label

Trang 8

Jens Martensson

• 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 quá 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

8

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

Trang 9

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

• Thiếu toàn vẹn

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

Trang 10

Jens Martensson 10

Trang 11

• 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

Trang 12

Jens Martensson

• 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

12

Trang 13

• 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

• 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

Trang 14

Jens Martensson

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

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

14

Trang 15

• 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ụ:

Trang 16

Jens Martensson

• 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.

16

Trang 17

Giao diện không

đối xứng

Trang 19

Giao diện sử

dụng cửa sổ con

Trang 20

Jens Martensson

• Phân tích giao diện

qua giao diện;

việc,

20

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

Trang 21

• 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 xuyên 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

Trang 22

Jens Martensson

• 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ì?

• 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 hoàn tất

22

Trang 23

• 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ị

Trang 24

Jens Martensson

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

• The complete UI complete

Trang 25

• 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

Trang 26

Jens Martensson

• Thiết kế giao diện tra cứu :

• Tiêu chuẩn tra cứu: Gồm biểu thức luận lý, cây, tích hợp

• Kết quả tra cứu: Gồm thông báo, danh sách

• Thao tác người dùng: Giúp người dùng nhập giá trị cho các tiêu chuẩn tra cứu, xem chi tiết các kết quả tra cứu.

26

Trang 27

• Ví dụ: màn hình tra cứu

Trang 28

Jens Martensson

• Ví dụ: Kết quả tra cứu

28

Trang 29

• Thiết kế màn hính nhập liệu: chứa các thành phần giúp người dùng nhập các thông tin, từ khóa,

phục vụ tra cứu thông tin, hoặc các thành phần giúp nhập thông tin lưu trữ.

Tiêu đề	Thiết Kế Giao Diện
Tác giả	Jens Martensson
Trường học	ĐH Công nghệ TP.HCM
Chuyên ngành	Công nghệ phần mềm

Định dạng
Số trang	30
Dung lượng	2,03 MB