bài giảng tương tác người máy tổng quan về hci, tâm lý nhận thức của con người trong giao tiếp và xử lý

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 gia

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

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.

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

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)

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

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,

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.

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.

0.1 Thuật ngữ và khái niệm

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

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

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

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

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

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

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)

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

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

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

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

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

• 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

Thành phần Swing của JBuilder

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

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

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

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,

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.

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

Java Swing (tiếp)

+ 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 - Cung cấp các điều khiển Jtable ,

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.

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

với 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

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

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

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

với Swing (tiếp)

• 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

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)

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 + Phương thức xử lý :

i)componentAdded(ContainerEvent e) ii)componentRemoved(ContainerEvent

e)

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

lý (tiếp)

5- ComponentEvent + 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: ComponentListener

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

i)componentMoved(ComponentEvent e) ii)componentHidden(ComponentEvent e) iii)componentResized(ComponentEvent e) iv)componentShown(ComponentEvent e)

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 :

Component + Giao diện lắng nghe : FocusListener

+ 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

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

lý (tiếp)

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

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

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

- Với MouseListener : i) MousePressed(MouseEvent e)

ii) MouseReleased(MouseEvent e)

iii) MouseEntered(MouseEvent e)

iv)MouseExited(MouseEvent e)

v)MouseClicked(MouseEvent e)

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

lý (tiếp)

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

ValueChanged(ListSelectionListener e)

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

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

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

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

Lớp JrootPane

(javax.swing.JrootPane)

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

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)

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

kế UI

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

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

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];

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

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

lý

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

1.1 Tổng quan

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

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

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

cách khác nhau.

1.2 Kênh vào ra

• Thực hiện thông qua:

 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

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

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

Bộ nhớ (tiếp)

 Bộ nhớ cảm nhận (sensory memory): chứa kích

đượ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 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ố

 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

- 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