Biªn so¹n: L¬ng M¹nh B¸
1
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 1
Tương tác người máy
Human Computer Interaction -HCI
Department of Software Engineering
Faculty of Information Technology
Hanoi University of Technology
TEL: 04-8682595 FAX: 04-8692906
Email: cnpm@it-hut.edu
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 2
Cấu trúc môn học
•60 tiết LT+ đồ án môn học + bài tập
•Cần các kiến thức cơ bản về CNTT, đồ hoạ,
tâm lý nhận thức, công thái học
•Cung cấp những nguyên lý chung về tương
tác người máy
•Cung cấp những kiến thức cần thiết để học
các môn chuyên ngành hẹp và áp dụng vào
thiết kế, xây dựng, đánh giá phần mềm.
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 3
Cấu trúc môn học (tiếp)
•Nội dung môn học: 3 phần 10 chương
I-Phần IPhần cơ sở (foundation) gồm 4
chương:
Chương 0: Tổng quan về HCI
Chương I: Tâm lý nhận thức của Con người
trong giao tiếp và xử lý
Chương II: Nhân tố Máy tính trong tương tác
người máy
Chương III: Các dạng đối thoại trong tương
tác người máy (Dialogue styles for HCI)
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 4
II-Phần II Phân tích và thiết kế giao tiếp người
dùng (User Interface Analyse and Design)
Chương IV:Các nguyên tắc chính và vòng đời
hình sao trong thiết kế giao tiếp Người
dùng – Máy tính
Chương V: Mô hình GOM, Keytrock,… (GOM
and Keytrock Models)
Chương VI: Đặc tả yêu cầu người dùng và phân
tích nhiệm vụ
Chương VII: Ký pháp đối thoại và thiết kế
Cấu trúc môn học (tiếp)
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 5
Cấu trúc môn học (tiếp)
III-Phần III Cài đặt và đánh giá tương tác người
dùng (Users Interface Implementation
and Evaluation ) gồm 2 chương:
Chương VII: Hỗ trợ Cài đặt (Implementation)
Chương VIII: Các kỹ thuật đánh giá phần mềm
(Evaluation Techniques)
•Đánh giá:Đồ án môn học + Bài tập
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 6
Tài liệu tham khảo (Reference)
[1] Jenny Preece et al: Human-Computer Interaction,
Addison-Wesley, 1994
[2] Dix, Finlay, Abowd and Beale: Human -Computer
Interaction (course and book), Prentice-Hall,
second edition, 1993
(http: //www.hcibook.com/hcibook/toc.html)
[3] Gary Perlman,Ohio State University:User Interface
development (course), SEI Curriculum Module,
11-1989
Biªn so¹n: L¬ng M¹nh B¸
2
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 7
Tài liệu tham khảo (tiếp)
[4] C.Machgeels: Interfaces Humains-ordinateur (cours),
Département Informatique, ULB, 2001-2002
[5] J.Coutas, Interface Home-ordinareur,
Conception et réalisation, Dunod Paris 1990 (Bá)
(Nghiêng về hướng tâm lý khoa học nhận thức)
[6] Andy Downton, Engineering the Human-
Computer Interface , McGraw Hill 1992.
[7] J.P.Menadier, l’Interface uilisateur pour une
Informatique plus conviale, Dunod Paris 1991.
[8] Sommerville, Software Engineering (chapter 17-
User Interface), Addison 1996 (BM)
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 8
Tài liệu tham khảo (tiếp)
[9] Dự thảo ®Ò c¬ng m«n häc HCI- PGS Nguyễn Văn Ba
khoa CNTT.
[10] Bản đề cương HCI (Human Computer Interface -Hiệp
hội CNPM ACM & IEEE ). course CS1
(Use Interface Design and Development)
[11] W.Brener, R. Zarnekow, H. Witig: Software
Intelligent Agents. 1998.
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 9
0.1. Thuật ngữ và khái niệm
0.2. Người dùng
0.3. Môi trường
0.4 Lĩnh vực liên quan
0.5. Chất lượng
0.6. Phương tiện và công cụ
0.7. Đầu vào
0.8. Đầu ra
0.9. Công cụ (Tools)
Chương 0: Tổng quan về HCI
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 10
0.1 Định nghĩa và khái niệm
• HCI: Human-Computer Interaction
• CHI: Computer – Human Interaction
• IHO: Interaction Humains Ordinateur
• IHM: Interaction Homme Machine
•Tương tác người máy
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 11
Định nghĩa (tiếp)
• Không có định nghĩa chính xác .Tuy nhiên có thể dùng
hai định nghĩa:
•Định nghĩa 1
Tập các quá trình, đối thoại và các hành động, qua đó ND con
người sử dụng và tương tác với MT (Backer & Buxton, 1987).
•Định nghĩa 2
Là một lĩnh vực liên quan đến thiết kế, đánh giá và cài đặt Hệ
thống MT tương tác cho con người sử dụng và nghiên cứu các
hiện tượng chính xảy ra trên đó (ACMSIGCHI 1992).
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 12
Định nghĩa và vai trò của HCI (tiếp)
Vai trò của HCI:
Tạo ra các Hệ Thống an toàn và sử dụng được
(Usability) như các Hệ Thống chức năng.
Usability: Là khái niệm trong trong HCI có thể hiểu là
làm cho HT dễ học và dễ dùng.
Biªn so¹n: L¬ng M¹nh B¸
3
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 13
0.2 Người dùng
•Trước đây:
-Là các kỹ thuật viên, chuyên gia
•Hiện nay: Đa dạng
-Người dùng đầu cuối (có ít kiến
thức về tin học)
-Các kỹ thuật viên, chuyên gia
-Yêu cầu đòi hỏi cao
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 14
0.3 Môi trường làm việc
•Trước đây:
-Máy tính lớn,không nối mạng
-Người sử dụng máy tính không phải là
người thao tác,điều khiển máy tính.
-Môi trường:văn bản dạng text
•Ngày nay :
-Máy tính cá nhân, mạng, internet
-Môi trường: đa dạng, văn bản, đồ hoạ, trực
quan
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 15
0.4 Lĩnh vực liên quan
•Trước đây : Phương pháp tính
•Ngày nay:
-Phương pháp tính, tính toán ký hiệu, Soạn
thảo Văn bản, xử lý đồ hoạ, hình ảnh, âm
thanh, đa phương tiện.
-§an quyện dữ liệu, lệnh và kết quả Đối
thoại (Dialogue),
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 16
0.4 Lĩnh vực liên quan (tiếp)
4 thành phần chính: Môi trường, Con người,
Máy tính và Quá trình phát triển (ACM SIGCHI
1992)
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 17
Môi trường (Use and Context)
•Sử dụng những gì mà máy tính cung cấp được gọi
là “ứng dụng”. Tổ chức xã hội, công việc, kinh
doanh tương tác với ứng dụng đó
•Lĩnh vực ứng dụng (Application Area): phân loại
các ứng dụng và các ứng dụng đặc biệt
-cá nhân, nhóm
-giao tiếp hướng văn bản
-giao tiếp hướng truyền thông
-Môi trường thiết kế, lập trình, CAD/CAM
-Trợ giúp trực tuyến, điều khiển HT liên tục
•Sự thích nghi Người-Máy
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 18
Con người
•Mục đích: Hiểu con người như là một Bộ xử lý
thông tin
Cảm nhận
Lưu trữ (các loại bộ nhớ)
Xử lý
•Ngôn ngữ, giao tiếp và tương tác
Các sắc thái ngôn ngữ: cú pháp , ngứ nghĩa
Các mô hình hình thức của ngôn ngữ
•Công thái học
Bố trí hiện và điều khiển, quan hệ
Nhận thức của con người và giới hạn,…
Biªn so¹n: L¬ng M¹nh B¸
4
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 19
Máy tính và kiến trúc tương tác
(Computer System and Interface Architecture)
•Các thiết bị vào ra
•Các kỹ thuật đối thoại; vào, ra và tương tác
•Các kiểu đối thoại
•Đồ hoạ máy tính
•Kiến trúc đối thoại
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 20
Qui trình phát triển
•Bao gồm thiết kế và kỹ thuật
•Các tiếp cận thiết kế
•Kỹ thuật và công cụ cài đặt
•Kỹ thuật đánh giá
•Hệ thống mẫu và Case studies
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 21
0.5 Chất lượng
•Trước đây: Trạng thái ứng xử đúng với dữ
liệu đúng
•Tiếp theo:Trạng thái đúng với dữ liệu có
thể sai
•Ngày nay: Thân thiện, sinh động, dễ
dùng
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 22
0.6 Phương tiện và công cụ
•Hai thành phần cơ bản:
Con người và máy tính
Phương tiện: đối thoại
=> Muốn làm tương tác phải Hiểu đối tượng & Con người
Y/c
T/L
Đối thoại
Hoạt động
Trao đổi giữa các
môđun
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 23
•Công cụ: Visual Basic, Jbuilder của Java 1.4
Chú ý Thành phần Swing là phần mới của Java
để xây dựng giao tiếp đồ hoạ: menu, các hộp
công cụ như Combo, List, Dialogue, . . .
•Nếu SV chưa học cần giới thiệu khoảng 10 tiết;
nếu không thì chỉ cần nêu khoảng 1 tiết.
Phương tiện và công cụ (tiếp)
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 24
•Java là NNLT hướng đối tượng,ra đời 5 /1995 do
nhóm chuyên gia đứng đầu là James Goshing thuộc
công ty Sun Microsystems thiết kế.Năm 1991 lấy tên là
Oak,năm 1995 chính thức lấy tên Java,và được thiết
kế lại để xây dựng chương trình ứng dụng Internet.
Ngoài ứng dụng Web,Java còn có đủ đặc tính lập trình
để thiết kế chương trình ứng dụng độc lập.
•Độc lập với hệ nền,do vậy có thể chạy trên bất cứ máy
tính nào có hệ điều hành hỗ trợ Java Virtual Machine.
•Là ngôn ngữ có tính phân tán với khả năng nối mạng
cài sẵn .
Thành phần Swing của JBuilder
Biªn so¹n: L¬ng M¹nh B¸
5
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 25
•Các bản Java trước (<1.2), các thành phần đồ hoạ được
xây dựng trong thư viện AWT (Abstract Windows
Toolkit). AWT là thư viện hữu ích trong thiết kế
chương trình ứng dụng GUI nhưng không dùng để
thiết kế những Project toàn diện.
•Do AWT phụ thuộc nhiều vào hệ nền, nên từ bản Java
2 trở đi các thành phần giao diện người dùng (UI) thay
thế bằng tập hợp thành phần linh hoạt, đa năng và
mạnh mẽ: thành phần Swing.
•Swing.* là gói thuộc Javax chứa thành phần UI dạng
đồ hoạ.
•Swing ít phụ thuộc vào hệ đích hơn và tài dần dần thay
thế cho AWT.
Thành phần Swing (tiếp)
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 26
•Swing chỉ thay thế UI như Button, Textfield, TextArea;
Một số thành phần khác: Graphics, Color, Font,
FontMetrics, LayoutManager vẫn nhờ AWT. Nó thừa
kế các lớp trong thư viện AWT.
•Các thành phần Swing có tên gọi kèm theo tiếp đầu
ngữ J,gồm trên 250 lớp.Swing là giải pháp toàn diện
để thiết kế các trình ứng dụng GUI trung tâm.
•Để giới thiệu về Swing ta có thể quy về các thành phần
chính như sau :
-JComponent là lớp trên của tất cả các thành phần
Swing lightweight,bản thân nó thì được thừa kế từ lớp
Container trong sơ đồ phân cấp đồ hoạ Java.
Thành phần Swing (tiếp)
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 27
Sơ đồ phân cấp của Swing
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 28
Java Swing (tiếp)
Swing UI có thể chia thành bốn thành phần sau:
-javax.swing.AbstractButton. Lớp trừu tượng,
chứa định nghĩa các nút: JButton, JToggleButton,
CheckBox, JRadioButton, JMenuItem và JMenu.
-javax.swing.JtextComponent: chứa các thành
phần văn bản:Jlabel, Jlist, JcomboBox, JmenuBar,
Jpanel, JoptionPane, JscrollBar, JscrollPane,
JfileChooser và gồm các lớp : JpoPupMenu,
JtoolBar, JlayeredPane, JrootPane, JprogressBar,
JtoolTip, JtabbedPane, Jtree, JinternalFrame,
Jslider, Jtable, Jpane, Jseparator, JsplitPane, . . .
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 29
Java Swing (tiếp)
-Các thành phần Swing Heavyweight:
+Japplet (javax.swing.Japplet): Lớp tạo tiểu
trình
+Jframe (javax.swing.Jframe): Là cửa sổ không
lồng bên trong cửa sổ khác,là cơ sở chính chứa
các thành phần UI.Khi muốn thêm một thành
phần thì không trực tiếp thêm vào Jframe mà
phải thêm vào JrootPane -thành phần con của
Jframe.
+JDialog:Là dạng cửa sổ tạm,được bật lên
nhằm thu nhận thông tin từ ND,hoặc thông báo
mỗi khi có biến cố xảy ra.
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 30
Java Swing (tiếp)
-Ngoài hai thành phần trên thì Swing còn chứa
các thành phần khác như sau.
+javax.swing.border:Lớp chứa tất cả các kiểu
đường viền
+javax.swing.colorchooser:Lớp và giao diện
hỗ trợ cho các thành phần.JcolorChooser dùng
để cho phép lựa chọn màu.
+javax.swing.event:Gói đặc biệt chứa các loại
biến cố và các đối tượng lắng nghe.Các thành
phần Swing hỗ trợ các biến cố và đối tượng
lắng nghe được định nghĩa trong java.awt.event
và java.beans .