Báo cáo đồ án môn thiết kế giao diện người dùng đề tài website trung tâm anh ngữ nhi phan

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA KHOA HỌC VÀ KĨ THUẬT THÔNG TIN

BÁO CÁO ĐỒ ÁN
MÔN THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

Đề tài: WEBSITE TRUNG TÂM ANH NGỮ
NHI PHAN

GVHD: ThS. Tạ Thu Thủy
Nhóm sinh viên thực hiện:
1. Nguyễn Mạnh Thanh

MSSV: 21522878

2. Phan Yến Nhi

MSSV: 21522871

3. Nguyễn Xuân Sang

MSSV: 21522875

 Tp. Hồ Chí Minh, 05/2023 


IE106 – Thiết kế Giao diện Người dùng

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
.............................................................................................................................................

.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................

……., ngày……...tháng……năm 20…
Người nhận xét
(Ký tên và ghi rõ họ tên)

2|Page


BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

IE106 Thit k Giao din Ngi dựng

BNG PHN CễNG, ĐÁNH GIÁ THÀNH VIÊN:
Bảng 1: Bảng phân công, đánh giá thành viên
MSSV
Họ và tên
Nguyễn Mạnh Thanh 21522878
Phan Yến Nhi
21522871
Nguyễn Xuân Sang 21522875

Phõn cụng
-

ỏnh giỏ
-

3|Page

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan


BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

IE106 Thit k Giao din Ngi dựng

LI M U
...

Sau đây, nhóm chúng tơi sẽ trình bày về phần mềm, quy trình thiết kế giao diện
và giao diện hồn chỉnh qua các chương sau:
 Chương 1: Quy trình khảo sát phần mềm
 Chương 2: Thiết kế phác thảo giao diện
 Chương 3: Giao diện website hoàn chỉnh
 Chương 4: Tương tỏc giao din
Chng 5: Kt lun

4|Page

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan


BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

IE106 Thit k Giao din Ngi dựng

DANH MC CC BNG, HèNH NH
Danh mc cỏc bng:

Danh mc hỡnh nh:

5|Page

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan


BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

IE106 Thit k Giao din Ngi dựng

MC LC
LI M ĐẦU..........................................................................................................4
DANH MỤC CÁC BẢNG, HÌNH ẢNH................................................................5
Chương 1: KHẢO SÁT, PHÂN TÍCH, THAM KHẢO....................................7
1.1. Khảo sát yêu cầu khách hàng và phân tích yêu cầu......................................7
1.1.1. Khảo sát yêu cầu:..........................................................................................7
1.1.2. Phân tích yêu cầu và đề xuất giải pháp.........................................................7

1.2. Tìm hiểu, nghiên cứu ứng dụng liên quan.....................................................7
1.2.1. Ứng dụng 1................................................................................................... 7
1.2.2. Ứng dụng 2................................................................................................... 7

1.3. Rút ra kinh nghiệm........................................................................................7
Chương 2: PHÁC THẢO GIAO DIỆN..............................................................8
2.1. Bản phác thảo…............................................................................................8
2.2. Bản phác thảo website ……..........................................................................8
Chương 3: GIAO DIỆN WEBSITE HOÀN CHỈNH........................................9
3.1. Giao diê Zn website ….....................................................................................9
3.2. ………...........................................................................................................9
Chương 4: TƯƠNG TÁC GIAO DIỆN............................................................10
4.1. Tương tác giao diện.....................................................................................10
4.2. Tạo tương tác …………..............................................................................10
Chương 5: KẾT LUẬN.......................................................................................11
5.1. Ưu điểm.......................................................................................................11
5.2. Nhược điểm.................................................................................................11
5.3. Hướng phát triển..........................................................................................11
TÀI LIỆU THAM KHẢO.....................................................................................12
PHỤ LỤC (nếu cú).................................................................................................12

6|Page

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan


BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

IE106 Thit k Giao din Ngi dựng

7|Page

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan


BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

IE106 Thit k Giao din Ngi dựng

CHNG 1:

KHO ST, PHÂN TÍCH, THAM KHẢO

1.1. Khảo sát yêu cầu khách hàng và phân tích yêu cầu
1.1.1. Khảo sát yêu cầu:
Phân tích và tìm hiểu các hoạt động của người dùng thơng qua các câu hỏi khảo sát:
Đối tượng khảo sát:


Học sinh độ tuổi từ 6 tới 18 tuổi



Sinh viên



Người đi làm



Phụ huynh học sinh



Người có nhu cầu học tiếng Anh

Bộ câu hỏi khảo sát:


Họ tên (tùy chọn), giới tính, độ tuổi (-> xu hướng giới thích, độ tuổi truy cập
website)



Người dùng tìm kiếm thơng tin gì ở một website của trung tâm tiếng anh: thơng
tin trung tâm, thơng tin học phí, khóa học, chứng chỉ tiếng anh loại gì, địa điểm,
giáo viên, thành tích đạt được blah blah (-> xu hướng thơng tin được ưu tiên
hiển thị)



Bạn thích loại Font nào: Times New Roman / Calibri / Firacode /
JetBrainsMono / Iosevka (show 2 hình font chữ khác nhau)



Bạn thấy thu hút hơn bởi logo nào ? (show ILA, BC logo -> xu hướng logo
được u thích hơn)



Bạn có hay sử dụng giao diện tối trên điện thoại không? (-> xu hướng giao diện
được ưu tiên tối ưu)



Giao diện của hệ điều hành nào sau đây làm bạn cảm thấy thân thiện khi sử
dụng hơn android, iOS, windows, mac (-> xu hướng tương thích của website)



Bạn thích ca sĩ US/UK nào ? (lifestyle :))) =>



Bạn dùng điện thoại bao nhiêu giờ một ngày. -> Có cần chú trọng vào giao
diện cho di ng hay khụng.

Kt qu kho sỏt

8|Page

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan


BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

IE106 Thit k Giao din Ngi dựng

1.1.2. Phõn tớch yêu cầu và đề xuất giải pháp


Website thân thiện người dùng (đây là website thông tin hạn chế việc yêu cầu
đăng nhập hay phải nhập thêm số điện thoại, font size (Open Sans/ Lato/
Oswald/ Raleway)



Các thông tin được hiển thị ở trang chủ: Chứng chỉ tiếng anh, thành tích đạt
được, khóa học



Các thơng tin trang liên kết: thơng tin trung tâm, thơng tin giáo viên, học phí,
tìm trung tâm gần nhà, tìm khóa học => Hình ảnh trực quan: thêm vào phần
carousel.



Màu sắc phù hợp giáo dục: đỏ, vàng, xanh, cam. Khuyến nghị: đỏ, xanh, vàng.



Tương thích trên nhiều giao diện khác nhau như trên: sử dụng ngôn ngữ
HTML5.



Thời lượng sử dụng điện thoại => mức độ quan trọng của giao diện di động.



Thống kê inside bao nhiêu lượt truy cập.

1.2. Tìm hiểu, nghiên cứu ứng dụng liên quan
1.2.1. Yola: />
Ưu điểm:


Website load khá nhanh và top tìm kiếm trên google.



Giao diện về màu sắc phù hợp giáo dục: xanh, cam.



Thơng tin đầy đủ để người tìm hiểu khóa học tìm kiếm được thơng tin dễ dàng
và đầy đủ.



Sử dụng từ khóa (keywords) những mảng hot trong giáo dục anh ng hin ti l
IELTS.

9|Page

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan


BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

IE106 Thit k Giao din Ngi dựng



Thụng tin chớnh được update bằng hình ảnh như khuyến mãi, nổi bậc và trọng
tâm.



Trung tâm Yola có apps quản lý riêng tránh được việc quản lý thơng tin và các
chương trình riêng hoạt động hiệu quả thay vì chỉ sử dụng trên website.

Nhược điểm:


Mới vào trang website đã hiện ra phần điền thơng tin, khiến khó chịu vì chưa
kiếm được thơng tin gì.



Để thêm thơng tin liên hệ Facebook góc phải có hình ảnh thêm để trực quan
hơn.



Phong màu chủ đạo hơi nht.

10 | P a g e

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan


BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

IE106 Thit k Giao din Ngi dựng

1.2.2. VUS: />u điểm:


Có tính dễ sử dụng tốt (khi vào trang web các thơng tin cần thiết dễ dàng được
người dùng nhìn thấy như các chương trình khuyến mãi, tìm khóa học, hotline)



Thanh điều hướng luôn xuất hiện giúp người dùng dễ di chuyển qua lại giữa các
mục.



Dễ học cách sử dụng, các thơng tin được trình bày dễ hiểu.



Tiện dụng tốt, cung cấp các shortcut để liên lạc.

Nhược điểm:


Quá nhiều nội dung trên trang chủ gây phân tâm



Dẫn link đến nhiều nơi tạo bất ngờ cho người dùng.

1.2.3. ILA: />Ưu điểm:


Thông tin khóa học được ưu tiên hiển thị ở trang chủ, dễ dàng cho người dùng
tìm đến khóa học mình mun

11 | P a g e

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan


BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

IE106 Thit k Giao din Ngi dựng



Cú 2 thanh điều hướng ngang và dọc, dễ dàng điều hướng người dùng đến các
trang khác.

Nhược điểm:


Ít sử dụng ICON: chiếm đa số trên website là các button bo tròn của text.



Font chữ nhỏ so với hình ảnh



Quá nhiều Navigation tab, khiến người khó xác định đề mục nào mình cần



Một số thông tin không rõ ràng gây hiểu nhầm. Không đủ thơng tin vì khi người
dùng tìm đến đây sẽ mong có thơng tin hướng dẫn, khóa học đề xuất nhưng tất
cả những gì tìm thấy chỉ là thơng tin chung.

12 | P a g e

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

IE106 Thit k Giao din Ngi dựng

->

1.3. Rỳt ra kinh nghiệm


Màu sắc: chọn phong đỏ, xanh, vàng.



Vì là website thơng tin khơng u cầu đăng nhập q dài dịng, chỉ cần tên phụ
huynh và số điện thoại.



Chat box hỗ trợ 24/24 đối với các đối tượng bận rộn hoặc làm việc ban đêm hỏi
chương trình cần thiết.



Gắn để liên hệ facebook để có thể liên kết và nghe được ý kiến khách hàng tốt
hơn để người học quan tâm có thể dễ dàng truy cập xem feedback tốt từ trung
tõm.

13 | P a g e

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan


BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

IE106 Thit k Giao din Ngi dựng


PHC THO GIAO DIỆN

1.4. Bản phác thảo…..
-

……..

Hình 2.1: Bản phác thảo thử nghiệm

1.5. Bản phác thảo website …….
……..

Hình 2.2: Yêu cầu của người dùng về website nghe nhạc

Từ khảo sát yêu cầu nhóm chỳng em phỏc tho

14 | P a g e

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan


BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

IE106 Thit k Giao din Ngi dựng

CHNG 2:

GIAO DIN WEBSITE HỒN CHỈNH

2.1. Giao diênv website …
………………...

Hình 3.3: Giao diện website mẫu

…………………Giao diê nZ của website được hình thành từ sự kết hợp giữa bố
cục website và Themes, nếu bạn thay đổi mô Zt trong hai yếu tố này bạn sẽ nhâ Zn được
giao diê Zn khác……………………….

2.2. ………
……………………………………………….

15 | P a g e

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan


BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

IE106 Thit k Giao din Ngi dựng

CHNG 3:

TNG TC GIAO DIỆN

3.1. Tương tác giao diện
………… tác thông minh với các chuyển động hợp lý và được đánh giá cao về
trải nghiệm.

3.2. Tạo tương tác …………..
………………….như thực tế.
Ví dụ: Tương tác trên giao diện trên trang chủ:

Hình 4.4: Tương tác trên giao diện trên trang chủ

Link thực nghiệm ứng dụng: https……….
Nếu khơng mở thực nghiệm được thì Cơ có thể theo dõi video demo của nhóm chúng
em: Link videos:
https://

-

16 | P a g e

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan


BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

IE106 Thit k Giao din Ngi dựng

CHNG 4:

KT LUN

4.1. Ưu điểm
………
……
……….

4.2. Nhược điểm
…….
…………
……………

4.3. Hướng phát triển
…………….
……….

17 | P a g e

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan


BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan

BĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phanBĂo.cĂo.ỏằ.Ăn.mn.thiỏt.kỏ.giao.diỏằn.ngặỏằãi.dạng.ỏằã.ti.website.trung.tÂm.anh.ngỏằ.nhi.phan