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

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 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í , qn mật Để tiến hành đặt hàng toá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 xuyên: 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 tốn: Tác nhân Thành viên Mơ tả Chức giúp khách hàng toá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 toá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 tố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 Luồng liệu ngoại lệ 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 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 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 B2: Tại giao diện trang chủ, người dùng click vào tên, hình ảnh sản phẩm mẫu trang chủ đề xuất để xem thơng tin chi tiết sản phẩm *B2.1: Người dùng tìm kiếm thơng qua nhập thơng tin sản phẩm muốn tìm kiếm thơng qua hộp thoại search click chọn button “Search” để hiển thị thông tin chi tiết sản phẩm 20 B3: Sau click chọn vào sản phẩm muốn xem thông tin, website điều hướng người dùng tới giao diện hiển thị chi tiết sản phẩm 21 4.2 Thêm sản phẩm vào giỏ hàng: *Tiền điều kiện: Người dùng điều hướng tới giao diện xem chi tiết sản phẩm 4.1 B1: Tại giao diện chi tiết sản phẩm, người dùng chọn sản phẩm muốn thêm vào giỏ hàng cách chọn button “Thêm vào giỏ hàng” 22 B3: Sau chọn button “Thêm vào giỏ hàng”, hộp thoại xuất để người dùng có chọn số lượng sản phẩm muốn mua Sau chọn số lượng, người dùng chọn button “Thêm vào giỏ hàng” , hộp thoại biến mất, sản phẩm thêm vào giỏ hàng điều hướng người sử dụng trở lại giao diện chi tiết sản phẩm (B1)_ B3.1: Nếu hộp thoại thêm sản phẩm, người dùng chọn button “Thanh toán”, trang web điều hướng tới giao diện tốn để người dùng tiến hành đặt hàng sản phẩm 23 24 4.3 Xem lịch sử đơn hàng: *Tiền điều kiện: Người dùng thực chức đăng nhập vào website B1: Sau đăng nhập thành công, trang web điều hướng người dùng trở lại giao diện trang chủ website B2: Ở giao diện trang chủ, người dùng chọn vào mục Orders, website điều hướng tới giao diện thị chi tiết tình trạng đơn hàng để người dùng theo dõi thao tác 25 26 V XÂY DỰNG PROTOTYPE: - Sau phác họa thiết kế, nhóm tiến hành xây dựng Prototype máy tính cho website bán giày Với việc thiệt kế cài đặt tảng web, nhóm định sử dụng ngôn ngữ HTML5, JavaScript, CSS3 thông qua công cụ tạo dựng website WordPress để làm phần Front-End PHP choi Back-end 5.1 Giao diện menu chính: - Giao diện trang web tập trung hiển thị đặc điểm website:      Giỏ hàng tổng tiền sản phẩm giỏ Thanh tìm kiếm sản phẩm Các sản phẩm bật, sản phẩm phân theo đặc điểm Thanh điều hướng menu Thông tin liên hệ 27 5.2 Giao diện chi tiết sản phẩm: 28 - Người dùng truy cập vào mục “Cửa hàng” menu điều hướng để hiển thị danh sách sản phẩm Sau chọn lựa sản phẩm cần thiết website điều hướng sang giao diện hiển thị thông tin chi tiết sản phẩm để người dùng tham khảo thêm sản phẩm vào giỏ hàng 29 5.3 Giao diện giỏ hàng – toán: - Sau chọn lựa sản phẩm cần mua muốn tiến hành toán, website điều hướng sang mục “Giỏ hàng” để người dùng kiểm tra danh sách sản 30 phẩm có giỏ hàng tiến hành việc thêm- sửa- xóa sản phẩm trước tiến hành toán - Sau xác nhận sản phẩm muốn mua, người dùng chọn mục “Tiến hành toán” website điều hướng người mục sang giao diện “Đặt hàng” Tại đây, người dùng điền thông tin như: tên, số điện thoại, địa giao hàng,… để tiến hành đặt hàng VI PHÁT TRIỂN CHƯƠNG TRÌNH 6.1 Phần mềm phát triển: - Để phát triển websites, nhóm chúng em sử dụng tới số công cụ, phần mềm như: o StarUML: xây dựng thuộc tính người dùng o Ninjamock (https://ninjamock.com/): phác thảo giao diện websites o Wordpress (https://wordpress.com/): Xây dựng giao diện websites hoàn chỉnh 31 VII NGƯỜI SỬ DỤNG KIỂM THỬ VÀ BÁO CÁO KẾT QUẢ Kiểm thử tổng thể giao diện   I D Checklist Description(Mô tả TestCase) Expected Output (Kết mong đợi) Môi trường kiểm thử Môi trường kiểm thử sẵn sàng Kiểm tra tổng thể giao diện Các label, textbox, combo có độ dài, rộng khoảng cách nhau, không xô lệch Các label sử dụng loại font, cỡ chữ, lề trái Các trường hợp bắt buộc nhập phải có dấu (*) Kiểm tra tất lỗi tả, cấu trúc câu, ngữ pháp hình Form bố trí hợp lý dễ sử dụng Màu sắc chữ có tính tương phản cao dễ đọc tiếp nhận thông tin Kiểm tra trường text Với trường nhập Text test trường hợp sau chưa: Blank, Max Length, ký tự đặc biệt, số âm…… Kiểm tra hình trạng thái mặc Màn hình chức mở: định – Hiển thị title chức hình – Focus set vào trường edit – Hiển thị đầy đủ trường tài liệu thiết kế 32 – Hiển thị giá trị mặc định trường Thanh điều hướng hiển thị quán Thiết kế điều hướng trên hình? hình Xuất thành cuộn dọc, Thanh cuộn ngang cuộn dọc xuất cuộn ngang cách hợp lý Các trang rõ ràng không bị cắt Các phần văn dự án hiển phần văn thị rõ ràng phân trang cách hợp lý 10 Các trang web hiển thị tốt Kiểm tra giao diện trang phải hiển thị nhiều trình duyệt nhiều độ phân giải tốt môi trường yêu cầu khác khơng? 11 Màu chung tồn hình Đúng với thiết kế có set theo yêu cầu 12 Kiểm tra màu chữ, font, font size Màu chữ rõ ràng màu nền, font tiêu tất textbox có set theo yêu chuẩn, font size phù hợp tất cầu label 13 Kiểm tra màu Background (màu nền) có độ tương phản cao với màu chữ làm bật văn bản, với yêu cầu dự án 14 Tất nội dung có font chữ Đúng với thiết kế không? 15 Tất văn có thẳng hàng Đúng với thiết kế khơng? 16 Kiểm tra control hình Tất control hình (Label, textbox, checkbox, list, …) 33 17 Kiểm tra xem web/cửa sổ Tất trang web/cửa sổ truy cập trực tiếp từ menu không? truy cập từ menu Kiểm thử tổng thể chức năng: - Chức xem chi tiết sản phẩm: + Các chức hoàn thiện thực tốt hành động lập trình, giúp người dùng tra cứu thơng tin sản phẩm quan tâm hiệu - Chức giỏ hàng- toán: + Chức hoạt động cách hiệu quả, giúp người sử dụng nhanh chóng tiến hành tốn mặt hàng tra cứu đơn hàng cách tiện lợi xác Kết luận: - Qua môn “Tương Tác Người Máy” chúng em học : + Hiểu tầm quan trọng HCI + Biết lịch sử phát triển HCI + Các đặc trưng giao diện + Hiểu rõ nguyên tắc thiết kế giao diện + Tính tiện dùng hệ thống tương tác +14 bước để thiết kế giao diện - Áp dụng kiến thức nắm chúng em thiết kế prototype Website Scott - Mặc dù có nhiều cố gắng, nhiên q trình thực hiện, kiến thực cịn chưa vững, chưa có nhiều kinh nghiệm nên khơng thể tránh thiếu sót nên số chức nhóm có thiếu sót Vì vậy, nhóm em mong nhận bảo góp ý từ thầy để ứng dụng chúng em hoàn thiện Nhóm em xin chân thành cảm ơn thầy nhiều TÀI LIỆU THAM KHẢO: - Bài giảng môn Tương tác Người-Máy, Khoa công nghệ thông tin, trường Đại học Thủy Lợi (Giảng viên: Nguyễn Thị Thu Hương) - Websites bán giày trực tuyến Ananas (https://ananas.vn/) - Kiểm thử chấp nhận người dùng- Forum trực tuyến Viblo (https://viblo.asia/p/kiem-thu-chapnhan-nguoi-dung-uat-la-gi-gDVK2RJmKLj) - 34