Ôn tập thi cuối kỳ môn Tương Tác Người Máy

Tài liệu ôn tập thi cuối kỳ môn Tương Tác Người Máy Đề bài + lời giải chi tiết Trường Đại học Công Nghiệp Thành phố Hồ Chí Minh (IUH) Tài liệu Ôn thi CUỐI KỲ môn Tương tác người máy (HCI) - Phân tích Case Study Siêu thị Target Tài liệu cung cấp hướng dẫn chi tiết cách làm bài thi cuối kỳ môn Tương tác người máy, đi sâu vào việc xây dựng kịch bản và áp dụng các nguyên lý thiết kế vào hệ thống thực tế: Xây dựng Kịch bản (Scenarios): Hướng dẫn viết một câu chuyện thực tế về nhân vật, ngữ cảnh và mục đích sử dụng hệ thống (ví dụ: máy hút bụi robot hoặc máy thanh toán tự động). Lược đồ HTA (Hierarchical Task Analysis): Phân tích các tác vụ hệ thống dưới dạng động từ, chia nhỏ các bước đăng nhập, đặt món, thanh toán và xử lý cơ sở dữ liệu. Áp dụng các Nguyên lý Thiết kế (Design Principles): Phân tích cách hệ thống tại siêu thị Target tối ưu hóa trải nghiệm thông qua: Cấu trúc thông tin: Chia khu vực hiển thị sản phẩm, công cụ và tổng tiền rõ ràng. Hỗ trợ nhận thức: Giảm tải cho bộ nhớ bằng hướng dẫn từng bước; hỗ trợ đa giác quan qua âm thanh "píp" và đèn báo hiệu. Hỗ trợ ra quyết định: Cung cấp chức năng tìm kiếm sản phẩm theo tên và các lựa chọn xuất hóa đơn trực quan. Tài liệu bao gồm cả đề bài và lời giải mẫu mạch lạc, giúp sinh viên nắm vững tư duy thiết kế lấy người dùng làm trung tâm (UCD).

Nội dung ôn tập thi CK môn Tương Tác Người Máy

Đề bài + lời giải chi tiết

Ôn tập cuối kỳ TTNG

1 Kịch bản: 1 câu chuyện thực tế, viết cẩn thận Các thiết kế ở câu 2,3,4 dựa trên kịch bản

- Mức Đạt

+ Người dùng là ai?: cụ thể từng nhân vật, độ tuổi, tên thì tốt

+ Ngữ cảnh họ sử dụng là gì? Tại sao sử dụng? Sử dụng vì mục đích gì?

- Mức Tốt ( quan trọng 2)

+ Cách sử dụng như thế nào? ( Quan trọng 1 )

 Cách sử dụng ntn? Trên ứng dụng và cả trên conrobot + Bấm phím tắt nào để thực hiện chức năng gì?

+ Thiết bị đó hoạt động như thế nào?

- Vd: máy hút bụi

+Khi hút đầy bụi thì nó sẽ thông báo đến người dùng ntn? Nó có liên kết với điện thoại

+ Sử dụng chức năng đó cần bấm phím nào trong đt or trực tiếp trên robot

- Những activity, action của người dùng sử dụng trực tiếp các chức năng của hệ thống là phải ghi

2 Lượt đồ HTA ( tác vụ hệ thống ) : ĐỘNG TỪ

- Bước 0: Là động từ, chức năng chính của sản phẩm: Đặt thức ăn, đặt hàng, mua hàng

- Mỗi ô là 1 tác vụ

+ Chú ý: trên hệ thống có tác vụ thanh toán bằng tiền mặt hay không? + tác vụ: là 1 function, 1 xử lý trên hệ thống, 1 ghi nhận thao tác vào cơ

sở dữ liệu

 Đăng nhập: kiểm tra thông tin trong csdl

 Đặt món: cần kiểm tra giỏ hàng, tạo hóa đơn, lưu hóa đơn

 Thêm món ăn, thêm sản phẩm  thêm vào hóa đơn ( thao tác với csdl ) thay vì viết chọn món ăn, chọn sản phẩm ( chưa thao tác với csdl )

+ các bước nhỏ: quét mã QR chỉ là thu thập thông tin, lấy dữ liệu thoi 

là 1 bước nhỏ của thanh toán ( ghi cx được, mà thường là không ghi)

- Vẽ lược đồ tương ứng với kịch bản trên  phân tích tác vụ theo dạng có cấu trúc

+ Phân tích tác vụ là phân tích cho hệ thống

+ Đưa các tác vụ có vấn đề xử lý ở bên trong

 Chọn chế độ dọn dẹp + Không đưa vào những tác vụ của người dùng mà không liên quan đến vấn đề xử lý trên hệ thống, thiết bị, smartphone, vi xử lý  không đưa vào

 VD: người dùng khởi động thiết bị, người dùng tắt thiết bị

 Tùy vào kịch bản và vẽ lược đồ cho khớp VD: tác vụ học bản đồ của robot hút bụi: tác vụ khó, phức tạp  nên đưa vào

+ Yêu cầu, ra lệnh cho con robot hút bụi

3 Thiết kế phần cứng

- Kiểu tương tác giữa người dùng và thiết bị, thuộc kiểu nào + mô tả

+ Tương tác kiểu ra chỉ thị, ra mệnh lệnh: chọn 1 chức năng, VD: thanh toán, qua trái qua phải

+ Khéo léo: hệ thống phải tương tác với sự khéo léo đó VD: chơi đã bóng trên đt, tay khéo thì bóng đi đẹp  khéo léo

 Ra chỉ thị/ ra mệnh lệnh: ấn nút nguồn để tắt hoặc khởi động ( robot)



- Vẽ phải có CHÚ THÍCH

- Vẽ từng bộ phận của phần cứng

4 Thiết kế phần mềm

- Vẽ từng màn hình của phần mềm + chú thích tên màn hình: giao diện đăng nhập, giao diện đăng ký, màn hình kết nối robot với ứng dungj ( viết

1 câu chú thích mô tả ), màn hình quản lý tài khoản, màn hình thêm thiết bị

- Vẽ màn hình đại diện đặc trưng cho những chức năng , màn hình quan trọng của hệ thống

- Chú thích

+ Chú thích tên màn hình

+ Chú thích các thành phần trên màn hình

- Màu sắc, rõ nét, phông chữ, màu sắc logo, trang chủ

- Vẽ từng màn hình: vị trí box, btn, logo, chữ thông tin, sdt

- Vẽ đẹp rõ ràng, chữ to

- Giả sử vẽ 1 màn hình đt: lấy kích thước cập của màn hình điện thoại luôn

Câu hỏi??

- Các loại tương tác

Bài tập ôn thi CK

Siêu thị Target

1 Viết kịch bản

Gia đình Anna là 1 trong số gia đình sống ở Mỹ, có sở thích mua hàng ở các siêu thị lớn, có lẻ vì 1 phần lí do nhà Anna ở gần đó và các mặt hàng trong siêu

thị cũng đảm bảo về chất lượng, vệ sinh, an toàn thực phẩm Vì thế vào mỗi cuối tuần Anna thường cùng với mẹ đi mua sắm ở siêu thị Hôm nay siêu thị vừa trang bị 1 hệ thống thanh toán, tính tiền tự động Hệ thống bao gồm các thiết bị được kết nối với nhau: 1 màn hình cảm ứng hiển thị nội dung, 1 cân điện tử, 1 máy scan mã sản phẩm, 1 máy in hóa đơn và 1 máy quét thẻ tín dụng,

1 máy quét mã sản phẩm cầm tay Mỗi khi mua hàng xong, Anna và mẹ thường phải đợi 20-30p để xếp hàng chờ nhân viên thanh toán, nhưng hôm nay có hệ thống thanh toán tự động việc giúp cho thanh toán, tính tiền được thực hiện 1 cách nhanh chóng, tiết kiệm thời gian

- Mua hàng xong, Anna cùng với mẹ lại đứng trước màn hình hiển thị của hệ thống thanh toán Trang chủ được hiển thị trên màn hình, với nội dung “Xin chào quí khách” và 1 phím “Thanh toán” Mẹ Anna nhấn “Thanh toán”, hệ thống hiển thị danh sách sản phẩm của người dùng ( ban đầu chưa quét mã thì sẽ trống ) Mẹ Anna đưa mã vạch trên sản phẩm đến trước camera của máy scan Máy scan kêu lên tiếng “Píp”, 1 sản phẩm được nhập thành công

và hiển thị lên bảng thông tin trên màn hình Thông tin hiển thị gồm: số thứ

tự, tên sản phẩm, đơn giá, số lượng/ trọng lượng, thành tiền

- Mẹ Anna tiếp tục quét các sản phẩm tiếp theo Nếu có 2 sản phẩm giống nhau thì chỉ cần quét mã 1 lần và chỉnh sửa lại cột số lượng/trọng lượng trên màn hình ở sản phẩm tương ứng Nếu muốn xóa sản phẩm, thì chỉ việc chọn sản phẩm đó trên màn hình, nhấn “Xóa”

- Đến mặt hàng rau củ, mẹ Anna mua 1 túi cà chua Cô ấy tiến hành cân túi cà chua trên cân điện tử Sau khi có được số kg ( trọng lượng), hệ thống sẽ tự động nhập số kg và yêu cầu người dùng nhập mã sản phẩm Hệ thống có chức năng hỗ trợ tìm mã sản phẩm theo tên sản phẩm Mẹ Anna nhập tên

“Cà chua ” vào ô tìm kiếm ở màn hình, và màn hình trả về kết quả là mã sản phẩm và hình ảnh minh họa Cô ấy xác nhận đó chính là mặt hàng cà chua

và nhập mã sản phẩm của cà chua vào

- Hoàn tất việc quét mã các sản phẩm trong giỏ hàng, hệ thống hiển thị thông tin các mặt hàng: tên sản phẩm, đơn giá, số lượng/ trọng lượng, thành tiền, tổng tiền thanh toán Mẹ Anna xác nhận và nhấn “Thanh toán” Màn hình hiển thị “Mời quý khách quét thẻ thanh toán”

- Đèn tín hiệu ở máy quét thẻ tín dụng nhấp nháy, mẹ Anna đưa thẻ vào, máy quét kêu tiếng “Píp” Màn hình hiển thị “Thanh toán thành công”, sau đó hiển thị “Bạn có muốn xuất hóa đơn không?” Mẹ Anna chọn “Có”

- Máy in hóa đơn bắt đầu in hóa đơn và kêu “Píp” để thông báo quá trình in hóa đơn hoàn tất Mẹ Anna lấy hóa đơn và hàng hóa, ra về

2 Phân tích tác vụ theo mô hình HTA

Câu 3 Bản thiết kế phần cứng

Cho biết thiết kế của bạn tốt như thế nào?

- Về thiết kế

+ Thiết kế các thiết bị nhỏ gọn

 Các thiết bị được đặt trên 1 quầy, với chiều cao quầy 1m4, phù hợp với đa số chiều cao mọi người

+ Phối màu tinh tế, đơn giản

+ Âm thanh báo hiệu, tiếng “Píp” vừa đủ nghe, không làm ồn

+ Thiết kế camera nằm trong máy quét mã sản phẩm, và máy quét mã sản phẩm cầm tay

- Về cấu tạo

+ Gồm các thiết bị: màn hình hiển, máy quét mã sản phẩm, cân điện tử, máy quét mã sản phẩm cầm tay, máy quét thẻ, máy in hóa đơn

+ Các thiết bị được kết nối không dây với nhau, thuận tiện việc thanh toán

- Về chức năng:

+ Khả năng quét mã sản phẩm và tự động hiển thị lên màn hình

+ Cân điện tử tự động hiển thị số kg, trọng lượng

+ Chức năng tìm kiếm sản phẩm theo tên, theo mã, hiển thị hình ảnh minh họa

+ Điều chỉnh số lượng sản phẩm, xóa sản phẩm

+ Thanh toán bằng thẻ nhanh chóng

+ Xuất hóa đơn

- Về yêu cầu phi chức năng

+ Khả năng xử lý đơn hàng nhanh chóng

+ Sau khi quét mã, hiển thị thông tin mặt hàng nhanh

+ Màn hình cảm ứng, thao tác mượt mà, không lag

+ Trong quá trình quét thẻ thanh toán nếu có lỗi phát sinh Lập tức hủy yêu cầu quét thẻ thanh toán, và yêu cầu khách hàng quét thẻ lại

- Cách hoạt động

+ Khách hàng lại trước màn hình hiển thị của hệ thống, nhấn “Thanh toán”

+ Màn hình chuyển sang trang danh sách sản phẩm được khách hàng mua ( ban đầu chưa quét mã sẽ là trống )

+ Khách hàng lần lượt đưa mã sản phẩm vào máy quét, có tiếng “Píp”, thông tin sản phẩm được đưa lên màn hình

+ Khách hàng có thể chỉnh sửa số lượng, xóa sản phẩm khỏi danh sách + Đối với mặt hàng rau củ, cần có trong lượng ( kg) Khách hàng đặt mặt hàng lên cân điện tử là tiến hành tìm sản phẩm theo tên trên thanh tìm kiếm Chọn đúng sản phẩm  thông tin sản phẩm, trọng lượng sẽ được hiển thị + Đối với mặt hàng nặng, cồng kền, không thể mang lên máy quét Khách hàng sử dụng máy quét mã cầm tay để quét

+ Hoàn tất quét mã, tiến hành thanh toán, quét thẻ ATM tại máy quét thẻ thanh toán

+ Lựa chọn xuất hóa đơn hay không? Nếu có, máy in hóa đơn tiến hành in hóa đơn hiển thị thông báo đến người dùng khi in hoàn tất

- Thiết kế có 1 kiểu tương tác:

+ Ra chỉ thị / mệnh lênh: ấn nút cảm ứng trên màn hình

- Thiết kế tăng sự chú ý:

+ Ở khu vực thiết bị quét mã sản phẩm có bộ đèn nhấp nháy, giúp người dùng dễ dàng xác định được chỗ cần đưa mã vạch vào quét Sau khi quét mã hoàn tất có tiếng “Píp” phát ra Giúp người dùng nhận biết mặt hàng

đó đã được quét

+ Bên cạnh máy quét thẻ tín dụng cũng có trang bị cái đèn nhấp nháy, giúp người dùng nhận biết được khe quét thẻ

+ Phía trên của máy in hóa đơn cũng có đèn nhấy nháy, báo hiệu quá trình in hóa đơn đã hoàn tất và chờ người dùng lấy hóa đơn

- Thứ tự sắp xếp các thiết bị trên hệ thống hợp lý  giúp người dùng thao tác một cách nhanh chóng

- Mỗi lần đến bước tiếp theo, màn hình sẽ hiển thị hướng dẫn cho người dùng

+ VD: đến bước quét mã, màn hình sẽ hiển thị hướng dẫn “Đưa mã sản phẩm vào camera của máy quét”, đèn ở máy quét sẽ nhấp nháy, báo hiệu người dùng cần đưa mã vạch vào đây

+ Đến bước quét thẻ tín dụng, màn hình hiển thị “Mời quý khách quét thẻ ATM”, máy quét thẻ cầm tay bên cạnh sẽ nhấy nháy đèn, vị trí đèn được đặt trên máy quét, giúp người dùng nhận biết được thiết bị quét thẻ

- Khi người dùng có mua các sản phẩm nặng, cồng kền như thùng mì, thùng dầu…, không thể mang lên máy quét mã gần màn hình Thì lúc này có thể

sử dụng thiết bị quét mã sản phẩm cầm tay Với thiết kế không dây, giúp người dùng dễ dàng thao tác quét mã

- Các thiết bị như máy quét mã sản phẩm cầm tay, máy in hóa đơn, máy quét thẻ tín dụng…được kết nối không dây với màn hình Khi có một thiết bị bị lỗi sẽ không làm ảnh hướng đến các thiết bị khác Chỉ cần mang thiết bị tương ứng đến thay thế  dễ dàng sửa chữa, bảo trì, không bị ảnh hướng đến các thiết bị khác

- Màn hình được thiết kế có thể gập lên/ xuống  phù hợp với chiều cao của từng người

Câu 4: Bản thiết kế giao diện phần mềm

Cho biết thiết kế của bạn tốt như thế nào?

- Thiết kế gây chú ý

+ Làm nổi bật những gì cần phải tập trung

 Cột tên sản phẩm, đơn giá, số lượng, thành tiền được đặt ở vị trí to nhất của màn hình  hiển thị thông tin cần thiết, quan trọng, ngắn gọn về sản phẩm

 Mục tổng tiền thanh toán được thiết kế với form chữ to, người dùng

dễ dàng thấy được số tiền cần thanh toán

+ Áp dụng kĩ thuật về màu sắc

 Nút “Thanh toán” được thiết kế to, màu đỏ để làm nổi bật và kích thích hành động từ phía người dùng

 Phần giao diện được thiết kế nền trắng, chữ đen  hiển thị rõ ràng,

dễ quan sát, nổi bật các thông tin của sản phẩm

+ Công cụ tìm kiếm và form điền thông tin tìm kiếm đơn giản, giao diện thoáng đãng

 Ô tìm kiếm nằm góc trên bên phải cùng với biểu tượng kính lúp

- Thiết kế đối với nhận thức

+ Sử dụng icon giúp người dùng dễ đọc và phân biệt ý nghĩa

 : dùng để xóa số lượng đã nhập và tiến hành nhập lại

 : Nút xác nhận đã hoàn tất nhập số lượng

+ Dùng đường viền và khoảng cách để nhóm thông tin, giúp dễ nắm bắt thông tin và xác định vị trí

 Giao diện được chia thành 3 khu vực: khu vực hiển thị thông tin các sản phẩm được quét ( khu vực 1), khu vực hiển thị các công cụ thao tác trong quá trình thanh toán ( khu vực 2 ), khu vực hiển thị tổng tiền ( khu vực 3 ) Các khu vực được ngăn cách bởi đường viền, giúp người dùng dễ dàng quan sát nắm bắt được thông tin

- Thiết kế cho bộ nhớ

+ Người dùng không cần phải nhớ cụ thể từng bước thanh toán cho những lần thanh toán tiếp theo Vì hệ thống sẽ luôn hiển thị hướng dẫn các thao tác thanh toán cho mỗi lần người dùng thanh toán

- Thiết kế hỗ trợ việc đọc, nghe, nhìn

+ Sau mỗi lần quét mã thành công 1 sản phẩm, hệ thống kêu lên tiếng “Píp”

 hỗ trợ việc nghe

+ Sau mỗi bước, hệ thống hiển thị text hướng dẫn bước tiếp theo  đọc Cùng với việc đèn báo hiệu nhấp nháy  thấy

 Sau khi nhấn thanh toán, màn hình hiển thị text “Mời quý khách quét thẻ ATM”  người dùng đọc Cùng lúc đó, máy quét thẻ ATM sẽ nhấp nháy đèn  người dùng quan sát thấy

 Dễ dàng nhận biết

- Thiết kế cho việc giải quyết vấn đề, lý luận và ra quyết định

+ Cung cấp thông tin/ chức năng cho người dùng muốn thực hiện

 Sau khi quét thẻ ATM thành công, hệ thống hiển thị thông báo thanh toán thành công, và 1 câu hỏi “Bạn có muốn xuất hóa đơn không?” , với 2 lựa chọn “Có”, “Không”

- Thanh tìm kiếm sản phẩm theo tên có thể giúp tìm kiếm các sản phẩm cân

kg ( trọng lượng) VD: người dùng nhập tên “Cà chua” nhấn chọn sản phẩm, sau đó cân kg và nhập số kg vào

- Thao tác dễ dàng, thiết kế thân thiện với người dùng, chỉ hiển thị các mục cần thiết, quan trọng

- Giao diện hài hòa, thoáng đãng