Báo cáo đồ án môn thiết kế giao diện người dùng đề tài website bán hàng tmđt

ĐẠ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 Bán hàng TMĐT 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) | 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 Đánh giá ● Tuần 1: Khảo sát, tổng hợp khảo sát, viết báo cáo Nguyễn Ngọc Nhật 1752085 (NT) ● Tuần 2: Phác thảo giao diện, hoàn thiện giao Hoàn thành 100% diện, viết báo cáo ● Tuần 3: Hoàn thành tương tác với người dùng, viết báo cáo ● Tuần 1: Khảo sát, phân tích trang web liên quan Tơn Thị 1952036 Hồng yến ● Tuần 2: Phác thảo giao diện, hoàn thiện giao Hoàn thành 100% diện ● Tuần 3: Hoàn thành tương tác với người dùng, làm slide Nguyễn Gia 2052069 Phú ● Tuần 1: Khảo sát, phân tích trang web liên quan ● Tuần 2: Phác thảo giao Hoàn thành 100% diện, hoàn thiện giao diện ● Tuần 3: Hoàn thành | Page IE106 – Thiết kế Giao diện Người dùng tương tác với người dùng, làm slide LỜI MỞ ĐẦU Hiện nay, Internet công cụ giúp người dùng tìm kiếm thơng tin, đăng thơng tin, bán hàng mua sắm… Trên trang TMĐT trọng đến Giao diện khả tương tác trang website người dùng Trong q trình học mơn Thiết kế giao diện người dùng, hướng dẫn Cô Tạ Thu Thủy, nhóm chúng em học hỏi nhiều kiến thức áp dụng vào việc xây dựng trang website bán hàng Trân thành cảm ơn Cô suốt thời gian qua! 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 | Page IE106 – Thiết kế Giao diện Người dùng MỤC LỤC CÁC CHƯƠNG MỤC LỤC CÁC CHƯƠNG MỤC LỤC HÌNH ẢNH 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 .8 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 10 1.2 Tìm hiểu, nghiên cứu trang website liên quan .10 1.2.1 Baya (baya.vn) 10 1.2.2 Nội thất nhà đẹp (nhadep.com.vn) 10 1.2.3 Nội thất hòa phát (noithathoaphat.com.vn) .11 1.3 Rút kinh nghiệm 16 PHÁC THẢO GIAO DIỆN 17 2.1 HOMEPAGE – TRANG CHỦ: 17 2.2 Thanh HEADER 18 2.2.1 LOGO 18 2.2.1.1 Màu sắc 18 2.2.1.2 Biểu tượng .18 2.2.2 MENU DROPDOWN .19 2.2.2.1 SEARCH BAR - THANH TÌM KIẾM 19 2.2.2.2 Biểu tượng ACCOUNT 20 2.2.2.2.1 LOGIN – ĐĂNG NHẬP .20 2.2.2.2.2 REGISTER – ĐĂNG KÝ .20 2.2.2.3 Biểu tượng CART – GIỎ HÀNG 21 2.2.2.3.1 Thao tác với GIỎ HÀNG – Khi khơng có sản phẩm giỏ hàng 21 2.2.2.3.2 Thao tác với GIỎ HÀNG – Khi có sản phẩm giỏ hàng 22 2.2.3 MENU SIDEBAR 24 2.3 PRODUCT – SẢN PHẨM 26 2.4 NEW & POPULAR 27 2.5 Thanh FOOTER 28 GIAO DIỆN WEBSITE HOÀN CHỈNH 29 TƯƠNG TÁC GIAO DIỆN 29 2.6 Tương tác giao diện .29 | Page IE106 – Thiết kế Giao diện Người dùng 2.7 Trang chủ 30 2.8 Cửa hàng 33 2.9 34 2.10 Sản phẩm .35 2.11 Giỏ hàng 38 2.12 Khi chọn mua nhấn thêm vào giỏ hàng, ta đưa chuột đến mà chưa cần click giỏ hàng mở tức chưa chuyển trang Ở ta chọn để xem giỏ hàng toán nhấn icon “x” để xóa sản phẩm vừa chọn: 38 2.13 Thanh toán 40 2.14 Sản phẩm yêu thích hồ sơ khách hàng 44 2.15 Contact 50 2.16 Giới thiệu doanh nghiệp 51 2.17 Đăng nhập Đăng ký tài khoản 54 KẾT LUẬN 60 2.18 Ưu điểm 60 2.19 Nhược điểm 60 2.20 Hướng phát triển 60 LINK 60 2.21 Link khảo sát 60 2.22 Link Demo Figma 60 2.23 Link Drive (Báo cáo, Slide) 61 TÀI LIỆU THAM KHẢO 61 MỤC LỤC HÌNH ẢN | Page IE106 – Thiết kế Giao diện Người dùng Hình Hình phác thảo chi tiết thành phần HOMEPAGE – TRANG CHỦ 17 Hình Hình chi tiết thành phần HEADER .18 Hình Hình biểu tượng LOGO 18 Hình Hình Menu Dropdown 19 Hình Hình Thanh Tìm Kiếm 19 Hình Hình biểu tượng Account 20 Hình Hình cửa sổ bật lên ấn vào biểu tượng Account 21 Hình Hình đưa trỏ chuột đến biểu tượng GIỎ HÀNG .21 Hình Hình nhấn vào biểu tượng GIỎ HÀNG 22 Hình 10 Hình đưa trỏ chuột đến biểu tượng GIỎ HÀNG .23 Hình 11 Hình nhấn vào biểu tượng GIỎ HÀNG 24 Hình 12 Hình chi tiết thành phần MENU SIDEBAR 25 Hình 13 Hình chi tiết chọn sản phẩm 26 Hình 14 Hình chi tiết thành phần thuộc NEW & POPULAR .27 Hình 15 Hình chi tiết thành phần thuộc Thanh FOOTER 28 | Page IE106 – Thiết kế Giao diện Người dùng KHẢO SÁT, PHÂN TÍCH, THAM KHẢO PHÁC THẢO GIAO DIỆN 2.1 HOMEPAGE – TRANG CHỦ: H#nh H#nh phác thảo chi tiết thành phần HOMEPAGE – TRANG CHỦ Ở trang chủ bao gồm thành phần sau:          Thanh HEADER: bao gồm o LOGO; o Đường dẫn đến TRANG CHỦ, LIÊN HỆ, GIỚI THIỆU,… ; o Các biểu tượng tài khoản, tìm kiếm, ưa thích, giỏ hàng…; o … Thanh gồm đường dẫn tên trang để người dùng biết trang nào; Một menu dropdown gồm tùy chọn giá để người dùng xem sản phẩm xếp với giá từ cao đến thấp, từ thấp đến cao, v.v ; Menu - Sidebar bên cạnh cho người dùng lựa chọn đến trang mục chứa sản phẩm cần tìm Các mục sản phẩm hiển thị trang Bên có mục số để người dùng theo dõi, chuyển đổi trang sản phẩm TRANG CHỦ Tiếp đến có mục NEW & POPULAR: người dùng theo dõi sản phẩm bật cửa hàng Bên FOOTER: gồm thông tin, đường dẫn đến page khác (như BLOG, FAQ, INFO,…) Ngồi ra, có nút để quay đầu trang | Page IE106 – Thiết kế Giao diện Người dùng | Page IE106 – Thiết kế Giao diện Người dùng 2.2 Thanh HEADER Với mong muốn tối ưu trải nghiệm cho người dùng, rườm rà phải kéo lên tận đầu trang để thực thao tác HEADER này, HEADER website navigation bar, di chuyển người dùng người dùng có thao tác di chuyển lên xuống trang H#nh H#nh chi tiết thành phần HEADER 2.2.1 LOGO 2.2.1.1 Màu sắc Thành phần HEADER logo website – shop mang biểu tượng có màu sắc thuộc gam màu vàng – cam – nâu Vì chủ đề nhóm chọn nội thất nên logo mang màu sắc thuộc vàng – cam – nâu để gợi lên ấm cúng, ổn định, thịnh vượng nhiều tài lộc, may mắn từ màu nâu màu cam thụ hưởng mạnh mẽ màu đỏ lượng tích cực, sôi động lẫn hạnh phúc màu vàng 2.2.1.2 Biểu tượng Vì chủ đề nội thất nên logo mang biểu tượng gần gũi với người dùng/gia chủ, nhóm tham khảo, lên ý tưởng biểu tượng logo thuộc lựa chọn đây:    Tên shop & hình ảnh bàn ghế; Tên shop & hình ảnh ngơi nhà; Tên shop & hình ảnh ngơi nhà & bàn ghế H#nh H#nh biểu tượng LOGO 10 | Page IE106 – Thiết kế Giao diện Người dùng 2.2.2 MENU DROPDOWN Thành phần thứ hai trang Menu dropdown – Thanh lựa chọn thả xuống cho người dùng lựa chọn bên HEADER thay phải kéo xuống để tìm, lựa chọn menu bên cạnh trang chủ Ở lựa chọn mà người dùng đưa trỏ chuột vào, lựa chọn có màu sắc hover để giúp người dùng phân biệt trỏ chuột đến lựa chọn H#nh H#nh Menu Dropdown 2.2.2.1 SEARCH BAR - THANH TÌM KIẾM Thành phần Thanh Tìm Kiếm Với Thanh Tìm Kiếm đầu HEADER navigation bar, người dùng dễ dàng tương tác đến thành phần tìm kiếm sản phẩm mong muốn mà khơng phải di chuyển lên tận đầu trang để bắt đầu vào tìm Người dùng gõ nội dung vào, tiêu đề hiển thị kết gợi ý, trùng khớp với nội dung gõ Ngồi ra, Thanh Tìm Kiếm cịn có nút x bên cạnh để xóa tồn người dùng vừa nhập mà khơng cần phải xóa ký tự Sau đó, để tìm sản phẩm dựa theo nội dung vừa nhập, người dùng cần ấn vào biểu tượng hình kính lúp ấn phím Enter H#nh H#nh Thanh T#m Kiếm 11 | Page IE106 – Thiết kế Giao diện Người dùng 2.2.2.2 Biểu tượng ACCOUNT Thành phần thứ tư thiếu Biểu tượng Account, biểu tượng giúp cho người dùng tối ưu trải nghiệm cách có cho tài khoản đăng nhập để mua sắm sản phẩm trang Người dùng phải đăng nhập để có tính mua sắm Như vậy, người dùng truy cập lịch sử mua hàng xem đơn hàng có, có, đơn hàng mua H#nh H#nh biểu tượng Account Khi ấn vào biểu tượng Account, ta có trang pop-up, trang bật lên chia làm hai bên tương ứng với LOGIN – ĐĂNG NHẬP REGISTER – ĐĂNG KÝ 2.2.2.2.1 LOGIN – ĐĂNG NHẬP Phía bên trái hiển thị ô cho người dùng nhập thông tin LOGIN – ĐĂNG NHẬP Các thành phần hiển thị mục bao gồm:      Tên người dùng (username) Địa Email (Email Address) đăng ký mục ĐĂNG KÝ – REGISTER (bắt buộc người dùng phải nhập không lỗi); Mật (bắt buộc người dùng phải nhập không lỗi) ; Nút Đăng Nhập – Login mang màu trầm đậm để phân biệt nút định việc đó: người dùng nhấn vào hồn tất điền thơng tin đăng nhập mình; Ô để người dùng chọn xem trang ghi nhớ tài khoản có truy cập đến lần sau để tiện cho phải lặp lại thao tác đăng nhập; Forgot Password? Là đường dẫn đến trang điền lại email để hệ thống gửi tin nhắn cài lại mật quên mật 2.2.2.2.2 REGISTER – ĐĂNG KÝ Phía bên phải hiển thị cho người dùng nhập thông tin REGISTER – ĐĂNG KÝ Các thành phần hiển thị mục bao gồm:    Ơ nhập thơng tin Địa Chỉ Email ( bắt buộc người dùng phải nhập khơng lỗi); Ơ để người dùng chọn xem có theo dõi cập nhật thơng tin website qua thư hay khơng; Bên có dịng chữ thuộc cam kết bảo vệ thông tin người dùng kèm theo đường dẫn đến cam kết qua Privacy Policy; 12 | Page IE106 – Thiết kế Giao diện Người dùng  Nút Register – Đăng ký mang màu trầm đậm để phân biệt nút định việc đó: người dùng nhấn vào hồn tất điền thơng tin đăng ký H#nh H#nh cửa sổ bật lên ấn vào biểu tượng Account Khi người dùng hoàn tất việc đăng nhập, đăng ký ấn nhầm người dùng có mong muốn khỏi cửa sổ bật lên biểu tượng Account này, người dùng nhấn vào nút X bên góc bên phải cửa sổ 2.2.2.3 Biểu tượng CART – GIỎ HÀNG Tiếp theo thành phần thiếu trang mua sắm GIỎ HÀNG Đối với biểu tượng thiết kế HEADER, người dùng có hai cách để tương tác đến biểu tượng này:   Cách 1: Đưa trỏ chuột đến có trang nhỏ hiển thị người dùng thao tác trang xuất Cách 2: Nhấn vào biểu tượng website đưa người dùng đến trang Giỏ Hàng bao gồm thông tin sản phẩm, đơn hàng có,… 2.2.2.3.1 Thao tác với GIỎ HÀNG – Khi khơng có sản phẩm giỏ hàng Đối với trường hợp chưa có sản phẩm giỏ hàng người dùng:  Khi người dùng đưa trỏ chuột đến GIỎ HÀNG: Thông báo “There are no products in cart” - “Khơng có sản phẩm giỏ hàng” hiển thị bên biểu tượng H#nh H#nh đưa trỏ chuột đến biểu tượng GIỎ HÀNG 13 | Page IE106 – Thiết kế Giao diện Người dùng  Khi người dùng nhấn vào biểu tượng GIỎ HÀNG: Website dẫn người dùng đến trang gồm có: o Thanh HEADER – navigation bar bên cùng; o Dịng chữ thơng báo cho người dùng “There are no products in cart” - “Không có sản phẩm giỏ hàng” lúc đưa trỏ chuột đến biểu tượng bên nút để quay SHOP/HOME – CỬA HÀNG/TRANG CHỦ; o Các mục sản phẩm thuộc NEW & POPULAR; o Thanh FOOTER bên H#nh H#nh nhấn vào biểu tượng GIỎ HÀNG 2.2.2.3.2 Thao tác với GIỎ HÀNG – Khi có sản phẩm giỏ hàng Đối với trường hợp có sản phẩm giỏ hàng người dùng:  Khi người dùng đưa trỏ chuột đến GIỎ HÀNG: Thông báo hiển thị bên biểu tượng bao gồm: o Mục PRODUCT – SẢN PHẨM: Gồm thông tin sản phẩm cho người dùng xem, nhấn vào mục sản phẩm người dùng đến trang hiển thị thơng tin sản phẩm đó; o Dịng hiển thị tổng tiền có đơn hàng người dùng; o Nút xanh đậm CHECK CART – XEM GIỎ HÀNG: Người dùng nhấn vào nút để đến trang GIỎ HÀNG để xem đơn hàng có; o Nút xanh nhạt REDEEM (BUY) – THANH TOÁN: Người dùng nhấn vào nút để đến trang THANH TỐN để bắt đầu điền thơng tin để tốn mà khơng cần phải xem giỏ hàng xem chi tiết có sản phẩm nào;  Với hai nút khác màu giúp cho người dùng nhận biết hai lựa chọn khác dẫn đến trang khác nhấn vào  Mỗi mục sản phẩm, dòng TOTAL – TỔNG HÓA ĐƠN nút chia với gạch phân chia giúp người dùng dễ phần biệt thành phần  Có thêm nút X bên cạnh sản phẩm để xóa bỏ sản phẩm mà không cần phải đến trang GIỎ HÀNG 14 | Page IE106 – Thiết kế Giao diện Người dùng H#nh 10 H#nh đưa trỏ chuột đến biểu tượng GIỎ HÀNG  Khi người dùng nhấn vào biểu tượng GIỎ HÀNG: Website dẫn người dùng đến trang gồm có: o Thanh HEADER – navigation bar bên cùng; o Các thông tin đơn hàng nhấn vào biểu tượng GIỎ HÀNG chia làm hai:  Ở phía bên trái danh sách hiển thị thông tin sản phẩm: thông tin chia theo cột dọc:  Cột sản phẩm: Bao gồm thông tin sản phẩm cho người dùng xem, nhấn vào mục sản phẩm người dùng đến trang hiển thị thơng tin sản phẩm lúc đưa trỏ chuột đến biểu tượng;  Nút X bên cạnh sản phẩm để người dùng xóa sản phẩm khơng muốn mua sản phẩm nữa;  Cột Giá cả;  Cột Số lượng;  Cột Tổng giá sản phẩm;  Nút TIẾP TỤC MUA SẮM – CONTINUE SHOPPING: có hiệu ứng hover từ trắng chuyển sang xanh đưa trỏ chuột đến nhấn vào;  Nút CẬP NHẬT GIỎ HÀNG – UPDATE CART: Người dùng nhấn vào nút để cập nhật giỏ hàng sau có số thao tác thay đổi, tác động đến đơn hàng sản phẩm mà chưa thấy thay đổi website  Ở phía bên phải hóa đơn để người dùng theo dõi thơng tin đơn hàng mình:  Các thơng tin ngăn cách dấu gạch chia theo hàng ngang;  Dòng hiển thị giá đơn hàng;  Dòng hiển thị địa mà shop giao hàng đến cho người dùng;  Tổng hóa đơn;  Bên tổng hóa đơn nút THANH TỐN với hiệu ứng từ xanh nhạt sang xanh đậm để người dùng biết để trỏ chuột đến nút đó;  Phía hiển thị thơng tin mã giảm giá voucher áp dụng người dùng nhập mã ô bên dưới; 15 | Page IE106 – Thiết kế Giao diện Người dùng Sau nhập mã voucher mã giảm giá người dùng ấn vào nút APPLY – với hiệu ứng từ trắng xám nhạt chuyển sang màu xám đậm để người dùng biết để trỏ chuột đến nút - để áp dụng mã mà vừa nhập o Các mục sản phẩm thuộc NEW & POPULAR; o Thanh FOOTER bên  H#nh 11 H#nh nhấn vào biểu tượng GIỎ HÀNG 2.2.3 MENU SIDEBAR Ở trang chủ có Menu dọc bên trái website dòng mục menu đường dẫn bao gồm lựa chọn/ tiêu đề liên quan đến sản phẩm cho người dùng thao tác tìm kiếm đến Nếu mục menu có nhiều lựa chọn có mũi tên xuống menu dropdown để hiển thị thêm lựa chọn mục menu Ngồi ra, MENU SIDEBAR cịn có PRICE FILTER – Thanh Lọc Giá người dùng kéo thả lựa chọn giá trị giá hiển thị dòng Price Value hình sau hồn tất kéo thả lựa chọn người dùng ấn nút FILTER – Lọc để bắt đầu lọc theo giá trị mà vừa kéo thả Cuối cùng, để tiện cho việc theo dõi truy cập lại sản phẩm vừa xem bên PRICE FILTER cịn có mục RECENTLY VIEWED, mục hiển thị sản phẩm vừa xem với sản phẩm xếp thành theo hàng dọc, dịng sản phẩm 16 | Page IE106 – Thiết kế Giao diện Người dùng H#nh 12 H#nh chi tiết thành phần MENU SIDEBAR 17 | Page IE106 – Thiết kế Giao diện Người dùng 2.3 PRODUCT – SẢN PHẨM Khi người dùng chọn vào sản phẩm, website đến trang bao gồm thông tin sản phẩm mà vừa chọn Ở trang SẢN PHẨM bao gồm:         Hình ảnh sản phẩm khung bên trái: Trong khung hình ảnh có tùy chọn như: o Hình ảnh sản phẩm hiển thị tồn khung này; o Thêm vào ưa thích nhấp vào biểu tượng hình trái tim góc phải khung; o Dưới góc trái có nút cho người dùng nhấn vào để phóng to sản phẩm lên; Bên cạnh hình ảnh, đầu dịng chữ in đậm mang tên sản phẩm; Phía tên sản phẩm giá sản phẩm; Bên số lượng sản phẩm người dùng tùy chọn tăng giảm với hai nút hai bên số lượng với dấu (-) giảm sản phẩm, dấu (+) tăng sản phẩm; Nút Thêm vào giỏ hàng đặt bên cạnh nút tăng giảm số lượng sản phẩm với màu xanh để bật so với phông trang sản phẩm; Bên dịng ngăn cách hiển thị dòng mã code sản phẩm; Tiếp theo dòng ngăn cách nội dung mác tên sản phẩm có liên quan đến sản phẩm, người dùng nhấn vào website dẫn đến trang gồm sản phẩm có mác tên vậy; Cuối người dùng tương tác chia sẻ lên trang mạng xã hội H#nh 13 H#nh chi tiết chọn sản phẩm 18 | Page IE106 – Thiết kế Giao diện Người dùng 2.4 NEW & POPULAR Thành phần website mục NEW & POPULAR – CÁC SẢN PHẨM MỚI VÀ NỔI BẬT Ở mục CÁC SẢN PHẨM MỚI & NỔI BẬT website, người dùng quan sát theo dõi sản phẩm nằm danh sách bật vừa nhập cửa hàng Mục chia làm hai bên: MỚI NHẤT NỔI BẬT Các sản phẩm phân chia theo loại bật làm hai bên sản phẩm hiển thị theo hàng dọc tối đa bốn sản phẩm Việc hiển thị sản phẩm theo hàng dọc với tối đa sản phẩm khiến cho người dùng khơng bị dính q nhiều thơng tin từ sản phẩm vướng phải việc sản phẩm có hình ảnh nhỏ trang tham khảo người dùng biết sản phẩm loại chia làm hai cột H#nh 14 H#nh chi tiết thành phần thuộc NEW & POPULAR 19 | Page IE106 – Thiết kế Giao diện Người dùng 2.5 Thanh FOOTER Cuối thành phần phía website, FOOTER Ở FOOTER này, gồm có ba thành bốn thành phần:  Mục ABOUT US – Thông tin website: gồm có thơng tin website nút liên kết để người dùng nhấn vào đến page website để theo dõi;  Mục PRODUCTS – SẢN PHẨM: Mục sản phẩm ngẫu nhiên sản phẩm dựa theo mà người dùng vừa xem có tương tác đến;  Mục LINKS – ĐƯỜNG DẪN: bao gồm đường dẫn đến trang ABOUT US, CONTACT – LIÊN HỆ, FAQ – CÂU HỎI THƯỜNG GẶP, BLOG,…;  Mục PAYMENT/CREDITS: mục bao gồm liên kết đến ví điện tử mà người dùng mong muốn để tốn cho đơn hàng H#nh 15 H#nh chi tiết thành phần thuộc Thanh FOOTER Trên phác thảo sơ dựa theo khảo sát thực tế mà người dùng khách hàng mua sắm trang website đồ nội thất Bản phác thảo cách nhìn khái quát có thay đổi nhỏ q trình thực giao diện hoàn chỉnh 20 | Page IE106 – Thiết kế Giao diện Người dùng GIAO DIỆN WEBSITE HOÀN CHỈNH TƯƠNG TÁC GIAO DIỆN KẾT LUẬN 2.6 Ưu điểm ● Giao diện tone màu sáng dễ làm bật sản phẩm, thiết kế dễ dàng sử dụng, an toàn hiệu cao ● Tương tác người dùng dễ dàng có viết giới thiệu nội thất, cách trí, viết giới thiệu mẫu thiết kế blog 2.7 Nhược điểm ● Chưa có phần chat trực tiếp với khách hàng 2.8 Hướng phát triển ● Phát triển mở rộng nhiều tính tương tác với khách hàng ● Tốc độ tương tác cải thiện ● Phát triển thêm app tảng mobile LINK 2.9 Link khảo sát https://docs.google.com/forms/d/e/1FAIpQLSc8BACagHsME474rN5mBkbPl5Bo h3HQnKzW8wo0YXXph787mw/viewform 2.10 Link Demo Figma https://www.figma.com/file/W7TJUjMkBitcyVDDw6Fkz1/Web-b%C3%A1n-h %C3%A0ng?node-id=0%3A1&t=SGGv4iguWZMxu5iK-1 2.11 Link Drive (Báo cáo, Slide) https://drive.google.com/drive/u/4/folders/1CvFlaII303gO7OEFaXR5MdjigdYO 48Fk?fbclid=IwAR3aclh6FsEik1CnBNHoE8esOq0eH4u4MkafkLlG28aMUg6b4q_jyZOc-0 21 | Page IE106 – Thiết kế Giao diện Người dùng TÀI LIỆU THAM KHẢO Lý thuyết GVHD ThS: Tạ Thu Thủy https://www.youtube.com/@HocFigmaThatDonGian kênh hướng dẫn học Figma từ A đến Z 22 | Page