ĐẠI HỌC QUỐC GIA HÀ NỘI

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ

BÁO CÁO CUỐI KỲ MÔN

THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

Giảng viên hướng dẫn: TS. Ngô Thị Duyên

Sinh viên thực hiện: Nhóm 05

- Nguyễn Cao Bách - 19020218
- Nguyễn Tiến Đạt - 19020243
- Nguyễn Đức Dũng - 19020263
- Lê Cảnh Toàn - 19020458
Lớp học phần: INT3115 2

Hà Nội – 2021
 LỜI CẢM ƠN
Lời đầu tiên, chúng em xin chân thành cảm ơn TS. Ngô Thị Duyên, giảng viên bộ
môn Thiết kế giao diện người dùng, đã tận tình giảng dạy và trang bị cho chúng em
những kiến thức quý báu. Những kiến thức, kinh nghiệm, sự hướng dẫn tận tình và
những góp ý chân thành của cô đã giúp chúng em có được định hướng đúng đắn để hoàn
thành dự án cuối kỳ này.
Mặc dù đã rất cố gắng song với vốn kiến thức và kĩ năng còn có hạn, do vậy không
tránh khỏi những thiếu sót và sai sót, chúng em rất mong nhận được những góp ý và
nhận xét của cô để chúng em có thể hoàn thiện hơn nữa kiến thức và kĩ năng của mình.

2
 MỤC LỤC
LỜI CẢM ƠN ................................................................................................................2

KẾT QUẢ CỦA DỰ ÁN ...............................................................................4

1.1. Các đường link dẫn đến dự án .............................................................................4

1.1.1. Link tạo file trealet ........................................................................................4
1.1.2. Link sản phẩm demo .....................................................................................4
1.1.3. Một số mã trealet được sử dụng để demo .....................................................4
PHÂN TÍCH CHI TIẾT DỰ ÁN .................................................................5

2.1. Tool tạo file ..........................................................................................................5

2.1.1. Cách thức hiển thị thông tin ..........................................................................5
2.1.2. Các kỹ thuật sử dụng trong dự án .................................................................9
2.2. App interactive .....................................................................................................9
2.2.1. Cách thức hiển thị thông tin ..........................................................................9
2.2.2. Các kỹ thuật sử dụng trong dự án ...............................................................11
PHÂN CHIA NHIỆM VỤ TRONG NHÓM.............................................12

3
 KẾT QUẢ CỦA DỰ ÁN
1.1. Các đường link dẫn đến dự án
1.1.1. Link tạo file trealet
https://hcloud.trealet.com/apps_dev/btl/nhom05/interactive/io
1.1.2. Link sản phẩm demo
https://hcloud.trealet.com/apps_dev/btl/nhom05/interactive/?trealet=/albums/Nho
m05/Interactive/demo.trealet
https://hcloud.trealet.com/apps_dev/btl/nhom05/interactive/?trealet=/albums/Nho
m05/Interactive/interactive.trealet
1.1.3. Một số mã ID trealet được sử dụng để demo

tiny8226 tiny8258 tiny8250 tiny8282

4
 PHÂN TÍCH CHI TIẾT DỰ ÁN
2.1. Tool tạo file
2.1.1. Cách thức hiển thị thông tin
Khi người dùng truy cập vào trang tạo kịch bản trealet, chỉ có phần hiển thị thông
tin chính hiện ra và chiếm toàn bộ màn hình. Tại đây, người dùng có thể thấy được nút
tạo file, các trường tên file, tiêu đề và một vài thông tin của các địa điểm đã được tạo.

Hình 2.1. Giao diện mặc định khi lần đầu vào ứng dụng
Khi người dùng chọn thêm địa điểm mới, phần hiển thị nội dung địa điểm sẽ xuất
hiện ở bên phải, phần hiển thị các thông tin chính được thu nhỏ lại một cách cân đối.

Hình 2.2. Giao diện thêm địa điểm mới

Tại đây, ta có thể thấy hai trường tên địa điểm và ID mã QR được đặt trên cùng 1
dòng và được bố trí cân đối hai bên. ID mã QR của ứng dụng là ID được lấy từ trealet
(có thể là mã của các hiện vật/ tranh ảnh/… của địa điểm tham quan và sử dụng trong
app show-off), các mã QR được sử dụng cho app interactive sau này là mã QR của ID
(mã QR có định dạng tiny- + ID).
Trong phần tạo câu hỏi, trường câu hỏi có nền màu đỏ nổi bật, kết hợp với màu chữ
trắng tạo sự tương phản rõ rệt, giúp hiển thị rõ ràng thông tin. Trước các câu trả lời cũng
có các hình vẽ, màu sắc khác nhau làm cho giao diện thêm sinh động, bớt nhàm chán
hơn. Ở góc phải bên trên là nút lưu để lưu địa điểm được tạo hoặc lưu thông tin địa điểm
sau khi chỉnh sửa và nút xóa để xóa địa điểm. Các nút ở cả hai bên đều có cùng màu sắc,
tạo sự thống nhất.

5
 Hình 2.3. Giao diện nhập nội dung chi tiết về địa điểm
Sau khi đã điền đầy đủ các thông tin về địa điểm, người dùng có thể trực tiếp chọn
đáp án đúng bằng cách click chuột vào đáp án. Đáp án được lựa chọn sẽ được tô viền
màu xanh lá cây (màu phổ biến để hiển thị các lựa chọn đúng) giúp cho người dùng dễ
nhận biết. Nếu người dùng chưa nhập đủ các trường mà đã bấm lưu, một thông báo báo
lỗi được hiển thị ở góc trên bên phải, liệt kê các trường mà người dùng nhập thiếu.
Thông báo được thiết kế nhỏ gọn, với màu vàng cam chủ đạo, thu hút được sự chú ý của
người dùng nhưng cũng không chiếm nhiều diện tích, ảnh hưởng đến các hoạt động
khác. Người dùng có thể tự đóng thông báo với nút X ở bên phải, hoặc đợi 5 giây (đủ
để người dùng đọc lỗi) để thông báo tự tắt.

Hình 2.4. Giao diện khi có thông báo lỗi xảy ra

Sau khi đã tạo địa điểm mới xong và lưu, phần tạo địa điểm sẽ tự động được ẩn đi,
chỉ còn lại phần hiển thị các thông tin chính. Tại đây, người dùng có thể chọn địa điểm
mình đã tạo để chỉnh sửa lại hoặc xóa đi. Khi người dùng di chuột qua các địa điểm,
background của địa điểm đó cũng được đổi màu, giúp người dùng xác định rõ mình
muốn chọn địa điểm nào.

6
 Hình 2.5. Giao diện chính khi các địa điểm đã được tạo
Cửa sổ hiển thị thông tin địa điểm lại hiện ra, người dùng có thể chọn lại đáp án
đúng và thực hiện lưu hoặc xóa.

Hình 2.6. Giao diện chỉnh sửa nội dung địa điểm
Người dùng cũng cần nhập đủ các trường và tạo ít nhất 1 địa điểm để có thể tạo file,
nếu không đủ cũng sẽ hiện thông báo lỗi giống như khi tạo địa điểm.

Hình 2.7. Lỗi tạo file thiếu tên file

Cấu trúc file trealet được tạo ra:
{
"trealet": {
"exec": "interactive",
"title": "Khám phá Bảo tàng lịch sử Việt Nam",
"destinations": [
{
"objectid": 8258,
"name": "Phòng trưng bày số 1",

7
 "question": "Đâu là cơ quan ngôn luận của Đông Dương Cộng sản
đảng?",
"option1": "Báo Thanh niên",
"option2": "Báo Đỏ",
"option3": "Báo Giải phóng",
"option4": "Báo Búa liềm",
"key": "option4"
},
{
"objectid": 8250,
"name": "Phòng trưng bày số 2",
"question": "'Nước Việt Nam có quyền hưởng tự do và độc lập, và sự
thật đã trở thành một nước tự do, độc lập' là nội dung của văn bản nào?",
"option1": "Lời kêu gọi toàn quốc kháng chiến",
"option2": "Kháng chiến nhất định thắng lợi",
"option3": "Tuyên ngôn độc lập",
"option4": "Đường Kách mệnh",
"key": "option3"
},
{
"objectid": 8226,
"name": "Phòng trưng bày số 2",
"question": "Ngày khai sinh ra nước Cộng hòa xã hội chủ nghĩa Việt
Nam là?",
"option1": "30/4/1975",
"option2": "15/9/1945",
"option3": "2/9/1945",
"option4": "15/8/1945",
"key": "option3"
},
{
"objectid": 8282,
"name": "Phòng trưng bày số 3",
"question": "Khi nào Việt Nam có gạo để xuất khẩu?",
"option1": "Năm 1989",
"option2": "Năm 1990",
"option3": "Năm 1991",
"option4": "Năm 1992",
"key": "option1"
}
]
}
}

Hình 2.8. Cấu trúc của file trealet

8
2.1.2. Các kỹ thuật sử dụng trong dự án
Với tiêu chí xây dựng ứng dụng tạo file trealet hết sức đơn giản, dễ sử dụng, nhóm
quyết định chỉ sử dụng HTML, CSS và Javascript thuần thay vì sử dụng các framework
có thể hiện đại hơn, nhưng cũng mất thời gian cài đặt, nặng nề hơn. Cụ thể, HTML và
CSS giúp cho việc tạo và định dạng các đối tượng trên form nhập. Javascript được sử
dụng cho các hoạt động xử lý, bao gồm nhận các dữ liệu người dùng nhập vào từ form
nhập và kiểm tra chúng (chỉ nhận ký tự số cho trường ID mã QR, các trường khác không
được trống), thực hiện các thao tác như hiển thị các thông báo lỗi, đóng/mở phần hiển
thị thông tin địa điểm, lựa chọn địa điểm, hiển thị danh sách địa điểm… và sau đó tạo
một đối tượng với các thuộc tính là các nhãn và giá trị là các dữ liệu được nhập vào,
chuyển đối tượng đó thành format json và đưa vào file, cuối cùng là tải file về.
2.2. App interactive
2.2.1. Cách thức hiển thị thông tin

Khi người dùng vào ứng dụng, ứng dụng sẽ thực hiện truy vấn đến file trealet trong
đường link. Ứng dụng đọc nội dung file trealet, đặt trường “title” của file trealet làm
tiêu đề (title) cho trang web cũng như đọc danh sách các địa điểm quét mã (destinations).
Ứng dụng sẽ hiển thị ra màn hình số ô câu hỏi tương ứng với số lượng điểm đến được
lưu trong mảng “destinations”.

Ở đầu trang có một thanh tiến độ, lưu lại số lượng câu hỏi mà người dùng đã trả lời
đúng, từ đó giúp người dùng theo dõi chính xác tiến độ tham quan của mình. Ngoài ra,
ta còn có thêm một nút quét mã QR ở phía trên bên phải của trang. Khi người dùng ấn
vào nút quét mã, cửa sổ quét mã QR hiện ra sau khi được người dùng cấp quyền truy
cập tới camera của thiết bị. Để sử dụng, người dùng đưa camera tới mã QR cần quét.
Sau khi quét thành công, cửa sổ sẽ tự động đóng lại và đưa người dùng về trang chủ.
Bên cạnh đó người dùng cũng có thể ấn vào nút tắt (X) để đóng cửa sổ quét mã QR nếu
người dùng không muốn tiếp tục quét mã.

Mỗi trang trên màn hình của ứng dụng hiển thị tối đa 16 ô câu hỏi và được hiển thị
dưới nhiều trang, người dùng có thể chuyển qua lại giữa các trang bằng cách ấn vào 2
nút mũi tên trái/phải ở cuối màn hình. Mỗi ô câu hỏi được render với class mặc định là
“lock”, biểu thị câu hỏi đang bị khóa và hiển thị với màu xám, cùng với đó là hai thuộc
tính “data-label” và “data-value” lưu số thứ tự của ô câu hỏi và lưu mã QR của câu hỏi
tương ứng. Khi người dùng quét mã QR, ứng dụng sẽ sử dụng hai giá trị này để tiến
hành mở khóa ô câu hỏi. Ban đầu, khi người dùng chưa mở khóa câu hỏi bằng cách quét
mã QR, câu hỏi sẽ ở trạng thái khóa và nếu người dùng ấn vào ô câu hỏi, một thông báo

9
hiển thị chỉ dẫn cho người dùng sẽ hiện lên (trong khoảng 5 giây), chỉ dẫn về địa điểm
người dùng có thể tới để quét mã QR mở khóa câu hỏi. Sau khi ô câu hỏi được mở khóa,
một class mới được gán cho ô câu hỏi là “unlock”, khi này ô câu hỏi sẽ được ở khóa và
hiển thị với màu đỏ cam nhưng vẫn hiển thị hình ô khóa.

Với các ô câu hỏi đã được mở khóa, người dùng sẽ có thể ấn vào các ô câu hỏi và
khi này, một cửa sổ câu hỏi sẽ mở ra. Ứng dụng dựa vào các thuộc tính của ô câu hỏi để
xác định câu hỏi và các đáp án chính xác cho câu hỏi và hiển thị ra màn hình cho người
sử dụng. Người sử dụng tiến hành chọn 1 đáp án mà người dùng cho là chính xác dựa
trên các thông tin xuyên suốt quá trình tham quan địa điểm của người dùng. Nếu người
dùng trả lời đúng, ô câu trả lời hiển thị màu xanh với hiệu ứng pháo giấy và sau khoảng
3 giây sẽ đưa người dùng về lại trang chủ, ô câu hỏi tương ứng với câu hỏi người dùng
vừa trả lời chuyển sang biểu tượng chiếc cúp, bên cạnh đó thanh tiến độ cũng được cập
nhật lại. Trong trường hợp người dùng trả lời sai, ô trả lời sẽ có màu đỏ, và sau 3 giây,
người dùng sẽ được đưa quay trở về trang chủ. Người dùng hoàn toàn có thể ấn chọn lại
ô câu hỏi và trả lời lại sau khi xem xét lại các thông tin ở địa điểm tham quan.

Dưới đây là một số hình ảnh demo sử dụng ứng dụng trên thiết bị Samsung Galaxy
A30:

Hình 2.9. Giao diện mặc định của ứng dụng

10
 Hình 2.10. Giao diện thông báo và giao diện câu hỏi
2.2.2. Các kỹ thuật sử dụng trong dự án
Ứng dụng interactive này của dự án không sử dụng quá nhiều các công nghệ phức
tạp, trong đó ứng dụng chủ yếu là PHP để render giao diện và xử lý tác vụ với server,
đồng thời sử dụng Javascript (Jquery) để xử lý các thao tác của người dùng. Bên cạnh
đó nhóm cũng sử dụng CSS để thiết kế giao diện của hệ thống. Ngoài ra, nhóm còn sử
dụng thêm hai thư viện Javascript bên ngoài khác để xử lý một vài tác vụ. Thư viện đầu
tiên là thư viện tạo hiệu ứng hoa giấy khi người dùng ấn vào câu trả lời đúng được tham
khảo từ thư viện confetti-js (https://github.com/Agezao/confetti-js). Một tác vụ vô cùng
quan trọng của ứng dụng này là tác vụ quét mã QR. Để thực hiện tác vụ này, nhóm có
tham khảo mã nguồn từ hai dự án về thư viện quét mã QR code của Zxing và Lazar
Laszlo (https://github.com/sitepoint-editors/jsqrcode / https://github.com/zxing/zxing).
Theo như thông báo từ phía nhà phát triển thư viện quét mã QR, hiện tại với các
thiết bị iOS phiên bản < 14.3, việc quét mã QR có thể sẽ gặp một vài lỗi về quyền truy
cập camera khi quét nếu không mở ứng dụng trực tiếp trên Safari mà sử dụng một trình
duyệt khác, song do điều kiện không cho phép nên nhóm hiện tại chưa thể test kỹ lưỡng
về lỗi này, do vậy để đảm bảo trải nghiệm sử dụng tốt nhất, cô có thể sử dụng các thiết
bị Android/ mở ứng dụng trực tiếp trên Safari để test tính năng quét mã QR của ứng
dụng. Mong cô thông cảm cho sự thiếu sót này.

11
 PHÂN CHIA NHIỆM VỤ TRONG NHÓM

MSV Họ tên Nhiệm vụ Hoàn thành

19020218 Nguyễn Cao Bách Thiết kế giao diện tạo file và xử

lý hoạt động tạo file, viết báo 26.66%
cáo
19020243 Nguyễn Tiến Đạt Thiết kế giao diện interactive
và xử lý tương tác và truy vấn 26.66%
dữ liệu, viết báo cáo
19020263 Nguyễn Đức Dũng Thiết kế giao diện interactive
26.66%
và giao diện tạo file
19020458 Lê Cảnh Toàn Lên ý tưởng giao diện, tìm hiểu
20%
công nghệ

12