Ầ ườ
ế
ế
Ề Ệ CÔNG NGH PH N M M ệ i Dùng t K Giao Di n Ng
Thi
Hồ hải nghĩa – lớp 13T3 Phạm Ngọc Hạnh – 12T3
1
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
Giới thiệu tổng quát
Ø Là một khâu trong thiết kế phần mềm
• Hướng người dùng
Ø Vai trò, tầm ảnh hưởng
• Làm bản mẫu, người dùng đánh giá
• Cho phép người dùng sử dụng hệ thống
diện
• Người dùng đánh giá, cảm nhận thông qua tương tác giao
3
→ Dễ sử dụng, thân thiện
• Quyết định sự thành bại của một dự án
Nguyên Tắc Thiết Kế
Ø Người sử dụng hệ thống
• Dễ điều khiển
• Ít phải nhớ
• Giao diện toàn vẹn
Ø Các nguyên tắc thiết kế giao diện • Sự quen thuộc của người sử dụng
• Nhất quán
• Tối thiểu hóa sự bất ngờ
4
• Khả năng phục hồi
• Hướng dẫn người dùng
• Đa dạng người dùng
Người sử dụng hệ thống
Ø Dễ điều khiển
• Không bắt người dùng làm những hoạt động không ưu thích
bút...
• Có được sự mềm dẻo trong tương tác: keyboard, mouse,
• Người dùng có thể ngắt thao tác và undo
• Che dấu kỹ thuật bên trong
5
• Đối tượng sử dụng là khác nhau
Người sử dụng hệ thống
• Người dùng ít phải ghi nhớ
• Nên đưa ra những gợi ý trực quan cho người dùng
• Hiển thị icon bẳng những biểu tượng có ý nghĩa
6
• Tạo đường dẫn tắt (shortcut) trực quan
• ........
Người sử dụng hệ thống
Ø 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
• Đầy đủ:thêm, xóa, sửa
• Có cùng các thức
7
• Các giao diện trong ứng dụng phải toàn vẹn:
• Toàn vẹn về mô hình cũ đang được người dùng ưu chuộng
• .....
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
Các nguyên tắc thiết kế giao diện
• Hỏi lại những hành động: xóa, hủy..
Ø Hướng dẫn người dùng
• hệ thống trợ giúp
• Hướng dẫn trực tiếp
Ø Đa dạng người dùng
• Hỗ trợ nhiều loại tương tác cho nhiều người khác nhau.
9
Vd: cận thị, mù màu
Ø Khả năng phục hồi • Hoàn tác vụ (undo).
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ế.
Vd: ...
Ø Gồm 3 hoạt động chính:
hệ thống
• phân tích người sử dụng: tìm hiểu người dùng sẽ làm gì với
thử nghiệm
10
• Lập mẫu thử hệ thống: phát triển một loạt các mẫu thử để
người dùng để đưa ra bản chính thức
• Đánh giá giao diện: thử nghiệm các mẫu thử cuối cùng với
Tiến trình thiết kế giao diện
Quá trình thiết kế có thể chia ra làm hai bước chính:
Ø Thiết kế tổng thể:
• Giao diện có bao nhiêu màn hình
Ø Thiết kế chi tiết:
• Sự liên kết giữa các màn hình đó như thế nào
• mô tả chi tiết từng màn hình
11
• Sắp xếp các đối tượng trong một màn hình
Tiến trình thiết kế giao diện
Quá trình thiết kế sơ lược
12
Tiến trình thiết kế giao diện (tổng thể)
Tạo bản mẫu thiết kế trên giấy
Cùng người dùng đánh giá thiết kế
Phân tích và tìm hiểu các hoạt động của người dùng
Bản mẫu thiết kế
Tạo bản mẫu thiết kế động
Cùng người dùng đánh giá thiết kế
Bản mẫu chạy được
Cài đặt giao diện người dùng cuối cùng
Sơ đồ thiết kế giao diện người dùng
13
Tiến trình thiết kế giao diện (tổng thể)
Ø Phân tích và tìm hiểu các hoạt động của người dùng
• Hiểu rõ người dùng muốn làm gì với hệ thống
• Mô tả theo cách cả người dùng lẫn người thiết kế đều hiểu
→ kỹ thuật viên cần
hoàn thành một nhiệm vụ
• Phân tích tác vụ: mô hình hóa các bước cần thực hiện để
• Phỏng vấn và đặt các câu hỏi trắc nghiệm
14
• Mô tả: quan sát người sử dụng làm việc
• ...
Kỹ thuật phân tích
Ø Phân tích tác vụ:
Retrieve pictures from remote libraries
do 1, 2,
3 until pictures found, 4
1
2
3
4.
Search for pictures
Establish search terms
Discover possible sources
Request photocopies of found items
do 3.1, 3.2,
3.3 until pictures found,
3.4 if necessary
, 3.5
3.1
3.2
3.3
3.4
3.5
Select library
Log in to catalogue
Search for pictures
Modify search terms
Record relevant items
do 3.3.1, 3.3.2, 3.3.3
3.3.1
3.3.2
3.3.3
Enter search
Review
Initiate
terms
results
search
15
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)
• Đặt câu hỏi theo hai dạng: câu hỏi mở, câu hỏi đóng (có thể
• Câu hỏi có thể sắp xếp: thu hẹp dần, mở rộng dần
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
• Chú ý: không được thể hiện sự áp đặt, một định kiến chủ
Kỹ thuật phân tích
Ø Mô tả
việc của học
• Quát sát người dùng khi họ đang làm việc, có thể hỏi công
quan sát họ làm việc để cảm nhận là tốt nhất
• Có nhiều tác vụ mà tính trực quan, rất khó để diễn đạt nên
với công việc
17
• Giúp hiểu về vai trò của các ảnh hưởng xã hôi, tổ chức đối
Tiến trình thiết kế giao diện (tổng thể)
Ø 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
• Cho phép người dùng trải nghiệm trực tiếp đối với giao diện.
• Làm bản thiết kế trên giấy trước
• Từ bản mẫu trên giấy cộng với tìm hiểu ý kiến người dùng
để tạo ra bản mẫu động phức tạp hơn
• Quy trình làm bản mẫu có thể theo 2 bước:
18 đánh giá sẽ tiến hành tạo bản mẫu chạy được
• Sau khi tạo bản mẫu thiết kế động đã được người dùng
• Cài đặt giao diện người dùng cuối cùng
Tiến trình thiết kế giao diện
Ø Kỹ thuật thiết kế
hệ thống
• Tương tác người dùng: cách người dùng đưa thông tin vào
dùng
Giải pháp được xem xét theo góc độ:
• Thiết bị tương tác với người dùng
• Cách hệ thống trình diễn chủng loại giao diện
• Mô hình tương tác
19
• Biểu diễn thông tin: cách hệ trình diễn thông tin cho người
Tiến trình thiết kế giao diện
Ø Thiết bị vào ra: • Màn hình
• Bàn phím
• Mouse, bút từ
• Màn hình cảm biến
• Mic, loa
• Smart cards....
Cả thiết bị lẫn phương thức đều đang tiến hóa
20
Tiến trình thiết kế giao diện
Ø Các bộ phận thiết kế
(design model)
• Kỹ sư phần mềm tạo ra mô hình thiết kế
(user model)
• Người phụ trách về nhân sự, tạo ra mô hình người dùng
(system perception)
• Người dùng cuối phát triển mô hình nhận biết hệ thống
21
(implementation model)
• Người thực thi tạo ra mô hình thực thi
Tiến trình thiết kế giao diện
Ø Thiết kế chi tiết trên màn hình dao diện
• Bố trí màn hình theo loại dữ liệu: hình ảnh, icon...
• Người dùng có thể tùy biến màn hình
• Phân chia những báo cáo lớn dễ hiểu nhất
• Dữ liệu xuất ra dạng hình ảnh phải vừa vặn
• Sử dụng màu sắc phù hợp
22
• Cảnh báo lỗi
Các vấn đề trong thiết kế giao diện
Ø Thời gian phản hồi:
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
• Thời gian phản hồi trung
• Độ biến thiên thời gian
gặp lỗi
23
• Gây cảm giác hệ thống đang
Các vấn đề trong thiết kế giao diện
Ø 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
• Cần có nghĩa, dễ hiểu, đưa ra các thông tin hưu ích với
•
chính xác
• Có tính xây dựng, nguyên nhân, cách khắc phục
24
• Thông báo lỗi
• Số lượng thông báo
• Thời điểm thứ tự đưa ra thông báo
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
Tên Hero
YASUOS
OK
Cancel
Xử lý lỗi
Lỗi: dxt000#
?
Dữ liệu bạn nhập lỗi
OK
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
ỗ
ệ ố
ể
Thông báo l
i ki u h th ng
Retry
Cancel
Patients
Help
ỗ
ườ
Thông báo l
ể i ki u ng
i dùng
Các vấn đề trong thiết kế giao diện
Ø 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ần có các tiện ích giúp đỡ người sử dụng
Ø Các tài liệu trực tuyến
• Chú giải thao tác, giao diện
tuyến của lumia
Ø Các macro: tự động hóa thao tác
27
• Tra cứu chức năng hệ thống. Vd: chứ năng tra cứu trực
Các vấn đề trong thiết kế giao diện
Ø 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
Các hình thức tương tác
Ø Tương tác trực tiếp với
thông tin:
Vd: soạn thảo văn bản, điền form
• Dễ học, dễ sử dụng
• Nhận được tức thời kết quả
thao tác
• Cài đặt phức tạp, tốn tài
nguyên phần cứng
29
Các hình thức tương tác
Ø Tương tác gián tiếp
Vd: chọn từ lệnh menu giao diện dòng lệnh
thao tác
• Thuận tiện khi lặp đi lặp lại
• Phức tạp
30
• Kém trực quan
Các hình thức tương tác
Ø Sử dụng thực đơn
(menu )
• Không cần nhớ lệnh
phím
• Tối thiểu hóa dùng bàn
lệnh, tham số
• Tránh các lỗi như sai
theo ngữ cảnh
31
• Dễ dàng tạo các trợ giúp
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
• Dùng khi cần người dùng đưa ra
ế ế
ỹ
ệ Tính k ngh trong th k
Ø Giao diện là phần tử dễ
ố
thay đổi
m s
a
Giao diện người dùng
h
• Thay đổi quy trình: phương
T
thức thao tác
• Thay đổi môi trường: phần
cứng, hệ điều hành
Giao diện người dùng
• Nâng cấp: đẹp hơn dễ sử
dụng hơn
Giao diện người dùng
Ø Giao diện phải dễ sửa đổi:
33
có tính khả chuyển
Ø Giao diện nên độc lập với
xử lý
ươ
ụ
Ph
ng pháp và công c thi
ế ế t k
Ø Phương pháp:
• Hướng đối tượng
Ø Công cụ:
• Hướng chức năng
• Power Designer
• Rational Rose
• Visual basic, c#
34
• ….
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
Giao diện dòng lệnh
36
Các loại giao diện
Ø Giao diện đồ họa
phone.....
• Là giao diện thông dụng nhất hiện nay. Trên PC, smart
• Dễ học, dễ sử dụng thuận tiện với người ít kinh nghiệm
song giữa các cửa sổ
• Có nhiều cửa sổ. Không sợ mất thông tin khi tương tác song
sổ
37
• Có thể hiển thị, tương tác dữ liệu trên nhiều vị trí trong cửa
Giao diện đồ họa (GUI)
38
Giao diện đồ họa (GUI)
39
Ầ ệ
ế
ế
Ề Ệ CÔNG NGH PH N M M ườ t K Giao Di n Ng Thi
i Dùng
Cảm ởn giáo viên và các bạn đã lắng nghe
40
