Phát triển và thiết kế ứng dụng cửa hàng thực phẩm cho foam market

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC BÀ RỊA – VŨNG TÀU KHOA CÔNG NGHỆ KỸ THUẬT – NÔNG NGHIỆP CÔNG NGHỆ CAO - - ĐỒ ÁN TỐT NGHIỆP PHÁT TRIỂN VÀ THIẾT KẾ ỨNG DỤNG CỬA HÀNG THỰC PHẨM CHO FOAM MARKET Sinh viên: Phạm Huy Phong Mã sinh viên: 16031753 Lớp: DH16LT Trình độ đào tạo: Đại học Ngành: CNTT- Điện – Điện tử Chuyên ngành: Lập trình Internet thiết bị di động Giảng viên hướng dẫn: TS Nguyễn Tấn Phương BÀ RỊA – VŨNG TÀU, NĂM 2020 \ LỜI CÁM ƠN Trước hết, em xin bày tỏ tình cảm lòng biết ơn em tới tất giảng viên mái trường Đại học Bà Rịa Vũng Tàu (BVU) tận tình, quan tâm, giúp đỡ, gửi gắm kiến thức từ kinh nghiệm thực tế người trước dành cho người sau cho hệ sinh viên DH16LT chúng em Đặc biệt thầy, cô khoa Công Nghệ Thông Tin – Điện – Điện Tử Nhờ có giúp đỡ thầy, giúp em tìm thấy niềm đam mê trãi niềm đam mê Cơng Nghệ Thơng Tin Và kết là Bảo vệ luận văn – Đồ án tốt nghiệp lần Đề tài với chủ đề: “Phân tích – Thiết kế ứng dụng cửa hàng thực phẩm cho FOAM MARKET” Em xin gửi lời cảm ơn chân thành đến Th.S Nguyễn Tấn Phương, giảng viên khoa Công Nghệ Thông Tin – Điện – Điện tử, chuyên ngành Cơng Nghệ Thơng Tin Người tận tình hướng dẫn, bảo em suốt q trình làm khố luận Với điều kiện thời gian kinh nghiệm hạn chế học viên, đề án khơng thể tránh thiếu sót Rất mong nhận bảo, đóng góp ý kiến thầy, để em có điều kiện bổ sung, nâng cao ý thức mình, phục vụ tốt công tác thực tế sau Vũng Tàu, ngày………tháng…… năm…… Sinh viên thực NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN MỤC LỤC LỜI CÁM ƠN NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN MỤC LỤC DANH MỤC HÌNH MỞ ĐẦU 13 CHƯƠNG TÌM HIỂU VỀ UX DESIGN VÀ UI DESIGN .14 Những hiểu biết UX thiết kế UX 14 UX đời sống hàng ngày 16 2.1 UX đời sống hàng ngày .16 2.2 Thế UX tốt ? 18 2.3 Vai trò UX tới doanh nghiệp 19 Khái niệm UX Design UI Design: 21 Công việc UX Designer UI Designer ? 22 Giữa UX UI quan trọng ? 24 Quá trình thiết kế dự án UX/UI 25 CHƯƠNG 2: TÌM HIỂU MỘT SỐ CƠNG CỤ THỰC HÀNH 26 Bút, tẩy giấy 26 Miro – Công cụ hỗ trợ vẽ sơ đồ 27 Figma – Công cụ hỗ trợ việc thiết kế UI 28 CHƯƠNG 3: DISCOVER – GIAI ĐOẠN KHÁM PHÁ 29 Tìm hiểu Disover – Giai đoạn tìm hiểu, khám phá .29 1.1 Hiểu người dùng bạn: 30 1.2 Hiểu doanh nghiệp bạn: 30 1.3 Nghiên cứu: 30 Project Promt – Background Research 31 User Survey – Khảo sát người dùng .36 3.1 User Serveys gì? 36 3.2 Quá trình thực khảo sát: 37 User Interview – Phỏng vấn trực tiếp người dùng 44 CHƯƠNG 4: DIFINE – GIAI ĐOẠN XÁC ĐỊNH CÁC VẤN ĐỀ 49 Affinity Mapping – Biểu đồ mối quan hệ 50 User Personas – Mơ hình người dùng mẫu 53 2.1 User Personas ? 53 2.2 Tầm quan trọng User Personas ? 54 User Stories – Câu chuyện người dùng 56 3.1 User Stories ? 56 3.2 Làm để bạn tạo User Stories? 56 Paint Points & Solution – Các vấn đề xác định giải pháp 60 CHƯƠNG 5: IDEATE – GIAI ĐOẠN HÌNH THÀNH Ý TƯỞNG CHO ỨNG DỤNG FOAM MARKET 61 Storyboard – Câu chuyện người dùng 63 1.1 Storyboard gì? 63 1.2 Storyboard thiết kế UX gì? 63 Cart Sorting – Sắp xếp thẻ .67 2.1 Cart Sorting ? 67 2.2 Tại lại sử dụng Cart Sorting ? 67 2.3 Thực hành Cart Sorting .68 3.1 Site map ? 70 3.2 Tại ta nên sử dụng site map? 70 3.3 Thực hành Sitemap kết thu .71 User Flow – Sơ đồ luồng người dùng 72 4.1 User Flow ? 72 4.2 Các lợi ích mà User Flow đem lại 72 CHƯƠNG 6: DESIGN – THIẾT KẾ ỨNG DỤNG: 79 Design – Thiết kế ứng dụng .79 Wireframes ? 80 2.1 Khái niệm Wireframes ? 80 2.2 Mục đích Wireframes ? 81 2.3 Các loại wireframes thường thấy ? .82 Thực hành Low – fi wireframes .85 Thực hành High – fi wireframe 91 UI Guideline: 98 5.1 UI Guideline ? .98 5.2 Phân loại UI Guideline 99 5.3 Thực hành thiết kế UI Guideline .100 CHƯƠNG 7: TỔNG KẾT VÀ HƯỚNG PHÁT TRIỂN 108 Tổng kết hạn chế: 108 Hướng phát triển: 108 TÀI LIỆU THAM KHẢO 109 DANH MỤC HÌNH Hình 1.1: Chân dung Steve Jobs 14 Hình 1.2: Câu nói tiếng Steve Jobs 15 Hình 1.3: Ví dụ trải nghiệm UX xấu 16 Hình 1.4: Ví dụ trải nghiệm UX tốt 17 Hình 1.5: Mơ hình bậc thang bước 18 Hình 1.6: Vai trị người dùng với sản phẩm dịch vụ 19 Hình 1.7: Chân dung “cha đẻ” ngành UX Design 21 Hình 1.8: Mối tương quan UX UI 22 Hình 1.9: Kỹ cần có UX Designer UI Desinger 23 Hình 1.10: Tầm quan trọng UX Design UI Design 24 Hình 1.11: Quy trình chung UX Process 25 Hình 1.12: Quy trình thiết kế UX/UI cho Goam Market 25 Hình 2.1: Giấy note – công cụ đắc lực cho dự án 26 Hình 2.2: Logo Miro - Ứng dụng vẽ sơ đồ 27 Hình 2.3: Logo Figma – Cơng cụ thiết kế UI 28 Hình 3.1: Tương quan User Business 29 Hình 3.2: Một buổi vấn người dùng (User Interview -1) 31 Hình 3.3: Bản mơ tả dự án Foam Market 32 Hình 3.4: Một vài hình ảnh từ nơng trại đến cửa hàng Foam Market 33 Hình 3.5: Vision Statement Business Goals 34 Hình 3.6: Sơ đồ tương quan việc sử dụng smartphone Việt Nam 35 Hình 3.7: Sơ đồ thu thập giới tính người dùng 39 Hình 3.8: Sơ đồ diễn tả độ tuổi người dùng 39 Hình 3.9: Sơ đồ diễn tả nghề nghiệp người dùng 40 Hình 3.10: Sơ đồ diễn tả tình trạn nhân người dùng 40 Hình 3.11: Sơ đồ diễn tả thói quen mua sắm Cửa hàng thực phẩm 41 Hình 3.12: Sơ đồ diễn tả mặt hàng thường chọn mua 41 Hình 3.13: Sơ đồ diễn tả quan tâm người dùng mua thực phẩm 42 Hình 3.14: Sơ đồ diễn tả mức độ khó khăn người dùng chọn lựa thực đơn hàng ngày 42 Hình 3.15: Sơ đồ diễn tả mức độ quan tâm người dùng tới chức gợi ý thực đơn 43 Hình 3.16: Sơ đồ diễn tả quan tâm người dùng tới ứng dụng Thương mai điện tử khác 43 Hình 3.17: Sơ đồ diễn tả khó khăn người dùng sử dụng ứng dụng Thương mại điện tử 44 Hình 3.18: Kết thu nhận qua trình vấn 48 Hình 4.1: Giai đoạn phân tích – xác định vấn đề 49 Hình 4.2: Biểu đồ mối quan hệ cho việc người dùng chọn mua cửa hàng trực tuyến thay cửa hàng, siêu thị 50 Hình 4.3: Biểu đồ mối quan hệ cho việc người dùng chọn mua cửa hàng, siêu thị thay mua cửa hàng trực tuyến 51 Hình 4.4: Biểu đồ mối quan hệ cho quán trình Giao nhận hàng Tìm kiếm sản phẩm 51 Hình 4.5: Biểu đồ mối quan hệ thói quen nấu ăn người dùng 52 Hình 4.6: Các thành phần mơ hình User Personas 52 Hình 4.7: User Personas thứ 53 Hình 4.8: User Personas thứ hai 55 Hình 4.9: User Stories trình đăng ký/đăng nhập 55 Hình 4.10: User Stories trình chọn sản phẩm cần mua 57 Hình 4.11: User Stories trình mua sản phẩm 58 Hình 4.12: User Stories trình chọn ăn 59 Hình 4.13: User Stories q trình chọn xem thơng tin tài khoản 59 Hình 4.14: Các vấn đề người dùng cách giải 60 Hình 5.1: Giai đoạn Idate – Hình thành ý tưởng 62 Hình 5.2: Storyboard Ux Design 63 Hình 5.3: Storyboard thứ 64 Hình 5.4: Storyboard thứ hai 65 Hình 5.5: Storyboard thứ ba 66 Hình 5.6: Giai đoạn thực Cart Sorting 68 Hình 5.7: Kết trình Cart Sorting 69 Hình 6.20 Wireframes hình Sản phẩm Hình 6.21 Wireframes hình Tìm kiếm 95 Hình 6.22 Wireframes hình Kiểm tra tốn Giỏ hàng Hình 6.23 Wireframes hình Địa giao hàng 96 Hình 6.24 Wireframes hình Thanh tốn Hình 6.25 Wireframes hình Chọn ngày giao hàng 97 UI Guideline: 5.1 UI Guideline ? Guideline hướng dẫn, nguyên tắc để thực theo tiêu chuẩn định hướng chung.Trong thiết kế UI, để thiết kế trải nghiệm tiêu chuẩn quán cho tồn sản phẩm mình, ta cần tn theo vài định luật guideline cần thiết Các guideline UI giải thích thành phần UI hiểu rõ hành vi người dùng cách đưa mẫu ví dụ thực tiễn Những guideline thường định nghĩa cấp độ tổ chức không phần hữu ích cho nhà thiết kế, lập trình viên người thử nghiệm “Guideline ngôn ngữ trực quan để truyền thông mục tiêu thiết kế nhóm, điều quan trọng đảm bảo người hiểu thực việc sử dụng ”- Yuki Gu Một vài tổ chức tiếng quan tâm đến UX xuất guideline riêng trang web họ Điều hữu ích cho công ty cá nhân để tạo ứng dụng plug-ins Ngoài ra, tùy chỉnh sử dụng guideline theo yêu cầu Hình 6.26 Một UI Guideline thường thấy 98 5.2 Phân loại UI Guideline • Style: Các style (kiểu) guideline xác định hình thức thị giác tổ chức mà trình bày Mỗi tổ chức có kiểu guideline riêng mà họ sử dụng để xây dựng logo, màu sắc, icon typography • Layout: Layout guideline nhằm xác định cấu trúc tổng thể giao diện UI thiết kế layout lưới layout danh sách Phần guideline chứa hành vi thiết kế responsive (thiết kế đáp ứng) • Thành phần UI: Những guideline cung cấp thông số kỹ thuật cách sử dụng thành phần UI hiển thị giao diện tương tác người dùng với chúng.Các thành phần UI bao gồm kiểm soát tiêu chuẩn kiểm soát đầu vào, cửa sổ, hộp thoại, bảng, menu, chế độ xem, cuộn, nút nhiều mục tương tự khác • Văn bản: Guideline văn bao gồm tone kiểu văn sử dụng UI Văn phải dễ hiểu văn hóa người xem khác nhau.Thơng số văn kích thước font chữ, màu sắc style phần guideline Văn hiển thị UI dạng trường, nhãn, thư thông tin cho người dùng • Tương tác hành vi: Các loại tương tác (nhấp chuột, cử chỉ, giọng nói) mà người dùng thực với thiết kế, phản hồi hệ thống để đáp trả lại tương tác thuộc guideline • Tài ngun: Guideline có tập hợp tài nguyên sử dụng thiết kế hệ thống.Các tài nguyên chứa layout template cho nhiều thiết bị, icon, thư viện font chữ, thành phần UI bảng màu 99 5.3 Thực hành thiết kế UI Guideline 5.3.1 Color – Chọn màu sắc Hai màu sắc (Primary Colors), chủ đạo lấy trực tiếp từ thương hiệu Foam Market Khơng qn đặt tên cho màu sắc để dể dàng gọi sử dụng sau Thêm tông màu thể sắc độ tơng màu cách: Thêm % màu trắng vào tơng màu Green Garden Sand Hill với % màu trắng sau: 80%, 60%, 40%, 20% Hình 6.27 Hai màu sắc chủ đạo Foam Market Cùng với màu sắc bổ trợ (Secondaty Colors) khác lấy cảm hứng từ màu sắc ln hữu với Foam Market Màu sắc từ gian hàng thực phẩm, từ ánh đèn trang trí màu sắc khn nơng trại Foam Market Hình 6.28 Nguồn cảm hứng màu sắc từ thương hiệu Foam Market 100 Hình 6.29 Các màu sắc bổ trợ Foam Market 101 5.3.2 Typographys Chọn font chữ cho ứng dụng, với phong cách trẻ trung, đại mà Foam Market muốn hướng tới Font chữ mà ta lựa chọn là: SF Pro Display Hình 6.30 SF Pro Display định dạng sử dụng ứng dụng Foam Market 102 5.3.3 Xây dựng UI Component Thiết kế component như: Button, Navigation, Tab bar, Input field,… theo thông số kích thước sau: Hình 6.31 Thành phần thơng số loại button 103 Hình 6.32 Thành phần thông số Input field Dropdown menu 104 Hình 6.33 Thành phần thơng số Navigation Bar 105 Hình 6.34 Một số thành phần khác 106 Hình 6.35 Một số thành phần khác Sau thiết kế thành phần trên, xếp nội dung – hoàn thành giao diện sản phẩm 107 CHƯƠNG 7: TỔNG KẾT VÀ HƯỚNG PHÁT TRIỂN Tổng kết hạn chế: Qua q trình thực phân tích thiết kế cho ứng dụng Foam, phần giải vấn đề doanh nghiệp, đáp ứng nhu cầu cho mắt ứng dụng thương mại doanh nghiệp – đồng thời tìm hiểu xem ứng dụng có phù hợp với người dùng hay không thông qua đánh giá vấn đề người dùng sử dụng ứng dụng thương mại khác thị trường Xây dựng, thiết kế ứng với đầy đủ chức cần thiết, minh họa tốt cho vấn đề lý thuyết trình bày − Giao diện chương trình dễ sử dụng, thuận tiện linh hoạt cho người dùng − Ứng dụng điều học vào q trình thực xây dựng chương trình, qua nắm vững kiến thức lý thuyết bản, phục vụ cho việc thiết kế xây dựng chương trình Do thời gian nghiên cứu hạn chế kinh nghiệm thực tế chưa nhiều nên em chưa hoàn thiện hẳn ứng dụng Vì nên khơng thể tránh khỏi lỗi chương trình Em mong nhận góp ý từ q thầy, để em phát triển hồn thiện chương trình đẩy đủ Hướng phát triển: Với mục đích chương trình ứng dụng thực tế nên tương lai, em phát triển chương trình theo yêu cầu sau: Trau dồi kĩ lập trình để hồn thiện chức mang tính nghiệp vụ Bổ sung chức hiệu chỉnh, thông báo, … để người dùng linh động q trình quản lý, thự sử dụng ứng dụng Đem lại giá trị cho người dùng cho doanh nghiệp 108 TÀI LIỆU THAM KHẢO Từ Marina Yalanska, UX Design for E-Commerce: Principles and Strategies, https://blog.tubikstudio.com/ux-design-for-e-commerceprinciples-and-strategies/, Tubik Studio – 2020 Từ Emily Stevens, What Is User Experience (UX) Design?, https://careerfoundry.com/en/blog/ux-design/what-is-user-experience-uxdesign-everything-you-need-to-know-to-get-started/, CareerFoundary – 2019 Từ Jaye Hannah, What Exactly Is Wireframing? A Comprehensive Guide, https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/, CareerFoundary – 2019 109 ... trình phát triển UX/UI cho ứng dụng Foam Market không nằm ngoại lệ Với quy mô điều kiện cần mà Foam Market muốn hướng tới, em thực theo quy trình sau: Hình 1.12 Quy trình thiết kế UX/UI cho Foam Market. .. nghiệm người dùng ứng dụng Foam Market (UX Design) Phần 2: Thiết kế giao diện cho ứng dụng Foam Market (UI Design) 13 CHƯƠNG TÌM HIỂU VỀ UX DESIGN VÀ UI DESIGN Những hiểu biết UX thiết kế UX UX: Được... niềm đam mê Cơng Nghệ Thơng Tin Và kết là Bảo vệ luận văn – Đồ án tốt nghiệp lần Đề tài với chủ đề: “Phân tích – Thiết kế ứng dụng cửa hàng thực phẩm cho FOAM MARKET? ?? Em xin gửi lời cảm ơn chân