Bài 3.

Bài 1: Phân tích các yếu tố UI và UX trên Website

Bước 1: Hiểu về UI và UX trên Website

Khái niệm,vai trò UI.

UI là viết tắt của từ User Interface có nghĩa là giao diện người dùng. Hiểu một cách đơn giản nhất thì UI
bao gồm tất cả những gì người dùng có thể nhìn 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,...

Trong thiết kế thì UI đóng vai trò là yếu tố truyền tải thông điệp từ người thiết kế, nhà cung cấp dịch vụ,
sản phẩm tới người dùng. Đơn giản hơn thì nhà thiết kế đóng vai trò như 1 lập trình viên hoặc nhà xây
dựng để bất cứ ai cũng có thể hiểu và sử dụng được sản phẩm của họ .

- Khái niệm,vai trò UX.

+ UX là viết tắt của từ User Experience có nghĩa là trải nghiệm người dùng. Đơn giản hơn thì 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ủa bạn 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.

+ Người làm về UX hay còn gọi là UX Designer. UX Designer sẽ nghiên cứu và đánh giá về thói quen và
cách mà khách hàng sử dụng rồi đánh giá về sản phẩm website/App nào đó. Sử dụng và đánh giá ở đây
đơn giản là những vấn đề: tính dễ sử dụng, sự tiện ích, sự hiệu quả khi hệ thống hoạt động.

- Khác biệt giữa UX và UI:

UX designer sẽ cần cân nhắc và đánh giá toàn bộ hành trình người dùng để giải quyết các vấn đề cụ thể,
chẳng hạn như: những bước nào người dùng cần phải thực hiện, các hành động họ cần hoàn thành để đạt
được mục tiêu nào đó,…– và đảm bảo mục tiêu chính: mang lại trải nghiệm sản phẩm tốt nhất. Khi UX
designer vạch ra bộ “khung sườn”, thiết kế UI sẽ biến những trải nghiệm này trở nên trực quan và dễ dàng
nhìn nhận. Mục tiêu của người làm UI sẽ chú trọng đến khía cạnh hình ảnh và tính thẩm mỹ xuyên suốt
hành trình người dùng, bao gồm từng giao diện màn hình, điểm chạm (touchpoints), nút bấm, lướt page
hoặc chuyển ảnh trong thư viện,v.v.

- Cách UX và UI tương tác với nhau để tạo ra một giao diện hấp dẫn và dễ sử dụng trên Website.
 Thiết kế UX sẽ thiên về xác định và tìm ra giải pháp cho các vấn đề trải nghiệm của người dùng; thiết kế
UI sẽ thiên về tạo ra giao diện tương tác trực quan, thẩm mỹ.

 Quy trình phát triển sản phẩm thường bắt đầu từ việc thiết kế UX, rồi mới đến UI.

 Thiết kế UX sẽ vạch ra khung sườn cho hành trình trải nghiệm sản phẩm của người dùng. Sau đó, thiết
kế UI sẽ hoàn thiện nó bằng cách thêm vào các yếu tố trực quan và tương tác.

 UX có thể được ứng dụng cho bất kỳ loại hình sản phẩm, dịch vụ, trải nghiệm nào. UI chỉ được sử dụng
chuyên dụng cho các sản phẩm & trải nghiệm.

Bước 2: Phương pháp nghiên cứu UI và UX trên Website

Thu thập thông tin:

Xác định mục tiêu nghiên cứu và thu thập dữ liệu từ người dùng bằng các phương tiện như phỏng vấn,
khảo sát, quan sát, và phân tích dữ liệu.

Phân tích dữ liệu:

Đánh giá và phân tích dữ liệu thu thập được để hiểu các yếu tố UI và UX, tìm ra điểm mạnh và điểm
yếu, và xác định các cải tiến có thể thực hiện.

Kiểm tra và thử nghiệm:

Áp dụng các phương pháp kiểm định và thử nghiệm để đánh giá hiệu quả của các cải tiến UI và UX được
đề xuất.

Kiểm định người dùng: Trong kiểm định người dùng, bạn mời người dùng tham gia vào việc sử dụng giao
diện hoặc trải nghiệm trang web và theo dõi cách họ tương tác và đánh giá trải nghiệm của họ.
Kiểm định A/B: Phương pháp này liên quan đến việc so sánh hai phiên bản của giao diện hoặc trang web
(A và B) để xem phiên bản nào hoạt động tốt hơn dựa trên các yếu tố như tỷ lệ chuyển đổi hoặc thời gian
ở lại.
Bước 3: Đánh Giá UI và UX trên Website
Sử dụng khoảng trắng: Khoảng trắng giữa các phần tử trên trang web giúp cải thiện khả năng đọc và tạo
ra giao diện dễ nhìn hơn. Đảm bảo có đủ khoảng trắng giữa văn bản, hình ảnh và các phần tử khác để
tránh gây rối mắt người dùng.
Tối ưu tốc độ tải trang: Đảm bảo rằng trang web có thời gian tải nhanh để người dùng không phải chờ
đợi quá lâu. Tối ưu hóa kích thước hình ảnh, và loại bỏ mã không cần thiết có thể giúp cải thiện tốc độ tải
trang.
Sử dụng CTA thu hút: Sử dụng các CTA (Call-to-Action) mạnh mẽ và thu hút để hướng dẫn người dùng
thực hiện hành động cụ thể, chẳng hạn như "Đặt hàng ngay" hoặc "Đăng ký để nhận tin tức." Đảm bảo
rằng CTA nổi bật và dễ nhận biết trong giao diện.
Tạo Hyperlink nổi bật: Để tạo sự dễ sử dụng, sử dụng hyperlink (liên kết) một cách thông minh. Hyperlink
nên được đánh dấu một cách rõ ràng bằng màu sắc hoặc gạch chân để người dùng biết đây là liên kết có
thể nhấp vào.
Sắp xếp bố cục nội dung hợp lý: Bố cục trang web cần được thiết kế để phản ánh cấu trúc thông tin một
cách logic. Điều này giúp người dùng dễ dàng tìm kiếm thông tin và điều hướng trên trang. Sử dụng danh
mục, mục lục, và menu để sắp xếp nội dung theo cách hợp lý.
Sử dụng hình ảnh và tiêu đề: Hình ảnh và tiêu đề nên được sử dụng để hấp dẫn và truyền đạt thông điệp
chính của trang web. Hình ảnh nên có độ phân giải cao và liên quan đến nội dung.
Sự đồng bộ trên các trang: Đảm bảo rằng giao diện và trải nghiệm người dùng được duy trì đồng nhất
trên tất cả các trang của trang web. Điều này bao gồm việc sử dụng cùng một bố cục, font chữ, màu sắc
và CTA trên toàn bộ trang web.

Bước 4: Thực hiện phân tích và đánh giá

Link wesite: Classic Shop - VSD FOOD (foodvsd.com)
Điểm mạnh UI
- Màu sắc hài hòa, phù hợp với thương hiệu
- Sử dụng hình ảnh chất lượng cao phù hợp với nội dung
- Fort chữ dễ đọc
- Nút liên kết dễ sử dụng
- Sử dụng hiệu ứng chuyển động, nhẹ nhàng dễ nhìn
Điểm mạnh UX
- Cấu trúc thanh menu logic, rõ ràng giúp người dùng timg kiếm thông tin nhanh hơn
Điểm yếu UX
Tốc độ tải trang chậm.

Bước 5: Đề xuất cải tiến và tối ưu hóa UI/UX trên website

- Tăng thứ hạng website
- Tối ưu tốc độ tải trang
- Tạo Hyperlink nổi bật
- Thay đổi các kích thước hình ảnh.

Bước 6: Trình bày kết quả phân tích.

 Điểm mạnh trang web: giao diện đẹp, màu sắc phù hợp với người dùng không gây khó chịu khi
trải nghiệm lâu trên web.
 Độ tương thích với thiết bị: Website có thiết kế đáp ứng và tương thích trên các thiết bị di động
và máy tính bảng, giúp người dùng dễ dàng truy cập từ bất kỳ nền tảng nào.
 Điểm yếu trang web: tốc độ load còn hạn chế gây khó chịu khi wifi, mạng di động chập chờn.
Bài 4.1 :

Thiết kế 3-5 ảnh cho QC GDN ( Không tạo nội dung GG Search Ads)
-Nếu đã tạo GG Map thì chỉ cần chụp lại kết quả - không cần trình bày các bước thực hiện
BÀI ( PHẦN 4.2)

Bài 1: Tạo ứng dụng di động miễn phí từ website WordPress

Cách 1: Hướng dẫn từng bước để tạo ứng dụng di động từ website (mobile

site) trên AppMySite:

Bước 1: Truy cập vào trang web AppMySite

• Mở trình duyệt web và truy cập vào trang web của AppMySite:

https://www.appmysite.com/
Bước 2: Đăng ký tài khoản

• Nhấp vào nút "Bắt đầu miễn phí" hoặc "Đăng ký" trên trang chủ để tạo tài

khoản AppMySite.

• Điền đầy đủ thông tin cá nhân yêu cầu, bao gồm tên, địa chỉ email và mật

khẩu.

• Hoàn thành quá trình đăng ký và xác minh tài khoản qua email.

Bước 3: Bắt đầu tạo ứng dụng

• Sau khi đăng ký và đăng nhập thành công, bạn sẽ được chuyển đến giao diện

quản lý dự án trên AppMySite.

• Nhấp vào nút "Tạo ứng dụng mới" hoặc "Bắt đầu" để bắt đầu quá trình tạo
ứng dụng di động.

Bước 4: Chọn loại ứng dụng và nền tảng

• Chọn loại ứng dụng mà bạn muốn tạo, ví dụ: Android, iOS hoặc cả hai.

• Chọn nền tảng (website) từ menu thả xuống và nhập URL của website

(mobile site) của bạn.

Bước 5: Thiết kế và tùy chỉnh ứng dụng

MOBILE MARKETING © 2023

• Sau khi xác định loại ứng dụng và nền tảng, bạn sẽ được chuyển đến trình

chỉnh sửa giao diện của AppMySite.

• Tùy chỉnh giao diện ứng dụng bằng cách thay đổi màu sắc, hình ảnh, văn

bản và các yếu tố khác.

• Tải lên biểu trưng ứng dụng (app icon) và ảnh bìa (app splash screen) của

bạn để tạo ứng dụng cá nhân hóa.

Bước 6: Cấu hình và tùy chỉnh tính năng

• Cấu hình các tính năng và chức năng cho ứng dụng của bạn, bao gồm thanh

định vị, thông báo đẩy, tích hợp xã hội, v.v.

• Đảm bảo tùy chỉnh các thiết lập và cấu hình phù hợp với nhu cầu và yêu cầu

của ứng dụng của bạn.

Bước 7: Xem trước và kiểm tra ứng dụng

• Sử dụng tính năng xem trước để xem giao diện và trải nghiệm của ứng dụng

trên điện thoại di động.

• Kiểm tra lại các tính năng và chức năng của ứng dụng để đảm bảo chúng

hoạt động đúng và tương thích với nền tảng di động.

Bước 8: Tạo và xuất bản ứng dụng

• Sau khi hoàn thành tạo và tùy chỉnh ứng dụng, bạn có thể chọn "Tạo ứng

dụng" hoặc "Xuất bản" để tạo và xuất bản ứng dụng của bạn.

• AppMySite sẽ tiến hành xây dựng ứng dụng và cung cấp cho bạn các tệp cài

đặt (APK cho Android hoặc IPA cho iOS).

Bài 4.2. Bài 2: Nghiên cứu và thực hành về ASO - App Store Optimization

Bước 1: Nghiên cứu về ASO:

ASO (App Store Optimization) hay tối ưu hóa kho ứng dụng là quá trình tối ưu hóa ứng dụng nhằm tăng
khả năng hiển thị của ứng dụng đó trên các cửa hàng ứng dụng lớn nhằm thu hút và cải thiện số lượt tải
xuống.

Bước 2: Định vị đối tượng khách hàng:

Về chân dung khách hàng mục tiêu:

Giới tính : cả nam và nữ

Độ tuổi: từ 18 đến 30 tuổi

Thói quen : những người thích ăn vặt và có thói quen mua sắm online

Sở thích: ăn uống các loại đồ ăn vặt đóng hộp, nhỏ gọn tiện lợi.

Bước 3: Từ khóa:

Sử dụng công cụ nghiên cứu từ khóa Google Trend

Từ khóa “foodvsd, khô gà, khô bò”

Bước 4: Tối ưu tên ứng dụng:

Tên ứng dụng: foodvsd

Sử dụng các từ khóa quan trọng trong tên ứng dụng để tăng khả năng tìm

kiếm.

Bước 5: Mô tả ứng dụng:

Ứng dụng ' foodvsd ' là một nền tảng trực tuyến chuyên cung cấp các thực phẩm sấy khô chất lượng, đảm
bảo an toàn vệ sinh.

Từ khóa: foodvsd, khô gà , khô bò,......

Bước 6: Hình ảnh và video:

Một số hình ảnh mà một nắng food đã thiết kế để đưa lên ứng dụng

Bước 7: Đánh giá và đánh giá của người dùng:

• Xây dựng một cộng đồng người dùng tích cực và khuyến khích họ để lại đánh giá và đánh giá tốt cho
ứng dụng.

• Tương tác với người dùng, giải đáp thắc mắc và phản hồi đánh giá của họ một cách nhanh chóng và
chuyên nghiệp.

Bước 8: Theo dõi và cải tiến:

• Sử dụng các công cụ theo dõi và phân tích như Sensor Tower, App Annie,

Google Analytics, v.v. để đo lường hiệu quả của các yếu tố ASO.