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 ghi rõ họ tên) 2|Page 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 IE106 – Thiết 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 hồ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  Chương 5: Kết luận 4|Page 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 IE106 – Thiết kế Giao diện Người 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 IE106 – Thiết kế Giao diện Người dùng 7|Page 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 yê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 IE106 – Thiết kế Giao diện Người 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 IE106 – Thiết kế Giao diện Người 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 IE106 – Thiết 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 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 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  Quá 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 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 IE106 – Thiết kế Giao diện Người 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 IE106 – Thiết 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 IE106 – Thiết kế Giao diện Người 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 IE106 – Thiết kế Giao diện 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 IE106 – Thiết kế Giao diện Người dùng TÀI LIỆU THAM KHẢO Lê Thị Mỹ, “Ngoại giao Cộng hòa Nhân dân Trung Hoa 30 năm cải cách mở cửa (1978-2008)” Hà Nội: Nxb Khoa học Xã hội, 2007 T Tamminen, “Eutrophication and the Baltic Sea: Studies on Phytoplankton, Bacterioplankton and Pelagic Nutrient Cycles,” PhD thesis, University of Helsinki, Finland, 1990 T Trabasso and E Bouchard, “Teaching readers how to comprehend text strategically,” in Comprehension instruction: Research-based best practices, C C Block and M Pressley, Eds New York: The Guilford Press, 2002, pp 176–200 N C Trí, “Nâng cao lực cạnh tranh doanh nghiệp du lịch thành phố Hồ Chí Minh đến năm 2020,” Luận án Tiến sĩ kinh tế, Trường Đại học Kinh tế Tp HCM, 2011 Trần Minh Trí, “Ni tôm thẻ chân trắng trải bạt đáy,” 2015 [Trực tuyến] Địa chỉ: http://thuysanvietnam.com.vn/nuoi-tom-the-chan-trang-trai-bat-nen-dayarticle- 6651.tsvn [Truy cập lần cuối 21/7/2016] PHỤ LỤC (nếu có) 18 | P a g e