ĐỒ án THIẾT kế sản PHẨM đa PHƯƠNG TIỆN nghiên cứu lý thuyết mô hình thiết kế lấy người dùng làm trung tâm và ứng dụng đề xuất giải pháp thiết kế cải thiện ứng dụng giao hàng tiết kiệm

BỘ THÔNG TIN VÀ TRUYỀN THÔNG HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THƠNG HỌ VÀTÊNSINHVIÊN - Vũ Phương Anh ĐỒ ÁN THIẾT KẾ SẢN PHẨM ĐA PHƯƠNG TIỆN Đề tài: “Nghiên cứu lý thuyết Mơ hình Thiết kế lấy người dùng làm trung tâm ứng dụng đề xuất giải pháp thiết kế cải thiện ứng dụng Giao Hàng Tiết Kiệm” LỚP D18TKDPT3 Người hướng dẫn : Th.S Nguyễn Thị Tuyết Mai Sinh viên thực hiện: Vũ Phương Anh Lớp: D18TKDPT3 Hệ: ĐHCQ HÀ NỘI - 2022 BỘ THÔNG TIN VÀ TRUYỀN THƠNG HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG - ĐỒ ÁN THIẾT KẾ SẢN PHẨM ĐA PHƯƠNG TIỆN Đề tài: “Nghiên cứu lý thuyết Mơ hình Thiết kế lấy người dùng làm trung tâm ứng dụng đề xuất giải pháp thiết kế cải thiện ứng dụng Giao Hàng Tiết Kiệm” Người hướng dẫn: Th.S Nguyễn Thị Tuyết Mai Sinh viên thực hiện: Vũ Phương Anh Lớp: D18TKDPT3 Hệ: ĐHCQ LỜI CẢM ƠN Lời đầu tiên, em xin gửi lời cảm ơn chân thành tri ân sâu sắc thầy cô trường Học viện Công nghệ Bưu viễn thơng, đặc biệt thầy cô khoa Công nghệ Đa phương tiện trường quản lý, tổ chức hiệu quả, tạo điều kiện cho em có hội học mơn Thực hành chun sâu Em xin chân thành cảm ơn cô Nguyễn Thị Tuyết Mai hướng dẫn, bảo để em hồn thành tốt mơn Trong suốt q trình hồn thiện mơn, q trình làm báo cáo, khó tránh khỏi sai sót, mong thầy, cô bỏ qua Đồng thời, với kinh nghiệm kiến thức hạn chế, em mong nhận ý kiến, đóng góp từ thầy để báo cáo em hoàn thiện Em xin chân thành cảm ơn! Hà nội, ngày 13 tháng 06 năm 2022 Sinh viên Vũ Phương Anh Thực hành chuyên sâu MỤC LỤC MỤC LỤC MỤC LỤC i DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT iii DANH MỤC CÁC BẢNG .iv DANH MỤC CÁC HÌNH VẼ v PHẦN MỞ ĐẦU CHƯƠNG I CƠ SỞ LÝ THUYẾT CỦA ĐỀ TÀI 1.1 VỀ ỨNG DỤNG DI ĐỘNG (MOBILE APP) 1.1.1 Khái niệm ứng dụng di động 1.1.2 Lợi ích việc xây dựng ứng dụng di động 1.1.3 Phân loại ứng dụng di động 1.1.4 Vai trò ứng dụng di động lĩnh vực Logistic - vận chuyển hàng hoá .10 1.2 VỀ THIẾT KẾ TRẢI NGHIỆM NGƯỜI DÙNG/GIAO DIỆN NGƯỜI DÙNG UX/UI 11 1.2.1 Tổng quan thiết kế Trải nghiệm người dùng/Giao diện người dùng - UX/UI 11 1.2.2 Thu thập liệu người dùng thiết kế Trải nghiệm người dùng/Giao diện người dùng - UX/UI 12 1.2.3 Đánh giá thiết kế Trải nghiệm người dùng - UX dựa mơ hình Tổ ong Trải nghiệm người dùng (User Experience Honeycomb) 13 1.2.4 Vai trò thiết kế UX/UI thiết kế ứng dụng di động 14 1.3 Về mơ hình thiết kế lấy người dùng làm trung tâm - UCDC 16 1.3.1 Về thiết kế lấy người dùng làm trung tâm (UCD - User-centered Design) 16 1.3.2 Về mơ hình thiết kế lấy người dùng làm trung tâm (UCDC) .19 CHƯƠNG II ÁP DỤNG MƠ HÌNH MƠ HÌNH THIẾT KẾ LẤY NGƯỜI DÙNG LÀM TRUNG TÂM PHÂN TÍCH ỨNG DỤNG GIAO HÀNG TIẾT KIỆM 22 2.1 VỀ ỨNG DỤNG GIAO HÀNG TIẾT KIỆM .22 2.1.1 Tổng quan ứng dụng Giao hàng tiết kiệm 22 2.1.2 Phân tích ứng dụng Giao hàng tiết kiệm 22 2.1.3 Đánh giá ứng dụng Giao hàng tiết kiệm .27 2.2 ÁP DỤNG MƠ HÌNH THIẾT KẾ LẤY NGƯỜI DÙNG LÀM TRUNG TÂM PHÂN TÍCH ỨNG DỤNG GIAO HÀNG TIẾT KIỆM 32 Vũ Phương Anh – D18TKDPT3 i Thực hành chuyên sâu MỤC LỤC 2.2.1 Doanh nghiệp (Business) 32 2.2.2 Người dùng (Users) 33 2.2.3 Vấn đề người dùng (Problems) 34 2.2.4 Lo lắng người dùng (Fears) 39 2.2.5 Động người dùng (Motives) 39 2.2.6 Giải pháp (Solutions) 39 2.2.7 Giải pháp thay (Alternatives) 41 2.2.8 Lợi cạnh tranh (Competitive advantages) .42 2.2.9 Đề xuất giá trị (Unique Value Proposition) 42 CHƯƠNG III ĐỀ XUẤT GIẢI PHÁP THIẾT KẾ CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM 43 3.1 TỔNG QUAN GIẢI PHÁP CẢI THIỆN 43 3.2 THỰC HIỆN CẢI THIỆN ỨNG DỤNG GIAO HÀNG TIẾT KIỆM 44 3.2.1 Sơ đồ chức ứng dụng Giao hàng tiết kiệm .44 3.2.2 Phác thảo giao diện ứng dụng Giao hàng tiết kiệm 44 3.2.3 Quy chuẩn thiết kế (Design Guildeline) ứng dụng Giao hàng tiết kiệm 49 3.2.4 Thiết kế giao diện ứng dụng Giao hàng tiết kiệm 52 KẾT LUẬN .61 DANH MỤC TÀI LIỆU THAM KHẢO 62 Vũ Phương Anh – D18TKDPT3 ii Thực hành chuyên sâu DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT DANH MỤC CÁC KÝ HIỆU VÀ CHỮ VIẾT TẮT CSS Cascading Style Sheets GHTK HTML Giao hàng tiết kiệm Hypertext Markup Language Near-field communication NFC UCD UCDC UI UX Vũ Phương Anh – D18TKDPT3 User Centered Design User Centered Design Canvas User Interface User Experience iii Thực hành chuyên sâu DANH MỤC CÁC BẢNG DANH MỤC CÁC BẢNG Chương Bảng 1 Mơ tả thành tố mơ hình Mơ hìn Chương Bảng Thống kê đánh giá khách hàng t IOS Bảng 2 Đánh giá ứng dụng Giao Hàng Tiết K người dùng Bảng 3Điểm mạnh điểm yếu ứng dụng G Bảng 4Giải pháp dựa Mơ hình Thiết kế Chương Bảng 1Phương án cải thiện ứng dụng Giao h nghiệm người dùng (UX) giao diện người dùng (UI) Vũ Phương Anh – D18TKDPT3 iv Thực hành chuyên sâu DANH MỤC CÁC HÌNH VẼ DANH MỤC CÁC HÌNH VẼ Chương Hình 1 yếu tố mơ hình Tổ ong Trải nghiệm người dùng (User Experience Honeycomb 13 Hình Quá trình thiết kế lấy người dùng làm trung tâm 18 Hình Cấu trúc phần Mơ hình Thiết kế lấy người dùng làm trung tâm .20 Hình thành tố mơ hình Mơ hình Thiết kế lấy người dùng làm trung tâm 20 Chương Hình Sơ đồ chức ứng dụng GHTK 23 Hình 2 Trang Tổng quan ứng dụng GHTK 23 Hình Trang Chats ứng dụng GHTK 24 Hình Trang Đơn hàng ứng dụng GHTK 24 Hình Trang Kho & Sản phẩm ứng dụng GHTK .25 Hình Trang Dịng tiền (Quản lí dịng tiền) ứng dụng GHTK 26 Hình Trang Tài khoản ứng dụng GHTK 26 Hình Thống kê ứng dụng giao hàng sử dụng 27 Hình Thống kê nhu cầu sử dụng ứng dụng Giao hàng tiết kiệm 28 Hình 10 Đánh giá tính thuận tiện ứng dụng Giao hàng tiết kiệm 28 Hình 11 Đánh giá tính dễ dùng ứng dụng Giao hàng tiết kiệm 29 Hình 12 Đánh giá tính giao diện ứng dụng Giao hàng tiết kiệm 29 Hình 13 Ứng dụng GHTK có mặt tảng Android IOS 30 Hình 14 Persona - Người dùng kinh doanh online (ứng dụng Giao hàng tiết kiệm) 33 Hình 15 Mơ tả vấn đề liên quan đến nhập liệu (1) .34 Hình 16 Mơ tả vấn đề liên quan đến nhập liệu (2) .34 Hình 17 Mơ tả vấn đề liên quan đến nhập liệu (3) .35 Hình 18 Khách hàng phải hồi việc ứng dụng bị lỗi (1) 35 Hình 19 Khách hàng phải hồi việc ứng dụng bị lỗi (2) 35 Hình 20 Khách hàng phải hồi việc ứng dụng bị lỗi (3) 35 Hình 21 Khách hàng phản hồi việc ứng dụng khơng uy tín (1) 36 Hình 22 Khách hàng phản hồi việc ứng dụng khơng uy tín (2) 36 Hình 23 Mô tả vấn đề liên quan đến việc xếp thông tin đơn hàng (1) 36 Hình 24 Mơ tả vấn đề liên quan đến việc xếp thông tin đơn hàng (2) (phần trạng thái đơn hàng không hiển thị screen đầu mà phải kéo xuống xem được) 37 Hình 25 Mơ tả vấn đề liên quan đến việc xếp thông tin đơn hàng (3) 37 Hình 26 Mơ tả vấn đề liên quan đến chức năng/giao diện ứng dụng (1) 38 Hình 27 Mơ tả vấn đề liên quan đến chức năng/giao diện ứng dụng (2) 38 Hình 28 Phần thơng báo trang Chats (trái) trang Đơn hàng (phải) khác cập nhật trạng thái đơn 39 Chương Vũ Phương Anh – D18TKDPT3 v Thực hành chun sâu DANH MỤC CÁC HÌNH VẼ Hình Sơ đồ chức cải thiện ứng dụng Giao hàng tiết kiệm 44 Hình Phác thảo trang chủ 45 Hình 3 Phác thảo trang đăng nhập đăng ký 45 Hình Phác thảo trang đơn hàng .46 Hình Phác thảo trang thông báo 46 Hình Phác thảo trang danh bạ khách hàng kho hàng 46 Hình Phác thảo trang tạo đơn hàng 47 Hình Phác thảo trang sản phẩm 47 Hình Phác thảo trang dòng tiền .48 Hình 10 Phác thảo trang tra cứu thông tin 48 Hình 11 Phác thảo trang thông tin tài khoản 49 Hình 12 Phác thảo trang chats 49 Hình 13 Quy chuẩn thiết kế - Chữ .50 Hình 14 Quy chuẩn thiết kế - Màu sắc – Thiết kế - Biểu tượng 51 Hình 15 Quy chuẩn thiết kế - Tab 51 Hình 16 Giao diện Trang chủ, Trang đơn hàng, Trang thông báo, Trang tài khoản (từ trái sang phải) .52 Hình 17 Giao diện đăng nhập quên mật .52 Hình 18 Giao diện đăng ký 53 Hình 19 Giao diện trang đơn hàng .53 Hình 20 Giao diện trang tạo đơn hàng 54 Hình 21 Giao diện trang thơng báo 54 Hình 22 Giao diện trang Sổ địa - Danh bạ khách hàng 55 Hình 23 Giao diện Thêm/Sửa/Xố khách hàng 55 Hình 24 Giao diện trang Sổ địa - Kho hàng 56 Hình 25 Giao diện Thêm/Sửa/Xố kho hàng .56 Hình 26 Giao diện trang sản phẩm 57 Hình 27 Giao diện Thêm/Sửa/Xoá sản phẩm 57 Hình 28 Giao diện Tiền&đối soát 58 Hình 29 Giao diện tra cứu thông tin bưu cục .58 Hình 30 Giao diện tra cứu thơng tin (tính trước) cước phí 59 Hình 31 Giao diện trang thông tin tài khoản 59 Hình 32 Giao diện trang Chats 60 Vũ Phương Anh – D18TKDPT3 vi Thực hành chun sâu Hình 11 Phác thảo trang thơng tin tài khoản 3.2.2.10 Chats Hình 12 Phác thảo trang chats 3.2.3 Quy chuẩn thiết kế (Design Guildeline) ứng dụng Giao hàng tiết kiệm Vũ Phương Anh – D18TKDPT3 Thực hành chuyên sâu Hình 13 Quy chuẩn thiết kế - Chữ Vũ Phương Anh – D18TKDPT3 Thực hành chuyên sâu Hình 14 Quy chuẩn thiết kế - Màu sắc – Thiết kế - Biểu tượng Hình 15 Quy chuẩn thiết kế - Tab Vũ Phương Anh – D18TKDPT3 Thực hành chuyên sâu 3.2.4 Thiết kế giao diện ứng dụng Giao hàng tiết kiệm 3.2.4.1 Trang chủ Hình 16 Giao diện Trang chủ, Trang đơn hàng, Trang thông báo, Trang tài khoản (từ trái sang phải) 3.2.4.2 Đăng nhập đăng ký Giao diện đăng nhập quên mật Hình 17 Giao diện đăng nhập quên mật Giao diện đăng ký Vũ Phương Anh – D18TKDPT3 Thực hành chuyên sâu Hình 18 Giao diện đăng ký 3.2.4.3 Đơn hàng Trang đơn hàng Hình 19 Giao diện trang đơn hàng Vũ Phương Anh – D18TKDPT3 Thực hành chuyên sâu Tạo đơn hàng Hình 20 Giao diện trang tạo đơn hàng 3.2.4.4 Thơng báo Hình 21 Giao diện trang thông báo Vũ Phương Anh – D18TKDPT3 Thực hành chuyên sâu 3.2.4.4 Danh bạ khách hàng, kho hàng Danh bạ khách hàng Hình 22 Giao diện trang Sổ địa - Danh bạ khách hàng Thêm/sửa/xố khách hàng Hình 23 Giao diện Thêm/Sửa/Xoá khách hàng Vũ Phương Anh – D18TKDPT3 Thực hành chuyên sâu Kho hàng Hình 24 Giao diện trang Sổ địa - Kho hàng Thêm/sửa/xố kho hàng Hình 25 Giao diện Thêm/Sửa/Xố kho hàng Vũ Phương Anh – D18TKDPT3 Thực hành chuyên sâu 3.2.4.6 Sản phẩm Danh mục sản phẩm Hình 26 Giao diện trang sản phẩm Thêm/sửa/xố sản phẩm Hình 27 Giao diện Thêm/Sửa/Xoá sản phẩm Vũ Phương Anh – D18TKDPT3 Thực hành chuyên sâu 3.2.4.7 Tiền & đối soát Hình 28 Giao diện Tiền&đối sốt 3.2.4.8 Tra cứu thơng tin bưu cục cước phí Tra cứu thơng tin bưu cục Hình 29 Giao diện tra cứu thông tin bưu cục Vũ Phương Anh – D18TKDPT3 Thực hành chun sâu Tra cứu thơng tin cước phí Hình 30 Giao diện tra cứu thơng tin (tính trước) cước phí 3.2.4.9 Thơng tin tài khoản Hình 31 Giao diện trang thông tin tài khoản Vũ Phương Anh – D18TKDPT3 Thực hành chuyên sâu 3.2.4.11 Chats Hình 32 Giao diện trang Chats Vũ Phương Anh – D18TKDPT3 Thực hành chuyên sâu KÊT LUẬN KẾT LUẬN Trong thời đại số, bước giúp sản phẩm doanh nghiệp đứng vững cạnh tranh với đối thủ khác thị trường trọng vào trải nghiệm người dùng (UX) Mơ hình Thiết kế lấy người dùng làm trung tâm (UCDC) hỗ trợ nhà thiết kế nghiên cứu, nắm bắt, thu thập thông tin để hiểu người dùng cách tồn diện nhất, từ đưa thiết kế đáp ứng mong muốn hay khắc phục vấn đề người dùng Trên sở tài liệu có sẵn, đề tài tổng hợp sở lý thuyết Thiết kế UX/UI nói chung Mơ hình Thiết kế lấy người dùng làm trung tâm nói riêng Mơ hình Thiết kế lấy người dùng trung tâm sinh với mục đích quan trọng giúp nhà thiết kế hiểu người dùng Tuy địi hỏi nhà thiết kế phải nắm kiến thức UX/UI, cập nhật xu xã hội để đưa đánh giá cách xác Bên cạnh đó, đề tài đưa ví dụ cách ứng dụng Mơ hình Thiết kế lấy người dùng làm trung tâm thông qua việc đề xuất giải pháp thiết kế cải thiện ứng dụng Giao hàng tiết kiệm Vũ Phương Anh – D18TKDPT3 Thực hành chuyên sâu DANH MỤC TÀI LIỆU THAM KHẢO DANH MỤC TÀI LIỆU THAM KHẢO Tiếng Việt AppROI App Marketing Có Bao Nhiêu Loại Ứng Dụng Di Động Trên Thị Trường Hiện Nay? https://www.brandsvietnam.com/congdong/topic/28045-Co-Bao-NhieuLoai-Ung-Dung-Di-Dong-Tren-Thi-Truong-Hien-Nay (2020) Bùi Thị Thuỳ Dương Xây dựng ứng dụng di động để cung cấp dịch vụ thông tin số Thư viện Đại học Tạp chí Thơng tin Tư liệu, Số 6(2020), 21-29 (2020) Đỗ Trung Tuấn Giáo trình Thiết kế tương tác đa phương tiện Học viện Cơng nghệ Bưu Viễn thơng (2014) Nguyễn Đức Việt “Bàn quy trình thiết kế UI UX qua project thực tế”, https://rgb.vn/ban-ve-quy-trinh-thiet-ke-ui-ux-qua-mot-project-thuc-te/ Trần Quốc Trung.“Giải pháp thiết kế trải nghiệm người dùng dựa mơ hình UCDC cho ứng dụng y tế điện tử E-Doctor” Tạp chí Khoa học Cơng nghệ Thơng tin Truyền thông 04b, tr 102-103 (2020) UX/UI tầm quan trọng trải nghiệm khách hàng https://digital.fpt.com.vn/linh-vuc/ux-ui-va-tam-quan-trong-trong-trai-nghiem-khachhang.html (2021) Tiếng Anh Ajay Mishra, Jai Krishna, Sachin Kumar Mobile Apps For Libraries And Library Services, International journal of information Libraries & Society, Volume 6, Issue 1, p 27-32 (2017) Ben Obear 10 keys principles of User Centered Design https://www.cognitiveclouds.com/insights/key-principles-of-usercentered-design/ (2017) 10 Don Norman User Centered System Design 11 Facebook Business Southeast Asia, The Home For Digital Transformation (2021) 12 Leszek Zawadzki, Alina Prelicz-Zawadzka User centered design canvas https://ucdc.therectangles.com/ (2016) 13 Leszek Zawadzki, Alina Prelicz-Zawadzka Introducing the User-Centered Design Canvas https://uxmag.com/articles/introducing-the-user-centereddesign-canvas (2016) Vũ Phương Anh – D18TKDPT3 Thực hành chuyên sâu DANH MỤC TÀI LIỆU THAM KHẢO 14 Irwan Kautsar, M Ruslianor Maika The use of User-centered Design Canvas for Rapid Prototyping Muhammadiyah University Of Sidoarjo First Campus (2021) 15 Zhu, W.Marquez, A., &Yoo, J Engineering economics jeopardy! Mobile eco for university students, The Engineering Economist, 60, 291-306 (2015) 16 User Centered Design https://www.interaction-design.org/literature/topics/user- centered-design#:~:text=User%2Dcentered%20design%20(UCD),and%20accessible %20produ cts%20for%20them 17 The UX Honeycomb – How to Analyze the UX of Your Website https://www.energyhousedigital.co.uk/news/design-ux-ui/the-ux-honeycomb-how-toanalyse-the-ux-of-your-website/ (2020) Danh mục Website tham khảo 18 https://www.theguardian.com/ Vũ Phương Anh – D18TKDPT3 ... cứu lý thuyết Mơ hình Thiết kế lấy người dùng làm trung tâm ứng dụng đề xuất giải pháp thiết kế cải thiện ứng dụng Giao Hàng Tiết Kiệm? ?? tập trung vào hai phương pháp Lập bảng câu hỏi Nghiên cứu. .. ÁP DỤNG MƠ HÌNH MƠ HÌNH THIẾT KẾ LẤY NGƯỜI DÙNG LÀM TRUNG TÂM PHÂN TÍCH ỨNG DỤNG GIAO HÀNG TIẾT KIỆM 2.1 VỀ ỨNG DỤNG GIAO HÀNG TIẾT KIỆM 2.1.1 Tổng quan ứng dụng Giao hàng tiết kiệm Ứng dụng Giao. .. ĐẦU Tên đề tài ? ?Nghiên cứu lý thuyết Mơ hình Thiết kế lấy người dùng làm trung tâm ứng dụng đề xuất giải pháp thiết kế cải thiện ứng dụng Giao Hàng Tiết Kiệm? ?? Lý chọn đề tài Đại dịch COVID-19