TRƯỜNG ĐẠI HỌC CẦN THƠ

TRƯỜNG CÔNG NGHỆ THÔNG TIN - TRUYỀN THÔNG

BÀI BÁO CÁO

CT273 - GIAO DIỆN NGƯỜI - MÁY

ĐỀ TÀI: HỆ THỐNG THÔNG TIN GIẢI TRÍ

TRÊN XE

Cần Thơ, tháng 12 năm 2023

1
 MỤC LỤC
MỤC LỤC 2
DANH MỤC HÌNH 3
DANH MỤC BẢNG 4
1. GIỚI THIỆU 5
2. CƠ SỞ LÝ THUYẾT 6
2.1 Các nguyên tắc thiết kế hệ thống tương tác 6
2.2 Tâm lý học nhận thức trong tương tác người-máy 6
2.3 Các phương pháp tiếp cận thiết kế tương tác 6
2.4 Lý thuyết thiết kế tương tác 6
3. CONCEPTUAL DESIGN 7
3.1 Mô tả vấn đề và các giải pháp thiết kế 7
3.2 Hierarchical model 7
3.3 Mô hình khái niệm - Conceptual model 7
4. PROTOTYPES 8
4.1 Low-fidelity prototype 8
4.2 Mid-fidelity prototype 8
5. KIỂM THỬ PROTOTYPE VỚI NGƯỜI DÙNG 9
6. ĐÁNH GIÁ 10
7. KẾT LUẬN 11
TÀI LIỆU THAM KHẢO 12
PHỤ LỤC 13

2
 DANH MỤC HÌNH

DANH MỤC BẢNG

Bảng 1. Bảng chú thích các metaphors …………………………………16

Bảng 2. Bảng kiểm thử Prototype với người dùng………………………32

1. GIỚI THIỆU
Trong những năm qua thế giới đang có sự thay đổi phát triển không ngừng nhờ có
sự xuất hiện của khoa học công nghệ, bộc lộ nhiều tác động đến cuộc sống con người và
cũng đang dần mở ra cho chúng ta những cơ hội cũng như cả thách thức. Ngành công
nghiệp ô tô đang hướng tới phát triển các công nghệ tiên tiến để tạo ra các giải pháp kết
nối tốt hơn, cải thiện độ an toàn của phương tiện và nâng cao trải nghiệm của người dùng
trên xe. Một trong những công nghệ chủ chốt, đóng vai trò là tâm điểm của tất cả các hệ
thống ô tô hiện đại và tích hợp các chức năng của chúng để được điều khiển và giám sát
từ một thiết bị trung tâm, là “Hệ thống thông tin giải trí trên xe”.

Hệ thống thông tin giải trí trên xe (Hệ thống thông tin giải trí trên xe - IVIS) là
một phần quan trọng trong các phương tiện thông tin hiện đại. IVIS kết hợp các công

3
nghệ như điện tử, viễn thông và truyền thông để cung cấp các tính năng giải trí và thông
tin cho người lái và hành khách trong xe.

IVIS cung cấp nhiều tính năng hữu ích như GPS định vị hệ thống, kết nối điện
thoại di động thông qua Bluetooth, truy cập internet, nghe nhạc, xem video và điều khiển
các thiết bị khác trong xe như âm thanh hệ thống, điều hòa nhiệt độ và cửa sổ. Hệ thống
này được điều khiển thông qua màn hình cảm ứng hoặc các nút điều khiển trên vô lăng,
giúp người lái và hành khách dễ dàng tương tác với các tính năng và thông tin trên IVIS
một cách an toàn.

IVIS không chỉ quản lý lại tiện ích và giải trí cho người sử dụng mà còn cung cấp
thông tin về lưu lượng thông tin, điều kiện để tiết kiệm và các dịch vụ khác như thông
báo các địa điểm nhà hàng, cây xanh, cột mốc gần đó. Với sự phát triển của công nghệ,
IVIS ngày càng được cải thiện và tích hợp các tính năng mới như trợ lý ảo, điều khiển
giọng nói và kết nối với các thiết bị thông tin khác trong môi trường xe hơi.

Nhìn chung, IVIS là một hệ thống giải trí thông tin và thông tin đa phương tiện
trong xe, mang lại tiện ích và giải trí cho người lái và hành khách, đồng thời cung cấp
thông tin hữu ích và nâng cao trải nghiệm của người dùng trên xe. Tuy nhiên do yêu cầu
của bài báo cáo nhóm nên nhóm chúng tôi tập trung phát triển tạo ra nguyên mẫu đó là hệ
thống định vị và hệ thống giải trí trên xe.

Hiện nay có rất nhiều lại IVIS khác nhau, phổ biến nhất có thể kể đến: Apple
Carplay, Android Auto, Mercedes Command, BMW iDrive.

● Apple Carplay và Android Auto: là hai công nghệ đồng hành trong lĩnh vực
thông tin giải trí và kết nối xe hơi. Chúng được thiết kế để kết nối điện thoại thông
minh của bạn với hệ thống giải trí trên xe, cho phép bạn sử dụng các ứng dụng và
tính năng của điện thoại thông qua màn hình trên xe.

○ Apple CarPlay: Được phát triển bởi Apple, CarPlay cho phép người dùng
iPhone kết nối với hệ thống giải trí trên xe. Người dùng có thể sử dụng các
ứng dụng như điện thoại, tin nhắn, Apple Maps, Apple Music và các ứng
dụng hỗ trợ khác thông qua giao diện CarPlay trên màn hình xe. CarPlay
cũng hỗ trợ điều khiển giọng nói Siri để tương tác với hệ thống.

4
 Hình 1. Hệ thống Apple CarPlay

○ Android Auto: Android Auto là một nền tảng của Google cho phép người
dùng kết nối điện thoại Android với hệ thống giải trí trên xe. Tương tự như
CarPlay, Android Auto cung cấp giao diện trực quan để truy cập vào các
ứng dụng và tính năng của điện thoại thông qua màn hình xe, bao gồm điện
thoại, tin nhắn, Google Maps, Google Play Music và các ứng dụng hỗ trợ
khác. Android Auto cũng hỗ trợ điều khiển giọng nói Google Assistant để
tương tác với hệ thống.

5
 Hình 2. Hệ thống Android Auto

Cả hai hệ thống đề cho phép bạn sử dụng các chức năng của điện thoại thông minh
trong khi lái xe mà không cần phải nhìn vào màn hình điện thoại hay phải trực tiếp
cầm nó, giảm đáng kể nguy cơ tai nạn giao thông.

● Mercedes - Benz Comand: là một hệ thống thông tin giải trí trên xe đa chức năng
như điều khiển âm nhạc, dẫn đường, kết nối điện thoại thông minh, truy cập vào
các ứng dụng và dịch vụ trên xe. Hệ thống bao gồm màn hình hiển thị, bảng điều
khiển được vận hành bằng vô lăng và bàn di chuột được gắn vào bảng điều khiển
trung tâm. Nó có thể được sử dụng để kiểm soát một loạt các chức năng của chiếc
xe như: Định vị, kết nối xe của người dùng với thế giới, cung cấp hệ thống giải trí,
lắng nghe và thấu hiểu, giảm thiểu sự phân tâm

6
 Hình 3. Hệ thống Mercedes-benz Command

● BMW iDrive: Là hệ thống thông tin và giải trái trong xe sử dụng để xem thông tin
và điều khiển một số chức năng của xe. BMW iDrive bao gồm 1 màn hình và 1
núm xoay để điều khiển và 1 hệ thống nút bấm trên táp lô (center console), nút
bấm trên lăng GPS, cảm biến, camera, microphone. Những chức năng chính của
thiết bị có thể kể đến như: bản đồ dẫn đường thông minh, Kết nối người lái và
chiếc xe gọi cứu hộ khi có sự cố xảy ra, cảnh báo tình huống nguy hiểm, cảnh báo
va chạm, chệch làn, điểm mù…

Hình 4. Hệ thống BMW iDrive

7
 Nhìn chung, các hệ thống IVIS đề có nhiều tính năng và được áp dụng nhiều công
nghệ hiện đại. Vì thế các hệ thống này đều có thiết kế rất phức tạp. Tuy nhiên, do yêu cầu
của bài tập báo cáo nhóm nên chúng tôi chỉ tập chung phát triển một hệ thống IVIS có
thiết kế đơn giản, với các chức năng định vị và giải trí cơ bản trên xe.

2. CƠ SỞ LÝ THUYẾT
2.1 Các nguyên tắc thiết kế hệ thống tương tác:
● Thiết kế hệ thống tương tác là thiết kế các sản phẩm tương tác để hỗ trợ con người
trong cuộc sống hằng ngày và trong công việc[1].

(Preece, Sharp và Rogers)

● Có 12 quy tắc thiết kế hệ thống tương tác bao gồm[2]:

1. Sự trực quan: Cố gắng đảm bảo rằng mọi thứ đều có thể nhìn thấy được để
mọi người có thể thấy những gì các chức năng có sẵn và hệ thống hiện đang
làm gì.
2. Sự nhất quán: Hãy nhất quán trong việc sử dụng các tính năng thiết kế và
các hệ thống tương tự cũng như cách thức làm việc tiêu chuẩn.
3. Sự quen thuộc: Sử dụng ngôn ngữ và ký hiệu mà đối tượng mục tiêu sẽ
hướng tới quen thuộc với
4. Sự chi trả: Thiết kế mọi thứ sao cho rõ ràng chúng dùng để làm gì.
5. Sự thông thương: Cung cấp hỗ trợ để mọi người có thể di chuyển xung
quanh các phần của hệ thống.
6. Sự điều khiển: Làm rõ ai hoặc cái gì đang kiểm soát cũng như cho phép
mọi người nắm quyền kiểm soát.
7. Sự phản hồi: Phản hồi nhanh chóng thông tin từ hệ thống tới người dùng để
họ biết hành động của họ đã có tác động gì.
8. Sự hồi phục: Cho phép khôi phục từ các hành động, đặc biệt là các lỗi và
sai sót, nhanh chóng và hiệu quả.
9. Sự ràng buộc: Đưa ra những ràng buộc để mọi người không cố gắng làm
những điều không phù hợp.
10. Sự uyển chuyển: Cho phép nhiều cách thực hiện để phù hợp với người
dùng với mức độ kinh nghiệm và sự quan tâm khác nhau đến hệ thống.
11. Sự phong cách: Thiết kế phải có phong cách và hấp dẫn, thu hút.
12. Sự thân thiện: Hệ thống tương tác phải lịch sự, thân thiện và nói chung đẹp
mắt.
● Trong đề tài này chúng tôi áp dụng tất cả 12 quy tắc để thiết kế hệ thống tương tác.
2.2 Tâm lý học nhận thức trong tương tác người-máy:
● Nhận thức là hành động hay quá trình tiếp thu kiến thức và những am hiểu thông
qua suy nghĩ, kinh nghiệm, giác quan. Có nhiều lại nhận thức khác nhau, ví dụ

8
 như: suy nghĩ, ghi nhớ, học hỏi, mơ mộng, đưa ra quyết định, nhìn, đọc, viết,
nói…
● Theo Norman, nhận thức được chia thành 2 dạng: nhận thức trải nghiệm và nhận
thức phản xạ.
○ Nhận thức trải nghiệm (Experiential Cognition): là một trạng thái tinh thần
trong đó chúng ta nhận thức, hành động và phản ứng với các sự kiện xung
quanh chúng ta một cách trực quan và dễ dàng
○ Nhận thức phản xạ (Reflective Cognition): bao gồm sự nỗ lực về tinh thân,
sự chú ý, phán đoán và quyết định
● Có nhiều khía cạnh của nhận thức bao gồm:
○ Chú ý (Attention): Làm nổi bật thông tin khi cần chú ý đến bằng cách sử
dụng màu sắc, bố cục, hình ảnh …
○ Nhận thức (Perception): Cách thức tiếp nhận thông tin từ những giác quan
khác nhau và chuyển hóa thành kinh nghiệm
○ Ký ức (Memory): Việc nhớ các loại kiến thức khác nhau để đưa ra hành
động phù hợp. Có 3 dạng kí ức là : Bộ nhớ ngắn hạn, bộ nhớ làm việc, bộ
nhớ dài hạn.
+ Bộ nhớ ngắn hạn: được lưu trữ tối đa trong vài giây. Chúng đến từ 5
giác quan: thính giác, thị giác, xúc giác, khứu giác và vị giác. [3]
+ Bộ nhớ làm việc: trí nhớ làm việc như một ghi chú tạm thời trong
não. Nó lưu giữ thông tin mới tại chổ để não có thể làm việc với nó
trong thời gian ngắn và kết nối nó với thông tin khác. [4]
+ Bộ nhớ dài hạn: đề cập đến việc lưu trữ thông tin trong một thời gian
dài. Loại trí nhớ này có xu hướng ổn định và có thể tồn tại lâu dài -
thường là trong nhiều năm. [5]
○ Học hỏi (Learning): Giúp người dùng học hỏi thông qua cách thực hành
thay vì học bằng cách làm theo sách hướng dẫn.
○ Đọc, viết, nghe (Reading, Writing, Listening): là 3 hình thức xử lý ngôn
ngữ có đặc tính tương tự và khác nhau:
- Giống nhau: ý nghĩa của các câu và cụm từ là giống nhau bất kể nó
được chuyển tải bằng phương thức nào.
- Khác nhau:
+ Ngôn ngữ viết là vĩnh viễn trong khi nghe là nhất thời.
+ Đọc có thể nhanh hơn nói hoặc nghe.
+ Nghe đòi hỏi its nhận thức hơn đọc hoặc nói.
+ Ngôn ngữ viết có xu hướng đúng ngữ pháp trong khi ngôn
ngữ nói thường không.
○ Giải quyết vấn đề, lên kế hoạch, lý luận và đưa ra quyết định: cung cấp cấp
thêm thông tin ẩn dễ truy cập cho những người dùng muốn hiểu thêm về
cách thực hiện một hoạt động hiệu quả hơn.

9
 Trong đề tài “Hệ thống giải trí trên xe” tôi đã áp dụng các khía cạnh như: Chú ý,
Ký ức, Học hỏi, vì cho rằng các khía cạnh này có ảnh hưởng rất lớn với thiết kế và cũng
như để hiểu rõ hơn mong muốn của người dùng.

2.3 Các phương pháp tiếp cận thiết kế tương tác :

- Có 4 phương pháp tiếp cận thiết kế tương tác:
○ Thiết kế lấy người dùng làm trung tâm: Thiết kế lấy người dùng làm trung
tâm là một quá trình thiết kế lặp đi lặp lại trong đó các nhà thiết kế tập
trung vào người dùng và nhu cầu của họ trong từng giai đoạn của quá trình
thiết kế.

(Interaction Design Foundation)

- Các nguyên tắc thiết kế lấy người dùng làm trung tâm[6]:
+ Hiểu rõ các yêu cầu của người dùng và nhiệm vụ.
+ Kết hợp phản hồi người dùng để xác định các yêu cầu và thiết
kế.
+ Sự tham gia sớm và tích cực của người dùng để đánh giá thiết
kế của sản phẩm.
+ Tích hợp thiết kế lấy người dùng làm trung tâm với các hoạt
động phát triển khác.
+ Quá trình thiết kế lặp đi lặp lại.
○ Thiết kế hướng đến mục tiêu: Thiết kế hướng đến mục tiêu bao gồm thiết
kế về hành vi, hình thức trực quan và hình thức vật lý của sản phẩm. Tiền
đề cơ bản cách tốt nhất để thiết kế một cách thành công là tập trung vào
việc đạt được các mục tiêu.
- Quá trình thiết kế hướng đến mục tiêu có thể chia thành 6 giai đoạn:
nghiên cứu, mô hình hóa, định nghĩa yêu cầu, định nghĩa khung,
sàng lọc, hỗ trợ.
○ Thiết kế lấy hoạt động làm trung tâm: Thiết kế lấy hoạt động làm trung tâm
là mô hình thiết kế tập trung vào cách một hệ thống tạo ra kết quả do hoạt
động tạo ra. Mô hình thiết kế lấy hoạt động làm trung tâm là một tia X vào
hoạt động xã hội và kỹ thuật của một hoạt động. Nó xem xét hệ thống rộng
lớn hơn ngoài một người dùng duy nhất[7].
○ Thiết kế có sự tham gia: Thiết kế có sự tham gia (ban đầu là thiết kế hợp
tác, bây giờ thường là thiết kế đồng bộ) là một cách tiếp cận để thiết kế cố
gắng thu hút sự tham gia tích cực của tất cả các bên liên quan (ví dụ: người

10
 tham gia, đối tác, khách hàng, công dân, người dùng cuối) trong quá trình
thiết kế để giúp đảm bảo kết quả đáp ứng nhu cầu và có thể sử dụng
được[8].
- Trong 4 phương pháp tiếp cận thiết kế tương tác, nhóm chúng tôi áp dụng phương
pháp thiết kế lấy người dùng làm trung tâm vì những lý do sau:
○ Đây là một phương pháp hiệu quả để tạo ra những sản phẩm và dịch vụ đáp
ứng các nhu cầu và mong muốn của người dùng. Và là cách tốt nhất để tạo
ra những sản phẩm và dịch vụ mang lại trải nghiệm tốt nhất cho người dùng
cuối cùng.
○ Cách tiếp cận này đặt người dùng lên hàng đầu trong quá trình thiết kế,
đảm bảo rằng những gì chúng tôi tạo ra thực sự hữu ích và hấp dẫn với đối
tượng sử dụng cuối cùng. Bằng cách tìm hiểu sâu về người dùng, chúng tôi
có thể hiểu rõ nhu cầu, thói quen, và mục tiêu của họ. Điều này giúp chúng
tôi tạo ra trải nghiệm tốt hơn và giải quyết các vấn đề một cách hiệu quả.
Phương pháp thiết kế lấy người dùng làm trung tâm bao gồm việc nghiên
cứu người dùng, phân tích dữ liệu, kiểm tra người dùng thực tế, và liên tục
cải tiến sản phẩm dựa trên phản hồi của người dùng. Điều này giúp chúng
tôi tạo ra những sản phẩm và dịch vụ mà người dùng thực sự cần và muốn
sử dụng.
○ Hiểu rõ nhu cầu của người dùng: Đặt người dùng lên hàng đầu giúp chúng
ta tìm hiểu sâu về nhu cầu, mong muốn, và mục tiêu của họ. Điều này giúp
chúng ta xác định các chức năng và tính năng mà người dùng thực sự quan
tâm và cần sử dụng.
○ Tạo ra trải nghiệm tốt hơn: Bằng cách nghiên cứu và tìm hiểu về người
dùng, chúng ta có thể tạo ra những trải nghiệm người dùng tốt hơn. Điều
này có thể giúp chúng ta làm giảm sai sót, tối ưu hóa giao diện và tương
tác, và tạo ra sản phẩm dễ sử dụng và thân thiện với người dùng.
○ Tăng sự tương tác và hài lòng của người dùng: Phương pháp thiết kế lấy
người dùng làm trung tâm giúp chúng ta tạo ra những sản phẩm và dịch vụ
mà người dùng thực sự yêu thích và muốn sử dụng. Điều này có thể tạo ra
một môi trường tương tác tích cực và tăng cường hài lòng của người dùng.
○ Tăng sự tương tác và hài lòng của người dùng: Phương pháp thiết kế lấy
người dùng làm trung tâm giúp chúng ta tạo ra những sản phẩm và dịch vụ
mà người dùng thực sự yêu thích và muốn sử dụng. Điều này có thể tạo ra
một môi trường tương tác tích cực và tăng cường hài lòng của người dùng.

- Áp dụng phương pháp thiết kế lấy người dùng làm trung tâm vào hệ thống định vị
và hệ thống giải trí trên xe mang đến nhiều lợi ích cho trải nghiệm người dùng.
Dưới đây là một số cách để áp dụng phương pháp này:

11
 ○ Nghiên cứu và hiểu nhu cầu người dùng: Tìm hiểu sâu về người dùng dựa
trên các nghiên cứu thị trường và tương tác trực tiếp để xác định nhu cầu,
mong muốn và thói quen của họ khi sử dụng hệ thống định vị và giải trí
trên xe. Từ đó, có thể xây dựng một trải nghiệm phù hợp và thú vị.
○ Cho người dùng tham gia ngay từ đầu: sẽ hiểu rõ hơn về nhu cầu, tâm tư
mà người dùng muốn sử dụng trong quy trình thiết kế, giảm thiểu khả năng
đi lệch hướng, từ đó sát với mong muốn của họ.
○ Đồng cảm với người dùng: nhà thiết kế phải luôn đặt mình vào vị trí của
một người dùng để từ đó có những điều chỉnh phù hợp hơn với như cầu của
họ.
○ Tạo môi trường tương tác dễ sử dụng: Thiết kế giao diện và trực quan của
hệ thống định vị và giải trí trên xe sao cho dễ sử dụng và tương tác. Điều
này có thể bao gồm cách hiển thị thông tin rõ ràng và trực quan, bố cục hợp
lý và các phím chức năng dễ dùng. Sự đơn giản và tính nhất quán trong
giao diện giúp người dùng dễ dàng thao tác và tận hưởng trải nghiệm.
○ Tùy chỉnh và cá nhân hóa: Cung cấp khả năng tùy chỉnh và cá nhân hóa cho
người dùng để họ có thể điều chỉnh các thiết lập và tùy chọn theo sở thích
cá nhân. Điều này bao gồm việc cung cấp tùy chọn âm thanh, video, điều
khiển đèn, cài đặt định vị cá nhân và nhiều hơn nữa. Cho phép người dùng
tùy chỉnh tăng tính tương tác và cá nhân hóa với hệ thống.
○ Liên tục cải tiến dựa trên phản hồi người dùng: Thu thập phản hồi và ý kiến
từ người dùng để liên tục cải tiến và nâng cao trải nghiệm. Điều này có thể
được thực hiện thông qua khả năng gửi phản hồi trực tiếp từ hệ thống hoặc
qua các kênh phản hồi khác như ứng dụng di động hoặc trang web. Phản
hồi từ người dùng giúp xác định các vấn đề hoặc cải tiến cần được thực
hiện để cung cấp một trải nghiệm tốt hơn.
2.4 Lý thuyết thiết kế tương tác
2.4.1 Mô hình khái niệm - Conceptual model :
- Một mô hình khái niệm là một mô tả ở mức độ cao về cách một hệ thống được tổ
chức và vận hành.

(Johnson và Henderson, 2002)

- Có 4 loại tương tác chính:

+ Instructing: Kiểu tương tác này mô tả cách người dùng thực hiện nhiệm vụ của
mình bằng cách yêu cầu hệ thống phải làm gì.
+ Conversing: Hình thức tương tác này dựa trên ý tưởng một người trò chuyện với
một hệ thống, trong đó hệ thống hoạt động như một đối tác đối thoại.

12
 + Manipulating: Hình thức tương tác này liên quan đến việc thao tác các đối tượng
và tận dụng kiến thức của người dùng về cách họ thực hiện điều đó trong thế giới
vật chất.
+ Exploring: Chế độ tương tác này liên quan đến việc người dùng di chuyển qua môi
trường ảo hoặc vật lý.

(Preece, Sharp and Rogers, 2015)

- Trong đề tài này chúng tôi áp dụng tương tác chỉ thị (touch and voice), điều này
cho phép người dùng đưa ra chỉ thị để hệ thống thực hiện bằng cách chạm vào
màn hình hoặc người dùng có thể tương tác bằng cách đưa ra chỉ thị bằng giọng
nói để hệ thống thực hiện.

2.4.2 Nguyên mẫu – Prototype:

- Nguyên mẫu là sự thể hiện ý tưởng thành một định dạng để truyền đạt ý tưởng đó
cho người khác hoặc được thử nghiệm với người dùng, với mục đích cải thiện ý
tưởng đó theo thời gian.

(McElroy, 2017)

- Các loại nguyên mẫu chính:

+ Low-Fidelity Prototypes (Nguyên mẫu có độ trung thực thấp): trông không
giống sản phẩm cuối cùng lắm và không cung cấp chức năng tương tự, ví
dụ: mô hình giấy, bìa cứng, phác thảo…

(Preece, Sharp và Rogers, 2015)

+ Mid-fidelity prototypes (Nguyên mẫu có độ trung thực trung bình): bắt đầu
trông giống sản phẩm cuối cùng của bạn ở ít nhất một khía cạnh, bắt đầu
kết hợp thiết kế trực quan, tương tác, chức năng và phương tiện cuối cùng.
Mid-fidelity prototypes rất hữu ích vì: chúng cho phép kiểm tra các phần
chi tiết hơn của các tương tác, cung cấp cho người dùng nhiều ngữ cảnh
hơn trong nguyên mẫu.

(McElroy, 2017)

+ High-Fidelity Prototypes(Nguyên mẫu có độ trung thực cao): có giao diện

tương tự nhau, nếu không nhất thiết phải có chức năng, cho đến sản phẩm

13
 cuối cùng được mong đợi.High-fidelity prototypes có các tính năng sau: rất
hữu ích cho việc đánh giá chi tiết các yếu tố thiết kế chính(nội dung, hình
ảnh, tính tương tác, chức năng và phương tiện). Nó thường tạo thành một
giai đoạn quan trọng trong việc chấp nhận khách hàng và thường được phát
triển khá tốt trong dự án khi các ý tưởng bắt đầu hình thành.

(Benyon, 2014)

- Trong đề tài này chúng tôi áp dụng loại nguyên mẫu: Low-Fidelity Prototypes và
Mid-fidelity prototypes cho hệ thống thông tin giải trí trên xe.

3. CONCEPTUAL DESIGN
3.1 Mô tả vấn đề và các giải pháp thiết kế :
Trong đề tài này nhóm chúng tôi thiết kế nguyên mẫu của hệ thống thông tin giải
trí trên xe với hai module chính là hệ thống định vị và hệ thống giải trí. Trong đó, hệ
thống định vị cho phép bạn truy cập các dịch vụ điều hướng và hệ thống giải trí cho phép
bạn truy cập thư viện âm nhạc.

Để xây dựng tốt hệ thống thông tin giải trí trên xe nhóm chúng tôi đề xuất các giải pháp
như sau :

- Với hệ thống định vị của hệ thống định vị và giải trí trên xe: chúng tôi hướng tới
người dùng các chức năng như tìm kiếm vị trí, chọn vị trí, xem bản đồ, phóng to
và thu nhỏ bản đồ, xem thời tiết, chỉ dẫn di chuyển, chia sẻ vị trí …
- Với hệ thống giải trí trên xe: chúng tôi hướng tới xây dựng hệ thống giải trí hỗ trợ
người dùng dễ dàng truy cập thư viện âm nhạc để phát nhạc, tạm dừng, chuyển bài
hát, thư viện, tăng giảm âm lượng, tìm kiếm, thêm vào danh sách phát ...

3.2 Hierarchical model

Trong đề tài này, nhóm chúng tôi xây dựng hệ thống Hestla với 2 module chính bao gồm
hệ thống định vị và hệ thống giải trí. Đối với hệ thống định vị người dùng có thể tìm
kiếm vị trí, chọn vị trí, xem bản đồ, phóng to và thu nhỏ, xem thời tiết, chỉ dẫn di chuyển,
chia sẻ vị trí. Đối với hệ thống giải trí người dùng có thể vào thư viện chọn bài hát, phát
nhạc, tạm dừng, phát ngẫu nhiên, thêm vào danh sách phát, yêu thích, lịch sử nghe nhạc,
chuyển bài, tăng giảm âm lượng, tìm kiếm…

14
 Hình 5. Mô hình Hierarchical model

3.3 Mô hình khái niệm - Conceptual model

Trong hệ thống Hestla có 4 tương tác chính gồm định vị, nghe nhạc, định vị có nhạc, cài
đặt hệ thống

- Muốn vào hệ thống định vị, trước tiên chúng ta chọn vào màn hình có biểu tượng
bản đồ, trong đó có các chức năng tìm kiếm vị trí, chọn vị trí, xem bản đồ, phóng
to và thu nhỏ, xem thời tiết, chỉ dẫn di chuyển, chia sẻ vị trí.
- Muốn vào hệ thống nghe nhạc, trước tiên chúng ta chọn vào màn hình có biểu
tượng âm nhạc, trong đó có các chức năng phát nhạt, tạm dừng, phát ngẫu nhiên,
thư viện, thêm vào danh sách phát, yêu thích, lịch sử nghe nhạc, chuyển bài, tăng
giảm âm lượng, tìm kiếm.
- Muốn vào hệ thống cài đặt, ta chọn vào biểu tượng cài đặt, trong đó sẽ có các tùy
chọn về độ sáng màn hình, bật/tắt wifi, bluetooth và chế độ máy bay.

Hình 6. Mô hình khái niệm - Conceptual model

15
 - Bảng chú thích các metaphors sử dụng trong giao diện của hệ thống:

STT Icon Tên icon Giải thích ý nghĩa icon

1 Wifi Biểu tượng cho biết hệ thống đã kết nối wifi.

2 Battery Biểu tượng cho biết năng lượng hiện tại của hệ
thống

3 Bluetooth Biểu tượng cho biết hệ thống đã kết nối

bluetooth

4 Setting Biểu tượng cài đặt của hệ thống

5 Home Biểu tượng trở về trang chủ

6 Search Biểu tượng tìm kiếm

7 Voice search Biểu tượng tìm kiếm bằng giọng nói

8 back Biểu tượng trở về trang trước đó của trang hiện

tại

9 + Zoom in Biểu tượng phóng to bản đồ

10 - Zoom out Biểu tượng thu nhỏ bản đồ

11 Volume + Biểu tượng tăng âm lượng

12 Volume - Biểu tượng giảm âm lượng

13 Play Biểu tượng phát nhạc

14 Pause Biểu tượng ngừng phát nhạc

16
15 Skip-back Biểu tượng trở về bài nhạc trước đó

16 Skip Biểu tượng phát bài hát tiếp theo

17 Repeat Biểu tượng lặp lại bài hát

18 Shuffle Biểu tượng xáo trộn thứ tự bài hát

Bảng 1. Bảng chú thích các metaphors

4. PROTOTYPES
4.1 Low-fidelity prototype

Đối với Low-fidelity prototype của Hệ thống thông tin và giải trí trên, nhóm chúng tôi
thiết kế như sau:

Hình 7. Giao diện homepage

17
Hình 8. Giao diện setting

18
Hình 9. Giao diện map

19
Hình 10. Giao diện music

20
Hình 11. Giao diện map và music

21
4.2 Mid-fidelity prototype

Ở phần này, nhóm chúng tôi sẽ trình bày tất cả hình ảnh về Mid-fidelity prototype.

Hình 12. Trang chủ

Góc trên bên trái hiển thị logo hệ thống và ngày tháng năm hiện tại Wednesday, Oct 12.
Góc giữa phía trên là tên hệ thống “Hestla”, dưới tên hệ thống hiển thị giờ hiện tại. Tại
giao diện trang chủ có 3 tiện ích đó là hệ thống định vị, hệ thống giải trí trình phát nhạc
và hệ thống cài đặt.

Khi click vào icon sẽ chuyển sang giao diện của hệ thống định vị Navigation

Khi click vào icon sẽ chuyển sang giao diện của hệ thống giải trí Music player

Khi click vào icon sẽ chuyển sang giao diện của hệ thống Setting

Khi click vào icon sẽ hiển thị hộp thoại hỗ trợ tại giao diện trang chủ:

22
 Hình 13. Hỗ trợ tại giao diện trang chủ

Tiếp theo là phần footer cố định của hệ thống ở mọi giao diện:

Hình 14. Footer

Hình 15. Giao diện Map

23
Icon thể hiện mô phỏng về thời tiết trong ngày.
Icon có chức năng phóng to bản đồ, icon có chức năng thu nhỏ bản đồ.
Khi click vào icon hệ thống sẽ trả về vị trí hiện tại của người dùng.

Hình 16. Search

Cung cấp các chức năng tìm kiếm các địa điểm bằng cách nhập trực tiếp tên, chữ cái liên
quan đến địa điểm, hệ thống sẽ hiển thị danh sách các kết quả liên quan hoặc thông qua
nhận diện giọng nói.

- Tìm kiếm bằng cách nhập trực tiếp:

Hình 17. Search 2

- Tìm kiếm bằng cách nhận dạng giọng nói: nhấn vào icon đồng thời nói ra địa
điểm cần tìm.

Hình 18. Tìm kiếm bằng giọng nói.

24
Hình 19. Giao diện Music

25
 Giao diện hệ thống giải trí được chia thành 2 side chính, phần side bên trái hiển thị danh
sách bài hát, bài hát đang được trình bày sẽ được tô nền khác với số bài hát còn lại, side ở
giữa là đĩa nhạc với hình ảnh và thông tin của bài hát đang trình chiếu.

Tương tự như hệ thống định vị, hệ thống giải trí trình phát nhạc cũng có chức năng tìm
kiếm bằng cả giọng nói và nhập trực tiếp.

Hình 20. Search

Click chọn icon để phát bài hát.

Hình 21. Đang phát một bài hát

Click chọn icon để chuyển sang bài tiếp theo trong danh sách.

Click chọn icon để chuyển sang bài phía trước trong danh sách.

Click chọn icon để tạm ngưng bài hát.

26
Thanh kéo chỉnh âm lượng tùy ý:

Hình 22. Giao diện Map and music

Click chọn icon để tắt music player.

27
 Hình 23. Giao diện Setting

Khi click vào thì sẽ trở về giao diện hệ thống trang chủ

Khi click vào sẽ hiển thị hộp thoại hỗ trợ tại giao diện cài đặt:

28
 Hình 24. Hỗ trợ tại giao diện cài đặt

Chức năng dark mode khi chọn icon sẽ trở thành . Đây là giao diện khi bật chế độ
dark mode:

Hình 25. Chế độ Dark mode

Click vào icon để bật và icon để tắt các chế độ tương ứng
Khi click vào icon của Wifi hệ thống sẽ hiển thị danh sách
kết nối gợi ý:

29
 Hình 26. Wifi
Khi click vào icon của bluetooth hệ thống sẽ hiển
thị danh sách kết nối gợi ý:

Hình 27. Bluetooth

Bên cạnh đó còn có các ràng buộc khi bật tắt các chế độ đồng thời, khi đang bật chế độ
máy bay, muốn bật đồng thời Wifi thì hệ thống sẽ đưa ra cảnh báo với người dùng:

30
 Hình 28. Cảnh báo

5. KIỂM THỬ PROTOTYPE VỚI NGƯỜI DÙNG

Ở phần kiểm thử Prototype với người dùng, nhóm chúng tôi chọn ngẫu nhiên 5 người
tham gia tiến hành kiểm thử hệ thống. Đối tượng nhóm chúng tôi chọn bao gồm 2 nam, 3
nữ với độ tuổi từ 18 tuổi trở lên và yêu cầu cơ bản khi đánh giá hệ thống thông tin giải trí
này là người tham gia phải sở hữu bằng lái và đủ độ tuổi nói trên.Với phần kiểm thử này
chúng tôi đưa ra hai giả định, mỗi giả định sẽ bao gồm ba câu hỏi và câu trả lời của người
tham gia kiểm thử sẽ được phân tích theo dạng biểu đồ dưới từng câu hỏi được trình bày
như sau:

31
 STT Giả Định Câu hỏi

1. Bạn thấy các icon sử dụng trong hệ

1 Sự thân thiện dễ hiểu của
các icon trong hệ thống
thống có dễ hiểu không?
2. Bạn có thấy các icon được sử dụng
trong hệ thống có phù hợp với chức
năng của nó không?

3. Bạn có thấy các biểu tượng icon sử

dụng trong hệ thống có đơn giản nhất
quán không?

4. Bạn có nghĩ rằng việc kết hợp điều

2 Sự kết hợp giữa điều khiển
bằng giọng nói và điều
khiển chạm màn hình sẽ
mang lại sự thuận lợi và
hiệu quả cao cho người sử
dụng.
khiển bằng giọng nói và điều khiển
chạm vào màn hình giúp cho người
dùng dễ sử dụng hay không?
5. Bạn có nghĩ rằng chúng ta chỉ nên sử
dụng hoàn toàn bằng điều khiển chạm
màn hình hay không?

6. Bạn nghĩ có nên thay thế điều khiển

chạm vào màn hình hoàn toàn thành
điều khiển bằng giọng nói cho hệ
thống hay không?

Bảng 2. Bảng kiểm thử Prototype với người dùng

Trình bày và phân tích phản hồi người dùng:

1. Sự thân thiện dễ hiểu của các Icon trong hệ thống.

Câu hỏi 1: Bạn thấy các Icon được sử dụng trong hệ thống có dễ hiểu không?

32
 Hình 29. Biểu đồ phân tích phản hồi người dùng câu hỏi kiểm thử số 1

Với 80% người dùng đánh giá với câu trả lời “Có” và 20% người dùng đánh giá
với câu trả lời “Không” cho thấy rằng các icon sử dụng trong hệ thống dễ hiểu.

33
 Câu hỏi 2: Bạn có thấy các icon được sử dụng trong hệ thống có phù hợp với chức
năng của nó không?

Hình 30. Biểu đồ phân tích phản hồi người dùng câu hỏi kiểm thử số 2

Với 80% người dùng đánh giá với câu trả lời “Có” và 20% người dùng đánh giá
với câu trả lời “Không” cho thấy rằng các icon được sử dụng trong hệ thống phù hợp với
chức năng của nó.

34
 Câu hỏi 3: Bạn có thấy các biểu tượng icon sử dụng trong hệ thống có đơn giản
nhất quán không?

Hình 31. Biểu đồ phân tích phản hồi người dùng câu hỏi kiểm thử số 3

Với 80% người dùng đánh giá với câu trả lời “Có” và 20% người dùng đánh giá
với câu trả lời “Không” cho thấy rằng các biểu tượng icon sử dụng trong hệ thống là đơn
giản và nhất quán.

=> Như vậy, với các mức đánh giá được phân tích theo từng biểu đồ cho các câu hỏi
như trên, điều này đã cho rằng hệ thống của chúng tôi đã đáp ứng được nhu cầu của
người dùng theo giả định được đưa ra:”Sự thân thiện dễ hiểu của các icon trong hệ
thống.”

2. Sự kết hợp giữa điều khiển bằng giọng nói và điều khiển chạm màn hình sẽ mang
lại sự thuận lợi và hiệu quả cao cho người sử dụng.

35
 Câu hỏi 4: Bạn có nghĩ rằng việc kết hợp điều khiển bằng giọng nói và điều khiển
chạm vào màn hình giúp cho người dùng dễ sử dụng hay không?

Hình 32: Biểu đồ phân tích phản hồi người dùng câu hỏi kiểm thử số 4

Với 100% người dùng đánh giá với câu trả lời “Có” cho thấy rằng việc kết hợp điều
khiển bằng giọng nói và điều khiển chạm vào màn hình giúp cho người dùng dễ sử dụng.

Câu hỏi 5: Bạn có nghĩ rằng chúng ta chỉ nên sử dụng hoàn toàn bằng điều khiển
chạm màn hình hay không?

36
 Hình 33. Biểu đồ phân tích phản hồi người dùng câu hỏi kiểm thử số 5

Với 20% người dùng đánh giá với câu trả lời “Có” và 80% người dùng đánh giá với
câu trả lời “Không” cho thấy rằng không nên chỉ sử dụng hoàn toàn bằng điều khiển
chạm màn hình.

Câu hỏi 6:Bạn nghĩ có nên thay thế điều khiển chạm vào màn hình hoàn toàn
thành điều khiển bằng giọng nói cho hệ thống hay không?

37
 Hình 34. Biểu đồ phân tích phản hồi người dùng câu hỏi kiểm thử số 6

Với 80% người dùng đánh giá với câu trả lời “Có” và 20% người dùng đánh giá với
câu trả lời “Không” cho thấy rằng nên thay thế điều khiển chạm vào màn hình hoàn toàn
thành điều khiển bằng giọng nói cho hệ thống.

=> Như vậy, với các câu trả lời của người dùng được ghi nhận lại qua 3 câu hỏi
trên đã chứng minh được rằng sự kết hợp giữa điều khiển bằng giọng nói và điều khiển
chạm vào màn hình sẽ mang lại sự thuận lợi và hiệu quả cao cho người dùng.

Qua 6 câu hỏi với các mức đánh giá từ các câu trả lời, đã kết luận được rằng hệ
thống của chúng tôi đáp ứng được đáp ứng được nhu cầu của người dùng theo 2 giả định
được đưa ra:”Sự thân thiện dễ hiểu của các icon trong hệ thống” và ”Sự kết hợp giữa
điều khiển bằng giọng nói và điều khiển chạm màn hình sẽ mang lại sự thuận lợi và
hiệu quả cao cho người sử dụng.”

38
6. ĐÁNH GIÁ
Nhóm chúng tôi sử dụng phương pháp “Heuristic của Nielsen để đánh giá khả
năng các chức năng của hệ thống

1. Visibility Of System Status (Hiển thị trạng thái hệ thống): Khi người dùng nhấn vào
nút ON (Power) thì hệ thống từ trạng thái tắt chuyển sang trạng thái chuẩn bị, người dùng
sẽ được truy cập vào màn hình chức năng sau khi nhấn vào màn hình để đánh thức hệ
thống:

Hình 35.Hiển thị trạng thái hệ thống

2. Match between system and the real world (Sự phù hợp giữa hệ thống với thế giới
thực): Những Icon trên nút player trong giao diện music player giống với những nút bấm
của công cụ remote bên ngoài

Hình 36. Sự phù hợp giữa hệ thống với thế giới thực

3. User control and freedom (Quyền điều khiển và quyền tự do sử dụng): Khi
người dùng vào hệ thống định vị, người dùng có thể nghe nhạc và xem định vị. Nếu

39
người dùng chỉ muốn xem định vị không muốn nghe nhạc thì người dùng có thể tắt
(Nút X trên player music) trình nghe nhạc đó:

Hình 37. Quyền điều khiển và quyền tự do sử dụng

4. Consistency and standards (Tính nhất quán và tiêu chuẩn): Trong thiết kế giao
diện, có sự thống nhất về giao diện như tìm kiếm trong định vị và tìm kiếm trong
Music player. Sự thống nhất nằm ở tìm kiếm trong định vị và tìm kiếm trong music
đều nằm ở vị trí trên cùng bên trái và có hỗ trợ tìm kiếm bằng giọng nói:

Hình 38. Tính nhất quán và tiêu chuẩn

5. Error Prevention (Ghi nhận lỗi): Khi hệ thống đang ở chế độ máy bay thì hệ
thống không cho phép người dùng bật chế độ wifi. Nếu người dùng nhấn vào để bật
chế độ wifi thì hệ thống sẽ hiển thị thông báo không được phép:

40
 Hình 39. Ghi nhận lỗi

6. Recognition rather than recall (Sự quen thuộc sẽ dễ hơn nhớ lại): Trong thiết
kế của chúng tôi, những icon này là những icon chuẩn, đơn giản, quen thuộc, cho
nên người dùng nhìn vào dễ dàng nhận ra chức năng tương ứng với icon đó.

Hình 40. Sự quen thuộc sẽ dễ hơn nhớ lại

7. Flexibility and efficiency of use (Tính linh hoạt và hiệu quả sử dụng): Trong
thiết kế chúng tôi luôn sử dụng nút bấm truy cập nhanh giúp người dùng thao tác di
chuyển giữa các trang trở nên nhanh chóng và tiện lợi hơn:

41
 Hình 41. Tính linh hoạt và hiệu quả sử dụng

8. Aesthetic and minimalist Design (Sự thẩm mĩ và tối giản thiết kế): Thiết kế của
chúng tôi có những ưu điểm về mặt thẩm mỹ:

● Về màu sắc: Sử dụng màu đơn giản tương đồng với màu nền.
● Về icon: Sử dụng những icon đơn giản, quen thuộc
● Về giao diện: thanh menu của các chức năng chính luôn hiển thị giúp người
dùng tiện lợi trong việc tương tác

9. Help users recognize, diagnose and recover from error (Giúp người dùng
nhận biết, chẩn đoán và phục hồi sau các lỗi): Ở chế độ máy bay khi người dùng
muốn bật chế độ wifi hệ thống sẽ hiển thị thông báo không được phép, yêu cầu
người dùng tắt đi chế độ máy bay, giúp người dùng dễ nhận ra lỗi:

42
 Hình 42. Giúp người dùng nhận biết, chẩn đoán và phục hồi sau các lỗi

10. Help and Documentation (Trợ giúp và tài liệu): Thiết kế của chúng tôi có chức
năng trợ giúp Q&A, giúp người dùng có thể được giải đáp các thắc mắc một cách
nhanh chóng:

Hình 43. Trợ giúp và tài liệu

43
7. KẾT LUẬN
Sau khi thực hiện đề tài nhóm chúng tôi đạt được kết quả như sau:

- Về lý thuyết: nhóm chúng tôi nắm vững lý thuyết về các nguyên tắc thiết kế
hệ thống tương tác, tâm lý học nhận thức trong tương tác người máy, các
phương pháp tiếp cận thiết kế và lý thuyết thiết kế tương tác, định nghĩa về
mô hình khái niệm và định nghĩa về nguyên mẫu.
- Về ứng dụng: nhóm chúng tôi thiết kế thành công mô hình khái niệm, các
prototype như Low-fidelity prototype và Mid-fidelity prototype, thực hiện
kiểm thử prototype với người dùng và đánh giá prototype của hệ thống
thông tin giải trí trên xe Hestla System của nhóm chúng tôi thiết kế.
- Về hạn chế: nhóm chúng tôi gặp một chút khó khăn trong việc tìm kiếm tài
liệu.
- Hướng phát triển: sẽ tiếp tục thiết kế High-fidelity Prototypes cho hệ thống
thông tin giải trí trên xe Hestla System của nhóm chúng tôi.

TÀI LIỆU THAM KHẢO

[1] Interaction Design: Beyond Human-Computer Interaction, 4th Edition (Jennifer
Preece, Helen Sharp, Yvonne Rogers, 2015)

[2] Designing Interactive Systems: A comprehensive guide to HCI, UX and interaction

design, 3rd Edition (David Benyon, 2014).

[3]https://www.webmd.com/brain/what-are-sensory-memoryexamples#:~:text=Sensory%
20memories%20are%20stored%20for,in%20your%20short

[4] https://www.understood.org/en/articles/working-memory-what-it-is-and-how-it-works

[5] https://www.verywellmind.com/what-is-long-term-memory-2795347

[6] https://usabilitygeek.com

[7] https://medium.com

[8] https://en.wikipedia.org

[9] Prototyping for Designers: Developing the Best Digital and Physical Products
(Kathryn McElroy, 2017)

44
 PHỤ LỤC

Hình 44. Thu thập ý kiến 1

45
Hình 45. Thu thập ý kiến 2

46
Hình 46. Thu thập ý kiến 3

47
48