›

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

pdf 110 trang thiennha21 14/04/2022 4990
Download
Bạn đang xem 20 trang mẫu của tài liệu "Đồ án Phát triển và thiết kế ứng dụng cửa hàng thực phẩm cho Foam Market", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfdo_an_phat_trien_va_thiet_ke_ung_dung_cua_hang_thuc_pham_cho.pdf

Nội dung text: Đồ án Phát triển và thiết kế ứng dụng cửa hàng thực phẩm cho Foam Market

  1. 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 và 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 \
  2. LỜI CÁM ƠN Trước hết, em xin bày tỏ tình cảm và lòng biết ơn của em tới tất cả các giảng viên của 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ừ những kinh nghiệm thực tế của người đi trước dành cho người đi sau cho thế hệ sinh viên DH16LT chúng em. Đặc biệt là các thầy, các cô của khoa Công Nghệ Thông Tin – Điện – Điện Tử. Nhờ có sự giúp đỡ của các thầy, các cô đã giúp em tìm thấy niềm đam mê và được trãi mình trong niềm đam mê về Công Nghệ Thông Tin của mình. Và kết quả là là bài Bảo vệ luận văn – Đồ án tốt nghiệp lần này. Đề 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 của 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, chỉ bảo em trong suốt quá trình làm khoá luận. Với điều kiện về thời gian cũng như kinh nghiệm còn hạn chế của một học viên, đề án này không thể tránh được những thiếu sót. Rất mong nhận được sự chỉ bảo, đóng góp ý kiến của các thầy, các cô để em có điều kiện bổ sung, nâng cao ý thức của mình, phục vụ tốt hơn công tác thực tế sau này. Vũng Tàu, ngày tháng năm Sinh viên thực hiện 1
  3. NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN 2
  4. NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN 3
  5. MỤC LỤC LỜI CÁM ƠN 0 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN 2 NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN 3 MỤC LỤC 4 DANH MỤC HÌNH 7 MỞ ĐẦU 13 CHƯƠNG 1. TÌM HIỂU VỀ UX DESIGN VÀ UI DESIGN 14 1. Những hiểu biết cơ bản về UX và thiết kế UX 14 2. UX trong đời sống hàng ngày 16 2.1 UX trong đời sống hàng ngày 16 2.2 Thế nào là một UX tốt ? 18 2.3 Vai trò của UX tới các doanh nghiệp hiện nay 19 3. Khái niệm về UX Design và UI Design: 21 4. Công việc của UX Designer và UI Designer là gì ? 22 5. Giữa UX và UI cái nào quan trọng hơn ? 24 6. Quá trình thiết kế một dự án UX/UI 25 CHƯƠNG 2: TÌM HIỂU MỘT SỐ CÔNG CỤ THỰC HÀNH 26 1. Bút, tẩy và giấy 26 2. Miro – Công cụ hỗ trợ vẽ sơ đồ 27 3. Figma – Công cụ hỗ trợ việc thiết kế UI 28 CHƯƠNG 3: DISCOVER – GIAI ĐOẠN KHÁM PHÁ 29 1. Tìm hiểu về Disover – Giai đoạn tìm hiểu, khám phá 29 4
  6. 1.1 Hiểu người dùng của bạn: 30 1.2 Hiểu doanh nghiệp của bạn: 30 1.3 Nghiên cứu: 30 2. Project Promt – Background Research 31 3. User Survey – Khảo sát người dùng 36 3.1 User Serveys là gì? 36 3.2 Quá trình thực hiện khảo sát: 37 4. 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 1. Affinity Mapping – Biểu đồ mối quan hệ 50 2. User Personas – Mô hình người dùng mẫu 53 2.1 User Personas là gì ? 53 2.2 Tầm quan trọng của User Personas ? 54 3. User Stories – Câu chuyện người dùng 56 3.1 User Stories là gì ? 56 3.2 Làm thế nào để bạn tạo một User Stories? 56 4. Paint Points & Solution – Các vấn đề được xác định và các 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 1. Storyboard – Câu chuyện người dùng 63 1.1 Storyboard là gì? 63 1.2 Storyboard trong thiết kế UX là gì? 63 2. Cart Sorting – Sắp xếp thẻ 67 2.1 Cart Sorting là gì ? 67 5
  7. 2.2 Tại sao chúng ta lại sử dụng Cart Sorting ? 67 2.3 Thực hành Cart Sorting 68 3.1 Site map là gì ? 70 3.2 Tại sao ta nên sử dụng site map? 70 3.3 Thực hành Sitemap và kết quả thu được. 71 3. User Flow – Sơ đồ luồng đi của người dùng 72 4.1 User Flow là gì ? 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 1. Design – Thiết kế ứng dụng 79 2. Wireframes là gì ? 80 2.1 Khái niệm về Wireframes ? 80 2.2 Mục đích của Wireframes là gì ? 81 2.3 Các loại wireframes thường thấy ? 82 3. Thực hành Low – fi wireframes 85 4. Thực hành High – fi wireframe 91 5. UI Guideline: 98 5.1 UI Guideline là gì ? 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 1. Tổng kết và hạn chế: 108 2. Hướng phát triển: 108 TÀI LIỆU THAM KHẢO 109 6
  8. DANH MỤC HÌNH Hình 1.1: Chân dung của Steve Jobs 14 Hình 1.2: Câu nói nổi tiếng của Steve Jobs 15 Hình 1.3: Ví dụ về một trải nghiệm UX xấu 16 Hình 1.4: Ví dụ về một trải nghiệm UX tốt 17 Hình 1.5: Mô hình bậc thang 6 bước 18 Hình 1.6: Vai trò của người dùng với sản phẩm và dịch vụ 19 Hình 1.7: Chân dung “cha đẻ” của ngành UX Design 21 Hình 1.8: Mối tương quan giữa UX và UI 22 Hình 1.9: Kỹ năng cần có ở một UX Designer và UI Desinger 23 Hình 1.10: Tầm quan trọng giữa UX Design và UI Design 24 Hình 1.11: Quy trình chung trong 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 mọi dự án 26 Hình 2.2: Logo của Miro - Ứng dụng vẽ sơ đồ 27 Hình 2.3: Logo của Figma – Công cụ thiết kế UI 28 Hình 3.1: Tương quan giữa User và Business 29 Hình 3.2: Một buổi phỏng vấn người dùng (User Interview 1 -1) 31 Hình 3.3: Bản mô tả dự án Foam Market 32 7
  9. Hình 3.4: Một vài hình ảnh từ nông trại đến cửa hàng của Foam Market 33 Hình 3.5: Vision Statement và Business Goals 34 Hình 3.6: Sơ đồ tương quan về việc sử dụng smartphone tại Việt Nam 35 Hình 3.7: Sơ đồ thu thập giới tính của người dùng 39 Hình 3.8: Sơ đồ diễn tả độ tuổi của người dùng 39 Hình 3.9: Sơ đồ diễn tả nghề nghiệp của người dùng 40 Hình 3.10: Sơ đồ diễn tả tình trạn hôn nhân của người dùng 40 Hình 3.11: Sơ đồ diễn tả thói quen mua sắm tại các Cửa hàng thực phẩm 41 Hình 3.12: Sơ đồ diễn tả các mặt hàng thường được chọn mua 41 Hình 3.13: Sơ đồ diễn tả sự quan tâm của người dùng khi mua thực phẩm 42 Hình 3.14: Sơ đồ diễn tả mức độ khó khăn của người dùng khi 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 của người dùng tới chức năng gợi ý thực đơn 43 Hình 3.16: Sơ đồ diễn tả sự quan tâm của người dùng tới các ứng dụng Thương mai điện tử khác 43 Hình 3.17: Sơ đồ diễn tả các khó khăn của người dùng khi sử dụng các ứng dụng Thương mại điện tử 44 Hình 3.18: Kết quả thu nhận được qua quá trình phỏng 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 tại các cửa hàng trực tuyến thay vì các cửa hàng, siêu thị 50 8
  10. Hình 4.3: Biểu đồ mối quan hệ cho việc người dùng chọn mua tại cửa hàng, siêu thị thay vì mua ở các cửa hàng trực tuyến 51 Hình 4.4: Biểu đồ mối quan hệ cho 2 quán trình Giao nhận hàng và Tìm kiếm sản phẩm 51 Hình 4.5: Biểu đồ mối quan hệ về thói quen nấu ăn của người dùng 52 Hình 4.6: Các thành phần trong mô hình User Personas 52 Hình 4.7: User Personas thứ nhất 53 Hình 4.8: User Personas thứ hai 55 Hình 4.9: User Stories về quá trình đăng ký/đăng nhập 55 Hình 4.10: User Stories về quá trình chọn sản phẩm cần mua 57 Hình 4.11: User Stories về quá trình mua sản phẩm 58 Hình 4.12: User Stories về quá trình chọn món ăn 59 Hình 4.13: User Stories về quá trình chọn xem thông tin tài khoản 59 Hình 4.14: Các vấn đề của người dùng và cách giải quyết 60 Hình 5.1: Giai đoạn Idate – Hình thành ý tưởng 62 Hình 5.2: Storyboard trong Ux Design 63 Hình 5.3: Storyboard thứ nhất 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 hiện Cart Sorting 68 Hình 5.7: Kết quả của quá trình Cart Sorting 69 9
  11. Hình 5.8: Sơ đồ Sitemap của Foam Market 70 Hình 5.9: Flow đăng nhập của người dùng 71 Hình 5.10: Flow Flash Test của người dùng 73 Hình 5.11: Flow tìm kiếm sản phẩm và mua sản phẩm của người dùng 74 Hình 5.12: Flow thanh toán sản phẩm của người dùng 75 Hình 5.13: Flow kiểm tra lịch sử mua hàng của người dùng 77 Hình 5.14: Flow thêm một sản phẩm vào danh sách yêu thích 78 Hình 6.1: Thiết kế Lading Page của một website 79 Hình 6.2: Một sơ đồ wireframes 80 Hình 6.3: Low fi wireframes 82 Hình 6.3: Mid fi wireframes 83 Hình 6.4: High fi wireframes 84 Hình 6.5: Bản low fi wireframes cho Màn hình chính và Chi tiết sản phẩm . 85 Hình 6.6: Bản low fi wireframes cho Màn hình thực đơn và Chi tiết món ăn 86 Hình 6.7: Bản low fi wireframes cho Màn hình Tìm kiếm 87 Hình 6.8: Bản low fi wireframes cho Màn hình Yêu thích 88 Hình 6.9: Bản low fi wireframes cho Màn hình Giỏ hàng 89 Hình 6.10: Bản low fi wireframes cho Màn hình Thanh toán và Chọn ngày giờ giao hàng 90 Hình 6.11: Bản low fi wireframes cho Màn hình Thanh toán và Địa chỉ giao hàng 90 10
  12. Hình 6.12: Một số màn hình Hi fi wireframes được khỏi tạo 91 Hình 6.13: Thông số Grid Grows 92 Hình 6.14: Thông số Grid Columms 92 Hình 6.15: Grid Layout của Foam Market 93 Hình 6.16: Wireframes của các màn hình Đăng nhập và Flash Test 93 Hình 6.17: Wireframes của các màn hình Trang chủ và Chi tiết sản phẩm 94 Hình 6.18: Wireframes của các màn hình Yêu thích 94 Hình 6.19: Wireframes của các màn hình sản phẩm 95 Hình 6.20: Wireframes của các màn hình Tìm kiếm 95 Hình 6.21: Wireframes của các màn hình Thanh toán và Giỏ hàng 96 Hình 6.22: Wireframes của các màn hình Địa chỉ giao hàng 96 Hình 6.23: Wireframes của các màn hình thanh toán 97 Hình 6.24: Wireframes của các màn hình Chọn ngày giờ giao hàng 97 Hình 6.25: Một bộ UI Guideline thường thấy 98 Hình 6.26: Hai màu sắc chủ đạo của Foam Market 100 Hình 6.27: Nguồn cảm hứng màu sắc từ chính thương hiệu Foam Market . 100 Hình 6.28: Các màu sắc bổ trợ của Foam Market 101 Hình 6.29: SF Pro Display và các định dạng của nó được sử dụng trong ứng dụng Foam Market 102 Hình 6.30: Thành phẩn và thông số của Button 103 Hình 6.31: Thành phần và thông số của Input field và Dropdown menu 104 11
  13. Hình 6.32: Thành phần và thông số của Navigation Bar 105 Hình 6.33: Một số thành phần cơ bản khác 1 107 Hình 6.34: Một số thành phần cơ bản khác 2 107 12
  14. MỞ ĐẦU Trong cuộc cách mạng công nghệ 4.0 ngày nay, Việt Nam đang dần cố gắng nắm bắt các cơ hội để dần chuyển mình thành một nước phát triển. Phát triển mạnh trên nhiều lĩnh vực, tập trung chủ yếu vào các lĩnh vực về Công Nghệ Thông Tin, ,Bưu Chính - Viễn Thông, Dựa vào đó, sự cạnh tranh tại các doanh nghiệp không chỉ nằm trên lĩnh vực, thị trường mà doanh nghiệp đó đang hoạt động. Giờ đây, nó còn là sự cạnh tranh trên nền tảng số, nền tảng Công Nghệ Thông Tin. Mọi các doanh nghiệp hiện nay đều cần có một website, một ứng dụng điện thoại nhằm giới thiệu riêng cho doanh nghiệp mình, đó là nơi thể hiện được cá tính và bản sắc riêng của một doanh nghiệp. Với đặc thù riêng của các doanh nghiệp trong lĩnh vực Kinh doanh, đó là còn là nơi bày bán, giới thiệu các sản phẩm của doanh nghiệp tới các khách hàng của mình, đồng thời thu hút thêm nhiều khách hàng hơn. Việc bày bàn các sản phẩm không chỉ diễn ra tại các cửa hàng truyền thống mà giờ đây còn là trên website, trên ứng dụng điện thoại. Foam Market – Một doanh nghiệp cung ứng các sản phẩm về nông thực phẩm do chính doanh nghiệp họ sản xuất. Không đứng ngoài cuộc chơi đó, Foam cần có một ứng dụng để kết nối với khách hàng và mở rộng được thị phần của mình. Quá trình thực hiện của đề tài được chia làm 2 phần: Phần 1: Phân tích, nghiên cứu các vấn đề, trải nghiệm người dùng của ứ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
  15. CHƯƠNG 1. TÌM HIỂU VỀ UX DESIGN VÀ UI DESIGN 1. Những hiểu biết cơ bản về UX và thiết kế UX UX: Được viết đầy đủ là User Experience (Trải nghiệm người dùng). Là trải nghiệm của người dùng khi người dùng sử dụng một sản phẩm hay một dịch vụ nào đó. Steve Jobs – một nhà thiết kế, doanh nhân người Mỹ, người đồng sáng lập, Cựu Chủ tịch và giám đốc điều hành tại Apple Inc. Một nhân vật rất nổi tiếng trong việc luôn muốn đưa những trải nghiệm tốt nhất cho người dùng của mình. Hình 1.1 Chân dung của Steve Jobs Ông là một nhân chứng hoàn hảo cho việc áp dụng UX trong ứng dụng phát phát triển sản phẩm. Tìm hiểu qua một vài câu nói của ông: “ You have to start with the customer experience and work backwards to the technology – Bạn hãy bắt đầu với trải nghiệm người dùng sau đó mới đến các yếu tố công nghệ ” – Steve Jobs. 14
  16. Vào thời điểm ông nói câu này, việc phát triển một sản phẩm thì yếu tố công nghệ là một yếu tố kiên quyết. Còn với sự phát triển công nghệ mạnh mẽ ngày nay, nhiều plaform ra đời nhằm giúp việc phát triển sản phẩm sẽ trở nên dễ dàng hơn. Và vai trò của UX càng ngày hiện hữu một cách rõ ràng hơn. Từ trên ta dễ dàng nhận ra được tầm nhìn đi trước thời đại của ông. Với tầm nhìn đi trước thời đại của ông, ông là người đã tiên phong trong công cuộc cách mạng thay đổi máy vi tính và điện thoại di động thông minh, đóng góp không nhỏ vào thành công của Apple hôm nay. Hiện nay, Apple đã trở thành 1 công ty tỷ đô, với nền móng là những di sản do Steve Jobs xây dựng. “ Design is not just what it looks and feels like. Design is how it works - Thiết kế không chỉ là những gì nó trông giống như và cảm thấy như thế nào. Thiết kế là cách nó hoạt động.” -Steve Jobs. Steve Jobs luôn đặt tính năng, giá trị của sản phẩm đem lại cho người dùng là điều quan trọng nhất, tiếp theo đó là giao diện, bao bì, tính thẩm mỹ của sản phẩm. Một người có ảnh hưởng lớn như Steve Jobs luôn luôn đề cao tính trải nghiệm của sản phẩm (UX) thì chắc hẵn nó đóng một vai trò quan trọng như thế nào trong quá trình phát triển sản phẩm. Hình 1.2 Câu nói nổi tiếng của Steve Jobs 15
  17. 2. UX trong đời sống hàng ngày 2.1 UX trong đời sống hàng ngày Con người chúng ta thường xuyên có các trải nghiệm với các đối tượng mà ta tiếp xúc mỗi ngày (Có thể là 1 sản phẩm, 1 dịch vụ hoặc 1 người bấy kỳ). Đó có thể là một trải nghiệm tốt, đó có thể là một trải nghiệm xấu. Và ta thường xuyên tìm kiếm một trải nghiệm tốt thay vì một trải nghiệm xấu. Trải nghiệm chính là 1 thứ thúc đẩy người dùng chi tiêu hoặc sử dụng 1 sản phẩm, dịch vụ nào đó. Đôi khi vì một trải nghiệm lạ mà người dùng sẽ làm 1 đều gì đó điên rồ. Tuy nhiên có những trải nghiệm thì người ta muốn trải nghiệm mãi, có những trải nghiệm vì hiếu kỳ thì chỉ 1 lần trong đời. Có những trải nghiệm họ sẽ ko bao giờ muốn lặp lại trải nghiệm đó 1 lần nữa. Hình 1.3 Ví dụ về một trải nghiệm UX xấu Ví dụ 1: Hẳn ai cũng đã có một trải nghiệm khó khăn tại một bãi gửi xe. Khi việc ghi số, đánh dấu xe bằng những viên phấn được ghi trực tiếp trên yên xe, khiến cho ta có cái nhìn không được thiện cảm với những vết phấn còn xót lại khi 16
  18. ta rời bãi đỗ xe. Phải mất khoảng vài ngày, thậm chí một tuần những vết phấn ấy mới mờ đi và dần biến mất => Một trải nghiệm UX xấu. Hình 1.4 Ví dụ về một trải nghiệm UX tốt Ví dụ 2: Nhưng ở nhiều bãi đỗ xe, họ đã cải thiện bằng cách áp dụng công nghệ, sử dụng thẻ từ để ghi số, đánh dấu xe. Khiến cho việc gửi xe dễ dàng hơn, khách hàng không còn gặp tình trạng “vết phấn”, doanh nghiệp cũng giảm tải được sự ùn tắc trong quá trình ghi số. => Một trải nghiệm UX tốt. 17
  19. 2.2 Thế nào là một UX tốt ? Đối với một sản phẩm được coi là một UX tốt cần phải đảm bảo được các yếu tố sau đây: • Findable: Người dùng tìm thấy gì ở sản phẩm ? Và sản phẩm đó có phải là thứ họ cần tìm hay không ? • Acessible: Người dùng có đủ điều kiện để sử dụng sản phẩm hay không ? • Usable: Sản phẩm có dễ dàng sử dụng hay không ? • Desirable: Sự lôi cuốn, thúc đẩy của sản phẩm ? • Credible: Độ tin cậy của sản phẩm đối với người dùng ? • Usefull: Độ hữu dụng của sản phẩm ? Hình 1.5 Mô hình bậc thang 6 bước 18
  20. 2.3 Vai trò của UX tới các doanh nghiệp hiện nay Ngày nay thì ngày càng có nhiều công ty - hiểu ra vấn đề cốt lõi trong quá trình phát triển sản phẩm. Đó là: Thời kỳ của việc sản xuất đại trà đã qua và thời kỳ cạnh tranh bằng chất lượng sản phẩm cũng đã qua Thực tế thì tại thời đại này, người dùng có quá nhiều lựa chọn về sản phẩm. Bất cứ sản phẩm nào vừa đc phát minh ra, dù có tinh vi, phức tạp đến đâu, sau một thời gian ngắn vẫn có thể bắt chước để tạo ra 1 sản phẩm tương đương. Nhưng trải nghiệm mà sản phẩm tạo ra cho khách hàng. Các nhận dạng từ hình ảnh, ngôn từ, cách tương tác, cảm xúc được sáng tạo trên sản phẩm riêng của doanh nghiệp đó thì người khác sẽ khó lòng có thể copy được. Do đó có thể nói UX càng ngày càng thể hiện rõ vai trò là yếu tố cạnh tranh quyết định đối với doanh nghiệp. Hình 1.6 Đặt khách hàng – người dùng lên hàng đầu Khách hàng là thượng đế, nếu ta muốn đáp ứng được khách hàng, hãy học cách thiết kế UX, UX sẽ giúp giải quyết các vấn đề của người dùng khi sử dụng sản phẩm. Từ đó, người dùng sẽ có được niềm tin vào doanh nghiệp của mình. Nếu doanh nghiệp nào đứng ngoài cuộc chơi thì doanh nghiệp đó sẽ mất đi sự cạnh tranh và bị vượt mặt bởi các doanh nghiệp khác. 19
  21. Sau đây là 4 lợi ích của UX đối với 1 doanh nghiệp mà đã được công nhận rộng rãi: • Giảm chi phí tạo ra sản phẩm: Rất nhiều các công ty, doanh nghiệp gặp phải 1 vấn đề là khi họ bắt phát triển 1 sản phẩm, họ hoàn toàn dựa trên dự đoán mà thiếu đi sự tìm hiểu và nghiên cứu. Và khi sản phẩm xây dựng gần xong mới đưa cho người dùng trải nghiệm, lúc đó họ mới nhận thấy sai lầm. Và cái giá cho sai lầm đó, đơn giản thì là thay đổi, cập nhật còn phức tạp hơn thì là đập đi làm lại từ đầu. • Giảm rủi ro khi nâng cấp, thay đổi sản phẩm: Thực tế thì số các công ty đầu tư vào thiết kế UX trong việc tạo ra sản phẩm đã là ít ỏi. Nhưng ngay cả khi tạo ra được 1 sản phẩm được thiết kế tốt từ ban đầu, ta vẫn phải thường xuyên nâng cấp và thay đổi sản phẩm. Và đó lại là nơi tiềm ẩn nhiều rủi ro nhất vì đó là thời kỳ thiết kế UX trên sản phẩm đã không còn được coi trọng đầy đủ. Thêm 1 vài chức năng mới, thay đổi một số cập nhật về quy trình vv. có thể khiến khách hàng nổi giận và rời bỏ sản phẩm. • Có được doanh thu cao hơn: Điều này cũng dễ hiểu, khi sản phẩm của công ty, doanh nghiệp được người dùng sử dụng nhiều, thì cơ hội kiếm tiền của càng trở nên rõ nét • Sản phẩm trở nên dễ bán: Như đã đề cập từ trước, thời kỳ mà khách hàng chỉ quan tâm đến chất lượng của sản phẩm đã qua. Sản phẩm không chỉ cần có 1 chất lượng đạt chuẩn và mà còn là 1 trải nghiệm người dùng tốt, đó sẽ là 1 sản phẩm dễ bán và khiến khách hàng phải sử dụng sản phẩm. 20
  22. 3. Khái niệm về UX Design và UI Design: - UX Design hay UXD: Được viết đầy đủ là User Experience Design, nghĩa là Thiết kế tối ưu trải nghiệm người dùng. Đặt người dùng làm trọng tâm của sản phẩm (User Centered Design). UX là những đánh giá của người dùng khi sử dụng sản phẩm như: Website hay App có dễ sử dụng hay không? Có thân việc bố trí sắp xếp bố cục như vậy đã được hay chưa? Sản phẩm đó có đạt được mục đích đề ra không. Thuật ngữ UX được đặt ra bởi Don Norman, cựu phó chủ tịch của Tập đoàn Advanced Technology Group, ông đã nói : “Tôi đã phát minh ra thuật ngữ này vì tôi nghĩ giao diện của con người và khả năng sử dụng quá hẹp. Tôi muốn bao gồm tất cả các khía cạnh của trải nghiệm của người đó với hệ thống bao gồm thiết kế công nghiệp, đồ họa, giao diện, tương tác vật lý và hướng dẫn sử dụng.” -Don Norman Hình 1.7 Chân dung “cha đẻ” của ngành UX Design - UI Design: Được viết đầy đủ là User Interface Design, nghĩa là Thiết kế giao diện người dùng. UI bao gồm tất cả những gì người dùng có thể nhìn 21
  23. thấy như: màu sắc web, bố cục sắp xếp như thế nào, web/app sử dụng fonts chữ gì, hình ảnh trên web có hấp dẫn hay không, UI đóng vai trò truyền tải thông diệp từ người thiết kế, nhà cung cấp dịch vụ, sản phẩm tới người dùng. Hình 1.8 Mối tương quan giữa UX và UI 4. Công việc của UX Designer và UI Designer là gì ? Công việc của một UX Designer: UX Designer sẽ tìm nhiều cách để tiếp cận sản phẩm để phát hiện một cách đầy đủ những lỗi hay các bất tiện mà người dùng có thể gặp phải, phân tích nguyên nhân và tìm cách giải quyết để gửi ý tưởng về cho UI Design thực hiện. UX sẽ đảm bảo sao cho tính logic của sản phẩm sẽ “mềm mượt” từ bước này sang bước tiếp theo, tức là đảm bảo chất lượng đầu ra sản phẩm. Một số công việc một UX Desinger cần phải thực hiện như: • Phân tích đối thủ cạnh tranh • Phân tích khách hàng • Thực hiện các cuộc phỏng vấn 22
  24. • Phát triển nội dung • Xây dựng dụng cụ trực quan và sản phẩm mẫu • Kiểm tra / Lặp lại Công việc của một UI Designer: UI sẽ tiến hành nghiên cứu và tiếp nhận các thông tin từ UX Designer, từ đó đưa ra thiết kế giao diện đồ họa cho phần mềm, các ứng dụng trên điện thoại và máy tính, các website gồm các yếu tố như màu sắc, hình ảnh, ngôn ngữ, phương thức sử dụng các tính năng, cách trình bày bố cục, sắp xếp layout của sản phẩm kỹ thuật số, Ngoài ra, UI Designer cũng phụ trách các Digital Product. Nói một cách khác, UI Designer đã tạo ra quá trình hướng dẫn người dùng một cách trực quan thông qua giao diện của sản phẩm. Một số công việc một UI Designer cần phải thực hiện như: • Nghiên cứu thiết kế. • Xây dựng thương hiệu và phát triển đồ họa. • Xây dựng hướng dẫn sử dụng (style guide) • Xây dựng sản phẩm mẫu. • Sự tương tác và hoạt hình. Hình 1.9 Kỹ năng cần phải có đối với một UI Designer và UX Designer 23
  25. Thế nhưng trong thực tế UI & UX vẫn sẽ rất thường xuyên song hành cùng nhau, vì bất kỳ một thiết kế website hay trải nghiệm ứng dụng nào vẫn cần sự có mặt của cả hai lĩnh vực UI và UX. Thông thường một UI designer sẽ tập trung phần lớn vào UI, nhưng vẫn có một ít kiến thức phía bên UX. Và ngược lại UX designer chủ yếu làm về UX, cũng sẽ đi kèm với một số kĩ năng cơ bản về hình ảnh bên UI. Trường hợp có một số ít người nằm ở vùng giữa, cân bằng được cả hai thứ nên họ được gọi là UI/UX designer. 5. Giữa UX và UI cái nào quan trọng hơn ? Chính vì sự liên quan chặt chẽ về UX và UI mà mọi người thường khó phân biệt tầm quan trọng giữa UX và UI. Có không ít cuộc tranh luận rằng UX quan trọng hơn UI hoặc ngược lại UI quan trọng hơn UX. Tuy nhiên khi bạn đã hiểu rõ ràng về hai khái niệm này bạn có thể dễ dàng nhận điểm chung đó là cả UI và UX đều mang một mục đích đó là tạo sự thoải mái cho người dùng, từ đó ta có thể thấy chúng có vai trò quan trọng như nhau. Hình 1.10 Tầm quan trọng của UX và UI Design 24
  26. 6. Quá trình thiết kế một dự án UX/UI Không có bất kỳ quy tắc hay quy trình bắt buộc cụ thể nào cho UX/UI Design. Tùy vào mỗi dự án, quy mô, tổ chức, tùy vào mỗi người Designer mà sẽ có mỗi quy trình thực diện cho từng dự án khác nhau. Cụ thể hơn, quy trình thiết kế UX/UI sẽ gồm nhiều bước lớn, trong mỗi bước lớn sẽ gồm nhiều bước nhỏ hơn (công cụ). Có tổng cộng khoảng 70 công cụ các loại để thực hiện UX Design. Mỗi mô hình và phương pháp sẽ có quy trình khác nhau và đầu ra kết quả khác nhau. Điều quan trọng là tìm ra vấn đề chính xác mà ta đang làm cho dư án này là gì. Một số phương pháp phổ biến như: User Personas, User Flow, Usability Testing, Hình 1.11 Quy trình chung trong UX Proces Với quá trình phát triển UX/UI cho ứng dụng Foam Market cũng không nằm ngoại lệ. Với quy mô và điều kiện cần mà Foam Market muốn hướng tới, em sẽ thực hiện theo quy trình như sau: Hình 1.12 Quy trình thiết kế UX/UI cho Foam Market 25
  27. CHƯƠNG 2: TÌM HIỂU MỘT SỐ CÔNG CỤ THỰC HÀNH Quá trình thiết kế và phát triển phần mềm, website và ứng dụng là một quá trình xuyên suốt, gồm nhiều chặng. Mỗi một chặng đều phải có các công cụ để hỗ trợ, mỗi công cụ đều có vai trò đóng góp cho quá trình phát triển sản phẩm ấy. Sau đây là một vài công cụ được sử dụng trong đề tài lần này: 1. Bút, tẩy và giấy Ba công cụ trên là 3 công cụ hiển nhiên phải có trong bấy kỳ dự án nào, dù dự án có đơn giản đến đâu hay phức tạp, to lớn đến mức nào đi nữa thì đều cần sử dụng đến bộ 3 này. Từ việc ghi chú kết quả, lưu trú thông tin phỏng vấn, phác thảo sơ đồ thì đều cần dùng đến Bút, Tẩy và Giấy. Giấy có thể là giấy A4, A3, A0, bất kỳ loại giấy nào mà ta có thể viết và thuận tiện cho việc lưu trữ và ghi chú. Ngoài ra, giấy Note cũng là một loại giấy quan trọng, hỗ trợ ta rất nhiều trong việc phân tích, sắp xếp, đánh giá. Chúng thường được sử dụng trong các công đoạn như: Affinity Mapping, User Stories, Hình 2.1 Giấy Note công cụ đắc lực cho dự án 26
  28. 2. Miro – Công cụ hỗ trợ vẽ sơ đồ Miro là một công cụ hỗ trợ việc phân tích, vẽ sơ đồ. Ta có thể dễ dàng truy cập thông qua đường link Mọi sơ đồ mà ta có thể tìm thấy cho việc phân tích, đánh giá trong nhiều các lĩnh vực như UX, Marketing, đều có trên Miro. Miro xuất hiện trên mọi nền tảng từ Desktop: MAC OS, Window cho đến Android, IOS. Miro hỗ trợ miễn phí chỉ với 3 project được khỏi tạo. Để mở rộng giới hạn hơn thì ta có thể nâng cấp theo nhiều gói khác nhau từ 8$ cho đến 12$. Với dự án này, ta sẽ sử dụng miro đễ hỗ trợ chuyển các thông tin, phân tích được trong quá trình khảo sát thành các thông tin số để hiện thị trên màn hình. Hình 2.2 Logo của Miro – Công cụ vẽ sơ đồ 27
  29. 3. Figma – Công cụ hỗ trợ việc thiết kế UI Figma cùng với Sketch, Adobe XD là một công cụ hỗ trợ việc thiết kế UI phổ biến và được nhiều nhà thiết kế sử dụng trong quá trình phát triển sản phẩm. Ta có thể thiết kế với Figma ngay trên nền tảng Website, để cần sự ổn định hơn trong quá trình làm việc ta dễ dàng cài đặt Figma trên 2 nền tảng Mac và Window. Các điểm mạnh của Figma cần được kể đến như: • Mọi người trong team đều có thể dễ dàng làm việc cùng nhau trên Figma. Với chức năng mô tả đặc tính của một Component thông qua các dòng Code từ CSS, Android cho đến iOS. Thuận lợi cho việc kết nối giữa Designer với Developer. • Với chức năng Master Component dễ dàng quản lý các Component trong dự án. • Thực hiện được các hiệu ứng chuyển cảnh giữa các màn hình và thiết lập được một số Interaction (Thiết kế tương tác) đơn giản. • Nhẹ, dễ dàng sử dụng và làm quen. • Lưu trữ file trên điện toán đám mây. Hình 2.3 Logo của Figma – Công cụ thiết kế UI 28
  30. CHƯƠNG 3: DISCOVER – GIAI ĐOẠN KHÁM PHÁ 1. Tìm hiểu về Disover – Giai đoạn tìm hiểu, khám phá Người xưa có câu: “ Nếu bạn có bốn giờ để chặt cây, hãy dành ba giờ đầu để mài rìu ”. Thiết kế cũng vậy. Trước khi ta bắt đầu với bất kỳ dự án nào, ta cần phải có những điều cơ bản trước. Ta phải hiểu được vấn đề của 2 yếu tố cơ bản: • Hiểu người dùng của bạn. • Hiểu doanh nghiệp của bạn. Hình 3.1 Tương quan giữa User (Người dùng) và Business (Doanh nghiệp) 29
  31. 1.1 Hiểu người dùng của bạn: Vì thiết kế trải nghiệm người dùng là giải quyết các vấn đề khó khăn người dùng. Ta cần phải trả lời được các câu hỏi sau: • What is their problem? - Vấn đề của họ là gì ? • What problem are you trying to solve? - Bạn đang cố gắng giải quyết vấn dề gì cho người dùng của bạn ? • Why are you the one with the answers? – Tại sao bạn tìm ra câu trả lời ? 1.2 Hiểu doanh nghiệp của bạn: Điều quan trong thứ 2, ta cần phải biết dự án này có phù hợp với sứ mệnh và mục tiêu mà doanh nghiệp hướng dến. Các câu hỏi ta cần trả lời như sau: • What are your company’s values and mission? - Giá trị và sứ mệnh của doanh nghiệp là gì ? • How does this project contribute to that goal? – Làm thế nào để dự án này đóng góp cho mục tiêu đó ? • Is this the right time for your company to be pursuing this project? – Đây có phải là thời điểm thích hợp để thực hiện dự án này ? 1.3 Nghiên cứu: Sau khi biết rằng dự án này phù hợp với nhiệm vụ cốt lõi của doanh nghiệp. Ta cần xác thực thực tế dự án thông qua việc nghiên cứu. Nghiên cứu chính là xương sống, nòng cốt cho dự án. Những điều ta khám phá, tìm tòi được trong giai đoạn này sẽ là nền tảng phát triển cho toàn bộ dự án. 30
  32. Một số phương pháp được thực hiện trong giai đoạn này bao gồm: • Background Research: Tìm hiểu về dự án của doanh nghiệp. • Context Inquiry: Bối cảnh thực hiện dự án. • User Survey: Khảo sát người dùng. • User Interview: Phỏng vấn người dùng. • Usability Test: Kiểm tra khả năng sử dụng. Hình 3.2 Một buổi phỏng vấn người dùng (User Interview 1:1) 2. Project Promt – Background Research Lặp lại câu nói ở trên,“Nếu bạn có bốn giờ để chặt cây, hãy dành ba giờ đầu để chặt rìu”. Đúng vậy, việc hiểu được nhu cầu cơ bản trước thì mới tạo ra tiền đề để phát triển cho những bước về sau.Việc thực hiện Project Promt (Mô tả dự án). Chính là một phương pháp giúp ta hiểu được dự án mà doanh nghiệp đem lại là gì. Phần mô tả dự án chính là phần yêu cầu mà doanh nghiệp muốn hướng tới, 31
  33. mục đích của ứng dụng ra đời với các thông tin chức năng mà ứng dụng đem lại cho người dùng. Ta cần phải suy ngẫm hoặc trực tiếp bắt gặp đại diện của doanh nghiệp để tìm hiểu các nguồn dữ liệu trên. Sau đây là bản mô tả tóm tắt từ dự án Foam Market: Hình 3.3 Bản mô tả dự án Foam Market 32
  34. Hình 3.4 Một vài hình ảnh từ nông trại đến cửa hàng của Foam Market Rút ra vấn đề từ đoạn mô tả trên ta nhận thấy: Foam Market là một doanh nghiệp đã đi vào hoạt động lâu năm, họ đã phần nào định hình được thương hiệu trong mắt người tiêu dùng. Tại sao lại là “Định hình thương hiệu ?” - Một thương hiệu đã được định hình, sẽ cung cấp cho ta về cái nhìn, phong cách của thương hiệu đó. Từ một vài hình ảnh thăm dò được trên => Foam Market là một thương hiệu hiện đại, trẻ trung, năng động. Sự hiện đại đến từ quá trình sản xuất các nguôn vật liệu thực phẩm. Sự năng đông trẻ trung từ phong cách bố trí, bày bán tại cửa hàng. Họ nắm bắt được xu hướng của thời đại rất nhanh, họ không chỉ muốn việc mua – bán chỉ diễn ra tại các cửa hàng Foam Market, mà còn muốn hướng đến là thị trường thương mại điện tử. Tạo sự cãnh tranh với các cửa hàng thực phẩm khác. Giúp phục vụ được nhiều đối tượng khách hàng hơn, giúp nhiều khách hàng hơn được trải nghiệm sản phẩm từ chính Foam. Phương châm của họ và cũng 33
  35. chính điều mà ta đang tìm kiếm là Giá Trị và Cốt Lõi của Foam: “Nâng tầm bữa ăn Việt”. Ngoài việc bán các mặt hàng về thực phẩm thông thường. Foam còn muốn kết nối tới người dùng thông qua việc một người phụ trợ cho Gia đình, hỗ trợ - gợi ý người dùng các thực đơn hàng ngày. Từ đó, tạo thói quen của người dùng với ứng dụng của Foam. Từ trên, đã rút ra được 2 điều quan trọng từ doanh nghiệp: • Vision Statemanet: Tầm nhìn chiến lược của doanh nghiệp cho ứng dụng. • Business Goals: Lợi ích kinh doanh mà doanh nghiệp hướng tới khi xây dựng, phát triển ứng dụng. Hình 3.4 Vision statement và Business Goals Bối cảnh ra đời của Foam Market: Smartphone đóng một phần thiết yếu trong cuộc sống hàng ngày của người Việt. Một lượng lớn người Việt kiểm tra điện thoại di động của họ ngay sau khi thức dậy và dành hơn 2 giờ mỗi ngày cho điện thoại của họ: • 46% người Việt sử dụng điện thoại của họ trong vòng 5 phút sau khi thức dậy. 34
  36. • 82% người Việt Nam sẵn sàng trao đổi thông tin cá nhân để lấy các mặt hàng miễn phí. Vài năm gần trở lại đây, việc các trang thương mai điện tử lớn như Tiki, Lazada, Shopee, có sự hoạt động và cạnh tranh rất mạnh mẽ. Nhờ sự cạnh tranh của các trang thương mại điện tử này mà dần hình thành nên thói quen mua sắm thường trực của người dùng. Thương mại điện tử di động đang đạt mức tăng trưởng cao nhất và nhiều người bắt đầu tìm kiếm một sản phẩm thông qua smartphone của họ. Dần việc mua sắm trên smartphone vượt trội hơn dẵn so với trên các thiết bị khác như PC/tablet. Dù việc thanh toán trực tuyến là bước đi mới trong thời đại. Thế nhưng, tại Việt Nam người tiêu dùng sợ bị lừa đảo, vì vậy họ thích giao hàng bằng tiền mặt hơn bất kỳ phương thức mua hàng nào khác. Hình 3.5 Sơ đồ tương quan về việc sử dụng Smartphone tại Việt Nam 35
  37. Kết luận: Người dùng đã dần quen với việc mua sắm trực tuyến, các đơn vị doanh nghiệp cũng cần có một ứng dụng/website của riêng mình để mở rộng thì phần, thu hút được nhiều khách hàng hơn. Foam Market bắt đầu quan tâm tới thị trường trực tuyến và cho phát triển ứng dụng vào thời điểm này là hoàn toàn khả thi. Tiền đề là từ việc rút kinh nghiệm từ các đối thủ khác, đồng thời cộng hưởng các yếu tốt đặc trưng sẽ giúp Foam Market đạt được mục tiêu (Business Goals) của mình. 3. User Survey – Khảo sát người dùng 3.1 User Serveys là gì? User Surveys việc thực hiện các câu hỏi để gửi cho người dùng mục tiêu của mình. Nó là một cuộc nghiên cứu có hệ thống về mục tiêu, nhu cầu và khả năng của người dùng để chỉ định thiết kế, xây dựng hoặc cải tiến các công cụ nhằm mang lại lợi ích cho cách người dùng làm việc User Surveys là cách nhanh chóng và tương đối dễ dàng để lấy dữ liệu về người dùng và xác định được tập người dùng tiềm năng. Các khảo sát bao gồm chủ yếu hai loại câu hỏi: • Câu hỏi đóng: Những câu hỏi này nhận được dữ liệu tương đối từ người dùng. Nó không cho chúng ta biết về bối cảnh, động lực, nguyên nhân của phản ứng. Những câu hỏi này thường được sử dụng với checkbox, radio button. Dữ liệu thu được có thể dễ dàng được mô tả thông qua sơ đồ. • Câu hỏi mở: Câu hỏi mở là dữ liệu định tính về hành vi, hành động của người dùng. Nó cho chúng ta biết người dùng nghĩ về một vấn đề như thế nào. Những câu hỏi này yêu cầu một hộp văn bản để giải thích nguyên nhân. Các câu hỏi mở có xu hướng mất nhiều thời gian hơn để phân tích. 36
  38. 3.2 Quá trình thực hiện khảo sát: B1: Xác định được mục tiêu khảo sát Các câu hỏi đều được chia thành 2 phần: Phần 1 và Phần 2. Với mỗi phần tương ứng thì sẽ thu được kết quả với mục đích khác nhau. • Phần 1: Để hiểu rõ và phân nhóm các khách hàng tiềm năng sử dụng sản phẩm. Là tiền đề để xây dựng User Personas (Người dùng nguyên mẫu). Tiếp là xác định được người dùng thực sự cho cuộc phỏng vấn trực tiếp (User Interview) • Phần 2: Nhằm xác định nhu cầu - sự quan tâm của người dùng với các ứng dụng mua sắm trực tuyến. Đồng thời, nhận biết các khó khăn mà người dùng gặp phải khi sử dụng các ứng dụng mua hàng trực tuyến tương tự. B2: Chọn phương thức khảo sát là trực tiếp (Survey) với các câu hỏi được chuẩn bị thông qua Google Forms. B3: Lên danh sách gồm các câu hỏi: Chào anh (chị), Em tên Phạm Huy Phong, sinh viên năm 4 của trường đại học Bà Rịa Vũng Tàu (BVU). Hiện tại em đang thực hiện một dự án nhỏ cho bài tập của mình. Một dự án thiết kế về một ứng dụng cho một Cửa hàng tiện lợi online. Một dự án giúp cho người dùng dễ dàng thuận tiện mua sắm các nhu yếu phẩm hàng ngày trực tuyến, giúp việc mua sắm các nhu yếu phẩm hàng ngày trở nên nhanh hơn, an toàn hơn, thuận tiện hơn. Dưới đây là câu hỏi. Các câu hỏi đều mang tính khách quan, không làm rõ thông tin của bất kỳ cá nhân nào, nên anh (chị) có thể yên tâm về tính bảo mật của mình. Kính mong anh (chị) có thể đóng góp câu trả lời để em có thể hoàn thành được bài tập của mình. Cảm ơn rất nhiều. 37
  39. Phần 1: Để hiểu rõ và phân nhóm các khách hàng tiềm năng • Giới tính của mình là gì ? • Độ tuổi của anh (chị) là bao nhiêu ? • Công việc của anh (chị) là gì ? • Tình trạng công việc của anh (chị) ? • Tình trạng hôn nhân của anh (chị) ? Phần 2: Xác định nhu cầu - sự quan tâm của người dùng với các ứng dụng mua sắm trực tuyến: • Anh (chị) có thường xuyên mua hàng tại các CỬA HÀNG THỰC PHẨM hay không ? • Các mặt hàng anh (chị) thường chọn mua là gì ? • Điều gì khiến anh (chị) quan tâm nhất khi chọn mua thực phẩm cho mình (hoặc cho gia đình mình) ? • Anh (chị) có thường xuyên nấu ăn để phục vụ bữa ăn hàng ngày cho gia đình ( hoặc cho chính bản thân mình) hay không ? • Đánh giá cảm xúc của bản thân anh (chị) khi tham gia nấu ăn ? • Anh (chị) có khó khăn trong việc chọn lựa thực đơn mỗi ngày ? Anh (chị) nghĩ sao về việc có một ứng dụng giúp anh (chị) lên thực đơn hàng ngày, hàng tuần ? • Có bao nhiêu ứng dụng Mua sắm trực tuyến - Thương mại điện tử trên điện thoại của anh (chị) ? • Ứng dụng Mua sắm trực tuyến - Thương mại điện tử nào khiến anh chị cảm thấy hài lòng nhất khi sử dụng ? • Điều gì khiến anh (chị) cảm thấy hài lòng khi sử dụng ứng dụng kể trên ? • Thời gian trung bình (phút) của anh chị khi lựa chọn mua một sản phẩm ? (bao gồm cả thời gian tìm kiếm, chọn lựa, so sánh và thanh toán) 38
  40. Sau khi thực hiện khảo sát trực tiếp với sự giúp sức của hơn 20 người tham gia, đã thu về được các số liệu thống kê như sau: Hình 3.6 Sơ đồ diễn tả giới tính Hình 3.7 Sơ đồ diễn tả độ tuổi 39
  41. Hình 3.8 Sơ đồ diễn tả nghề nghiệp Hình 3.9 Sơ đồ diễn tả tình trạng hôn nhân 40
  42. Hình 3.10 Sơ đồ diễn tả thói quen mua sắm tại các Cửa Hàng Thực Phẩm Hình 3.11 Sơ đồ diễn tả các mặt hàng thường được người dùng chọn mua 41
  43. Hình 3.12 Sơ đồ diễn tả vấn đề quan tâm của người dùng khi chọn mua thực phẩm Hình 3.13 Sơ đồ diễn tả mức độ khó khăn của người dùng khi lựa chọn thực đơn hàng ngày 42
  44. Hình 3.14 Sơ đồ diễn tả sự quan tâm của người dùng tới chức năng gợi ý thực đơn Hình 3.15 Sơ đồ diễn tả sự quân tâm của người dùng tới các ứng dụng thương mại điện tử 43
  45. Hình 3.16 Sơ đồ diễn tả khó khăn của người dùng khi mua hàng trực tuyến Từ các kết quả thông qua cuộc khảo sát bên trên, đã trả về được các thông tin hết sức hữa ích giúp ta dần xác định được tệp người dùng của ứng dụng, biết được đâu là điều mà người dùng quan tâm, đâu là khó khăn còn bấp cập của người dùng. 4. User Interview – Phỏng vấn trực tiếp người dùng Các cuộc phỏng vấn người dùng (User Interview) thường được thực hiện với những người dùng tiềm năng của một thiết kế, như là một phần của giai đoạn ý tưởng hoặc trong quá trình phát triển khái niệm ban đầu. Phỏng vấn người dùng theo một phương pháp có cấu trúc, theo đó ta cần chuẩn bị một số chủ đề để trình bày, ghi lại những gì được nói trong cuộc phỏng vấn và phân tích một cách có hệ thống cuộc trò chuyện sau cuộc phỏng vấn. Phỏng vấn người dùng là một trong những phương pháp được sử dụng phổ biến nhất trong nghiên cứu người dùng. Chúng có thể bao gồm hầu hết tất cả các chủ đề liên quan đến người dùng và được sử dụng. Để thu thập thông tin về Cảm xúc của người dùng, động lực và thói quen hàng ngày hoặc cách họ sử dụng các sản phẩm khác nhau. Các cuộc phỏng vấn 44
  46. thường theo phương pháp tương tự như các cuộc phỏng vấn trong các lĩnh vực khác, nhưng với mục đích cụ thể là thông báo cho một dự án thiết kế. Trước khi phỏng vấn người dùng, cần liệt kê những câu hỏi tiềm năng có thể hỏi trong cuộc phỏng vấn. Những câu hỏi chủ yếu tập trung vào các khía cạnh sau đây: • Mua sắm trực tuyến. • Thanh toán và giao nhận sản phẩm. • Thói quen nấu ăn. Dưới đây là một số danh mục câu hỏi được thực hiện: Phần 1: Mua sắm trên smatphone: • Bạn đã sử dụng mua hàng trên các ứng dụng mua sắm trực tuyến từ trước? • Đâu là ứng dụng mua sắm trực tuyến bạn ưa thích ? • Tại sao bạn lại thích nó ? • Lần cuối cùng bạn mua hàng trên các ứng dụng mua sắm trực tuyến là khi nào ? Phần 2: Thói quen nấu ăn hàng ngày của người dùng: • Bạn có thường xuyên mua thực phẩm trên điện thoại hay không ? • Bạn có thường xuyên nấu ăn tại nhà không ? • Những điều bạn lưu ý khi chọn mua thực phẩm ? • Chắc hẵn việc lên thực đơn cho ngày mai khiến bạn cảm thấy khó khăn chứ ? • Bạn có thường xuyên thử nghiệm những món ăn mới hay không ? Phần 3: Thanh toán và giao nhận hàng: 45
  47. • Bạn có gặp vấn đề gì với việc thanh toán và giao nhận hàng ? • Bạn cảm thấy hài lòng nhất trong quá trình thanh toán và mua hàng của ứng dụng nào ? • Đâu là phương thức thanh toán bạn hay sử dụng ? - Thanh toán khi nhận hàng/Thẻ tín dụng/Paypal Các kết quả thu được từ cuốc phỏng vấn trên sẽ được tổng hợp và sắp xếp tại phương pháp tiếp theo Affinity Mapping – Biểu đồ mối quan hệ Ngoài các câu hỏi được trao đổi, phỏng vấn mà còn là quá trình kiểm thử người dùng khi họ sử dụng một ứng dụng mua sắm thực phẩm tương tự thông qua một Scenarios (kịch bản) và Tasks (nhiệm vụ) được biên soạn sẵn. Tổng cộng gồm 3 Scenarios (kịch bản) với mỗi Scenario là một loạt danh sách các Tasks (nhiệm vụ) như sau: Scenario 1: Khám phá sản phẩm theo danh mục: • Xem danh mục – Chọn danh mục Rau củ & Trái cây. • Chọn Rau quả. • Xem danh sách các sản phẩm Rau quả phổ biến . • Xem chi tiết sản phẩm – tên và hình ảnh. • Xem chi tiết sản phẩm – mô tả sản phẩm. • Xem chi tiết sản phẩm – khuyên dùng. • Xem sản phẩm khác. • Lưu vào yêu thích. 46
  48. Scenario 2: Tìm kiếm một sản phẩm quan tâm: • Chọn tìm kiếm. • Nhập “Thịt bò” vào ô tìm kiếm. • Chọn sản phẩm “Thịt bò” bất kỳ. • Xem chi tiết sản phẩm – tên và hình ảnh. • Xem chi tiết sản phẩm – mô tả sản phẩm. • Xem chi tiết sản phẩm – khuyên dùng. • Xem các sản phẩm khác. • Lưu vào yêu thích. Scenario 3: Hoàn thành một đơn hàng thành công: • Đăng ký. • Đăng nhập. • Xem giỏ hàng. • Thực hiện quá trình thanh toán. • Chọn địa chỉ giao hàng. • Nhập địa chỉ giao hàng. • Chọn thời gian giao hàng. • Chọn phương thức thanh toán. • Chọn đặt hàng. • Hoàn tất đặt hàng. 47
  49. Báo cáo các kết quả thu nhận được: Hình 3.17 Kết quả thu nhận được 48
  50. CHƯƠNG 4: DIFINE – GIAI ĐOẠN XÁC ĐỊNH CÁC VẤN ĐỀ Trong bước này, việc phân tích nghiên cứu từ giai đoạn Discover để rút ra những hiểu biết sâu sắc từ dữ liệu sẽ giúp xác định, đưa ra được các vấn đề người dùng đang tìm kiếm và là giai đoạn mở đầu cho giai đoạn thứ ba Ideate (Ý tưởng). Xác định các vấn đề ở giai đoạn này tập trung chủ yếu vào vấn đề của người dùng hơn là vấn đề kinh doanh của doanh nghiệp. Dựa trên các vấn đề mà ta đã thu thập được từ việc quan sát và lắng nghe, ta cần đưa ra các câu hỏi để tìm ra cách giải quyết các vấn đề đó. “ Làm thế nào để tôi giải quyết vấn đề + nhu cầu của người dùng ? ” Ví dụ: Làm thế nào để tôi có thể giúp cô ấy mua được những sản phẩm cần thiết ngay cả khi cô ấy đang làm việc ? Một số phương pháp được thực hiện trong giai đoạn này bao gồm: • Affinity Mapping: Để sắp xếp đống dữ liệu hỗn loạn. • User Personas: Mô hình người dùng mẫu. • User Stories: Câu chuyện người dùng. Hình 4.1 Giai đoạn phân tích – xác định vấn đề 49
  51. 1. Affinity Mapping – Biểu đồ mối quan hệ Biểu đồ mối quan hệ là một công cụ thường được sử dụng để tổ chức dữ liệu. Biểu đồ mối quan hệ giúp ta sắp xếp thông tin thành các nhóm của các mục tương tự để sau đó phân tích dữ liệu định tính hoặc quan sát. Ta sử dụng biểu đồ mối quan hệ để sắp xếp các phản hồi của những người dùng được phỏng vấn và phân chia chúng thành các nhóm. Với biểu đồ này, ta có thể xác định các thói quen, vấn đề phổ biến của người dùng. Biểu đồ cũng giúp chúng ta xác định 2 personas chính (được xây dựng bên dưới) bằng cách nhóm chúng lại với nhau. Hình 4.2 Biểu đồ mối quan hệ cho việc người dùng chọn mua hàng tại các cửa hàng trực tuyến thay vì các cửa hàng, siêu thị 50
  52. Hình 4.3 Biểu đồ mối quan hệ cho việc người dùng chọn mua hàng tại cửa hàng siêu thị thay vì mua các cửa hàng trực tuyến Hình 4.4 Biểu đồ mối quan hệ cho 2 quá trình Giao – nhận hàng và Tìm kiếm sản phẩm 51
  53. Hình 4.5 Biểu đồ mối quan hệ về thói quen nấu ăn của người dùng 52
  54. 2. User Personas – Mô hình người dùng mẫu 2.1 User Personas là gì ? Personas là những người dùng nguyên mẫu có mục tiêu và đặc điểm đại diện cho nhu cầu của một nhóm người dùng lớn hơn. Hình 4.6 Các thành phần trong mô hình User Personas User Personas mô tả các hành vi, mục tiêu, kỹ năng, thái độ và thông tin cơ bản, cũng như môi trường mà một người dùng hoạt động. Thường thì sẽ được thêm một vài chi tiết cá nhân hư cấu vào một mô tả để biến nhân vật thành một 53
  55. nhân vật thực tế (ví dụ như trích dẫn của người dùng thực), cũng như các chi tiết cụ thể theo ngữ cảnh. 2.2 Tầm quan trọng của User Personas ? Hiểu rõ về đối tượng mục tiêu là nền tảng để tạo ra các sản phẩm đặc biệt. Personas giúp ta sản phẩm tìm câu trả lời cho một trong những câu hỏi quan trọng nhất, chúng ta đang thiết kế cho ai? Bằng cách hiểu được những kỳ vọng, mối quan tâm và động lực của người dùng mục tiêu, có thể thiết kế một sản phẩm đáp ứng nhu cầu của người dùng. • Xây dựng sự đồng cảm với người dùng: Đồng cảm là một giá trị cốt lõi nếu ta muốn tạo ra thứ gì đó tốt cho những người sẽ sử dụng nó. Personas giúp ta tạo ra sự hiểu biết và đồng cảm với người dùng. Nhờ personas ta có thể: Có được một góc nhìn tương tự như góc nhìn của người dùng. Tạo personas có thể ta bước ra khỏi chính họ và nhận ra rằng những người khác nhau có nhu cầu và mong đợi khác nhau. Bằng cách suy nghĩ về nhu cầu của một nhân vật trong user personas, ta có thể xác định được đâu là điều ta thực sự cần. Xác định được đâu là người dùng mà ta đang thiết kế. • Cung cấp giải pháp để đưa ra quyết định: Personas giúp ta định hình chiến lược sản phẩm. Sự hiểu biết sâu sắc về hành vi và nhu cầu của người dùng cho phép xác định ai là sản phẩm được tạo ra và những gì cần thiết hoặc không cần thiết cho họ theo quan điểm lấy người dùng làm trung tâm. • Truyền đạt kết quả nghiên cứu: Personas tổ hợp lại các thông tin quan trọng nhất về người dùng. Giúp sản phẩm của chúng ta đồng cảm với các vần đề của người dùng. Đạt được các vấn đề sau: - Goals - Mục tiêu của người dùng. - Aspirations - Mong muốn của người dùng. - Movitations - Động lực của người dùng là gì ? - Đối tượng nào có nhu cầu sử dụng Foam Market ? 54
  56. Hình 4.7 User Personas thứ nhất Hình 4.8 User Personas thứ hai 55
  57. 3. User Stories – Câu chuyện người dùng 3.1 User Stories là gì ? User Stories là một mô tả ngắn gọn, đơn giản về một tính năng của sản phẩm, được kể từ góc nhìn của người muốn tính năng đó hoặc với tư cách là người dùng tiềm năng hiện có của sản phẩm hoặc dịch vụ. 3.2 Làm thế nào để bạn tạo một User Stories? Chúng bao gồm 3 phần: • Người dùng • Tính năng người dùng yêu cầu • Nhu cầu được thỏa mãn bởi tính năng đó Ví dụ: As a (user) I want a (feature) so that I can (satisfy a need). Là một (người dùng) tôi muốn một (tính năng) để tôi có thể (thỏa mãn nhu cầu). Epic là gì? Một Epic về cơ bản là một user stories rất lớn có thể bao gồm nhiều user stories nhỏ hơn khác. Ví dụ (Airbnb): Tôi muốn tìm các điểm đến kỳ nghỉ và du lịch nước ngoài. Bước 1: Viết Epic của chúng tôi . • Epic 1 Là người dùng, tôi muốn khám phá những điểm đến mới và thú vị • Epic 2 Là người dùng, tôi muốn đặt chỗ ở tại một thành phố nước ngoài. • Epic 3 Là người dùng Tôi muốn tạo trải nghiệm ở thành phố nước ngoài . Bước 2: Chia những epic này thành những user stories nhỏ hơn. 56
  58. Hình 4.9 User Stories về quá trình đăng ký/đăng nhập 57
  59. Hình 4.10 User Stories về quá trình chọn sản phẩm cần mua Hình 4.11 User Stories về quá trình mua sản phẩm 58
  60. Hình 4.12 User Stories về quá trình chọn món ăn Hình 4.13 User Stories về quá trình chọn xem thông tin tài khoản 59
  61. 4. Paint Points & Solution – Các vấn đề được xác định và các giải pháp Hình 4.14 Các vấn đề của người dùng và cách giải quyết 60
  62. CHƯƠNG 5: IDEATE – GIAI ĐOẠN HÌNH THÀNH Ý TƯỞNG CHO ỨNG DỤNG FOAM MARKET Bây giờ mọi vấn đề đã rõ ràng, giờ đây là lúc tìm cách giải quyết những nhu cầu, vấn đề chưa được đáp ứng đó. Giai đoạn Idate (ý tưởng) bao gồm giữa việc khởi tạo và đánh giá ý tưởng. Nhưng điều quan trọng là hai quy trình trên vẫn phải tách biệt với nhau. Khởi tạo riêng và đánh giá riêng. Khi đã đến lúc tạo ra ý tưởng, thực hiện nhanh chóng các ý tưởng mà không cần tập trung vào chất lượng hoặc tính khả thi của ý tưởng. Ta sẽ không bao giờ biết liệu những ý tưởng không khả thi có thể truyền cảm hứng cho người khác hay không. Tại giai đoạn này việc phân cấp thông tin (Information Archietecture - IA) là việc quan trọng hơn cả. Nó là cách các thông tin được bố trí như thế nào trên ứng dụng. IA có thể được chia thành các phần sau: • Identify – Xác định: Nội dung nào ta cần sử dụng để mô tả được ứng dụng? Xác định mọi phần cần thiết trong việc truyền đạt những gì ta muốn chuyển tiếp đến người dùng của mình? • Classify – Phân loại: Phân loại nội dung và tìm hiểu làm thế nào nó sẽ được chia thành tổ chức của thiết kế. • Map - Bản đồ: Cấu trúc và sắp xếp các ý tưởng, cho thấy mỗi khái niệm hoặc khối nội dung sẽ dẫn đến tiếp theo như thế nào. Sau khi ý tưởng được thu thập, chuyển sang giai đoạn đánh giá. Đây là nơi cần làm rõ các ý tưởng. Các ý tưởng cần đảm bảo được các yếu tố: • Giải quyết được nhu cầu người dùng • Giải quyết được nhu cầu của doanh nghiệp 61
  63. • Phù hợp với tính chất công nghệ Một số phương pháp được sử dụng trong giai đoạn này bao gồm: • Storyboard: Bảng phân cảnh người dùng. • Cart Sorting: Sắp xếp danh mục. • Sitemap: Sơ đồ website/ứng dụng. • User Flows: Luồng đi của người dùng trong ứng dụng. Hình 5.1 Giai đoạn Ideate – hình thành ý tưởng 62
  64. 1. Storyboard – Câu chuyện người dùng 1.1 Storyboard là gì? Là hình minh họa đại diện cho một câu chuyện, một kịch bản. Về cơ bản, nó là một công cụ bao gồm các khung liên tiếp, trong đó các hình minh họa được sắp xếp để trực quan hóa câu chuyện. Phương pháp này đã phát triển từ việc sản xuất các hình ảnh chuyển động trong thiết kế trải nghiệm người dùng. Câu chuyện hoặc kịch bản đóng một vai trò quan trọng trong thiết kế trải nghiệm người dùng. Trong quá khứ, chúng ta thậm chí có thể gọi nó là công cụ mạnh nhất. 1.2 Storyboard trong thiết kế UX là gì? Là một công cụ giúp người dùng dự đoán trực quan và khám phá trải nghiệm sản phẩm. Storyboard giống như một bộ phim về cách mọi người sẽ sử dụng sản phẩm của bạn. Nó giúp ta hiểu cách mọi người sẽ theo dòng chảy thông qua tương tác với sản phẩm theo thời gian. Hình 5.2 Storyboard trong ux design 63
  65. Hình 5.3 Storyboard thứ nhất 64
  66. Hình 5.4 Storyboard thứ hai 65
  67. Hình 5.5 Storyboard thứ ba 66
  68. 2. Cart Sorting – Sắp xếp thẻ 2.1 Cart Sorting là gì ? Cart sorting là một công cụ nghiên cứu được sử dụng để đánh giá hoặc xác định cách thông tin được phân cấp, dán nhãn và sắp xếp trên một trang web, ứng dụng bằng cách sắp xếp các chủ đề nội dung thành các danh mục có ý nghĩa. Cart Sorting giúp ta hiểu những gì người dùng mong đợi ở một trang web, ứng dụng để ta có thể cung cấp một sản phẩm đáp ứng nhu cầu của họ. Tạo cấu trúc trong nội dung bằng cách sử dụng thông tin thu được từ sắp xếp thẻ sẽ thúc đẩy sự tương tác mượt mà hơn giữa người dùng và hệ thống bằng cách trình bày thông tin theo cách dễ dàng truy cập và có thể tìm thấy đối với họ. 2.2 Tại sao chúng ta lại sử dụng Cart Sorting ? Khi lập kế hoạch thiết kế trang web, ứng dụng việc sắp xếp thẻ có thể cung cấp cho ta cái nhìn sâu sắc về cách các mục nên được nhóm và cách điều hướng nên được xác định và cấu trúc. Nó có thể trả lời các câu hỏi như: • Có gì trên trang chủ? • Những phần nên được tạo ra và chúng bao gồm những gì? • Cách tốt nhất để trình bày thông tin cho người dùng để họ tìm thấy nó và hoàn thành một nhiệm vụ là gì? Cart Sorting được sử dụng để đánh giá kiến trúc thông tin (IA – Information Archietecture) của một trang web. IA xem xét một số khía cạnh khác nhau của trải nghiệm người dùng khi tương tác với sản phẩm. Làm thế nào để người tham gia tìm kiếm thông tin và sau đó duyệt qua nó? Là người thiết kế, làm thế nào bạn có thể trình bày thông tin một cách hiệu quả cho phép người dùng truy cập thông tin một cách trơn tru? 67
  69. 2.3 Thực hành Cart Sorting Ở đây ta sẽ sử dụng 2 phương pháp để thực hiện Cart Sorting: • Open Cart Sorting - Sắp xếp thẻ mở: Phân loại thành hơn 80 sản phẩm khác nhau thành các danh mục phù hợp với từng sản phẩm. Sau đó, gắn nhãn cho từng nhóm với tiêu đề mà ta cảm thấy mô tả chính xác các mục trong danh mục đó. Mục tiêu của việc này là để có được sự hiểu biết về các cách tiềm năng mà các sản phẩm trên ứng dụng Foam Market có thể được phân loại và cách các danh mục đó có thể được dán nhãn. • Close Card Sorting - Sắp xếp thẻ đóng: Dựa trên kết quả của việc sắp xếp thẻ mở, tạo thành 9 danh mục được xác định trước từ các nhãn nhóm phổ biến nhất. Sau đó, tiến hành sắp xếp các mặt hàng vào các danh mục được xác định trước này. Điều này giúp làm rõ liệu các danh mục đó có hợp lý với đa số người dùng hay không trước khi ta bắt đầu phát triển với thiết kế của mình. Hình 5.6 Giai đoạn thực hiện Cart Sorting 68
  70. Hình 5.7 Kết quả quá trình Cart Sorting 69
  71. 3.1 Site map là gì ? Sơ đồ trang web là một sơ đồ phân cấp hiển thị cấu trúc của một trang web hoặc ứng dụng. Sitemap được sử dụng ta để xác định phân loại thông qua việc nhóm các nội dung liên quan. Chúng là một bước quan trọng của quy trình lấy người dùng làm trung tâm vì chúng đảm bảo nội dung nằm ở những nơi mà người dùng sẽ mong muốn tìm thấy nó. Sitemap cũng có thể được sử dụng làm điểm tham chiếu cho wireframes. 3.2 Tại sao ta nên sử dụng site map? • Giúp xác định nơi nội dung, cấu trúc của một website, ứng dụng và những gì cần được thực hiện. • Chúng giúp hiển thị mối quan hệ giữa các trang khác nhau. • Cung cấp một cấu trúc để bắt đầu ước tính cho sự phát triển. • Sitemap là những sản phẩm hữu hình đầu tiên thể hiện những gì ta sẽ tạo ra Hình 5.8 Ví dụ về Sơ đồ Sitemap 70
  72. 3.3 Thực hành Sitemap và kết quả thu được. Hình 5.9 Sơ đồ Sitemap của Foam Market 71
  73. 3. User Flow – Sơ đồ luồng đi của người dùng 4.1 User Flow là gì ? Có nhiều con đường khác nhau mà người dùng có thể thực hiện khi tương tác với sản phẩm. User Flow là một sơ đồ trực quan, được vẽ ra hoặc được thực hiện bằng kỹ thuật số, mô tả luồng đi người dùng được thực hiện khi sử dụng một ứng dụng hoặc trang web. Được bắt đầu với điểm vào của người tiêu dùng trên sản phẩm, như màn hình onboarding hoặc homepage và kết thúc bằng hành động hoặc kết quả cuối cùng, như mua sản phẩm hoặc đăng ký tài khoản. Việc mô tả quá trình này cho phép ta đánh giá và tối ưu hóa trải nghiệm người dùng và do đó tăng tỷ lệ chuyển đổi của khách hàng. 4.2 Các lợi ích mà User Flow đem lại • Tạo giao diện trực quan: Lợi ích chính của việc thiết kế một sản phẩm nơi người dùng có nhanh chóng khám phá, sử dụng website, ứng dụng, tăng xác suất người dùng mua hoặc sử dụng sản phẩm. Một lợi ích khác là tăng cường sự dễ dàng di chuyển qua nền tảng, đảm bảo thời gian của người dùng không bị lãng phí khi tìm kiếm những việc cần làm tiếp theo. Tất nhiên, thường có nhiều hơn một tuyến đường mà người dùng có thể đi theo để hoàn thành nhiệm vụ. User Flow mô tả các mẫu có thể này theo cách giúp ta dễ dàng đánh giá hiệu quả của giao diện họ đang tạo. • Đánh giá các giao diện hiện có: Đối với các sản phẩm đã được sử dụng, User Flow giúp xác định những gì đang hoạt động, những gì không và những lĩnh vực cần cải thiện. Nó giúp xác định lý do tại sao người dùng có thể bị đình trệ tại một thời điểm nhất định và những gì ta có thể làm để khắc phục nó. • Trình bày sản phẩm của bạn cho khách hàng hoặc đồng nghiệp: User Flow cũng dễ dàng truyền đạt sản phẩm tới các bên liên quan và cung cấp cái nhìn chung về cách giao diện bạn đã tạo được dự định hoạt động ở dạng hiệu quả nhất. 72
  74. Hình 5.10 Flow đăng nhập của người dùng 73
  75. Hình 5.11 Flow vượt qua Flash Test của người dùng 74
  76. Hình 5.10 Flows Tìm kiếm sản phẩm và Mua sản phẩm của người dùng 75
  77. Hình 5.11 Flow Thanh toán sản phẩm của người dùng 76
  78. Hình 5.12 Flow Kiểm tra lịch sử mua hàng của người dùng 77
  79. Hình 5.13 Flow Thêm một sản phẩm vào danh sách yêu thích 78
  80. CHƯƠNG 6: DESIGN – THIẾT KẾ ỨNG DỤNG: 1. Design – Thiết kế ứng dụng Đây có lẽ là giai đoạn thú vị nhất của quá trình phát triển sản phẩm. Là quy trình kế thừa tất cả các dữ liệu, thông tin, kết quả từ 3 quy trình trước (Discover – Difine – Ideate) dần được hình thành và mô tả qua các hình ảnh trực quan. Cái nhìn ban đầu về ứng dụng cơ bản đã được hình thành trong giai đoạn này. Tuy nhiên, thực hiện UI không phải là gạt bỏ UX sang một bên, mà luôn luôn cần phải hòa hợp giữa 2 yếu tố UX và UI. Một số phương pháp được sử dụng trong giai doạn này bao gồm: • Low fi wireframes: Khung nguyên mẫu cấp thấp • High fi wireframes: Khung nguyên mẫu cấp cao • UI Style Guide: Bộ hướng dẫn sử dụng • Visual Design: Thiết kế trực quan • Propotype: Bản mẫu của ứng dụng Hình 6.1 Thiết kế Landing Page của một website 79
  81. 2. Wireframes là gì ? 2.1 Khái niệm về Wireframes ? Không giống với bản thiết kế kiến trúc, wireframes là một phác thảo khung màn hình hai chiều của trang web hoặc ứng dụng. Wireframes cung cấp một cái nhìn tổng quan rõ ràng về cấu trúc trang, bố cục, kiến trúc thông tin, luồng người dùng , chức năng và các hành vi dự định. Vì wirdframes thường đại diện cho khái niệm sản phẩm ban đầu, kiểu dáng, màu sắc và đồ họa được giữ ở mức tối thiểu. Các khung lưới có thể được vẽ bằng tay hoặc được tạo bằng kỹ thuật số, tùy thuộc vào mức độ chi tiết được yêu cầu. Wireframing là được sử dụng phổ biến nhất bởi các nhà thiết kế UX. Quá trình này cho phép tất cả các bên liên quan đồng ý về nơi thông tin sẽ được đặt trước khi các nhà phát triển xây dựng giao diện. Hình 6.2 Một sơ đồ wireframes 80
  82. 2.2 Mục đích của Wireframes là gì ? • Wireframes giúp ta luôn tập trung vào người dùng: Wireframes được sử dụng hiệu quả như các thiết bị truyền thông, họ tạo điều kiện cho phản hồi từ người dùng, thúc đẩy các cuộc trò chuyện với các bên liên quan và tạo ra ý tưởng giữa các nhà thiết kế. Tiến hành thử nghiệm người dùng trong giai đoạn sơ khai của wireframes giúp ta tiếp nhận được những phản hồi chính xác từ người dùng và xác định vấn đề chính để thiết lập và phát triển sản phẩm.Wireframing là cách hoàn hảo để ta đánh giá cách người dùng sẽ tương tác với giao diện. Bằng cách sử dụng các văn bản như Lorem Ipsum, văn bản giả tiếng Latinh đóng vai trò thay thế cho nội dung trong tương lai, ta có thể hỏi người dùng bằng các câu hỏi như “bạn mong đợi điều gì sẽ được viết ở đây?’ Những câu trả lời sẽ giúp ta hiểu được những gì cảm thấy trực quan cho người dùng và tạo ra các sản phẩm thoải mái và dễ sử dụng. • Wireframes làm rõ và xác định các tính năng trang web: Khi truyền đạt ý tưởng của ta tới khách hàng, họ có thể không có từ vựng kỹ thuật để theo kịp các thuật ngữ. Các tính năng cụ thể của Wireframing sẽ gợi ý rõ ràng với khách hàng về cách họ sẽ hoạt động. Wireframing cho phép tất cả các bên liên quan đánh giá lượng không gian cần phân bổ cho mỗi tính năng, kết nối kiến trúc thông tin của trang web với thiết kế trực quan của nó và làm rõ chức năng của trang. Xem các tính năng trên wireframes cũng sẽ cho phép ta hình dung cách tất cả chúng hoạt động như thế nào và thậm chí có thể nhắc ta quyết định xóa một số nếu ta cảm thấy chúng không hoạt động tốt với các yếu tố còn lại của trang. • Wireframes là nhanh chóng và giá thành rẻ: Wireframes cực kỳ rẻ và dễ tạo. Trên thực tế, chỉ cần sẵn bút và giấy, ta có thể nhanh chóng 81
  83. phác thảo ra một khung dây mà không tốn một xu. Sự phong phú của các công cụ có sẵn có nghĩa làta cũng có thể xây dựng một wireframes kỹ thuật số trong vòng vài phút. Thông thường, khi một sản phẩm dường như quá bóng bẩy, người dùng sẽ ít thành thật về những ấn tượng đầu tiên của họ. Nhưng bằng cách phơi bày cốt lõi của bố cục trang, các lỗ hổng và vấn đề có thể dễ dàng được xác định và khắc phục mà không có bất kỳ chi phí đáng kể nào về thời gian hoặc tiền bạc. Càng về sau trong quá trình thiết kế sản phẩm, càng khó thực hiện các thay đổi! 2.3 Các loại wireframes thường thấy ? • Low-fidelity wireframes: Các low – fi wireframes là các biểu diễn trực quan cơ bản của trang web, ứng dụng và thường đóng vai trò là điểm khởi đầu của thiết kế. Như vậy, chúng có xu hướng khá thô, được tạo ra mà không có bất kỳ ý nghĩa nào về tỷ lệ, lưới hoặc độ chính xác pixel. Các khung lưới có độ chính xác thấp bỏ qua bất kỳ chi tiết nào có khả năng gây mất tập trung và chỉ bao gồm các hình ảnh đơn giản, hình dạng khối và giả lập nội dung giả tưởng như văn bản phụ cho nhãn và tiêu đề. Các low - fi wirframes rất hữu ích để bắt đầu các cuộc hội thoại, quyết định bố cục điều hướng và ánh xạ luồng người dùng. Chúng cũng cực kỳ hữu ích khi ta muốn nhanh chóng quyết định hướng bản thiết kế sẽ diễn ra như thế nào. Hình 6.3 Low fi wireframes 82
  84. • Mid-fidelity wireframes: Các khung dây được ít nhất trong ba loại wireframes. Mặc dù chúng vẫn tránh các phiền nhiễu như hình ảnh hoặc kiểu chữ, chi tiết hơn được gán cho các thành phần cụ thể và các tính năng được phân biệt rõ ràng với nhau. Trọng lượng văn bản khác nhau cũng có thể được sử dụng để phân tách các tiêu đề và nội dung cơ thể. Mặc dù vẫn là màu đen và trắng, ta có thể sử dụng các sắc thái khác nhau của màu xám để truyền đạt sự nổi bật về thị giác của các yếu tố riêng lẻ. Mặc dù chúng vẫn có liên quan trong giai đoạn đầu của sản phẩm, các mid – fi wireframes thường được tạo bằng công cụ tạo khung kỹ thuật số. Hình 6.4 Mid fi wireframes 83
  85. • High Fidelity Wireframes: Trong trường hợp low - fiwireframes có độ chính xác thấp có thể bao gồm các bộ đệm văn bản giả Latin và các hộp màu xám được điền 'X' để chỉ ra hình ảnh, các high – fi wireframes có thể bao gồm các hình ảnh đặc trưng thực tế và nội dung bằng văn bản có liên quan. Chi tiết được thêm vào này làm cho high wireframes có độ chính xác cao lý tưởng để khám phá và ghi lại các khái niệm phức tạp như hệ thống menu hoặc bản đồ tương tác. High – fi wireframes nên được lưu cho các giai đoạn sau của chu trình thiết kế của sản phẩm. Hình 6.5 High fi wireframes 84
  86. 3. Thực hành Low – fi wireframes Sử dụng 2 công cụ chính là bút và giấy để bắt đầu vẽ và hình thánh ý tưởng giao diện cho ứng dụng. Dựa theo Sitemap và User Flows để xác định các màn hình cần thực hiện Hình 6.6 Bản low fi wireframes cho Màn hình chính và Chi tiết sản phẩm 85
  87. Hình 6.7 Bản low fi wireframe cho Màn hình thực đơn và Chi tiết món ăn 86
  88. Hình 6.8 Bản low fi wireframe cho màn hình Search - Tìm kiếm sản phẩm 87
  89. Hình 6.9 Bản low fi wireframe cho màn hình Sản phẩm ưa thích 88
  90. Hình 6.10 Bản low fi wireframe cho màn hình Giỏ hàng 89
  91. Hình 6.11 Bản low - fi wireframe cho màn hình Thanh toán và Chọn ngày giờ giao hàng Hình 6.12 Bản low fi wireframe cho màn hình Thanh toán và Địa chỉ giao hàng 90
  92. 4. Thực hành High – fi wireframe Phát triển trên các màn hình low fi wireframe đã thiết kế từ trước thông qua ứng dụng Figma (Một ứng dụng phổ biến trong việc thiết kế giao diện cho website và application). Hình 6.13 Một số màn hình Hi – fi wireframes được khỏi tạo Trước khi khởi tạo Hi – fi wireframes, cần thiết kế Grid System (hệ thống khung lưới). Grid System giúp cho giao diện được định hình theo khung lưới đã thiết kế sẵn và cấu trúc thông tin sẽ được tổ chức rõ ràng, ngăn nắp. Grid Layout dưới đây sẽ được sử dụng xuyen suốt cho toàn bộ quá trình thiết kế từ Wireframes -> Guideline -> Visual Desgin B1: Khởi tạo một màn hình làm chuẩn. Ở đây ta sẽ chọn kích thước màn hình Iphone X với kích thước 317x812 pixel. B2: Tại Layout Grid trên thanh công cụ Design. Chọn biểu tượng + B3: Ta sẽ cài đặt 2 Grid là Grid Columns và Grid Rows với các thông số như sau: 91
  93. Hình 6.14 Thông số Grid Rows Hình 6.15 Thông số Grid Columns 92
  94. Hình 6.16 Grid Layout của Foam Market Hình 6.17 Wireframes của các màn hình Đăng nhập và Flash Test 93
  95. Hình 6.18 Wireframes của các màn hình Trang chủ và Chi tiết sản phẩm Hình 6.19 Wireframes của các màn hình Ưa thích 94
  96. Hình 6.20 Wireframes của các màn hình Sản phẩm Hình 6.21 Wireframes của các màn hình Tìm kiếm 95
  97. Hình 6.22 Wireframes của các màn hình Kiểm tra thanh toán và Giỏ hàng Hình 6.23 Wireframes của các màn hình Địa chỉ giao hàng 96
  98. Hình 6.24 Wireframes của các màn hình Thanh toán Hình 6.25 Wireframes của các màn hình Chọn ngày giờ giao hàng 97
  99. 5. UI Guideline: 5.1 UI Guideline là gì ? Guideline là các hướng dẫn, nguyên tắc để thực hiện theo đúng tiêu chuẩn và định hướng chung.Trong thiết kế UI, để thiết kế trải nghiệm đúng tiêu chuẩn và nhất quán cho toàn bộ sản phẩm của mình, ta cần tuân theo một vài định luật và guideline cần thiết. Các guideline UI giải thích về thành phần UI và hiểu rõ hành vi của người dùng bằng cách đưa ra các mẫu ví dụ thực tiễn. Những guideline này thường được định nghĩa ở cấp độ tổ chức và không kém phần hữu ích cho các nhà thiết kế, lập trình viên và người thử nghiệm . “Guideline là một ngôn ngữ trực quan để truyền thông các mục tiêu thiết kế trong nhóm, điều quan trọng là đảm bảo mọi người đều có thể hiểu và thực hiện việc sử dụng nó. ”- Yuki Gu Một vài tổ chức nổi tiếng quan tâm đến UX đã xuất bản guideline riêng trên trang web của họ. Điều này rất hữu ích cho các công ty cũng như các cá nhân để tạo ứng dụng và plug-ins. Ngoài ra, bất kỳ ai cũng có thể tùy chỉnh và sử dụng các guideline này theo yêu cầu. Hình 6.26 Một bộ UI Guideline thường thấy 98
  100. 5.2 Phân loại UI Guideline • Style: Các style (kiểu) của guideline xác định hình thức thị giác của một tổ chức mà nó trình bày. Mỗi tổ chức đều có kiểu guideline riêng mà họ sử dụng để xây dựng logo, màu sắc, icon và typography. • Layout: Layout của guideline nhằm xác định cấu trúc tổng thể của giao diện. UI có thể được thiết kế bằng layout lưới hoặc layout danh sách. Phần guideline này cũng chứa hành vi của thiết kế responsive (thiết kế đáp ứng). • Thành phần UI: Những guideline này cung cấp thông số kỹ thuật và cách sử dụng các thành phần UI hiển thị trên giao diện và tương tác của người dùng với chúng.Các thành phần UI bao gồm các kiểm soát tiêu chuẩn như kiểm soát đầu vào, cửa sổ, hộp thoại, bảng, menu, chế độ xem, thanh cuộn, nút và nhiều mục tương tự khác. • Văn bản: Guideline văn bản bao gồm tone và kiểu văn bản được sử dụng trên UI. Văn bản phải dễ hiểu đối với các nền văn hóa và người xem khác nhau.Thông số của văn bản như kích thước font chữ, màu sắc và style là một phần của guideline này. Văn bản hiển thị trên UI dưới dạng trường, nhãn, thư và thông tin cho người dùng. • Tương tác và 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 hiện với thiết kế, và phản hồi của hệ thống để đáp trả lại các tương tác đều thuộc trong guideline này. • Tài nguyên: Guideline có một tập hợp các tài nguyên có thể được sử dụng khi thiết kế một hệ thống.Các tài nguyên này chứa layout template cho nhiều thiết bị, bộ icon, thư viện font chữ, thành phần UI và bảng màu. 99
  101. 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 chính (Primary Colors), chủ đạo được lấy trực tiếp từ chính thương hiệu Foam Market. Không quên đặt tên cho từng màu sắc để dể dàng gọi và sử dụng sau này. Thêm các tông màu thể hiện sắc độ của 2 tông màu chính bằng cách: Thêm % màu trắng vào 2 tông màu chính là Green Garden và Sand Hill với % màu trắng lần lượt như sau: 80%, 60%, 40%, 20%. Hình 6.27 Hai màu sắc chủ đạo của Foam Market Cùng với các màu sắc bổ trợ (Secondaty Colors) khác được lấy cảm hứng từ chính các màu sắc luôn hiện hữu với Foam Market. Màu sắc từ những gian hàng thực phẩm, từ những ánh đèn trang trí và cả màu sắc trên khuôn nông trại của Foam Market. Hình 6.28 Nguồn cảm hứng màu sắc từ chính thương hiệu Foam Market. 100
  102. Hình 6.29 Các màu sắc bổ trợ của Foam Market 101
  103. 5.3.2 Typographys Chọn font chữ cho ứng dụng, với một phong cách trẻ trung, hiện đại mà Foam Market muốn hướng tới. Font chữ mà ta sẽ lựa chọn là: SF Pro Display Hình 6.30 SF Pro Display và các định dạng của nó được sử dụng trong ứng dụng Foam Market. 102
  104. 5.3.3 Xây dựng các UI Component cơ bản. Thiết kế các component cơ bản như: Button, Navigation, Tab bar, Input field, theo các thông số kích thước như sau: Hình 6.31 Thành phần và thông số của 2 loại button 103
  105. Hình 6.32 Thành phần và thông số của Input field và Dropdown menu 104
  106. Hình 6.33 Thành phần và thông số của Navigation Bar 105
  107. Hình 6.34 Một số thành phần cơ bản khác 1 106
  108. Hình 6.35 Một số thành phần cơ bản khác Sau khi đã thiết kế được các thành phần cơ bản trên, sắp xếp nội dung – hoàn thành giao diện sản phẩm. 107
  109. CHƯƠNG 7: TỔNG KẾT VÀ HƯỚNG PHÁT TRIỂN 1. Tổng kết và hạn chế: Qua quá trình thực hiện phân tích và thiết kế cho ứng dụng Foam, đã phần nào giải quyết được vấn đề của doanh nghiệp, đáp ứng nhu cầu cho ra mắt ứng dụng thương mại của doanh nghiệp này – đồ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 các đánh giá vấn đề của người dùng khi sử dụng các ứng dụng thương mại khác trên thị trường. Xây dựng, thiết kế được một ứng với đầy đủ các chức năng cần thiết, minh họa tốt cho các vấn đề lý thuyết đã trình bày. − Giao diện chương trình dễ sử dụng, thuận tiện và linh hoạt cho người dùng. − Ứng dụng được những điều đã học vào trong quá trình thực hiện xây dựng chương trình, qua đó nắm vững hơn kiến thức lý thuyết cơ bản, phục vụ cho việc thiết kế và xây dựng chương trình. Do thời gian nghiên cứu còn hạn chế và kinh nghiệm thực tế chưa nhiều nên em vẫn chưa hoàn thiện hẳn được ứng dụng trên. Vì thế nên không thể tránh khỏi những lỗi của chương trình. Em rất mong nhận được sự góp ý từ quý thầy, cô để em có thể phát triển và hoàn thiện chương trình đẩy đủ hơn. 2. Hướng phát triển: Với mục đích là chương trình được ứng dụng thực tế nên trong tương lai, em sẽ phát triển chương trình theo những yêu cầu sau: Trau dồi kĩ năng lập trình để hoàn thiện chức năng mang tính nghiệp vụ. Bổ sung các chức năng hiệu chỉnh, thông báo, để người dùng có thể linh động hơn trong quá trình quản lý, thự hiện và sử dụng ứng dụng. Đem lại giá trị cho người dùng và cho doanh nghiệp. 108
  110. TÀI LIỆU THAM KHẢO 1. Từ Marina Yalanska, UX Design for E-Commerce: Principles and Strategies, principles-and-strategies/, Tubik Studio – 2020. 2. Từ Emily Stevens, What Is User Experience (UX) Design?, design-everything-you-need-to-know-to-get-started/, CareerFoundary – 2019. 3. Từ Jaye Hannah, What Exactly Is Wireframing? A Comprehensive Guide, CareerFoundary – 2019. 109