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

 Tuy nhiên, với tốc độ nhanh chóng của số lượng người sử dụng các nền tảng mua sắp trực tuyến, , nhiều trang web bán hàng hay các sàn thương mại điện tử đã không kịp cải thiện dẫn tới m

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ọ và tên Sinh viên: Hoà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

II PHÂN TÍCH NGƯỜI SỬ DỤNG VÀ PHÂN TÍCH NHIỆM VỤ 5

2

I. ĐỀ XUẤT ĐỀ TÀI

1 Giới thiệu vấn đề

 Giày dép là thứ trang phục không thể thiếu với mỗi chúng ta Sự đa dạng về chủng loại, mẫu mã đem tới cho chúng ta rất nhiều sự lựa chọn, nhưng chính điều đó cũng dẫn tới việc làm giả, làm nhái các thương hiệu giày dép Điều này càng trở nên phổ biến hơn trên

các nền tảng mua sắm trực tuyến bởi mua sắm trực tuyến đang dần trở thành một xu thế

phổ biến trên toàn thế giới, tăng trưởng một cách nhanh chóng Ở Việt Nam, hình thức mua sắm trực tuyến tuy chỉ mới xuất hiện trong những năm trở lại đây nhưng đã có được một lượng người sử dụng rất lớn, nhất là trong tình hình dịch COVID hiện nay

 Tuy nhiên, với tốc độ nhanh chóng của số lượng người sử dụng các nền tảng mua sắp trực tuyến, , nhiều trang web bán hàng hay các sàn thương mại điện tử đã không kịp cải thiện dẫn tới một số hạn chế như :

+ Tốc độ tải trang chậm

+ Nhiều quảng cáo, chi tiết thừa, gây nhiễu cho khả năng duyệt web của người dùng

+ Một số trang web không có sự đầu tư và tối ưu trong giao diện cũng như trải nghiệm người dung, gây khó chịu và giảm khả năng tiếp cận trang web của doanh nghiệp hay cửa hàng kinh doanh

2 Giải pháp:

 Nắm bắt được về nhu cầu và thói quen sử dụng nền tảng mua sắm trực tuyến của người tiêu dùng, cũng như các vấn đề về tính rõ ràng cũng như giá cả khi mua sắm, nhóm chúng em xin đưa ra một nền tảng mới mua sắm với tiềm năng giải quyết được các vấn

đề trên, và cụ thể ở đây là một website buôn bán giày dép chính hãng

 Xây dựng website để tương tác với khách hàng mọi lúc mọi nơi, không bị giới hạn với thời gian không gian địa điểm như phương thức bán hàng truyền thống.Thông qua các tiện ích trên website, khách hàng có thể tương tác trực tiếp với doanh nghiệp, tìm hiểu các 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 sự đa dạng trong 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 có thể dễ tiếp cận hơ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 và 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 chính 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 ra đối với người sử dụng websites là:

o Đơn giản khi 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 sự thoải mái cho người sử dụng

3 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 của Ninjamock (https://ninjamock.com/)

+ Visual Studio Code

Hoà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 Hoàng Long - Thu thập thông tin, đề xuất đề tài

- Phân tích người sử dụng và phân tích nhiệm vụ

- Báo cáo

4

II. PHÂN TÍCH NGƯỜI SỬ DỤNG VÀ PHÂN TÍCH NHIỆM VỤ

1 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 ở trên phố Chùa Bộc kinh doanh theo phương thức truyền thống (mua sắm tại cửa hàng) Cửa hàng vận hành với quy mô nhỏ, bao gồm một 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 tại 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 của dịch COVID, cửa hàng buộc phải đóng cửa tạm thời vì 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 của khách hàng là rất lớn, cửa hàng quyết định chuyển sang buôn bán trực tuyến để cải thiện tình hình kinh doanh Chủ cửa hàng muốn một website bán kết hợp quản lý bán hàng, nhập xuất sản phẩm một cách linh hoạt, dễ kiểm soát, phù hợp với nhu cầu của người tiêu dùng

1.2 Mô tả bài toán:

Khách hàng (guest) có thể xem cũng như tìm kiếm thông tin, giá cả , đăng kí , quên mật khẩu

Để có thể tiến hành đặt hàng và thanh 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 các thông tin cá nhân như tên, địa chỉ đặt hàng, số điện thoại.Thành viên (user) kế thừa chức năng của khách hang

Người quản lý (admin) sẽ đăng sản phẩm của mình đi kèm với thông tin chi tiết của sản phẩm (giá cả, số lượng, tình trạng…) Khách hàng sau khi chọn mua được sản phẩm đăng nhập/đăng

ký thành viên để có thể tiến hành thêm sản phẩm vào giỏ hàng và tiến hành thanh toán

Sau khi xác nhận thanh toán và đặt hàng, khách hàng và người quản lý, mỗi bên sẽ nhận được 1 hoá đơn Hoá đơn của khách hàng được lưu trữ vào lịch sử đơn hàng để khách hàng có thể tiện theo dõi lộ trình giao hàng Hoá đơn của khách hàng mà người quản lý nhận sẽ đi kèm mã số đơn hàng để có thể gửi cho đơn vị vận chuyển, sau đó được 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 của bên bán hàng sẽ tới nhận đơn hàng có thông tin người mua hàng và tiến hàng giao hàng

Khả năng sử dụng giao diện website sẽ được chia làm 4 mức:

- Người mới tiếp cận: Những người mới biết đến máy tính, chưa biết quá nhiều cách để thao tác với máy tính

- Người mới sử dụng: Những người đã sử dụng máy tính nhưng chưa nhiều và 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 và có tần suất sử dụng trung bình

- Người thành thạo: Những người đã có thể sử dụng nhuần nhuyễn máy tính và 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 như trên, nhóm chúng em đặt ra mục tiêu xây dựng một 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 chính là những người trẻ (có độ tuổi từ dưới 20 cho tới 31 tuổi) , ngoài ra các nhóm đối tượng khách hàng là người trưởng thành (có độ tuổi từ trên 31 tuổi) vẫn có thể thao tác được websites bởi tính thân thiện với người dùng mà nhóm hướng tới khi phát triển giao diện

Websites cũng sẽ 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 và mạng máy tính, đồng thời cũng sẽ cung cấp các công cụ hỗ trợ những người mới tiếp cận, mới sử dụng máy tính để họ có thể dễ dàng học và làm quen với giao diện của websites

1.4 Công cụ thao tác:

- Websites sẽ được phát triển để người sử dụng có thể sử dụng thông qua máy tính để bàn, máy tính xách tay, các phần cứng có màn hình, chuột, bàn phím sử dụng mạng máy tính và có cài đặtcác trình duyệt websites (Google Chrome, Firefox, Safari, Microsoft Edge,…)

- Vì thời gian thực hiện dự án có hạn nên trong thời gian học môn tương tác Người- Máy, nhómchúng em sẽ tập trung vào phát triển websites tương thích với các thiết bị máy tính để bàn, máy tính xách tay chạy các hệ điều hành phổ biến như: Windows, MacOS, Linux Đối với các nền tảng duyệt websites trên các thiết bị cầm tay như Android, iOS,… , nhóm sẽ cân nhắc tới việc phát triển thêm trong 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í , quên mật khẩu thông qua các thiết bị như máy tính, laptop

b Với nhóm thành viên (user):

- Kế thừa các chức năng của 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 thanh toán, mật khẩu…)

- Quản lý xuất hàng trên 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 của 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á cả và thông tin sản phẩm

- Quản lý đổi trả sản phẩm: Xem các đơn hàng hiện tại của 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 của 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 được giao

- Thêm, sửa xóa trạng thái đơn hàng

2 Phân tích người sử dụng 2.1 Phân chia theo độ tuổi:

- Dưới 20: 50%

Đây là độ tuổi có lượng người sử dụng lớn nhất Đối tượng sử dụng ở độ tuổi này phần lớn là học sinh, sinh viên, với các sản phẩm được bán ra hướng tới sự trẻ trung, năng động nên trang web sẽ được truy cập chủ yếu bởi độ tuổi này

Trong thời đại công nghệ 4.0, nhờ sự phát triển vô cùng nhanh chóng của đ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 và có kinh nghiệm thành thạo sử dụng máy tính

là rất lớn, số lượng mới tiếp cận với máy tính tuy nhỏ nhưng hoàn toàn có thể giảm thêm với sự phát triển như hiện nay

2.3 Tần suất:

- Người dung không thường xuyên: 70%

- Người dung thường xuyên: 30%

8

3.1.2 UC Thanh toán:

Mô tả Chức năng giúp khách hàng thanh toán sản phẩm khi nhận

được hàng (COD)Tiền điều kiện Khách hàng phải có sản phẩm trong giỏ hàng

Luồng dữ liệu chính 1 Khách hàng trỏ chuột vào “Giỏ hàng”

2 Hệ thống chuyển hướng sang giao diện giỏ hàng của khách hàng

10 Hệ thống ghi nhận và xử lí thông tin

11 Bảng thông báo “Đơn hàng đã được đặt thành công”

hiện lên giao diện sử dụng của khách hàng.

12 Khách hàng chọn “Đồng ý”

13 Kết thúc

Luồng dữ liệu ngoại lệ 1 Luồng sự kiện A1: Khách hàng không chọn hình thức

thanh toán bằng thẻ hoặc ví điện tử

3.1.3 UC Thêm sản phẩm vào giỏ hàng:

Mô tả Chức năng 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 dữ liệu chính 1 Hiển thị các sản phẩm

2 Khách hàng tiến hành chọn sản phẩm mình cần

3 Sản phẩm hiện ra với chi tiết sản phẩm

4 Khách hàng trỏ con chuột vào nút “ Thêm vào giỏ hàng”

5 Màn hình hiển thị “Xác nhận thêm sản phẩm ?” với 2 nút “Xác nhận” hoặc “Không”

6 Nếu khách hàng ấn “Xác nhận” thì mà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” thì sản phẩm sẽ không được thêm vào giỏ hàng và quay về “Giỏ hàng”

7 Sản phẩm khách hàng thêm đã có trong giỏ hàng

Luồng dữ liệu ngoại lệ ● Luồng sự kiện A1: Sản phẩm hết hàng

1.1 Nút thêm sản phẩm sẽ không hoạt động và quay về sản phẩm khách hàng bạn vừa xem

● Luồng sự kiện A2: Khách hàng đặt quá số lượng sản phẩm còn trong kho

2.1 Hệ thống hiển thị thông báo “ Sản phẩm đặt quá số lượng cho phép.”

3.1.4 UC Thay đổi hình thức thanh toán:

Mô tả Chức năng giúp khách hàng thanh toán bằng hình thức thẻ ngân

hàng, ví điện tử… khi đặt hàngTiền điều kiện Khách hàng phải có sản phẩm trong giỏ hàng

Luồng sự kiện chính 1 Khách hàng trỏ chuột vào “Giỏ hàng”

2 Hệ thống chuyển hướng sang giao diện giỏ hàng của

10

10 Đơn vị thanh toán kiểm tra thông tin thanh toán của khách hàng và xác nhận chính xác.

11 Đơn vị thanh toán gửi hóa đơn thanh toán cho khách hàng

12 Khách hàng kiểm tra và nhập mã xác nhận giao dịch

13 Hệ thống thanh toán kiểm tra và xác nhận thanh toán chính xác

14 Đơn vị thanh toán xử lí và gửi thông tin cho đơn vị bán hàng xác nhận đã thanh toán thành công

a Đơn vị thanh toán hiển thị bảng thông báo

“Thông tin khách hàng nhập vào không chính xác”

b Quay trở về bước 9 của luồng sự kiện chính

2 Luồng sự kiện A2: Khách hàng không đủ tiền trong thẻ,

ví điện tử để thanh toán

a Đơn vị thanh toán hiển thị bảng thông báo “Số tiền trong tài khoản của quý khách không đủ để thực hiện thanh toán giao dịch này”

b Đơn vị thanh toán chuyển thông tin về cho đơn

vị bán hàng

c Đơn vị bán hàng nhận và xử lí thông tin

d Hệ thống tự động chuyển về giao diện xác nhận thanh toán

e Cửa sổ thông báo “Đã xảy ra lỗi, vui lòng kiểm tra lại”

f Khách hàng chọn “Xác nhận” trên cửa sổ thông báo

g Chuyển về bước 2 của luồng sự kiện chính

3.1.5 UC Xem lịch sử đơn hàng:

Mô tả Chức năng hiển thị đơn hàng đã mua và đã được nhận hàngTiền điều kiện Đơn hàng của khách hàng đã xử lý thành công

Luồng dữ liệu chính 1 Khách hàng trỏ chuột vào “Lịch sử đơn hàng”

2 Hệ thống kiểm tra danh sách các sản phẩm và đơn hàng

3.1.6 UC Hủy đơn hàng:

Mô tả Chức năng giúp thành viên xóa đơn hàng có sai sót đặt nhầm sản

phẩm , thay đổi thông tin địa chỉ giao hàng , … Tiền điều kiện Thành viên đã đặt đơn hàng thành công

Luồng sự kiện chính 1 Thành viên trỏ chuột vào “Chi tiết đơn hàng”

2 Hệ thống sẽ kiểm tra các đơn hàng mà thành viên đang đặtmua trước đó

3 Hệ thống sẽ hiển thị các đơn hàng mà khách hàng đang đặt mua trước đó đi kèm với trạng thái đơn hàng

4 Thành viên kiểm tra đơn hàng và chọn “Hủy đơn hàng”

5 Hệ thống hiển thị bảng thông báo “Bạn có chắc chắn muốn hủy đơn hàng không ?” và đề mục chọn lý do hủy đơn hàng,

6 Thành viên chọn lý do hủy đơn hàng và chọn “Xác nhận”

7 Hệ thống ghi nhận và xử lý thông tin của thành viên

8 Hiển thị bảng thông báo “Đơn hàng đã được xử lý thành công”

9 Hệ thống tự động chuyển tiếp về giao diện Lịch sử đơn hàng

Luồng sự kiện ngoại lệ 1 Luồng sự kiện A1: Khách hàng không bấm chọn hủy đơn

hàng được

1.1 Hệ thống hiển thị bảng thông báo “ Đơn hàng

không thể bị hủy bởi đơn vị vận chuyển đã tiếp nhận”

1.2 Quay trở lại bước 1 của luồng sự kiện chínhKết quả Đơn hàng bị hủy được hiển thị trong Lịch sử đơn hàng của thành

viên

14

III. PHÁC HỌA THIẾT KẾ

3.1 Giới thiệu

- Website Scott cập nhật những mặt hàng giày phù hợp cho mọi lứa tuổi Luôn luôn cập nhật

mọi mặt hàng mới nhất phù hợp yêu cầu khách hàng và cam kết sản phẩm chính hãng

3.2 Thiết kế tổng quan:

- Dựa trên các phân tích về các nhóm người sử dụng và khảo sát yêu cầu giaoa diện, chức năng

của phần mềm, nhóm chúng em đã tiến hành thiết kế chia chương trình thành 3 nhóm chức năngchính:

o Xem chi tiết sản phẩm: Chức năng này giúp người sử dụng xem các thông tin chi tiết về sản phẩm đã chọn như giá bán, hình thức,…

o Xem lịch sử đơn hàng: Hiển thị các đơn hàng đã mua và trạng thái đơn hàng

o Thêm sản phẩm vào giỏ hàng: Chức năng giúp người sử dụng lưu lại sản phẩm muốn mua vào giỏ hàng trước khi tiến hành thanh toán

3.3 Thiết kế kịch bản mẫu:

3.3.1 Kịch bản xem chi tiết sản phẩm:

- Khi người dùng muốn xem chi tiết sản phẩm, người dùng sẽ click vào tên sản phẩm mà

mình muốn xem chi tiết, hệ thống sẽ điều hướng sang trang chi tiết của sản phẩm

3.3.2 Xem lịch sử đơn hàng:

16

- Khi người sử dụng muốn xem lịch sử đơn hàng của mình, người sử dụng sẽ click vào mục “Đơn hàng” ở menu đầu trang, hệ thống sẽ điều hướng sang lịch sử đơn hàng.

1.3 Biểu đồ thêm sản phẩm vào giỏ hàng

- Khi người dùng muốn thêm một sản phẩm vào giỏ hàng, người dùng sẽ click vào nút thêm vào giỏ hàng, hệ thống sẽ thêm mặt hàng đó vào giỏ hàng của quý khách

Ở giao diện này, người dùng có thể xem được số lượng mặt hàng mình đã đặt, chi tiết

về giá và tổng tiền, và hóa đơn của mình

Nếu không muốn mua một sản phẩm nào đó, người dùng sẽ click nút xóa sản phẩm và

hệ thống sẽ xóa sản phẩm khỏi giỏ hàng