(Tiểu luận) báo cáo đồ án môn thiết kế giao diện người dùng đề tài website phụ kiện điện thoại

ĐẠ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 phụ kiện điện thoại GVHD: ThS Tạ Thu Thủy Nhóm sinh viên thực hiện: Nguyễn Ngọc Nhật MSSV: 17520872 Tôn Thị Hoàng Yến MSSV: 19520361 Nguyễn Gia Phú MSSV: 20520692 Tp Hồ Chí Minh, 10/2022 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 Họ tên MSSV Phân công Tuần 1: Làm Đánh giá Tuần 1: Hồn thành cơng việc gì? cơng việc giao Tuần 2: … hay khơng? Có khuyết điểm làm việc nhóm hay khơng? Đánh giá từ nhóm cho bạn, Tuần 2: … 3|Page IE106 – Thiết kế Giao diện Người dùng LỜI MỞ ĐẦU … … Sau đây, nhóm chúng em 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 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: Bảng 1: Bảng phân công, đánh giá thành viên……………………………………… 03 Danh mục hình ảnh: Hình 1.1: Phiếu khảo sát trạng nghe nhạc .10 Hình 1.2: Mục đích nghe nhạc người dùng .10 Hình 1.3: Những tảng mà người dùng hay tương tác 10 Hình 1.4: Những yêu cầu ứng dụng nghe nhạc (Mobile) .11 Hình 1.5: Những yêu cầu website nghe nhạc (website) 11 Hình 2.1: Bản phác thảo thử nghiệm 31 Hình 2.2: Yêu cầu người dùng website nghe nhạc 31 Hình 2.3: Thiết kế phẳng tối giản 32 Hình 2.4: Ví dụ menu ẩn .33 Hình 2.5: Cuộn trang để di chuyển đến mục khác 33 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.1Khả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 1.2Tì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.3Rút kinh nghiệm Chương 2: PHÁC THẢO GIAO DIỆN 2.1Bản phác thảo… 2.2Bản phác thảo website …… Chương 3: GIAO DIỆN WEBSITE HOÀN CHỈNH 3.1Giao diêni website … .9 3.2……… Chương 4: TƯƠNG TÁC GIAO DIỆN 10 4.1Tương tác giao diện 10 4.2Tạo tương tác ………… 10 Chương 5: KẾT LUẬN .11 5.1Ưu điểm .11 5.2Nhược điểm 11 5.3Hướ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: Link khảo sát: https://docs.google.com/forms/d/e/1FAIpQLSc8BACagHsME474rN5mBkbPl5Boh3HQ nKzW8wo0YXXph787mw/viewform?fbclid=IwAR3E4lz3IEFR9xiZdhKpnMcc1Ip0wNNf5x3YGCsPlrIB89EHpfPjHZ1CT8 Sau hoàn thành khảo sát với, nhóm em có phản hồi tích cực sau phía người dùng, cụ thể số khảo sát bật như: Các trang web khách hàng thường hay mua Hình 1.1: Các trang web khách hàng thường ghé thăm Điều chưa hài lòng khách hàng xem trang web phụ kiện 8|Page IE106 – Thiết kế Giao diện Người dùng Hình 1.2: Điểm chưa hài long khách hàng 1.1.2 Phân tích yêu cầu đề xuất giải pháp Khách hàng người có nhìn tổng quát rõ ràng giao diện khả tương tác với website Đáp ứng yêu cầu khách hàng giúp cho khách hàng có trải nghiệm dễ dàng, tạo thích thú sử dụng website để mua hàng 1.2 Tìm hiểu, nghiên cứu ứng dụng liên quan 1.2.1 Điện máy xanh Ưu điểm Giao diện dạng lưới, dễ sử dụng Các mục sản phẩm phân chia rõ ràng Bộ lọc sản phẩm phân chia đầy đủ, chi tiết Nhược điểm Mục sản phẩm to, khơng thể nhìn trọn vẹn sản phẩm hàng, người mua khó so sánh sản phẩm hàng Khi di chuyển chuột vào mục menu khơng có highlight, khiến người dùng bấm nhầm 1.2.2 Thế giới di động Ưu điểm: Trang chủ 9|Page IE106 – Thiết kế Giao diện Người dùng Tông trắng sử dụng cho toàn phần trang chủ: Tổng thể trang dễ chịu thoáng mắt Đã có giao diện trang chủ mới: Trang web Thế Giới Di Động thức thay block article cũ banner ngành hàng Cho bạn biết khuyến hấp dẫn nhất, bạn nhấn Xem để biết rõ thơng tin chương trình Các chương trình khuyến thiết kế với tơng màu đen vàng: Bố trí thẩm mỹ đầy đủ thơng tin cần thiết 10 | P a g e IE106 – Thiết kế Giao diện Người dùng Săn sale online sử dụng tông màu vàng làm (Mới): Làm bật tổng thể trang màu trắng Cung cấp đa dạng hệ sản phẩm: Các sản phẩm chuyên mục xếp đơn giản gọn gàng với đầy đủ tên, giá, hình ảnh xếp hạng sản phẩm; nắm đầy đủ thơng tin mà không cần nhấp chuột vào 11 | P a g e IE106 – Thiết kế Giao diện Người dùng Trang mua sắm điện thoại Bộ lọc: o C1: Được hiển thị chi tiết với tồn thuộc tính để lọc sản phẩm xếp hết đầu trang 12 | P a g e IE106 – Thiết kế Giao diện Người dùng C2: Có thể tìm kiếm trang lọc nội dung hiển đầy đủ không Sản phẩm: sản phẩm trang tập trung vào phần nhìn nên phần hình ảnh, kích thước tên sản phẩm giá lớn 13 | P a g e IE106 – Thiết kế Giao diện Người dùng Nhược điểm: Menu dropdown: Không có highlight màu lựa chọn mục, khiến người dùng không xác định mục cần tìm Ngồi ra, danh mục lựa chọn chia nhiều, chữ bị nhỏ tạo cảm giác khó quan sát bị rối tìm kiếm 14 | P a g e IE106 – Thiết kế Giao diện Người dùng Chatbox: thời gian phải điền thông tin trước hỗ trợ Thông tin sản phẩm: Các thông tin sản phẩm rõ mà nhấn vào sản phẩm đó, nhiên, sản phẩm đặt gần với nhau, với lượng thông tin sản phẩm nhiều nhỏ khiến người dùng đọc rõ so sánh quan sát ưu,nhược sản phẩm 15 | P a g e IE106 – Thiết kế Giao diện Người dùng 1.2.3 Ứng dụng Ưu điểm: Bố cục nhìn vào thấy màu chủ đạo với màu logo, banner chạy nhiều ưu đãi cho khách, menu rõ ràng Menu dọc giúp khách hàng nhìn dễ dàng hơn, có tính lọc sản phẩm đầy đủ Hiển thị sản phẩm bật rõ ràng, khung hình sản phẩm to, với phơng màu trắng làm bật sản phẩm giá màu đỏ 16 | P a g e IE106 – Thiết kế Giao diện Người dùng Nhược điểm Phần giỏ hàng nhìn nhỏ so với hình, khoảng trắng bên cạnh lớn, đặt thêm banner sản phẩm liên quan… Danh mục: Phụ kiện Link kiện sản phẩm đặt nhiều nhỏ, khơng có giá thơng tin để khách hàng nhận biết 17 | P a g e IE106 – Thiết kế Giao diện Người dùng Phần Chat với nhân viên, phải điền thơng tin xong Chat, gây tốn thời gian cho khách hàng Nhìn chung, Cellphones trang web chuyên nghiệp, đầy đủ tính cần thiết bố cục rõ ràng mà rành mạch Các chức tìm kiếm, toán, … giúp khách hàng dễ dàng đễ thao tác 1.3 Rút kinh nghiệm Tạo giao diện dễ sử dụng cho người dùng 18 | P a g e IE106 – Thiết kế Giao diện Người dùng Bắt mắt rõ rà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 … 19 | 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ênt website … ……………… Hình 3.3: Giao diện website mẫu …………………Giao diêni website hình thành từ kết hợp bố cục website Themes, bạn thay đổi môti hai yếu tố bạn nhâni giao diêni khác……………………… 2.2 ……… ……………………………………………… 20 | P a g e