Bài thuyết trình nhóm: Công nghệ phần mềm thiết kế giao diện người dùng

Bài thuyết trình nhóm: Công nghệ phần mềm thiết kế giao diện người dùng trình bày tổng quan về thiết kế giao diện người dùng, nguyên tắc thiết kế giao diện người dùng, tiến trình thiết kế giao diện, các công cụ thiết kế, các mẫu thiết kế giao diện. Mời các bạn cùng tham khảo nội dung chi tiết tài liệu.

Trang 1

CÔNG NGH PH N M M Ệ Ầ Ề Thi t K Giao Di n Ng ế ế ệ ườ i Dùng

Hồ hải nghĩa – lớp 13T3 Phạm Ngọc Hạnh – 12T3

1

Trang 2

Tổng quan về thiết kế giao diện người

dùng

• Giới thiệu

• Nguyên tắc thiết kế giao diện người dùng

• Tiến trình thiết kế giao diện

• Các công cụ thiết kế

• Các mẫu thiết kế giao diện

2

Trang 3

Giới thiệu tổng quát

Trang 4

Nguyên Tắc Thiết Kế

Ø Người sử dụng hệ thống

Ø Các nguyên tắc thiết kế giao diện

• Sự quen thuộc của người sử dụng

Trang 5

Người sử dụng hệ thống

Ø Dễ điều khiển

bút

5

Trang 6

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

Trang 7

Ø Giao diện toàn vẹn

•

7

Trang 8

Các nguyên tắc thiết kế giao diện

Ø Sự quen thuộc của người sử dụng

Giao diện phải được xây dựng trên các thuật ngữ và các khái niệm mà người sử dụng cảm thấy dễ hiểu hơn là thuật ngữ liên quan đến máy tính

Ø Nhất quán

Hệ thống nên hiển thị ở mức thống nhất thích hợp

Ø Tối thiểu hóa sự bất ngờ

Nếu một yều được xử lý theo các thông thường thì người sử dụng có thể dự đoán thao tác yêu cầu tương tự khác

8

Trang 9

Các nguyên tắc thiết kế giao diện

Trang 10

Tiến trình thiết kế giao diện

Ø Là một quy trình lặp đi lặp lại với sự liên lạc chặt chẽ giữa người dùng và người thiết kế.

Trang 11

Quá trình thiết kế có thể chia ra làm hai bước chính:

Ø Thiết kế tổng thể:

Ø Thiết kế chi tiết:

• mô tả chi tiết từng màn hình

• Sắp xếp các đối tượng trong một màn hình

11

Trang 12

12

Quá trình thiết kế sơ lược

Trang 13

Tiến trình thiết kế giao diện (tổng thể)

13

Sơ đồ thiết kế giao diện người dùng

Phân tích và tìm hiểu các hoạt động của người dùng

Tạo bản mẫu thiết kế trên giấy

Cùng người dùng đánh giá thiết kế

Tạo bản mẫu thiết kế động

Cài đặt giao diện người dùng cuối cùng

Cùng người dùng đánh giá thiết kế

Bản mẫu chạy được Bản mẫu

thiết kế

Trang 14

Ø Phân tích và tìm hiểu các hoạt động của người dùng

→ kỹ thuật viên cần

hoàn thành một nhiệm vụ

Trang 15

Kỹ thuật phân tích

Ø Phân tích tác vụ:

15

Retrieve pictures from remote libraries

Discover possible sources

Establish search terms

Search for pictures

Request photocopies

of found items

Select library catalogueLog in to Search forpictures search termsModify

Record relevant items

Enter search terms searchInitiate Reviewresults

do 1, 2,

3 until pictures found, 4

do 3.1, 3.2, 3.3 until pictures found, 3.4 if necessary , 3.5

do 3.3.1, 3.3.2, 3.3.3

Trang 16

Kỹ thuật phân tích

Ø Phỏng vấn: có thể là phỏng vấn tay đôi, hoặc nhóm

trắc nghiệm)

quan, biết lắng nghe, tôn trọng, cảm thông

Ø Phiếu điều tra: có thể coi là một hình thức phỏng vấn gián tiếp

16

Trang 17

với công việc

17

Trang 18

Ø Tạo bản mẫu thiết kế:

Đánh giá khả năng sử dụng giao diện một cách khách quan nhất

để tạo ra bản mẫu động phức tạp hơn

đánh giá sẽ tiến hành tạo bản mẫu chạy được

18

Trang 19

Giải pháp được xem xét theo góc độ:

19

Trang 20

Ø Thiết bị vào ra:

Trang 21

Trang 22

Ø Thiết kế chi tiết trên màn hình dao diện

22

Trang 23

Các vấn đề trong thiết kế giao diện

Ø Thời gian phản hồi:

• Thời gian phản hồi trung

bình:

• không được lâu quá: cảm giác mệt mỏi

• Cần chứng tỏ hệ thống đang hoạt động

• Độ biến thiên thời gian

• Gây cảm giác hệ thống đang

gặp lỗi

23

Trang 24

Ø Thông báo:

Là phản hồi của hệ thống đối với thao tác

người dùng

• Tránh đưa ra sai số liệu

• Định dạng thông báo nhất quán

• chính xác

• Có tính xây dựng, nguyên nhân, cách khắc phục

24

Trang 25

Xử lý lỗi

• Giả sử một game thủ tìm kiếm thông tin của một hero trong game bằng cách nhật tên

M i nh n tên hero và n OK ờ ậ ấ

YASUOS

Tên Hero

OK Cancel

Trang 26

Xử lý lỗi

Thông báo l i ki u h th ngỗ ể ệ ố

Thông báo l i ki u ngỗ ể ười dùng

Patients Help Retry Cancel

Không có tướng nào tên YASUOS Nhấn Patients để xem danh sách Nhấn Retry để nhập lại

Nhấn Help để tìm hiểu thêm

Lỗi: dxt000#

Dữ liệu bạn nhập lỗi

?

Trang 27

Ø Tiện ích (trợ giúp)

Ø Tiện ích tích hợp: trợ giúp, trực tuyến, theo ngữ cảnh

Ø Các tài liệu trực tuyến

tuyến của lumia

Ø Các macro: tự động hóa thao tác

27

Trang 28

Ø Hệ thống HELP

• Help? Nghĩa là “help I want information”

• Help! Nghĩa là “help I'm in trouble”

• Help không đơn giản chỉ là 1 sổ tay hướng dẫn

• 1 hệ thống help thông tin là hiện thị thông tin động

• Thông tin help cung cấp cho người dụng phải giá trị, không tràn lan.

• Help nên được thiết kế ở nơi người dùng dễ tìm nhất

28

Trang 32

Các hình thức tương tác

Ø Đối thoại (Dialog)

quyết định

Vd: hệ thống đưa ra đối thoại để

người dụng chọn giữa Abort, Retry,

Ignore

32

Trang 33

Giao diện người

người dùng

Tham

số

Trang 34

Ph ươ ng pháp và công c thi t k ụ ế ế

Trang 35

Các loại giao diện

Ø Giao diện dòng lệnh

• Là phương thức tương tác đầu tiên

• Nhập lệnh dữ liệu từ bàn phím

• Dễ cài đặt so với giao diện đồ họa

• Thực hiện thông qua hàm chuẩn của ngôn ngữ

• Không tốn tài nguyên hệ thống

• Có khả năng tạo ra lệnh phức tạp nhờ tổ hợp

• Thao tác thực hiện tuần tự, khó sửa lỗi

• Không phù hợp với người dùng ít kinh nghiệm35

Trang 36

Giao diện dòng lệnh

36

Trang 37

Các loại giao diện

Ø Giao diện đồ họa

phone

song giữa các cửa sổ

sổ

37

Trang 38

Giao diện đồ họa (GUI)

38

Trang 39

Giao diện đồ họa (GUI)

39

Trang 40

CÔNG NGH PH N M M Ệ Ầ Ề

Cảm ởn giáo viên và các bạn đã lắng nghe

40

Định dạng
Số trang	40
Dung lượng	1,7 MB