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: Nguyễn Mạnh Thanh MSSV: 21522878 Phan Yến Nhi MSSV: 21522871 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 Thiết kế Giao diện Người dùng BẢNG PHÂN 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ọ 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 diện Người dùng LỜI MỞ ĐẦU … … Sau đây, nhóm chúng tơi trình bày phần mềm, quy trình thiết kế giao diện giao diện hoàn chỉnh qua 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 diện 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 Thiết kế Giao diện Người dùng DANH MỤC CÁC BẢNG, HÌNH ẢNH Danh mục bảng: Danh mục 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 MỤC LỤC LỜI MỞ ĐẦU DANH MỤC CÁC BẢNG, HÌNH ẢNH Chương 1: KHẢO SÁT, PHÂN TÍCH, THAM KHẢO 1.1 Khảo sát yêu cầu khách hàng phân tích yêu cầu 1.1.1 Khảo sát yêu cầu: 1.1.2 Phân tích yêu cầu đề xuất giải pháp .7 1.2 Tìm hiểu, nghiên cứu ứng dụng liên quan 1.2.1 Ứng dụng 1.2.2 Ứng dụng 1.3 Rút kinh nghiệm Chương 2: PHÁC THẢO GIAO DIỆN 2.1 Bản phác thảo… 2.2 Bản phác thảo website …… Chương 3: GIAO DIỆN WEBSITE HOÀN CHỈNH 3.1 Giao diê Zn website … 3.2 ……… 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 – Thiết kế Giao diện Người dùng CHƯƠNG 1: KHẢO SÁT, PHÂN TÍCH, THAM KHẢO 1.1 Khảo sát yêu cầu khách hàng phân tích yêu cầu 1.1.1 Khảo sát u cầu: Phân tích tìm hiểu hoạt động người dùng thông qua câu hỏi khảo sát: Đối tượng khảo sát:  Học sinh độ tuổi từ tới 18 tuổi  Sinh viên  Ngườ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 website trung tâm tiếng anh: thông tin trung tâm, thông tin học phí, khóa học, chứng tiếng anh loại gì, địa điểm, giáo viên, thành tích đạt blah blah (-> xu hướng thông tin ưu tiên hiển thị)  Bạn thích loại Font nào: Times New Roman / Calibri / Firacode / JetBrainsMono / Iosevka (show hình font chữ khác nhau)  Bạn thấy thu hút logo ? (show ILA, BC logo -> xu hướng logo u thích hơn)  Bạn có hay sử dụng giao diện tối điện thoại không? (-> xu hướng giao diện ưu tiên tối ưu)  Giao diện hệ điều hành sau làm bạn cảm thấy thân thiện sử dụng android, iOS, windows, mac (-> xu hướng tương thích website)  Bạn thích ca sĩ US/UK ? (lifestyle :))) =>  Bạn dùng điện thoại ngày -> Có cần trọng vào giao diện cho di động hay không Kết khảo 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 đề xuất giải pháp  Website thân thiện người dùng (đây 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 hiển thị trang chủ: Chứng 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 nhiều giao diện khác 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 giao diện di động  Thống kê inside 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: https://yola.vn/ Ưu điểm:  Website load nhanh top tìm kiếm google  Giao diện 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 thơng tin dễ dàng đầy đủ  Sử dụng từ khóa (keywords) mảng hot giáo dục anh ngữ 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 update hình ảnh khuyến mãi, bậc trọng tâm  Trung tâm Yola có apps quản lý riêng tránh việc quản lý thơng tin chương trình riêng hoạt động hiệu thay sử dụng website Nhược điểm:  Mới vào trang website phần điền thơng tin, khiến khó chịu chưa kiếm thơng tin  Để thêm thơng tin liên hệ Facebook góc phải có hình ảnh thêm để trực quan  Phong màu chủ đạo nhạt 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 diện Người dùng 1.2.2 VUS: https://vus.edu.vn/ Ưu điểm:  Có tính dễ sử dụng tốt (khi vào trang web thông tin cần thiết dễ dàng người dùng nhìn thấy chương trình khuyến mãi, tìm khóa học, hotline)  Thanh điều hướng ln xuất giúp người dùng dễ di chuyển qua lại mục  Dễ học cách sử dụng, thông tin trình bày dễ hiểu  Tiện dụng tốt, cung cấp shortcut để liên lạc Nhược điểm:  Quá nhiều nội dung 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: https://ila.edu.vn/ Ưu điểm:  Thơng tin khóa học ưu tiên hiển thị trang chủ, dễ dàng cho người dùng tìm đến khóa học muốn 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 Thiết kế Giao diện Người dùng  Có điều hướng ngang dọc, dễ dàng điều hướng người dùng đến trang khác Nhược điểm:  Ít sử dụng ICON: chiếm đa số website button bo tròn text  Font chữ nhỏ so với hình ảnh  Q nhiều Navigation tab, khiến người khó xác định đề mục cần  Một số thông tin không rõ ràng gây hiểu nhầm Không đủ thơng tin người dùng tìm đến mong có thơng tin hướng dẫn, khóa học đề xuất tất tìm thấy 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 – Thiết kế Giao diện Người dùng -> 1.3 Rút kinh nghiệm  Màu sắc: chọn phong đỏ, xanh, vàng  Vì website thơng tin khơng u cầu đăng nhập dài dòng, cần tên phụ huynh số điện thoại  Chat box hỗ trợ 24/24 đối tượng bận rộn làm việc ban đêm hỏi chương trình cần thiết  Gắn để liên hệ facebook để liên kết nghe ý kiến khách hàng tốt để người học quan tâm 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  PHÁC THẢO 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 người dùng website nghe nhạc Từ khảo sát yêu cầu nhóm chúng em phác thảo … 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 diện Người dùng CHƯƠNG 2: GIAO DIỆN WEBSITE HOÀN CHỈNH 2.1 Giao diênv website … ……………… Hình 3.3: Giao diện website mẫu …………………Giao diê nZ website hình thành từ kết hợp bố cục website Themes, bạn thay đổi mô Zt hai yếu tố bạn nhâ Zn 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 CHƯƠNG 3: TƯƠNG TÁC GIAO DIỆN 3.1 Tương tác giao diện ………… tác thông minh với chuyển động hợp lý đánh giá cao trải nghiệm 3.2 Tạo tương tác ………… ………………….như thực tế Ví dụ: Tương tác giao diện trang chủ: Hình 4.4: Tương tác giao diện trang chủ Link thực nghiệm ứng dụng: https……… Nếu không mở thực nghiệm Cơ theo dõi video demo 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 Người dùng CHƯƠNG 4: KẾT LUẬN 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