BÁO CÁO MÔN THIẾT KẾ WEB Đề tài Trang web bán bánh ngọt

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG
KHOA ĐA PHƯƠNG TIỆN

BÁO CÁO MÔN THIẾT KẾ WEB
Đề tài: Trang web bán bánh ngọt
Giảng viên hướng dẫn:
Nhóm:
Thành viên:

Nguyễn Thị Thanh Tâm
07
Trần Thị Diễm – B20DCPT038
Nguyễn Linh Chi – B20DCPT034
Bùi Thị Kim Ngân – B20DCPT138
Trần Khôi Nguyên – B20DCPT146

Hà Nội, 2023


MỤC LỤC

I.

Xác định đối tượng....................................................................................... 5

1.

Xác định đối tượng....................................................................................... 5

2.

Phân loại đối tượng sử dụng ....................................................................... 6

II.

Thu thập thông tin dữ liệu .......................................................................... 7

1.

Phương pháp phỏng vấn ............................................................................. 7

1.1

Quá trình phỏng vấn.................................................................................... 7

1.2

Kết quả tổng hợp sau cuộc phỏng vấn ..................................................... 11

2

Đặt câu hỏi .................................................................................................. 13

2.1

Chuẩn bị...................................................................................................... 13

2.2

Kết quả khảo sát ........................................................................................ 16

3

Tập trung nhóm và các khóa học thực hành........................................... 18

3.1

Tiến hành .................................................................................................... 18

3.2

Kết quả khảo sát ........................................................................................ 19

4

Tiếp cận tự nhiên ....................................................................................... 19

5

Nghiên cứu tài liệu ..................................................................................... 23

III. Kết quả của phân tích dữ liệu ................................................................... 26
1.

Vấn đề hệ thống hiện tại ............................................................................ 26

2.

Đưa ra yêu cầu của hệ thống mới ............................................................. 26

IV. Use case diagram........................................................................................ 27

1.

Sơ đồ Use case diagram ............................................................................. 27

2.

Yêu cầu chức năng và phi chức năng của hệ thống................................ 28

2.1

Đăng ký ....................................................................................................... 28

2.2

Đăng nhập ................................................................................................... 29

2.3

Đăng xuất .................................................................................................... 29

2.4

Tìm kiếm sản phẩm ................................................................................... 30

2.5

Xem thông tin sản phẩm ........................................................................... 30

2.6

Sửa thông tin cá nhân ................................................................................ 30

2.7

Thêm vào giỏ hàng ..................................................................................... 31
2|THIẾTKẾWEBCƠBẢN


2.8

Thanh toán.................................................................................................. 31

2.9

Kiểm tra đơn hàng ..................................................................................... 32

2.10. Nhận và giao hàng ..................................................................................... 33
V.

Thiết kế giao diện ....................................................................................... 33

1.

Xác định kích thước màn hình hiển thị + trình duyệt............................ 33

2.

Xác định nội dung ...................................................................................... 34

3.

Hệ thống lưới .............................................................................................. 35

3.1

Lưới desktop ............................................................................................... 35

3.2. Lưới tablet .................................................................................................. 40
3.3. Lưới mobile phone ..................................................................................... 43
4.

Wireframe................................................................................................... 47

6.

Màu sắc ....................................................................................................... 49

7.

Hình ảnh + video ........................................................................................ 50

8.

Bố cục trang ................................................................................................ 55

VI. Thiết kế prototype ...................................................................................... 60
1.

Kiến trúc thông tin của website ................................................................ 60

2.

Các loại điều hướng ................................................................................... 60

3.

Đánh giá khả năng hoạt động ................................................................... 65

3.1. Ưu điểm....................................................................................................... 65
3.2. Nhược điểm................................................................................................. 65
4.

Mô tả hoạt động của sản phẩm................................................................. 66

VII. Code ............................................................................................................. 66
1.

Tìm hiểu các ngơn ngữ lập trình sử dụng................................................ 66

1.1. HTML ......................................................................................................... 66
1.2. CSS .............................................................................................................. 68
2.

Thư viện hỗ trợ........................................................................................... 68

4.

Quy trình thực hiện ................................................................................... 70

5.

Source code ................................................................................................. 70

6.

Giao diện hiển thị ....................................................................................... 70

6.1. Giao diện trang chủ ................................................................................... 70
6.2. Giao diện giới thiệu .................................................................................... 72

3|THIẾTKẾWEBCƠBẢN


6.3. Giao diện sản phẩm ................................................................................... 74
6.4. Giao diện tin tức ......................................................................................... 74
6.5. Giao diện đăng ký ...................................................................................... 75
6.6. Giao diện đăng nhập .................................................................................. 76
7.

Những thuận lợi và khó khăn khi thực hiện code .................................... 76

VIII. Kết luận ....................................................................................................... 77
1.

Kết quả đạt được ......................................................................................... 77

2.

Hạn chế ......................................................................................................... 77

3.

Hướng phát triển của đề tài ....................................................................... 77

PHỤ LỤC ............................................................................................................. 78

4|THIẾTKẾWEBCƠBẢN


I. Xác định đối tượng
1. Xác định đối tượng
o Người tương tác trực tiếp với sản phẩm:
- Khách hàng: nhóm đối tượng hàng đầu truy cập trang web để đặt hàng.
- Những người u thích bánh: nhóm đối tượng truy cập vì u thích bánh hoặc
xem cơng thức làm bánh.
Độ tuổi
Giới tính
Mục đích

15 - 22
Nữ (chiếm 60%)
Sinh nhật, đi chơi
với bạn bè

Nghề nghiệp

Học sinh, sinh
viên
Hạn chế về tài
chính

Tự do, khơng quá
bận rộn

Khả năng tài
chính
Mức độ bận rộn
Nhu cầu ăn bánh

Thích ăn bánh
ngọt

23 - 40
Nữ (chiếm 70%)
Đám cưới, sự kiện
công ty, sinh nhật,
đi chơi với bạn bè
Đã đi làm
Tự chủ về tài
chính
Bận rộn
Thích (hạn chế ăn
do giữ dáng)

41 - 50
Nữ (chiếm 90%)
Tặng người thân,
làm bánh tại nhà,
sinh nhật
Đi làm, nội trợ gia
đình

Ổn định về tài
chính
Có khá nhiều thời
gian dành cho gia
đình
Hạn chế hơn

Bảng phân tích các nhóm khách hàng

o Người tương tác gián tiếp với sản phẩm:
- Những doanh nghiệp, công ty có lĩnh vực kinh doanh liên quan đến bánh
như những doanh nghiệp cung cấp các nguyên liệu làm bánh:
+ Nguyên liệu bột: Nhà cung ứng Công ty cổ phần Bình Đơng
+ Ngun liệu đường: Nhà máy Phú n.
+ Bao bì: Bao bì giấy: Visingpack; Bao bì nhựa: Tân Tiến
+ Máy móc, trang thiết bị làm bánh: Viễn Đơng
o Người dùng cạnh tranh:
- Các cửa hàng bán bánh khác: Nhóm người nãy sẽ quan tâm đến website
của bạn. Họ sẽ quan sát xem trang web của bạn đang nhắm đến đối tượng
nào, thiết kế giao diện ra sao rồi để phân tích, điều chỉnh website của họ.
Một số thương hiệu nổi tiếng có sự cạnh tranh mạnh mẽ:
+ ABC Bakery: thương hiệu này đi lên từ bánh mì và các loại bánh ngọt,
bánh bao rồi mở rộng ra các dòng bánh ngọt kiểu Tây. Không chỉ là một
thương hiệu bánh nổi tiếng, ABC Bakery cịn là một thương hiệu mang
hình ảnh đại diện cho ngành bánh mì ở Việt Nam.
5|THIẾTKẾWEBCƠBẢN


+ Givral: kế thừa trọn vẹn nét tinh tế, tao nhã của nền ẩm thực Pháp, luôn
ghi dấu ấn với các dịng bánh tươi, khơng sử dụng các chất bảo quản hay

phụ gia, đảm bảo an toàn sức khỏe cho người sử dụng. Chuyên sản xuất
các dòng bánh cao cấp từ bánh kem, bánh cưới, bánh trung thu, bánh mì
và các loại bánh nướng với đa dạng về loại bánh.
+ Banhngot.vn – Thương hiệu bánh ngọt Việt Nam: nổi tiếng hàng đầu về
bánh kem. Đặc biệt là dịch vụ giao bánh tận nhà tặng người thân.
 Như vậy khách hàng trọng tâm hướng đến là độ tuổi từ 15 đến 40, với
những tính cách, sở thích, trình độ, giới tính (chủ yếu là nữ giới) khác
nhau.
2. Phân loại đối tượng sử dụng
 Quan trọng: dùng thường xuyên và trực tiếp
o Khách hàng đã đặt hàng trên web và quay trở lại web:
- Đây là nhóm khách hàng thân thiết với doanh nghiệp và là một trong
những mục tiêu chính các doanh nghiệp hướng đến. Họ yêu thích sản
phẩm hoặc thương hiệu của bạn đến mức họ sẽ luôn mua hàng của bạn,
ngay cả khi có ưu đãi rẻ hơn ở nơi khác. Bên cạnh đó, họ cũng sẵn lịng
giới thiệu sản phẩm của doanh nghiệp tới những người xung quanh
o Khách hàng thường xuyên truy cập trang web
- Việc thường xuyên truy cập trang web cho thấy nhóm khách hàng này
đang quan tâm đến sản phẩn của web. Vì vậy việc họ đặt hàng chắc chắn
sẽ diễn ra
 Bình thường: dùng ít hơn hoặc biết đến sản phẩm thơng qua bạn bè
o Khách hàng đã thêm hàng vào giỏ
- Khách hàng này có thể gọi là tập khách hàng phân vân. Có đến 90% khách
hàng cảm thấy khó quyết định vì giá cả. Có lẽ… họ đang chờ một Super
Sale từ bạn?
o Nhóm khách hàng u thích những đợt giảm giá:
- Chỉ truy cập và mua hàng ở trang web vào những đợt giảm giá
 Yếu: người dùng bị ảnh hưởng bởi quảng cáo hoặc giá thành
o Khách hàng có ý định rời web, không sử dụng website:
- Xác định xem ai không xứng đáng dành thời gian và sự quan tâm. Ví dụ

như loại bỏ đối thủ cạnh tranh đang chơi xấu/ thăm dò, nếu sản phẩm của
bạn giới hạn độ tuổi, những người không nằm trong khoảng yêu cầu cần
loại bỏ...
o Nhóm khách hàng khơng hài lịng:
- Nhóm khách hàng này là những người khơng hài lịng về sản phẩm/dịch
vụ của doanh nghiệp. Họ quay trở lại để yêu cầu khắc phục vấn đề hoặc
phàn nàn. Điều này có thể tác động tiêu cực nếu doanh nghiệp khơng có
kinh nghiệm trong việc xử lý khiếu nại, nhưng ngược lại, đây là cơ hội để
doanh nghiệp tạo dựng niềm tin và uy tín trong lịng người tiêu dùng nếu
xử lý khéo léo trường hợp này.
 Nói chung, đối tượng sử dụng website là những người bị thu hút và
sửdụng website của bạn để tìm hiểu thơng tin hay thực hiện giao dịch.
6|THIẾTKẾWEBCƠBẢN


Đây cũng là mục tiêu mà website của bạn cần nỗ lực tiếp thị và hướng
tới để biến họ thành khách hàng của mình.
II. Thu thập thơng tin dữ liệu
1. Phương pháp phỏng vấn
1.1 . Quá trình phỏng vấn
1.1.1 . Giai đoạn chuẩn bị
Để có được một cuộc phỏng vấn diễn ra thành cơng việc tìm hiểu trước
nội dung đặt ra trong cuộc phỏng vấn và tìm hiểu người trả lời là rất quan
trọng. Hoạt động này giúp cho chúng ta dễ nhập cuộc, chủ động, tự tin khi
phỏng vấn, tạo sự tin cậy với người đối thoại, xử lý những tình huống bất
ngờ có thể xảy ra trong q trình phỏng vấn.
Việc tìm hiểu về đối tượng phỏng vấn được thực hiện thông qua:
- Xác định đối tượng đã – đang và / hoặc sẽ sử dung trang web làm bánh
(đã được xác định trong phần I)
- Nghiên cứu tư liệu trên sách báo, internet, tìm hiểu đối tượng thơng qua

bạn bè, hàng xóm…
1.1.1.1 Lựa chọn người trả lời phỏng vấn
Dựa vào nội dung và mục đích muốn tìm hiểu về nhu cầu, mục đích, mong
muốn của người dùng về trang web làm bánh, từ đó chúng tơi lưa chọn
những người tiêu biểu cho cuộc phỏng vấn của mình: người nội trợ, sinh
viên, người đi làm.
1.1.1.2 Sắp đặt cuộc phỏng vấn
Sử dụng 2 hình thức:
- Báo trước:
+ Gọi điện, gửi mail đề nghị phỏng vấn (trò chuyện, trao đổi)
+ Giới thiệu với tư cách là người phỏng vấn
+ Cho nguồn tin biết mục đích nhằm nghiên cứu, khảo sát về nhu cầu, mong
muốn của người dùng về trang web làm bánh
Thỏa thuận địa điểm, thời gian phỏng vấn (đến nhà, ra quán, đến trường…)
Không báo trước (áp dụng với những đối tượng bắt gặp):
Giới thiệu với tư cách là người phỏng vấn
Xin ý kiến của người dùng với lời mời phỏng vấn
Cho nguồn tin biết mục đích nhằm nghiên cứu, khảo sát về nhu cầu, mong
muốn của người dùng về trang web làm bánh
1.1.1.2.1 Chuẩn bị đề cương câu hỏi
Căn cứ vào những thơng tin đã tìm hiểu được, tôi dự kiến một số câu hỏi
sẽ đặt ra trong cuộc phỏng vấn:
- Bạn có thể chia sẻ một số thông tin cá nhân của bạn cho chúng tôi không?
- Bạn có thích mua hàng online?
- Bạn có thích làm bánh không?
+
+
+
+

7|THIẾTKẾWEBCƠBẢN


-

Đã bao lâu bạn khơng ăn bánh ngọt rồi?
Bạn thích ăn bánh ngọt theo phong cách nào?
Bạn có đang trong chế độ giảm cân khơng?
Bạn thích ăn bánh ngọt nhiều đường hay ít đường?
Bạn có hay mua bánh để tặng bạn bè, người thân không?
Nếu bánh ngọt là đồ ăn bạn thích và nó được làm từ ngun liệu tự nhiên
thì bạn có muốn thử nó khơng?
Bạn có mong muốn gì về sản phẩm?
Bạn đã từng mua bánh online chưa?
Bạn thường ghé thăm các trang web làm bánh bao nhiêu lần/tháng?
Bạn thường mua bánh ngọt vào những dịp nào?
Mục đích bạn ghé thăm các trang web về bánh để làm gì?
Tuy nhiên trong q trình phỏng vấn có thể linh hoạt thay đổi những câu
hỏi

1.1.1.2.2. Một số công việc chuẩn bị khác
- Chuẩn bị tâm lý, tâm thế khi tiến hành phỏng vấn
- Ăn mặc phù hợp
- Chuẩn bị phương tiện phỏng vấn
- Đúng hẹn (áp dụng cho cuộc phỏng vấn báo trước)
- Chuẩn bị phương tiện, vật dụng phỏng vấn: sổ tay, máy ghi âm
1.1.1.3. Giai đoạn tiến hành phỏng vấn
1.1.1.3.1. Giai đoạn nhập cuộc
- Giới thiệu bản thân
- Nhắc lại mục đích của cuộc phỏng vấn

- Bắt đầu bằng câu chuyện nhẹ nhàng
- Mở đầu cuộc phỏng vấn bằng những câu hỏi đơn giản => biết đến thông
tin, sở thích của người dùng:
Câu 1: Bạn có thể chia sẻ một số thông tin cá nhân của bạn cho chúng tôi
không?
Một số câu trả lời tiêu biểu mà tôi đã note
 Tôi là Nguyễn Thị Lan, năm nay 35 tuổi là một phụ nữ nội trợ
 Tôi là Bùi Thị Quỳnh là sinh viên ngành Công nghệ đa phương tiện
trường Học viện Cơng nghệ Bưu chính Viễn thơng
 Tơi là Trần Thị Bích Như năm nay 26 tuổi hiện đang là Kế tốn cho một
cơng ty về nội thất
Câu 2: Bạn có thích mua hàng online?
Một số câu trả lời tiêu biểu mà tơi đã note
 Tơi ít khi mua hàng online vì là một người nội trợ cho gia đình nên tơi
có nhiều thời gian đi mua sắm hơn
8|THIẾTKẾWEBCƠBẢN


 Tơi có vì là một sinh viên tơi thường thức dậy muộn nên khá
ngại cho việc đi mua sắm bên ngồi
 Tơi có vì tơi khá bận rộn cho cơng việc nên khơng có thời gian
Câu 3: Bạn có thích làm bánh khơng?
Một số câu trả lời tiêu biểu mà tơi đã note
 Tơi rất thích làm bánh, tơi thường lên các trang mạng để nghiên
cứu và học hỏi cơng thức làm bánh
 Tơi khơng thích làm bánh cho lắm vì nó khá cầu kì và tỉ mỉ
 Tơi thích làm bánh, tơi thường làm bánh vào những thời gian rảnh rỗi
1.1.1.3.2 . Giai đoạn triển khai hệ thống câu hỏi chủ chốt
- Áp dụng câu hỏi từ dễ đến khó
- Sử dụng một số câu hỏi xen kẽ linh hoạt

- Để khai thác được những điểm quan trọng, nổi bật, tôi áp dụng
một số câu hỏi:
Câu 1: Đã bao lâu bạn không ăn bánh ngọt rồi?
Một số câu trả lời tiêu biểu:




Tơi ăn cách đây 3 ngày, đó là ngày kỷ niệm ngày cưới của
vợ chồng chúng tôi.
Tôi ăn cách đây 1 tuần, đó là sinh nhật bạn tôi
Tôi ăn cách đây nửa tháng lúc đi chơi với bạn bè
Câu 2: Bạn thích ăn bánh ngọt theo phong cách nào?
Một số câu trả lời tiêu biểu:





Tơi thích ăn bánh theo kiểu truyền thống
Tơi thích ăn bánh theo kiểu hiện đại
Tơi thích ăn những chiếc bánh theo phong cách của Pháp
Câu 3: Bạn có đang trong chế độ giảm cân khơng?
Một số câu trả lời tiêu biểu:




Tơi khơng
Tơi có

Câu 4: Bạn thích ăn bánh ngọt nhiều đường hay ít đường?

Một số câu trả lời tiêu biểu:
 Tơi thích ăn ít đường
 Tôi thích ăn ít đường
9|THIẾTKẾWEBCƠBẢN




Tơi thích ăn ít đường
Câu 5: Bạn có hay mua bánh để tặng bạn bè, người thân không?
Một số câu trả lời tiêu biểu:





Có
Có
Có
Câu 6: Nếu bánh ngọt là đồ ăn bạn thích và nó được làm từ ngun liệu
tự nhiên thì bạn có muốn thử nó khơng?

Một số câu trả lời tiêu biểu:
 Tơi sẵn lịng
 Wow, tơi rất muốn thử nó
 Tất nhiên là có
Để biết đến nhu cầu, mong muốn người dùng khi truy cập vào một
trang web bán bánh ta phỏng vấn một số câu hỏi:

Câu 7: Bạn có mong muốn gì về sản phẩm?
Một số câu trả lời tiêu biểu:







Sản phẩm tốt cho sức khỏe
Khẩu vị phù hợp, dễ ăn, không ngán
Mẫu mã đẹp, bắt mắt, đặc trưng
Giá cả thấp hơn
Thời gian truy cập nhanh
Thao tác dễ dàng, giao diện bắt mắt
Để biết về tần suất, thói quen người dùng khi truy cập vào trang
web bán bánh cần phỏng vấn một số câu hỏi:
Câu 8: Bạn đã từng mua bánh online chưa?
Một số câu trả lời tiêu biểu: 100% người được phỏng vấn trả lời đã từng
mua bánh trên các gian hàng online.
Câu 9: Bạn thường ghé thăm các trang web làm bánh bao nhiêu
lần/tháng?

10 | T H I Ế T K Ế W E B C Ơ B Ả N


Một số câu trả lời tiêu biểu:






Trên 2 lần/tháng
2 lần/tháng
1 lần/tháng
Thời gian rảnh rỗi
Để biết được mục đích của người dùng khi ghé thăm các trang web
bán bánh chúng tôi sẽ sử dụng câu hỏi như:
Câu 10: Bạn thường mua bánh ngọt vào những dịp nào?

Một số câu trả lời tiêu biểu:
 Ngày kỉ niệm ngày cưới, ngày sinh nhật người thân
 Ngày sinh nhật
 Đi chơi cùng bạn bè, tặng người thân
Câu 11: Mục đích bạn ghé thăm các trang web về bánh để làm gì?
Một số câu trả lời tiêu biểu:
 Mua bánh
 Xem cách làm bánh
 Ngắm bánh, thư giãn
1.1.1.2.1 Giai đoạn kết thúc cuộc phỏng vấn
- Kiểm tra xem cịn có bỏ sót thơng tin, chi tiết nào muốn biết
- Kiểm tra những điều đã ghi chép đã hiểu rõ hay chưa
- Hỏi người trả lời xem họ có mong muốn gì nữa khơng
- Cảm ơn và bày tỏ mong muốn được gặp lại người được phỏng vấn
1.2 Kết quả tổng hợp sau cuộc phỏng vấn
1.2.1 Về mong muốn của người dùng về trang web
Khi truy cập vào một trang web người dùng muốn truy cập nhanh, giao diện
bắt mắt, thao tác dễ dàng, có nguyên liệu bánh và cách làm

11 | T H I Ế T K Ế W E B C Ơ B Ả N

Về tần suất, thói quen người dùng khi truy cập vào trang web bán bánh:
Có tới 14 người ghé thăm trên 2 lần/ tháng, 8 người ghé thăm 2 lần/ tháng,
10 người ghé thăm 1 lần/ tháng và 5 người ghé thăm vào những thời gian rảnh
rỗi

Mục đích của người dùng khi ghé thăm các trang web bán bánh:
Có tới 20 người ghé thăm với mục đích mua bánh, 9 người ghé thăm với
mục đích xem bánh, giải trí, 12 người ghé thăm với mục đích xem cách làm
(phụ nữ, người học làm bánh), 5 người ghé thăm với mục đích khác:

12 | T H I Ế T K Ế W E B C Ơ B Ả N


Từ khảo sát trên chúng tôi nhận thấy nhu cầu của thị trường là rất cao, có
thể tìm kiếm được lợi nhuận trong ngành này; Nắm bắt rõ được nhu cầu của
thị trường và khách hàng tiềm năng, nhóm bắt đầu xây dựng kế hoạch xây
dựng cửa hàng bánh với dịch vụ cộng thêm là có thêm khu vực cho khách tự
học làm bánh với sự hương dẫn chi tiết.
2 Đặt câu hỏi
2.1 Chuẩn bị
- Nội dung câu hỏi khảo sát: Để có được những nội dung này cần xác định
mục đích thu thập thơng tin đó là nhằm thu được những mong muốn của người
dùng về website (Tức là những yêu cầu mà website cần phải có). Những yêu
cầu đó bao gồm:
+ Người dùng có những thói quen hay sở thích như thế nào? -> Yêu cầu về chức
năng, điều mà website cần phải làm để thỏa mãn người dùng.
=> Để có dữ liệu này ta cần đặt ra những câu hỏi như:

13 | T H I Ế T K Ế W E B C Ơ B Ả N


• Anh/ chị có thích các loại bánh ngọt khơng? => Phân loại đối tượng người
dùng. Nếu người tham gia trả lời câu hỏi khơng thích thì có thể ngưng cuộc
khảo sát.
• Anh/ chị thường mua bánh vào những dịp gì? => Cung cấp các thơng tin về
khuyến mại hay các chương trình đặc biệt vào các dịp lễ.
+ Người dùng có khả năng sử dụng website một cách dễ dàng hay khơng kể cả
khi đó là lần đầu họ sử dụng website? => Yêu cầu liên quan đến kỹ năng, khả
năng của người dùng.
=> Để có dữ liệu này ta cần đặt ra những câu hỏi:
• Anh/ chị thường mua bánh ở đâu? => Thống kê số lượng người dùng thường
xuyên sử dụng website để đặt hàng nhằm tiến hành thiết kế website cho phù
hợp với kinh nghiệm của đại đa số người sử dụng.
• Anh/ chị có thường xuyên mua sắm trên các trang TMĐT không (Shopee
Food, Baemin, Go Food…)?
=> Khảo sát kinh nghiệm của người dùng về việc sử dụng một website để mua
hàng online.
• Anh/ chị có từng truy cập vào website của một cửa hàng bánh ngọt trước
đây không? => Thiết kế các chức năng theo mục tiêu dễ dàng sử dụng.
• Anh/ chị có thường xuyên truy cập vào website tương tự hay không?
=> Thống kê được tần suất truy cập website phổ biến nhất của đa số đối tượng
người dùng nhằm thiết kế các chức năng theo mục tiêu dễ dàng sử dụng.
• Những vấn đề anh/ chị thường gặp phải khi mua hàng online? => Hạn
chế tối đa việc người dùng mắc các lỗi tương tự và đưa ra các giải pháp cho
người dùng khi sử dụng hệ thống.
+ Người dùng sử dụng website trong các ngữ cảnh khác nhau sẽ ảnh
hưởng như thế nào tới việc thiết kế website? => Yêu cầu liên quan đến

14 | T H I Ế T K Ế W E B C Ơ B Ả N


môi trường vật lý, xã hội, tổ chức, kỹ thuật trong ngữ cảnh sử dụng của
người dùng.
=> Để có dữ liệu này ta cần đặt ra những câu hỏi như:
• Anh/ chị thường truy cập vào website bằng thiết bị nào? => Thiết kế
responsive phù hợp trên từng thiết bị
• Anh/ chị mong muốn địa chỉ của cửa hàng được hiển thị như thế nào?
=> Cung cấp thêm thông tin cho người dùng muốn tới trực tiếp tại cửa hàng
một cách dễ dàng và nhanh chóng (như thêm vị trí bằng map thay vì sử dụng
văn bản thơng thường).
+ Người dùng thường quan tâm đến gì trên một website bán bánh? =>
Yêu cầu về suy nghĩ và tâm lý của người dùng.
=> Để có dữ liệu này ta cần đặt ra những câu hỏi:
• Anh/ chị có quan tâm tới nguồn gốc của những loại nguyên liệu mà cửa
hàng sử dụng để làm bánh không? => Cung cấp nguồn gốc các ngun liệu
của các loại bánh
• Anh/ chị có quan tâm tới công thức làm bánh không? => Cung cấp bài viết
hoặc thơng tin liên quan về cách làm bánh
• Anh/ chị thường ưu tiên gì khi quyết định mua bánh trên website? => Sắp
xếp và phân loại thông tin về các loại bánh trên website theo mong muốn của
đa số người dùng (Giá cả, chất lượng, khuyến mãi, thương hiệu)
- Hình thức khảo sát và phương pháp tiến hành:
• Thông qua email, google forms và một số các trang mạng xã hội (Facebook,
Instagram)
• Khảo sát thử một nhóm 5-6 người nhằm chỉnh sửa để đưa ra được mẫu khảo
sát cuối cùng.
- Bảng khảo sát cuối cùng:
15 | T H I Ế T K Ế W E B C Ơ B Ả N

Câu hỏi
1. Giới tính của bạn?
2. Độ tuổi của bạn?
3. Bạn có thích các loại bánh ngọt
khơng?
4. Bạn thường mua bánh vào
những dịp gì?
5. Bạn thường mua bánh ở đâu?
6. Bạn đã từng truy cập vào
website của một cửa hàng bánh trước
đây chưa?
7. Bạn có thường xuyên truy cập
vào website tương tự hay khơng

Câu trả lời
Nam/Nữ/Khác…
10-20/ 20-30/ 30-40/ Trên 40
Thích/Khơng thích( Thang đo 5
mức độ)
Lễ Tết/ Tiệc/ Hàng ngày/ Dịp
khuyến mãi/ Dịp bất kỳ
Mua trực tiếp tại các cửa hàng/
Trên các sàn TMĐT/ Khác…
Có/ Khơng
Khơng bao giờ/ Thỉnh thoảng/
Thường xun/ Rất thường xun/
Ln ln
Điện thoại/ Máy tính/ Máy tính

bảng/ Khác…
Giá cả/ Chất lượng/ Khuyến mãi/
Thương hiệu
Có/ Khơng

8. Bạn thường truy cập vào
website bằng thiết bị nào?
9. Bạn thường ưu tiên gì khi
quyết định mua bánh trên website?
10. Bạn có quan tâm tới cơng
thức làm bánh khơng?
11. Bạn có quan tâm tới nguồn
Có/ Khơng
gốc của những loại ngun liệu mà
cửa hàng sử dụng để làm bánh không?
12. Bạn mong muốn địa chỉ của
Vị trí/ Văn bản/ Link
cửa hàng được hiển thị như thế nào?
13. Những vấn đề bạn thường
Phương thức thanh toán/ Tốc độ
gặp phải khi mua hàng online?
vận chuyển/ Hàng không nguyên vẹn/
Đổi trả hàng/ Khác…
2.2 Kết quả khảo sát
+ Giới tính nữ chiếm đa số (74,3%)
+ Độ tuổi phổ biến: Từ 15-40 tuổi
+ Số lượng người thích ăn bánh chiếm đa số (37,1 %). Tuy nhiên cũng có khá
nhiều người giữ thái độ ở mức trung lập (20%)
+ Tỉ lệ người dùng mua bánh vào các dịp:

16 | T H I Ế T K Ế W E B C Ơ B Ả N


+ Tỉ lệ giữa các địa điểm mà người dùng mua bánh:

+ Số lượng người dùng đã từng tiếp xúc với một website tương tự chiếm đa
số (65,7%)
+ Người dùng không thường xuyên truy cập vào website tương tự (chiếm
71,4%)
+ Số lượng người dùng sử dụng điện thoại để truy cập website chiếm đa số
(97,1%)
+ Tỉ lệ giữa các sự ưu tiên của người dùng trên website khi quyết định mua
bánh:

+ Người dùng quan tâm tới công thức làm bánh chiếm đa số (65,7%)
17 | T H I Ế T K Ế W E B C Ơ B Ả N


+ Người dùng quan tâm tới nguồn gốc của các loại nguyên liệu sử dụng để
làm bánh chiếm đa số (85,7%)
+ Người dùng mong muốn địa chỉ của cửa hàng được hiển thị thơng qua vị
trí trên bản đồ chiếm đa số (74,3%)
+ Đa số người dùng đều gặp vấn đề về tốc độ vận chuyển (60%) và hàng
không nguyên vẹn (48%)
+ Một số mong muốn khác của người dùng đối với website:
• Có thể giao hàng tồn quốc
• Khơng bị lỗi và đa dạng sự lựa chọn
• Rõ ràng và đảm bảo đầy đủ thơng tin sản phẩm
• Sản phẩm trên website chất lượng và giá rẻ
3 Tập trung nhóm và các khóa học thực hành

3.1 Tiến hành
- Hình thức: tập chung nhóm 6 người (3 nam, 3 nữ), có độ tuổi từ 18-32
tham gia cuộc thảo luận nhỏ về các vấn đề liên quan đến bánh .
- Trước khi bắt đầu cuộc thảo luận mỗi người tham gia sẽ giới thiệu qua về
bản thân như tên tuổi, công việc hiện tại và sở thích hay có hứng thú với
các loại bánh không.
- Vấn đề thảo luận đầu tiên: Mọi người mua bánh vào những thời điểm nào?
+ Tất cả đều trả lời thường mua bánh vào các dịp lễ, ngày đặc biệt như sinh
nhật, ngày kỷ niệm ...
+ 2/3 người tham gia nữ và 1/3 người tham gia nam trả lời không nhân dịp nào
cả, sẽ mua vào những lúc muốn đồ ngọt
- Câu hỏi thảo luận thứ hai: Bạn muốn đến trực tiếp cửa hàng mua bánh hay
đặt hàng qua trang web.
+ 5/6 người (2 nữ, 3 nam) tham gia trả lời rằng thích mua hàng online hơn vì
nó dễ dàng và thuận tiện.
+ 1 người tham gia cịn lại chọn đến cửa hàng mua bánh vì có thể trực tiếp quan
sát được tất cả loại bánh cũng như có thể xem được quy trình làm bánh
- Câu hỏi thảo luận thứ 3: Bạn quan tâm đến hình thức, thương hiệu hay nguồn
gốc, chất lượng của một chiếc bánh?
+ 4/6 người (3 nữ, 1 nam) trả lời là quan tâm đến chất lượng của bánh.
+ 2 người tham gia còn lại trả lời họ quan tâm đến thương hiệu và hình thức
của bánh hơn vì họ mua bánh chủ yếu với hình thức làm quà tặng trong
những dịp lễ quan trọng.
- Câu hỏi thảo luận thứ 4: Một trang web bán bánh với giao diện đơn giản và
một trang web có giao diện đẹp và có nhiều chức năng thì bạn sẽ chọn trang
web nào?

18 | T H I Ế T K Ế W E B C Ơ B Ả N

+ 3/6 người (2 nữ, 1 nam) trả lời chọn trang web có giao diện đẹp vì giao diện
đẹp cũng sẽ kích thích việc mua hàng.
+ 3/6 người (1 nữ, 2 nam) trả lời rằng họ không quan tâm đến giao diện trang
web khi truy cập trang web là họ chắc chắn sẽ đặt hàng. Vì vậy chỉ một giao
diện đơn giản, dễ nhìn, dễ sử dụng là được.
- Câu hỏi thảo luận cuối cùng bạn có quan tâm đến công thức và cách làm
bánh không.
+ 2/6 người (nữ) trả lời là có. Vì họ có sở thích nấu ăn và muốn làm bánh vào
1 số dịp đặc biệt.
+ 4/6 người (1 nữ, 3 nam) trả lời là khơng vì họ cảm thấy khơng cần thiết vì có
thể mua bánh ngoài tiệm.
3.2 Kết quả khảo sát
- Khách hàng là nữ chiếm đa số
- Khách hàng sẽ ưu tiên đặt hàng trên trang web.
- Khách hàng quan tâm đến chất lượng của những chiếc bánh vì vậy trên trang
web cần cung cấp thông tin về nguồn gốc, xuất sứ của nguyên liệu làm bánh
- Đối tượng khách hàng tiềm năng đa số là nữ, vì vậy cần chú trọng hơn về
hình thức, giao diện của trang web nhưng cần đảm bảo đơn giản và dễ dùng
- Có một nhóm nhỏ khách hàng quan tâm đến công thức và cách làm bánh vì
vậy thêm mục nguyên liệu và cách làm bánh vào trang web có thể là một
điểm cộng đối với trang web.
4 Tiếp cận tự nhiên
Tiếp cận tự nhiên hay quan sát trực là một phương pháp thu thập dữ liệu
bao gồm việc quan sát đối tượng nghiên cứu trong một tình huống cụ thể.
Có thể sử dụng hai phương pháp là bí mật và rõ ràng. Tuy nhiên để có kết
quả tốt nhất thì nên quan sát thơng tin một cách bí mật vì khi người dùng biết
họ bị quan sát thì hành vi của họ sẽ khác đi.
Quá trình chuẩn bị:
4.1.1 .Xác định mục tiêu và đối tượng quan sát:
+) Xác định mục tiêu:

19 | T H I Ế T K Ế W E B C Ơ B Ả N


Xác định mục tiêu cần nghiên cứu, quan sát là một bước tối quan trọng
trong quá trình tiếp cận khách hàng, mục tiêu quan sát có thể là hành vi của
khách hàng khi sử dụng các trang web khác như thế nào, thái độ của họ ra sao,
họ có phàn nàn hay có lời khen gì cho trang web đó khơng, hay cái họ thường
quan tâm nhất? Từ đó ta có thể rút ra những thứ mình cần phải có hoặc cần phải
loại bỏ.
Ta có thể xác định mục tiêu đơn giản nhất là qua các trang mạng xã hội, hoặc
các diễn đàn thảo luận.
+) Xác định đối tượng:
Sau khi đã xác định được mục tiêu, ta cần xác định được đối tượng cần phải
quan sát. Đối tượng quan sát có thể là một tập thể, một cá nhân hoặc cũng có
thể chia ra là nam hay nữ, độ tuổi và nghề nghiệp ra sao, mức thu nhập như thế
nào.
Ví dụ như đối tượng là sinh viên và mức thu nhập thấp thì họ quan tâm đến
những vấn đề gì? Đó có thể là giá cả của một chiếc bánh có hợp lý hay khơng,
Cái nhìn đầu tiên khiến cho một chiếc bánh trông ngon miệng và tạo cảm giác
hấp dẫn đó là độ thẩm mỹ của nó, màu sắc, trang trí, kết cấu, ... Có thể đối
tượng sinh viên sẽ không quan tâm lắm đến nguyên liệu làm ra chiếc bánh đó
bao gồm những thành phần gì, nhập từ đâu. Tuy nhiên nếu đối tượng là những
người có thu nhập cao và ổn định hơn thì có thể họ sẽ quan tâm đến phần xuất
xứ của nguyên liệu.
+) Xác định thời điểm quan sát:
Để quá trình quan sát đạt được hiệu quả cao nhất thì ta cần phải chọn thời
điểm đúng đắn và khôn ngoan, ta cần biết được phải nghiên cứu và quan sát
trong khoảng thời gian cụ thể nào.
+) Xác định hình thức quan sát:

Để quá trình quan sát đạt hiệu quả cao hơn ta cần chuẩn bị những hình thức
sẽ được sử dụng.
20 | T H I Ế T K Ế W E B C Ơ B Ả N


Ví dụ như ghi chép, ghi âm, …
4.1.2 Kết quả quá trình quan sát:

Bảng thống kê những điều mà khách hàng quan tâm
Cứ 100 người truy cập vào website thì:
-

22% quan tâm đến giá cả
39% quan tâm đến chất lượng
21% quan tâm đến thẩm mĩ của chiếc bánh
Còn lại 18% quan tâm đến nhãn hiệu của chiếc bánh

21 | T H I Ế T K Ế W E B C Ơ B Ả N


40% khách hàng truy cập web để mua bánh
30% khách hàng truy cập để xem bánh
20% khách hàng truy cập để xem cách làm bánh
10% khách hàng không rõ mục đích truy cập

Đa số khách hàng ở độ tuổi từ 22-35 tuổi (40%)
28% khách hàng ở độ tuổi 15-22
18% khách hàng ở độ tuổi 35-45
14% khách hàng ở các độ tuổi từ 45 trở lên
22 | T H I Ế T K Ế W E B C Ơ B Ả N

Một số thông tin quan sát được từ các cộng đồng và diễn đàn:
-

Trải nghiệm đặt bánh bị khó khăn.
Sai công thức làm bánh
Bánh ngon, giao diện bắt mắt
Mong muốn có video hướng dẫn đi kèm trong mục làm bánh

5 Nghiên cứu tài liệu
5.1 Những module phù hợp nhất cho thiết kế website bán bánh
Module Trang chủ

Đây là module quan trọng khi thiết kế một website cửa hàng bánh – kem.
Khoảnh khắc đầu tiên luôn là khoảnh khắc quan trọng nhất. Khách hàng sẽ
nhớ mãi ấn tượng đầu tiên của họ về cửa hàng. Chính vì thế việc xây dựng
trang chủ website phải thật bắt mắt và nêu bật được những điều đặc biệt mà
chỉ cửa hàng bánh mới có.
Kèm với đó là hình ảnh những chiếc bánh đẹp nhất của cửa hàng. Người yêu
bánh không chỉ yêu hương vị mà họ còn là người yêu vẻ đẹp. Điều đặc biệt
không thể thiếu là khách hàng phải thấy rõ được thông tin cơ bản về cửa hàng
như: tên tiệm bánh, địa chỉ, số điện thoại, mã số doanh nghiệp (nếu có), …
Module giới thiệu

23 | T H I Ế T K Ế W E B C Ơ B Ả N


Module này chính là nơi thể hiện khả năng của cửa hàng trước mặt khách
hàng. Nơi cho khách hàng thấy tiềm năng, tiềm lực của mình. Cho họ thấy

những cơng nghệ, bí quyết của
mình sử dụng khi làm bánh. Đặc
biệt là kể cho họ nghe một quá
trình lịch sử của những chiếc
bánh. Đó sẽ là một câu chuyện họ
sẽ nhớ mỗi khi nghĩ về tiệm bánh

Danh mục sản phẩm
Đây là Module quan trọng nhất
của toàn bộ việc thiết kế website bán bánh. Khách hàng vào website họ sẽ
quan tâm đến cửa hàng có những loại bánh gì. Chính vì thế module này sẽ
phải được chú tâm nhất.
Danh mục các loại bánh
như: bánh sinh nhật,
bánh kem, bánh tiệc
cưới, bánh nướng, bánh
mì… phải thật chi tiết.
Việc phân rõ module sản
phẩm sẽ giúp phân loại
rõ ràng các loại bánh mà
đang có. Giúp dễ dàng
quản lý. Còn đối với
khách hàng, danh mục
này sẽ giúp họ dễ dàng
phân loại và nhanh
chóng tìm được chiếc
bánh mà họ muốn.
Giá đính kèm sản phẩm
chính là điều quan trọng
mà khách hàng muốn. Họ sẽ dễ dàng tìm được chiếc bánh ưng ý. Thêm vào

chức năng lọc, nếu website có quá nhiều chiếc bánh. Chức năng này giúp cho
khách hàng một cách thuận tiện nhất. Đặc biệt là khả năng phóng to ảnh để
khách có thể nhìn một cách rõ ràng, chi tiết.
Sản phẩm nổi bật

24 | T H I Ế T K Ế W E B C Ơ B Ả N


Việc sử dụng module sản phẩm nổi bật sẽ giúp khách hàng có sự gợi ý cũng
như chọn lựa dễ dàng hơn. Đặc biệt việc này có mức độ quan trọng cao với
cửa hàng. Sản phẩm nổi bật giúp tiệm bánh có đặc trưng riêng, lưu trữ những
chiếc bánh hồn hảo nhất, hợp thời nhất. Như vào mùa trung thu hoặc mùa
giáng sinh sẽ có những chiếc bánh nổi bật riêng. Ngồi ra cịn có thể dễ dàng
định hình xu hướng cho người dùng, giúp họ có sự lựa chọn và kéo họ theo
những chiếc bánh mà mình có.
Khuyến mãi
Đây sẽ là module nằm cạnh module sản phẩm nổi bật. Khách hàng sẽ rất quan
tâm đến những sản phẩm đang được khuyến mãi. Điều này sẽ giúp tăng đáng
kể doanh thu và đẩy mạnh những sản phẩm ít người mua. Nên đây chắc chắn
sẽ là một module cần thiết cho website cửa hàng bánh.
Tin tức – kinh nghiệm làm bánh, làm kem
Những người u bánh, họ ln mong
muốn có thể tự làm một chiếc bánh
cho mình, hoặc cho người thân yêu.
Đây chắc chắn sẽ là module được
nhiều người yêu bánh thích thú. Đây
sẽ là nơi chia sẻ những kinh nghiệm
làm bánh đơn giản cho khách hàng.
Điều này không những giúp tương tác
với khách hàng mà cịn làm tăng sự

u thích của họ đối với cửa hàng bánh. Bên kệnh đó kênh tin tức – kinh
nghiệm làm bánh, làm kem này sẽ là một kênh SEO tốt nhất cho website cửa

25 | T H I Ế T K Ế W E B C Ơ B Ả N