Các mẫu thiết kế UX cho trạng thái tải

• Màn hình tải có thể cải thiện trải nghiệm người dùng bằng cách cung cấp khả năng hiển thị về những gì hệ thống đang làm.
• Có một số điểm cần cân nhắc để tạo ra màn hình tải phù hợp.
  • Trước khi thiết kế, cần kiểm tra hệ thống tải.
  • Chẳng hạn như việc tải có chặn thao tác nhập của người dùng hay không, có thể biết tiến độ hay không, đang tải bao nhiêu thông tin, trải nghiệm trên di động ra sao, v.v.
  • Chẳng hạn như đó là tải thụ động (hệ thống tải trước) hay tải chủ động (tải theo hành động của người dùng).
• Thay đổi theo lượng nội dung hiển thị cùng lúc
  • Với các thành phần phức tạp, có thể tốt hơn nếu hiển thị từng phần một.
  • Với các thành phần tương đối đơn giản, nên hiển thị tất cả cùng lúc sau khi tải xong.
  • Nếu số lượng thành phần nhiều, cần dùng lazy loading.
    • Có thể áp dụng các cách tiếp cận như cuộn vô hạn, nút xem thêm, phân trang.
• Thay đổi theo tần suất
  • Nếu liên tục thay đổi, nên giảm thiểu UI hiển thị trạng thái tải.
    • Có thể tham khảo UI lưu theo thời gian thực của Google Drive.
  • Nếu chỉ thỉnh thoảng thay đổi, tốt hơn là cho người dùng biết ngay.
    • Ví dụ như popup thông báo nội dung đang xem đã được cập nhật và yêu cầu làm mới màn hình.
• Thay đổi theo thời gian cần thiết
  • Trước tiên cần xem có thể biết rõ tiến độ hay không, hay tiến độ là không chắc chắn.
  • Nếu dưới 0,1 giây
    • Chỉ cần hiển thị kết quả ngay lập tức.
    • Trong một số trường hợp, hiển thị màn hình tải giả lại có thể tốt hơn.
    • Chẳng hạn khi đó là tác vụ quan trọng theo cảm nhận của người dùng (như lưu), hoặc khi cần một khoảng trễ để người dùng có thể thực hiện hành động (như nút hoàn tác khi gửi email).
  • Nếu từ 0,1 giây đến 1 giây
    • Đây là độ trễ rất phổ biến và thường không bị người dùng nhận thấy, nên tốt hơn là không thêm màn hình tải.
  • Nếu trên 1 giây
    • Khi vượt quá 1 giây, người dùng sẽ bắt đầu nhận ra thời gian chờ, vì vậy nên thêm màn hình tải phù hợp.
    • Nếu thành phần đang tải nhỏ, spinner là một lựa chọn tốt. (như tải lên tệp)
    • Nếu màn hình thay đổi, skeleton loading là lựa chọn phù hợp.
    • Nếu hình ảnh là nội dung cốt lõi, việc trích xuất màu chủ đạo và làm mờ sẽ rất hiệu quả.
  • Nếu từ 2 giây đến 10 giây
    • Chỉ báo thời gian như "Mất khoảng 5 giây" có thể mang lại hiệu quả.
    • Thanh tiến trình luôn là một lựa chọn tốt.
    • Nếu gồm nhiều bước, cũng có thể hiển thị các bước đó.
      • Ngay cả khi không có các bước rõ ràng, vẫn có thể dùng thông điệp chung. (như đang kết nối tới máy chủ)
  • Nếu mất hơn 10 giây
    • Nếu có thể biết rõ tiến độ, nên hiển thị phần trăm và thời gian còn lại. (như 50% của quá trình tải lên tệp)
      • Tuy nhiên, việc dừng ở 99% là cực kỳ tai hại, nên nếu trường hợp này có thể xảy ra thì cần dùng cách khác.
    • Nếu mất lâu hơn nhưng không thể biết rõ tiến độ, nên thông báo rằng người dùng sẽ được báo qua email hoặc kênh khác khi hoàn tất, đồng thời cho phép họ kiểm soát.
    • Cũng tốt nếu tác vụ có thể chạy hoàn toàn ở nền và không cản trở bất kỳ hành động nào của người dùng. (như trạng thái tiến trình tải lên trong Google Drive)

[thenewseason]

Cảm ơn vì bài viết hay.

• Ngay cả với những yêu cầu được xử lý tức thì, trong một số trường hợp vẫn tốt hơn nếu hiển thị loading trong chốc lát.
• Với khoảng 0,1~1 giây thì tốt hơn là không hiển thị loading.
  . Cá nhân tôi không hiển thị đến mốc 250ms, nhưng không biết kéo dài tới 1 giây thì có còn ổn không
• Trên 1 giây, nếu màn hình có thay đổi thì dùng skeleton, nếu không thì dùng spinner

[rlwnd1104]

Ồ, đúng lúc tôi đang tìm căn cứ cho màn hình tải! Cảm ơn nhé hahaha

[kuroneko]

• Chuỗi thảo luận HN

Có vẻ phần tóm tắt đã dài quá rồi... Dù sao thì vì có nhiều nội dung hay nên mình đã cố gắng mang về nhiều nhất có thể.

Điều thú vị là việc có màn hình tải giả lại có thể làm tăng độ tin cậy. Bên Hacker News cũng bàn khá nhiều về chủ đề đó.