Trạng thái trống nhưng không bao giờ để trống [Phần 1]
Bản tin số #26: Phân loại và cách viết trạng trái trống (empty state)
Có phải lúc nào giao diện của trang web hay ứng dụng cũng có đầy thông tin hiển thị cho người dùng?
Tất nhiên là không. Cũng có lúc hệ thống không có dữ liệu cho người dùng xem. Một màn hình trắng sẽ xuất hiện. Trạng thái trống là một thuật ngữ phổ biến trong thiết kế giao diện người dùng, dùng để mô tả trạng thái mặc định của một ứng dụng hoặc trang web khi không có dữ liệu nào hiển thị.
Người dùng sẽ gặp phải tình huống này khi họ lần đầu truy cập vào ứng dụng hoặc đang tìm kiếm thông tin và không tìm thấy kết quả phù hợp. Họ có thể cảm thấy chán nản, bế tắc, thậm chí tuyệt vọng và từ bỏ nhiệm vụ.
Mặc dù đây là một trạng thái thường gặp trong thiết kế giao diện người dùng, nhưng chúng thường bị xem nhẹ hoặc được viết một cách sơ sài như “không có dữ liệu hiển thị”. Với những nội dung như vậy, đương nhiên chúng không có giá trị với người dùng.
Vậy, chúng ta nên viết gì để chúng mang lại giá trị thiết thực cho người dùng?
Dưới đây là 7 ví dụ về trạng thái trống và cách viết giúp trải nghiệm của người dùng hữu ích hơn, biến ngõ cụt thành đại lộ thênh thang, khiến người dùng từ chán nản đến hào hứng.
Loại 1: Không có X nào
Người dùng chưa tạo hoặc thu thập các mục, có thể là các địa điểm, chuyến đi hoặc các vật dụng cho vào giỏ hàng. Trạng thái trống sẽ xuất hiện nếu người dùng lần đầu sử dụng ứng dụng (cũng có thể xuất hiện trong lần sử dụng tiếp theo). Cho đến khi người dùng thực hiện hành động, danh sách các mục đó sẽ hiển thị.
Một mô típ chung, mình thường thấy:
Bạn chưa có đơn hàng nào
Bạn chưa có thông báo nào
Bạn chưa có địa điểm nào
Bản chất, người dùng tìm hiểu và khám phá ứng dụng. Vì vậy, những dòng thông báo như trên thường không có giá trị với người dùng.
Vậy thì chúng ta nên viết gì?
Tiêu đề: Cho họ biết họ cần làm gì
Thay vì: Bạn chưa có đơn hàng nào
Hãy viết: Tạo đơn hàng đầu tiên
Mô tả: Tạo động lực - Đưa ra lý do vì họ nên làm điều này, lợi ích cụ thể khi làm điều đó
Có thể viết như mô tả ở ví dụ: Bắt đầu đặt đơn hàng đầu tiên của mình và theo dõi tại đây bạn nhé!
Hoặc viết: Đừng lo lắng! Những thông báo mới nhất về đơn hàng của bạn sẽ được cập nhật tại đây.
Nút lệnh - Liên kết đến nơi người dùng thực hiện hành động.
Ví dụ: Tạo đơn hàng
Tại sao chúng ta nên làm điều này?
1. Tăng sự tương tác
Đối với lần đầu tiên người dùng sử dụng sản phẩm, đây là cơ hội để chúng ta thu hút người dùng bằng hành động trực tiếp. Không chỉ cho họ người những lợi ích sản phẩm/tính năng mang lại, mà thúc đẩy họ trải nghiệm và sử dụng. Họ nhận được giá trị thực từ sản phẩm càng sớm, càng có nhiều khả năng họ sẽ tiếp tục sử dụng nó.
2. Tăng tính khả dụng
Đôi khi người dùng muốn bắt đầu, nhưng không biết chính xác làm thế nào. Một vài câu từ, thêm một nút lệnh có thể đưa họ đi đúng hướng.
Loại 2: Không có dữ liệu
Đây là nơi sẽ dữ liệu sẽ tự động xuất hiện dựa trên hoạt động của người dùng. Nhưng chúng vẫn chưa được tạo, người dùng cần phải làm gì đó để nhận được dữ liệu.
Tình huống trên, người dùng tạo hoặc thu thập các mục - còn ở đây hệ thống tạo và thu thập, trình bày dữ liệu dựa trên hoạt động của người dùng.
Ví dụ:
Không có dữ liệu để hiển thị (vì người dùng ngưng hoạt động một thời gian hoặc lần đầu sử dụng, các dữ liệu liên quan đến chiến dịch quảng cáo trong thời gian gần đây đều ở mức 0, ví dụ 0 lượt xem, 0 lượt click, v.v.)
Không có nội dung thống kê (vì người dùng chưa tải video nào)
Nếu chúng ta không lặp lại một mô típ nội dung 'không có dữ liệu', vậy thì nên viết gì?
Tiêu đề — mô tả trạng thái hiện tại và thông báo không có gì để hiển thị (nhưng sẽ có trong tương lai).
Thay vì: Không có dữ liệu để hiển thị
Hãy viết: Chưa có dữ liệu cho bạn
Giải thích — về cách thức hoạt động của hệ thống, ứng dụng hoặc tính năng; mang đến động lực cho người dùng thực hiện hành động hoặc giá trị, lợi ích liên quan.
*Dành cho đối tượng lần đầu sử dụng - giải thích cách hệ thống hoạt động: Cập nhật nhanh chóng doanh thu và lượt click sau khi bạn bắt đầu tham gia các chiến dịch.
*Dành cho đối tượng đã ngưng hoạt động một thời gian - khuyến khích họ thực hiện nhiệm vụ: Thật là mừng! Bạn đã quay lại. Đăng ký ngay các chiến dịch mới nhất - hoa hồng bội thu.
Nút lệnh: Liên kết đến nơi thực hiện hành động.
Ví dụ: Bắt đầu (Cho người dùng sử dụng lần đầu)
Hoặc: Đăng ký (Cho người dùng quay trở lại)
Tại sao chúng ta nên làm điều này?
1. Tăng tính khả dụng
Đối với những ai lần đầu tiên sử dụng ứng dụng, họ luôn cố gắng tìm tòi và hình dung cách hệ thống, ứng dụng hoạt động như thế nào. Giao diện trạng thái trống sẽ tự động được lấp đầy các thông tin bởi hoạt động của người dùng. Chúng ta cần giải thích cho người dùng biết cách chúng hoạt động và hiển thị dữ liệu.
Đối với nhóm đối tượng ngưng hoạt động và quay trở lại, họ đã biết cách sử dụng ứng dụng hoặc cách hệ thống hoạt động. Thứ chúng ta cần làm là giữ chân họ, tiếp thêm động lực cho người dùng bằng lợi ích và giá trị để họ tiếp tục sử dụng và quay lại những lần sau.
2. Cung cấp giá trị
Hệ thống hoặc ứng dụng có thể cung cấp cho người dùng các số liệu thống kê quan trọng, giúp họ cải tiến phương thức hoạt động, tăng doanh thu. Nội dung ở trạng thái trống có thể nêu bật lợi ích, những giá trị mà ứng dụng của bạn mang lại giá trị cho người.
Bạn có thấy nội dung bản tin hôm nay thú vị không?
Đọc tiếp 4 ví dụ còn lại vào thứ 3 tuần sau nhé. Hẹn gặp lại.
*Nguồn tham khảo: 7 types of empty states and how to use them