Báo cáo Thiết kế website bán đồ gia dụng LEXI môn Thiết kế Website cơ bản | Học viện Công Nghệ Bưu Chính Viễn Thông

lOMoAR cPSD| 58977565
HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG
KHOA ĐA PHƯƠNG TIỆN ----------***--------- TÀI LIỆU BÁO CÁO
MÔN HỌC THIẾT KẾ WEB CƠ BẢN
Đề tài: Thiết kế website bán đồ gia dụng LEXI
Sinh viên thực hiện: Phạm Xuân Thủy Mã sinh viên: B22DCTM111 Nhóm bài tập: 02
Giảng viên giảng dạy: Ths. Vũ Thị Tú Anh
Lớp: Thiết kế Web cơ bản 02 lOMoAR cPSD| 58977565 LỜI NÓI ĐẦU
Trong bối cảnh phát triển mạnh mẽ của thương mại điện tử và nhu cầu mua sắm trực
tuyến ngày càng gia tăng đến chóng mặt, việc thiết kế một trang web chuyên nghiệp
không chỉ là một công cụ hỗ trợ bán hàng mà còn là nên tảng quan trọng để xây dựng
thương hiêu. Nhận biết được tầm quan trọng của vấn đề này, nhóm em đã lựa chọn thiết
kế một web bán đồ gia dụng có tên LEXI làm nội dung cho bài báo cáo môn Thiết kế web căn bản.
Môn học đã giúp em hiểu rõ hơn về các kiến thức cơ bản như HTML, CSS, JavaScript
cũng như cách áp dụng các nguyên tắc GESTAL trong thiết kế giao diện và tối ưu trải
nghiệm người dùng. Qua đó, em đã có thể xây dựng những trang web đơn giản, đáp ứng
được các yêu cầu về thẩm mỹ và chức năng.
Bài báo cáo là thành quá của quá trình học tập, tập trung chủ yếu vào các khía cạnh
quan trọng của việc thiết kế trang web như: Bố cục giao diện, Tính năng cần thiết, Các
đối tượng sửa dụng, Phân tích chức năng,...
Em hy vọng rằng bài báo cáo này không chỉ đáp ứng yêu cầu trong phạm vi môn học
mà còn thể hiện sự hiểu biết và sáng tạo trong việc áp dụng kiến thức lý thuyết vào thực tế
Em xin chân thành cảm ơn cô Vũ Thị Tú Anh đã luôn tận tình trong việc truyền đạt và
hướng dẫn em trong học tập để em có thể hoàn thành bài báo cáo một cách tốt nhất.
1. Giới thiệu chunng
a. Giới thiệu chung về Website LEXI
Website bán đồ gia dụng LEXI là nền tảng trực tuyến được thiết kế với mục tiêu
mang lại sự tiện lợi và trải nghiệm mua sắm tuyệt vời cho khách hàng. Với giao
diện thân thiện, dễ thao tác, LEXI giúp người dùng dễ dàng sử dụng và lựa chọn
các sản phẩm gia dụng chất lượng cao. Website LEXI được thiết kế với định
hướng mang lại trải nghiệm người dùng tốt nhất, đồng thời tích hợp các tính
năng cần thiết như danh mục sản phẩm, giỏ hàng, thanh toán trực tuyến,…..
b. Giới thiệu về mong muốn của đối tượng sử dụng được SV lựa chọn để thiết
kế Thiết kế nhóm em hướng tới 2 đối tượng chính: - Người mua - Người quản lý
Bài báo cáo của em hướng tới là đối tượng người mua và người quản lý
Mong muốn của đối tượng người mua đối với những giao diện mà em thiết kế là:
- Người mua khi sử dụng chức năng so sánh sản phẩm trên wbsite của LEXI có
mong muốn tìm hiểu thông tin chi tiết, trực quan, và chính xác giữa các sản
phẩm để dễ dàng đưa ra quyết định mua hàng phù hợp với nhu cầu, sơ thích cá
nhân và ngân sách của họ lOMoAR cPSD| 58977565
- Người mua sử dụng chức năng hiển thị chi tiết sản phẩm mong muốn nắm được
đầy đủ thông tin đầy đủ về sản phẩm (Như thông số kỹ thuật, hình ảnh thực tế
và nhận xét từ khách hàng đã mua), họ muốn có các tùy chọn khác như tùy
chọn mua hàng tiện lợi (thêm vào giỏ, đặt mua, trả ghóp, thêm số lượng) và học
muốn có khả năng tương tác với người bán và người mua khác thông qua để họ
đưa ra quyết định chính xác và không bị mất nhiều thời gian cho việc cân nhắc
- Người mua sử dụng chức năng hiển thị và sửa thông tin tài khoản mong muốn:
Quản lý thông tin cá nhân một cách dễ dàng (thông qua xem và sửa họ tên, ảnh
đại diện, số điện thoại, email, ngày sinh và giới tính ), tăng cường bảo mất cho
tài khoản (thông qua đổi mật khẩu và quyền vô hiệu hóa hoặc xóa tài khoản
khi người dùng không còn sử dụng )
- Người mua sử dụng chức năng hiển thị lịch sử mua hàng, người mua mong
muốn biết và theo dõi được trạng thái của đơn hàng ( chờ xác nhận, đang giao,
đã giao, đã hủy) và có thể thực hiện các thao tác sau mua như: hủy, hoàn trả,
mua lại đơn hàng, đồng thời có thể đánh giá nhanh hoặc chi tiết khi nhận hàng
khi người mua có mong muốn được tương tác với đơn hàng đã hoàn thành
- Người mua sử dụng chức năng hiển thị đánh giá của tôi (Hiển thị đơn hàng đã
đánh giá), người mua mong muốn dễ xem lại danh sách đơn hàng đã đánh giá
trước đó theo lịch sử phản hồi của họ đồng thời có thể tương tác với sản phẩm
đã đánh giá qua sửa đánh giá, cập nhật chế độ ẩn danh, thêm ảnh và video
c. Người quản lý sử dụng chức năng quản lý khách hàng có mong muốn quản lý
thông tin khách hàng dễ dàng, cá nhân hóa dịch vụ, cải thiện tương tác
d. Danh sách các chức năng và mục đích
- Chức năng so sánh sản phẩm: Hỗ trợ hiển thị thông tin chi tiết giữa các sản
phẩm để người dùng dễ so sánh và đưa ra quyết định dễ dàng hơn .
- Chức năng hiển thị chi tiết sản phẩm: Giúp cung cấp thông tin đầy đủ về sản
phẩm, Hỗ trợ quá trình mua hàng thông qua các nút điều hướng (Thêm số
lượng, thêm vào giỏ,…), giúp khách hàng tương tác với người bán và người
mua hàng khác (Tư vấn, đánh giá sao, viết bình luận,…).
- Chức năng hiển thị và sửa thông tin tài khoản: Giúp người dùng quản lý và cập
nhật thông tin cá nhân, đảm bảo bảo mật tài khoản.
- Chức năng hiển thị lịch sử mua hàng: Giúp người mua theo dõi và quản lý đơn
hàng ở từng giai đoạn.
- Chức năng hiển thị đánh giá của tôi ( xem đơn hàng đã đánh giá): Giúp người
dùng xem sản phẩm đã đánh giá và có thể cập nhật và chỉnh sửa đánh giá và có
thể mua lại nếu có nhu cầu.
- Chức năng quản lý khách hàng: thu thập và phân tích dữ liệu để tăng cường trải
nghiệm và sự hài lòng của khách hàng
2. Thiết kế chức năng so sánh sản phẩm
a) Mục đích của chức năng
- Cung cấp thông tin chi tiết về các sản phẩm được đặt canh nhau để biết được sự
khác biệt và lựa chọn sản phẩm lOMoAR cPSD| 58977565
- Giúp khách hàng không phải mở nhiều trang sản phẩm riêng biệt mà vẫn nắm
được thông tin cần thiết như tính năng, giá cả, thông số kỹ thuật,…
b) Giao diện của chức năng lOMoAR cPSD| 58977565 lOMoAR cPSD| 58977565 lOMoAR cPSD| 58977565 lOMoAR cPSD| 58977565 lOMoAR cPSD| 58977565 lOMoAR cPSD| 58977565
c) Hoạt động của chức năng
- Khách hàng chọn so sánh tại sản phẩm mà khách hàng muốn lấy làm gốc để so sánh
- Sau đó bảng so sánh sẽ xuất hiện khách hàng có thể chọn thêm 1 hoặc 2 sản
phẩm để so sánh cùng lúc bằng cách nhập tên sản phẩm vào ô “Nhâp tên sản
phẩm muốn so sánh” sẽ danh sách gợi ý sản phẩm theo sợ trùng khớp tỏng kí
tự khách hàng nhập vào ô đó lOMoAR cPSD| 58977565
- Khi khách hàng không muốn muốn xóa sản phẩm khỏi chức năng so sánh thì sẽ
click vào nút “x” trên mỗi sản phẩm
- Khi khách hàng không muốn so sánh sản phẩm và muốn thoát khỏi chức năng
thì click vào nút “Tắt so sánh”
- Khi khách hàng đã xác nhận muốn so sánh khi đã chọn sản phẩm mong muốn
thì khách hàng click vào nút “So sánh ngay”
- Sau khi click sánh ngay thì màn hình sẽ chuyển sang hiển thị thông tin sản
phẩm theo cột gồm các số liệu như: Thông tin sản phẩm, tính năng sản phẩm, lOMoAR cPSD| 58977565
mức tiêu thụ điện năng, tiện ích,.....Trong giao diện này khách hàng vẫn có thể
thêm, xóa sản phẩm tương tư như trên trong khi so sánh mà không phải thao
tác từ đầu và cũng có chức năng mua ngay để khách hàng có thể click mua ngay
d) Phân tích về số liệu
- Chức năng So sánh sản phẩm là: chức năng khai thác số liệu
- Số liệu chức năng khai thác là: Thông tin các sản phẩm được chọn để so sánh
như thông tin sản phẩm, tính năng sản phẩm, mức tiêu thụ điện năng, tiện ích,
thông số kích thước/lắp đặt, xuất sứ & bảo hành.
- Chức năng cập nhật số liệu tương ứng: Quản lý sản phẩm (Thêm sản phẩm, sửa
sản phẩm, Xóa sản phẩm) do bạn Dương Văn Kiên thiết kế
3. Thiết kế chức năng hiển thị chi tiết sản phẩm
a. Mục đích của chức năng lOMoAR cPSD| 58977565
- Giúp cung cấp thông tin đầy đủ về sản phẩm, Hỗ trợ quá trình mua hàng thông
qua các nút điều hướng (Thêm số lượng, thêm vào giỏ,…), giúp khách hàng
tương tác với người bán và người mua hàng khác (Tư vấn, đánh giá sao, viết bình luận, …). b. Giao diện chức năng
c. Hoạt động của chức năng lOMoAR cPSD| 58977565
- Khách hàng muốn xem chi tiết của từng sản phẩm trong danh sách sản phẩm
của 1 danh mục sản phẩm bằng cách click trực tiếp vào khung có chữa sản phẩm
- Giao diện màn hình sẽ chuyển sang trang chi tiết sản phẩm gồm các các chức
năng hiển thị như: xem thông tin sản phẩm, xem trạng thái sản phẩm, xem hình
ảnh, xem hình ảnh thực tế, xem nhận xét và xem thông số kỹ thuật và các chức
năng tương tác như: Thêm số lượng, chọn màu sắc, thêm sản phẩm vào giỏ, đặt
mua, tư vấn, trả góp, đánh giá sao, viết bình luận
- Với các chức năng hiển thị hình và hiển thị ảnh thực tế khi khách hàng click
vào sẽ chuyển sang giao diện màn hình khác có chứa các ảnh có sẵn
- Với chức năng hiển thị thông số và hiểnthị nhận xét sản phẩm trang sẽ tự động
cuộn xuống phần thông số và bình luận về sản phẩm ngay ở bên dưới sản phẩm.
- Với chức năng đặt mua, trả góp khi click sẽ chuyển sang trang chi tiết đơn mua
và chi tiết đơn mua trả góp để khách hàng nhập đầy đủ thông tin cá nhân
- Với chức năng thêm số lượng khách hàng có thể ấn “+” để thêm và ấn “ - ” để giảm bớt số lượng lOMoAR cPSD| 58977565
- Với chức năng tư vấn khi khách hàng click sẽ hiện một biểu mẫu có thông tin
như họ tên, số điện thoại và một ô để khách hàng nhập ghi chú nếu cần. Khi
khách hàng muốn gửi thông báo thì sẽ nhấn nút “ Gửi yêu cầu” sau đó sẽ có
thông báo đã nhận được phản hồi hiện nên để báo cho khách hàng biết quy
trình gửi tư vấn đã hoàn thành, còn khi khách hàng muốn tắt thông báo chỉ cần
click nut “x” trên biểu mẫu.
- Chức năng thêm vào giỏ hàng: khi khách hàng click thêm vào giỏ hàng thì sản
phẩm sẽ được thêm vào giỏ hàng và sẽ có thông báo “ Sản phẩm đã được thêm
vào giỏ hàng” khách hàng có thể chọn “Tiếp tục mua sắm” hoặc có thể chọn
“Xem giỏ hàng” thì sẽ hiện giỏ hàng lOMoAR cPSD| 58977565
- Chức năng đánh giá và hiển thị đánh giá: khách hàng có thể đánh giá sao bằng
cách cọn số sao phù hợp với trải nghiệm của mình hoặc viết bình luận về sản phẩm lOMoAR cPSD| 58977565 d. Phân tích số liệu
Chức năng hiển thị hình sản phẩm, hiển thị ảnh thực tế, hiển thị thông số kĩ
thuật, hiển thị đánh giá
- Là chức năng: khai thác số liệu lOMoAR cPSD| 58977565
- Số liệu được chức năng khai thác: Thông tin chi tiết sản phẩm, hình ảnh và
hình ảnh thực tế của khách hàng khác, số liệu về đánh giá của khách hàng khác.
- Chức năng cập nhật số liệu tương ứng: Chức năng đánh giá sản phẩm của
khách hàng khác và chức năng quản lý sản phẩm (Thêm sản phẩm, sửa sản
phẩm, Xóa sản phẩm) do bạn Dương Văn Kiên thiết kế và chức năng quản lý
bình luận do bạn Hoàn Vũ Long thiết kế lOMoAR cPSD| 58977565
Chức năng mua hàng và trả góp
- Là chức năng: cập nhật số liệu
- Số liệu được chức năng cập nhật là: Thông tin cụ thể đơn hàng: Thông tin địa
chỉ giao hàng (họ tên, địa chỉ, phương thức thanh toán,..) và danh sách sản
phẩm.( số lượng, tổng tiền, mã khuyến mãi,..)
- Chức năng khai thác số liệu tương ứng là: Chức năng quản lý đơn hàng do bạn
Nguyễn Duy Hưng thiết kế lOMoAR cPSD| 58977565
Chức năng thêm số lượng và thêm vào giỏ
- Là chức năng: Cập nhật số liệu
- Số liệu được chức năng cập nhật là: Thông tin sản phẩm kèm theo số lượng
- Chức năng khai thác số liệu tương ứng là: Chức năng giỏ hàng do bạn Nguyễn Duy Hưng thiết kế