True Skill Center

Trang chủ/ Tài liệu/ Các hạng mục hay bị UI/UX Designer bị bỏ quên!

Các hạng mục hay bị UI/UX Designer bị bỏ quên!

Cập nhật 20:06, 31/08/2023

1353 lượt xem

Admin

Các UI/UX designer tay mơ đã nhớ thiết kế các hạng mục này chưa? Thiết kế một sản phẩm digital khá phức tạp và bao gồm nhiều công đoạn, đôi khi điều này sẽ khiến các designer quên đi các yếu tố kém quan trọng khác. Tuy nhiên, đây lại chính là những yếu tố giúp nâng cao trải nghiệm người dùng. Các designer hãy luôn nhớ 6 thành phần UI/UX nêu dưới đây nhé!

Đây là 6 hạng mục UI/UX mà các designer tay mơ thường hay bỏ quên trong quá trình thiết kế:

Mục lục [Ẩn]

1. Onboarding screen (Màn hình giới thiệu)

Khi chúng ta mở một ứng dụng mới tải về máy, Onboarding screen sẽ là thành phần giao diện hiện lên đầu tiên. Onboarding screen là hướng dẫn ngắn gọn về ứng dụng, các chức năng chính cũng như cách sử dụng.

Tóm lại, mục đích chính của Onboarding screen là để:

Giúp người dùng mới có thể sử dụng app mà không cần đọc hướng dẫn
Giúp người chưa quen với giao diện của app
Góp vai trò chào mừng người dùng
Kích thích người dùng trải nghiệm sản phẩm
Giúp người dùng hiểu rõ cách sử dụng app
Thúc đẩy người dùng tăng mức độ tương tác
Giữ chân người dùng.

2. Skeleton Loader (Khung tải dữ liệu)

Skeleton loader được hiểu một cách đơn giản là khung nền tạo nên trang web. Loại khung này thay thế cho nội dung chính sắp được hiển thị, chúng xuất hiện trong quá trình tải dữ liệu.

Không cần dùng skeleton loader khi:

Nội dung đã được tải hoàn tất và người dùng đã tương tác với giao diện trước đó
Nội dung xuất hiện nhanh và không mất nhiều thời gian để tải
Không dùng Spinner cùng lúc với khung tải dữ liệu (Xem ví dụ minh hoạ).

Những điều cần lưu ý khi dùng skeleton loader:

Nên dùng các cấp độ/các sắc thái màu xám khác nhau để truyền tải các mục nội dung khác nhau
Sử dụng hoạt ảnh để thể hiện trang đang tải dữ liệu
Sử dụng những hình dạng tương ứng với mỗi nội dung để dễ nhận biết (hình tròn là ảnh đại diện, hình chữ nhật là văn bản).

3. Empty State (Trạng thái rỗng)

Empty state là trạng thái hiển thị khi người dùng truy cập vào trang web không có dữ liệu. Lúc này, designer cần thiết kế hình ảnh minh hoạ cho việc trang không có dữ liệu, từ đó gợi ý hành động tiếp theo cho người dùng. Ví dụ: Khi To-do list trống, designer có thể thêm nút “Tạo việc cần làm”.

4. Splash screen (Màn hình khởi động)

Splash screen là phần giao diện xuất hiện đầu tiên khi người dùng khởi chạy ứng dụng hoặc trang web. Đây là cơ hội để tạo sự nhận thức về thương hiệu đối với người dùng, vì mắt họ sẽ có xu hướng tập trung vào màn hình trong lúc chờ đợi ứng dụng tải dữ liệu.

Splash screen có thể là ảnh tĩnh, đồ hoạ, logo hoặc ảnh động đi kèm với thanh hiển thị phần trăm loading (Progress bar). Thông thường, splash screen được áp dụng cho các thiết bị chạy chậm hoặc trong điều kiện internet yếu nhằm giảm cảm giác chờ đợi của người dùng.

5. 404 error page (Thông báo lỗi 404)

Lỗi 404 xuất hiện khi người dùng truy cập vào trang web không tồn tại, liên kết bị sai hoặc liên kết không có thật, v.v. Điều này làm gián đoạn trải nghiệm của người dùng, tạo ra cảm giác khó chịu khi họ phải tìm cách quay lại trang chính. Vì vậy, designer nên thiết kế thông báo lỗi 404 để người dùng mất hứng thú với trang web.

Việc người dùng rời khỏi trang web không chỉ cho thấy UX có vấn đề, mà còn làm cho xếp hạng SEO của trang web đi xuống (Google đánh giá lỗi 404 là một yếu tố để xếp hạng SEO).

6. No internet state (Trạng thái ngoại tuyến)

No internet state là trạng thái hiển thị khi thiết bị gặp vấn đề về kết nối internet, chẳng hạn như việc rớt mạng đột ngột hoặc mất kết nốt wifi trên máy bay. Cũng giống như mục empty state đã nêu bên trên, việc không có hình ảnh biểu đạt trạng thái ngoại tuyến sẽ làm gián đoạn trải nghiệm người dùng.

Kết luận

Thiết kế một sản phẩm digital khá phức tạp và bao gồm nhiều công đoạn, đôi khi điều này sẽ khiến các designer quên đi các yếu tố kém quan trọng khác. Tuy nhiên, đây lại chính là những yếu tố giúp nâng cao trải nghiệm người dùng. Các designer hãy luôn nhớ 6 thành phần UI/UX đã nêu nhé!

Nguồn: tổng hợp từ series UI/UX của Techie.

CÓ THỂ BẠN QUAN TÂM

TÌM HIỂU VỀ TÀI LIỆU PRODUCT REQUIREMENTS DOCUMENT (PRD)

Trong quá trình phát triển sản phẩm, việc đảm bảo tất cả các bên liên quan đều hiểu rõ về mục tiêu, tính năng và cách thức hoạt động của sản phẩm là điều vô cùng quan trọng.PRD không chỉ giúp Product Manager truyền đạt rõ ràng ý tưởng sản phẩm mà còn là kim chỉ nam để các nhóm kỹ thuật và kinh doanh có thể phát triển, triển khai và tiếp thị sản phẩm hiệu quả. Hãy cùng True Skill Center tìm hiểu về loại tài liệu này thông qua bài viết bên dưới

5 Kỹ Năng Cần Có Để Trở Thành Một Product Owner Xuất Sắc

Trong ngành IT, vai trò của một Product Owner không chỉ dừng lại ở việc viết user stories hay quản lý backlog đơn thuần, một Product Owner xuất sắc chính là người cùng đưa ra quyết định và chịu trách nhiệm cho sản phẩm xuyên suốt từ giai đoạn ý tưởng ban đầu cho đến khi sản phẩm được triển khai ra thị trường. Cùng True Skill Center tìm hiểu 5 kỹ năng mà bất kỳ Product Owner nào cũng nên có và trau dồi bên dưới nhé!

TẤT TẦN TẬT “USER RESEARCH” (PHẦN 2)

Trong thế giới sản phẩm số, một ý tưởng hay chưa đủ để tạo nên thành công. Điều quan trọng là sản phẩm của bạn có thực sự phù hợp với End User hay không.

ITBA

TẤT TẦN TẬT “USER RESEARCH” (PHẦN 1)

Nghiên cứu người dùng trong Product Management đề cập đến quá trình có hệ thống thu thập và phân tích thông tin về người dùng của một sản phẩm hoặc dịch vụ.