Bối cảnh và vấn đề nghiên cứu

Đề tài "Trang web bán bánh ngọt" (thương hiệu định hướng: Fairy Bakery) được thực hiện dưới dạng báo cáo môn học Thiết kế Web tại Khoa Đa phương tiện, Học viện Công nghệ Bưu chính Viễn thông (năm 2023). Dự án do nhóm sinh viên gồm Trần Thị Diễm, Nguyễn Linh Chi, Bùi Thị Kim Ngân và Trần Khôi Nguyên thực hiện dưới sự hướng dẫn của giảng viên Nguyễn Thị Thanh Tâm.

Trong bối cảnh thương mại điện tử phát triển mạnh mẽ, nhu cầu tiêu thụ và trải nghiệm các sản phẩm bánh ngọt trực tuyến ngày càng gia tăng. Tuy nhiên, qua khảo sát thực tế, việc đặt hàng và tương tác trên các nền tảng bán bánh hiện tại vẫn bộc lộ nhiều điểm hạn chế về trải nghiệm người dùng (UI/UX), thông tin sản phẩm thiếu minh bạch, quy trình vận chuyển dễ phát sinh lỗi và chưa tối ưu hóa cho các thiết bị di động.

Đề tài tập trung giải quyết các mục tiêu và nhiệm vụ nghiên cứu cụ thể:

  1. Xác định, phân loại và thấu hiểu hành vi, thói quen và nhu cầu của đối tượng người dùng trực tiếp, gián tiếp và đối thủ cạnh tranh trên thị trường kinh doanh bánh ngọt.
  2. Thu thập và phân tích dữ liệu thực tế thông qua các phương pháp nghiên cứu người dùng đa dạng (phỏng vấn sâu, khảo sát bảng hỏi trực tuyến, thảo luận nhóm tập trung, quan sát tiếp cận tự nhiên và nghiên cứu tài liệu).
  3. Đề xuất yêu cầu hệ thống mới, mô hình hóa các trường hợp sử dụng (Use Case Diagram) kèm theo đặc tả luồng sự kiện chính và luồng ngoại lệ cho các chức năng cốt lõi.
  4. Thiết kế giao diện hệ thống (UI/UX) đa nền tảng (Desktop, Tablet, Mobile) tuân thủ hệ thống lưới (grid system), quy chuẩn Typography, bảng màu và nguyên tắc tương tác người - máy.

Phạm vi nghiên cứu của đề tài tập trung vào thị trường người tiêu dùng bánh ngọt tại Việt Nam, trọng tâm là phân khúc khách hàng cá nhân từ 15 đến 40 tuổi và các đơn vị cung ứng liên quan trong chuỗi giá trị (nguyên liệu bột, đường, bao bì, trang thiết bị làm bánh).

Cơ sở lý thuyết và phương pháp thu thập dữ liệu

Nghiên cứu áp dụng quy trình thiết kế lấy người dùng làm trung tâm (User-Centered Design) kết hợp các nguyên lý công thái học giao diện và kiến trúc thông tin web:

  • Nguyên tắc tâm lý học tương tác 7±2 (Miller's Law): Ứng dụng trong việc phân nhóm danh mục sản phẩm trên thanh điều hướng ngang nhằm giảm tải nhận thức.
  • Quy tắc thao tác tối đa 3 bước: Tối ưu hóa kiến trúc thông tin để người dùng tiếp cận sản phẩm và hoàn tất đặt hàng nhanh chóng.
  • Quy chuẩn Responsive Web Design: Xây dựng bố cục dựa trên hệ thống lưới (Column grid, Baseline grid) thích ứng với các độ phân giải hiển thị chuẩn.

Nhóm tác giả đã kết hợp đồng thời 5 phương pháp nghiên cứu thực nghiệm để thu thập dữ liệu sơ cấp và thứ cấp:

  1. Phương pháp phỏng vấn sâu cá nhân:

    • Quy trình: Thực hiện qua 3 giai đoạn (chuẩn bị, tiến hành phỏng vấn theo cấu trúc từ dễ đến khó, và kết thúc). Áp dụng 2 hình thức: hẹn trước (qua điện thoại, email) và phỏng vấn trực tiếp ngẫu nhiên đối với 3 nhóm đại diện: người nội trợ, sinh viên và người đi làm.
    • Kết quả định tính: 100% người được phỏng vấn xác nhận từng mua bánh trên các gian hàng trực tuyến. Về tần suất truy cập: 14 người truy cập trên 2 lần/tháng, 8 người truy cập 2 lần/tháng, 10 người truy cập 1 lần/tháng và 5 người chỉ truy cập khi có thời gian rảnh. Về mục đích: 20 người truy cập để mua hàng, 12 người xem cách làm bánh, 9 người ngắm bánh để giải trí và 5 người vì mục đích khác.

  2. Phương pháp điều tra bằng bảng hỏi (Survey):

    • Công cụ: Phân phối biểu mẫu qua Email, Google Forms và các mạng xã hội (Facebook, Instagram); thực hiện khảo sát thử nghiệm (pilot) trên nhóm 5–6 người để hiệu chỉnh bảng câu hỏi trước khi khảo sát diện rộng.
    • Dữ liệu ghi nhận: Tỷ lệ đáp viên nữ chiếm 74,3%; độ tuổi phổ biến từ 15–40 tuổi; 37,1% thích ăn bánh ngọt và 20% giữ thái độ trung lập; 65,7% từng tiếp xúc với website bán bánh tương tự nhưng 71,4% không truy cập thường xuyên; 97,1% sử dụng điện thoại di động để truy cập; 85,7% quan tâm đến nguồn gốc nguyên liệu; 65,7% quan tâm đến công thức làm bánh; 74,3% mong muốn địa chỉ hiển thị qua vị trí bản đồ (Google Maps); 60% phản ánh gặp sự cố về tốc độ vận chuyển và 48% gặp sự cố bánh không còn nguyên vẹn khi giao nhận.

  3. Phương pháp thảo luận nhóm tập trung (Focus Group):

    • Cơ cấu: Nhóm 6 người (3 nam, 3 nữ) trong độ tuổi từ 18–32 tuổi.
    • Nội dung: Thảo luận về thời điểm mua, địa điểm ưa thích (5/6 người thích đặt hàng trực tuyến), tiêu chí lựa chọn (4/6 người ưu tiên chất lượng nguyên liệu, 2/6 người chú trọng thương hiệu và hình thức làm quà tặng), kỳ vọng giao diện (3/6 người thích giao diện đẹp mắt kích thích thị giác, 3/6 người ưu tiên giao diện đơn giản, dễ thao tác) và nhu cầu học làm bánh (2/6 người nữ quan tâm đến công thức).

  4. Phương pháp quan sát tiếp cận tự nhiên:

    • Thực hiện quan sát hành vi, phản hồi và đánh giá của khách hàng trên các hội nhóm, diễn đàn mạng xã hội.
    • Thống kê tỷ lệ quan tâm: 39% chất lượng, 22% giá cả, 21% thẩm mỹ, 18% nhãn hiệu. Về mục đích truy cập: 40% mua hàng, 30% xem bánh, 20% xem cách làm, 10% không rõ mục đích. Phân bố độ tuổi quan sát: 40% từ 22–35 tuổi, 28% từ 15–22 tuổi, 18% từ 35–45 tuổi, 14% trên 45 tuổi.

  5. Phương pháp nghiên cứu tài liệu và phân tích đối thủ:

    • Khảo sát các thương hiệu lớn trên thị trường như ABC Bakery (thế mạnh về bánh mì truyền thống và bánh ngọt kiểu Tây), Givral (phong cách ẩm thực Pháp, dòng bánh tươi không chất bảo quản) và các thương hiệu nội địa chuyên về bánh kem sinh nhật giao tận nơi.
    • Xác định danh mục nhà cung cấp nguyên liệu, máy móc thiết bị tiêu biểu: Bột mì Bình Đông, Đường Phú Yên, Bao bì Visingpack/Tân Tiến, Máy móc thiết bị Viễn Đông.

Nội dung chính theo từng phần của báo cáo

Xác định và phân loại đối tượng sử dụng

Nhóm tác giả phân tích chi tiết các nhóm đối tượng tương tác trực tiếp theo đặc điểm nhân khẩu học và hành vi tiêu dùng:

Tiêu chí phân tích Nhóm 15 – 22 tuổi Nhóm 23 – 40 tuổi Nhóm 41 – 50 tuổi
Giới tính Nữ (chiếm 60%) Nữ (chiếm 70%) Nữ (chiếm 90%)
Nghề nghiệp Học sinh, sinh viên Đã đi làm Đi làm, nội trợ gia đình
Khả năng tài chính Hạn chế về tài chính Tự chủ về tài chính Ổn định về tài chính
Mức độ bận rộn Tự do, không quá bận Bận rộn Dành nhiều thời gian cho gia đình
Mục đích mua bánh Sinh nhật, đi chơi với bạn bè Tiệc cưới, sự kiện công ty, sinh nhật Tặng người thân, làm bánh tại nhà
Nhu cầu ăn bánh Thích ăn bánh ngọt Thích (hạn chế để giữ dáng) Hạn chế hơn

Bên cạnh đó, nhóm phân loại khách hàng theo mức độ tương tác và chuyển đổi:

  • Nhóm quan trọng: Khách hàng đã đặt hàng và quay lại mua nhiều lần (khách hàng thân thiết), khách hàng thường xuyên truy cập để theo dõi sản phẩm.
  • Nhóm bình thường: Khách hàng đã thêm hàng vào giỏ nhưng còn phân vân về giá cả (chiếm tới 90% trường hợp do dự), khách hàng chỉ mua vào các dịp khuyến mãi ("Super Sale").
  • Nhóm yếu/nguy cơ: Khách hàng có ý định rời bỏ trang web, người dùng ngoài độ tuổi mục tiêu, đối thủ cạnh tranh thăm dò, hoặc nhóm khách hàng có trải nghiệm chưa hài lòng cần quy trình giải quyết khiếu nại hợp lý.

Tổng hợp kết quả phân tích dữ liệu và yêu cầu hệ thống

Từ dữ liệu khảo sát, đề tài xác định 3 vấn đề cốt lõi của hệ thống hiện hữu:

  1. Quy trình đặt hàng và thanh toán trực tuyến còn phức tạp đối với người dùng truyền thống.
  2. Thiếu sự tối ưu hóa hiển thị và trải nghiệm trên thiết bị di động (nơi chiếm 97,1% lưu lượng truy cập).
  3. Người dùng e ngại về chất lượng vệ sinh an toàn thực phẩm và rủi ro trong khâu vận chuyển hàng hóa.

Từ đó, hệ thống mới được định hình với các yêu cầu kỹ thuật và chức năng:

  • Thiết kế tương thích hoàn toàn (Responsive) trên đa thiết bị, giao diện tinh gọn, dễ sử dụng.
  • Công khai minh bạch nguồn gốc nguyên liệu của từng dòng bánh để tạo dựng niềm tin.
  • Tích hợp chuyên mục chia sẻ công thức và video hướng dẫn làm bánh cho tệp người dùng yêu thích nấu nướng.
  • Kết hợp hiển thị định vị cửa hàng qua bản đồ tương tác thay vì chỉ sử dụng địa chỉ dạng văn bản tĩnh.
  • Cung cấp chính sách giao nhận, bảo đảm chất lượng và hướng dẫn xử lý sự cố vận chuyển rõ ràng.

Khảo sát cấu trúc module chức năng

Hệ thống website được quy hoạch thành các phân hệ chức năng (module) phục vụ trải nghiệm người dùng và tiếp thị số:

  • Module Trang chủ: Điểm chạm đầu tiên, trưng bày hình ảnh sản phẩm nổi bật, nhận diện thương hiệu, thông tin pháp lý và liên hệ.
  • Module Giới thiệu: Trình bày câu chuyện thương hiệu, quy trình làm bánh, bí quyết công nghệ và tiềm lực sản xuất.
  • Module Danh mục sản phẩm: Phân loại theo loại bánh (bánh sinh nhật, bánh kem, bánh cưới, bánh nướng, bánh mì), tích hợp bộ lọc giá tăng/giảm, chức năng tìm kiếm và phóng to hình ảnh chi tiết.
  • Module Sản phẩm nổi bật & Khuyến mãi: Điều hướng hành vi mua sắm theo mùa vụ (Trung thu, Giáng sinh) và kích cầu sản phẩm tồn kho.
  • Module Tin tức – Kinh nghiệm làm bánh: Hỗ trợ tối ưu hóa công cụ tìm kiếm (SEO) và xây dựng cộng đồng làm bánh tại nhà.
  • Module Tích hợp mạng xã hội và kênh chat trực tuyến: Đặt tại vị trí góc dưới màn hình (hướng 4 giờ hoặc 8 giờ), hỗ trợ tư vấn và tiếp nhận phản hồi tức thì.

Thiết kế và triển khai hệ thống

Mô hình hóa chức năng và phân tích Use Case

Hệ thống xác định các tác nhân (Actors) chính bao gồm: Khách hàng, Quản trị viên (Admin), Bộ phận kinh doanh / nhập hàng, Nhân viên giao hàng (Shipper) và Hệ thống ngân hàng đối tác (Thanh toán trực tuyến).

Các trường hợp sử dụng trọng tâm được đặc tả chi tiết:

  • Đăng ký / Đăng nhập / Đăng xuất: Quản lý phiên truy cập của thành viên, kiểm tra trùng lặp email/số điện thoại khi đăng ký; báo lỗi xác thực khi sai tài khoản hoặc mật khẩu.
  • Tìm kiếm sản phẩm: Cho phép lọc theo tên bánh, mã sản phẩm, nhà cung cấp hoặc khoảng giá.
  • Xem thông tin sản phẩm & Chỉnh sửa thông tin cá nhân: Hiển thị chi tiết nguyên liệu, định lượng, giá thành; hỗ trợ cập nhật hồ sơ khách hàng.
  • Thêm vào giỏ hàng: Kiểm tra trạng thái lựa chọn mặt hàng, đưa sản phẩm vào danh sách chờ thanh toán.
  • Quy trình Thanh toán: Tiếp nhận thông tin nhận hàng, số tài khoản, phương thức giao dịch. Hệ thống quản lý 3 luồng ngoại lệ cụ thể:
    • Luồng ngoại lệ A1: Thông tin đơn hàng nhập sai -> Báo lỗi trường nhập liệu, yêu cầu nhập lại hoặc hủy giao dịch.
    • Luồng ngoại lệ A2: Tài khoản hoặc phương thức thanh toán không hợp lệ -> Yêu cầu kiểm tra lại nguồn thanh toán.
    • Luồng ngoại lệ A3: Khách hàng chủ động hủy thanh toán -> Xóa đơn tạm thời và chuyển hướng về danh mục sản phẩm.
  • Kiểm tra đơn hàng (Bộ phận kinh doanh): Tiếp nhận thông tin mua hàng, đối soát và xác nhận đơn.
  • Nhận và giao hàng (Shipper): Nhận bàn giao gói hàng, cập nhật trạng thái đơn hàng trên hệ thống, lấy chữ ký xác nhận của khách hàng; xử lý ngoại lệ chuyển trạng thái đơn và giao lại nếu khách vắng mặt.

Quy chuẩn kích thước hiển thị và hệ thống lưới (Grid System)

Thiết kế giao diện được xây dựng chi tiết theo các thông số khung nhìn (viewport) tiêu chuẩn cho 3 phân khúc thiết bị:

Trang giao diện Desktop (Chiều rộng W = 1440px) Tablet - iPad Pro 11" (W = 768px) Mobile - iPhone 14 Pro Max (W = 428px)
Trang chủ H = 4865px H = 7348px H = 6863px
Câu chuyện thương hiệu H = 4138px H = 4830px H = 4353px
Danh mục sản phẩm H = 2780px H = 4616px H = 5114px
Sản phẩm chi tiết H = 6028px H = 6945px H = 6945px
Blog tin tức H = 2721px H = 3829px H = 3752px
Blog chi tiết H = 4247px — —
Công thức làm bánh H = 3452px H = 5150px H = 7529px
Liên hệ H = 3484px H = 4696px H = 4887px
Đăng ký tài khoản H = 2405px H = 2603px H = 937px
Đăng nhập H = 2201px H = 2717px H = 937px
Giỏ hàng H = 3065px — —

Bố cục trang áp dụng hệ thống lưới kết hợp giữa Column Grid và Baseline Grid, quy định chặt chẽ các thông số về lề (margin) và khoảng cách giữa các cột (gutter) để bảo đảm tính nhất quán trên Desktop, Tablet và Mobile Phone.

Quy chuẩn định dạng thị giác (Visual Design System)

  • Hệ thống kiểu chữ (Typography):
    • Font Pacifico: Kiểu chữ viết tay mang đường nét tròn trịa, cổ điển, lấy cảm hứng từ văn hóa lướt sóng; được sử dụng cho tên thương hiệu và các tiêu đề chính nhằm tạo điểm nhấn mềm mại, phù hợp với ngành hàng bánh ngọt và thị hiếu khách hàng nữ. Kích thước quy định: Tiêu đề lớn đạt 36px, tiêu đề phụ đạt 24px.
    • Font Roboto: Kiểu chữ Sans-serif hiện đại, rõ ràng, hỗ trợ đầy đủ tiếng Việt với 6 biến thể độ đậm (Thin, Light, Regular, Medium, Bold, Black). Được sử dụng cho toàn bộ nội dung văn bản nhằm bảo đảm khả năng đọc tốt trên màn hình kỹ thuật số. Kích thước quy định: 14px cho phần nội dung; khoảng cách dòng (line-height) gấp 2 lần cỡ chữ, khoảng cách giữa các ký tự (letter-spacing) gấp 0,12 lần cỡ chữ.
  • Bảng màu chủ đạo (Color Palette):
    • Màu sắc cốt lõi là Nâu và Cam, lấy cảm hứng từ màu sắc thực tế của bánh nướng và nguyên liệu làm bánh tự nhiên, mang lại cảm giác ấm áp và kích thích vị giác.
    • Kết hợp các gam màu trung tính như Be, Đen xám và Nâu đất để cân bằng thị giác, tạo nét tinh tế, sang trọng và không gây mỏi mắt cho người dùng.

Kết quả và đóng góp của đề tài

  1. Xây dựng bức tranh dữ liệu hành vi người tiêu dùng: Nghiên cứu đã lượng hóa được những nhu cầu cốt lõi của khách hàng trực tuyến trong ngành bánh ngọt tại thị trường Việt Nam (tỷ lệ 85,7% quan tâm nguồn gốc nguyên liệu, 97,1% dùng điện thoại di động, các trở ngại về vận chuyển).
  2. Đặc tả hoàn chỉnh hệ thống chức năng thương mại điện tử: Thiết lập sơ đồ và bảng đặc tả luồng tương tác Use Case cho các tác nhân liên quan, tính toán đầy đủ các kịch bản ngoại lệ trong quá trình đặt hàng và thanh toán trực tuyến.
  3. Bộ tài liệu thiết kế giao diện UI/UX chi tiết: Cung cấp thông số kích thước, lưới bố cục, hệ thống phông chữ và bảng màu đồng bộ cho 11 trang giao diện trên cả 3 nền tảng màn hình (Desktop 1440px, Tablet 768px, Mobile 428px).

Hạn chế và hướng phát triển

  • Hạn chế:
    • Quy mô khảo sát và phỏng vấn trực tiếp còn mang tính cục bộ trong khuôn khổ môn học.
    • Quá trình thực hiện lập trình mã nguồn (code) còn gặp những khó khăn nhất định khi chuyển đổi các tương tác phức tạp từ bản vẽ thiết kế (prototype) sang môi trường chạy thực tế.
  • Hướng phát triển:
    • Hoàn thiện lập trình toàn diện các module phía máy chủ (backend) và cơ sở dữ liệu.
    • Mở rộng phạm vi dịch vụ giao hàng toàn quốc và tích hợp đa dạng các cổng thanh toán điện tử.
    • Triển khai mô hình dịch vụ giá trị gia tăng: khu vực tương tác trực tuyến cho phép khách hàng đặt lịch trải nghiệm tự làm bánh tại cửa hàng với sự hướng dẫn chuyên nghiệp.

Giá trị tham khảo

Báo cáo là tài liệu tham khảo hữu ích cho:

  • Sinh viên chuyên ngành Công nghệ Đa phương tiện, Thiết kế Web, Kỹ thuật Phần mềm và Thương mại điện tử trong việc xây dựng đồ án môn học hoặc khóa luận về quy trình thiết kế UI/UX bài bản.
  • Các nhóm phát triển phần mềm cần mẫu đặc tả phân tích yêu cầu (Use Case Specification), quy trình khảo sát người dùng theo phương pháp định tính/định lượng, và tài liệu quy chuẩn thiết kế hệ thống giao diện thích ứng (Responsive Design System).

Câu hỏi thường gặp

1. Khách hàng mục tiêu của website bán bánh được xác định gồm những nhóm nào?
Khách hàng mục tiêu trọng tâm là nữ giới trong độ tuổi từ 15 đến 40 tuổi (chiếm từ 60% đến 70% theo khảo sát nhân khẩu học), bao gồm học sinh, sinh viên và người đi làm có nhu cầu mua bánh cho các dịp sinh nhật, sự kiện, tiệc kỷ niệm hoặc tự làm bánh tại nhà.

2. Tỷ lệ người dùng truy cập bằng thiết bị di động trong khảo sát là bao nhiêu và thiết kế đáp ứng như thế nào?
Khảo sát ghi nhận 97,1% người dùng sử dụng điện thoại di động để truy cập. Do đó, nhóm nghiên cứu đã thiết kế giao diện tương thích hoàn toàn trên độ phân giải W = 428px (tương đương iPhone 14 Pro Max) với hệ thống lưới Column Grid và Baseline Grid chuẩn hóa.

3. Nhóm tác giả đã kết hợp các font chữ nào trong thiết kế và lý do lựa chọn là gì?
Website sử dụng kết hợp 2 font chữ: Pacifico (36px cho tiêu đề lớn, 24px cho tiêu đề phụ) với nét chữ viết tay mềm mại, cổ điển để làm nổi bật thương hiệu; và Roboto (14px cho nội dung) không chân, hỗ trợ tiếng Việt tốt để tối ưu hóa khả năng đọc.

4. Khi xảy ra sự cố trong quá trình thanh toán, hệ thống xử lý theo những luồng ngoại lệ nào?
Hệ thống xử lý qua 3 nhánh ngoại lệ: Luồng A1 (nhập sai thông tin đơn hàng -> hiển thị lại trường lỗi để chỉnh sửa), Luồng A2 (phương thức thanh toán/tài khoản không hợp lệ -> yêu cầu cập nhật lại), và Luồng A3 (người dùng chủ động hủy đơn -> xóa giao dịch tạm và chuyển hướng về danh mục sản phẩm).

5. Hai vấn đề lớn nhất mà người dùng thường gặp phải khi mua bánh ngọt trực tuyến là gì?
Kết quả khảo sát chỉ ra rằng 60% người dùng gặp vấn đề liên quan đến tốc độ vận chuyển và 48% phản ánh tình trạng bánh bị biến dạng, không còn nguyên vẹn khi nhận hàng.

Kết luận

Báo cáo môn học "Thiết kế web bán bánh ngọt" của nhóm sinh viên Học viện Công nghệ Bưu chính Viễn thông đã thực hiện thành công quy trình nghiên cứu người dùng đa phương pháp để giải quyết các bài toán thực tế trong kinh doanh bánh ngọt trực tuyến. Đề tài đã chuyển hóa các dữ liệu khảo sát thành hệ thống yêu cầu chức năng, đặc tả Use Case chi tiết và bộ quy chuẩn thiết kế giao diện UI/UX hoàn chỉnh trên đa nền tảng. Đây là tài liệu có tính thực tiễn cao, đóng vai trò nền tảng vững chắc cho quá trình triển khai lập trình và phát triển các sản phẩm thương mại điện tử chuyên ngành ẩm thực.