Modal (cửa sổ phụ): Cửa sổ nhỏ hiện giữa màn hình, nền phía sau tối lại, người dùng phải bấm nút (OK, Thử lại, Hủy) mới làm tiếp được. Dùng cho lỗi quan trọng, cần người dùng chú ý và quyết định, ví dụ thanh toán thất bại. Dùng nhiều quá thì rất phiền.
Error popup modal - Tailwind CSS Example
Toast (thông báo nhảy): Hộp nhỏ bật lên ở góc hoặc cạnh trên màn hình vài giây rồi tự biến mất, như lát bánh mì nảy lên từ máy nướng (nên mới gọi là toast). Khác modal ở chỗ không bắt người dùng bấm đóng, không chặn thao tác. Hợp với thông báo nhẹ như "Mất kết nối, đang thử lại" hay cả thông báo thành công "Đã lưu". Trên Android còn có snackbar, na ná toast nhưng hay kèm một nút như "Hoàn tác".
React Toastify : The complete guide.
In-line (trong dòng văn bản): Báo lỗi ngay dưới ô bị sai, thường là chữ đỏ + viền đỏ, kiểu "Email không đúng định dạng". Đây là cách hay nhất cho form, vì người dùng thấy liền sai ở đâu mà sửa.
Writing In-Line Error Validation
Trong phần header hoặc footer: Một thanh ngang (banner) nằm trên đầu hoặc dưới đáy trang, nằm yên đó cho tới khi hết lỗi hoặc người dùng tắt. Hợp với lỗi ảnh hưởng cả trang, ví dụ "Hệ thống đang bảo trì, một số chức năng tạm không dùng được".
Tooltip (gợi ý công cụ): Bong bóng chữ nhỏ hiện ra khi rê chuột (hoặc bấm) vào một chỗ. Tiết kiệm chỗ, hợp với màn hình chật như bảng dữ liệu. Nhược điểm là người dùng phải tự rê chuột mới thấy, và trên điện thoại thì không có "rê chuột", nên ít khi dùng tooltip là cách báo lỗi duy nhất.
reactjs - How to show error message as tooltip instead of explain error in Ant Design? - Stack Overflow
Trang (Page): Cả màn hình dành cho lỗi, khi không thể hiển thị nội dung nào khác: 404 (không tìm thấy trang), 500 (server lỗi), 403 (không có quyền). Trang lỗi tốt thì nói rõ chuyện gì xảy ra bằng lời dễ hiểu và có đường đi tiếp (về trang chủ, tìm kiếm), nhiều công ty còn vẽ trang 404 rất dễ thương cho đỡ bực.
