TRƯỜNG ĐẠI HỌC MỞ HÀ NỘI

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO BÀI TẬP LỚN

Thiết kế trải nghiệm người dùng
Tên đề tài: Xây dựng giao diện người dùng ứng
dụng theo dõi học tập sinh viên

Giảng viên hướng dẫn : Dương Chí Bằng

Sinh viên thực hiện : Nguyễn Hoàng Anh - 21A100100017
: Vũ Việt Hưng - 21A100100176
: Chu Bảo Phúc - 21A100100288
: Dương Thế Sỹ - 21A100100324
: Đồng Minh Trí - 21A100100393

Hà Nội, năm 2024

Mục lục
Chương 1: Giới thiệu đề tài....................................................................................5
1. Tên đề tài.........................................................................................................5
2. Mục tiêu của đề tài.........................................................................................5
3. Kết quả mong muốn.......................................................................................5
Chương 2: Cơ sở lý thuyết......................................................................................5
1. UX/UI là gì......................................................................................................5
1.1. Lịch sử ra đời............................................................................................5
1.2. Khái niệm..................................................................................................6
2. Phương pháp nghiên cứu...............................................................................7
2.1. Phỏng vấn..................................................................................................7
2.2. Bảng hỏi....................................................................................................7
2.3. Quan sát....................................................................................................7
2.4. Tài liệu.......................................................................................................8
3. Các quy trình thiết kế....................................................................................8
3.1. Foundational Research............................................................................8
3.2. Design Thinking.....................................................................................10
3.3. Double Diamond.....................................................................................12
3.4. Learn UX Design....................................................................................14
4. Phương pháp đánh giá.................................................................................14
4.1. Usability Testing.....................................................................................14
4.2. Heuristic Evaluation và kỹ thuật Nielsen Heuristics..........................15
4.3. A/B Testing.............................................................................................16
Chương 3: Phân tích và thiết kế ứng dụng..........................................................16
3.1. Phân tích và xây dựng chức năng ứng dụng...........................................16
3.2. Sơ đồ hóa các chức năng...........................................................................17
3.3. Nghiên cứu người dùng.............................................................................18

2
 3.4. Triển khai xây dựng chức năng...............................................................24
3.5. Đánh giá.....................................................................................................38
Chương 4: Triển khai............................................................................................54
4.1. Ý tưởng triển khai.......................................................................................54
4.2. Triển khai....................................................................................................55
4.3. Thiết kế (Prototype)..................................................................................57
4.4. Đánh giá sản phẩm trên bản prototype...................................................59
4.5. Kết luận......................................................................................................59

3
Phân công công việc
Chương 1 Chương 2 Chương 3 Chương 4
Đồng Minh Khái niệm Triển khai xây Kết luận
Trí UX/UI dựng chức Prototype
năng
Chu Bảo Phúc Phương pháp Triển khai xây Kết luận
nghiên cứu dựng chức Prototype
người dùng năng
Dương Thế Sỹ Phương pháp Ý tưởng thiết Kết luận
đánh giá kế, triển khai Prototype
xây dựng
chức năng
Vũ Việt Hưng Kết quả mong Phương pháp Xây dựng Kết luận
muốn nghiên cứu mục tiêu ứng Prototype
người dùng dụng, triển
khai xây dựng
chức năng
Nguyễn Mục tiêu đề Phương pháp Sơ đồ hóa Kết luận
Hoàng Anh tài nghiên cứu chức năng, Prototype
người dùng, triển khai xây
Quy trình thiết dựng chức
kế, phương năng, đánh giá
pháp đánh giá chức năng

4
Chương 1: Giới thiệu đề tài
1. Tên đề tài
Xây dựng giao diện trải nghiệm người dùng cho ứng dụng theo dõi học tập sinh
viên
2. Mục tiêu của đề tài
Nghiên cứu, đánh giá và phân tích nhu cầu, hành vi, thói quen, khả năng của người
dùng. Từ đó rút ra được những ý tưởng, phong cách trong việc thiết kế một phần
mềm/ứng dụng với vai trò là người phát triển dựa trên những yếu tố đã thu thập
được từ người dùng.
Lựa chọn đề tài xây dựng giao diện cho ứng dụng theo dõi học tập sinh viên, nhóm
nhận thấy sinh viên đang sử dụng điện thoại để tra cứu lịch học, lịch thi, kết quả
học tập hằng ngày. Vì vậy nhóm muốn phát triển một ứng dụng có trải nghiệm
người dùng tốt hơn cho sinh viên
3. Kết quả mong muốn
Từ những phân tích người dùng, thiết kế được một giao diện hoàn chỉnh cho một
ứng dụng theo dõi học tập sinh viên, có khả năng tương thích và đáp ứng được các
nhu cầu của người dùng, nâng cao sự trải nghiệm của người dùng.

Chương 2: Cơ sở lý thuyết
1. UX/UI là gì
1.1. Lịch sử ra đời
- Những năm 1940-1950: Bắt đầu với những nghiên cứu về tâm lý học học và
thực hành, tập trung vào việc cải thiện trải nghiệm của người sử dụng trong
các tình huống cụ thể.
- Những năm 1970-1980: Xuất hiện các khái niệm quan trọng như "Human-
Computer Interaction" (Tương tác Con người - Máy tính), "User-Centered
Design" (Thiết kế lấy con người làm trung tâm), "Personas" và "Scenarios".
Những nghiên cứu này đặt nền móng cho sự phát triển của UX.
- Những năm 1990-2000: Sự phổ biến của Internet đã thúc đẩy sự quan tâm
vào trải nghiệm người dùng trên các trang web. Các doanh nghiệp bắt đầu
nhận ra rằng trải nghiệm tốt của người dùng là yếu tố quyết định thành công
của họ trên thị trường trực tuyến.
5
 - Những năm 2000-2010: Các công ty công nghệ lớn như Apple, Google,
Amazon chú trọng vào việc tạo ra sản phẩm và dịch vụ với trải nghiệm
người dùng tốt nhất. Công nghệ di động cũng trở nên phổ biến, mở ra cơ hội
mới để tối ưu hóa trải nghiệm người dùng trên các thiết bị di động.
- Những năm 2010-nay: UX trở thành một lĩnh vực quan trọng và ngày càng
được ứng dụng rộng rãi trong nhiều ngành công nghiệp. Các nhà thiết kế UX
và chuyên gia UX sử dụng nhiều phương pháp và công cụ khác nhau để đảm
bảo rằng sản phẩm và dịch vụ của họ mang lại trải nghiệm tốt nhất cho
người dùng.

1.2. Khái niệm

UX và UI là hai khía cạnh quan trọng của thiết kế sản phẩm số, với UX tập trung
vào trải nghiệm toàn diện của người dùng và UI tập trung vào việc thiết kế các yếu
tố trực quan của giao diện
User Experience (UX):
- UX (User Experience) là trải nghiệm của người dùng khi sử dụng sản phẩm
hoặc dịch vụ. Nó bao gồm mọi cảm nhận, ý kiến, tương tác và cảm xúc của
người dùng khi tương tác với sản phẩm.
- Mục tiêu của UX là tạo ra một trải nghiệm người dùng tích cực, thuận tiện
và thú vị, từ khi người dùng bắt đầu sử dụng sản phẩm đến khi hoàn thành
mục tiêu của họ.
- UX design đề xuất và triển khai các chiến lược và phương pháp để tối ưu
hóa trải nghiệm người dùng, bao gồm nghiên cứu người dùng, wireframing,
prototype, và kiểm tra người dùng.
User Interface (UI):
- UI (User Interface) là giao diện mà người dùng sử dụng để tương tác với sản
phẩm hoặc dịch vụ, bao gồm các phần tử như nút, hộp thoại, thanh trượt, và
biểu tượng.
- Mục tiêu của UI là tạo ra một giao diện trực quan, hấp dẫn và dễ sử dụng,
giúp người dùng tương tác với sản phẩm một cách hiệu quả và thuận tiện.
- UI design tập trung vào việc thiết kế các yếu tố trực quan của giao diện, bao
gồm bố cục, màu sắc, hình ảnh, phông chữ và các yếu tố thiết kế khác.

6
2. Phương pháp nghiên cứu
2.1. Phỏng vấn
- Phương pháp nghiên cứu phỏng vấn là một cách thu thập thông tin bằng
cách tiến hành cuộc trò chuyện cấu trúc hoặc không cấu trúc với người tham
gia để hiểu rõ hơn về ý kiến, kinh nghiệm, quan điểm và suy nghĩ của họ về
một chủ đề cụ thể. Có nhiều phương pháp phỏng vấn, bao gồm phỏng vấn
cấu trúc, không cấu trúc, bán cấu trúc, nhóm và điều tra.

2.2. Bảng hỏi

- Phương pháp nghiên cứu bảng hỏi là một cách để thu thập thông tin từ một
mẫu ngẫu nhiên hoặc đích danh của người tham gia thông qua việc gửi các
câu hỏi bằng văn bản hoặc điện tử. Dữ liệu thu thập từ bảng hỏi có thể là
định tính (ví dụ: ý kiến, quan điểm) hoặc định lượng (ví dụ: số liệu thống
kê), và thường được phân tích để tạo ra thông tin phản hồi về các vấn đề
hoặc mục tiêu nghiên cứu.
- Một bảng hỏi thường bao gồm các câu hỏi được thiết kế một cách có cấu
trúc hoặc bán cấu trúc, với mục tiêu thu thập dữ liệu chính xác và toàn diện
từ người tham gia. Các loại câu hỏi trong bảng hỏi có thể bao gồm câu hỏi
đóng (có các lựa chọn cho người tham gia để chọn), câu hỏi mở (yêu cầu
người tham gia trả lời bằng cách viết), và một số loại câu hỏi khác để thu
thập thông tin chi tiết và phản hồi đa dạng từ người tham gia.

2.3. Quan sát

- Phương pháp nghiên cứu quan sát là một phương pháp thu thập dữ liệu trong
nghiên cứu mà người nghiên cứu quan sát và ghi lại hành vi, hoạt động, và
các biểu hiện khác của đối tượng mà không có sự can thiệp hoặc tương tác
trực tiếp. Dữ liệu được thu thập từ phương pháp này thường là hiện trạng tự
nhiên của đối tượng và không bị ảnh hưởng bởi yếu tố nghiên cứu.
- Các biện pháp quan sát có thể bao gồm việc sử dụng các thiết bị ghi hình,
việc ghi chú tay, hoặc việc đặt người quan sát trực tiếp trong môi trường
nghiên cứu. Phương pháp này thường được sử dụng để nghiên cứu các hành
vi và tương tác xã hội tự nhiên của con người, động vật hoặc môi trường.

7
 2.4. Tài liệu
- Phương pháp nghiên cứu tài liệu là một phương pháp thu thập thông tin
trong nghiên cứu mà người nghiên cứu sử dụng các tài liệu tồn tại như sách,
báo cáo, bài báo, tài liệu hành chính, và các tài liệu khác để thu thập dữ liệu.
Thông tin trong các tài liệu này thường bao gồm những thông tin phản ánh,
phân tích, hoặc mô tả về một chủ đề cụ thể.
- Các bước chính của phương pháp này bao gồm xác định và thu thập các tài
liệu liên quan đến chủ đề nghiên cứu, đọc và hiểu nội dung của các tài liệu
này, rút ra những thông tin quan trọng, và phân tích và giải thích thông tin
để trả lời câu hỏi nghiên cứu.

3. Các quy trình thiết kế

3.1. Foundational Research
- Nghiên cứu người dùng
+) Xác định mục tiêu nghiên cứu: Định rõ mục đích và phạm vi đối tượng
của nghiên cứu.
+) Thu thập dữ liệu: Sử dụng các phương pháp như: khảo sát, quan sát,
phỏng vấn, bảng hỏi.
- Nghiên cứu ngữ cảnh
+) Xác định mục tiêu: Định rõ mục đích và phạm vi của ngữ cảnh.
+) Thu thập dữ liệu: Sử dụng các phương pháp như:
 Quan sát ngữ cảnh (Contextual Observation): Quan sát trực tiếp
người dùng trong môi trường thực tế của họ khi sử dụng sản phẩm
hoặc dịch vụ để hiểu rõ hành vi, thói quen và bối cảnh sử dụng.
 Quan sát tham gia (Participant Observation): Nhà nghiên cứu trực
tiếp tham gia vào hoạt động của người dùng để trải nghiệm và quan
sát trong bối cảnh thực tế.
 Phỏng vấn ngữ cảnh (Contextual Interviews): Phỏng vấn người
dùng trong môi trường thực tế của họ để thu thập thông tin chi tiết
về bối cảnh sử dụng, thách thức và nhu cầu.

8
  Lập bản đồ ngữ cảnh (Contextual Mapping): Vẽ bản đồ hoặc sơ đồ
mô tả môi trường vật lý, xã hội và văn hóa mà người dùng sẽ sử
dụng sản phẩm.
 Nghiên cứu dữ liệu môi trường (Environmental Data Collection):
Thu thập dữ liệu về các yếu tố môi trường như ánh sáng, nhiệt độ,
tiếng ồn, v.v. ảnh hưởng đến trải nghiệm người dùng.
- Phân tích
+) Phân tích các công việc vào quy trình mà người dùng cần thực hiện để đạt
được hành vi của họ
+) Một số phương pháp chính trong phân tích công việc bao gồm:
 Phân tích hiệu năng (Performance Analysis): Quan sát và ghi lại
từng bước người dùng thực hiện để hoàn thành một nhiệm vụ cụ thể.
 Phân tích lập trình (Hierarchical Task Analysis): Xác định và sắp xếp
các công việc theo cấu trúc phân cấp từ mục tiêu chung đến các nhiệm
vụ con cụ thể.
 Phân tích công việc tri nhận (Cognitive Task Analysis): Tập trung
vào việc phân tích các quá trình nhận thức như ra quyết định, giải
quyết vấn đề khi người dùng thực hiện công việc.
 Phỏng vấn quy trình (Process Interviews): Phỏng vấn người dùng về
các bước và quy trình họ thực hiện để hoàn thành công việc.
 Phân tích lỗi (Error Analysis): Xác định và phân tích các lỗi, khó
khăn mà người dùng gặp phải trong quá trình thực hiện công việc.
- Nghiên cứu cạnh tranh
+) Phân tích các sản phẩm và dịch vụ tương tự trên thị trường để xác định
điểm mạnh, điểm yếu và cơ hội cải tiến.
+) Một số phương pháp chính trong nghiên cứu cạnh tranh bao gồm:
 Đánh giá tính năng (Feature Evaluation): Xem xét, đánh giá và so sánh
các tính năng, chức năng của sản phẩm cạnh tranh.
 Phân tích giao diện người dùng (UI Analysis): Đánh giá và phân tích
thiết kế giao diện người dùng, trải nghiệm sử dụng của sản phẩm đối thủ.
 Nghiên cứu đánh giá trực tuyến (Online Rating Research): Xem xét đánh
giá, nhận xét của người dùng trên các trang web, diễn đàn về sản phẩm
cạnh tranh.

9
  Phân tích thị trường (Market Analysis): Nghiên cứu thị phần, vị trí
cạnh tranh, chiến lược kinh doanh của các đối thủ trên thị trường.
 Thử nghiệm sử dụng (Usability Testing): Thực hiện kiểm tra tính dễ sử
dụng và đánh giá trải nghiệm người dùng với sản phẩm của đối thủ cạnh
tranh.
 Phân tích SWOT: Xác định điểm mạnh (Strengths), điểm yếu
(Weaknesses), cơ hội (Opportunities) và đe dọa (Threats) của sản phẩm
đối thủ so với sản phẩm của mình.
- Khả thi
+) Đánh giá các yếu tố kỹ thuật, tài chính, pháp lý và tổ chức ảnh hưởng đến
việc phát triển sản phẩm.
+) Một số khía cạnh chính được xem xét trong nghiên cứu khả thi bao gồm:
 Nghiên cứu kỹ thuật (Technical Feasibility): Đánh giá khả năng
thực hiện về mặt công nghệ, cơ sở hạ tầng và kỹ thuật hiện có. Xem
xét yêu cầu về phần cứng, phần mềm, tài nguyên và khả năng tích
hợp.
 Nghiên cứu tài chính (Financial Feasibility): Phân tích chi phí phát
triển, vận hành, doanh thu và lợi nhuận tiềm năng. Đánh giá nguồn
lực tài chính và khả năng đầu tư.
 Nghiên cứu thị trường (Market Feasibility): Đánh giá nhu cầu thị
trường, mức độ chấp nhận của khách hàng và cạnh tranh. Phân tích cơ
hội thị trường và tiềm năng phát triển.
 Nghiên cứu pháp lý và quy định (Legal and Regulatory Feasibility):
Xem xét các quy định, luật pháp, chính sách liên quan đến sản phẩm
hoặc dịch vụ. Đánh giá rủi ro pháp lý và tuân thủ.
 Nghiên cứu tổ chức (Organizational Feasibility): Đánh giá năng lực,
nguồn lực và sự sẵn sàng của tổ chức để thực hiện dự án. Xem xét yếu
tố văn hóa, cơ cấu và quy trình tổ chức.

3.2. Design Thinking

- Empathize (Đồng cảm)
+) Bước này yêu cầu bạn tìm hiểu về tập khách hàng mục tiêu của bạn, tức
những người có vấn đề mà bạn đang tìm cách giải quyết, nhằm đạt được sự
đồng cảm với họ.
10
 +) Dựa vào việc quan sát, trải nghiệm thực tế trong tình huống của khách
hàng để có cảm nhận sâu sắc và tư duy hợp lý hơn. Từ đó biết được khó
khăn của khách hàng trước vấn đề đó là gì.
- Define (Xác định)
+) Trong bước này, các dữ liệu và thông tin thu thập được ở bước “Đồng
cảm” sẽ được tổng hợp, liên kết lại với nhau để phân tích và xác định trọng
tâm của vấn đề.
+) Công cụ cần sử dụng trong bước này là:
 Fishbone diagram.( trình bày lại những dữ kiện đã được liệt kê ra từ
bước đầu tiên)
 5-Whys: Công cụ cực hữu dụng để tìm ra nguyên nhân gốc rễ (root-
cause). Từ một câu hỏi Why ban đầu, chúng ta có thể tiếp tục đào sâu
nguyên nhân bằng những câu hỏi Why tiếp theo cho đến khi vấn đề đó
được đánh giá là cốt lõi.
 Kipling's questions giúp hỗ trợ thu thập dữ liệu cho dữ kiện đó một
cách toàn diện về không gian, thời gian, con người, cách thức. Nhờ trả
lời những câu hỏi sau: What, Where, When, Who, How

- Ideate (Lên ý tưởng)

+) Phát triển các ý tưởng: Sử dụng kỹ thuật tư duy sáng tạo như:
 Brainstorming(Vận dụng trí tuệ tập thể để giải quyết vấn đề phức tạp):
Tổ chức phiên brainstorming để đội ngũ phát triển tạo ra nhiều ý
tưởng mới và đa dạng về giao diện, tính năng và trải nghiệm sử dụng
ứng dụng.
 Sử dụng phương pháp kích thích sáng tạo: Áp dụng các kỹ thuật như
mind mapping, SCAMPER để khuyến khích sự sáng tạo và tạo ra các
ý tưởng mới.
 Tạo ra các bản vẽ sơ bộ (Sketch): Vẽ các bản thiết kế sơ bộ hoặc
wireframe để biểu diễn ý tưởng và concept một cách trực quan.
 Sử dụng hệ thống thẻ (Card sorting): Sử dụng thẻ để tổ chức và phân
loại ý tưởng, giúp đội ngũ phát triển hiểu rõ hơn về ưu tiên và ưu
nhược điểm của từng ý tưởng.
- Prototype (Trực quan hóa)

11
 +) Xây dựng prototype sơ bộ: Sử dụng công cụ như Sketch, Figma, hoặc
Adobe XD để tạo ra các bản prototype sơ bộ của ứng dụng, tập trung vào
giao diện người dùng và luồng hoạt động cơ bản.
+) Sử dụng công cụ prototype tương tác: Sử dụng InVision, Marvel, hoặc
Axure để tạo ra các prototype tương tác có thể thử nghiệm được, bao gồm
tương tác với các phần như nút, trượt và tính năng cụ thể của ứng dụng.
+) Tạo prototype dựa trên nguyên tắc responsive design: Đảm bảo rằng các
prototype phản ánh tương thích trên nhiều thiết bị và màn hình khác nhau.
+) Sử dụng công cụ prototype tương tác: Sử dụng các phiên kiểm tra người
dùng hoặc thu thập ý kiến trực tiếp từ đội ngũ phát triển và người dùng tiềm
năng.
- Test (Kiểm tra)
+) Tổ chức phiên kiểm tra người dùng: Mời người dùng tham gia vào các
phiên kiểm tra để sử dụng và đánh giá các bản prototype của ứng dụng.
+) Thu thập phản hồi và dữ liệu: Ghi lại phản hồi và nhận xét từ người dùng
về trải nghiệm của họ khi sử dụng các bản prototype, cũng như thu thập dữ
liệu về tương tác và hiệu suất của ứng dụng.
+) Phân tích và đánh giá kết quả: Phân tích phản hồi và dữ liệu thu thập
được từ phiên kiểm tra người dùng để xác định các vấn đề và điểm cần cải
thiện trong giao diện người dùng và trải nghiệm sử dụng của ứng dụng.
+) Điều chỉnh và cải tiến: Dựa trên phản hồi và dữ liệu thu thập được, điều
chỉnh và cải tiến các tính năng và giao diện người dùng của ứng dụng để tối
ưu hóa trải nghiệm sử dụng.

3.3. Double Diamond

- Khám phá (Discover)
+) Thu thập thông tin và nghiên cứu về thị trường, sản phẩm cạnh tranh,
người dùng, vấn đề, nhu cầu và xu hướng.
+) Sử dụng các phương pháp như nghiên cứu ngữ cảnh, đánh giá cạnh tranh,
tìm hiểu xu hướng và phân tích dữ liệu.

12
 +) Kết thúc ta có Problem statement (Báo cáo vấn đề), User personas, Bản
đồ hành trình khách hàng, Empathy map (Bản đồ đồng cảm).
- Xác định (Define)
+) Trong giai đoạn này, nhóm thiết kế sẽ sử dụng các dữ liệu nghiên cứu
từ giai đoạn đầu tiên để xác định vấn đề và cách nó tác động đến người
dùng. Nhóm thiết kế có thể lặp lại 1 đến 2 lần để tìm ra vấn đề cốt lõi.
+) Một số tư liệu trải nghiệm người dùng mà nhà thiết kế có thể tạo ra bao
gồm: User personas, Mô tả vấn đề (Problem statement), Bản đồ đồng cảm
(Empathy map),…
+) Để những thông tin thu được có thể ứng dụng, nhóm thiết kế cần tổng
hợp nghiên cứu với các bước:
 Gộp nhóm thông tin theo chủ đề.
 Tìm insight xây dựng khu vực cơ hội: Nhu cầu thị trường, trend, thấu
hiểu người dùng, lỗ hổng trong sản phẩm hiện tại, mức độ cạnh tranh,
phân tích dữ liệu và số liệu,…
 Tạo các câu hỏi HMW (How Might We - giả thuyết): Cái nào có
ý nghĩa nhất? Nên ưu tiên phương án nào trước? Cái nào có thể
thực hiện được?...

- Phát triển
+) Phát triển là giai đoạn tập trung vào tạo ra các giải pháp cụ thể để giải
quyết vấn đề đã được xác định trong giai đoạn Define. Các hoạt động trong
giai đoạn Develop bao gồm:
 Tạo ra các giải pháp: Sử dụng các kỹ thuật tư duy, sáng tạo như
brainstorming, sketching, prototyping để tạo ra các giải pháp mới và
đa dạng. Các giải pháp sẽ được đánh giá và chọn lựa để tiếp tục phát
triển.
 Xây dựng Prototype: Tạo ra các mô hình hoặc các sản phẩm
nguyên mẫu để kiểm tra tính khả thi và hiệu quả của giải pháp. Sản
phẩm nguyên mẫu cũng giúp phản hồi sớm về các vấn đề và cải
tiến.
 Kiểm tra tính khả thi về mặt kỹ thuật: Kiểm tra khả năng thiết kế, sản
xuất và triển khai giải pháp. Các vấn đề kỹ thuật được giải quyết để
đảm bảo tính khả thi của sản phẩm.
13
  Kiểm tra tính khả thi của Business: Đánh giá chi phí sản xuất, mức độ
tiêu thụ, chi phí marketing, bán hàng. Các phương án tối ưu sẽ được
chọn để giảm thiểu chi phí và tăng hiệu quả kinh tế, tức tối ưu Return
on Investment (ROI).
- Thực thi
+) Sau khi tìm ra 1 giải pháp duy nhất, nhà thiết kế tiến hành thử nghiệm
tiếp để hoàn thiện prototype cuối cùng, tập trung vào khả năng sử dụng và
trải nghiệm người dùng để đảm bảo kết quả cuối cùng đáp ứng yêu cầu thiết
kế và các bên liên quan.
+) Nếu nhà thiết kế gặp vấn đề, quay trở lại giai đoạn 3 để tìm giải pháp, lặp
lại (iterate) và thử nghiệm (test) cho đến khi tìm ra 1 giải pháp tốt nhất.
+) Khi việc tạo prototype và thử nghiệm hoàn tất, nhóm thiết kế chuẩn bị
chuyển giao thiết kế, gồm tài liệu, chú thích, tài sản, các hướng dẫn khác mà
các kỹ sư sẽ sử dụng để phát triển sản phẩm cuối cùng để phát hành.
+) Cuối cùng, nhóm thiết kế phải tiến hành kiểm tra UX và đảm bảo chất
lượng để đảm bảo rằng phiên bản cuối cùng đáp ứng yêu cầu dự án, mục tiêu
kinh doanh và nhu cầu người dùng.

3.4. Learn UX Design

- Think (Suy nghĩ): Kết quả, giả định, nghiên cứu người dùng, lên ý tưởng,
mô hình tư duy, sketch (bản phác thảo), storyboard (bảng phân cảnh)
- Make (Thực hiện): Wireframes (cấu trúc khung), prototypes, đề xuất giá
trị, những giả thuyết có cơ sở về sản phẩm.
- Check (Kiểm tra): Phân tích dữ liệu, kiểm tra tính khả dụng, phân tích phản
hồi của các bên liên quan và người dùng sản phẩm

4. Phương pháp đánh giá

4.1. Usability Testing
- Xác định mục tiêu kiểm tra: Xác định mục tiêu chính của cuộc kiểm tra
- Lựa chọn nhóm người dùng: Bạn cần lựa chọn các người dùng mẫu để
thực hiện kiểm tra. Những người này nên đại diện cho đối tượng người dùng
chính của sản phẩm của bạn.

14
- Xây dựng kịch bản kiểm tra: Bạn cần lập kế hoạch và xây dựng kịch bản
kiểm tra, bao gồm các nhiệm vụ cụ thể mà bạn muốn người dùng thực hiện
trên ứng dụng của mình.
 Các tiêu chí đánh giá Usability Testing:

+) Đánh giá thói quen người dùng

+) Đánh giá hiệu quả mang lại cho người dùng
+) Đánh giá khả năng dễ dùng, dễ tiếp cận
+) Đánh giá tính linh hoạt, độ tin cậy
+) Đánh giá sự hài lòng của người dùng
- Thực hiện kiểm tra: Làm việc với nhóm người dùng để thực hiện các nhiệm
vụ trong kịch bản kiểm tra và lắng nghe nhận xét của họ.
- Thu thập ý kiến: Thu thập ý kiến và đánh giá từ những người tham gia kiểm
tra về sản phẩm của bạn.
- Phân tích và đánh giá kết quả: Cần phân tích ý kiến và đánh giá từ những
người dùng để tìm ra những khoảng trống và điểm mạnh của sản phẩm.
- Tối ưu hóa sản phẩm: Dựa trên ý kiến và đánh giá của những người dùng,
cần phát triển các cải tiến và tối ưu hóa sản phẩm của mình để cải thiện khả
năng sử dụng.

4.2. Heuristic Evaluation và kỹ thuật Nielsen Heuristics

- Tính khả kiến: Hiển thị thông tin và các chức năng cần thiết một cách rõ
ràng và dễ hiểu.
- Hiệu quả: Người dùng có thể hoàn thành các nhiệm vụ một cách nhanh
chóng và dễ dàng.
- Sự hài lòng: Giao diện mang lại trải nghiệm sử dụng thú vị và hấp dẫn.
- Tính nhất quán: Sử dụng các quy ước thiết kế nhất quán trong toàn bộ giao
diện.
- Phòng ngừa lỗi: Hạn chế tối đa các lỗi do người dùng mắc phải.
- Nhận biết: Người dùng dễ dàng nhận biết các đối tượng và chức năng trên
giao diện.
- Khôi phục: Người dùng có thể dễ dàng sửa lỗi và quay lại trạng thái trước
đó.

15
 - Sự trợ giúp: Cung cấp trợ giúp và tài liệu hướng dẫn sử dụng dễ dàng truy
cập.
- Tính thẩm mỹ: Giao diện có thiết kế đẹp mắt và thu hút.
- Hiệu quả: Giao diện sử dụng hiệu quả các nguồn tài nguyên của hệ thống.
4.3. A/B Testing
- Xác định mục tiêu: Xác định mục tiêu cụ thể mà bạn muốn đạt được trong
A/B Testing
- Chọn yếu tố cần thử nghiệm: Xác định phần của giao diện mà bạn muốn
thực hiện thử nghiệm
- Tạo biến thể: Tạo ra ít nhất 2 biến thể (sản phẩm) cần sử dụng để thử
nghiệm
- Thực hiện thử nghiệm: Thực hiện bằng cách cho phép người dùng trải
nghiệm trên các biến thể đã xác định ở bước trên
- Phân tích kết quả: Phân tích dữ liệu thu thập được từ người dùng để đánh
giá biến thể tốt hơn
- Triển khai và theo dõi: Triển khai biến thể đã chọn và tiếp tục theo dõi
hiệu suất của nó sau khi triển khai. Điều này giúp đảm bảo rằng kết quả của
A/B test được duy trì và cải thiện theo thời gian

Chương 3: Phân tích và thiết kế ứng dụng

3.1. Phân tích và xây dựng chức năng ứng dụng
3.1.1.
Chức năng đăng nhập
 Header có Logo,tên trường đại học, tên ứng dụng.
 Mục đăng nhập có tài khoản , mật khẩu, và phần đăng nhập.
 Hỗ trợ đăng nhập nhanh qua hệ thống email sinh viên, sử dụng chính tài
khoản email sinh viên -> đăng nhập, phân quyền nhanh hơn
 Hệ thống cũng sẽ phản ứng lại khi thông tin đăng nhập chưa đúng hoặc
thiếu thông tin.

3.1.2. Trang chủ

 Trang chủ sẽ được hiển thị ngay khi đăng nhập thành công

16
  Header có phần xin chào sinh viên, sau đó là thông tin cơ bản về mã lớp
và ngành học
 Trang chủ có những thông tin như phần điểm TB tích lũy, ngành học
và số tín chỉ đã tích lũy, có hiển thị lịch học cơ bản theo tuần
 Footer có phần menu bao gồm các chức năng lịch học, lịch thi, kết quả
học tập và logo đi kèm

3.1.3. Chức năng xem lịch học

 Header có phần hiển thị đây là trang lịch học.
 Lịch học được hiển thị theo tuần , khi ấn vào một thứ hoặc ngày trong
tuần sẽ hiện ra lịch học.
 Lịch học bao gồm : Tên môn, số tiết, giáo viên giảng dạy, tên lớp tín
chỉ, phòng học và nơi học.
 Có phần tìm kiếm và xem lịch học theo từng học học kỳ, từng năm, từng
tuần.

3.1.4. Trang lịch thi

 Header có phần hiển thị đây là trang lịch thi.
 Lịch thi bao gồm : Tên môn thi , lớp tín chỉ , số tín chỉ , ngày thi ,
phòng thi, số báo danh
 Lịch thi sẽ hiển thị theo dạng list.
 Có phần menu ngày thi, khi ấn vào từng ngày sẽ chỉ hiển thị lịch thi của
ngày đó
 Có phần tìm và xem lịch thi theo học kỳ và theo năm.

3.1.5. Trang kết quả học tập

 Header có phần hiển thị đây là trang kết quả học tập.
 Kết quả học tập bao gồm :mã môn học, tên môn học, số tín chỉ, điểm hệ
4, điểm hệ 10, điểm hệ chữ
 Lịch học được hiển thị theo từng học kỳ
 Có phần tìm và hiển thị theo các học kỳ, các năm khác nhau

3.2. Sơ đồ hóa các chức năng

17
3.3. Nghiên cứu người dùng
- Đánh giá bằng phương pháp nghiên cứu người dùng: Bảng hỏi

18
19
20
Kết quả thu được sau khi khảo sát người dùng:

Bạn thường sử dụng ứng dụng quản lý sinh viên để làm gì?

Những tính năng nào bạn thấy hữu ích nhất trong ứng dụng hiện tại?

21
Có những tính năng nào bạn cảm thấy không cần thiết hoặc ít được sử dụng?

Có những tính năng nào làm bạn cảm thấy bối rối hoặc khó sử dụng?

Bạn thường sử dụng ứng dụng để ?

22
Bạn ưu tiên tính năng nào hơn?

- Sau khi sử dụng phương pháp nghiên cứu bảng hỏi, nhóm chốt các chức
năng: Chức năng đăng nhập, trang chủ, chức năng xem lịch học, chức năng
xem lịch thi, chức năng xem kết quả học tập.
- Sơ đồ hóa lại chức năng sau khảo sát:

23
Sơ đồ luồng chức năng:

3.4. Triển khai xây dựng chức năng

Sử dụng quy trình thiết kế Design Thinking
- Bước 1: Thấu hiểu / Đồng cảm (Empathize)
+) Quan sát và sử dụng phương pháp nghiên cứu bảng hỏi tệp người dùng
hướng tới sản phẩm là sinh viên.

24
25
Kết quả của nghiên cứu:

26
27
28
Từ kết quả khảo sát cho thấy:
 Phần lớn sinh viên đã chọn sử dụng ứng dụng điện thoại để theo dõi tiến độ
học tập, cho thấy sự ưa thích và thuận tiện của nền tảng di động trong việc
quản lý học tập.
 Các tính năng được sinh viên coi là quan trọng nhất trong ứng dụng bao gồm
lịch học, lịch thi và kết quả học tập. Điều này chỉ ra nhu cầu cơ bản của sinh
viên trong việc theo dõi các sự kiện và thành tích học tập.
 Họ cũng gặp khó khăn trong việc quản lý học tập, cho thấy nhu cầu trong
việc cung cấp các công cụ và hỗ trợ để tăng cường kỹ năng tổ chức và lập kế
hoạch.
 Sinh viên mong đợi ứng dụng có khả năng giúp lên kế hoạch học tập, thống
kê tiến độ học tập và phân tích thói quen học tập để giúp cải thiện hiệu quả
học tập của họ.

29
- Bước 2: Xác định (Define)
+) 5 why question:
 Tại sao cần một ứng dụng để xem lịch học của sinh viên?
Vì việc có thể xem lịch học trên điện thoại di động giúp sinh viên dễ dàng
quản lý thời gian và biết được các buổi học diễn ra trong tuần một cách
thuận tiện.
 Tại sao cần tính năng xem lịch học trong ứng dụng?
Để sinh viên có thể dễ dàng biết được thời gian, địa điểm và thông tin liên
quan đến các môn học trong tuần, từ đó chuẩn bị kế hoạch học tập hợp lý.
 Tại sao cần tính năng xem lịch thi trong ứng dụng?
Để sinh viên có thể dễ dàng biết được thời gian, địa điểm và thông tin liên
quan đến các kỳ thi trong học kỳ, từ đó chuẩn bị kế hoạch học tập và ôn thi
một cách hiệu quả.
 Tại sao cần cung cấp khả năng xem kết quả học tập trong ứng dụng?
Vì điều này giúp sinh viên theo dõi tiến độ học tập của mình, biết được kết
quả của các bài kiểm tra, bài tập và kỳ thi để có thể tự đánh giá và cải thiện
hiệu suất học tập.
 Tại sao chỉ cần chức năng đăng nhập mà không cần chức năng đăng
ký và lấy lại mật khẩu?
Bởi tài khoản sinh viên chứa thông tin nhạy cảm của sinh viên, vì vậy cần
được bảo mật tốt nhất nên việc đăng ký và lấy lại mật khẩu sẽ được thực
hiện trực tiếp bởi văn phòng khoa

+) Kipling's questions:
 Xây dựng ứng dụng theo dõi học tập sinh viên để làm gì
Ứng dụng giúp sinh viên theo dõi tiến độ học tập và thông tin lịch học, lịch
thi
 Xây dựng ứng dụng ở đâu
Xây dựng ứng dụng theo dõi học tập sinh viên trên điện thoại vì điện thoại là
một thiết bị luôn gắn liền với sinh viên
30
  Xây dựng khi nào
Triển khai xây dựng ngay lập tức, càng nhanh càng tốt
 Xây dựng ứng dụng cho ai
Ứng dụng theo dõi học tập sinh viên tập trung chính vào sinh viên
 Xây dựng như thế nào
Dựa vào các bản khảo sát, quy trình xây dựng, phương pháp đánh giá để cải
tiến liên tục cho phù hợp với người dùng. Hướng tới một thiết kế dễ dàng
tiếp cận với người dùng

+) Biểu đồ xương cá

- Bước 3: Lên ý tưởng (Idieate)

+) Chức năng đăng nhập sẽ có lựa chọn đăng nhập bằng tài khoản của
trường hoặc email của trường
+) Chức năng trang chủ sẽ bao gồm các thông tin cơ bản của chủ tài khoản
như tên, mã sinh viên, số tín chỉ tích lũy, trung bình chung tích lũy, menu
điều hướng sang các chức năng khác
+) Chức năng xem lịch học có thể lựa chọn xem bằng cách chọn kỳ, tuần,
ngày muốn xem. Các môn học phải hiển thị đầy đủ thông tin người dùng

31
 quan tâm như tên môn học, số tiết học, thời gian bắt đầu, giảng viên giảng
dạy, địa điểm học.
+) Chức năng xem lịch thi có thể lựa chọn xem bằng cách chọn kỳ học. Các
môn học trong danh sách sẽ hiển thị các thông tin như tên môn thi, lịch thi,
địa điểm thi
+) Chức năng xem kết quả hoc tập sẽ hiển thị các môn học đã tích lũy và các
môn học chưa đạt. Ngoài ra các môn học cũng hiển thị tên môn học, số
điểm, tình trạng đạt hay trượt

- Bước 4: Trực quan hóa (Prototype)

32
Thiết kế của Đồng Minh Trí

33
Thiết kế của Chu Bảo Phúc

34
Thiết kế của Dương Thế Sỹ

35
Thiết kế của Vũ Việt Hưng

36
Thiết kế của Nguyễn Hoàng Anh

37
3.5. Đánh giá
Nhóm sử dụng phương pháp đánh giá A/B Testing:
Bước 1: Xác định mục tiêu
- Mục tiêu của nhóm là dựa vào trải nghiệm của người thử nghiệm để đánh
giá và rút ra được bản thiết kế tối ưu nhất cho sản phẩm của mình
Bước 2: Chọn yếu tố cần thử nghiệm
- Thử nghiệm trên cả 5 chức năng được nhóm chốt và trên các giao diện của
từng thành viên trong nhóm
- Yếu tố để nhóm rút ra giao diện cuối cùng là sự dễ dàng khi sử dụng với
điều hướng, bố cục sắp xếp tốt, không rối mắt, đầy đủ các chức năng mà
người dùng mong muốn
Bước 3: Tạo biến thể
- Sử dụng 5 biến thể được chọn từ 3.4, là các bản thiết kế của các thành viên
Bước 4: Thực hiện thử nghiệm
- Cho phép người dùng (sinh viên) sử dụng các bản thiết kế, yêu cầu họ thực
hiện các chức năng đăng nhập, xem lịch học, xem lịch thi, xem kết quả học
tập và đánh giá vào bảng hỏi sau:

38
39
40
41
42
43
Bước 5: Phân tích kết quả

44
Giao diện đăng nhập

45
Giao diện trang chủ

46
47
Giao diện xem lịch học

48
49
Giao diện xem lịch thi

50
Giao diện xem kết quả học tập

51
52
Qua đó ta chốt được các bản thiết kế tương ứng:
- Đăng nhập bản thiết kế của Đồng Minh Trí

53
 - Trang chủ bản thiết kế của Chu Bảo Phúc
- Lịch học bản thiết kế của Vũ Việt Hưng
- Lịch thi bản thiết kế của Nguyễn Hoàng Anh
- Kết quả học tập bản thiết kế của Dương Thế Sỹ
Bước 6: Triển khai và theo dõi
- Triển khai các bản thiết kế đã chốt

Chương 4: Triển khai

4.1. Ý tưởng triển khai

54
4.2. Triển khai

55
56
4.3. Thiết kế (Prototype)

57
58
 4.4. Đánh giá sản phẩm trên bản prototype
 Giao diện trực quan : Giao diện đơn giản dễ nhìn dễ nắm bắt nhưng vẫn đầy
đủ các thông tin mà người sư dụng cần , sắp xếp các chức năng theo độ ưu
tiên sử dụng thường xuyên như lịch học rồi mới đến lịch thi , kết quả học tập
.
 Nắm bắt thông tin nhanh hơn : Thông tin thường xuyên sử dụng như lịch học
sẽ được đưa ngay vào trong giao diện trang chủ người dùng chỉ cần đăng
nhập là có thể lập tức xem được lịch học hôm nay không qua các thao tác
rườm rà .
4.5. Kết luận
 Đề tài đã thực hiện việc thiết kế giao diện theo dõi học tập đáp ứng nhu cầu
xem lịch học , lịch thi và điểm học phần . Qua việc áp dụng các phương
pháp nghiên cứu người dùng và quy trình đánh giá UX, sản phẩm thể hiệm
59
 đầy đủ chức năng cần thiết để đảm bảo tính hài lòng và sự thoả mãn của
người dùng.
 Hướng phát triển tiếp theo có thể bao gồm việc tối ưu hóa chức năng , bổ
sung tính năng mới và cải thiện giao diện người dùng dựa trên phản hồi từ
người dùng.
 Sản phẩm chủ yếu đến giao diện mobile thiết bị chủ yếu phổ biến sinh viên
hiện này , việc cung cấp thông tin học tập cho sinh viên ở mọi nơi có mạng
internet

60