Embed Size (px)
Citation preview
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
\
1
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
2
NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
3
NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
..................................................................................................................................
4
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
5
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
6
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
7
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
8
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
9
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
10
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
11
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
12
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
13
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)
14
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.
15
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
16
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
17
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.
18
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
19
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.
20
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.
21
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
22
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
23
• 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
24
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
25
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
26
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
27
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 https://miro.com/.
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ơ đồ
28
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
29
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)
30
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.
31
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,
32
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
33
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
34
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.
35
• 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
36
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.
37
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.
38
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)
39
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
40
Hình 3.9 Sơ đồ diễn tả tình trạng hôn nhân
Hình 3.8 Sơ đồ diễn tả nghề nghiệp
41
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
42
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
43
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ử
44
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
45
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:
46
• 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.
47
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.
48
Báo cáo các kết quả thu nhận được:
Hình 3.17 Kết quả thu nhận được
49
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 đề
50
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ị
51
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
52
Hình 4.5 Biểu đồ mối quan hệ về thói quen nấu ăn của người dùng
53
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
54
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 ?
55
Hình 4.7 User Personas thứ nhất
Hình 4.8 User Personas thứ hai
56
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.
57
Hình 4.9 User Stories về quá trình đăng ký/đăng nhập
58
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
59
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
60
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
61
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
62
• 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
63
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
64
Hình 5.3 Storyboard thứ nhất
65
Hình 5.4 Storyboard thứ hai
66
Hình 5.5 Storyboard thứ ba
67
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?
68
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
69
Hình 5.7 Kết quả quá trình Cart Sorting
70
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
71
3.3 Thực hành Sitemap và kết quả thu được.
Hình 5.9 Sơ đồ Sitemap của Foam Market
72
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.
73
Hình 5.10 Flow đăng nhập của người dùng
74
Hình 5.11 Flow vượt qua Flash Test của người dùng
75
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
76
Hình 5.11 Flow Thanh toán sản phẩm của người dùng
77
Hình 5.12 Flow Kiểm tra lịch sử mua hàng của người dùng
78
Hình 5.13 Flow Thêm một sản phẩm vào danh sách yêu thích
79
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
80
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
81
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
82
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
83
• 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
84
• 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
85
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
86
Hình 6.7 Bản low fi wireframe cho Màn hình thực đơn và Chi tiết món ăn
87
Hình 6.8 Bản low fi wireframe cho màn hình Search - Tìm kiếm sản phẩm
88
Hình 6.9 Bản low fi wireframe cho màn hình Sản phẩm ưa thích
89
Hình 6.10 Bản low fi wireframe cho màn hình Giỏ hàng
90
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
91
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:
92
Hình 6.14 Thông số Grid Rows
Hình 6.15 Thông số Grid Columns
93
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
94
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
95
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
96
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
97
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
98
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
99
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.
100
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.
101
Hình 6.29 Các màu sắc bổ trợ của Foam Market
102
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.
103
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
104
Hình 6.32 Thành phần và thông số của Input field và Dropdown menu
105
Hình 6.33 Thành phần và thông số của Navigation Bar
106
Hình 6.34 Một số thành phần cơ bản khác 1
107
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.
108
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.
109
TÀI LIỆU THAM KHẢO
1. Từ Marina Yalanska, UX Design for E-Commerce: Principles and
Strategies, https://blog.tubikstudio.com/ux-design-for-e-commerce-
principles-and-strategies/, Tubik Studio – 2020.
2. Từ Emily Stevens, What Is User Experience (UX) Design?,
https://careerfoundry.com/en/blog/ux-design/what-is-user-experience-ux-
design-everything-you-need-to-know-to-get-started/, CareerFoundary –
2019.
3. Từ Jaye Hannah, What Exactly Is Wireframing? A Comprehensive Guide,
https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/,
CareerFoundary – 2019.
