(Tiểu luận) báo cáo bài tập lớn môn học tương tác người máy thiết kế giao diện website bán giày scott 2

TRƯỜNG ĐẠI HỌC THỦY LỢI KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO BÀI TẬP LỚN MÔN HỌC TƯƠNG TÁC NGƯỜI-MÁY “Thiết kế giao diện website bán giày Scott” Họ tên Sinh viên: Hồng Bảo Trung (trưởng nhóm) – MSV: 1851061517 Đào Hoàng Long - MSV: 1851061777 Lớp: HL-TH Giảng viên phụ trách môn học: Nguyễn Thị Thu Hương Hà Nội - 2023 MỤC LỤC DANH MỤC CÁC TỪ VIẾT TẮT I ĐỀ XUẤT ĐỀ BÀI 1.1 Giới thiệu vấn đề 1.2 Giải pháp 1.3 Phân công thành viên tham gia II PHÂN TÍCH NGƯỜI SỬ DỤNG VÀ PHÂN TÍCH NHIỆM VỤ 2.1 Giới thiệu 2.2 Phân tích người sử dụng 2.3 Phân tích nhiệm vụ III PHÁC HỌA THIẾT KẾ 15 3.1 Giới thiệu 15 3.2 Thiết kế tổng quan 15 3.3 Thiết kế kịch mẫu 15 IV XÂY DỰNG STORYBOARD 19 V XÂY DỰNG PROTOTYPE MÁY TÍNH 27 VI PHÁT TRIỂN CHƯƠNG TRÌNH 31 VII NGƯỜI SỬ DỤNG KIỂM THỬ VÀ BÁO CÁO KẾT QUẢ 32 KẾT LUẬN 34 TÀI LIỆU THAM KHẢO 35 I ĐỀ XUẤT ĐỀ TÀI Giới thiệu vấn đề • Giày dép thứ trang phục khơng thể thiếu với Sự đa dạng chủng loại, mẫu mã đem tới cho nhiều lựa chọn, điều dẫn tới việc làm giả, làm nhái thương hiệu giày dép Điều trở nên phổ biến tảng mua sắm trực tuyến mua sắm trực tuyến dần trở thành xu phổ biến tồn giới, tăng trưởng cách nhanh chóng Ở Việt Nam, hình thức mua sắm trực tuyến xuất năm trở lại có lượng người sử dụng lớn, tình hình dịch COVID • Tuy nhiên, với tốc độ nhanh chóng số lượng người sử dụng tảng mua trực tuyến, , nhiều trang web bán hàng hay sàn thương mại điện tử không kịp cải thiện dẫn tới số hạn chế : + Tốc độ tải trang chậm + Nhiều quảng cáo, chi tiết thừa, gây nhiễu cho khả duyệt web người dùng + Một số trang web khơng có đầu tư tối ưu giao diện trải nghiệm người dung, gây khó chịu giảm khả tiếp cận trang web doanh nghiệp hay cửa hàng kinh doanh Giải pháp: • Nắm bắt nhu cầu thói quen sử dụng tảng mua sắm trực tuyến người tiêu dùng, vấn đề tính rõ ràng giá mua sắm, nhóm chúng em xin đưa tảng mua sắm với tiềm giải vấn đề trên, cụ thể website bn bán giày dép hãng Xây dựng website để tương tác với khách hàng lúc nơi, không bị giới hạn với thời gian không gian địa điểm phương thức bán hàng truyền thống.Thông qua tiện ích website, khách hàng tương tác trực tiếp với doanh nghiệp, tìm hiểu sản phẩm… • Xây dựng website bán giày gồm nhiều thể loại, mẫu mã mang đến đa dạng sản phẩm giúp khách hàng có nhiều lựa chọn, đồng thời giúp người dùng dễ tiếp cận , cung cấp đầy đủ thông tin cho người dùng, nâng cao chất lượng phục vụ khách hàng dễ mở rộng thị trường Website có giao diện thân thiện, trẻ trung, đơn giản, hướng tới đối tượng người trẻ cá tính.Cung cấp cho khách hàng sản phẩm hãng, chất lượng với mức giá hợp lí, dễ tiếp cận • Yêu cầu giao diện đặt người sử dụng websites là: o Đơn giản sử dụng o Giao diện bố trí hợp lí, ngơn ngữ tiếng Việt o Có tính thẩm mỹ, phù hợp với thời đại, tạo thoải mái cho người sử dụng • + + Phân công công việc: Môi trường xây dựng giao diện website: Bộ công cụ xây dựng giao diện Ninjamock (https://ninjamock.com/) Visual Studio Code Họ tên Cơng việc Mức độ hồn thiện Hồng Bảo Trung (nhóm trưởng) - Thiết kế giao diện - Xây dựng storyboard cho vai trị người sử dụng - Phân tích nhiệm vụ Đào Hồng Long - Thu thập thơng tin, đề xuất đề tài - Phân tích người sử dụng phân tích nhiệm vụ - Báo cáo Đánh giá II PHÂN TÍCH NGƯỜI SỬ DỤNG VÀ PHÂN TÍCH NHIỆM VỤ Giới thiệu: 1.1 Khảo sát thực tế: Một cửa hàng bán giày dép A phố Chùa Bộc kinh doanh theo phương thức truyền thống (mua sắm cửa hàng) Cửa hàng vận hành với quy mô nhỏ, bao gồm chủ cửa hàng nắm tình hình kinh doanh chính, 4-5 nhân viên trực tiếp bán hàng cửa hàng, 2-3 nhân viên phụ trách kho hàng Tuy nhiên, trước tình hình dịch COVID, cửa hàng buộc phải đóng cửa tạm thời giãn cách xã hội, dẫn tới tình hình kinh doanh bị giảm sút Nhận thấy nhu cầu mua sắm trực tuyến khách hàng lớn, cửa hàng định chuyển sang bn bán trực tuyến để cải thiện tình hình kinh doanh Chủ cửa hàng muốn website bán kết hợp quản lý bán hàng, nhập xuất sản phẩm cách linh hoạt, dễ kiểm soát, phù hợp với nhu cầu người tiêu dùng 1.2 Mơ tả tốn: Khách hàng (guest) xem tìm kiếm thơng tin, giá , đăng kí , quên mật Để tiến hành đặt hàng tốn, khách hàng bắt buộc phải đăng nhập/đăng ký tài khoản thành viên (user) để điền thông tin cá nhân tên, địa đặt hàng, số điện thoại Thành viên (user) kế thừa chức khách hang Người quản lý (admin) đăng sản phẩm kèm với thông tin chi tiết sản phẩm (giá cả, số lượng, tình trạng…) Khách hàng sau chọn mua sản phẩm đăng nhập/đăng ký thành viên để tiến hành thêm sản phẩm vào giỏ hàng tiến hành toán Sau xác nhận toán đặt hàng, khách hàng người quản lý, bên nhận hoá đơn Hoá đơn khách hàng lưu trữ vào lịch sử đơn hàng để khách hàng tiện theo dõi lộ trình giao hàng Hố đơn khách hàng mà người quản lý nhận kèm mã số đơn hàng để gửi cho đơn vị vận chuyển, sau lưu trữ lại vào hệ thống để tiện cho việc chăm sóc khách hàng Đơn vị vận chuyển nhận mã hoá đơn bên bán hàng tới nhận đơn hàng có thơng tin người mua hàng tiến hàng giao hàng 1.3 Đề xuất nhóm người sử dụng: Người sử dụng chia thành nhóm: - Nhóm 1: 20 tuổi - Nhóm 2: từ 21 tới 30 tuổi - Nhóm 3: từ 31 tới 60 tuổi Khả sử dụng giao diện website chia làm mức: - Người tiếp cận: Những người biết đến máy tính, chưa biết nhiều cách để thao tác với máy tính - Người sử dụng: Những người sử dụng máy tính chưa nhiều có tần suất sử dụng thấp - Người có kinh nghiệm: Những người có kinh nghiệm sử dụng máy tính có tần suất sử dụng trung bình - Người thành thạo: Những người sử dụng nhuần nhuyễn máy tính thường xuyên làm việc với máy tính Dựa vào việc phân chia nhóm người sử dụng trên, nhóm chúng em đặt mục tiêu xây dựng websites có giao diện thân thiện, dễ dàng sử dụng, thao tác, hướng đến nhóm đối tượng người trẻ (có độ tuổi từ 20 31 tuổi) , ngồi nhóm đối tượng khách hàng người trưởng thành (có độ tuổi từ 31 tuổi) thao tác websites tính thân thiện với người dùng mà nhóm hướng tới phát triển giao diện Websites tập trung vào trải nghiệm sử dụng dành cho nhóm người có kinh nghiệm sử dụng máy tính mạng máy tính, đồng thời cung cấp công cụ hỗ trợ người tiếp cận, sử dụng máy tính để họ dễ dàng học làm quen với giao diện websites 1.4 Công cụ thao tác: - Websites phát triển để người sử dụng sử dụng thơng qua máy tính để bàn, máy tính xách tay, phần cứng có hình, chuột, bàn phím sử dụng mạng máy tính có cài đặt trình duyệt websites (Google Chrome, Firefox, Safari, Microsoft Edge,…) - Vì thời gian thực dự án có hạn nên thời gian học môn tương tác Người- Máy, nhóm chúng em tập trung vào phát triển websites tương thích với thiết bị máy tính để bàn, máy tính xách tay chạy hệ điều hành phổ biến như: Windows, MacOS, Linux Đối với tảng duyệt websites thiết bị cầm tay Android, iOS,… , nhóm cân nhắc tới việc phát triển thêm thời gian tới a Với nhóm người xem hàng (guest): - Truy cập vào trang web bán hàng, tìm kiếm sản phẩm , thơng tin sản phẩm , đăng kí , qn mật thơng qua thiết bị máy tính, laptop b Với nhóm thành viên (user): - Kế thừa chức nhóm người xem hàng - Quản lý giỏ hàng: Xem giỏ hàng, them sản phẩm, xóa sản phẩm, chỉnh sửa loại hàng - Quản lý thông tin cá nhân: Chỉnh sử thông tin người sử dụng (tên, địa chỉ, số điện thoại, thay đổi toán, mật khẩu…) - Xem lịch sử đơn hàng - Thanh toán: Nhập địa chỉ, chọn hình thức tốn - Phản hồi đổi trả - Đánh giá sản phẩm c Với nhóm nhân viên bán hàng: - Đăng nhập - Kiểm tra đơn hàng: Kiểm tra đơn hàng, hủy đơn hàng - Phản hồi d Với nhóm nhân viên kho: - Đăng nhập Quản lý xuất hàng web: them, sửa, xóa sản phẩm Quản lý hàng tồn: thêm, sửa, xóa số lượng sản phẩm Quản lý nhà cung cấp: thêm, sửa, xóa nhà cung cấp Quản lý nhập hàng: đặt hàng, chi tiết hóa đơn, đổi trả nhà cung cấp e Với nhóm người quản lý (admin): - Kế thừa từ nhân viên bán hàng, nhân viên kho - Quản lý thống kê: Lưu trữ lịch sử mua hàng khách hàng thơng qua hóa đơn có chứa chi tiết đơn hàng, xem doanh thu, lịch sử nhập, xuất kho - Quản lý thành viên: Thêm sản phẩm, xóa sản phẩm, cập nhật số lượng sản phẩm, tình trạng, giá thông tin sản phẩm - Quản lý đổi trả sản phẩm: Xem đơn hàng thành viên, cập nhật trạng thái đơn hàng, - Quản lý nhân viên: Lưu trữ thông tin khách hàng phục vụ việc chăm sóc khách hàng f Với nhóm người vận chuyển: - Xem đơn hàng giao - Thêm, sửa xóa trạng thái đơn hàng Phân tích người sử dụng 2.1 Phân chia theo độ tuổi: - Dưới 20: 50% Đây độ tuổi có lượng người sử dụng lớn Đối tượng sử dụng độ tuổi phần lớn học sinh, sinh viên, với sản phẩm bán hướng tới trẻ trung, động nên trang web truy cập chủ yếu độ tuổi - Từ 21 đến 39: 35% Ở độ tuổi phần lớn sinh viên người làm, sản phẩm hướng tới nhóm đối tượng khách hàng độ tuổi này, nhiên tính đặc thù tuổi tác nên có quan tâm truy cập giảm so với nhóm khách hàng độ tuổi 20 - Từ 31 tới 60: 15% Nhóm khách hàng thường hướng tới phong cách thời trang trưởng thành, chững chạc nên sản phẩm website khơng phù hợp Tuy nhiên, nhu cầu mua sắm cho bạn bè, cái, người thân, website có lượng quan tâm định nhóm người sử dụng 2.2 Kỹ năng: - Sử dụng máy tính: + Người tiếp cận: 5% + Người sử dụng: 10% + Có kinh nghiệm: 35% + Thơng thạo: 50% Trong thời đại công nghệ 4.0, nhờ phát triển vơ nhanh chóng điện thoại, máy tính, hệ thống giáo dục nên lượng người biết sử dụng có kinh nghiệm thành thạo sử dụng máy tính lớn, số lượng tiếp cận với máy tính nhỏ hồn tồn giảm thêm với phát triển 2.3 Tần suất: - Người dung không thường xuyên: 70% - Người dung thường xun: 30% Phân tích nhiệm vụ: 3.1 Nhóm thành viên (user): 3.1.1 UC Xem sản phẩm: Tác nhân Khách hàng Mô tả Chức xem sản phẩm hiển thị chi tiết sản phẩm khách hàng muốn xem Tiền điều kiện Khách hàng truy cập vào website Luồng liệu Hệ thống hiển thị danh sách sản phẩm Khách hàng chọn sản phẩm muốn xem Hệ thống ghi nhận thao tác khách hàng Hệ thống xử lý thao tác khách hàng Chi tiết sản phẩm gửi tới hệ thống thị với khách hàng Kết thúc Luồng liệu ngoại lệ 3.1.2 UC Thanh toán: Tác nhân Thành viên Mơ tả Chức giúp khách hàng tốn sản phẩm nhận hàng (COD) Tiền điều kiện Khách hàng phải có sản phẩm giỏ hàng Luồng liệu Khách hàng trỏ chuột vào “Giỏ hàng” Hệ thống chuyển hướng sang giao diện giỏ hàng khách hàng Khách hàng chọn sản phẩm cần tốn Hệ thống nhận xử lí thông tin Hệ thống chuyển hướng giao diện chọn hình thức tốn Khách hàng chọn hình thức toán nhận hàng Hệ thống nhận xử lí thơng tin Hệ thống chuyển hướng sang giao diện xác nhận đặt hàng Khách hàng kiểm tra thông tin đặt hàng lần cuối chọn “Đặt hàng” 10 Hệ thống ghi nhận xử lí thơng tin 11 Bảng thông báo “Đơn hàng đặt thành công” lên giao diện sử dụng khách hàng 12 Khách hàng chọn “Đồng ý” 13 Kết thúc Luồng liệu ngoại lệ Luồng kiện A1: Khách hàng khơng chọn hình thức tốn thẻ ví điện tử 3.1.3 UC Thêm sản phẩm vào giỏ hàng: Tác nhân Thành viên Mô tả Chức thêm sản phẩm vào giỏ hàng Tiền điều kiện Khách hàng phải đăng nhập thành công Luồng liệu Hiển thị sản phẩm Khách hàng tiến hành chọn sản phẩm cần Sản phẩm với chi tiết sản phẩm Khách hàng trỏ chuột vào nút “ Thêm vào giỏ hàng” Màn hình hiển thị “Xác nhận thêm sản phẩm ?” với nút “Xác nhận” “Không” Nếu khách hàng ấn “Xác nhận” hình hiển thị thông báo xác nhận cập nhật sản phẩm vào giỏ hàng Khách hàng ấn “Khơng” sản phẩm không thêm vào giỏ hàng quay “Giỏ hàng” Sản phẩm khách hàng thêm có giỏ hàng Luồng liệu ngoại lệ ● Luồng kiện A1: Sản phẩm hết hàng 1.1 Nút thêm sản phẩm không hoạt động quay sản phẩm khách hàng bạn vừa xem ● Luồng kiện A2: Khách hàng đặt số lượng sản phẩm cịn kho 2.1 Hệ thống hiển thị thơng báo “ Sản phẩm đặt số lượng cho phép.” 3.1.4 UC Thay đổi hình thức tốn: Tác nhân Thành viên Mơ tả Chức giúp khách hàng tốn hình thức thẻ ngân hàng, ví điện tử… đặt hàng Tiền điều kiện Khách hàng phải có sản phẩm giỏ hàng Luồng kiện Khách hàng trỏ chuột vào “Giỏ hàng” Hệ thống chuyển hướng sang giao diện giỏ hàng 10