Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Cấu trúc môn học
Tương tác người máy
Human Computer Interaction - HCI
• 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
Department of Software Engineering
Faculty of Information Technology
Hanoi University of Technology
• 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.
TEL: 04-8682595 FAX: 04-8692906
Email: cnpm@it-hut.edu
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 1 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 2
Cấu trúc môn học (tiếp)
Cấu trúc môn học (tiếp)
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ế
• Nội dung môn học: 3 phần 10 chương
I- Phần I Phầ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
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 3 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 4
Tài liệu tham khảo (Reference)
Cấu trúc môn học (tiếp)
[1] Jenny Preece et al: Human-Computer Interaction,
Addison-Wesley, 1994
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:
[2] Dix, Finlay, Abowd and Beale: Human -Computer
Chương VII: Hỗ trợ Cài đặt (Implementation)
Chương VIII: Các kỹ thuật đánh giá phần mềm
Interaction (course and book), Prentice-Hall,
second edition, 1993
(http: //www.hcibook.com/hcibook/toc.html)
[3] Gary Perlman, Ohio State University: User
Interface
(Evaluation Techniques)
• Đánh giá: Đồ án môn học + Bài tập
development (course), SEI Curriculum Module,
11-1989
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 5 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 6
1
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Tài liệu tham khảo (tiếp)
Tài liệu tham khảo (tiếp)
[4] C.Machgeels: Interfaces Humains- ordinateur (cours),
Département Informatique, ULB, 2001-2002
[9] Dự thảo ®Ò c¬ng m«n häc HCI- PGS Nguyễn Văn Ba
[5] J.Coutas, Interface Home-ordinareur,
khoa CNTT.
[10] Bản đề cương HCI (Human Computer Interface -Hiệp
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
hội CNPM ACM & IEEE ). course CS1
(Use Interface Design and Development)
[11] W.Brener, R. Zarnekow, H. Witig: Software
Informatique plus conviale, Dunod Paris 1991.
Intelligent Agents. 1998.
[8] Sommerville, Software Engineering (chapter 17-
User Interface), Addison 1996 (BM)
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 7 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 8
0.1 Định nghĩa và khái niệm
Chương 0: Tổng quan về HCI
• HCI: Human-Computer Interaction
• CHI: Computer – Human Interaction
• IHO: Interaction Humains Ordinateur
• IHM: Interaction Homme Machine
• Tương tác người máy
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)
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 9 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 10
Định nghĩa và vai trò của HCI (tiếp)
Đị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).
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.
• Đị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).
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 11 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 12
2
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
0.3 Môi trường làm việc
0.2 Người dùng
• Trước đây:
• Trước đây:
- Là các kỹ thuật viên, chuyên gia
• Hiện nay: Đa dạng
- 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ười dùng đầu cuối (có ít kiến
• Ngày nay :
thức về tin học)
- 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
- Các kỹ thuật viên, chuyên gia
- Yêu cầu đòi hỏi cao
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 13 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 14
0.4 Lĩnh vực liên quan (tiếp)
0.4 Lĩnh vực liên quan
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)
• 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
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 15 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 16
Con người
Môi trường (Use and Context)
• Mục đích: Hiểu con người như là một Bộ xử lý
• 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
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
- 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
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,…
• Sự thích nghi Người-Máy
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 17 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 18
3
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Qui trình phát triển
Máy tính và kiến trúc tương tác
(Computer System and Interface Architecture)
• 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
• 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
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 19 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 20
0.6 Phương tiện và công cụ
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ó
• 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
thể sai
Y/c
• Ngày nay: Thân thiện, sinh động, dễ
Hoạt động
T/L
dùng
Đối thoại
Trao đổi giữa các
môđun
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 21 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 22
Thành phần Swing của JBuilder
Phương tiện và công cụ (tiếp)
• 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, . . .
• 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.
• 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.
• Độ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 .
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 23 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 24
4
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Thành phần Swing (tiếp)
Thành phần Swing (tiếp)
• Các bản Java trước (<1.2), các thành phần đồ hoạ được
• 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.
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.
• 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
• 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.
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.
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 25 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 26
Sơ đồ phân cấp của Swing
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
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 27 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 28
Java Swing (tiếp)
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 Swing Heavyweight:
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 .
+ 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.
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 29 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 30
5
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Java Swing (tiếp)
Thiết kế các thành phần giao diện với
Swing
khiển
điều
cấp
các
• Chương trình đồ hoạ Java được điều khiển bởi biến
cố. Khi chương trình vận hành tức là tương tác với ND
thì tất mọi biến cố chi phối việc thi hành chương trình .
Biến cố phát sinh từ các tác động bên ngoài của con
người như: bấm chuột, nhấn phím . . . , hay từ HĐH.
Các lớp biến cố được chứa trong gói Java.awt.event
ngoại trừ một số biến cố như : EventListenerList,
ListSlectionEvent, chứa trong gói Javax.Swing.event .
• Swing quản lý các đối tượng lắng nghe thông qua
ListenerList, nó được gọi từ EventListenerList.
+ javax.swing.filechooser: Thành phần hỗ trợ
cho JfileChooser.
+ javax.swing.plaf: Lớp chứa các kiểu nhìn và
cảm nhận (look–and–feel) từ sơ đồ phân cấp đồ
hoạ API, dùng để định nghĩa các thủ tục thành
phần giao diện người dùng. Hầu hết các lớp
này được chứa trong gói trừu tượng, chúng
được thiết kế chỉ dành cho các nhà phát triển.
Một số lớp con như sau:javax.swing.table -
Jtable,
Cung
javax.swing.text: Chứa các lớp và giao diện
được sử dụng bởi các thành phần văn bản.
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 31 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 32
Một số biến cố và phương thức xử lý
Thiết kế các thành phần giao diện với
Swing (tiếp)
1- ActionEvent
+ Nguyên nhân: Nhấp nút lên đối tượng, trường văn
bản ,...
• Khi nhận được biến cố phát sinh do tác động lên các
đối tượng nguồn thì đối tượng lắng nghe (listener) đã
được đối tượng nguồn đăng ký trước sẽ nhận và xử lý
biến cố dựa theo chương trình đã lập. Giữa đối tượng
nguồn và đối tượng lắng nghe luôn liên lạc với nhau
thông qua phương thức xử lý biến cố (handler) đặt trên
đối tượng lắng nghe .
+ Giao diện lắng nghe : ActionListener
+ Phương thức XL:actionPerformed(ActionEvent e)
2- ItemEvent
+ Nguyên nhân: Chọn khoản mục mới, nhấp ô
chọn
+ Giao diện lắng nghe: ItemListener
+ Phương thức xử lý:ItemStateChanged(ItemEvent e)
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 33 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 34
Một số biến cố và phương thức xử lý
(tiếp)
Một số biến cố và phương thức xử lý
(tiếp)
3- WindowEvent
+ Nguyên nhân: Mở, đóng, thu nhỏ thành biểu
tượng
vii)windowDeactivated(WindowEvent e)
4- ContainerEvent
+ Nguyên nhân: Bổ sung hoặc loại bỏ thành phần
khỏi vật chứa
+ Giao diện lắng nghe: WindowListener
+ Phương thức xử lý:
+ Giao diện lắng nghe: ContainerListener
+ Phương thức xử lý :
i)componentAdded(ContainerEvent e)
ii)componentRemoved(ContainerEvent e)
i)window Closing(WindowEvent e)
ii)windowOpened(WindowEvent e)
iii)windowIconified(WindowEvent e)
iv)windowDeiconified(WindowEvent e)
v)windowClosed(WindowEvent e)
vi)windowActivated(WindowEvent e)
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 35 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 36
6
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Một số biến cố và phương thức xử lý
(tiếp)
Một số biến cố và phương thức xử lý
(tiếp)
6- FocusEvent (mở rộng gói java.awt.ComponentEvent)
+ Nguyên nhân: Dời tiêu điểm đến/ ra khỏi thành phần :
5- ComponentEvent
+ Nguyên nhân: Di chuyển, định kích cỡ, dấu hoặc
Component
hiện lại Component
+ Giao diện lắng nghe : FocusListener
+ Phương thức xử lý :
+ Giao diện lắng nghe: ComponentListener
+ Phương thức xử lý :
i)focusGained(FocusEvent e)
ii)focusLost(FocusEvent e)
7- TextEvent
+ Nguyên nhân:Thay đổi văn bản(JtextComponent)
+ Giao diện lắng nghe : TextListener
i)componentMoved(ComponentEvent e)
ii)componentHidden(ComponentEvent e)
iii)componentResized(ComponentEvent e)
iv)componentShown(ComponentEvent e)
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 37 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 38
Một số biến cố và phương thức xử lý
(tiếp)
Một số biến cố và phương thức xử lý
(tiếp)
+ Giao diện lắng nghe: có hai giao diện lắng nghe là
MouseListener và MouseMotionListener
+ Phương thức xử lý.
- Với MouseListener :
: KeyListener
+ Phương thức xử lý : textValueChanged(TextEvent e)
8- KeyEvent
+ Nguyên nhân: Thả hoặc nhấn phím Component
+ Giao diện lắng nghe
+ Phương thức xử lý :
i) KeyPressed(KeyEvent e)
ii) KeyReleased(KeyEvent e)
iii)KeyTyped(KeyEvent e)
i) MousePressed(MouseEvent e)
ii) MouseReleased(MouseEvent e)
iii) MouseEntered(MouseEvent e)
iv)MouseExited(MouseEvent e)
v)MouseClicked(MouseEvent e)
-Với MouseMotionListener :
i) MouseDragged(MouseEvent e)
9- MouseEvent
+ Nguyên nhân:Di chuyển chuột Component
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 39 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 40
Thiết kế vùng chứa
Một số biến cố và phương thức xử lý
(tiếp)
• Các thành phần để thiết kế vùng chứa sau: Jframe,
tạo khung cơ sở chứa các thành phần Jpanel
:
ii) MouseMoved(MouseEvent e)
10- AdjustmentEvent
+ Nguyên nhân: Di chuyển thanh cuốn JscrollBar
+ Giao diện lắng nghe
: AdjustmentListener
+ Phương thức xử lý
adjustmentValueChanged(AdjustmentEvent e)
Jpanel, Japplet. Với:
- Jframe:
hoặc các thành phần giao diện.
- Japplet: tạo tiểu trình có thể chứa các Jframe
- Jpanel: là các thành phần trực tiếp dùng để biểu diễn
các nút, nhãn, văn bản, . . ., được đặt bám vào các
Jframe/Japplet. Jpanel có thể được đặt lồng nhau.
:
11- ListSelectionEvent
+ Nguyên nhân: Chọn khoản mục: Jlist
+ Giao diện lắng nghe: ListSelectionListener
+ Phương thức xử lý
- Ngoài các thành phần dùng để thiết kế, Swing còn thừa
kế các trình quản lý các thành phần giao diện (layout
manager) nhằm đạt hiệu quả cao như: FlowLayout,
GridLayout, GridBagLayout, BorderLayout, ...
ValueChanged(ListSelectionListener e)
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 41 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 42
7
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Sơ đồ phân cấp của Jframe
Lớp JrootPane
(javax.swing.JrootPane)
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 43 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 44
Lớp quản lý bố cục
Một vài thí dụ dùng Swing để xây
dựng giao tiếp UI
H×nh 1: Cöa sæ so¹n th¶o chÝnh
Dept. of SE, 2002
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 45 HUT, Falt. of IT HCI - One. 46
Thí dụ dùng Swing để xây dựng giao
tiếp UI (tiếp)
Thí dụ dùng Swing để xây dựng giao
tiếp UI (tiếp)
Hình 3: Sử dụng JColorChooser
Hỡnh 2: Sử dụng jFileChooser
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 47 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 48
8
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Môi trường Swing khi thiết kế
UI
Một vài đoạn mã lệnh cho các
sự kiện
void fileOpen() {
if (!okToAbandon()) {return;}
if (JFileChooser.APPROVE_OPTION ==
jFileChooser1.showOpenDialog(this)) {
openFile(jFileChooser1.getSelectedFile().get
Path());
}
this.repaint();
}
Đoạn mã lệnh cho sự kiện khi chọn Open trên
Menu hay nhấn biểu tượng Open trên ToolBar
Thiết kế 3 phím lệnh với Jbutton trên JToolBar
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 49 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 50
Chương I: Tâm lý nhận thức của Con
Mã lệnh cho thủ tục mở File
người trong giao tiếp và xử lý
void openFile(String fileName) {
try
{File file = new File(fileName);
int size = (int)file.length();
int chars_read = 0;
FileReader in = new FileReader(file);
char[] data = new char[size];
while(in.ready()) {
chars_read += in.read(data,
chars_read, size - chars_read);}
0,
1.1 Tổng quan
1.2 Kênh vào ra
1.3 Bộ nhớ
1.4 Lập luận và giải quyết vấn đề
1.5 Tâm lý và thiết kế hệ tương tác
in.close();
jTextArea1.setText(new String(data,
chars_read));
this.currFileName = fileName;
this.dirty = false;
statusBar.setText("Opened"+fileName);
updateCaption();}
catch (IOException e)
{ statusBar.setText("Error opening "+fileName);}}
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 51 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 52
1.2 Kênh vào ra
1.1 Tổng quan
• Thực hiện thông qua:
• Chức năng: Con người được xem như một
Quan sát (Vision): kích thứơc, màu sắc và độ
tương phản
Đọc ( Reading): nhận mẫu, mã hoá bởi biểu
diễn bên trong => cú pháp, ngữ nghĩa.
Nghe (Hearing): khoảng cách, hướng của đối
tượng
hệ thống xử lý thông tin tinh tế, gồm:
Hệ thống cảm nhận (sensory system)
Hệ thống nhận thức (cognitif system)
Hệ thống xử lý (motor system)
• Tương tác: qua kênh vào ra
Nhấn phím: sự phản hồi lại của môi trường
Chuyển động: thời gian trả lời và thời gian
Thông tin nhận và trả lời qua kênh vào
Thông tin lưu trữ trong bộ nhớ
Thông tin được xử lý và ứng dụng theo nhiều
cách khác nhau.
chuyển động.
- Thời gian chuyển động: phụ thuộc tuổi tác, độ tinh
tế
- Thời gian trả lời: phụ thuộc kiểu kích thước
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 53 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 54
9
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
1.3 Bộ nhớ
• Luật Fit: miêu tả thời gian, chi phí để nhận
được kết quả (đích)
- D : K/c dịch chuyển
- L: kích thước đích
X0
X1 X2
Đích
D
- Xi: k/c dịch chuyển sau i
lần, Xi = x Xi-1
• Hai loại bộ nhớ:
Bộ nhớ ngắn hạn (STM)
Bộ nhớ dài hạn (LTM)
• Mô hình bộ nhớ
- Vì X0= D => Xn = nx D
L
- Xn L/2 => n x D L/2
Rehearsal
Attention
- n = -log2 (2D/L)/log2
T = I log2 2D/L với :
I = -(s + c +m)/log2 100 ms
Bộ nhớ
LTM
Bộ nhớ
cảm nhận
Bộ nhớ STM
bộ nhớ l/v
= s + c + m
Thời gian chạm đích chỉ phụ thuộc vào tỉ số
D/L (khoảng cách phải nhỏ, đích phải lớn
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 55 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 56
Bộ nhớ dài hạn
Bộ nhớ (tiếp)
• Các đặc trưng của bộ nhớ dài hạn:
Bộ nhớ cảm nhận (sensory memory): chứa kích
thích (stimulus) từ nhìn, nghe, sờ. Thông tin này
được chuyển sang bộ nhớ STM bởi “Attention”,
thực chất là một bộ lọc .
Bộ nhớ ngắn hạn (Short Tem Memory): hay còn gọi
- Cấu trúc tuyến tính
- Truy nhập chậm: 1/10 s
- Hư hỏng: chậm
- Khả năng không hạn chế
- Thông tin biểu diễn qua mạng ngữ nghĩa, frame, hoặc luật sản
suất,. . .
• Hai kiểu bộ nhớ LTM:
là bộ nhớ làm việc, có các đặc trưng sau:
- Truy cập nhanh: 700 ms
- Hư hỏng (Decay): nhanh (200ms)
- Khả năng hạn chế: 7 2 chữ số
- rời rạc (episotic): bộ nhớ tuần tự các sự kiện
- Ngữ nghĩa (Semantic): bộ nhớ có cấu trúc của các sự kiện, khái
niệm và kiểu.
• Thông tin trong bộ nhớ ngữ nghĩa lấy từ bộ nhớ rời rạc
Bộ nhớ dài hạn (Long Tem Memory): hay còn gọi là
bộ nhớ lưu trữ. Thông tin từ bộ nhớ STM sang LTM
thực hiện bởi “tổng duyệt ” Rehearsal”.
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 57 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 58
Bộ nhớ dài hạn (tiếp)
Bộ nhớ dài hạn (tiếp)
• Bộ nhớ ngữ nghiã cấu trúc
Cung cấp truy nhập thông tin
Biểu diễn mối quan hệ giữa các bit của thông tin
Hỗ trợ suy diễn
• Mô hình mạng ngữ nghĩa (semantic network)
Thừa kế: các nút con thừa kế tính chất các nút cha
Mối quan hệ giữa các bit thông tin được tường minh
Hỗ trợ suy diễn qua thừa kế
• Mô hình frame
Thông tin được biểu diễn dưới dạng cấu trúc dữ liệu. Các Slots trong
xcấu trúc được thể hiện với giá trị đặc biệt cho 1 thể hiện đã cho của
dữ liệu
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 59 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 60
10
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Bộ nhớ dài hạn (tiếp)
Mô hình Scrips
Bộ nhớ dài hạn (tiếp)
Mô hình frame
Collie
Fixed: nhánh của chó
• Mô hình thông tin nổi được yêu cầu để giải thích tình
huống hay ngôn ngữ. Kịch bản cũng có các phần tử để
cá biệt hoá các giá trị đặc biệt
Loại: chó chăn cừu
DOG
Fixed: 4 chân
Default:
• Thí dụ
Default:
Kích thước: 65 cm
Loài: ăn thịt
âm thanh: chối tai
Variable
Variable
kích thước
màu sắc
màu sắc
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 61 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 62
1.4 Suy luận và giải quyết vấn đề
Bộ nhớ dài hạn (tiếp)
mô hình luật sản xuất
• Luật sản xuất: Biểu diễn tri thức thủ tục- luật hành
động-điều kiện. nếu điều kiện thoả thì hành động được
thực hiện.
• Suy luận có hai dạng:
Deductive
Inductive
a) Suy luận deductive
• Chú ý:
Dạng: If Cond Then [Action]
Đưa ra kết luận cần thiết 1 cách lô gíc từ các giả thiết
Cấu trúc, ngữ nghĩa, thói quen làm cho dễ nhớ
Quên: thông tin trong bộ nhớ dài hạn hỏng rất chậm, các thông
tin mới sẽ thay thế các thông tin cũ (retroactive interreference)
Trích rút: - recall: thông tin được tái tạo trong bộ nhớ và trợ
If it is Friday then she will go to work
It is Friday Therefore she will go to work.
Kết luận lô gic không nhất thiết phải đúng
giúp bởi loại, hình ảnh
- recognition: thông tin cung cấp các tri thức đã biết
If it is raining then the ground is dry
It is raining Therefore the ground is dry
trước và kém phức tạp hơn gọi lại
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 63 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 64
Suy luận (tiếp)
Suy luận và giải quyết vấn đề
• Giải quyết vấn đề: Là quá trình tìm lời giải chưa
biết nhờ tri thức
b) Suy luận qui nạp (inductive)
Từ cái đã biết đến cái chưa biết
Thí dụ all elephants we have seen have trunks therefore
all elephants have trunks.
Không tin cậy: chỉ có thể khẳng định sai
Tuy nhiên con người không quen sử dụng dạng phủ
định
Abductive: Lập luận từ sự kiện đến nguyên nhân. Thí
dụ: Sam lái nhanh khi say rượu vậy nếu Sam lái nhanh
thì cho là Sam say.
• Các lý thuyết
a) Gestalt
Giải quyết vấn đề bao gồm sản xuất và tái sản xuất
Sản xuất vẽ lên bản chất và cấu trúc hoá lại vấn đề
Đích trừu tượng không đủ giải thích bản chất
Chuyển dịch từ các hành vi đến lý thuyết xử lý thông tin
b) Lý thuyết không gian bài toán
Không gian bài toán bao gồm các phát biểu của bài toán
Giải quyết vấn đề bao gồm việc khởi sinh các phát biểu
Không tin cậy: có thể dẫn đến giải thích sai.
nhờ các phép toán
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 65 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 66
11
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Suy luận và giải quyết vấn đề (tiếp)
Suy luận và giải quyết vấn đề (tiếp)
Heuristics có thể dùng để chọn các phép toán
Thao tác với HT xử lý thông tin bên trong của con người
ứng dụng rộng rãi với các bài toán được định nghĩa tốt
• Tương tự
Các bài toán mới có thể giải quyết bằng các tri thức tương tự
trong lĩnh vực mới
•
ânh xạ tương tự này có thể khó khi lĩnh vực đó khá khác về
mặt ngữ nghĩa
• Kiểu thu nhận tri thức
- Các luật đa mục đích để giải thích các sự kiện
của bài toán – tri thức tăng cường
- Học các luật đặc tả nhiệm vụ
- Luật được hiệu chỉnh
Cơ chế dịch chuyển giữa các mức:
- Thủ tục hoá: mức 1 và mức 2
- Khái quát hoá: mức 2 và mức 3
i) Thủ tục hoá (proceduralization)
Cắt đoạn thông tin như trong STM
Khái niệm hơn là nhóm nhân tạo. Thông tin càng có cấu trúc
càng hiệu quả
Mô hình 3 mức của thu nhận tri thức:
- Mức 1: If cook [type, ingredients, time]
THEN cook for: time
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 67 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 68
Suy luận và giải quyết vấn đề (tiếp)
Suy luận và giải quyết vấn đề (tiếp)
Khái quát hoá
- Mức 2: If
type is casserole AND ingredients ARE
[chicken,carrots,potatoses]
cook [casserole,[chicken,carrots,potatoses], 2 hours]
cook [casserole,[beef,dumpinh,carrots ], 2 hours]
cook [caake,[flour, sugar,butter, egg], 45 min]
- Mức 2: If
type is casserole AND ingredients ARE
THEN cook for: 2 hours
[chicken,carrots,potatoses]
type is cakle AND ingredients ARE
THEN cook for: 2 hours
If
[chicken,carrots,potatoses]
type is cakle AND ingredients ARE
THEN cook for: 45 min
- Mức 3: If
type is casserole AND ingredients ARE
If
[chicken,carrots,potatoses]
THEN cook for: 45 min
ANYTHING
THEN cook for: 2 hours
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 69 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 70
Lỗi và mô hình suy nghĩ
1.5 Tâm lý và thiết kế hệ thống
tương tác
• Kiểu lỗi
Sơ ý (slip)/ lỗi nhỏ: Thay đổi trạng thái hành
• Các cá thể khác nhau có suy nghĩ khác nhau
• Các mô hình về tâm lý nhận thức
1) cá thể khác nhau
vi có thể gây lỗi
Hiểu không đúng: con người tạo ra các mô
hình tư duy để giải thích hành vi. Nếu hiểu
sai sẽ gây lỗi.
- dài hạn: phụ thuộc vào giới, sức khoẻ và mức độ
thông minh
- ngắn hạn: ảnh hưởng của lo âu hay mệt mỏi
- Thay đổi: tuổi tác
2) các mô hình
- Hiểu ngữ cảnh về tâm lý
- Hiểu điều kiện thực nghiệm cụ thể
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 71 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 72
12
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Các mô hình
Chương II: Nhân tố Máy tính
trong tương tác người máy
• Các hướng dẫn (guidlines)
• Các mô hình tâm lý nhận thức (GOMS,
Keytrock, . . .)
• Các kỹ thuật phân tích và đánh giá
2.1 Tổng quan
2.2 Thiết bị vào
2.3 Thiết bị ra
2.4 Bộ nhớ
2.5 Xử lý
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 73 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 74
2.1 Tổng quan
Một hệ thống máy tính tiêu biểu
• Máy tính là thành phần thứ 2 tham gia
tương tác
• Các thành phần chủ yếu:
Các thiết bị vào ra: màn hình, bàn phím, máy
in, loa, . . .
Bộ nhớ
Xử lý: tốc độ, mạng. Hình thức xử lý: lô, tương
tác
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 75 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 76
Thiết bị vào (tiếp)
2.2 Thiết bị vào-ra
Thiết bị vào
• Một số loại bàn phím khác:
Alphabectic: phím phân bố theo thứ tự chữ cái =>
chậm, đào tạo lâu
Đặc tả đối tượng
và hành động
của tương tác
Dvorak: tốc độ tăng từ 10 đến 15%, giảm mệt
Chord: 4 đến 5 phím. Chữ cái là tổ hợp 1 số phím. Kích
thước nhỏ, học nhanh. Tuy nhiên không ưa chuộng
• Bàn phím
• Bộ nhận dạng chữ viết tay
• Chuột và thiết bị định vị
i) Bàn phím
Thiết bị vào chung
Bàn phím chuẩn kiểu QWERTY
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 77 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 78
13
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Thiết bị vào (tiếp)
Thiết bị vào (tiếp)
• Một số thiết bị khác
Joystick: thiết bị vào gián tiếp, điều khiển bởi
chuyển động hay nhấn. Thường có phím nhấn ở
trên đỉnh hay mặt trước.
• Bộ nhận dạng chữ viết tay:
Chữ viết tay là công cụ giao tiếp phổ biến
Thể hiện phần lớn thông tin theo cách thức tự nhiên
• Chuột và thiết bị định vị
Mouse: phổ biến, dế dùng, gồm tấm trượt và phím (thường
Trackball: giống như chuột (upside-down).
từ 1 đến 3 phím)
-Cần không gian vật lý
để di chuyển, không
mỏi tay
-- Con trỏ màn hình
theo chiều x,y
Thiết bị vào gián tiếp, tốc độ nhanh, yêu cầu ít
không gian và thường lắp đặt cho notebook.
Touchscreen: phát hiện sự hiện diện của ngón
tay hay bút trên màn hình. Là thiết bị định vị
trực tiếp. Nhanh, không yêu cầu con trỏ, hợp
với menu chọn. Tuy nhiên có thể gây xước màn
hình, kém chính xác.
-- chuyển động chuột
theo trục x,z
HUT, Falt. of IT
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Dept. of SE, 2002 HCI - One. 79 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 80
Thiết bị ra
Thiết bị vào (tiếp)
Bút chì quang: Khi tiếp xúc màn hình, nó phát hiện các
điểm sáng trên màn hình huỳnh quang. Là thiết bị định vị
trực tiếp. Dùng để vẽ từng điểm
Digitising tablet: Thiết bị gián tiếp. Có nhiều loại bảng
• Màn hình (Cathode ray tube )
• Visual
• Auditory
• Máy in
• Máy quét và nhận dạng ký tự
- Resistive tablet
- Magnetic tablet
- Sonic tablet
Độ phân giải 60 x 60, mẫu hoá với tần số từ 50 200Hz. Có
thể nhập text, yêu cầu không gian.
Dataglove: Thiết bị cảm ứng quang (có thể dùng 3-D)
Eyegaze: Tập các đầu nhằm phát hiện và điều khiển con
trỏ.
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 81 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 82
Màn hình
Màn hình (tiếp)
• Là thiết bị ra chuẩn của máy tính
• Quét lưới: là dạng phổ biến nhất, độ phân giải
phổ biến là 512 x 512 và có thể đến 1192 x 980 ,
dạng đen trắng (đa cấp xám) hay màu
• Dạng ngẫu nhiên hay véc tơ: quét theo hàng, độ
phân giải có thể đạt 4096 x 4096.
• Quan sát trực tiếp: tương tự như quét véc tơ, tuy
nhiên ảnh duy trì bởi flood guns. Độ phân giải có
thể đạt tới 4096 x 3120 hoặc hơn
Có 3 chế độ quét khác nhau: lưới, ngẫu nhiên và
trực tiếp.
• Màn hình tinh thể lỏng: nhẹ, nhỏ, không
phóng xạ.
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 83 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 84
14
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Thiết bị nghe nhìn
Máy in
• Tập ký tự trên trang và dùng kỹ thuật điểm (dot)
• Ba kỹ thuật: ma trận điểm (dot-matrix printers), kỹ
• Visual: dials, gauge, light
• Auditory: beeps, bongs, clonks, speech
thuật phun (ink-jet) và in nhiệt.
Kỹ thuật ma trận điểm có thể đạt tới 120 dpi, kỹ
thuật phun: 300 dpi.
Hiện nay dùng kỹ thuật in laser và đạt tới 1200dpi.
• Fonts:
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 85 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 86
Bộ nhớ
Máy quét và bộ nhạn dạng ký tự
RAM:
thời gian truy nhập: 100 ns. Tốc độ
truyền: 10 Mb/s
• Máy quét: chuyển ảnh tương tự sang ảnh
• Bộ nhớ dài hạn: LTM thường dùng như đĩa,
CD
• Chú ý: Nếu MT xử lý quá nhanh, thông tin
số. Có 2 kiểu:
Flat-bed: quét cả trang
Hand-held: quét và tạo ảnh với độ rộng 3-4”
Độ phân giải từ 100-300 dpi và có thể đến 1500
Trợ giúp có thể không đọc được.
dpi hay hơn.
Dùng tạo tài liệu cùng với ảnh chụp
• OCR: chuyển ảnh bitmap sang text. Các
fonts khác nhau sẽ gây nên khó khăn.
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 87 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 88
3.1 Tổng quan
Chương 3: Các dạng tương tác
Người dùng-máy tính
• Tương tác là sự giao tiếp giữa người
dùng và hệ thống. Để có cái nhìn tổng
quan, người ta hay biểu diễn dưới dạng
framework (D. Norman), phát triển bởi
Abowd và Beale.
3.1 Tổng quan
3.2 Các mô hình tương tác
3.3 Các dạng tương tác
3.4 Mô hình WIMP
3.5 Điều khiển trực tiếp
3.6 Ngữ cảnh tương tác
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 89 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 90
15
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
3.2. Mô hình tương tác
3.2. Mô hình tương tác (tiếp)
- Framework tương tác có 4 thành phần:
O
Ra
U
Người dùng
S
Hệ thống
I
Vào
1. Người dùng
2. Đầu vào
3. Hệ thống
4. Đầu ra
=> Mỗi thành phần có ngôn ngữ riêng =>
Vấn đề chuyển dịch ?
=> ngôn ngữ giữa các thành phần: Khó khăn
• Sử dụng Framework để:
1. Thiết lập mục đích (user)
2. Hình thành chủ ý
3. Đặc tả hành động trên giao tiếp
4. Thực hiện hành động
5. Nhận và giải thích trạng thái của HT
6. Đánh giá trạng thái HT với mục đích đặt
ra
hoặc không thể.
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 91 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 92
3.2. Mô hình tương tác (tiếp)
3.3. Các dạng tương tác
- Người dùng muốn chuyển dịch hành động qua
giao tiếp thành trạng thái của HT
- HT phản ánh qua đầu ra và được giải thích bởi
người dùng.
- Các khía cạnh phải xem xét:
1. Câu hỏi/ trả lời dạng truy vấn
2. Điền theo mẫu
3. Ngôn ngữ lệnh
4. Ngôn ngữ tự nhiên
5. Menu
1. Công thái học (ergonomie) : nhóm đ/k theo chức năng ,
tần xuất; môi trường, màu sắc
2. Dễ dùng, thời gian đào tạo ngắn
3. Thông tin phản hồi
4. Khôi phục lỗi, trở về trạng thái cũ
5. Tính nhất quán, chuẩn hoá
HUT, Falt. of IT
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Dept. of SE, 2002 HCI - One. 93 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 94
3.3. Các dạng tương tác (tiếp)
Giao tiếp dạng hỏi đáp (tiếp)
- Loại SQL: thao tác với CSDL => hiểu cấu trúc,
1. Câu hỏi/ trả lời và dạng truy vấn (Query)
cú pháp của CSDL
thiếu
- Dẫn dắt qua một loạt câu hỏi
- Chất lượng
+ Tự nhiên, dễ thiết kế, quen thuộc nhất là với
người dùng mới, thiếu kinh nghiệm
- Nhược điểm
+ Phức tạp đối với tình huống phức tạp,
tính tổng quát.
+ Cần nhiều giao tiếp.
Giao tiếp kiểu truy vấn với CSDL (dạng GUI)
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 95 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 96
16
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Giao tiếp dạng form điền
Form điền (tiếp)
2. Điền theo mẫu (Form fills & Spreadsheets)
- Chủ yếu dùng truy xuất DL: nhập, trích rút.
Màn hình giống như khuôn mẫu.
Các đề mục
Các thông tin cần điền
Một dạng Form nhập liệu trong CSDL
Thông tin phải điền có
thể chọn/ đánh dấu
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 97 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 98
Form điền (tiếp)
Form điền (tiếp)
- Chất lượng
+ Tự nhiên, quen thuộc , dễ thiết kế, có chỉ dẫn
cần thiết.
+ Dễ dàng thay đổi khi cần.
- Nhược điểm:
+ Thiếu sáng tạo của người dùng
+ Tải cao với Hệ Thống, mạng.
Form nhập và trích dữ liệu trong ACCESS
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 99 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 100
Giao tiếp kiểu dòng lệnh
Giao tiếp kiểu dòng lệnh
thí dụ
3. Ngôn ngữ lệnh
- Là loại giao tiếp được sử dụng sớm nhất và đến
nay vẫn còn khá phổ dụng (môi trường VB). Nó
cung cấp phương tiện biểu diễn lệnh trực tiếp cho
máy tính thông qua các phím chức nang, ký tự
đơn, từ viết tắt hay đầy đủ.
- Thí dụ: Các lệnh của DOS hay UNIX thường
dùng các động từ tiếng Anh viết tắt: Dir ln của
UNIX dùng để xem nội dung ổ đĩa hay thư mục.
Có thể có macro lệnh. Truy nhập trực tiếp vào Hệ
thống.
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 101 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 102
17
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Giao tiếp kiểu dòng lệnh (tiếp)
Giao tiếp kiểu
Ngôn ngữ tự nhiên
- Chất lượng:
4. Ngôn ngữ tự nhiên
+ Thích hợp với nhiệm vụ có tính lặp
+ Thích hợp với ND có kinh nghiệm do tính ngắn
gọn, nhanh và dễ hiểu của câu lệnh.
- Nhược điểm:
- Có thể là phương tiện hấp dẫn nhất trong giao
tiếp với máy tính vì ND khó có thể nhớ dòng lệnh
hay quên mất các mức phân cấp của menu.
- Ngôn ngữ tự nhiên với 2 dạng: chữ viét, lời nói
đều rất được quan tâm và nghiên cứu.
- Chất lượng
+ Cần phải đào tạo.
+ Sai sót cao.
+ Khó xử lý tình huống lỗi.
+ Tự nhiên, không tốn công đào tạo.
+Dễ thích ứng, sửa lỗi dễ.
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 103 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 104
Menu
Giao tiếp kiểu
Ngôn ngữ tự nhiên (tiếp)
5. Menu
- Nhược điểm
+ Không rõ ràng: cú pháp, cấu trúc, câu có thể
- Menu là tập các lựa chọn có thể cho ND được hiện
trên màn hình và được chọn bởi chuột, phím số
hay phím chữ cái
không rõ
+ dài, tải cao.
+ Thí dụ: trong câu “The man hit the boy with
the sticks”, người ta không rõ gậy là phương tiện
để đánh chú bé hay chú bé có gậy?
=> Sử dụng ngôn ngữ tự nhiên trong các lĩnh vực
- Có nhiều mức độ khác nhau: 1, 2 hay nhiều mức.
Dạng: cây, mạng, kéo thả (pull-down hay pop up),
ngữ cảnh, tách rời, chồng chéo, . . .
- VB hoặc kết hợp với các lựa chọn số hay dạng
đồ hoạ.
hạn chế thì có thể thành công.
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 105 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 106
Giao tiếp kiểu Menu (tiếp)
Giao tiếp kiểu Menu (tiếp)
- Thí dụ
PAYMENT DETAILS
Please select payment method:
1. Cash
2. Cheque
3. Credit card
- Chất lượng : Dễ học, dễ dùng và có nhiều
lựa chọn. Có hướng dẫn, ít nhớ. Thích
hợp với ND không thường xuyên.
- Nhược điểm : Tốn không gian nhớ
màn hình. Thông tin có thể bị che dấu
trong các menu con. Chậm với NSD
thành thạo.
4. Invoice
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 107 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 108
18
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
Giao tiếp kiểu Menu (tiếp)
3.4. WIMP (Window, Icon, Menu,
Pointer)
- Sự kết hợp của VB và đồ hoạ:
- Thí dụ
PAYMENT DETAILS
Please select payment method:
1. Cash
2. Cheque
1. Windows: như màn hình độc lập, có thể chứa
Text hay đồ hoạ. Kích thước có thể thay đổi và
điều chỉnh.
2. Biểu tượng (Icons): tranh hay hình ảnh thu nhỏ
và đa dạng.
3. Credit card
4. Invoice
Một kiểu giao tiếp menu đơn giản trong môi trường Text
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 109 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 110
WIMP (tiếp)
3.4. WIMP (tiếp)
3. Menus
Icons
a)Menu 2 mức
b)Menu nhiều mức
Scroll
Bar
Một cửa sổ tiêu biểu của MS Office
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 111 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 112
3.4. WIMP (tiếp)
WIMP (tiếp)
4. Con trỏ (Pointers)
- Là 1 thành phần quan trọng vì WIMP dùng
chủ yếu định vị và lựa chọn.
- Dạng con trỏ có ý nghĩa gắn với hành động.
Ngoài ra, có thể bổ sung : phím lệnh, thanh
công cụ, spinner, hộp hội thoại, check box. . .
Dạng ngầm định hiện nay của nhiều loại MT: PC
hay Desktop
- Chất lượng:
+ Tốt, dễ học, ít nhớ.
+ Tính chủ động của ND cao, giảm sai sót
- Nhược điểm:
+ Khó lập trình, tải cao. Màn hình đồ hoạ ? + +
Chậm với ND có kinh nghiệm. Nhóm các mức
trong menu, . . .
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 113 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 114
19
Biªn so¹n: L¬ng M¹nh B¸
Prepared by MSc Luong Manh Ba
Prepared by MSc Luong Manh Ba
3.6. Ngữ cảnh tương tác
3.5. Đ iều khiển trực tiếp- WYSIWYG
(What you see is What you get)
• ảnh hưởng của tương tác đến thiết kế giao tiếp
lượng tương tác phụ thuộc môi
ND. Chất
trường
• Nếu có nhiều kiểu ND => cần đưa vào nhiều
- Chất lượng: sinh động dễ sử dụng
- Nguy hiểm:
kiểu tương tác .
• Window phối hợp menu, phím nóng, biểu
thí dụ cần phân biệt
sao/chuyển đối tượng với xoá đối tượng
vì có khi ND chỉ cần sao.
tượng và lối tắt (Shortcut), thanh công cụ.
Prepared by MSc Luong Manh Ba
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 115 HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 116
Bài tập
3.1 Chọn 2 kiểu tương tác mà bạn có kinh nghiệm và
dùng Framework để phân tích các tương tác khi dùng
kiểu giao tiếp này với việc lựa chọn nhiệm vụ trong 1
CSDL. Cái nào là k/c lớn nhất trong mỗi trường hợp?
3.2 Hãy tìm tất cả các HT sử dụng thành công ngôn ngữ
tự nhiên. Các UD nào là hợp lý nhất?
HUT, Falt. of IT Dept. of SE, 2002 HCI - One. 117
20
