THIẾT kế GIAO DIỆN ỨNG DỤNG GOGI HOUSE

1 23 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG CAO ĐẲNG KINH TẾ CÔNG NGHỆ TP HỒ CHÍ MINH BÁO CÁO ĐỒ ÁN THỰC TẬP TỐT NGHIỆP ĐỀ TÀI THIẾT KẾ GIAO DIỆN ỨNG DỤNG GOGI HOUSE Giảng viên hướng dẫn ThS Sinh viên thực hiện Lớp Chuyên ngành Công nghệ phần mềm TP Hồ Chí Minh, tháng 6 năm 2019 LỜI CẢM ƠN Trước tiên em xin gửi lời cảm ơn chân thành sâu sắc tới các thầy cô giáo trong trường Cao Đẳng Kinh Tế Công Nghệ Thành Phố Hồ Chí Minh nói chung va các thầy cô giáo trong khoa Kỹ Thuật – Công Nghệ nói riêng đã tận tình.

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG CAO ĐẲNG KINH TẾ - CƠNG NGHỆ TP HỒ CHÍ MINH BÁO CÁO ĐỒ ÁN THỰC TẬP TỐT NGHIỆP ĐỀ TÀI: THIẾT KẾ GIAO DIỆN ỨNG DỤNG GOGI HOUSE Giảng viên hướng dẫn: ThS Sinh viên thực hiện: Lớp: Chuyên ngành: Công nghệ phần mềm TP Hồ Chí Minh, tháng năm 2019 LỜI CẢM ƠN  Trước tiên em xin gửi lời cảm ơn chân thành sâu sắc tới thầy cô giáo trường Cao Đẳng Kinh Tế Công Nghệ Thành Phố Hồ Chí Minh nói chung va thầy giáo khoa Kỹ Thuật – Cơng Nghệ nói riêng tận tình giảng dạy, truyền đạt cho em kiến thức, kinh nghiệm quý báu suốt thời gian qua Đặc biệt em xin gửi lời cảm ơn đến thầy Nguyễn Anh Vũ, thầy tận tình giúp đỡ, trực tiếp bảo, hướng dẫn em suốt trình học làm đồ án Trong thời gian học với thầy, em không ngừng tiếp thu thêm nhiều kiến thức bổ ích mà cịn học tập tinh thần làm việc, thái độ nghiêm túc tính tỉ mỉ thầy Đó lã điều cần thiết người sinh viên em cần phải học hỏi noi theo Sau nhóm em xin gửi lời cảm ơn chân thành tới gia đình, bạn bè động viên, đóng góp ý kiến giúp đỡ q trình học tập, nghiên cứu hồn thồn thành đồ án môn học GVHD: Mục Lục GVHD: LỜI MỞ ĐẦU  Lý chọn đề tài: Ngày việc tạo nên sản phẩm ứng dụng số phục vụ cho người dùng ko q khó so với trước kia, để cạnh tranh với dịch vụ/ sản phẩm khác thị trường trải nghiệm người dùng yếu tố định thành công lôi kéo người dùng sử dụng dịch vụ/ sản phẩm Với tiến công nghệ kỷ 21, người muốn trải nghiệm công nghệ tốt mà không tốn nhiều thời gian sức lực, việc cần làm nhanh hơn, hiệu điều ngoại lệ sử dụng ứng dụng/sản phẩm CNTT Và nói đến hài lòng người dùng ứng dụng, hầu hết công ty công nghệ hướng tới Giao diện người dùng (UI) ứng dụng Thiết kế trải nghiệm người dùng (UX) GVHD: TRƯỜNG CAO ĐẲNG KT-CN TP.HCM KHOA CÔNG NGHỆ THÔNG TIN - - CÔNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM ĐỘC LẬP – TỰ DO – HẠNH PHÚC - NHẬN XÉT ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN ĐỀ TÀI: THIẾT KẾ GIAO DIỆN PHẦM MỀM ỨNG DỤNG GOGI HOUSE Sinh viên: MSSV: Lớp: Chuyên ngành: Công Nghệ Phần Mềm Nhận xét giáo viên hướng dẫn: Điểm: (Bằng chữ số): TP.HCM, ngày tháng năm 2019 Giáo viên (Ký ghi rõ họ tên) GVHD: TRƯỜNG CAO ĐẲNG KT-CN TP.HCM KHOA CÔNG NGHỆ THÔNG TIN - - CƠNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM ĐỘC LẬP – TỰ DO – HẠNH PHÚC - NHẬN XÉT ĐÁNH GIÁ CỦA GIẢNG VIÊN PHẢN BIỆN ĐỀ TÀI: THIẾT KẾ GIAO DIỆN PHẦN MỀM ỨNG DỤNG GOGI HOUSE Sinh viên: MSSV: Lớp: Chuyên ngành: Công Nghệ Phần Mềm Nhận xét giáo viên hướng dẫn: Điểm: (Bằng chữ số): TP.HCM, ngày tháng năm 2019 Giáo viên (Ký ghi rõ họ tên) CHƯƠNG 1: ĐÔI NÉT VỀ THIẾT KẾ UX - UI UX UI gì? UI/UX khái niệm bạn gặp nhiều tìm hiểu lĩnh vực thiết kế website, viết web chuyên nghiệp Trong đó, “UI” cụm từ đại diện cho thiết kế website “Giao diện người dùng” “UX” hiểu “Trải nghiệm người dùng” GVHD: Hai khái niệm đôi song hành nhau, trở thành tiêu chuẩn quan trọng để đánh giá website 1.1 Tìm hiểu UI: UI Design viết tắt User Interface Design – Tức thiết kế giao diện người dùng Thiết kế giao diện người dùng Khái niệm Giao diện người dùng liên quan đến tính tương tác nhiều Thiết kế UI tập trung vào cách mà sản phẩm trình diễn cho người dùng nút Like, share nên nằm bên trái hay bên phải viết, icon kêu gọi hành động Landing Page nên chọn màu gì, nằm bên hay bên dưới, nút Nagivation nên chọn hai gạch hai ba gạch, gạch ngang hay gạch đứng,… nên dùng hình đại diện hay đường link Nhấp vào hình trịn đâu, nhấp vào hình vng đâu,… Nhưng dù nào, thiết kế phải đảm bảo tính đồng xuyên suốt ứng dụng website để người dùng không bị lấn cấn sử dụng 1.1.1 Quy trình thiết kế Giao diện người dùng: Thiết kế giao diện người dùng quy trình lặp lại bao gồm cộng tác người sử dụng người thiết kế Trong quy trình gồm hoạt động bản: GVHD: - Phân tích người sử dụng: tìm hiểu người sử dụng làm với hệ thống - Lập mẫu thử hệ thống: xây dựng tập mẫu thử để thử nghiệm - Đánh giá giao diện: thử nghiệm mẫu thử với người sử dụng Quy trình thiết kế Giao diện người dùng Mục tiêu: • - Hiểu quy trình thiết kế giao diện người dùng - Nắm chi tiết hoạt động quy trình thiết kế giao diện người dùng - Với hoạt động, có nhiều cách để thực Do đó, phải có khả lựa chọn phương pháp thích hợp cho hồn cảnh cụ thể • Phân tích người sử dụng: Nếu ta khơng hiểu rõ người sử dụng muốn làm với hệ thống, ta khơng thể thiết kế giao diện hiệu Phân tích người sử dụng phải mơ tả theo thuật ngữ để người sử dụng người thiết kế khác hiểu GVHD: Các ngữ cảnh mà ta mơ tả thao tác trong cách mơ tả phân tích người dùng Ta lấy nhiều yêu cầu người sử dụng từ Các kỹ thuật phân tích: - Phân tích nhiệm vụ: mơ hình hố bước cần thực để hoàn thành nhiệm vụ - Phân tích nhiệm vụ phân cấp - Phỏng vấn trắc nghiệm: hỏi người sử dụng mà họ làm Khi vấn, nên dựa câu hỏi có kết thúc mở Sau đó, người sử dụng cung cấp thông tin mà họ nghĩ cần thiết; khơng phải tất thơng tin sử dụng Ngồi ra, thực vấn với nhóm người sử dụng, điều cho phép người sử dụng thảo luận với họ làm - Mơ tả: quan sát người sử dụng làm việc hỏi họ cách mà khơng biết tới Nên nhớ có nhiều nhiệm vụ người sử dụng thuộc trực giác khó để mơ tả giải thích chúng Dựa kỹ thuật ta hiểu thêm ảnh hưởng xã hội tổ chức tác động tới cơng việc • Lập mẫu thử giao diện người dùng: - Mẫu thử cho phép người sử dụng có kinh nghiệm trực tiếp với giao diện Nếu khơng có kinh nghiệm trực tiếp khơng thể đánh giá khả sử dụng giao diện - Lập mẫu thử quy trình gồm trạng thái: - Lập mẫu thử giấy GVHD: 10 - Tinh chỉnh mẫu thử xây dựng chúng Các kỹ thuật lập mẫu thử: - Mẫu thử hướng nguyên mẫu: sử dụng công cụ Macromedia Director để xây dựng tập hợp nguyên mẫu hình Khi người sử dụng tương tác với chúng hình thay đổi để hiển thị trạng thái - Lập trình trực quan: sử dụng ngơn ngữ thiết kế cho việc phát triển nhanh Visual Basic - Mẫu thử dựa Internet: sử dụng web browser script Đánh giá giao diện người dùng: • Ta nên đánh giá thiết kế giao diện người dùng để xác định khả phù hợp Tuy nhiên, việc đánh giá phạm vi rộng tốn nhiều chi phí thực hầu hết hệ thống Các kỹ thuật đánh giá đơn giản: - Trắc nghiệm lại phản hồi người sử dụng - Ghi lại trình sử dụng mẫu thử hệ thống đánh giá - Lựa chọn thông tin việc sử dụng dễ dàng lỗi người sử dụng - Cung cấp mã lệnh phần mềm để thu thập phản hồi người sử dụng cách trực tuyến 1.2 Tìm hiểu UX: UX Design viết tắt User Experience Design – Là thiết kế tối ưu trải nghiệm người dùng hay ( tối ưu user experience ) GVHD: 21 GVHD: 22 Giới thiệu ứng dụng GoGi House hướng dẫn sử dụng: 2.1 Hướng dẫn đăng nhập: Giao diện mở App GVHD: 23 Sử dụng số điện thoại để đăng nhập Bạn nhận mã OTP qua tin nhắn SMS tới số điện thoại GVHD: 24 GVHD: 25 GVHD: 26 Nhập mã OTP vào ứng dụng Nếu nhập sai OTP lần, bạn cần chờ 10 phút để tiếp tục nhận mã OTP Trường hợp không nhận mã OTP, bạn chọn vào “Gửi lại mã” để nhận mã OTP khác Mỗi mã OTP có hiệu lực 10 phút GVHD: 27 2.1.2 Trang chủ: GVHD: 28 • Sử dụng tìm kiếm: Tìm nhà hàng theo khu vực VD: TP.HCM, Hà Nội, Đà Nẵng, Tìm theo tên nhà hàng VD: GoGi House Emart Phan Văn Trị, Gogi House Giga Mall, Đặt bàn: Khi chọn vào “Đặt bàn” hiển thị giao diện sau: GVHD: 29 Tiếp theo chọn địa điểm, có số điện thoại liên hệ đường Xem thực đơn: Khi chọn vào “Xem thực đơn” hiển thị giao diện sau: 2.1.3 2.1.3 Quét mã QR để tốn tích điểm: Khi nhấn vào biểu tượng “Qt QR”sẽ hiển thị vùng quét mã để nhận mã có “PHIẾU KIỂM ĐỒ” từ ứng dụng dành cho doanh nghiệp GVHD: 30 Tiến hành “Thanh toán” scan code để tích điểm vào “Ví điện tử cá nhân” Mỗi lần sử dụng Scan Code bạn tích 5% điểm tổng giá trị hóa đơn GVHD: 31 2.1.4 Ví điện tử: Khi tích đủ số điểm cần đạt, bạn nhận Voucher giảm giá có mức giá tương đương 50.000 tăng theo bội số 50.000 giảm giá toán GVHD: 32 2.1.5 Trang cá nhân: GVHD: 33 Chọn “ Thông tin tài khoản” để điền thông tin xác thực vào mẫu sau: GVHD: 34 CHƯƠNG 3: TỔNG KẾT Đánh giá: 1.1 Ưu điểm: Giúp doanh nghiệp có thêm nhiều khách hàng mới, đối tác Giúp khách hàng nhanh chóng nhận chương trình ưu đãi nơi đâu cần thông qua ứng dụng Gogi House Khách hàng lựa chọn nhà hàng đặt bàn tìm đường đến nhà hàng mong muốn nhanh chóng tiện lợi Giúp doanh nghiệp nhanh chóng đáp ứng nhu cầu cho khách hàng nhanh chóng thơng qua việc order máy thay giấy bút Tiết kiệm thời gian cho khách hàng lẫn doanh nghiệp Có tính xác thực cao đăng nhập số di động 1.2 Nhược điểm: Chưa liên kết với trang mạng xã hội phổ biến Facebook, Zalo, Không thể sử dụng Offline GVHD: 35 TÀI LIỆU THAM KHẢO [1] https://vi.wikipedia.org/ ( ngày truy cập 26/03/2019) [2] https://itcntt.com/threads/huong-dan-cai-dat-adobe-muse-cc-2018-full.1458/ (ngày truy cập 27/03/2019) [3] https://www.vietiso.com/blog/15-cong-cu-prototype-hang-dau-danh-cho-ui- va-ux-designer.html ( ngày truy cập 28/03/2019) [4] https://icongnghe.com/download-adobe-xd-cc-2019-full/ ( ngày truy cập 29/03/2019) [5] https://www.google.com (ngày truy cập 30/03/2019) [6] http://www.uplevo.com/designbox/ ( ngày truy cập 01/04/2019) GVHD: ... thiết kế UI (Giao diện người dùng): UI lĩnh vực thiết kế gọi truyền tải thông điệp từ nhà thiết kế – nhà cung cấp dịch vụ (sản phẩm) tới người sử dụng Trong thiết kế web, thiết kế UI trình nhà thiết. .. dùng không bị lấn cấn sử dụng 1.1.1 Quy trình thiết kế Giao diện người dùng: Thiết kế giao diện người dùng quy trình lặp lại bao gồm cộng tác người sử dụng người thiết kế Trong quy trình gồm hoạt... tắt User Interface Design – Tức thiết kế giao diện người dùng Thiết kế giao diện người dùng Khái niệm Giao diện người dùng liên quan đến tính tương tác nhiều Thiết kế UI tập trung vào cách mà sản