Tiểu luận môn học tương tác người – máy Đề tài triển khai ui:ux cho ứng dụng notes trên figma

Việc thiết kế giao điện người dùng Úser Interface và trải nghiệm người dùng Úser Experlence không chi đảm bảo sự tiện lợi mà còn tăng tính thâm mỹ và hiệu quả sử dụng của ứng dụng.. Với

TRƯỜNG ĐẠI HỌC THỦ DẦU MOT VIỆN DAO TAO CONG NGHE THONG TIN, CHUYEN DOI SO

TRUONG DAI HOC

Leg} THU DAU MOT

TRƯỜNG ĐẠI HỌC THỦ DAU MOT VIỆN DAO TAO CONG NGHE THONG TIN, CHUYEN DOI SO

TRUONG DAI HOC

(9) THU DAU MOT

TIEU LUAN MON HOC TƯƠNG TÁC NGƯỜI - MÁY

CHƯƠNG 1 TỎNG QUAN VẺ UX/UI DESIGN 00 22 tH 21a 1

1.1 Gidi thidu vé UX/UI design ST HH HH HH HH HH gu ngu 1

DDD BMG WII e< 1

1.1.2 Tầm quan trọng khác biệt của UX/UI SH HH HH HH ghe 2

1.2 Quy trình thiết kế UX/UI áp dụng Design Thinking 2.5 SH rea 2

CHƯƠNG2 PHAN TICH DOI THU CẠNH TRANH VẢ GIÁ TRỊ CÓT LÕI 4

2.1 Các đối thủ cạnh tranh với ứng dụng No(es ảnh HH He HH 4

2.1.1 Di thủ cạnh tranh trực tiếp [2.2.1.8 Na 4

2.1.2 Đối thủ cạnh tranh trực tiếp Microsoff QneiNOEe HH HH nên 5

2.1.3 Đi thủ cạnh tranh trực tiếp Google Keep ch nh HH HH reu 7

2.1.4 Di thủ cạnh tranh trực tiếp ,/7./ PERRRREEEE 9

2.1.5 Đối thủ cạnh tranh trực tiếp Apple Nof@ nh HH HH Hee ra 10

2.1.0 Đối thủ cạnh tranh gián tiép Zoho Notebook 12

2.1.7 Đối thủ cạnh tranh gián tiễn SIHĐÏ€HOfE HH He Hung 13

2.1.8 Đi thủ cạnh tranh gián tiễn Bear HH HH HH re 13

2.1.9 Đối thú cạnh tranh gián tiễn QHÍp HH HH re reu 14

2.1.10 Đối thủ cạnh tranh trực tiếp V}.-:/, ects tees seseetesteeseesseeeeees 15

2.2 Giá trị cốt lõi của ứng dụng Nofes ch HH HH HH rau ne 16

CHƯƠNG3 TÍNH NĂNG CÚA ỨNG DỤNG NOTES nh HH HH yu 18

3.1 Giới thiệu sơ lược về tính năng của ứng dụng Notes à ch Hn ren 18

3.1.2 GE WIC ANG cece cece css ssees cess seseevnveseseecesveseennvvseecessuvsessnisiteestinissesansieeennesee: 18

SLB, Chi 1 Lan ẽa ã .ă.ă.ăăăă ¬ 18

SLA, That SII HI oii auda r7 sẻ ố.ố.ố 18

3.1.5 Thêm yêu tHíÍCH TH HH Hà kh Hà HH kh HH kiện 18

Nhiệm vụ riêng biệt của UX/UI C1 1121221 122112111111011 1121111111101 151 1x nghiện 2

So dé Design Thinking Sàn TH tà nan HH 1n n HH nà nh Ha ung 3

Giao diện Tìm kiếm

Giao diện Đặt nhắc nhớ

Giao diện Chia sẻ ghỉ chú 1S 12 1n n1 1121120111111 H1 01 1n xà ưu 20 Giao diện Trạng thái hoàn thành công viỆc Q0 22H Ha 20 Giao diện yêu thích ghi chú - c2 2211221 112112111112211 21 011015112111 11 HH vn Hà 21

Bang 2

Bang 2

Bang 2

Bang 2

Bang 2

Bang 2

Bang 2

Bang 2

Bang 2

Bang 2

DANH MUC BANG

Phan tích SWOT của Evernofe L0 0 12 19 211111 H11 x1 ke huy

Phan tich SWOT cua Microsoft OneNote tre "

‹ Phân tích SWOT của Google Keep Q0 10 SH H11 1H HH yeu

Phan tích SWOT của Nofion Q0 210 n1 1H n nxkkHyyy

Phan tích SWOT của Apple Notes

Phan tich SWOT cua Zoho Notebook

Phan tich SWOT cua Simplenote

Phan tích SWOT của Bear

Phân tích SWOT của Quịp ¬ °

0 Phan tích SWOT của Trello L2 2 1122111211 121112211521 1215 H121 1H11 tre Hyyu

LOI CAM ON

Dé hoan thanh tiéu luan voi dé tai "Trién khai UL/UX cho ứng dung Notes trén

Figma", em xin gửi lời cảm ơn sâu sắc đến thầy Hồ Đắc Hưng đã dành thời gian hướng dẫn, hỗ trợ và cung cấp những ý kiến quý báu trong suốt quá trình thực hiện Sự tận tâm và chuyên môn của thầy là nguồn cảm hứng lớn để em hoàn thiện bài tiểu luận này

Em cũng xin chân thành cảm ơn các bạn học đã nhiệt tình chia sẻ kiến thức, kinh

nghiệm cũng như đóng góp ý tưởng trong quá trình làm việc Những ý kiến và sự hỗ trợ từ

mọi người đã giúp em cải thiện và phát triển tư duy thiết kế trong việc ứng dụng các

nguyên tắc UlI/UX

Một lần nữa, em xin chân thành cảm ơn thầy và các bạn đã đồng hành và góp phần

vào thành công của bài tiểu luận này

Trân trọng!

LOI MO DAU

Trong thời đại số hóa ngày nay, ứng dụng Ghi chú đã trở thành một công cụ không thể thiếu trong việc quản lý công việc và nâng cao hiệu quả cá nhân Việc thiết kế giao điện người dùng (Úser Interface) và trải nghiệm người dùng (Úser Experlence) không chi đảm bảo sự tiện lợi mà còn tăng tính thâm mỹ và hiệu quả sử dụng của ứng dụng Với đề tài "Triển khai UI/UX cho ứng dụng Notes trên Figma", bài tiểu luận này hướng đến việc xây dựng một ứng dụng ghi chú đáp ứng tốt nhu cầu sử dụng và tối ưu hóa trải nghiệm

Chương 2: Phân tích đối thủ cạnh tranh và giá trị cốt lõi - Khảo sát các ứng dụng ghi

chú phô biến, xác định điểm mạnh, điểm yếu, và đưa ra gia tri cốt lõi làm nổi bật sản phẩm

Chương 3: Tính năng của ứng dung Notes — Đề xuất và mô tả các tính năng chính, tập trung vào việc tôi ưu hóa trải nghiệm người dùng thông qua thiết kế trực quan, tiện lợi

và hiệu quả

1.1

CHƯƠNG 1 TONG QUAN VE UX/UI DESIGN

Giới thiệu về UX/UI design

Lid Khải niệm

UI (User Interface) là giao diện người dùng, bao gồm các yếu tô trực quan như màu sắc, bố cục, phông chữ và hình ảnh trên website hoặc ứng dụng Mục tiêu của

UI là giúp người dùng đễ dàng hiểu và sử dụng sản phẩm, đồng thời truyền tải thông điệp từ nhà thiết kế hoặc nhà cung cấp Giống như một người thợ mộc khi đóng giường cần đảm bảo sản phẩm đúng chức năng và hình dáng của một chiếc giường,

UI cũng cần thể hiện rõ ràng và phù hợp với mục đích sử dụng

Công việc của một nhà thiết kế UI thường bao gồm sắp xếp bố cục trang, lựa chọn bảng màu và phông chữ, thiết kế các yếu tố tương tác như nút bắm, thanh trượt, menu, và xây dựng wirefames chỉ tiết Họ cũng hợp tác chặt chẽ với các nhà phát triển để chuyên đôi bản thiết kế thành sản phẩm hoạt động thực tế

UX (User Experlence) là trải nphiệm người dùng, phản ánh cách người dùng cảm nhận và đánh giá khi sử dụng sản phẩm UX tập trung vào việc đảm bảo website hoặc ung dung dé str dung, bố cục hợp lý, và hỗ trợ người dùng đạt được mục tiêu của mình một cách hiệu quả và thuận tiện

Công việc của một nhà thiết kế UX bao gồm nghiên cứu để hiểu nhu cầu và hành vi người dùng, xây dựng chân dung người dùng (user persona), tạo sơ đồ hành trình trải nghiệm (customer journey map), và phát triển wirefames hoặc nguyên mẫu Ngoài ra, họ còn thực hiện các bước kiểm tra người dùng để phát hiện vẫn để

và cải thiện thiết kế, đồng thời phối hợp với nhà thiết kế UI và nhà phát triển để hoàn thiện san pham

Phát triên chân dung : +~- Nghiên cứu Thiết kê ~~-: Sắp xếp bỏ cục

Tạo sơ đề hành trình ï Chọn bảng màu &

dy dung wireframes i isu thing a giác sell Thiết kế các yếu tố aul

Hình 1.1: Nhiệm vụ riêng biệt của UX/UI 1.1.2 Tầm quan trọng khác biệt của UX/UI

UI va UX là hai khái niệm liên quan chặt chẽ và thường bị nhằm lẫn trong lĩnh

vực thiết kế Một số người cho rằng UX quan trọng hơn UI, hoặc ngược lại, nhưng thực tế, cả hai đều cần thiết và đóng vai trò bổ trợ lẫn nhau dé tao ra một sản phẩm thành công

Mục tiêu chung của UX và UIT là mang lại sự thoải mái, tiện lợi và hài lòng cho người dùng Một sản phẩm có giao diện đẹp (UI) nhưng khó sử dụng (UX) sẽ nhanh chóng làm người dùng nản lòng Ngược lại, một sản phâm dễ sử dụng nhưng giao điện kém thu hút cùng khó cạnh tranh trong thị trường hiện đại Cả hai cần được kết

hợp hải hòa để mang lại trải nghiệm trọn ven

Như lời Rahul Varshney, đồng sáng lập Foster.fñm, từng chia sẻ: "Một giao diện người đùng mà bỏ qua trải nghiệm người dùng giỗng như việc một họa sĩ sơn bừa bãi lên mặt vải; trong khi UX mà không có UI chẳng khác gì một khung tranh trông rỗng." Trải nghiệm sản phâm tuyệt vời bắt đầu từ việc xây dựng UX vững chắc, sau

đó là UI trực quan và hấp dẫn Cả hai là yếu tổ không thể thiếu cho sự thành công của sản pham, đặc biệt trong môi trường cạnh tranh khốc liệt ngảy nay

Quy trình thiết kế UX/UI áp dụng Design Thinking

Quy trình thiết kế UX/UI áp dụng Design Thinking là một quy trình sáng tạo và

lặp đi lặp lại nhằm cải thiện trải nghiệm người dùng Quy trình này bao gồm 5 giai đoạn cơ bản

Đầu tiên, thấu hiểu (Empathize) là giai đoạn hiểu rõ nhu cầu, thói quen và mong đợi của người đùng thông qua các nghiên cứu như phỏng vấn, khảo sát và quan sát hành vi Điều này giúp tạo nền tảng vững chắc cho các bước tiếp theo và đảm bảo

rằng quá trình thiết kế sẽ đi đúng hướng

Tiếp theo, xác định (Define) là bước xác định van đề cụ thể mà thiết kế cần giải quyết Dựa trên các dữ liệu thu thập duoc, giai doan nay p1úp hiểu rõ thử thách của người dùne, từ đó tạo ra một bức tranh toàn diện và rõ ràng về các vấn đề cần được giải quyết

Sau khi xác định vẫn đề, bước sáng tạo (Ideate) giúp đưa ra nhiều giải pháp tiềm năng Ở giai đoạn này, các chuyên gia UX/UI khai thác những ý tưởng mới và sáng tạo để cải thiện thiết kế, mở rộng các cách thức để giải quyết vấn đề đã xác

Hình 1.1: Sơ đồ Design Thinking

CHUONG 2 PHAN TICH DOI THU CANH TRANH VA GIA TRI COT LOI 2.1 Các đối thủ cạnh tranh với ứng dụng Notes

2.1.1 Đối thủ cạnh tranh trực tiếp Evernote

Evernote là một trong những ứng dụng phi chú phô biến và mạnh mẽ nhất hiện nay, cạnh tranh trực tiếp với nhiều đối thủ trong thị trường ứng dụng ghi chú Với tính năng đa dạng và khả năng đồng bộ hóa trên nhiều thiết bị, Evernote không ngừng cải tiền đề p1ữ vững vị thê của mình

Điểm mạnh (Strengths)

Evernote cung cấp nhiêu tính năng mạnh

mẽ như phi chú văn bản, quét tải liệu, tạo checklist, lưu ảnh, giúp người dùng dễ dàng ghi lại mọi thông tin cần thiết Đồng bộ hóa giữa các thiết bị dễ dàng,

giúp người dùng truy cập ghi chú mọi lúc

mọi nơi Công cụ tìm kiếm mạnh mẽ có thể quét văn bản trong hình ảnh và tài liệu, giúp người dùng để dàng tìm thấy thông tin cần thiết Bên cạnh đó, khả năng chia sẻ và cộng tác hiệu quả cũng

giúp nâng cao hiệu quả làm việc nhóm

Điểm yếu (Weaknesses)

Giao diện của Evernote đôi khi phức tạp

và có thể gây khó khăn cho người mới sử dụng Đồng bộ hóa đôi khi gap sự cô hoặc chậm khi kết nối mạng yếu Ngoài

ra, một số tính năng cao cấp chỉ có sẵn trong các gói trả phí, điều này có thế khiến người dùng hạn chế sử dụng Nếu không tô chức ghi chú một cách hợp lý, việc tìm kiếm thông tin trong Evernote cũng có thê trở nên khó khăn

Cơ hội (Opportunities)

triển mạnh mẽ, đặc biệt trong doanh nghiệp và giáo dục, mở ra cơ hội lớn cho Evernote Công ty có thê phát triển thêm các tính năng mới như AI và máy học để

cải thiện trải nghiệm người dùng Bên

cạnh đó, Evernote có thế mở rộng hợp

tac với các ứng dụng và nền tảng khác để tăng cường tính linh hoạt Đặc biệt, nếu Evernote tập trung vào việc cung cấp giải pháp dễ sử dụng cho người dùng phổ thông và doanh nghiệp, có thể giúp ho thu hút thêm nhiều người dùng

Nguy cơ (Threats)

Evernote đang phải đối mặt với sự cạnh tranh mạnh mẽ từ các đối thủ như Google

Keep, Apple Notes, và Notion, những ứng dụng cung cấp các tính năng tương

tự nhưng có giao diện dễ sử dụng và tính linh hoạt cao hơn Các ứng dụng miễn

phí với tính năng đủ đáp ứng nhu cầu người dùng có thể khiến Evernote mắt

người dùng Hơn nữa, sự phát triển nhanh chóng của công nghệ và thay đổi nhu cầu người dùng có thể khiến Evernote can phải liên tục cập nhật và thay đổi đề không bị tụt lại phía sau

Diém manh (Strengths)

Microsoft OneNote nỗi bật với tính năng đồng bộ hóa miễn phí giữa các thiết bị, giúp người dùng dễ dàng truy cập ghi chú mọi lúc mọi nơi Giao diện dễ sử dụng và thân thiện, giúp người mới dễ đàng làm quen Tích hợp sâu với các ứng dụng khác cua Microsoft nhu Word, Excel, va Outlook, giup OneNote tro thành công cụ mạnh mẽ cho người dùng trong môi trường làm việc Hệ thống phân loại ghi chú thông minh và khả năng tô chức tốt giúp người dùng dễ đàng quản lý thông tin,

Điểm yếu (Weaknesses)

Giao diện có thê trở nên rồi răm khi sử

dụng quá nhiều tính năng, khiến người

dùng có thể cảm thấy bối rối khi làm việc với các phi chú phức tạp OneNote thiếu một số tính năng mạnh mẽ như công cụ tìm kiếm nâng cao trong các tài liệu hoặc

khả năng quét văn bản trong hình ảnh Dung lượng bộ nhớ lưu trữ cho ghi chú

có thể bị hạn chế đối với những người

dùng tài khoản miễn phí, điều này có thể

ảnh hưởng đến người dùng có nhu cầu lưu trữ lớn

Cơ hội (Opportunities) OneNote co thé phat triển thêm tính năng

nâng cao dựa trên AI và học máy, như gợi ý các phi chú có liên quan hoặc phân tích nội dung ghi chú để tối ưu hóa trải nghiệm người dùng Khả năng mở rộng tính năng tích hợp với các phân mêm

khác trong bộ Microsoft 365 là một cơ

hội lớn, đặc biệt là trong các môi trường doanh nghiệp và giáo dục Hỗ trợ các tính năng chia sẻ và cộng tác dễ dàng có thể giúp OneNote thu hút thêm người dùng trong các nhom lam việc và tổ chức

OneNote phải đối mặt với sự cạnh tranh

từ các ứng dụng phi chú khác như Evernote, Notion, va Google Keep, dac biệt là những ứng dụng có giao diện dé

sử dụng và cung cấp các tính năng miễn phí mạnh mẽ Những ứng dụng này có Nguy cơ (Threats) thê thu hút người dùng nhờ tính năng linh

hoạt và sự đổi mới OneNote cũng có thế gap khó khăn trong việc duy tr người dùng nếu không cải tiến liên tục và đáp ứng nhu cầu ngày càng cao từ người dùng trong môi trường làm việc và học