Báo cáo Bài Tập Lớn: Thiết Kế Giao Diện Website Bán Sách - CNTT K25A | Đại học Hồng Đức

lOMoARcPSD| 60380256
TRƯỜNG ĐẠI HỌC HỒNG ĐỨC
KHOA K Ỹ THUẬT, CÔNG NGHỆ VÀ TRUYỀN T HÔNG
BÁO CÁO BÀI TẬP LỚN
HỌC PHẦN: THIẾT KẾ PHẦN MỀM Tên đề tài:
THIẾT KẾ GIAO DIỆN WEBSITE BÁN SÁCH
Thanh Hóa, tháng 05 năm 2025 lOMoARcPSD| 60380256
TRƯỜNG ĐẠI HỌC HỒNG ĐỨC
KHOA KỸ THUẬT, CÔNG NGHỆ VÀ TRUYỀN THÔNG
BÁO CÁO BÀI TẬP LỚN
HỌC PHẦN: THIẾT KẾ PHẦN MỀM Tên đề tài:
THIẾT KẾ GIAO DIỆN WEBSITE BÁN SÁCH
Giảng viên hướng dẫn: ThS . Nguyễn Văn Cường
Sinh viên thực hiện: Nguyễn Hoàng Linh
Mã sinh viên: 2261030022 Lớp: ĐH CNTT K25A
Thanh Hóa, tháng 05 năm 2025 lOMoARcPSD| 60380256 LỜI NÓI ĐẦU
Trong bối cảnh công nghệ thông tin phát triển mạnh mẽ, việc sở hữu một
website bán sách trực tuyến hiện đại và hiệu quả đang trở thành nhu cầu thiết yếu
đối với các nhà cung cấp và phân phối sách. Ngành kinh doanh sách không chỉ
thay đổi về hình thức phát hành mà còn về cách người tiêu dùng tiếp cận và mua
sắm. Một website bán sách không chỉ là nơi cung cấp thông tin về sản phẩm mà
còn đóng vai trò là cầu nối giữa người đọc và tri thức. Vì vậy, em đã lựa chọn đề
tài "Thiết kế giao diện website bán sách " với mục tiêu xây dựng một giao diện
hiện đại, thân thiện và dễ sử dụng.
Các đơn vị lớn như Fahasa, Tiki hay Nhà sách Phương Nam đã khẳng định
được vị thế thông qua việc cung cấp đa dạng đầu sách cùng dịch vụ bán hàng
chuyên nghiệp. Tuy nhiên, để giữ vững và phát triển hơn nữa trong một thị trường
cạnh tranh, việc tối ưu hóa giao diện người dùng (UI) và trải nghiệm người dùng
(UX) trên nền tảng trực tuyến là yếu tố then chốt. Giao diện của website không
chỉ cần đẹp mắt mà còn phải trực quan, dễ thao tác và đáp ứng nhanh chóng nhu
cầu tìm kiếm, lựa chọn và thanh toán của khách hàng.
Mục tiêu của đề tài là phân tích và thiết kế giao diện cho một website bán
sách, hướng đến việc cải thiện trải nghiệm người dùng trong quá trình tìm kiếm
và mua sách. Thông qua việc nghiên cứu hành vi, thói quen và nhu cầu thực tế
của người tiêu dùng, đề tài sẽ đề xuất các giải pháp thiết kế phù hợp, từ trang chủ
đến các màn hình sản phẩm, giỏ hàng và thanh toán. Đồng thời, việc tham khảo
và phân tích các website bán sách phổ biến hiện nay sẽ giúp nhận diện điểm mạnh,
điểm yếu và đưa ra các cải tiến phù hợp.
Trong quá trình học tập, em đã nỗ lực tìm hiểu về thiết kế phần mềm để xây
dựng một bản thiết kế giao diện hoàn chỉnh. Tuy nhiên, do kiến thức còn hạn chế
nên sản phẩm vẫn còn thiếu sót và chưa được hoàn thiện như mong muốn. Em rất
mong nhận được sự góp ý, chỉ dẫn từ quý thầy cô để có thể rút ra kinh nghiệm và
hoàn thiện hơn trong những lần sau. lOMoAR cPSD| 60380256
Cuối cùng, em xin chân thành cảm ơn thầy Nguyễn Văn Cường – giảng viên
bộ môn Hệ thống thông tin, Khoa Công nghệ Thông tin và Truyền thông, Trường
Đại học Hồng Đức – đã tận tình hướng dẫn em hoàn thành bài tiểu luận này.
Em xin chân thành cảm ơn! lOMoARcPSD| 60380256 MỤC LỤC
LỜI NÓI ĐẦU.......................................................................................................i
MỤC LỤC............................................................................................................iii
MỞ ĐẦU...............................................................................................................1
1. Lý do chọn đề tài............................................................................................1
2. Mục tiêu đề tài................................................................................................1
3. Phương pháp thực hiện...................................................................................2
4. Bố cục đề tài...................................................................................................2
ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE BÁN SÁCH.................................3
CHƯƠNG 1. CƠ SỞ LÝ THUYẾT......................................................................3
1.1. Giao diện người dùng (User Interface - UI)................................................3
1.1.1. Khái niệm..............................................................................................3
1.1.2. Các yếu tố cấu thành giao diện người dùng..........................................3
1.2. Trải nghiệm người dùng (User Experience - UX)......................................5
1.2.1. Khái niệm..............................................................................................5
1.2.2. Các yếu tố cấu thành trải nghiệm người dùng......................................5
1.3. Mối quan hệ giữa giao diện người dùng và trải nghiệm người dùng..........7
1.4. Nguyên tắc thiết kế UI/UX.........................................................................8
1.4.1. Đáp ứng nhu cầu của người dùng.........................................................8
1.4.2. Thiết kế rõ ràng, đơn giản, và thống nhất.............................................8
1.4.3. Hiển thị sự phản hồi từ hệ thống đến người dùng.................................8
1.4.4. Tạo ra các bản thử nghiệm trước..........................................................8
1.4.5. Áp dụng định luật Fitts..........................................................................8
1.4.6. Nguyên tắc trình bày văn bản...............................................................9 lOMoAR cPSD| 60380256
1.4.7. Quyền kiểm soát và quyền tự do của người dùng.................................9 CHƯƠNG 2. PHÂN TÍCH YÊU CẦU GIAO
DIỆN.........................................10
2.1. Người dùng mục tiêu.................................................................................10
2.2. Chức năng chính........................................................................................10
2.3. Yêu cầu giao diện......................................................................................11
CHƯƠNG 3. THIẾT KẾ GIAO DIỆN...............................................................13
3.1. Cấu trúc tổng thể giao diện.......................................................................13
3.1.1. Header (Đầu trang)..............................................................................13
3.1.2. Main Content (Nội dung chính)..........................................................13
3.1.3. Footer..................................................................................................14
3.2. Mô tả một số màn hình chính....................................................................14
3.2.1. Màn hình trang chủ.............................................................................14
3.2.2. Màn hình chi tiết sản phẩm.................................................................15
3.2.3. Màn hình đặt sách...............................................................................15
3.4. Hình ảnh minh hoạ giao diện....................................................................17
3.4.1. Màn hình chào mừng và đăng nhập....................................................17
3.4.2. Màn hình Trang chủ............................................................................20
3.4.3. Màn hình sản phẩm.............................................................................21
3.4.4. Màn hình chi tiết sách.........................................................................22
3.4.5. Màn hình gợi ý sách theo tìm kiếm của người dùng...........................24
3.4.6. Màn hình chi tiết đơn hàng.................................................................25
3.4.7. Màn hình phương thức thanh toán......................................................26
3.4.8. Màn hình xác nhận thanh toán thành công.........................................28
ĐÁNH GIÁ VÀ KẾT LUẬN..............................................................................30 lOMoARcPSD| 60380256
TÀI LIỆU THAM KHẢO...................................................................................32
DANH MỤC HÌNH ẢNHHình 1. Các yếu tố cấu thành trải nghiệm người
dùng (UX) ........................................................... Error! Bookmark not defined.
Hình 2. Sơ đồ thể hiện giao diện của website ................................................... 15
Hình 3. Màn hình chào mừng và đăng nhập ..................................................... 16
Hình 4. Màn hình đăng ký tài khoản ................................................................ 17
Hình 5. Màn hình quên mật khẩu ..................................................................... 17
Hình 6. Màn hình đặt lại mật khẩu ................................................................... 18
Hình 7. Màn hình thông báo thay đổi mật khẩu thành công ............................. 18
Hình 8. Màn hình trang chủ của website .......................................................... 19
Hình 9. Màn hình mục sản phẩm ...................................................................... 20
Hình 10. Màn hình chi tiết sách (1) .................................................................. 21
Hình 11. Màn hình chi tiết sách (2) .................................................................. 22
Hình 12. Màn hình gợi ý sách theo tìm kiếm người dùng ................................. 23
Hình 13. Màn hình chi tiết đơn hàng ................................................................ 24
Hình 14. Màn hình phương thức thanh toán ..................................................... 24
Hình 15. Màn hình xác nhận đặt hàng thành công ............................................ 26 lOMoARcPSD| 60380256 MỞ ĐẦU
1. Lý do chọn đề tài
Thói quen đọc sách của người Việt Nam đang dần thay đổi khi công nghệ số
ngày càng phát triển. Người dùng có xu hướng tìm đến các nền tảng trực tuyến để
tìm kiếm, lựa chọn và mua sách thay vì đến trực tiếp các nhà sách truyền thống.
Điều này đặt ra yêu cầu cấp thiết đối với các đơn vị kinh doanh sách trong việc
xây dựng một hệ thống bán hàng trực tuyến có giao diện thân thiện, dễ sử dụng
và phù hợp với hành vi người dùng.
Bên cạnh đó, em nhận thấy rằng nhiều website bán sách hiện nay vẫn còn
tồn tại những hạn chế nhất định về mặt giao diện, như bố cục rối mắt, thông tin
trình bày chưa hợp lý, hoặc quy trình đặt hàng chưa tối ưu. Những yếu tố này có
thể ảnh hưởng trực tiếp đến trải nghiệm người dùng và làm giảm hiệu quả kinh
doanh. Do đó, việc thiết kế lại hoặc xây dựng một giao diện mới theo hướng hiện
đại, chuẩn UI/UX là điều cần thiết.
Từ sự quan sát thực tế kết hợp với niềm yêu thích lĩnh vực thiết kế phần mềm,
em lựa chọn đề tài "Thiết kế giao diện website bán sách" với mong muốn tạo ra
một giải pháp giao diện phù hợp với thị hiếu người dùng hiện đại, đồng thời nâng
cao hiệu quả tương tác giữa người dùng và hệ thống.
2. Mục tiêu đề tài
Mục tiêu của đề tài này là nhằm xây dựng một nền tảng vững chắc cho việc
thiết kế giao diện website bán sách trực tuyến, cụ thể là:
Phân tích và đề xuất thiết kế giao diện cho website bán sách, đảm bảo tính
thẩm mỹ và dễ sử dụng.
Cải thiện trải nghiệm người dùng thông qua việc tối ưu hóa quy trình tìm kiếm và mua sách.
Giúp người dùng dễ dàng tra cứu thông tin về sách, thể loại, tác giả, giá cả.
Đưa ra các giải pháp thiết kế giao diện trực quan, rõ ràng, hiện đại và thân
thiện với người dùng ở nhiều độ tuổi.
3. Phương pháp thực hiện lOMoARcPSD| 60380256
Đề tài sẽ được thực hiện thông qua các phương pháp nghiên cứu lý thuyết,
phân tích yêu cầu người dùng và khảo sát thực tế để hiểu rõ nhu cầu, thói quen và
mong muốn của người dùng khi mua sách trực tuyến. Việc tìm hiểu các xu hướng
thiết kế giao diện hiện đại, đặc biệt trong lĩnh vực thương mại điện tử, sẽ làm cơ
sở để xây dựng giải pháp phù hợp.
Bên cạnh đó, em sẽ sử dụng các công cụ thiết kế như Figma và Canva để
hiện thực hóa ý tưởng giao diện một cách trực quan và sinh động. Quá trình thiết
kế sẽ bao gồm việc tạo các nguyên mẫu (mockup) và giao diện mẫu (prototype)
nhằm kiểm tra mức độ thân thiện và hiệu quả của giao diện qua phản hồi từ người
dùng thử nghiệm. Những phản hồi này sẽ được phân tích và sử dụng để điều chỉnh,
cải tiến thiết kế nhằm tạo ra sản phẩm hoàn thiện hơn.
Cuối cùng, đề tài không chỉ hướng đến việc tạo ra một giao diện đẹp mắt mà
còn góp phần nâng cao chất lượng dịch vụ bán sách trực tuyến, giúp doanh nghiệp
tiếp cận người dùng hiệu quả hơn và thúc đẩy văn hóa đọc trong cộng đồng.
4. Bố cục đề tài
Nội dung báo cáo gồm các thành phần sau: MỞ ĐẦU
Chương 1. Cơ sở lý thuyết
Chương 2. Phân tích yêu cầu giao diện
Chương 3. Thiết kế giao diện
KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
TÀI LIỆU THAM KHẢO
ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE BÁN SÁCH
CHƯƠNG 1. CƠ SỞ LÝ THUYẾT
1.1. Giao diện người dùng (User Interface - UI) 1.1.1. Khái niệm
Giao diện người dùng (UI) là cầu nối giữa người dùng và sản phẩm kỹ thuật
số, bao gồm tất cả những gì người dùng thấy và tương tác trên trang web hoặc
ứng dụng. UI không chỉ là các thành phần như nút bấm, menu, mà còn là cách
chúng được sắp xếp, tổ chức và tương tác. UI liên quan đến màu sắc, kiểu chữ, lOMoAR cPSD| 60380256
hình ảnh và âm thanh để tạo trải nghiệm hấp dẫn. UI tốt tạo trải nghiệm mượt mà,
dễ sử dụng, giúp người dùng dễ dàng hiểu và tương tác với các chức năng và
thông tin một cách nhanh chóng, hiệu quả.
UI ảnh hưởng lớn đến trải nghiệm người dùng bằng cách:
Tạo ấn tượng đầu tiên: Giao diện hấp dẫn, thân thiện và dễ sử dụng tạo
ấn tượng tích cực ngay từ khi người dùng tiếp cận sản phẩm.
Dẫn dắt và hướng dẫn: UI thông minh hướng dẫn người dùng dễ dàng
đến các chức năng hoặc thông tin cần thiết một cách tự nhiên.
Tăng cường tương tác: Các yếu tố thiết kế được sắp xếp hợp lý để kích
thích tương tác tích cực từ người dùng.
Tối ưu hóa trải nghiệm: UI tốt tạo môi trường sử dụng thuận tiện, mượt mà và ít gây khó chịu.
UI là yếu tố cốt lõi quyết định sự hấp dẫn và hiệu suất của sản phẩm, đóng
vai trò quan trọng trong việc tạo ra trải nghiệm người dùng tốt và thành công của sản phẩm.
1.1.2. Các yếu tố cấu thành giao diện người dùng Màu sắc (Color):
Tạo cảm xúc và độ tương phản.
Góp phần hướng dẫn người dùng.
Ví dụ: Màu xanh dương thể hiện sự tĩnh lặng và yên bình.
Hình ảnh và đồ họa (Images & Graphics):
Tạo sức hấp dẫn mạnh mẽ.
Truyền đạt thông điệp một cách trực quan.
Chất lượng hình ảnh và phối hợp màu sắc quan trọng. Văn bản (Text):
Font chữ giúp thông tin dễ đọc.
Kích thước, kiểu chữ và khoảng cách ảnh hưởng đến sự thu hút.
Tạo điểm nhấn và phong cách riêng cho trang web.
Biểu tượng (Icons): lOMoAR cPSD| 60380256
Tăng cường trải nghiệm người dùng.
Cung cấp hướng dẫn và chỉ dẫn rõ ràng.
Giúp người dùng hiểu chức năng hoặc hành động. Nút (Buttons):
Cầu nối giữa người dùng và hành động mong muốn.
Thiết kế dễ nhìn thấy và dễ nhấn.
Ví dụ: "Đăng nhập," "Đăng ký," "Đặt hàng ngay." Menu (Menu):
Giúp điều hướng qua các trang hoặc chức năng khác.
Sắp xếp phải logic và rõ ràng.
Dễ tiếp cận, giúp tìm kiếm thông tin nhanh chóng.
Cách sắp xếp (Layout):
Quyết định đến trải nghiệm người dùng.
Đặt các yếu tố quan trọng ở vị trí dễ nhìn thấy.
Tạo điều kiện thuận lợi cho người dùng tương tác.
Phản hồi tương tác (Interactive Feedback):
Quan trọng trong việc tương tác với giao diện.
Phản hồi khi di chuột, nhấn nút hoặc thông báo hành động.
Tạo trải nghiệm tương tác thú vị và trực quan.
1.2. Trải nghiệm người dùng (User Experience - UX) 1.2.1. Khái niệm
Trải nghiệm người dùng (UX) là cảm nhận và trải nghiệm của người dùng
khi tương tác với website/ứng dụng của bạn. UX tốt giúp người dùng ở lại lâu
hơn, mang lại trải nghiệm tích cực và tăng chuyển đổi. UX tập trung vào cấu trúc
website, hành trình khám phá của người dùng, bố cục trên thiết bị và luồng người
dùng. UX được quyết định bởi mức độ dễ dàng hay khó khăn khi điều hướng
thông qua các yếu tố UI. UI tập trung vào bố cục đồ hoạ, bao gồm phông chữ,
kiểu thiết kế, trường nhập văn bản, chuyển tiếp, hình ảnh và giao diện hoạt hình.
1.2.2. Các yếu tố cấu thành trải nghiệm người dùng lOMoAR cPSD| 60380256
Trải nghiệm người dùng không chỉ đơn thuần là cảm nhận khi tương tác với
sản phẩm, mà còn là sự tổng hòa của nhiều yếu tố quan trọng. Dưới đây là những
thành phần cốt lõi quyết định chất lượng UX:
Khả năng sử dụng (Usability)
Một sản phẩm có UX tốt phải dễ dàng sử dụng, giúp người dùng hoàn thành
mục tiêu của họ một cách nhanh chóng và hiệu quả. Trải nghiệm mượt mà, điều
hướng rõ ràng và giao diện trực quan là những yếu tố then chốt của usability.
Tính hữu ích (Useful)
Nội dung và chức năng của sản phẩm phải thực sự có giá trị đối với người
dùng. Một sản phẩm hữu ích là sản phẩm đáp ứng đúng nhu cầu, giải quyết được
vấn đề hoặc mang lại lợi ích rõ ràng. Điều này đòi hỏi nội dung phải có tính
nguyên bản, không sao chép và cung cấp thông tin hoặc chức năng thiết thực mà
người dùng mong đợi. Tính khả dụng (Usable)
Trang web hoặc ứng dụng cần được thiết kế sao cho dễ sử dụng, giúp người
dùng thực hiện các tác vụ một cách nhanh chóng và hiệu quả. Giao diện phải trực
quan, thân thiện, tránh sự phức tạp không cần thiết. Trải nghiệm mượt mà sẽ giúp
giữ chân người dùng và tăng mức độ hài lòng khi sử dụng sản phẩm.
Tính hấp dẫn (Desirable)
Yếu tố thị giác và nhận diện thương hiệu đóng vai trò quan trọng trong UX.
Thiết kế giao diện, hình ảnh, màu sắc, kiểu chữ và các yếu tố thương hiệu cần
được xây dựng một cách nhất quán để khơi gợi cảm xúc và tạo ra sự kết nối với
người dùng. Một sản phẩm không chỉ cần hiệu quả mà còn phải thu hút và để lại ấn tượng tích cực.
Tính dễ tìm kiếm (Findable)
Thông tin và chức năng trên trang web hoặc ứng dụng phải dễ dàng tìm thấy.
Người dùng không nên mất quá nhiều thời gian hoặc công sức để tìm kiếm nội
dung hoặc điều hướng đến tính năng mà họ cần. Điều này đòi hỏi thiết kế thông
tin hợp lý, công cụ tìm kiếm hiệu quả và cấu trúc điều hướng rõ ràng.
Tính dễ tiếp cận (Accessible) lOMoARcPSD| 60380256
Một sản phẩm tốt cần đảm bảo khả năng tiếp cận cho tất cả mọi người, bao
gồm cả người khuyết tật. Điều này có nghĩa là giao diện và nội dung phải được
thiết kế sao cho có thể sử dụng được bởi những người có hạn chế về thị giác, thính
giác hoặc vận động, thông qua các tiêu chuẩn về khả năng truy cập kỹ thuật số
như WCAG (Web Content Accessibility Guidelines).
Tính đáng tin cậy (Credible)
Người dùng cần cảm thấy tin tưởng vào nội dung, sản phẩm hoặc dịch vụ mà
bạn cung cấp. Điều này có thể đạt được thông qua việc cung cấp thông tin minh
bạch, xây dựng danh tiếng thương hiệu, đảm bảo tính chính xác của nội dung và
cung cấp bằng chứng xác thực như đánh giá từ người dùng, chứng nhận hoặc
thông tin rõ ràng về doanh nghiệp. Giá trị (Valuable)
Một sản phẩm có giá trị là sản phẩm đáp ứng được nhu cầu và mong đợi của
người dùng, khiến họ sẵn sàng bỏ chi phí để sở hữu. Giá trị không chỉ nằm ở chức
năng hay thiết kế mà còn ở mức độ giải quyết vấn đề của người dùng một cách
hiệu quả. Nếu một sản phẩm mang lại trải nghiệm tốt, giúp người dùng đạt được
mục tiêu một cách dễ dàng, nó sẽ có giá trị cao hơn trong mắt họ. Doanh nghiệp
cần đảm bảo rằng sản phẩm không chỉ phục vụ lợi ích kinh doanh mà còn thực sự
hữu ích và có ý nghĩa đối với khách hàng. lOMoAR cPSD| 60380256
Hình 1. Các yếu tố cấu thành trải nghiệm người dùng (UX)
1.3. Mối quan hệ giữa giao diện người dùng và trải nghiệm người dùng
UI và UX là hai khái niệm riêng biệt nhưng không thể tách rời trong thiết kế
sản phẩm kỹ thuật số. UI tập trung vào việc tạo ra các yếu tố trực quan và tương
tác để người dùng có thể sử dụng sản phẩm, trong khi UX tập trung vào việc tạo
ra trải nghiệm tổng thể tích cực và hiệu quả cho người dùng khi họ tương tác với sản phẩm đó.
Sự khác biệt chính giữa UI và UX:
Mục tiêu: UI tạo ra giao diện rõ ràng, dễ sử dụng; UX đảm bảo sản phẩm
hữu ích và đáp ứng nhu cầu người dùng.
Trọng tâm: UI tập trung vào các yếu tố tương tác; UX tập trung vào trải
nghiệm tổng thể, bao gồm cả cảm xúc.
Thứ tự thực hiện: UX thường được thực hiện trước để xác định cấu trúc
và luồng người dùng, sau đó UI sẽ thiết kế giao diện dựa trên UX.
Nếu chỉ có UI mà không có UX, sản phẩm có thể đẹp mắt nhưng khó sử dụng
hoặc không đáp ứng nhu cầu người dùng. Ngược lại, nếu chỉ có UX mà không có
UI, sản phẩm có thể hữu ích nhưng không thu hút người dùng vì giao diện không hấp dẫn.
UI có ảnh hưởng lớn đến UX. Một UI được thiết kế tốt sẽ giúp người dùng
dễ dàng thực hiện các thao tác, giảm thiểu sự khó chịu và nâng cao trải nghiệm
tổng thể. Ngược lại, một UI tệ có thể làm giảm đáng kể trải nghiệm người dùng,
ngay cả khi sản phẩm có nhiều tính năng hữu ích.
1.4. Nguyên tắc thiết kế UI/UX
1.4.1. Đáp ứng nhu cầu của người dùng
Thiết kế UI/UX cần đặt người dùng làm trung tâm. Điều này đòi hỏi việc
nghiên cứu kỹ lưỡng về người dùng mục tiêu, bao gồm sở thích, mong đợi và nhu
cầu của họ. Thiết kế cần đảm bảo rằng sản phẩm sẽ được người dùng yêu thích và
đáp ứng được mong đợi của họ về cả nội dung và giao diện.
1.4.2. Thiết kế rõ ràng, đơn giản, và thống nhất lOMoARcPSD| 60380256
Thiết kế cần có bố cục thống nhất, cấu trúc logic và hệ thống rõ ràng. Điều
này giúp người dùng dễ dàng sử dụng, kiểm soát thông tin và tránh bị rối bởi quá
nhiều nội dung hoặc yếu tố không cần thiết. Các yếu tố như nút bấm, biểu tượng
và thông tin cần được trình bày một cách nhất quán trên toàn bộ sản phẩm.
1.4.3. Hiển thị sự phản hồi từ hệ thống đến người dùng
Thiết kế UI/UX cần cung cấp cho người dùng thông tin về những gì đang
diễn ra và có các thanh trạng thái để phản hồi cho các hoạt động của người dùng.
Điều này giúp người dùng theo dõi được tiến trình hoạt động của mình, biết được
những thao tác đã thực hiện thành công và có cảm giác kiểm soát hệ thống.
1.4.4. Tạo ra các bản thử nghiệm trước
Việc tạo ra các bản thiết kế UI/UX thử nghiệm là rất quan trọng để thu thập
phản hồi từ người dùng thực tế. Các bản thử nghiệm này giúp nhà thiết kế xác
định những điểm chưa hoàn chỉnh của sản phẩm, hạn chế rủi ro và xây dựng phiên
bản chính thức có chất lượng tốt nhất.
1.4.5. Áp dụng định luật Fitts
Định luật Fitts nhấn mạnh tầm quan trọng của việc làm nổi bật và sáng tạo
các thiết kế có tính năng quan trọng. Các chức năng được thiết kế nổi bật hơn
thường thu hút sự chú ý của người dùng và giúp họ thao tác dễ dàng hơn. Để áp
dụng định luật Fitts hiệu quả, cần giảm khoảng cách và tăng kích thước mục tiêu,
đồng thời rút ngắn các bước trong thao tác của người dùng.
1.4.6. Nguyên tắc trình bày văn bản
Việc trình bày văn bản cần tuân thủ các nguyên tắc để đảm bảo thông tin
được hiển thị mạch lạc và rõ ràng. Các nguyên tắc này bao gồm căn lề, sử dụng
chữ hoa đúng cách, đặt khoảng trắng chính xác và sử dụng dấu chấm, dấu phẩy đúng vị trí.
1.4.7. Quyền kiểm soát và quyền tự do của người dùng
Thiết kế cần cung cấp cho người dùng quyền kiểm soát và tự do trong quá
trình thao tác. Người dùng cần có thể làm lại, hoàn tác hoặc hủy một hành động
đã thực hiện nếu họ muốn. lOMoARcPSD| 60380256
CHƯƠNG 2. PHÂN TÍCH YÊU CẦU GIAO DIỆN
2.1. Người dùng mục tiêu
Người dùng của website bán sách có thể được phân loại như sau:
Người yêu sách truyền thống:
Đối tượng: Bao gồm học sinh, sinh viên, giáo viên, người đi làm và những
người có thói quen đọc sách in.
Nhu cầu: Cần một nền tảng dễ sử dụng để tìm kiếm sách theo tên, tác giả,
thể loại hoặc nhà xuất bản. Họ mong muốn có giao diện thân thiện, rõ ràng
và dễ dàng tiếp cận các thông tin chi tiết về sách.
Người dùng công nghệ:
Đối tượng: Những người quen thuộc với công nghệ, thường xuyên mua
sắm trực tuyến qua máy tính hoặc thiết bị di động.
Nhu cầu: Mong muốn trải nghiệm mua sách nhanh chóng, giao diện hiện
đại, có tính năng lọc – tìm kiếm thông minh, giỏ hàng tiện lợi và quy trình thanh toán tối ưu.
Người dùng có nhu cầu đặc biệt:
Đối tượng: Những người tìm kiếm sách chuyên ngành, sách hiếm, sách
ngoại văn hoặc muốn tặng quà là sách.
Nhu cầu: Cần được cung cấp thông tin đầy đủ, đánh giá chất lượng, gợi ý
liên quan và có khả năng đặt hàng, giao hàng nhanh.
2.2. Chức năng chính
Website cần cung cấp các chức năng chính sau: Tìm kiếm sách:
Tìm kiếm theo tiêu chí: Cho phép người dùng tìm kiếm sách theo tên sách,
tên tác giả, thể loại (tiểu thuyết, kỹ năng sống, học thuật, v.v.), nhà xuất bản và mức giá.
Bộ lọc tìm kiếm: Cung cấp bộ lọc thông minh để người dùng dễ dàng thu
hẹp kết quả tìm kiếm theo nhu cầu cá nhân, giúp tiết kiệm thời gian.
Mua sách trực tuyến: lOMoAR cPSD| 60380256
Quy trình mua hàng: Đơn giản và trực quan, cho phép người dùng chọn
sản phẩm, thêm vào giỏ hàng, kiểm tra thông tin đơn hàng và tiến hành thanh toán trực tuyến.
Phương thức thanh toán: Hỗ trợ đa dạng các phương thức thanh toán như
thẻ ATM, thẻ tín dụng, ví điện tử (Momo, ZaloPay), chuyển khoản ngân
hàng để tăng tính linh hoạt.
Quản lý tài khoản người dùng:
Thông tin cá nhân: Cho phép người dùng đăng ký, đăng nhập và quản lý
tài khoản cá nhân, bao gồm thông tin liên hệ, địa chỉ giao hàng và kết nối
với các tài khoản mạng xã hội.
Danh sách yêu thích: Hỗ trợ người dùng lưu lại các cuốn sách yêu thích
để dễ dàng mua trong tương lai.
2.3. Yêu cầu giao diện
Giao diện của website cần đáp ứng các yêu cầu sau:
Trực quan và thân thiện:
Thiết kế hấp dẫn: Sử dụng màu sắc hài hòa, hình ảnh sách đẹp và bố cục
rõ ràng để tạo ấn tượng tốt và dễ tiếp cận cho người dùng.
Biểu tượng rõ ràng: Sử dụng các biểu tượng dễ nhận biết cho các chức
năng như "Giỏ hàng", "Tìm kiếm", "Tài khoản".
Bố cục hợp lý: Sắp xếp nội dung theo thứ tự ưu tiên để người dùng dễ tìm
thông tin và thao tác nhanh chóng.
Hỗ trợ tìm kiếm và mua sách:
Tìm kiếm thông minh: Tích hợp gợi ý tự động khi người dùng nhập tên
sách hoặc tác giả, đồng thời hiển thị kết quả phù hợp nhanh chóng.
Quy trình đặt hàng rõ ràng: Hướng dẫn từng bước từ chọn sách, kiểm tra
đơn hàng đến thanh toán, bao gồm xác nhận đơn và hỗ trợ liên hệ khi cần.
Tương thích thiết bị di động:
Thiết kế responsive: Đảm bảo hiển thị tốt trên các thiết bị di động và máy
tính bảng, cho phép người dùng mua sách mọi lúc, mọi nơi. lOMoARcPSD| 60380256
Tối ưu tốc độ tải trang: Giúp website hoạt động nhanh, ổn định và không
gây gián đoạn trải nghiệm.
Tính năng tùy chỉnh cá nhân:
Chế độ sáng/tối: Cho phép người dùng lựa chọn giao diện phù hợp với môi
trường sử dụng, tăng khả năng cá nhân hóa.
Cài đặt thông báo: Hỗ trợ người dùng tùy chỉnh thông báo về đơn hàng hoặc sách yêu thích. lOMoARcPSD| 60380256
CHƯƠNG 3. THIẾT KẾ GIAO DIỆN
3.1. Cấu trúc tổng thể giao diện
3.1.1. Header (Đầu trang)
Tên cửa hàng sách: Nằm ở góc trái, sử dụng tên cửa hàng rõ ràng để người
dùng dễ dàng nhận diện thương hiệu. Trang chủ:
Vị trí: Nằm ở góc trái header.
Chức năng: Cho phép người dùng truy cập đến trang chủ tổng quát của website. Sản phẩm:
Vị trí: Nằm ở góc trái header.
Chức năng: Cho phép người dùng xem toàn bộ sách đang bán trên website
của cửa hàng, từ đó có thể nhấp vào từng cuốn để xem chi tiết về ảnh bìa,
mô tả, đánh giá,… Về chúng tôi:
Vị trí: Nằm ở giữa header.
Chức năng: Cho phép người dùng tìm hiểu về thông tin cửa hàng, sứ mệnh và tầm nhìn. Nút liên hệ:
Vị trí: Nằm ở góc phải header.
Chức năng: Cho phép người dùng gửi phản hồi, thắc mắc hoặc yêu cầu hỗ trợ. Đăng xuất:
Vị trí: Nằm ở góc phải header.
Chức năng: Cho phép người dùng thoát khỏi tài khoản người dùng một
cách an toàn và chuyển về trạng thái chưa đăng nhập. 3.1.2. Main Content
(Nội dung chính) Thông tin tài khoản:
Vị trí: Nằm ở góc trái Main Content.
Chức năng: Hiển thị tên người dùng, ảnh đại diện và địa chỉ gmail của người dùng. Nút chủ đề: