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 Giảng viên hướng dẫn: Nguyễn Thị Thanh Tâm Nhóm: 07 Thành viên: 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 123docz MỤC LỤC I Xác định đối tượng .5 Xác định đối tượng .5 Phân loại đối tượng sử dụng II Thu thập thông tin liệu Phương pháp vấn 1.1 Quá trình vấn 1.2 Kết tổng hợp sau vấn 11 Đặt câu hỏi 13 2.1 Chuẩn bị 13 2.2 Kết khảo sát .16 Tập trung nhóm khóa học thực hành 18 3.1 Tiến hành 18 3.2 Kết khảo sát .19 Tiếp cận tự nhiên 19 Nghiên cứu tài liệu 23 III Kết phân tích liệu 26 Vấn đề hệ thống 26 Đưa yêu cầu hệ thống 26 IV Use case diagram 27 Sơ đồ Use case diagram 27 Yêu cầu chức phi chức 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 123docz 2.8 Thanh toán 31 2.9 Kiểm tra đơn hàng 32 2.10 Nhận giao hàng 33 V Thiết kế giao diện .33 Xác định kích thước hình hiển thị + trình duyệt 33 Xác định nội dung 34 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 Wireframe 47 Màu sắc .49 Hình ảnh + video 50 Bố cục trang 55 VI Thiết kế prototype 60 Kiến trúc thông tin website 60 Các loại điều hướng 60 Đánh giá khả hoạt động 65 3.1 Ưu điểm .65 3.2 Nhược điểm .65 Mô tả hoạt động sản phẩm .66 VII Code 66 Tìm hiểu ngơn ngữ lập trình sử dụng 66 1.1 HTML 66 1.2 CSS 68 Thư viện hỗ trợ 68 Quy trình thực 70 Source code .70 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 123docz 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 Những thuận lợi khó khăn thực code 76 VIII Kết luận 77 Kết đạt .77 Hạn chế .77 Hướng phát triển đề tài 77 PHỤ LỤC 78 4|THIẾTKẾWEBCƠBẢN 123docz I Xác định đối tượng 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 u thích bánh 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, chơi với bạn bè Nghề nghiệp Học sinh, sinh viên Hạn chế tài Tự do, khơng q bận rộn Khả tài Mức độ bận rộn Nhu cầu ăn bánh 23-40 Nữ (chiếm 70%) Đám cưới, kiện công ty, sinh nhật, chơi với bạn bè Đã làm Tự chủ tài Bận rộn Thích ăn bánh Thích (hạn chế ăn giữ dáng) 41-50 Nữ (chiếm 90%) Tặng người thân, làm bánh nhà, sinh nhật Đi làm, nội trợ gia đình Ổn định tài Có nhiều thời gian dành cho gia đình Hạn chế Bảng phân tích 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 doanh nghiệp cung cấp 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ú Yê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 quan tâm đến website bạn Họ quan sát xem trang web bạn nhắm đến đối tượng nào, thiết kế giao diện để phân tích, điều chỉnh website họ Một số thương hiệu tiếng có cạnh tranh mạnh mẽ: + ABC Bakery: thương hiệu lên từ bánh mì loại bánh ngọt, bánh bao mở rộng dòng bánh kiểu Tây Không thương hiệu bánh tiếng, ABC Bakery 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 123docz + Givral: kế thừa trọn vẹn nét tinh tế, tao nhã ẩm thực Pháp, ln ghi dấu ấn với dịng bánh tươi, khơng sử dụng 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 dòng bánh cao cấp từ bánh kem, bánh cưới, bánh trung thu, bánh mì loại bánh nướng với đa dạng loại bánh + Banhngot.vn – Thương hiệu bánh Việt Nam: tiếng hàng đầu bánh kem Đặc biệt dịch vụ giao bánh tận nhà tặng người thân  Như khách hàng trọng tâm hướng đến độ tuổi từ 15 đến 40, với tính cách, sở thích, trình độ, giới tính (chủ yếu nữ giới) khác Phân loại đối tượng sử dụng  Quan trọng: dùng thường xuyên trực tiếp o Khách hàng đặt hàng web quay trở lại web: Đây nhóm khách hàng thân thiết với doanh nghiệp mục tiêu doanh nghiệp hướng đến Họ yêu thích sản phẩm thương hiệu bạn đến mức họ mua hàng bạn, có ưu đãi rẻ nơi khác Bên cạnh đó, họ sẵn lịng giới thiệu sản phẩm doanh nghiệp tới 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 quan tâm đến sản phẩn web Vì việc họ đặt hàng chắn diễn  Bình thường: dùng 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 gọi tập khách hàng phân vân Có đến 90% khách hàng cảm thấy khó định giá Có lẽ… họ chờ Super Sale từ bạn? o Nhóm khách hàng u thích đợt giảm giá: Chỉ truy cập mua hàng trang web vào đợt giảm giá  Yếu: người dùng bị ảnh hưởng quảng cáo giá thành o Khách hàng có ý định rời web, không sử dụng website: Xác định xem không xứng đáng dành thời gian quan tâm Ví dụ loại bỏ đối thủ cạnh tranh chơi xấu/ thăm dò, sản phẩm bạn giới hạn độ tuổi, người không nằm 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 người khơng hài lịng sản phẩm/dịch vụ doanh nghiệp Họ quay trở lại để yêu cầu khắc phục vấn đề phàn nàn Điều tác động tiêu cực doanh nghiệp khơng có kinh nghiệm việc xử lý khiếu nại, ngược lại, hội để doanh nghiệp tạo dựng niềm tin uy tín lịng người tiêu dùng xử lý khéo léo trường hợp  Nói chung, đối tượng sử dụng website người bị thu hút sửdụng website bạn để tìm hiểu thơng tin hay thực giao dịch 6|THIẾTKẾWEBCƠBẢN 123docz II Đây mục tiêu mà website bạn cần nỗ lực tiếp thị hướng tới để biến họ thành khách hàng Thu thập thơng tin liệu Phương pháp vấn 1.1 Quá trình vấn 1.1.1 Giai đoạn chuẩn bị Để có vấn diễn thành cơng việc tìm hiểu trước nội dung đặt vấn tìm hiểu người trả lời quan trọng Hoạt động giúp cho dễ nhập cuộc, chủ động, tự tin vấn, tạo tin cậy với người đối thoại, xử lý tình bất ngờ xảy q trình vấn Việc tìm hiểu đối tượng vấn thực thông qua: Xác định đối tượng – / sử dung trang web làm bánh (đã xác định phần I) Nghiên cứu tư liệu 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 vấn Dựa vào nội dung mục đích muốn tìm hiểu nhu cầu, mục đích, mong muốn người dùng trang web làm bánh, từ lưa chọn người tiêu biểu cho vấn mình: người nội trợ, sinh viên, người làm 1.1.1.2 Sắp đặt vấn Sử dụng hình thức: Báo trước: + Gọi điện, gửi mail đề nghị vấn (trò chuyện, trao đổi) + Giới thiệu với tư cách người vấn + Cho nguồn tin biết mục đích nhằm nghiên cứu, khảo sát nhu cầu, mong muốn người dùng trang web làm bánh + Thỏa thuận địa điểm, thời gian vấn (đến nhà, quán, đến trường…) - Không báo trước (áp dụng với đối tượng bắt gặp): + Giới thiệu với tư cách người vấn + Xin ý kiến người dùng với lời mời vấn + Cho nguồn tin biết mục đích nhằm nghiên cứu, khảo sát nhu cầu, mong muốn người dùng trang web làm bánh 1.1.1.2.1 Chuẩn bị đề cương câu hỏi Căn vào thông tin tìm hiểu được, tơi dự kiến số câu hỏi đặt vấn: Bạn chia sẻ số thông tin cá nhân 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 123docz Đã bạn khơng ăn bánh rồi? Bạn thích ăn bánh theo phong cách nào? Bạn có chế độ giảm cân khơng? Bạn thích ăn bánh nhiều đường hay đường? Bạn có hay mua bánh để tặng bạn bè, người thân không? Nếu bánh đồ ăn bạn thích làm từ ngun liệu tự nhiên bạn có muốn thử khơng? Bạn có mong muốn sản phẩm? Bạn mua bánh online chưa? Bạn thường ghé thăm trang web làm bánh lần/tháng? Bạn thường mua bánh vào dịp nào? Mục đích bạn ghé thăm trang web bánh để làm gì? Tuy nhiên q trình vấn linh hoạt thay đổi 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 tiến hành vấn Ăn mặc phù hợp Chuẩn bị phương tiện vấn Đúng hẹn (áp dụng cho vấn báo trước) Chuẩn bị phương tiện, vật dụng vấn: sổ tay, máy ghi âm 1.1.1.3 Giai đoạn tiến hành vấn 1.1.1.3.1 Giai đoạn nhập Giới thiệu thân Nhắc lại mục đích vấn Bắt đầu câu chuyện nhẹ nhàng Mở đầu vấn câu hỏi đơn giản => biết đến thơng tin, sở thích người dùng: Câu 1: Bạn chia sẻ số thông tin cá nhân bạn cho không? Một số câu trả lời tiêu biểu mà note  Tôi Nguyễn Thị Lan, năm 35 tuổi phụ nữ nội trợ  Tôi Bùi Thị Quỳnh sinh viên ngành Công nghệ đa phương tiện trường Học viện Cơng nghệ Bưu Viễn thơng  Tơi Trần Thị Bích Như năm 26 tuổi Kế tốn cho cơng ty 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 mua hàng online người nội trợ cho gia đình nên tơi có nhiều thời gian mua sắm 8|THIẾTKẾWEBCƠBẢN 123docz  Tơi có sinh viên tơi thường thức dậy muộn nên ngại cho việc mua sắm bên ngồi  Tơi có tơi 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à note  Tơi thích làm bánh, tơi thường lên trang mạng để nghiên cứu học hỏi công thức làm bánh  Tơi khơng thích làm bánh cho cầu kì tỉ mỉ  Tơi thích làm bánh, thường làm bánh vào 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 số câu hỏi xen kẽ linh hoạt Để khai thác điểm quan trọng, bật, áp dụng số câu hỏi: Câu 1: Đã bạn không ăn bánh rồi? Một số câu trả lời tiêu biểu:    Tơi ăn cách ngày, ngày kỷ niệm ngày cưới vợ chồng Tôi ăn cách tuần, sinh nhật bạn tơi Tôi ăn cách nửa tháng lúc chơi với bạn bè Câu 2: Bạn thích ăn bánh 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 đại Tơi thích ăn bánh theo phong cách Pháp Câu 3: Bạn có 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 nhiều đường hay đường? Một số câu trả lời tiêu biểu: Tơi thích ăn đường Tơi thích ăn đường 9|THIẾTKẾWEBCƠBẢN 123docz  Tơi thích ăn đườ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 đồ ăn bạn thích làm từ ngun liệu tự nhiên bạn có muốn thử khơng?    Một số câu trả lời tiêu biểu: Tơi sẵn lịng Wow, tơi muốn thử Tất nhiên có Để biết đến nhu cầu, mong muốn người dùng truy cập vào trang web bán bánh ta vấn số câu hỏi: Câu 7: Bạn có mong muốn 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á thấp Thời gian truy cập nhanh Thao tác dễ dàng, giao diện bắt mắt Để biết tần suất, thói quen người dùng truy cập vào trang web bán bánh cần vấn số câu hỏi: Câu 8: Bạn mua bánh online chưa? Một số câu trả lời tiêu biểu: 100% người vấn trả lời mua bánh gian hàng online Câu 9: Bạn thường ghé thăm trang web làm bánh lần/tháng? 10|THIẾTKẾWEBCƠBẢN 123docz ... dòng bánh cao cấp từ bánh kem, bánh cưới, bánh trung thu, bánh mì loại bánh nướng với đa dạng loại bánh + Banhngot.vn – Thương hiệu bánh Việt Nam: tiếng hàng đầu bánh kem Đặc biệt dịch vụ giao bánh. .. làm bánh khơng? 7|THIẾTKẾWEBCƠBẢN 123docz Đã bạn khơng ăn bánh rồi? Bạn thích ăn bánh theo phong cách nào? Bạn có chế độ giảm cân khơng? Bạn thích ăn bánh nhiều đường hay đường? Bạn có hay mua bánh. .. 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 quan tâm đến website bạn Họ quan sát xem trang web bạn nhắm đến đối tượng nào, thiết kế giao