Bài giảng Tương tác người máy - Chương 0: Tổng quan về HCI

Biªn so¹n: L-¬ng M¹nh B¸

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

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

Department of Software Engineering

Faculty of Information Technology

Hanoi University of Technology

TEL: 04-8682595 FAX: 04-8692906

Email: cnpm@it-hut.edu

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 1

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 2

Prepared by MSc Luong Manh Ba

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

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 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 V: Mô hình GOM, Keytrock,… (GOM

and Keytrock Models)

Chương II: Nhân tố Máy tính trong tương tác

người máy

Chương VI: Đặc tả yêu cầu người dùng và phân

tích nhiệm vụ

Chương III: Các dạng đối thoại trong tương

tác người máy (Dialogue styles for HCI)

Chương VII: Ký pháp đối thoại và thiết kế

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 3

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 4

Prepared by MSc Luong Manh Ba

Tài liệu tham khảo (Reference)

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:

[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,

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)

second edition, 1993

(http: //www.hcibook.com/hcibook/toc.html)

[3] Gary Perlman, Ohio State University: User Interface

development (course), SEI Curriculum Module,

• Đánh giá: Đồ án môn học + Bài tập

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

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,

[9] Dự thảo ®Ò c-¬ng m«n häc HCI- PGS Nguyễn Văn Ba

khoa CNTT.

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.

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

[8] Sommerville, Software Engineering (chapter 17-

User Interface), Addison 1996 (BM)

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 7

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 8

Prepared by MSc Luong Manh Ba

0.1 Định nghĩa và khái niệm

Chương 0: Tổng quan về HCI

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

• 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.8. Đầu ra

0.9. Công cụ (Tools)

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 9

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 10

Prepared by MSc Luong Manh Ba

Đị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:

Vai trò của HCI:

• Định nghĩa 1

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.

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

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

0.3 Môi trường làm việc

0.2 Người dùng

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

•

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)

- Máy tính cá nhân, mạng, internet

- Các kỹ thuật viên, chuyên gia

- Yêu cầu đòi hỏi cao

- Môi trường: đa dạng, văn bản, đồ hoạ, trực

quan

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 13

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 14

Prepared by MSc Luong Manh Ba

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),

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 15

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 16

Prepared by MSc Luong Manh Ba

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 đó

thông tin

. Cảm nhận

. Lưu trữ (các loại bộ nhớ)

. Xử lý

• 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

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

- 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

• 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,…

• 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

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ế

• Các thiết bị vào ra

Kỹ thuật và công cụ cài đặt

Kỹ thuật đánh giá

• Các kỹ thuật đối thoại; vào, ra và tương tác

• Các kiểu đối thoại

Hệ thống mẫu và Case studies

• Đồ hoạ máy tính

• Kiến trúc đối thoại

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 19

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 20

Prepared by MSc Luong Manh Ba

0.6 Phương tiện và công cụ

0.5 Chất lượng

• Hai thành phần cơ bản:

. Con người và máy tính

• Trước đây: Trạng thái ứng xử đúng với dữ

liệu đúng

. 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

• Tiếp theo: Trạng thái đúng với dữ liệu có

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

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 21

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 22

Prepared by MSc Luong Manh Ba

Thành phần Swing của JBuilder

Phương tiện và công cụ (tiếp)

•

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

•

Độ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

Thành phần Swing (tiếp)

•

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

•

Swing ít phụ thuộc vào hệ đích hơn và tài dần dần thay

thế cho AWT.

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 25

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 26

Prepared by MSc Luong Manh Ba

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

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 27

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 28

Prepared by MSc Luong Manh Ba

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 .

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

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

Thiết kế các thành phần giao diện với

Java Swing (tiếp)

+ javax.swing.filechooser: Thành phần hỗ trợ

cho JfileChooser.

Swing

•

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 .

+ 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 -

Cung

cấp

các

điều

khiển

Jtable,

•

Swing quản lý các đối tượng lắng nghe thông qua

ListenerList, nó được gọi từ EventListenerList.

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.

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 31

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 32

Prepared by MSc Luong Manh Ba

Thiết kế các thành phần giao diện với

Swing (tiếp)

Một số biến cố và phương thức xử lý

1- ActionEvent

+ Nguyên nhân: Nhấp nút lên đối tượng, trường văn

bản ,...

+ Giao diện lắng nghe : ActionListener

+ Phương thức XL:actionPerformed(ActionEvent e)

2- ItemEvent

•

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 .

+ 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)

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 33

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 34

Prepared by MSc Luong Manh Ba

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

+ Giao diện lắng nghe: WindowListener

+ Phương thức xử lý:

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: ContainerListener

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)

+ Phương thức xử lý :

i)componentAdded(ContainerEvent e)

ii)componentRemoved(ContainerEvent 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

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)

5- ComponentEvent

+ Nguyên nhân: Dời tiêu điểm đến/ ra khỏi thành phần :

Component

+ Nguyên nhân: Di chuyển, định kích cỡ, dấu hoặc

hiện lại Component

+ Giao diện lắng nghe : FocusListener

+ Giao diện lắng nghe: ComponentListener

+ Phương thức xử lý

:

+ Phương thức xử lý :

i)focusGained(FocusEvent e)

ii)focusLost(FocusEvent e)

i)componentMoved(ComponentEvent e)

7- TextEvent

ii)componentHidden(ComponentEvent e)

iii)componentResized(ComponentEvent e)

iv)componentShown(ComponentEvent e)

+ Nguyên nhân:Thay đổi văn bản(JtextComponent)

+ Giao diện lắng nghe : TextListener

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 37

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 38

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)

+ Giao diện lắng nghe: có hai giao diện lắng nghe là

+ Phương thức xử lý : textValueChanged(TextEvent e)

8- KeyEvent

MouseListener và MouseMotionListener

+ Phương thức xử lý.

- Với MouseListener :

+ Nguyên nhân: Thả hoặc nhấn phím Component

+ Giao diện lắng nghe

+ Phương thức xử lý :

: KeyListener

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)

i) KeyPressed(KeyEvent e)

ii) KeyReleased(KeyEvent e)

iii)KeyTyped(KeyEvent e)

9- MouseEvent

+ Nguyên nhân:Di chuyển chuột Component

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 39

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 40

Prepared by MSc Luong Manh Ba

Một số biến cố và phương thức xử lý

(tiếp)

Thiết kế vùng chứa

Các thành phần để thiết kế vùng chứa sau: Jframe,

Jpanel, Japplet. Với:

- Jframe: tạo khung cơ sở chứa các thành phần Jpanel

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

•

ii) MouseMoved(MouseEvent e)

10- AdjustmentEvent

+ Nguyên nhân: Di chuyển thanh cuốn JscrollBar

+ Giao diện lắng nghe

+ Phương thức xử lý

: AdjustmentListener

:

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

adjustmentValueChanged(AdjustmentEvent e)

11- ListSelectionEvent

+ Nguyên nhân: Chọn khoản mục: Jlist

+ Giao diện lắng nghe: ListSelectionListener

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

+ Phương thức xử lý

:

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

Sơ đồ phân cấp của Jframe

Lớp JrootPane

(javax.swing.JrootPane)

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 43

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 44

Prepared by MSc Luong Manh Ba

Một vài thí dụ dùng Swing để xây

Lớp quản lý bố cục

dựng giao tiếp UI

H×nh 1: Cöa sæ so¹n th¶o chÝnh

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 45

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 46

Prepared by MSc Luong Manh Ba

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

Môi trường Swing khi thiết kế

Một vài đoạn mã lệnh cho các

UI

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

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 49

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 50

Prepared by MSc Luong Manh Ba

Chương I: Tâm lý nhận thức của Con

người trong giao tiếp và xử lý

Mã lệnh cho thủ tục mở File

void openFile(String fileName)

try

{

{File file

int size

=

new File(fileName);

(int)file.length();

1.1 Tổng quan

int chars_read

FileReader in

char[] data

while(in.ready())

chars_read += in.read(data,

chars_read, size chars_read);}

in.close();

jTextArea1.setText(new String(data,

chars_read));

this.currFileName

this.dirty false;

=

0;

=

new FileReader(file);

1.2 Kênh vào ra

=

new char[size];

{

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

0,

= fileName;

=

statusBar.setText("Opened"+fileName);

updateCaption();}

catch (IOException e)

{

statusBar.setText("Error opening "+fileName);}}

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 51

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 52

Prepared by MSc Luong Manh Ba

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

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)

. 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

• Tương tác: qua kênh vào ra

. Thông tin nhận và trả lời qua kênh vào

. Thông tin lưu trữ trong bộ nhớ

. 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

chuyển động.

- Thời gian chuyển động: phụ thuộc tuổi tác, độ tinh

. Thông tin được xử lý và ứng dụng theo nhiều

cách khác nhau.

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

1.3 Bộ nhớ

• Luật Fit: miêu tả thời gian, chi phí để nhận

được kết quả (đích)

• Hai loại bộ nhớ:

- D : K/c dịch chuyển

 Bộ nhớ ngắn hạn (STM)

 Bộ nhớ dài hạn (LTM)

• Mô hình bộ nhớ

X₀

X₁X₂

- L: kích thước đích

- Xi: k/c dịch chuyển sau i

lần, Xi =  x Xi_-1

Đích

D

- Vì X₀= D => Xn =  ^nxD

- Xn L/2 =>  ⁿx D L/2

- n = -log₂(2D/L)/log₂

 = s + c + m

L

Rehearsal

Bộ nhớ

LTM

Attention

T = I log₂2D/L với :

I = -(s + c +m)/log₂  100 ms

Bộ nhớ

cảm nhận

Bộ nhớ STM

bộ nhớ l/v

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

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 55

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 56

Prepared by MSc Luong Manh Ba

Bộ nhớ dài hạn

Các đặc trưng của bộ nhớ dài hạn:

Bộ nhớ (tiếp)

•

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

- 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ế

. Bộ nhớ ngắn hạn (Short Tem Memory): hay còn gọi

là bộ nhớ làm việc, có các đặc trưng sau:

- Thông tin biểu diễn qua mạng ngữ nghĩa, frame, hoặc luật sản

suất,. . .

- Truy cập nhanh: 700 ms

•

Hai kiểu bộ nhớ LTM:

- Hư hỏng (Decay): nhanh (200ms)

- Khả năng hạn chế: 7 2 chữ số

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

- 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

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 57

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 58

Prepared by MSc Luong Manh Ba

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

Bộ nhớ dài hạn (tiếp)

Mô hình frame

Mô hình Scrips

•

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

DOG

Fixed: 4 chân

Default:

Loài: ăn thịt

âm thanh: chối tai

Variable

Collie

Fixed: nhánh của chó

Loại: chó chăn cừu

Default:

Kích thước: 65 cm

Thí dụ

kích thước

màu sắc

Variable

màu sắc

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 61

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 62

Prepared by MSc Luong Manh Ba

Bộ nhớ dài hạn (tiếp)

mô hình luật sản xuất

1.4 Suy luận và giải quyết vấn đề

• Suy luận có hai dạng:

Deductive

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

Inductive

a) Suy luận deductive

•

Chú ý:

.

Dạng: If Cond Then [Action]

.

Cấu trúc, ngữ nghĩa, thói quen làm cho dễ nhớ

.

Đưa ra kết luận cần thiết 1 cách lô gíc từ các giả thiết

If it is Friday then she will go to work

.

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)

It is Friday Therefore she will go to work.

Kết luận lô gic không nhất thiết phải đúng

If it is raining then the ground is dry

.

Trích rút: - recall: thông tin được tái tạo trong bộ nhớ và trợ

giúp bởi loại, hình ảnh

- recognition: thông tin cung cấp các tri thức đã biết

trước và kém phức tạp hơn gọi lại

.

It is raining Therefore the ground is dry

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 63

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 64

Prepared by MSc Luong Manh Ba

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

• Các lý thuyết

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

a) Gestalt

all elephants have trunks.

. 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

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

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

nhờ các phép toán

. Không tin cậy: có thể dẫn đến giải thích sai.

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

Suy luận và giải quyết vấn đề (tiếp)

- 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

.

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

- Học các luật đặc tả nhiệm vụ

- Luật được hiệu chỉnh

•

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

•

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

.

â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ắt đoạn thông tin như trong STM

i) Thủ tục hoá (proceduralization)

- Mức 1: If cook [type, ingredients, time]

THEN cook for: time

.

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:

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 67

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 68

Prepared by MSc Luong Manh Ba

Suy luận và giải quyết vấn đề (tiếp)

Khái quát hoá

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

[chicken,carrots,potatoses]

- Mức 2: If type is casserole AND ingredients ARE

[chicken,carrots,potatoses]

THEN cook for: 2 hours

If type is cakle AND ingredients ARE

[chicken,carrots,potatoses]

THEN cook for: 2 hours

If type is cakle AND ingredients ARE

[chicken,carrots,potatoses]

THEN cook for: 45 min

- Mức 3: If type is casserole AND ingredients ARE

ANYTHING

THEN cook for: 45 min

THEN cook for: 2 hours

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 69

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 70

Prepared by MSc Luong Manh Ba

1.5 Tâm lý và thiết kế hệ thống

tương tác

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

Lỗi và mô hình suy nghĩ

•

• Kiểu lỗi

. Sơ ý (slip)/ lỗi nhỏ: Thay đổi trạng thái hành

vi có thể gây lỗi

1) cá thể khác nhau

- 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

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

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

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, . . .)

2.1 Tổng quan

• Các kỹ thuật phân tích và đánh giá

2.2 Thiết bị vào

2.3 Thiết bị ra

2.4 Bộ nhớ

2.5 Xử lý

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 73

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 74

Prepared by MSc Luong Manh Ba

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

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 75

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 76

Prepared by MSc Luong Manh Ba

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:

• Bàn phím

. 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

• Bộ nhận dạng chữ viết tay

• Chuột và thiết bị định vị

i) Bàn phím

. 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

. 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

Thiết bị vào (^Pt^ri^eế^pap^red)^{by MSc Luong Manh Ba}

Thiết bị vào (tiếp)

• Bộ nhận dạng chữ viết tay:

. Chữ viết tay là công cụ giao tiếp phổ biến

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

. Trackball: giống như chuột (upside-down).

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.

. 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

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

-- chuyển động chuột

theo trục x,z

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 79

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 80

Prepared by MSc Luong Manh Ba

Thiết bị ra

Thiết bị vào (tiếp)

• Màn hình (Cathode ray tube )

• Visual

. 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

• Auditory

. Digitising tablet: Thiết bị gián tiếp. Có nhiều loại bảng

- Resistive tablet

- Magnetic tablet

- Sonic tablet

• Máy in

• Máy quét và nhận dạng ký tự

Độ 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ỏ.

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 81

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 82

Prepared by MSc Luong Manh Ba

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

Thiết bị nghe nhìn

Máy in

• Visual: dials, gauge, light

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

thuật phun (ink-jet) và in nhiệt.

• Auditory: beeps, bongs, clonks, speech

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:

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 85

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 86

Prepared by MSc Luong Manh Ba

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

số. Có 2 kiểu:

• Bộ nhớ dài hạn: LTM thường dùng như đĩa,

CD

. 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

dpi hay hơn.

• Chú ý: Nếu MT xử lý quá nhanh, thông tin

Trợ giúp có thể không đọc được.

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.

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 87

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 88

Prepared by MSc Luong Manh Ba

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

3.2. Mô hình tương tác (tiếp)

- Framework tương tác có 4 thành phần:

3.2. Mô hình tương tác

• Sử dụng Framework để:

1. Người dùng

1. Thiết lập mục đích (user)

2. Hình thành chủ ý

O

Ra

U

Người dùng

2. Đầu vào

3. Hệ thống

S

Hệ thống

I

Vào

3. Đặc tả hành động trên giao tiếp

4. Thực hiện hành động

4. Đầu ra

=> Mỗi thành phần có ngôn ngữ riêng =>

Vấn đề chuyển dịch ?

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

=> ngôn ngữ giữa các thành phần: Khó khăn

hoặc không thể.

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 91

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 92

Prepared by MSc Luong Manh Ba

3.2. Mô hình tương tác (tiếp)

- 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

3.3. Các dạng tương tác

1. Câu hỏi/ trả lời dạng truy vấn

2. Điền theo mẫu

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

3. Ngôn ngữ lệnh

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

4. Ngôn ngữ tự nhiên

5. Menu

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

 Dept. of SE, 2002

HCI - One. 93

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 94

Prepared by MSc Luong Manh Ba

3.3. Các dạng tương tác (tiếp)

Giao tiếp dạng hỏi đáp (tiếp)

1. Câu hỏi/ trả lời và dạng truy vấn (Query)

- Dẫn dắt qua một loạt câu hỏi

- Chất lượng

- Loại SQL: thao tác với CSDL => hiểu cấu trúc,

cú pháp của CSDL

+ 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, thiếu

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

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

Thông tin phải điền có

thể chọn/ đánh dấu

Một dạng Form nhập liệu trong CSDL

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 97

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 98

Prepared by MSc Luong Manh Ba

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

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 99

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 100

Prepared by MSc Luong Manh Ba

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

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:

+ Thích hợp với nhiệm vụ có tính lặp

4. Ngôn ngữ tự nhiên

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

- 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

+ Tự nhiên, không tốn công đào tạo.

+Dễ thích ứng, sửa lỗi dễ.

- Nhược điểm:

+ Cần phải đào tạo.

+ Sai sót cao.

+ Khó xử lý tình huống lỗi.

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 103

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 104

Prepared by MSc Luong Manh Ba

Giao tiếp kiểu

Menu

Ngôn ngữ tự nhiên (tiếp)

5. Menu

-

Nhược điểm

- 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õ ràng: cú pháp, cấu trúc, câu có thể

không rõ

+ dài, tải cao.

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

+ 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

hạn chế thì có thể thành công.

- VB hoặc kết hợp với các lựa chọn số hay dạng

đồ hoạ.

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 105

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 106

Prepared by MSc Luong Manh Ba

Giao tiếp kiểu Menu (tiếp)

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

- Thí dụ

PAYMENT DETAILS

Please select payment method:

1. Cash

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

2. Cheque

3. Credit card

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

3.4. WIMP (Window, Icon, Menu,

Pointer)

Giao tiếp kiểu Menu (tiếp)

- Sự kết hợp của VB và đồ hoạ:

- Thí dụ

PAYMENT DETAILS

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.

Please select payment method:

1. Cash

2. Biểu tượng (Icons): tranh hay hình ảnh thu nhỏ

và đa dạng.

2. Cheque

3. Credit card

4. Invoice

Một kiểu giao tiếp menu đơn giản trong môi trường Text

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 109

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 110

Prepared by MSc Luong Manh Ba

WIMP (tiếp)

3.4. WIMP (tiếp)

3. Menus

Icons

Scroll

Bar

a)Menu 2 mức

b)Menu nhiều mức

Một cửa sổ tiêu biểu của MS Office

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 111

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 112

Prepared by MSc Luong Manh Ba

3.4. WIMP (tiếp)

WIMP (tiếp)

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

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.

- 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

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

ND. Chất lượng tương tác phụ thuộc môi

trường

- Chất lượng: sinh động dễ sử dụng

• Nếu có nhiều kiểu ND => cần đưa vào nhiều

kiểu tương tác .

- Nguy hiểm: 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.

• Window phối hợp menu, phím nóng, biểu

tượng và lối tắt (Shortcut), thanh công cụ.

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 115

HUT, Falt. of IT

 Dept. of SE, 2002

HCI - One. 116

Prepared by MSc Luong Manh Ba

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

Bài giảng Tương tác người máy - Chương 0: Tổng quan về HCI - Lương Mạnh Bá