Đồ án tốt nghiệp Công nghệ thông tin: Phân tích và Thiết kế ứng dụng cửa hàng thực phẩm cho FOAM MARKET

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC BÀ RỊA – VŨNG TÀU
KHOA CÔNG NGHỆ KỸ THUẬT – NÔNG NGHIỆP CÔNG NGHỆ CAO

----------

ĐỒ ÁN TỐT NGHIỆP

PHÁT TRIỂN VÀ THIẾT KẾ ỨNG DỤNG CỬA HÀNG THỰC
PHẨM CHO FOAM MARKET.

Sinh viên:

Phạm Huy Phong

Mã sinh viên:

16031753

Lớp:

DH16LT

Trình độ đào tạo:

Đại học

Ngành:

CNTT- Điện – Điện tử

Chuyên ngành:

Lập trình Internet 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
\


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 q trình làm khố 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


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

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


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


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


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


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


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ề q 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


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 tố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 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 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 tố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 tốn và Địa chỉ giao
hàng ................................................................................................................. 90
10


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 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 tố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 tố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


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


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 ngồ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


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


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 ln đặ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 ln ln đề 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


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


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

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


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 ngồ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


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ự đố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


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
đồ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

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 ngun 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


• 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 q 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


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