TRƯỜNG CAO ĐẲNG FPT POLYTECHNIC HỒ CHÍ MINH

BỘ MÔN: THƯƠNG MẠI ĐIỆN TỬ

CHUYÊN NGÀNH: DIGITAL MARKETING

LAB 3.2

Giáo viên hướng dẫn: Nguyễn Trọng Nghĩa

Nhóm 3 - Lớp DM18322

Sinh viên thực hiện:
1. Huỳnh Dương Tường Vy - PS32898
2. Nguyễn Thị Bạch An - PS32948
3. Võ Ngọc Phương Anh - PS33473
4. Đỗ Phương Ngọc - PS32861

Hồ Chí Minh, tháng 1 năm 2024

 NHÓM 3

Bài 1: Phân tích các yếu tố UI (User Interface) và UX (User Experience) trên
Website và hiểu cách chúng tạo ra trải nghiệm tốt cho người dùng.
 UI (User Interface) là giao diện người dùng. Trong thiết kế website, UI sẽ bao gồm
tất cả các yếu tố mà người dùng có thể nhìn thấy được khi truy cập vào website, chẳng hạn
như font chữ, màu sắc, bố cục website, hình ảnh hiển thị trên web,…
 Yếu tố UI (User Interface):
 Màu sắc và hình ảnh: Sử dụng màu sắc phù hợp và hình ảnh hấp dẫn để tạo nên giao diện
hấp dẫn và thú vị cho người dùng.
 Đồ họa: Sử dụng biểu đồ, biểu đồ hình ảnh và các yếu tố đồ họa khác để trình bày thông tin
một cách trực quan và dễ hiểu.
 Định vị và bố cục: Xác định vị trí và cách bố trí các yếu tố trên giao diện để tạo sự dễ nhìn
và dễ sử dụng cho người dùng.
 Phông chữ: Sử dụng các phông chữ dễ đọc và phù hợp để truyền đạt thông tin một cách rõ
ràng.
 Biểu tượng và nút: Sử dụng biểu tượng và nút dễ nhìn và dễ nhận diện để hướng dẫn người
dùng thực hiện các hành động trên website.
 Tương tác: Tạo ra các hiệu ứng tương tác như hover, click và chuyển động để làm cho giao
diện sống động và thú vị hơn.
 UX (User Experience) là trải nghiệm người dùng. Trải nghiệm của người dùng sẽ
bao
gồm tất cả cảm xúc, sở thích, niềm tin, nhận thức của người dùng, phản hồi về thể chất và
tâm lý, hành vi và thành tích xảy ra trước, trong và sau khi sử dụng website. Một website
được thiết kế giao diện hài hòa, đẹp mắt, dễ dàng thao tác thường sẽ được đánh giá cao hơn.
 Yếu tố UX (User Experience):
 Dễ sử dụng: Thiết kế giao diện dễ hiểu và dễ sử dụng để người dùng có thể tương tác và
điều
hướng trên website một cách dễ dàng.
 Cấu trúc thông tin: Xây dựng cấu trúc thông tin logic và rõ ràng để người dùng có thể tìm
kiếm thông tin một cách nhanh chóng và dễ dàng.
 Tốc độ tải trang: Tối ưu hóa hiệu suất của website để đảm bảo thời gian tải trang nhanh,
giúp
tránh mất mát người dùng do thời gian chờ đợi quá lâu.
 Tương tác người dùng: Tạo ra các trải nghiệm tương tác tích cực, bao gồm việc cung cấp

2
 NHÓM 3

phản hồi và hướng dẫn rõ ràng cho người dùng trong quá trình tương tác với website.
 Tích hợp đa nền tảng: Đảm bảo website có thể tương thích và hoạt động tốt trên nhiều nền
tảng và thiết bị khác nhau, bao gồm desktop, di động và máy tính bảng.
 Tiếp cận di động: Thiết kế và tối ưu hóa giao diện cho trải nghiệm di động để đáp ứng nhu
cầu ngày càng tăng của người dùng truy cập từ thiết bị di động.
 Kiểm tra và tối ưu hóa: Thực hiện kiểm tra A/B hoặc kiểm tra người dùng để đánh giá và tối
ưu hóa trải nghiệm của người dùng theo thời gian.
Bài 2: Thiết kế giao diện website trên Điện thoại bằng phần mềm Figma – Marvel
Nhóm lựa chọn kế giao diện website trên Điện thoại bằng phần mềm
https://www.figma.com/
Thiết kế website Ngọt – Trái cây sấy
 Trang chủ

Hình 1: Trang chủ thiết kế chi tiết trên công cụ figma

3
 NHÓM 3

Hình 2: Trang chủ chi tiết sau khi hoàn thành thiết kế trên điện thoại

4
 NHÓM 3

 Trang sản phẩm

Hình 3: Trang sản phẩm thiết kế chi tiết trên công cụ figma

5
 NHÓM 3

Hình 4: Trang sản phẩm chi tiết sau khi hoàn thành thiết kế trên điện thoại

6
 NHÓM 3

 Trang giới thiệu

Hình 5: Trang giới thiệu thiết kế chi tiết trên công cụ figma

7
 NHÓM 3

Hình 6: Trang giới thiệu chi tiết sau khi hoàn thành thiết kế trên điện thoại

8
 NHÓM 3

 Trang thanh toán

Hình 7: Trang thanh toán thiết kế chi tiết trên công cụ figma

9
 NHÓM 3

Hình 8: Trang thanh toán chi tiết sau khi hoàn thành thiết kế trên điện thoại

10