Nghiên cứu phương pháp Usability Testing và áp dụng vào thiết kế cải thiện giao diện ứng dụng xem phim trực tuyến MyTV dành cho người dùng cuối

Tên đồ án/khóa luận tốt nghiệp: Nghiên cứu phương pháp Usability Testing và áp dụng vào thiết kế cải thiện giao diện ứng dụng xem phim trực tuyến MyTV dành cho người dùng cuối.. Đây khôn

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIÊN THÔNG

KHOA ĐA PHƯƠNG TIỆN

Dé tai:

NGHIEN CUU PHUONG PHAP USABILITY TESTING VA

AP DUNG VAO THIET KE CAI THIEN GIAO DIEN UNG

DUNG

XEM PHIM TRỰC TUYẾN MYTV DÀNH CHO NGƯỜI DUNG CUOI

Giang viên hướng dẫn : ThS Nguyễn Thị Tuyết Mai

Sinh viên thực hiện : Bùi Thị Hương

Mã sinh viên : BI9DCPT116

Lớp : DI9TKDPTO1

Hệ : Đại học chính quy

Đồ án tốt nghiệp Đại học ĐÈ CƯƠNG

HỌC VIEN CONG NGHE BUU CONG HOA XA HOI CHU NGHIA VIET NAM

CHÍNH VIỄN THONG

KHOA ĐA PHƯƠNG TIỆN Độc lập — Tự do = Hạnh phúc

DE TAI DO ÁN TOT NGHIỆP ĐẠI HỌC

Họ và tên sinh viên: Bùi Thị Hương

Lớp: DI9TKDPT01 Khoá: 2019 - 2023

Ngành đào tạo: Công nghệ đa phương tiện

Hệ đào tạo: Đại học chính quy

1 Tên đồ án/khóa luận tốt nghiệp:

Nghiên cứu phương pháp Usability Testing và áp dụng vào thiết kế cải thiện giao

diện ứng dụng xem phim trực tuyến MyTV dành cho người dùng cuối

2 Lý do chọn đề tài:

Trong thời đại công nghệ hiện nay, sản phẩm kỹ thuật số đã và đang trở thànhmột phan không thé thiếu trong cuộc sống hàng ngày của chúng ta Từ những ứngdụng di động đến những trang website, từ các phần mềm đến các giao diện ngườidùng, chúng ta liên tục tương tác với các sản phẩm này Vậy mục tiêu cuối cùng củanhững sản phẩm này là gì? Là đáp ứng nhu cầu, sự mong đợi của người dùng và manglại trải nghiệm tốt nhất có thê Bởi vậy nếu người dùng không đạt được mục tiêu mà

họ mong muốn một cách tốt nhất, thỏa đáng nhất thì lúc đó chúng ta đã mang đến mộttrải nghiệm tôi Một nhà thiết kế giao diện người dùng cũng đã từng chia sẻ rằng:

“Thiết kế trải nghiệm tot là việc tạo ra sự kết nối tốt giữa người dùng và ứng dung,đáp ứng nhu câu của họ một cách tốt nhất ”- Alan Cooper

Người dùng có rất nhiều lựa chọn khác đề đạt được mục tiêu của họ Do vậy, chỉ

cần không đạt được mục tiêu trên sản phẩm của mình, có thể sẽ mất người dùng vào

tay đối thủ cạnh tranh mãi mãi Theo nghiên cứu về hành vi người dùng của Huff

Industrial Marketing, KoMarketing và BuyerZone vào năm 2015, họ đã thống kê được

kết quả như sau: 46% người dùng rời khỏi trang web vì không biết công ty làm gì

(thông điệp không hiệu quả); 44% là do thiếu thông tin liên hệ; 37% là do thiết kế

hoặc điều hướng kém [1]

Tại Việt Nam trong những năm trở lại đây, nhu cầu sử dụng các loại hình ứngdụng giải trí trực tuyến ngày một tăng cao Đặc biệt, từ đầu năm 2020, do ảnh hưởng

của đại dịch Covid-19 vì vậy mà việc gặp gỡ, tụ tập, ăn uống và vui chơi tại các tụ

điểm giải trí bị hạn chế tối đa Do đó lựa chọn giải trí của người tiêu dùng tại thời điểmđây, chỉ còn xoay quanh không gian gia đình cùng với sự phụ thuộc chặt chẽ vàoInternet, mạng xã hội, các chương trình truyền hình, phim ảnh Trong đó, những

Bùi Thị Hương 1

Đồ án tốt nghiệp Đại học ĐÈ CƯƠNG

loại hình giải trí trực tuyến trên thì phim điện ảnh, phim truyền hình dài tập có số

lượng người xem cao nhất Theo báo cáo “Nghiên cứu dịch vụ truyền hình trực tuyến

tại thị trường Việt Nam" của Q&Me vào tháng 2.2020, số người sử dụng các nên tảng

dich vụ phim online tại nhà riêng lên tới 97% [2] Cũng bởi, tại thời điểm đó khi đại

dịch Covid-19 bùng phát, các rạp chiếu phim phải đóng cửa Do vậy, các nhà sản xuất

và nhà phát hành đôi mới phương thức chiếu phim bằng cách khai thác trên những nền

tảng sé.

Tính đến thang 1 năm 2022, dân số Việt Nam đạt 98,56 triệu người, với ty lệ dân

số thành thị là 38,7% Khoảng 72,1 triệu người sử dụng Internet (tương đương với

73,2% tổng dân số) trên các nền tảng và ứng dụng khác nhau, với thời lượng trung

bình là 6 giờ 47 phút [3].

Theo thống kê của VNETWORK, người dùng mạng ở Việt Nam dành thời gian

để xem TV streaming và sử dụng các nên tảng mạng xã hội, lần lượt là 2 giờ 40 phút

và 2 giờ 21 phút [4] Từ số liệu trên, có thé thấy nhu cầu giải trí qua các nền tang trực

tuyến là rất cao và chiếm phần lớn thời lượng truy cập Internet của người Việt Nam

hiện nay.

Theo số liệu từ SocialHeat — nền tang Social Listening của YouNet Media, từngày 1/1 đến ngày 15/4/2023, theo ghi nhận từ hệ thống SocialHeat, có đến 3.108.442

thảo luận xoay quanh thị trường VOD, tăng hơn 23,17% so với 2022, hơn 50% so với

năm 2021 Trong đó, top 10 thương hiệu chiếm 62,38% thị phần với 1.903.759 thảoluận Đáng chú ý, Top 10 không chỉ thống trị bởi những cái tên quốc tế có tầm ảnh

hướng toàn cầu như Netflix, Apple TV+, iQIYI - thuộc tập đoàn Baidu (Trung Quốc),

mà còn có những thương hiệu quốc nội đình đám không kém như FPT Play — Công ty

cổ phần Viễn thông FPT (FPT Telecom), VTV Giải Trí — thuộc Đài Truyền hình ViệtNam, Galaxy Play — thuộc hãng phim Thiên Ngân, VieON - thuộc Dat Việt VAC, hay

My K+ — Công ty TNHH Truyền hình số vệ tinh Việt Nam (VSTV) sở hữu, TV360 —

của nhà mạng Viettel, MyTV - thuộc Tập đoàn Bưu chính Viễn thông Việt Nam

(VNPT) [5] Báo cáo cũng chỉ ra rằng, 3 thương hiệu lớn đang chiếm lĩnh thị trường

Việt Nam cao nhất là Netflix, FPT Play và VTV Giải Trí đóng góp 71,42% thị phần

với 1.359.581 thảo luận của người dùng Thương hiệu VieOn đóng góp 14,2% thị

phần thảo luận Thương hiệu Galaxy Play đóng góp 3,4% thị trường thảo luận.Thương hiệu My K+ đóng góp 3,1% thị trường thảo luận Thương hiệu Tv360 và iQTYI đóng góp 2,9% thị trường thảo luận Thương hiệu Apple TV+ đóng góp 1,1%

thị trường thảo luận Cuối cùng là thương hiệu MyTV đóng góp 1% thị trường thảoluận.

Vậy lý do gì dẫn đến việc ứng dụng xem phim trực tuyến MyTV chưa được

nhiều người biết đến và sử dụng? Phải chăng ứng dụng chưa đáp ứng tốt khả năng sử

dụng của sản phâm Với cương vị là thành viên của MyTV, nhận thấy được vấn đề

này, tác giả quyết định lựa chọn phương pháp Usability Testing dé tiến hành nghiên

Bùi Thị Hương 1

Đồ án tốt nghiệp Đại học ĐÈ CƯƠNG

cứu

Bài Thị Hương i

Đồ án tốt nghiệp Đại học ĐÈ CƯƠNG

khả năng sử dụng của app MyTV Đây không chỉ là sản phẩm nghiên cứu dành cho

công ty, mà cũng là công trình nghiên tác giả phục vụ vào đồ án tốt nghiệp, với đề tài:

“Nghiên cứu phương pháp Usability Testing và áp dụng vào cải thiện giao diện ứng

dụng xem phim trực tuyến MyTV dành cho người dùng cuối” Sử dụng kiến thức về

Usability testing dé tiến hành kiểm tra khả năng sử của sản phẩm, từ đó đưa ra giảipháp giúp cải thiện giao diện ứng dụng xem phim trực tuyến MyTV trở lên tốt hơn vàthu hút nhiều người dùng hơn

3 Nội dung chính của đồ ánCHUONG 1: TONG QUAN VE UNG DUNG DI DONG, THIET KE GIAO DIỆNNGUOI DUNG VA PHUONG PHAP USABILITY TESTING

1.1 Tổng quan về ứng dung di động

1.1.1 Khai nệm ứng dung di động 1.1.2 Phân loại ứng dụng di động

1.2 Tổng quan về thiết kế giao diện người dùng trên ứng dụng di động

1.2.1 Khai niệm thiết kế giao điện người dùng1.2.2 Quy trình thiết kế giao diện người dùng trên ứng dụng di động

13 Tổng quan về phương pháp Usability Testing

1.3.1 Khai niệm Usability và các yếu tố đảm bao khả năng sử dụng1.3.2 Khai niệm Usability Testing và các yếu tố của Usability Testing1.3.3 Các phương pháp tiễn hành Usability Testing

1.3.4 _ Quy trình tiến hành thực hiện Usability Testing

1.4 Vai trò và nhu cầu áp dụng của Usability Testing

Tiểu kết chương 1

CHƯƠNG 2: ÁP DỤNG PHƯƠNG PHÁP USABILITY TESTING VÀO

NGHIÊN CỨU CẢI THIỆN GIAO DIỆN ỨNG DỤNG XEM PHIM TRỰC

TUYẾN MYTV DÀNH CHO NGƯỜI DUNG CUOI

2.1 Tổng quan về dự án

2.1.1 Giới thiệu ứng dụng MyTV

2.1.2 Kế hoạch cải thiện ứng dụng MyTV Quy III -Quý IV năm 2023

2.2 Áp dụng phương pháp Usability Testing vào kiểm tra khả năng sử

dụng với người dùng trên ứng dụng MyTV

2.2.1 Nghiên cứu thứ cấp2.2.2 | Xây dựng câu hỏi nghiên cứu

2.2.3 Lập kế hoạch nghiên cứu

Bùi Thị Hương 1

Đồ án tốt nghiệp Đại học ĐÈ CƯƠNG

2.2.4 _ Thực hiện Usability Testing với người dùng trên ứng dụng MyTV 2.2.5 Phan tích dir liệu Usability Testing

2.3 Dé xuất giải pháp cải thiện ứng dụng MyTV

2.3.1 _ Kiến trúc thông tin ứng dụng

2.3.2 Luồng người dùng

2.3.3 Thiết kế wireframe

Tiểu kết chương 2

CHƯƠNG 3: THIẾT KÉ CẢI THIỆN GIAO DIỆN ỨNG DỤNG XEM PHIM

TRỰC TUYẾN MYTV DÀNH CHO NGƯỜI DUNG CUOI

3.1 Moodboard

3.2 Thiết kế Style guide

3.3 Thiết kế lại bộ Tag và quy chuẩn

3.4 Cac giao diện thiết kế

3.5 Hướng dẫn sử dụng một số tính năng cho giao diện cải thiện

Tiểu kết chương 3

4 Cơ sở dữ liệu ban đầu:

[1] Morten Hertzum (2020) Usability Testing: A Practitioner's Guide to

Evaluating the User Experience Morgan&Claypool.

[2] J.M Christian Bastien (2010) Usability testing: a review of some methodological and technical aspects of the method Elsevier.

[3] Đỗ Thùy Linh và Khúc Cam Huyén (2022) UX Research

[4] ThS.Bui Thi Thu Huế (2019) Thiết kế tương tac da phương tiện Học viện Công

nghệ Bưu chính Viên thông, Hà Nội.

5 Ngày giao đề tài: / /2023

6 Ngày nộp quyến: / /2023

GIANG VIÊN HUONG DAN SINH VIEN THUC HIEN

(Ký, ghi rõ họ tên) (Ký, ghi rõ họ tên)

Hương

Bùi Thị HươngTRƯỞNG KHOA

(Ky, ghi rõ họ tên)

Bùi Thị Hương 1

Đồ án tốt nghiệp Đại học ĐÈ CƯƠNG

LỜI CAM ĐOAN

Tác giả xin cam đoan rang Đồ án tốt nghiệp đại học “Nghiên cứu phương phápUsability Testing và áp dụng vào cải thiện giao diện ứng dụng xem phim trực tuyến

MyTV dành cho người dùng cuối” là công trình nghiên cứu của bản thân mình

Những tài liệu tham khảo đã được đề cập và được liệt kê chi tiết trong phần tài liệu

tham khảo, bao gồm các nguồn thông tin đã được sử dụng trong quá trình nghiên cứu

đều được đảm bảo tính trung thực, không có sự sao chép hay đạo nhái

Nếu như sai phạm, tác giả xin chịu hoàn toàn trách nhiệm và chịu tất cả các kỷ

luật của bộ môn cũng như học viện đề ra

Bùi Thị Hương

Đồ án tốt nghiệp Đại học LỜI CẢM ƠN

LỜI CẢM ƠN

Lời đầu tiên, tác giả xin chân thành gửi lời cảm ơn sâu sắc nhất tới Khoa Da

phương tiện - Học viện Công nghệ Bưu chính Viễn thông đã trang bị cho tác giả

những kiến thức, kỹ năng quý báu giúp tác giả có thé hoàn thiện sản pham Đồ án tốtnghiệp đại học Những kiến thức này không chỉ giúp tác giả hoàn thành đồ án tốtnghiệp mà còn là hành trang kiến thức cho tác giả sau khi ra trường và làm việc tại cáccông ty.

Đặc biệt, xin bày tỏ lòng biết ơn tới Ths Nguyễn Thị Tuyết Mai, người đã tận

tình hướng dẫn, giúp đỡ tác giả trong suốt quá trình thực hiện Đồ án tốt nghiệp đại

học Lời nhận xét và góp ý quý báu từ cô đã giúp tác giả tìm được hướng đi cho đề tài,

đồng thời cải thiện những hạn chế nhằm đạt được thành quả tốt nhất

Do điều kiện thời gian cũng như hạn chế về mặt kinh nghiệm, sản phẩm Đồ ántốt nghiệp không thê tránh khỏi những sai sót Tác giả rất mong nhận được sự chỉ bảo,đóng góp ý kiến của thầy cô dé tác giả có điều kiện bổ sung, nâng cao năng lực, phục

vụ tốt hơn cho công việc sau này

Lời cuối cùng, tác giả xin kính chúc cô sức khỏe, thành công và hạnh phúc

Xin chân thành cảm ơn!

Hà Nội, thang, năm 2023

Sinh viên thực hiện

Bùi Thị Hương

Bùi Thị Hương ii

DANH MỤC HÌNH ẢNH - 2-2219 E12 121121121121121121121121121 1111 1Ectxerrreg viDANH MỤC CÁC BẢNG - - S2 c2 1E 211211211211211211211211211111111 E111 tre viiPHAN MỞ ĐẦU - 5-50: 222 22221 22211222112211122111211221122112 re 1

1.Lý do chọn đề tài 2-2-5 Se SE 121117171 11111111 1111111111111 na 1

2 Tình hình nghiên CứỨu - - - - +2 1311321135111 115115 111 111111 TT kg kg kn 2

2.1.Tình hình nghiên cứu trên thế giới - 2-2 ¿+2++2x2x2z+zEzxezxcxez 22.2 Tình hình nghiên cứu tại Việt NÑam nhe, 3 3.Mục đích và nhiệm vụ nghiên cứỨu - - - ScS* 2 t* kg key 4

3.1.Mục đích nghiên cứu - - - ¿c2 2133211121 11551 1111111811111 8811 111kg 4 3.2 Nhiệm vụ nghiên cứu - ¿<2 S22 1321 1121158111821 1821 1281118111 821 xe 4

4.Đối tượng và phạm vi nghiên cứu ¿2 2 seSE9EE+EeEEeEeEeEEEEEErErrrrkrkrkes 4

4.1 Đối tượng nghiên cứu - ¿s52 E2EEEEE121 1121212111111 re, 4

4.2.Phạm Vi nghiên cứu - - - + 22 3213321132111 351 1591118 1111811111811 E81 re 4 5.Phương pháp nghiên cỨu - - c1 1122111213151 1111 1111511111811 811 ng kg y 4

6.Ý nghĩa lý luận và giá trị thực tiễn của đề tài - 2-5 Scserrererrree 5

7.Cấu trúc để tài -5s: 22x22 2221122211222 5

CHUONG 1: TONG QUAN VE UNG DUNG DI ĐỘNG, THIET KE GIAO DIEN

NGƯỜI DUNG VA PHƯƠNG PHAP USABILITY TESTING - 6

1.1 Tông quan về ứng dung di động - - G2 11222 13 1xx reerkrree 6

1.1.1 Khái niệm ứng dụng di động - - - - - S212 S2 ve rre 6 1.1.2 Phân loại ứng dung di động ee - 2 S23 1* S23 tk rrke 61.2 Tổng quan về thiết kế giao diện người dùng trên ứng dụng di động 16

1.2.1 Khái niệm thiết kế giao diện người dùng ©2¿5cccccscc2 161.2.2 Quy trình thiết kế giao diện người dùng trên ứng dung di động 171.3 Tổng quan về phương pháp Usability 'Testing - -‹cccccScS<<++ 20

1.3.1 Khái niệm Usability và các yếu tố dam bảo khả năng sử dụng 201.3.2 Khái niệm Usability Testing và các yếu tố của Usability Testing 231.3.3 Các phương pháp tiến hành Usability Tesfing - 5-52 24

Bùi Thị Hương 1H

Đồ án tốt nghiệp Đại học MỤC LỤC

1.3.4 Quy trình tiến hành thực hiện Usability Testing 26

1.4 Vai trò và nhu cầu áp dụng của Usability Testing s5: 44

Tiểu kết chương - 2S S9SEEEEEEEE2EEE121121112111111211111111 11111111011 46

CHƯƠNG 2: ÁP DỤNG PHƯƠNG PHÁP USABILITY TESTING VÀO

NGHIÊN CỨU CẢI THIỆN GIAO DIỆN ỨNG DỤNG XEM PHIM TRỰCTUYẾN MYTV DÀNH CHO NGƯỜI DUNG CUỐÓI . 5:55255+sc5+2 47

2.1 Tông quan về dự án - - c2 3 321112111111181 111 1111811111881 1188211 key 47

2.1.1 Giới thiệu ứng dụng MyTTV c1 1S v12 1S H1 HH như 47

2.1.2 Kế hoạch cải thiện ứng dụng MyTV Quý III -Quý IV năm 2023 48

2.2 Áp dụng phương pháp Usability Testing vào kiểm tra khả năng sử dụng

với người dùng trên ứng dụng MyTV nen ngư 48 2.2.1 Nghiên cứu thứ cầp - - E22 2121112112 111111182118 111811 8x cày 48 2.2.2 Xây dựng câu hỏi nghiên cứu - ¿5 21113322 2E Exssserrreses 79

2.2.3 Lap kế hoạch nghiên cứu - 2-2 2 2+E2E2EeEE2EEEEEEEEEErEerkrkrrees 80

2.2.4 Thực hiện Usability Testing với người dùng trên ứng dụng MyTV 87 2.2.5 Phân tích dữ liệu Usability Tesfing - - 52c cSccssscreeeresee 1022.3 Đề xuất giải pháp cải thiện ứng dụng MyTV -5c-ccccsccrrseree 107

2.3.1 Kiến trúc thông tin ứng dụng - 2 s+Sz+ct+E2EzEzEzrerrerree 1072.3.2 Luồng người dùng -2-©52 5s S232 2212211221221 21121122121 crk 108

2.3.3 Thiết kế wireframe :- 22+ 22t t2 ttEE.Etrrrrrrrrrrrei 110

Tiểu kết chương 2 - 22 2 s2 2EE2EEEEE2E1221211211271711211221 112112121 xe 116

CHƯƠNG 3: THIẾT KE CẢI THIEN GIAO DIEN UNG DỤNG XEM PHIM

TRUC TUYEN MYTV DANH CHO NGƯƠI DUNG CUÔOI - 117

3.1 Moodboar cece ceseceseecsseceeceseessseceseeseesseessaeseneeeneessaeeeaeees 1173.2 Thiết kế Style guide c.ccccccccccccccscssssssessssssesssssusssessscsssssessessuesseseeeseesueaes 1183.3 Thiết kế lại bộ Tag và quy chuẩn ¿+ 2S EExEeEerrrkrkerrex 1193.4 Các giao diện thiết kế - 2 2s 21121717171712111111211 111 re 1203.5 Hướng dẫn sử dung một số tinh năng cho giao diện cải thiện 130

Tiểu kết chương 3 - - 2-52 S1 SE EE12EE212111111211111111121111 1110111 xe 133KẾT LUẬN - - 5-52 S2 1 EEE12121211212112 1212112111121 11121211 rrey 134

1 Kết quả đạt được -:- St TT EEE211211211211211211111 21111111 rrre 134

2 Hạn chế của đề tài c2 2112112112112 11111111 11 tr rưeg 134

3 Hướng phát triển của đề tài 2-52 S SE E2 2121112121111 E111 1e 134

TÀI LIEU THAM KHẢO 2-52 522S22E22E12E12E1211251212111171 1111 135

Bùi Thị Hương 1H

Đồ án tốt nghiệp Đại học DANH MỤC KÝ HIỆU VA VIET TAT

DANH MỤC KÝ HIỆU VÀ CHU VIET TAT

API Giao diện lập trình ứng dụng

B2C Hoạt động giao dịch mua bán giữa doanh nghiệp và người

Thang đo kha năng sử dụng hệ thống

Kiêm tra khả năng sử dụng với người dùng

Những video được các nhà cung cấp đăng sẵn trên ứngdụng mà không phải đăng theo lịch

Bùi Thị Hương IV

Đồ án tốt nghiệp Đại học DANH MỤC HÌNH ẢNH

DANH MỤC HÌNH ANH

Hình 1-1: Bốn loại kỹ thuật phát triển ứng dụng 2 2 2 +E2Et£Et£EeEEerxererrrrs 6Hình 1-2: Các ứng dụng Native ÄpD - HH ng ng ng kết 7Hình 1-3: Giao điện các Web App trên các thiết bị -2- 2 s2cxccxcEcEeEzrxerrrrees §Hình 1-4: Hybrid App trên các nền tảng - 2 2 s+SE+EE+EE+EE2EE2E22E22E2E2121222E 2e, 9

Hình 1-5: Hình anh minh hoa Progressive Web App - c1 s+cssssrrrses 11

Hình 1-6: Ví du về các ứng dung Utility - essescssesesessestssesessseseseesseeeeees 13Hình 1-7: Ví dụ về các ứng dụng Location - - 2-52 SE 2E‡EE£E£EEEEEEEEEEerrkrkrkee 14Hình 1-8: Ví dụ về ứng dụng InformatfiVe - 2-52 +Sk+ESEEEE2EEEEEEEEEEEEEEErErrrrees 14

Hình 1-9: Vi dụ ứng dụng ProduCfIVIẨV c1 2.11 3S v1 1 9 192118211811 811 1 ren 15 Hình 1-10: Vi dụ giao diện ứng dụng Ïmm€rSIV€ c2 3221132 *+vEsseeerrerres 16Hình 1-11: Mô hình phát triển ứng dung Waterfall - 2-52 2 +S2+E£E+£zEezzzxzxez 16Hình 1-12: Mô hình phát triển ứng dụng Scrum 2- 2 2 s2 +S++E+£zEzEerxzxerez 17Hình 1-13: Quy trình thiết kế giao điện người dùng - - 2s +x+xe£zzxzzzxzxez 17Hình 1-14: Ví dụ về Moodboard dành cho ứng dụng di động - 25+ 2552 18Hình 1-15: Ví dụ về Design System 2- 2 +22 2 2212212112212211211211 21221 xe 18Hình 1-16: Ví dụ về một sản phẩm thiết kế giao diện 2 2 x+s+£z+E+zzxzcez 20Hình 1-17: Các yếu tô trong User Experience (UX) -¿-2- 2 ¿+x+2++zz+xvzxzzzzez 20Hình 1-18: Năm yếu tố đảm bảo khả năng sử dụng ¿2 S2 +z+E+Ee£z£zxzxez 21Hình 1-19: Mô phỏng mối liên quan giữa 3 yếu tỐ - 2-52 + 2+E+£+E+Eezzzzccez 24Hình 1-20: Ba giai đoạn của một bài kiểm tra khả năng sử dụng - +26Hình 1-21: Khung nghiên cứu Start at the End + 5S 13+ verxxseseseeesres 27Hình 1-22: Biểu đồ cỡ mẫu tối ưu cho nghiên cứu khả năng sử dụng định tính 31Hình 1-23: Sự khác biệt về cách thé hiện quan điểm giữa văn hóa phương Tây (trái) và

\⁄:18¡ U89001015090915000)ì1 00170717077 .4 36 Hình 1-24: Công thức tính ty lệ hoàn thành ¿22 222 2+3 2 E£EEkeeeerseseeses 40

Hình 1-25: Công thức tính hiệu suất dựa trên thời gian - 5-5 52 Ss+x+£zEzzcxe2 40Hình 1-26: Công thức tính hiệu suất tương đối tổng thỂ - 2 22s +£z££zzx+2 41Hình 1-27: Công thức tính hiệu suất chuyên gia - - 2 + St+EeEE2EEE2E2EcErrrxes 41

Hình 1-28: Thang do mức độ hai lòng của nhiệm VỤ - -5 2 +5 ‡++sssscssess2 42

Hình 1-29: Thang đo mức độ hài lòng bài kiểm tra - 22 S2+E+£££x+Ee£zzEz£+z 42

Hình 2-1: Logo ứng dụng MyTV c c1 HS 1n 1111011111111 1181 H11 net 47

Hình 2-2: Thống kê Đặc trưng nhân khâu học 2 + s+x+£E+E£+E+E+xzEerxzxerez 49

Bùi Thị Hương Vv

Đồ án tốt nghiệp Đại học DANH MỤC HÌNH ẢNH

Hình 2-3: Thống kê Thói quen xem video trực tuyến trên các thiết bị - 49Hình 2-4: Thống kê Nội dung/chủ được yêu thích - ¿2 2 +2x+++E+£++zxzxzzees 50Hình 2-5: Thống kê Thói quen xem video trực tuyẾn - 2 +sz+x+£e+s+xzzzzxzc+z 50Hình 2-6: Đường đua sôi động của các ứng dụng xem phim -s++>+++s 58Hinh 2-7: Théng kê thời lượng xem dich VU ec ceceesceseeseeeeseeeeeeseeeeseeeeeeseeeeesees 79Hình 2-8: Usability Testing - Xác nhận đồng thuận 2- 2 5¿22z+zx+zxezzzzz 86Hình 2-9: Usability Testing với Ứng VIÊN Ì 5c 2c 3+3 EEsrErsrersrrrrrrrervee 87 Hình 2-10: Usability Testing với Ứng VIÊN 2 - -.- 6 S1 ng ng nh 90 Hình 2-11: Usability Testing với Ứng VIÊN 3 - - - + + 321132 ESEsrrerreerre 93 Hình 2-12: Usability Testing với Ứng VIÊN 4 - Gà nh ng 96 Hình 2-13: Usability Testing với Ứng VIÊN Š - - c6 c1 321139 9 rrvrh 99Hình 2-14: Kết quả mức độ hài lòng từng nhiệm vụ - ¿55c s<s+++cccs+sess 104Hình 2-15: Kết quả bài đánh giá về sự hài lòng dựa trên thang SUS 105Hình 2-16: Kiến trúc thông tin ứng dụng - +: 2 +SeEE£EE2E£E2EEEEEEEEEEErkerkrkrex 107Hình 2-17: Luồng Đăng nhập/tạo thêm người đùng 2-5-2 2 2252 e£xzxzzzce2 108Hình 2-18: Luồng Tìm kiếm, xem phim - - 2-1 s+E£EE£EE2EE£EE2EEEEEEEE2EE2Eerreei 108Hình 2-19: Luồng xem truyén hình - ¿+ 2s +E+E£+E£EE2E££E£EE2EEEEEEEEEEEEErErrerkree 109

Hình 2-20: Luồng xem thé thao - 5-2-5252 SE2SE2EE2EE2E12E12E12E12E12112112171171 712 xE 109

Hình 2-21: Luồng xem shOTfs - 2-2 2+S£+S 9E 2E9EEEEEEEEEEEEEEE7171211121171 1111 e0 109

Hình 2-22: Luồng mua góI 2-22 2 2S SE EEEEEEEEEEEE1E7111271211112111 1.111 xe 110

Hinh:2-23: Wireframe Dang nhập/tạo thêm người dùng - - «5+ ++x<x+++2 110 Hinh:2-24: Wireframe Trang Củ - - + 2 3211331111211 1 2115111111181 181 E11 1E rrr 111 Hình 2-25: Wireframe xem VOl - - - 2+ 1211111112112 111111111 k n1 HH ket 112 Hình 2-26: Wireframe S€arCH - - c1 111911191119 111111 1v 112 Hình 2-27: Wireframe Mua 261.0 cc ecceeeseeseeeeeneenecesecneeeseseceaeseeseseseeeseseesentens 113Hình 2-28: Wireframe Truyền hinh ccceccccccecsceseesessescesessesessessesesessssessessseseesees 113Hình 2-29: Wireframe HBO Ơ( Q TL n 1 Hn TT nT HH TT ket 114Hình 2-30: Wireframe Thể thao ¿22 2522 2E92E22E2121717121212117121 71211 Xe 115

li: 6500)402ïvi18)0y101ẺẺ8 115 Hình 2-32: Wireframe Play phim - - - c2 1132111351139 18E1E111 1111111, 116 ii: 1008) si 010087 äđGGốS€ 117 Hình 3-2: Style Øul1de - - c 12 1121112111111 11111 1111110111011 01110111 111 1H 1E key 118

Hình 3-4: Bộ tag được thiết kẾ mới - +: seS‡EE9EEEEEEEEEEE2E12E121121121121 11 xe 119

Bùi Thị Hương Vv

Đồ án tốt nghiệp Đại học DANH MỤC HÌNH ẢNH

Hình 3-5: Quy chuẩn sử dụng bộ Tag - 2: 2-52 52+S2E2E12E2EEE121511 21711111 xe 119

Hình 3-6: Giao diện đăng nhập cŨ c2 c1 2 1121111211111 1111181111111 11811 11x, 120 Hình 3-7: Giao diện đăng nhập MmỚi - c2 3221132111351 E81 111111 re 120 Hình 3-8: Giao diện tạo thêm người dùng CŨ - -. 5c 2c 2+ **3EvExrrrrrersrvee 121 Hình 3-9: Giao diện tạo thêm người dùng THỚI 5 2 222 33+ * + EE+vvxeereeersrvss 121 Hình 3-10: Giao diện trang chủ CO ec eeccesceescceseeeseeeeseceeeeeeeeeeeeeaeeesneeeesseeeeseaees 122 Hình 3-11: Giao diện trang chủ IỚiI - - c 33 1321112113111 E511 krree 122Hình 3-12: Giao diện tìm kiẾm cñ 2: 52t222+t22Evt2E tt 123Hình 3-13: Giao điện tìm kiếm mới -¿ ¿2 +t+E+E+EEEEEEE+E+E+EEEEEEESESEEEEEEEErEsErersree 123Hình 3-14: Giao diện mua BÓI CŨ G1 1E ngư 124 Hình 3-15: Giao diện mua BỒI THỚI - G2 33222833231 88392E E411 k 124Hình 3-16: Giao diện thé thao cũ -.::-©52:222+t22 2E tri 125Hình 3-17: Giao diện thé thao mới ¿55tr 125

Hình 3-18: Giao diện truyền hình cũ - 2-52 2 t2EE2EE2EE2E12E121751212121e 112 cEe, 126

Hình 3-19: Giao diện truyền hình mới - 2 + E+S£+E£EE+EEE£E£E£EEEEEEErErEerrsree 126

Hình 3-20: Giao diện short CŨ - 2211111 2223111112233 111119111 ng 33111 xa 127 Hình 3-21: Giao diện short THỚI 22 221166122231 1E1 12553111 195351111 1153111 crre 127 Hình 3-22: Giao diện xem HBO GO cũ (bên trai) mới (bên phải) - - 128 Hình 3-23: Giao diện xem phim CŨ 122221121112 1135111111111 1181111111 ree 128 Hình 3-24: Giao diện xem phim THỚI 55 c3 233221332 3331E32EEEEEEEsrersrerrrsree 129Hình 3-25: Giao diện thiết lập tài khoản cũ 2-2-5: t2222E2Ev22E2Eczxrrrzreei 129Hình 3-26: Giao diện thiết lập tài khoản mới - 2 2 22 22E£+E++EeEEzEeErErEerxzed 130

Hình 3-27: Hướng dẫn sử dụng tính năng “Tao mới” người dùng - 130

Hình 3-28: Hướng dẫn sử dụng tinh năng “Chuyên đổi tài khoản” - 131

Hình 3-29: Hướng dẫn sử dung tinh năng trong giao diện'“Xem phim” 131

Hình 3-30: Hướng dẫn sử dụng tinh năng xem “Truyén hình” - - css+: 132Hình 3-31: Hướng dẫn sử dụng tinh năng xem “Thé thao” : 5 25255: 132

Hình 3-32: Hướng dẫn sử dung tinh năng “xem Shorts ” - ¿+ 2c zcecz£zczcz 133

Bùi Thị Hương Vv

Đồ án tốt nghiệp Đại học DANH MỤC CÁC BANG

DANH MỤC CAC BANG

Bang 1-1: So sánh sự khác nhau giữa Progressive WebApp, WebApp va Hybrid Appl2 Bảng 1-2: Sự khác nhau giữa Low-fidelity prototype và High-fidelity

prototype 28 Bang 1-3: Lập kế hoạch kiểm tra kha năng sử dụng 33

Bang 2-1: Sử dụng 5 yếu t6 Usability để đánh giá sơ bộ app MyTYV - 51

Bang 2-2: Sử dung 5 yếu tố Usability dé đánh giá sơ bộ app Netflix - 58

Bang 2-3: Sử dung 5 yếu tố Usability dé đánh giá sơ bộ app FPT Play 63

Bang 2-4: Sử dụng 5 yếu tố Usability dé đánh giá sơ bộ app VieOn 69

Bảng 2-5: Xây dựng nhiệm vu Usability Testing - -c 5 2c * + vssvxsseerreersee 83 Bảng 2-6: Phiếu ghi chép quan sát ứng viên 1 thực hiện Usability Testing 87

Bảng 2-7: Phiếu ghi chép quan sat ứng viên 2 thực hiện Usability Testing 90

Bảng 2-8: Phiếu ghi chép quan sát ứng viên 3 thực hiện Usability Testing 93

Bảng 2-9: Phiếu ghi chép quan sát ứng viên 4 thực hiện Usability Testing 96

Bảng 2-10: Phiếu ghi chép quan sát ứng viên 5 thực hiện Usability Testing 99

Bùi Thị Hương VI

Đồ án tốt nghiệp Đại học PHAN MỞ DAU

PHAN MO DAU

1 Ly do chon dé tai

Trong thời dai công nghệ hiện nay, sản pham kỹ thuật số đã và dang trở thành

một phần không thể thiếu trong cuộc sống hàng ngày của chúng ta Từ những ứng

dụng di động đến những trang website, từ các phần mềm đến các giao diện người

dùng, chúng ta liên tục tương tác với các sản phâm này Vậy mục tiêu cuối cùng của

những sản phẩm này là gì? Là đáp ứng nhu cầu, sự mong đợi của người dùng và manglại trải nghiệm tốt nhất có thể Bởi vậy nếu người dùng không đạt được mục tiêu mà

họ mong muốn một cách tốt nhất, thỏa đáng nhất thì lúc đó chúng ta đã mang đến mộttrải nghiệm toi Một nhà thiết kế giao diện người dùng cũng đã từng chia sẻ rang:

“Thiết kế trải nghiệm tốt là việc tạo ra sự kết nối tốt giữa người dùng và ứng dụng,

đáp ứng nhu câu của họ một cách tốt nhất ”- Alan Cooper

Người dùng có rất nhiều lựa chọn khác đề đạt được mục tiêu của họ Do vậy, chỉ

cần không đạt được mục tiêu trên sản phẩm của mình, có thé sẽ mat người dùng vào

tay đối thủ cạnh tranh mãi mãi Theo nghiên cứu về hành vi người dùng của HuffIndustrial Marketing, KoMarketing và BuyerZone vào năm 2015, họ đã thống kê đượckết quả như sau: 46% người dùng rời khỏi trang web vì không biết công ty làm gì(thông điệp không hiệu quả); 44% là do thiếu thông tin liên hệ; 37% là do thiết kế

hoặc điều hướng kém [1]

Tại Việt Nam trong những năm trở lại đây, nhu cầu sử dụng các loại hình ứngdụng giải trí trực tuyến ngày một tăng cao Đặc biệt, từ đầu năm 2020, do ảnh hưởngcủa đại dịch Covid-19 vì vậy mà việc gap gỡ, tu tập, ăn uống và vui chơi tại các tụđiểm giải trí bị hạn chế tối đa Do đó lựa chọn giải trí của người tiêu dùng tại thời điểmđấy, chỉ còn xoay quanh không gian gia đình cùng với sự phụ thuộc chặt chẽ vàoInternet, mạng xã hội, các chương trình truyền hình, phim ảnh Trong đó, nhữngloại hình giải trí trực tuyến trên thì phim điện ảnh, phim truyền hình dài tập có số

lượng người xem cao nhất Theo báo cáo “Nghiên cứu dịch vụ truyền hình trực tuyến

tại thị trường Việt Nam" của Q&Me vào tháng 2.2020, số người sử dụng các nên tảng

dịch vụ phim online tại nhà riêng lên tới 97% [2] Cũng bởi, tại thời điểm đó khi đại

dịch Covid-19 bùng phát, các rạp chiếu phim phải đóng cửa Do vậy, các nhà sản xuất

và nhà phát hành đôi mới phương thức chiếu phim bằng cách khai thác trên những nềntảng số

Tính đến tháng 1 năm 2022, dân số Việt Nam đạt 98,56 triệu người, với ty lệ dân

số thành thị là 38,7% Khoảng 72,1 triệu người sử dụng Internet (tương đương với

73,2% tổng dân số) trên các nền tảng và ứng dụng khác nhau, với thời lượng trung

bình là 6 giờ 47 phút [3].

Theo thống kê của VNETWORK, người dùng mạng ở Việt Nam dành thời gian

dé xem TV streaming và sử dụng các nền tang mạng xã hội, lần lượt là 2 giờ 40 phút

Bùi Thị Hương 1

Đồ án tốt nghiệp Đại học PHAN MỞ DAU

và 2 giờ 21 phút [4] Từ số liệu trên, có thé thấy nhu cầu giải trí qua các nền tang trựctuyến là rất cao và chiếm phần lớn thời lượng truy cập Internet của người Việt Namhiện nay.

Theo số liệu từ SocialHeat — nền tang Social Listening của YouNet Media, từngày 1/1 đến ngày 15/4/2023, theo ghi nhận từ hệ thống SocialHeat, có đến 3.108.442

thảo luận xoay quanh thị trường VOD, tăng hơn 23,17% so với 2022, hơn 50% so với

năm 2021 Trong đó, top 10 thương hiệu chiếm 62,38% thị phần với 1.903.759 thảoluận Đáng chú ý, Top 10 không chỉ thống trị bởi những cái tên quốc tế có tầm ảnh

hướng toàn cầu như Netflix, Apple TV+, iQIYI - thuộc tập đoàn Baidu (Trung Quốc),

mà còn có những thương hiệu quốc nội đình đám không kém như FPT Play — Công ty

cổ phần Viễn thông FPT (FPT Telecom), VTV Giải Trí — thuộc Đài Truyền hình ViệtNam, Galaxy Play — thuộc hãng phim Thiên Ngân, VieON - thuộc Dat Việt VAC, hay

My K+ — Công ty TNHH Truyền hình số vệ tinh Việt Nam (VSTV) sở hữu, TV360 —

của nhà mạng Viettel, MyTV - thuộc Tập đoàn Bưu chính Viễn thông Việt Nam

(VNPT) [5] Báo cáo cũng chỉ ra rằng, 3 thương hiệu lớn đang chiếm lĩnh thị trường

Việt Nam cao nhất là Netflix, FPT Play và VTV Giải Trí đóng góp 71,42% thị phần

với 1.359.581 thảo luận của người dùng Thương hiệu VieOn đóng góp 14,2% thị

phần thảo luận Thương hiệu Galaxy Play đóng góp 3,4% thị trường thảo luận.Thương hiệu My K+ đóng góp 3,1% thị trường thảo luận Thương hiệu Tv360 và IQIY1I đóng góp 2,9% thị trường thảo luận Thương hiệu Apple TV+ đóng góp 1,1%

thị trường thảo luận Cuối cùng là thương hiệu MyTV đóng góp 1% thị trường thảoluận.

Vậy lý do gì dẫn đến việc ứng dụng xem phim trực tuyến MyTV chưa được

nhiều người biết đến và sử dụng? Phải chăng ứng dụng chưa đáp ứng tốt khả năng sử

dụng của sản phâm Với cương vị là thành viên của MyTV, nhận thấy được vấn đề

này, tác giả quyết định lựa chọn phương pháp Usability Testing đề tiến hành nghiêncứu khả năng sử dụng của app MyTV Đây không chỉ là sản phẩm nghiên cứu dànhcho công ty, mà cũng là công trình nghiên tác giả phục vụ vào đồ án tốt nghiệp, với đề

tài: “Nghiên cứu phương pháp Usability Testing và áp dụng vào cải thiện giao diện

ứng dụng xem phim trực tuyến MyTV dành cho người dùng cuối” Sử dụng kiến

thức về Usability testing dé tiến hành kiểm tra khả năng sử của sản phẩm, từ đó đưa ra

giải pháp giúp cải thiện giao diện ứng dụng xem phim trực tuyến MyTV trở lên tốt hơn

và thu hút nhiều người dùng hơn

2 Tình hình nghiên cứu

2.1 _ Tình hình nghiên cứu trên thé giớiTrên toàn cầu, sự quan tâm đến Usability testing đã tăng lên đáng kể Các nhànghiên cứu và chuyên gia UX/UI đang tìm hiểu và phát triển các phương pháp và công

cụ để đo lường và đánh giá trải nghiệm người dùng một cách khoa học Họ nghiên cứu

Bùi Thị Hương 2

Đồ án tốt nghiệp Đại học PHAN MỞ DAU

các khía cạnh như sự tương tac người-máy, hiệu suất sử dụng, độ hài lòng của người

dùng và những khía cạnh tâm lý liên quan đến trải nghiệm người dùng

Trong quyên tài liệu “Usability Testing: A Practitioner's Guide to Evaluating

the User Experience” cua tac gia Morten Hertzum [6] Tac gia giới thiệu các phương

pháp, công cụ và kỹ thuật quan trong trong quá trình thực hiện Usability testing Đồngthời, sách cũng trình bảy các nguyên tắc và khái niệm cơ bản dé hiểu rõ hơn về quátrình đánh giá trải nghiệm người dùng và tối ưu hóa hiệu quả sử dụng của sản phẩm

Trong quyền tài liệu “Usability Testing: a review of some methodological and

technical aspects of the method” cua tac gia J.M Christian Bastien [7] Tac gia tap

trung vào việc xem xét và đánh giá một số khía cạnh quan trọng của phương pháp

usability testing Từ việc xác định mục tiêu và người dùng tham gia, thiết kế thử

nghiệm, quy trình thực hiện, đến phân tích và báo cáo kết quả, quyền sách cung cấpmột cái nhìn tổng quan về quy trình và các yếu tố quan trọng trong việc thực hiệnusability testing.

2.2 Tình hình nghiên cứu tại Việt Nam

Trong quyên tài liệu “UX Research” của Đỗ Thùy Linh và Khúc Cam Huyén[8] Trong quyền sách này, nhóm tác giả đã đem đến cái nhìn tong quan nhất về UX

Research (Viết tắt là UxR) - “Lá bài sinh mệnh” của sản phẩm Nhóm tác giả đã vạch

rõ hành trình để trở thành một UxR cũng như những hành trang kiến thức cần chuẩn bị

dé trở thành UxR Bên cạnh đó, nhóm tác giả cũng đề cập đến phương pháp Usability

Testing - một trong những phương pháp phố biến nhất trong quá trình xây dựng lại

một sản phẩm cũ hoặc xây dựng một sản phẩm hoàn toàn mới Tác giả đã nêu rất rõ

những cái nhìn sai lệch về phương pháp Usability Testing, cách thực hiện hiệu quả

một buổi Usability Testing và kèm theo đó những bài thập thực hành dành cho các

UxR tương lai.

Bui Thi Huong 3

Đồ án tốt nghiệp Đại học PHAN MỞ DAU

3 Mục dich và nhiệm vu nghiên cứu

3.1 Mục đích nghiên cứu

Nghiên cứu nhằm mục đích mang đến cái nhìn cụ thé về phương pháp Usability

Testing và áp dụng vào cải thiện giao diện ứng dụng xem phim trực tuyên MyTV.

3.2 Nhiệm vụ nghiên cứuNghiên cứu về phương pháp Usability Testing, lợi ích, tầm quan trọng và quytrình tiên hành Usability Testing trong quy trình thiệt kê Từ đó đưa ra giải pháp thiệt

kê cải thiện giao diện ứng dụng xem phim trực tuyên MyTV.

4 Đối tượng và phạm vi nghiên cứu

4.1 Đối tượng nghiên cứuPhương pháp Usability Testing và ứng dụng xem phim trực tuyến MyTV

4.2 Phạm vỉ nghiên cứu

- Pham vi nội dung: Nghiên cứu phương pháp Usability Testing va áp dụng vào

cải thiện ứng dụng xem phim trực tuyên MyTV dành cho người dùng cuôi.

- Phạm vi quy mô: Ứng dụng xem phim trực tuyến MyTV

- Phạm vi thời gian: Tháng 10 năm 2023 dự kiến đến tháng 12 năm 2023 hoàn

thành.

- Pham vi không gian: Người dùng ứng dụng xem phim trực tuyến MyTV trên

dia ban thành phô Hà Nội, Việt Nam.

5 Phương pháp nghiên cứu

Nghiên cứu tài liệu: Tìm hiểu tài liệu nghiên cứu các tài liệu sẵn có về UsabilityTesting, các thông kê, khảo sát tình trạng hiện tại của người sử dụng đang dùng ứng dụng MyTV cũng như các đôi thủ cạnh tranh khác.

Phương pháp điều tra (phỏng vấn, khảo sát, ): Bằng phiếu hỏi, phỏng van, thu

thập và phân tích các dữ liệu thực tê tìm hiêu các nhu câu, vân đê của người dùng.

Phương pháp xử lý thông tin: Áp dụng để xử lý các kết quả thu nhập thông tinđịnh lượng, định tính Qua đó xây dựng các dân chứng, sô liệu khái quát hóa đê thây được các vân đê chung phục vụ cho nghiên cứu.

Phương pháp phân tích tổng hợp và đề xuất giải pháp: Phân tích nhằm phát hiện

và khai thác các khía cạnh khác nhau của thông tin đã thu thập sau quá trình kiêm tra khả năng sử dụng với người dùng Tông hợp các thông tin đã có nhăm phát hiện sự sai lệch từ đó đê xuât giải pháp cải thiện giao diện ứng dụng xem phim trực tuyên MyTV.

Bùi Thị Hương 4

Đồ án tốt nghiệp Đại học PHAN MỞ DAU

6 Ý nghĩa lý thuận va thực tiễn của dé tai

Thông qua quá trình Usability Testing, nghiên cứu sẽ đưa ra các đề xuất cải tiến

về giao diện người dùng và quy trình sử dụng ứng dụng Những đề xuất này có thể bao

gồm việc tối ưu hóa trải nghiệm người dùng, giảm thiểu các bước phức tạp, cải thiện

tính tương tác và đáp ứng nhanh chóng đối với yêu cầu của người dùng

Kết quả của nghiên cứu sẽ giúp đội ngũ phát triển ứng dụng xem phim trực tuyếnMyTV hiểu rõ hơn về nhu cầu và mong đợi của người dùng tại Việt Nam Điều naygiúp tạo ra một trải nghiệm tốt hơn cho người dùng, tăng cường sự hài lòng và tínnhiệm đối với ứng dụng xem phim trực tuyến MyTV, đồng thời tạo điều kiện thuận lợi

cho việc thu hút và duy trì người dùng.

Ngoài ra, nghiên cứu cũng có thể góp phần vào phát triển lĩnh vực Usability

Testing tại Việt Nam Kết quả và phương pháp được áp dụng có thé được chia sẻ và áp

dụng cho các dự án tương tự trong tương lai, góp phần nâng cao chất lượng trải

nghiệm người dùng trên nền tảng di động và tăng cường sự phát triển của ngành côngnghiệp công nghệ thông tin tại Việt Nam.

7 Kết cấu đề tài

Đề tài được xây dựng và thực hiện thông qua dàn ý các chương sauChương I: Nghiên cứu phương pháp Usability Testing trong thiết kế cải thiệngiao diện ứng dụng.

Chương II: Áp dụng phương pháp Usability Testing vào nghiên cứu cải thiện

giao điện ứng dụng xem phim trực tuyến MyTV dành cho người dùng cuối

Chương III: Thiết kế cải thiện giao diện ứng dụng xem phim trực tuyến MyTVdành cho người dùng cuối

Bùi Thị Hương 5

Đồ án tốt nghiệp Đại học CHƯƠNG 1

CHƯƠNG 1: TONG QUAN VE UNG DUNG DI ĐỘNG, THIẾT

KE GIAO DIEN NGUOI DUNG VA PHUONG PHAP USABILITY

TESTING

Trong chương 1, tác giả sẽ dé cập tới những kiến thức về “Téng quan về ứng

dụng di động”, “ Tổng quan về thiết kế giao diện người dùng” và “Phương pháp

Usability Testing” để từ đó có cái nhìn rõ nhất về ứng dụng di động cũng như tầm

quan trọng của việc sử dụng phương pháp Usability Testing trong quá trình thiết kế cảithiện giao diện ứng dụng đem lại giá trị hiệu quả như thế nào Nội dung của chươngnay sẽ là cơ sở lý thuyết dé sử dụng các chương 2 và chương 3

1.1.Tổng quan về ứng dụng di động

1.1.1 Khai niệm ứng dung di độngMột ứng dụng di động là một chương trình máy tính được thiết kế dé chạy trênđiện thoại thông minh, máy tinh bang và các thiết bi di động khác Thuật ngữ “App”

là viết tắt của thuật ngữ “Application Software” và nó đã là thuật ngữ sử dụng phổbiến Ngày nay điện thoại thông minh còn được gọi là điện thoại ứng dụng [9]

1.1.2 Phân loại ứng dụng di động.

a Phân loại ứng dụng di động theo kỹ thuật phát triển

Hiện nay, có rất nhiều loại ứng dụng khác nhau dé phuc vu muc dich va nhu caucủa người dùng Dé phục vụ nhu cầu sử dung của người dùng tốt hon, các ứng dụng di

động đã được phát triên với 4 loại phổ biến sau: Native App, Hybrid App, Web App

và Progressive Web App.

Bài Thị Hương 6

Đồ án tốt nghiệp Đại học CHƯƠNG 1

e Native App.

Native App là một ứng dụng được phat triển dé sử dụng trên một nền tảng hoặc

thiết bị cụ thé [9] Do vậy nó có thể tương tác và tận dụng lợi thế của các tính năng

trên hệ điều hành (Android hoặc IOS) và các phần mềm khác được cài đặt trên nền

tảng đó.

Hình 1-2: Các ứng dụng Native App

Native App có khả năng hoạt động tương thích vô cùng tốt trên các hệ điềuhành mà nó hỗ trợ, vì thế nó có khả năng sử dụng thiết bị phần cứng và phần mềmtrong chính thiết bi di động đó, tức là các ứng dụng Native App có thé tận dụng lợi thé

của các công nghệ mới nhất có sẵn trên các thiết bị đi động ví dụ như: Định vị toàn cầu

(GPS), camera, danh ba, microphone để giúp sản phẩm có trải nghiệm tốt hơn, đáp

ứng nhu cầu người sử dụng

Quá trình xây dựng các ứng dụng Native App luôn có sự hỗ trợ của một số loại

ngôn ngữ như: Đối với Android sẽ sử dụng các ngôn ngữ: Java, Kotlin Python Còn

đối với IOS sẽ sử dụng các ngôn ngữ: Objective-C, C++, React, Swift

Việc truy cập và sử dụng các ứng dụng Native App đều rat đơn giản, chi cầntruy cập vào các cửa hàng ứng dụng, ví dụ như trên hệ điều hành IOS sẽ vào cửa hàngApp Store hoặc với hệ điều hành Android thì có thé truy cập vào cửa hang CH Play, từ

đó có thé lựa chọn được ứng dụng phù hợp với nhu cầu của bản thân dé tải về sử dụng

Ngoài ra còn có các ứng dụng Native App được lưu trữ sẵn trên các thiết bị di động ví

dụ như: Báo thức, tin nhắn SMS, Sức khỏe

Ưu điểm:

- Dam bảo sự an toàn: Native App có nhiều hang rào bảo vệ khác nhau của hệ

điều hành và không phụ thuộc vào hệ thống của bên thứ 3 Do vậy Native App

có các API (Giao diện lập trình ứng dụng) chính thức, được kiêm duyệt day đủ

trên các phiên bản hệ thống khác nhau Người dùng hoàn toàn tin tưởng vào

mức độ an toàn cua Native App khi tai và sử dụng ứng dụng di động.

- Mang lại hiệu suất cao: Sử dụng ngôn ngữ lập trình riêng cho từng nên tảng

Native App nên sẽ tối ưu hóa và hoạt động nhanh hơn và nâng cao hiệu suất trải

nghiệm của người dùng.

Bùi Thị Hương 7

Đồ án tốt nghiệp Đại học CHƯƠNG 1

- It gặp lỗi: Sử dung codebase (cơ sở mã) chia sẻ cho nhiều nền tang giúp tiết

kiệm thời gian trong quá trình phát triển ứng dụng

- _ Tối ưu giao điện ứng dụng và trải nghiệm người dùng: Các nhà phát triển ứng

dụng sẽ phải tuân thủ theo các quy tắc nhất định về UX/UI trên nền tảng đó Do

vậy người dùng có thé làm quen nhanh chóng với các biéu tượng, nút bam trong

mỗi ứng dụng.

Nhược điềm:

- _ Tốn nhiều thời gian: Cac Native App chỉ hoạt động trên các nền tảng cụ thé Do

vậy, trong quá trình xây dựng một ứng dụng cho cả 2 hệ điều hành IOS vàAndroid, bắt buộc phải xây 2 phần code độc lập cho mỗi nền tảng hoặc có mộtcông cụ cho phép chuyền phan code cơ sở sang code riêng cho mỗi nén tang Vidụ: Xamarin Ngoài ra, việc bảo trì và nâng cấp Native App cũng phức tạp hơn,đòi hỏi nhiều thời gian và chuyên môn của người sửa cho từng nền tảng

- Tén nhiều chi phí: Việc xây dựng hoặc nâng cấp các Native App đều tốn rất

nhiều thời gian cũng như mỗi nền tảng sẽ yêu cầu bộ kỹ năng khác nhau dé tao

dựng và duy trì ứng dụng Do vậy sẽ tốn rất nhiều chi phí trong quá trình phát

triển ứng dụng Native App

e Web App

Web App là một chương trình ứng dung được lưu trữ trên một may chủ từ xa vagửi qua mạng Internet thông qua một giao diện trình duyệt [9] Về bản chất Web App

là một website, dễ dàng thích ứng với các thiết bị chạy hệ điều hành Android, IOS,

Mac OS và Windows Phone Nhưng nó cần được thiết kế sao cho hiển thị giống với

các Native App Khi người dùng muốn truy cập vào Web App sẽ cần sự hỗ trợ của

trình duyệt, sau đó sẽ truy cập vào tên miền trang web muốn đến

Bùi Thị Hương 8

Đồ án tốt nghiệp Đại học CHƯƠNG 1

Quá trình xây dựng Web App cũng sử dụng các công nghệ tương tự giống các

website, ví dụ như: HTMLS, CSS, Ruby, JavaScript

Web App có thể chạy trên bất kỳ thiết bị đi động hoặc máy tính bảng với

một trình duyệt web phù hợp Các nhà thiết kế và phát triển ứng dụng không thê truy

cập vào các công cụ sáng tạo (vi dụ: nút bam, popup, ) , hay can thiệp được đến các

tính năng mà các nền tảng cung cấp như Apple, Google Vi vậy các nhà thiết kế sẽphải thiết kế các giao diện người dùng hoàn toàn từ dau

Uu điềm:

- Tiết kiệm thời gian: Web App hoạt động trên trình duyệt là chủ yếu, do vậy

không cần tùy chỉnh theo nền tảng hay hệ điều hành, giúp tiết kiệm thời gian

- Tiét kiệm dung lượng, bộ nhớ: Bởi vì các dữ liệu không cần phải tải xuống

nhưng vẫn có thể sử dụng được

- Khi sử dụng Web App không nhất thiết phải thường xuyên cập nhật chương

trình.

Nhược điểm:

- Một số chức năng trong Web App có thể hoạt động tốt trên trình duyệt này

nhưng lại không sử dụng được trên trình duyệt khác.

- _ Không thé hoạt động ngoại tuyến như một số các ứng dụng Native App

- Cac Web App được thiết kế để chạy trên nhiều hệ điều hành di động, do vậy sẽ

chạy chậm hơn so với các Native App

Đồ án tốt nghiệp Đại học CHƯƠNG 1

Các Hybrid App được xây dựng và phát triển với sự hỗ trợ của các thư viện,Framework phổ biến như Flutter, Xamarin, React Native Hybrid App cũng giốngnhư các Web App, nó dựa trên HTML hién thị trên trình duyệt được nhúng vào trong

ứng dụng.

Hybrid app có thé đưa lên kho ứng dụng dé cài đặt và chạy như các Native App,

nhưng phan lớn các tiến trình của ứng dụng hoạt động dựa vào công nghệ web

Uu điểm:

- Hybrid App là ứng dụng web chỉ cần viết một lần duy nhất nhưng có thé chạy ở

nhiều nơi khác nhau, giúp tiết kiệm chi phí phát triển ứng dụng

- Dễ đàng tải các ứng dụng Hybrid trên các kho ứng dụng như: Appstore hoặc

CH Play.

- C6 thể thực hiện nhiều chức năng mà Native App không làm được Vi Hybrid

App có thé sử dụng các công nghệ web như HTMLS, CSS, JavaScript, v.v détạo ra các giao diện đa dạng và độc đáo, có thé tích hợp được các API của bênthứ ba, và có thê cập nhật được nội dung mà không cần phải tải lại ứng dụng

- Do Hybrid App là sự kết hợp của Native App và Web App, nên các Hybrid App

có thể chạy trên nhiều nền tảng, có thê truy cập được các tính năng của thiết bị

như camera, GPS, và có thê hoạt động không cần mạng Internet

- Bảo trì Hybrid App rất đơn giản, nhanh chóng và không tốn nhiều thời gian

Nhược điểm:

- _ Tốc độ chạy của Hybrid App chậm hơn so với Native App

- _ Trong quá trình sử dụng đôi khi gặp hiện tượng giật, lag.

- _ Giao diện của Hybrid App ít quen thuộc hơn so với những ứng dụng khác.

- Gap một vài khó khăn khi thực hiện một số yêu cầu liên quan tới phan cứng

e Progressive Web App

Progressive Web App - PWA là sự kết hợp hoàn hao giữa Website và ứng

dụng Nó hoạt động tương tự như một trang Web, nhưng khác ở chỗ nó có thê sử dụng

mà không cần phải kết nối internet và có khả năng truy cập vào phần cứng của thiết bị

di động Progressive Web App có thể được coi là một loại Web App, nhưng có nhiều

tính năng nâng cao hơn so với Web App truyền thống Đây một công nghệ mới pháttriển trong những năm trở lại đây, do vậy nó là thuật ngữ khá mới mẻ đối với nhiều

người dùng trên thị trường hiện nay.

Bùi Thị Hương 10

Đồ án tốt nghiệp Đại học CHƯƠNG 1

© %

INSTALLED

Hinh 1-5: Hinh anh minh hoa Progressive Web App Progressive Web App được xây dựng dựa trên các công nghệ của Website, nhưng mang đên trải nghiệm tương tự như Native App PWA không phát hành trên App Store, có thê tìm kiêm PWA trên những công cụ tìm kiêm Khi ghé thăm bât kỳ một PWA-website nao đó, trình duyệt sẽ phôi hop với thiét bi ma bạn sử dụng va đưa

ra đê nghị cai đặt ứng dụng Việc này giúp cho người dùng có thê cải thiện SEO bai việt trên ứng dụng Nhăm tiệt kiệm, tránh tiêu tôn thời gian và kinh phi cho các quảng cáo [10].

Uu điểm:

- Ung dụng PWA khá nhẹ, khỏa ở mức vai KBs

- _ Không cần đến mã nguồn Native trong ứng dụng

- Dem đến trải nghiệm cho người dùng tối ưu hơn Chỉ cần mở website thay vi

vào App Store hay CH Play dé tìm kiêm.

- Có thể truy cập không cần internet

Nhược điểm:

- Giống như Web App, Progressive Web App bị hạn chế về các trình duyệt

- _ Không thé truy cập được vào App Store

Bài Thị Hương 11

Đồ án tốt nghiệp Đại học CHƯƠNG 1

Bang 1-1: So sánh sự khác nhau giữa Progressive Web App, Web App và Hybrid App

Progressive Web App Web App Hybrid App

Su dung Không can dùng Có cần dùng Có thể cần hoặc

internet để Internet Internet không tùy vào mục

truy cập đích phát triển ứng

dụng

Cài đặtứng | Có thé được cài đặt vào | Cần phải truy cập | Cài đặt trên kho ứng

dụng thiết bị thông qua một | qua địa chi URL dụng App Store

lời nhắc từ trình duyệt hoặc CH Play

Sử dụng phan | Có thé truy cập được Không thể truy cập | Có thể truy cập

dụng phân cứng như camera, | hạn chê năng của phân cứng

micro, nhu camera, micro,

Thiét ké giao | Giao diện và hoạt động | Giao diện và hoạt Giao diện và hoạt

diện giống như một ứng động giống như một | động giống như một

dụng di động, với khả | trang web, với khả | ứng dụng di động,

năng tương tác với năng tương tác thấp | với khả năng tươngngười dùng hơn tác với người dùng.

b Phân loại ứng dụng di động theo ngữ cảnh.

Bên cạnh việc phân loại các ứng dụng dựa trên các kỹ thuật phát triển, hiện nayngười ta còn phân loại các ứng dụng di động theo ngữ cảnh Boi vì mọi hoạt động luônluôn xảy ra trong một bối cảnh, do đó cần phải phân tích hành động và ngữ cảnh cùngvới nhau Ba loại ngữ cảnh được phân biệt: Ngữ cảnh tổ chức, ngữ cảnh xã hội và ngữcảnh vật ly [11] Việc phân loại ứng dụng dựa trên ngữ cảnh là một cách dé nhận biết

và phân tích các yếu tố ngữ cảnh liên quan đến ứng dụng, nhằm tạo ra các ứng dụngphù hợp với nhu cầu và mong muốn của người dùng

Dưới đây là những loại ứng dụng di động được phân loại theo ngữ cảnh như sau:

Ung dung Utility, ứng dụng Location, ứng dung Informative, ứng dung Productivity,

ung dung Immersive.

e Ung dung Utility (Tién ich):

Utility app là những ứng dụng tiện ích trên các thiết bị di động Những ứng dụngnày thường yêu cầu một lượng thông tin nhỏ dé giải quyết cho người dùng những tinh

Bùi Thị Hương 12

Đồ án tốt nghiệp Đại học CHƯƠNG 1

huống, nhiệm vụ và thường được thiết kế tối giản, tập trung vào nội dung bên trong và

sử dụng ít nhất đầu vào Ví dụ các ứng dụng như: dự báo thời tiết, đồng hồ báo thức,

bộ đếm bước Các ứng dụng Utility không nhất thiết phải có sẵn trên điện thoại di

động, chúng có thê được cài từ các cửa hàng App Store hoặc CH Play

Hà Nội, Thành Phố Hà Nội

Độ cao 10 m

Hình 1-6: Vi dụ về các ứng dung Utility

e Ung dung Location (vi tri):

Location app là những ứng dụng di động cung cấp thông tin về vi trí các quán cà

phê, khách sạn, cửa hang và có hỗ trợ thêm GPS dé xác định cụ thể vị trí Những

ứng dụng này thường có điểm giống nhau là có bản đồ Ngày trước, khi muốn đến một

địa điểm nào đó, thường phải xem bản đồ giấy hoặc hỏi người đi đường dẫn đến nhiều

bat tiện Với sự ra đời của những ứng dung Location như một bước ngoặt mới giúp

người dùng có thé tra cứu địa điểm ở mọi lúc moi nơi, thuận tiện trong quá trình di

chuyển

Bùi Thị Hương 13

Đồ án tốt nghiệp Đại học CHƯƠNG 1

23:51 Quan Của Minh © = I | ⁄

sa

Hoc vién Cong nghé Buu ch x

werravear SON TT AE O) DO THAN

+ Py Nhật Bàn ọ Chính Quốc Gia RESIDEN

ier ala xà ®Nhà Hàng Deli 4B: @ 8

9? BBO & Hotpot | ONG 10

e Ứng dung informative (thông tin):

Informative app là những ứng dụng cung cấp thông tin một chiều, hiển thị nhữngnội dung thông tin cho người dùng và không cân thiệt phải tương tác với ứng dụng Ví

dụ như những ứng dụng đọc báo, ứng dụng đọc sách,

Book Store

Trang nhất Tin đã lưu Bình luận Duyệt Các Phan

FEATURED COLLECTION

Tìm kiếm bài viết đã lưu ¬ Tiéu sử - Hoi ức

Nhan sắc Hà Kiều Anh sau

24 năm đăng quang ee

Hoa hau Viét Nam 1992 van *

giữ được vẻ sang trọng, xinh z “

đẹp, phong cách ngày càng £ 7⁄7

ix} 41

Toyota Vios động cơ mới

chuẩn bị ra mắt tại Việt

Chiếc sedan cỡ B sẽ lắp động

cơ mới thay cho loại 1,5 lít

hiện tại, thiết kể không thay

Đồ án tốt nghiệp Đại học CHƯƠNG 1

e Ung dung Productivity (năng suất:

Productivity là những ứng dụng giúp người dùng hồn thành các nhiệm vụ chứcnăng cụ thể, như nhắn tin, danh bạ, hoặc media Các ứng dụng này thường cĩ cau trúcphân cấp, trình bay thơng tin theo các thư mục hoặc nhĩm Khi thiết kế ứng dụng này,cần chú ý đến cách người dùng suy nghĩ và thực hiện nhiệm vụ Ví dụ, ứng dụng Zalo

là ứng dụng nhắn tin nhanh đa nền tảng được phát triển bởi cơng ty VNG Việt Nam

Ứng dụng này mục đích chính cho phép người dùng nhắn tin đây là nhiệm vụ ưu tiên

hàng đầu Ngồi ra các nhiệm vụ khác như: chia sẻ trạng thái, thanh tốn, kết bạn cĩ

ưu tiên thấp hơn Nên giao diện đầu tiên khi vào ứng dụng sẽ là giao diện nhắn tin

e VNMOBIFONES 22:49

Media Box Student Council - Sai.

Zing.vn: U22 Việt Nam vs U22 Singa @D [Neo-SC] - Clubs and Society Of.

Dear beloved RMIT Students, H

Thời Tiết 2giờ

% Hà Nội ít mây, sáng và đêm trời @D Student Council - Sa —

[Neo-SC] - Outsider Complaints

Dear beloved RMIT Students, As

Bộ Y tế 19 giờ

Cha mẹ cần đưa con đến cơ sở y tế (ỞÐ EfiViEtựiMBAVietrietfi oa

[NUS Info-Session] Hoi thao Ch

Tổng Đài 1022 Đà Nang 19 giờ

"Cho và Nhận" - kênh kết nối sẻ chia Ð

Chào bạn, Trường đại học quốc

ZOTT Em Sua 20 giờ Do a survey to get a graduation

Okc

»e@eO Dear graduands, Last week we s

EnvisionMBA_Vietnam Nov (MBA Dai hoc Willamette - My]

Cha

H20A_ Ngọc Hồi 2 ngày

Hảo Nguyễn: Vang co

iS) Student Services RUVN Nov 2

men rile ree News CoCM

je ‘eo Talent Hub's talk show: 'A Refor

Hinh 1-9: Vi du giao dién ung dung Productivity

° Ứng dụng Immersive (đắm chìm):

Immersive app là những ứng dụng sử dụng tồn bộ màn hình để tạo ra những trảinghiệm sống động và hấp dẫn cho người dùng Những ứng dụng này cĩ thể là dạng

nhập vai, tiện ích màn hình, hoặc hiển thị các thơng tin liên quan đến vị trí của người

dùng Ví dụ như: ứng dụng giải trí, ứng dụng bản đồ, ứng dụng la bàn, hoặc ứng dụng

bảng điều khiến

Bài Thị Hương 15

Đồ án tốt nghiệp Đại học CHƯƠNG 1

Hình 1-10: Vi dụ giao diện ứng dung Immersive

1.2 Tong quan về thiết kế giao diện người dùng trên ứng dụng di động

1.2.1 Khai niệm thiết kế giao diện người dùng

Theo định nghĩa của Interaction Design Foundation: “Thiết kế giao diện

người dùng (UI Design) là quá trình các nhà thiết kế sử dụng để xây dựng giao diệntrong phần mềm hoặc thiết bị máy tính, tập trung vào ngoại hình hoặc phong cách Cácnhà thiết kế nham mục đích tạo ra các giao diện mà người dùng thấy dé sử dụng va thú

vị Thiết kế giao diện người dùng đề cập đến giao diện người dùng đồ họa và các hình

thức khác - ví dụ: giao diện điều khiển bằng giọng nói” [12]

Hiện nay, quy trình phát triển ứng dụng di động đang được sử dụng phô biếnnhất trong các doanh nghiệp là: Quy trình Scrum và quy trình Waterfall Thiết kế giaodiện người dùng là 1 giai đoạn trong quy trình phát triển ứng dụng di động

Đồ án tốt nghiệp Đại học CHƯƠNG 1

Hình 1-12: Mô hình phát triển ứng dụng ScrumĐây là giai đoạn quan trọng để triển khai ý tưởng sản phẩm sau quá trìnhnghiên cứu và phân tích Thiết kế giao diện giúp cho team phát triển cũng như kháchhàng có cái nhìn trực quan hơn về sản phẩm trước khi chuyên sang giai đoạn code

1.2.2 Quy trình thiết kế giao diện người dùng trên ứng dụng di động

LM V UN y

Hình 1-13: Quy trình thiết kế giao diện người dùng

a Reference/Moodboard

Giai đoạn đầu tiên của quá trình thiết kế cần tiến hành xây dựng bang

Moodboard Đây là bước vô cùng quan trọng trong việc định hình hình về phong cách

thiết kế Giúp nhà thiết kế dễ dàng truyền đạt ý tưởng rõ ràng nhất với các bên liên

quan dự án Ngoài ra, Moodboard là cách tốt nhất dé tìm kiếm và khơi dậy niềm cảm

hứng thiết kế

Xây dựng Moodboard cần chú trọng vào thương hiệu (Branding) hiện tại.Nếu thương hiệu mới triển khai, cần xác định rõ từ khâu nghiên cứu sản phẩm vềphong cách hướng đến đề từ đó xây dựng bảng Moodboard phù hợp với yêu cầu

Trong thiết kế UI và thiết kế sản phẩm, bảng Moodboard là sự cắt dán củahình ảnh, phông chữ, tương tác, tính năng, biểu tượng và các thành phần giao diện

người dùng dé truyền đạt định hướng phong cách thiết kế của dự án [20] Những thành

phần cần có trong Moodboard là: Hình ảnh từ bộ sưu tập cá nhân, ảnh thương hiệuhiện tại hoặc logo, mảu sắc, font chữ, cỡ chữ, icon

Bùi Thị Hương 17

Đồ án tốt nghiệp Đại học CHƯƠNG 1

sò wo = a SF UI Text Regular

Ƒ @ SF UI Text Bold

Hình 1-14: Vi dụ về Moodboard dành cho ứng dung di động

b Design System

Theo dinh nghia cua Interaction Design Foundation: “Design System 1a thu

viện các thành phần va hướng dẫn có thé tái sử dung ma mọi người trong công ty cóthê kết hợp thành các giao diện và tương tác” [13] Tùy vào từng công ty sẽ có sự thay

đổi tùy chỉnh phù hợp cho từng dự án phát triển sản phẩm

+ Tạo ra các thành phần thiết kế nhanh chóng có thé sử dụng lại nhiều lần giúp

tiết kiệm thời gian dé tập trung vào các van đề thiết kế lớn và phức tạp hơn

+ Thống nhất giao diện thiết kế giữa các nhóm thiết kế

+ Là tai liệu đào tạo cho nhân sự mới vào.

Bùi Thị Hương 18

Đồ án tốt nghiệp Đại học CHƯƠNG 1

- Nhược điểm:

+ Design System luôn cần phải cập nhật, phát triển liên tục dựa theo phản hồi của

những người sử dụng Do vậy cần nhiều thời gian và một đội ngũ chuyên biệt

dé làm việc này

+ Vì Design System là một hệ thống to gồm nhiều thành phan Do vậy cần có

hướng dan sử dụng cụ thé, nếu không sẽ xảy ra sự thiếu nhất quán và không

chính xác khi áp dụng lên các giao diện giữa các nhóm thiết kế với nhau

Design System bao gồm những thành phần sau:

+ Style Guide: Là bộ các thành phần về các yếu tố nhận diện thương hiệu: hệ

thống màu sắc, font chữ, logo, icon Style guide cung cấp các nguyên tắc và

ví dụ về các trường hợp sử dụng yếu tổ này trong thiết kế giao diện

+ Component Library: Là một bộ được tạo san dé tái sử dụng nhiều lần trong thiết

kế giao diện: hệ thống các nút, menu, biểu mẫu, Đây là nơi dé các designer

va developer tìm hiểu và triển khai các thành phan cụ thé của giao diện

+ Pattern Library: là định nghĩa cách phối hợp các thành phần riêng lẻ Pattern

library cung cấp cấu trúc nội dung, layout, template để chúng ta có thể tái sửdụng và điều chỉnh theo từng trường hợp cụ thé Ngoài việc cung cấp các ví dụtrực quan, trong pattern library còn làm nổi bật các thành phan mà designer nên

tận dụng và kèm theo hướng dẫn sử dụng của từng thành phần

c Thiết kế giao diện

Đây là bước cuối cùng trong quá trình thiết kế giao diện Dựa trên wireframe,

moodboard và design system đã được tạo ở các giai đoạn trước, các nhà thiết kế tiến

hành thiết kế giao diện ứng dụng đảm bảo về mặt nhận diện thương hiệu và sắp xếp lại

các nội dung sao cho có tính thâm mỹ Bồ trí nội dung hình ảnh hợp lý với thể loại ứng

dụng giúp khách hàng có cái nhìn khách quan hơn về sản phâm Đặc biệt, thiết kế cần

có sự thống nhất chặt chẽ giữa các màn giao diện

Bùi Thị Hương 19

Đồ án tốt nghiệp Đại học CHƯƠNG 1

Welcome Back !

Hình 1-16: Ví du về một sản phẩm thiết kế giao diện

1.3 Tổng quan về phương pháp Usability Testing

1.3.1 Khai niệm Usability và các yếu tố đảm bảo kha năng sử dụng

a Khai niệm Usability

Theo dinh nghia cua Interaction Design Foundation: “Kha nang su dung(Usability) là thước do xem một người dùng cụ thé trong một bối cảnh cụ thé có thé sửdụng một sản phẩm/thiết kế để đạt được mục đích nhất định một cách hiệu quả, hiệusuất và thỏa mãn nhất hay không” [14]

Khả năng sử dụng là một thành phần của trải nghiệm người dùng (UX), bên cạnh

hai yếu tố như Look (là những gì người dùng có thé được nhìn thấy, giao diện có bắt

mắt và thâm mỹ không ) và Feel (người dùng sử dụng sản phẩm họ cảm thấy như thế

nào, mang lại cho ho cảm xúc gì có hào hứng, vui vẻ, thoải mái không ).

Harmonie stimmung

USABILITY

Hinh 1-17: Cac yéu to trong User Experience (UX)

Bui Thi Huong 20

Đồ án tốt nghiệp Đại học CHƯƠNG 1

b Các yếu tổ đảm bảo khả năng sử dụng

Có 5 yếu tố đảm bao khả năng sử dụng: Learnability (Sự dé dùng), Efficiency(Hiệu suất sử dung), Memorability (Dễ nhớ), Errors (Lỗi) và Satisfaction (Sự hài

How many errors do users

make, it's severity, and are they able to recover speedily?

Learnability Memorability

Do users find it easy to Are users easily able to

complete basic tasks? reestablish proficiency after

along gap?

Satisfaction Efficiency

Did users have a How quickly can users

delightful experience? perform tasks?

Hình 1-18: Năm yếu tố dam bảo khả năng sử dung

- Learnability (Sự dé dùng): Sự dé dùng trong thiết kế khả năng sử dụng là đảm

bảo người dùng có thể hoàn thành được mục tiêu ngay cả khi lần đầu tiên sử

dụng sản pham

+ Khả năng dự đoán: Thiết kế giúp cho người dùng có thê dự đoán được

kết quả hoạt động của hành động trong tương lai

+ Khả năng nhận biết: Cần phải thiết kế đảm bảo người dùng có thể nhìn

thấy và hiểu một cách rõ ràng những gi mà hệ thống cung cấp

- Efficiency (Hiệu suất sử dụng): Thiết kế tăng hiệu suất sử dụng cho người

dùng đó là việc đảm bảo người dùng có thé hoàn thành mục tiêu nhanh hơn

+ Điều hướng: Cung cấp cho người dùng khả năng di chuyển xung quanh

các bộ phận của hệ thống, giúp cho người dùng dễ dàng xác định được

vị trí của họ đang ở đâu Thiết kế điều hướng tốt sẽ rút ngắn được con

đường mà người dùng có thể di chuyền

+ Điều khiển: Mục tiêu của việc tạo ra sản phẩm tương tác nhằm phục vụ

cho lợi ích của người dùng Do vậy cần phải cho phép người dùng kiểm

soát được nội dung của họ.

+ Phản hồi: Thông tin phản hồi rõ ràng và nhất quán, thời gian phản hồi

nhanh và liên tục.

+ Sự thông minh: Cung cấp những tính năng tiện ich và thông minh sẽ giúp

người dùng rút ngắn được một vài thao tác trong quá trình sử dụng

Bùi Thị Hương 21

Đồ án tốt nghiệp Đại học CHƯƠNG 1

- Memorability (Dễ nhớ): Thiết kế dam bảo khả năng dé nhớ là khiến cho người

dùng sau một thời gian dài không sử dụng vẫn có thể quay trở lại dùng một

cách thành thạo.

+ Sự quen thuộc: Những người dùng lần đầu sử dụng hệ thống, thường sử

dụng theo bản năng, những gì mà họ đã từng nhìn và tiếp xúc qua có thê

ở một số sản phẩm trước đó Do vậy, khi thiết kế giao diện cần sử dụng

những yếu tố quen thuộc giúp người dùng dễ sử dụng hơn Tránh gây

khó hiểu cho người dùng

+ Tính nhất quán: Khi thiết kế giao diện cần đảm bảo tính thống nhất trong

hệ hệ thống Vì người dùng chỉ cần biết được cách sử dụng của một sốtrang thì cũng có thể sử dụng được các trang còn lại

+ Bộ nhớ của người dùng có hạn: Hãy để cho họ được lựa chọn thay vì

phải nhớ lại một cái gì đó chi tiét.Dam bảo những thiết kế có tô chứcthông tin hợp lý, giúp người dùng có thể ghi nhớ nội dung tốt

- Errors (Lỗi): Trong quá trình thiết kế phải tính đến những trường hợp mà

người dùng mắc lỗi Phân tích tính nghiêm trọng của những lỗi đó

+ Lỗi không nghiêm trọng: Họ hoàn toàn có thé ty sửa chữa lỗi lầm của họ.+ Lỗi trung tính: Lỗi này không dé lại hậu quả cho người dùng

+ Lỗi nghiêm trọng: Là những lỗi gây ra những kết quả tệ cho người dùng.Những cách để tránh những lỗi nghiêm trọng xảy ra:

+ Cảnh báo: Cung cấp những cảnh báo cho người dùng về nguy cơ mà họ

có thể gặp phải do những sai lầm trong hành động của họ

+ Tự bảo vệ: Cho phép hệ thống có chế độ tự bảo vệ giúp người dùng tránh

được những nguy hiểm do những lỗi gây ra

+ Khả năng phục hồi: Cho phép người dùng khôi phục lại, sửa chữa lại

những sai lầm gây ra

- Satisfaction (Sự hài lòng): Sự hài lòng của người dùng đối với một sản phẩm

là cảm nhận dễ chịu của người dùng khi được trải nghiệm Sự hài lòng được

đánh giá tổng quan sau khi người dùng đã được trải nghiệm sản phẩm Sự hảilòng có được dựa trên toàn bộ những trải nghiệm về khả năng sử dụng khác của

người dùng Dé đánh giá được sự hài lòng của người dùng thì bắt buộc phải

dùng phương pháp tiếp cận người dùng

Một số phương pháp giúp tăng thêm sự hài lòng cho người dùng:

+ Tinh linh hoạt: Hệ thống cho phép có nhiều cách làm việc cho người

dùng với trình độ kinh nghiệm và sự quan tâm khác nhau Cung cấp cho

Bùi Thị Hương 22

Đồ án tốt nghiệp Đại học CHƯƠNG 1

người dùng có cơ hội để thay đổi cách tương tác và biểu diễn của hệthống

+ Phong cách thiết kế: Những mau thiết kế thé hiện được phong cách và

hấp dẫn tùy thuộc vào đối tượng mục tiêu

+ Hệ thống tương tác thân thiện, tránh những thay đổi đột ngột, gián đoạn

quá trình tương tác của người dùng.

- 5 yếu tô trên có thé được sử dung để các nhà thiết kế đánh giá sơ bộ về sản

phâm giúp xác định những lỗi nghiêm trọng cân phải sửa nhât trước khi tiên hành Usability Testing với người dùng và giúp quá trình xây dựng nhiệm vụ đúng điêm đau người dùng Đây còn được gọi là phương pháp “Chuyên gia đánh giá” Có 2 cách đê làm đánh giá theo phương pháp này:

+ Đánh giá theo nhiệm vụ

Bước 1: Xác định mục tiêu đánh giá.

Bước 2: Liệt kê các nhiệm vụ cần đánh giá

Bước 3: Đánh giá.

+ Đánh giá theo tiêu chi

Bước 1: Liệt kê tiêu chí đánh giá.

Bước 2: Duyệt từng trang và đánh giá theo từng tiêu chí.

Bước 3: Tổng hợp đánh giá

Sau khi đánh giá, cần xác định mức độ lỗi của từng nhiệm vụ hoặc tiêu chí Dưới

đây là quy ước đánh giá thang diém mức độ nghiêm trong cân sửa 161:

- 4 điểm: Van đề nghiêm trọng cần phải thiết kế lại

- 3 điểm: Vấn đề ít nghiêm trong hơn nhưng van cần phải thiết kế lại

- 2diém: Van đề nghiêm trọng bình thường sửa được thì càng tốt

- 1 điểm: Lỗi nhẹ về thiết kế, có thé bỏ qua

1.3.2 Khai niệm Usability Testing và các yếu tố của Usability Testing

a Khái niệm Usability Testing

Có rất nhiều định nghĩa về Usability Testing, nhưng tác giả thích nhất định nghĩa

cua Steve Krug :“ Usability Testing là quan sát mọi người dùng thử cái ma bạn đang tạo ra/thiét kê/xây dựng (hoặc cái mà ban đã tao/thiét kê/xây dựng) với mục đích là khiên cho mọi người có thê dùng nó dé dang hoặc chứng minh rang nó dé dang sử dụng [15].

Trong mỗi buôi kiểm tra khả năng sử dụng, nghiên cứu viên (thường được gọi là

người điêu phôi) sẽ yêu câu ứng viên/đáp viên (người được mời đên đê tham gia kiêm tra) thực hiện một hoặc một vài nhiệm vụ, thường sẽ là sử dụng những giao diện nhât

Bùi Thị Hương 23

Đồ án tốt nghiệp Đại học CHƯƠNG 1

định Trong quá trình ứng viên đó thực hiện các yêu cầu, nghiên cứu viên sẽ quan sáthành vi của họ và lắng nghe những phản hồi, ý kiến dé thu thập lại

b Các yếu tố của Usability Testing

Theo nguồn từ tập đoàn Nielsen Norman, Usability Testing bao gồm 3 thànhphần chính: Điều phối viên (facilitator/moderator), nhiệm vụ (task) và ứng viên/ngườidùng that (participant) [16].

NHIỆM VỤ

(Task)

&

Quan sat, lắng nghe, phóng van

DIEU PHỐI VIÊN ——————— ỨNG VIÊN/ĐÁP VIÊN

(Moderator/Facilitator) (Participant) '

Phản hồi, đưa ÿ kiến, góp ý

Co

Hình 1-19: Mô phỏng mối liên quan giữa 3 yếu to

- Diéu phối viên: Có nhiệm vụ xây dựng kịch bản nhiệm vụ, quản lý các nhiệm

vụ cho ứng viên Quan sát hành vi của ứng viên và lắng nghe phản hồi của họ

dé có thé đưa ra các câu hỏi, câu trả lời phù hợp trong quá trình tiến hành

Usability Testing Sau đó điều phối viên có thé tiễn hành phỏng vấn chuyên sâu

nếu cần

- Ung viên: Người tham gia thực hiện kiểm tra kha năng sử dụng phải là người

dùng thực tế của sản phẩm/dịch vụ đang được nghiên cứu Những ứng viên khi

tham gia thường được yêu cầu “suy nghĩ lớn - think aloud” (think aloud - vũ khítối thượng khi làm Usability Testing: người dùng nói ra những suy nghĩ củamình khi thực hiện nhiệm vụ) trong quá trình kiểm tra khả năng sử dụng

- _ Nhiệm vụ: Các nhiệm vụ trong bai kiểm tra khả năng sử dụng là các hoạt động

thực tế do điều phối viên đã chuẩn bị và người tham gia cần phải thực hiện

1.3.3 Cac phương pháp tiễn hành Usability Testing

Trong tat cả các framework (khung) dé xây dựng sản phẩm sé, thì bước nghiêncứu (đồng cảm, tìm điểm đau của người dùng) luôn là bước đầu tiên trước khi đưa racác ý tưởng nào đó Đối với việc cải thiện một sản phẩm cũ, Usability Testing là một

Bùi Thị Hương 24

Đồ án tốt nghiệp Đại học CHƯƠNG 1

bước vô cùng quan trọng dé có thé kiểm tra tinh khả năng sử dụng dụng của tính

năng/sản phẩm đó đã đảm bảo hay chưa Ngoài việc làm Usability Testing trên một

sản phẩm đã có san, Usability Testing cũng có thé tiến hành trên một sản phẩm đangđược triển khai bằng việc kiểm tra trên wireframe ở giai đoạn đầu trên phiên bản Lowfidelity prototype (bản mau thiết kế tương tác với độ trung thực thấp) dé có thể pháthiện sớm những vấn đề người dùng gặp phải

Tùy thuộc vào độ lớn của dự án, độ to của ngân sách, độ dài của thời gian cho

phép sẽ có những phương pháp dé tiến hành Usability Testing Theo quyền sách UX

Research của tác giả Đỗ Thùy Linh và Khúc Cẩm Huyên đã đưa ra 3 phương phápchính như sau:

- In field hoặc in lab:

+ In field: là hình thức Usability Testing mà người dùng được kiểm tra sản

phẩm tại môi trường thực tế của họ: nhà, văn phòng, cửa hàng Phương pháp này giúp quan sát được hành vi, thói quen và nhu cầu của

người dùng một cách tự nhiên và chân thực.

+ In lab: là một hình thức Usability Testing được tiễn hành tại một không

gian được bố trí riêng cho mục đích này, với sự trang bị của các thiết bị

và phần mềm chuyên dụng Hình thức này giúp quan sát và ghi nhận

được các chỉ số và phản ứng của người dùng một cách chính xác

- Moderated hoặc unmoderated:

+ Moderated (có điều phối): Trong quá trình thực hiện Usability Testing,

nghiên cứu viên sẽ ngồi cùng với ứng viên và đưa ra hướng dẫn trực tiếpsau đó sẽ ngồi quan sát trực tiếp những thao tác của ứng viên và đồnghành cùng ứng viên trong quá trình thực hiện nhiệm vụ Ngoài ra, khi kếtthúc nhiệm vụ, nghiên cứu viên có thé đặt vài câu hỏi dé hiểu sâu hơn

+ Unmoderated (không điều phối): Ứng viên sẽ được giao nhiệm và tự

mình chủ động đọc các hướng dẫn cũng như thực hiện nhiệm vụ mà không có sự giám sát của nghiên cứu viên Mọi hoạt động của ứng viên

trong quá trình kiểm tra khả năng sử dụng sẽ được ghi lại video nhằmphục vụ cho quá trình phân tích hành vi sau này.

- Remote hoặc in-person:

+ Remote: là hình thức lam Usability Testing từ xa, khi ứng viên không có

khả năng đến trực tiếp nơi công ty hoặc nơi có Usability Testing lab đểthực hiện Do vậy, người dùng sẽ được kiểm tra qua các kênh trực tuyến

như: video call, google meet, zoom

Bùi Thị Hương 25