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: 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 Xác định đối tượng 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 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 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 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 Thích ă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 (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 + 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 Đâ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 II 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 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ừ chúng tơi 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 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 - Đã 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à 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  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 ă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  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 | T H I Ế T K Ế W E B C Ơ B Ả N  Lý sử dụng: Đóng vai trị loại tiện ích mà website cung cấp Ngồi việc hỗ trợ định hướng vị trí cho người dùng mơ tả độ sâu trang loại điều hướng hỗ trợ người dùng chuyển trang cách nhanh chóng  Xuất Footer: Chứa đường dẫn tới trang website Nó đóng vai trò sitemap tổng hợp lại tất trang website Hiệu ứng hover sử dụng (khi rê chuột tới đoạn chữ chuyển sang màu khác) nhằm giúp người dùng biết liên kết bấm vào:  Lý sử dụng: Tổng hợp rõ ràng mà hệ thống cung cấp, tránh gây khó hiểu cho người lần đầu sử dụng - Điều hướng footer: Điều hướng footer + Vị trí: Nằm trang + Chứa đường dẫn quay đầu trang di chuyển tới trang khác Ngoài chứa thông tin bổ sung không liên quan đến chủ đề website: địa chỉ, số điện thoại, sản phẩm chính, form yêu cầu hỗ trợ + Lý sử dụng:  Cung cấp thông tin bổ sung mà không xâm nhập vào nội dung website: Ví dụ thơng tin liên quan tới vấn đề pháp lý chủ nhân website (bản quyền, điều khoản, điều kiện…) hay thông tin hỗ trợ người dùng  Hỗ trợ cho người dùng di chuyển nhanh tới vị trí họ muốn trường hợp họ vị trí cuối trang mà không cần phải cuộn chuột lại lần - Logo liên kết: 64 | T H I Ế T K Ế W E B C Ơ B Ả N + Vị trí: Logo nằm phía tay trái header + Lý sử dụng:  Giúp người dùng quay trang chủ cách nhanh chóng  Liên kết chặt chẽ trang website với trang chủ - Điều hướng website: + Vị trí: Nằm logo social media (thuộc trang cơng thức, trang đăng nhập đăng ký) + Lý sử dụng:  Đối với logo social media thuộc trang công thức: Điều hướng người dùng sang trang mạng xã hội: hỗ trợ người dùng chia sẻ công thức mà họ yêu thích, đồng thời giúp ích cho việc truyền thông website  Đối với logo social media thuộc trang đăng nhập/ đăng ký: Hỗ trợ người dùng đăng nhập nhanh tài khoản mạng xã hội mà không cần phải tốn thời gian điền thông tin đăng ký đăng nhập Điều hoàn toàn phù hợp với đối tượng người sử dụng website (là người truy cập u thích bánh đam mê nấu ăn Những đối tượng thường sử dụng web thời gian rảnh rỗi Do liên kết nhanh trang đăng nhập phù hợp với đối tượng này) Đánh giá khả hoạt động 3.1 Ưu điểm - Cách hiển thị: Dễ nhìn, quen thuộc đơn giản (chủ yếu dạng chữ)  Phù hợp với nhóm người lần đầu sử dụng có kinh nghiệm - Vị trí xuất hiện: Phù hợp với ngữ cảnh sử dụng nội dung trang  Liên kết trang với cách logic 3.2 Nhược điểm - Một số chỗ cách hiển thị chưa rõ ràng: Chỉ có chữ phải rê chuột vào thấy  Đối với nhóm người sử dụng khiến họ bối rối - Chưa có điều hướng nội trang: Đối với trang dài, người dùng nhiều thời gian để cuộn chuột, gây khó chịu cho người dùng 65 | T H I Ế T K Ế W E B C Ơ B Ả N Mô tả hoạt động sản phẩm - Công cụ sử dụng: Figma - Prototype tổng hợp: Prototype sử dụng figma - Mô tả hoạt động sản phẩm (Xem phụ lục) VII Code Tìm hiểu ngơn ngữ lập trình sử dụng 1.1 HTML - Khái niệm: 66 | T H I Ế T K Ế W E B C Ơ B Ả N Ngôn ngữ HTML (HyperText Markup Language – ngôn ngữ siêu văn bản) loại ngơn ngữ sử dụng lập trình web Khi truy cập trang web cụ thể click vào đường link, dẫn tới nhiều trang nhau, trang gọi tài liệu HTML (tập tin HTML) Một trang HTML cấu thành nhiều phần tử HTML nhỏ quy định thẻ tag Chúng ta phân biệt trang web viết ngôn ngữ HTML hay PHP thông qua đường link Ở cuối trang HTML thường hay có HTML HTM HTML ngơn ngữ lập trình web đánh giá đơn giản Mọi trang web, trình duyệt web hiển thị tốt ngôn ngữ HTML Hiện nay, phiên HTML HTML với nhiều tính tốt chất lượng so với phiên cũ HTML - Vai trò: HTML loại ngôn ngữ đánh dấu siêu văn nên chức xoay quanh yếu tố Cụ thể, HTML giúp cấu thành cấu trúc website (chia khung sườn, bố cục thành phần trang web) góp phần hỗ trợ khai bảo tập tin kĩ thuật số video, nhạc, hình ảnh Ưu điểm trội mạnh HTML khả xây dựng cấu trúc khiến trang web vào quy củ hệ thống hoàn chỉnh HTML chứa yếu tố cần thiết mà dù website có thuộc thể loại nào, giao tiếp với ngơn ngữ lập trình để xử lý liệu phải cần đến ngơn ngữ HTML để hiển thị nội dung cho người truy cập Đối với lập trình viên hay nhà phát triển web, họ phải học HTML loại ngôn ngữ trước bắt tay vào thiết kế trang web Các thẻ HTML: Các trang HTML quy định thẻ tag Những thẻ chứa dấu ngoặc đơn dạng: