ĐẠ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 AN
Trang 1ĐẠ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:
Tp Hồ Chí Minh, 05/2023
Trang 2IE106 – 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)
Trang 3IE106 – 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
-Phan Yến Nhi 21522871
Nguyễn Xuân Sang 21522875
Trang 4IE106 – Thiết kế Giao diện Người dùng
LỜI 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 hoà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 diện
Chương 5: Kết luận
Trang 5IE106 – Thiết kế Giao diện Người dùng
DANH MỤC CÁC BẢNG, HÌNH ẢNH
Danh mục các bảng:
Danh mục hình ảnh:
Trang 6IE106 – Thiết kế Giao diện Người dùng
MỤC LỤC
LỜI 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
Trang 7IE106 – Thiết kế Giao diện Người dùng
Trang 8IE106 – 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 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 yê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
Kết quả khảo sát
Trang 9IE106 – Thiết kế Giao diện Người 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: https://yola.vn/
Ư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ữ hiện tại là IELTS
Trang 10IE106 – Thiết kế Giao diện Người 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 nhạt
Trang 11IE106 – 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 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: https://ila.edu.vn/
Ư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 muốn
Trang 12IE106 – Thiết kế Giao diện Người 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
Trang 13IE106 – Thiết kế Giao diện Người 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 yêu cầu đăng nhập quá 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
Trang 14IE106 – 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 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 thảo …
Trang 15IE106 – 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ê v n website …
………
Hình 3.3: Giao diện website mẫu
………Giao diê Zn 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 ………
………
Trang 16IE106 – 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 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://
Trang 17
-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
………
………
Trang 18IE106 – Thiết kế Giao diện Người dùng
TÀI LIỆU THAM KHẢO
1 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.
2 T Tamminen, “Eutrophication and the Baltic Sea: Studies on Phytoplankton,
Bacterioplankton and Pelagic Nutrient Cycles,” PhD thesis, University of
Helsinki, Finland, 1990
3. 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
4. N C Trí, “Nâng cao năng lực cạnh tranh của các 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
5. Trần Minh Trí, “Nuôi tôm thẻ chân trắng trải bạt nền đáy,” 2015 [Trực tuyến] Địa chỉ: http://thuysanvietnam.com.vn/nuoi-tom-the-chan-trang-trai-bat-nen-day-article- 6651.tsvn [Truy cập lần cuối 21/7/2016]
PHỤ LỤC (nếu có)
