Tổng quan về tương tác người máy

Tài liệu này dành cho sinh viên, giáo viên khối ngành công nghệ thông tin tham khảo và có những bài học bổ ích hơn, bổ trợ cho việc tìm kiếm tài liệu, giáo án, giáo trình, bài giảng các môn học khối ngành công nghệ thông tin

Tương tác người máy

(34569(11))

Human Computer Interaction - HCI

Department of Software Engineering Faculty of Information Technology Hanoi University of Technology

Cấu trúc môn học

• 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 : 4 phần

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)

IV-Ph ầ n IV Case Study

- Thiết kế các HT trợ giúp

- Thiết kế các biểu tượng - Icons

• Đánh giá: Thi (0.7)+ Bài tập lớn (0.3)

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

[1] Jenny Preece et al: Human-Computer Interaction,

[4] C.Machgeels: Interfaces Humains- ordinateur (cours),

Département Informatique, ULB, 2001-2002

[5] J.Coutas, Interface Home-ordinareur,

Conception et réalisation, Dunod Paris 1990 ( Bá ) (Nghiêng về hướng tâm lý khoa học nhận thức)

[6] Andy Downton, Engineering the Human-

Computer Interface , McGraw Hill 1992.

[7] J.P.Menadier, l’Interface uilisateur pour une

Informatique plus conviale, Dunod Paris 1991.

[8] Sommerville, Software Engineering (chapter 17-

User Interface), Addison 1996 (BM)

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 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 người

Y/cT/L

Đối thoại

Hoạt động

Trao đổi giữa các

môđun

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

• Java là NNLT hướng đối tượng, ra đời 5 /1995 do

nhóm chuyên gia đứng đầu là James Goshing thuộc công ty Sun Microsystems thiết kế Năm 1991 lấy tên là Oak, năm 1995 chính thức lấy tên Java, và được thiết

kế lại để xây dựng chương trình ứng dụng Internet Ngoài ứng dụng Web, Java còn có đủ đặc tính lập trình

để thiết kế chương trình ứng dụng độc lập

• Độc lập với hệ nền, do vậy có thể chạy trên bất cứ máy

tính nào có hệ điều hành hỗ trợ Java Virtual Machine.

• Là ngôn ngữ có tính phân tán với khả năng nối mạng

cài sẵn

Thành phần Swing của JBuilder

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

• 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

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

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

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

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

iv)windowDeiconified(WindowEvent e)

v)windowClosed(WindowEvent e)

vi)windowActivated(WindowEvent 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

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

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

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

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ư: FlowLayout, GridLayout , GridBagLayout, BorderLayout,

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)

Hỡnh 2: Sử dụng jFileChooser

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

Thiết kế 3 phím lệnh với Jbutton trên JToolBar

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

Attention Rehearsal

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

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

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 cấ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

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

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

Mô hình frame

DOG

Fixed: 4 chânDefault:

Loài: ăn thịt

âm thanh: chối taiVariable

kích thước màu sắc

Collie

Fixed: nhánh của chó Loại: chó chăn cừuDefault:

Kích thước: 65 cmVariable

màu sắc