Thiết kế UX cho văn bản thông báo - Số ký tự tối ưu cho thông báo trong ứng dụng, Toast và Banner
Thông báo trong ứng dụng, tin nhắn Toast và thông báo Banner là các thành phần UI được thiết kế để truyền tải thông tin mà không làm gián đoạn luồng thao tác của người dùng. Tuy nhiên, việc nhồi nhét văn bản dài vào Toast có thời gian hiển thị hạn chế, hay thông báo Banner có quá ít ký tự để truyền đạt ý nghĩa là những thất bại thiết kế số ký tự thường gặp. Trong khi thiết kế số ký tự thông báo đẩy bị ràng buộc bởi giới hạn cấp OS, thông báo trong ứng dụng cho phép nhà phát triển tự do thiết kế, khiến việc đánh giá số ký tự phù hợp càng quan trọng hơn.
Phân loại thành phần thông báo và thiết kế số ký tự cơ bản
| Thành phần | Thời gian hiển thị | Vị trí | Yêu cầu thao tác | Số ký tự khuyến nghị | Mục đích |
|---|---|---|---|---|---|
| Toast | 3-5 giây | Dưới hoặc trên màn hình | Không (tự biến mất) | 15-40 ký tự | Xác nhận thành công/thất bại |
| Snackbar | 5-10 giây | Dưới màn hình | Tùy chọn (nút hành động) | 20-50 ký tự | Xác nhận + hoàn tác |
| Banner | Liên tục (đóng thủ công) | Trên màn hình | Có (nút đóng) | 30-80 ký tự | Thông báo quan trọng, trạng thái hệ thống |
| Cảnh báo nội tuyến | Liên tục | Trong nội dung | Không | 40-120 ký tự | Lỗi biểu mẫu, cảnh báo |
| Hộp thoại modal | Liên tục (đến khi thao tác) | Giữa màn hình | Có (xác nhận/hủy) | 50-200 ký tự | Xác nhận quan trọng, cảnh báo thao tác phá hủy |
| Trung tâm thông báo | Liên tục (danh sách) | Màn hình riêng | Không | 40-100 ký tự | Lịch sử thông báo |
Toast có giới hạn ký tự nghiêm ngặt nhất. Với chỉ 3-5 giây hiển thị, 15-40 ký tự tiếng Nhật là giới hạn thực tế. Con người đọc được khoảng 10-15 ký tự tiếng Nhật mỗi giây, Toast 5 giây cho phép đọc tối đa khoảng 75 ký tự. Tuy nhiên, tính cả độ trễ 1-2 giây từ khi nhận ra Toast đến khi bắt đầu đọc, số ký tự đọc được thực tế giảm xuống 30-45.
Thiết kế số ký tự Toast - Truyền đạt trong 3 giây
| Mẫu | Số ký tự | Ví dụ | Đánh giá |
|---|---|---|---|
| Chỉ động từ | 5-8 ký tự | "Đã lưu" | ○ Ngắn gọn nhất nhưng không rõ lưu gì |
| Đối tượng + động từ | 10-20 ký tự | "Đã lưu bản nháp" | ◎ Đối tượng rõ ràng, ngắn gọn |
| Đối tượng + động từ + bổ sung | 20-40 ký tự | "Đã lưu bản nháp. Tự động lưu mỗi 5 phút" | △ Quá dài cho Toast |
| Biểu tượng + động từ | 5-10 ký tự | "✓ Lưu hoàn tất" | ○ Biểu tượng tăng khả năng nhận biết |
Mẫu "đối tượng + động từ" (10-20 ký tự) là phạm vi tối ưu cho Toast. Chỉ rõ đối tượng giúp người dùng xác định chính xác thao tác nào đã hoàn thành khi nhiều thao tác chạy song song.
Thiết kế số ký tự Banner - Mật độ thông tin trong hiển thị liên tục
| Loại Banner | Số ký tự khuyến nghị | Ví dụ | Nút hành động |
|---|---|---|---|
| Banner thông tin | 30-60 ký tự | "Tính năng mới: Chế độ tối đã có sẵn" | "Thử ngay" / "Đóng" |
| Banner cảnh báo | 30-70 ký tự | "Phương thức thanh toán sắp hết hạn. Vui lòng cập nhật" | "Cập nhật" / "Để sau" |
| Banner lỗi | 30-80 ký tự | "Kết nối máy chủ không ổn định. Một số tính năng bị hạn chế" | "Thử lại" / "Chi tiết" |
| Banner thành công | 20-50 ký tự | "Nâng cấp gói hoàn tất" | "Xem chi tiết" / "Đóng" |
| Banner đồng ý Cookie | 50-120 ký tự | "Trang web này sử dụng cookie để cải thiện trải nghiệm" | "Đồng ý" / "Cài đặt" |
Thiết kế phân cấp thông báo - Mức độ khẩn cấp và số ký tự
| Mức khẩn cấp | Thành phần khuyến nghị | Số ký tự | Ví dụ | Thao tác người dùng |
|---|---|---|---|---|
| Thấp (xác nhận) | Toast | 10-25 ký tự | "Đã lưu cài đặt" | Không cần |
| Trung bình (chú ý) | Snackbar / Banner | 20-60 ký tự | "Dung lượng lưu trữ đã đạt 80%" | Tùy chọn |
| Cao (cảnh báo) | Banner / Cảnh báo nội tuyến | 30-80 ký tự | "Cần cập nhật bảo mật. Vui lòng cập nhật trong cài đặt" | Khuyến nghị |
| Khẩn cấp (xử lý ngay) | Hộp thoại modal | 50-150 ký tự | "Có thay đổi chưa lưu. Rời đi mà không lưu?" | Bắt buộc |
Sử dụng văn bản dài cho thông báo mức khẩn cấp thấp hoặc hiển thị bằng hộp thoại modal tạo ra "hiệu ứng cậu bé chăn cừu". Khi thông báo không quan trọng liên tục gián đoạn luồng thao tác, thông báo thực sự quan trọng cũng bị bỏ qua. Khớp chính xác mức khẩn cấp với số ký tự và lựa chọn thành phần là chìa khóa duy trì độ tin cậy của toàn bộ hệ thống thông báo.
Văn bản thông báo như microcopy
Áp dụng nguyên tắc microcopy hiệu quả vào văn bản thông báo:
- Cụ thể: "Đã xảy ra lỗi" thành "Tải ảnh lên thất bại (giới hạn kích thước: 5 MB)". Truyền đạt cụ thể điều gì đã xảy ra và tại sao
- Viết từ góc nhìn người dùng: "Lỗi kết nối cơ sở dữ liệu" thành "Không thể kết nối dịch vụ. Vui lòng thử lại sau". Truyền đạt tác động và giải pháp, không phải nguyên nhân kỹ thuật
- Viết tích cực: "Mật khẩu sai" thành "Mật khẩu không khớp. Vui lòng thử lại". Tránh biểu đạt phủ định, đưa ra giải pháp
- Giữ giọng điệu nhất quán: Thống nhất giọng điệu thông báo (trang trọng/thân mật) trong toàn ứng dụng. Như thiết kế tin nhắn chatbot, phản ánh giọng nói thương hiệu
Hướng dẫn văn bản thông báo trong hệ thống thiết kế
| Mục hướng dẫn | Quy tắc | Ví dụ |
|---|---|---|
| Số ký tự tối đa | Toast: 40, Banner: 80, Modal: 200 | Kiểm tra tự động qua lint |
| Kết thúc câu | Thống nhất mẫu "Đã..." / "Vui lòng..." | "Đã lưu" / "Vui lòng cập nhật" |
| Nút hành động | Bắt đầu bằng động từ. Dưới 8 ký tự | "Cập nhật" / "Xem chi tiết" / "Đóng" |
| Thuật ngữ kỹ thuật | Cấm trong văn bản hướng đến người dùng | "HTTP 500" thành "Lỗi máy chủ" |
Cân bằng tần suất thông báo và số ký tự
- Xử lý hàng loạt: Khi nhiều thông báo cùng loại xảy ra liên tiếp, gộp thành "Đã tải lên 3 tệp" thay vì thông báo từng cái
- Lọc ưu tiên: Thông báo ưu tiên thấp chỉ ghi vào trung tâm thông báo, không hiển thị Toast hay Banner
- Thời gian chờ: Thông báo cùng loại cách nhau ít nhất 30 giây. Thông báo liên tiếp ghi đè thông báo trước
- Thông báo tổng hợp: "Tanaka và 4 người khác đã bình luận" gộp nhiều sự kiện thành một thông báo
Khả năng tiếp cận và văn bản thông báo
Đặt role="status" và aria-live="polite" cho Toast để thông báo mà không gián đoạn thao tác hiện tại. Đặt role="alert" cho thông báo lỗi để đọc ngay lập tức.
Số ký tự văn bản thông báo ảnh hưởng trực tiếp đến thời gian đọc của trình đọc màn hình. Toast 40 ký tự mất khoảng 8 giây ở tốc độ chuẩn. Cần điều chỉnh số ký tự để đảm bảo đọc xong trong thời gian hiển thị Toast (3-5 giây).
Sách về UX writing có thể tìm thấy trên Amazon.
Ràng buộc văn bản thông báo theo nền tảng
| Phần tử | iOS (UIKit / SwiftUI) | Android (Material Design 3) | Web (CSS) |
|---|---|---|---|
| Toast | Không có API chuẩn (tùy chỉnh) | Snackbar (1-2 dòng, 1 hành động) | Thiết kế tự do |
| Banner | UIBannerView (API riêng) | Thành phần Banner (2 dòng + 2 hành động) | Thiết kế tự do |
| Alert | UIAlertController (tiêu đề + nội dung + nút) | AlertDialog (tiêu đề + nội dung + tối đa 3 nút) | Thiết kế tự do |
iOS không có thành phần chuẩn tương đương Snackbar của Android, Toast cần triển khai tùy chỉnh. Material Design 3 quy định văn bản Snackbar "lý tưởng 1 dòng, tối đa 2 dòng". Với tiếng Nhật khoảng 20-25 ký tự mỗi dòng (dựa trên màn hình 360dp), giới hạn thực tế khoảng 50 ký tự.
Chiến lược bản địa hóa văn bản thông báo
- Thiết kế bố cục cho ngôn ngữ dài nhất: Tiếng Đức và Phần Lan có xu hướng dài gấp 1,3-1,5 lần so với tiếng Anh
- Cho phép xuống dòng: Thiết kế thành phần có chiều cao thay đổi theo lượng văn bản thay vì Toast chiều rộng cố định
- Truyền đạt giới hạn ký tự cho dịch giả: Thêm ghi chú số ký tự tối đa trong tệp i18n
- Kiểm tra bằng pseudo-localization: Áp dụng bản dịch giả kéo dài chuỗi 1,5 lần để kiểm tra khả năng chịu đựng bố cục
Như đã thảo luận trong thiết kế số ký tự tin nhắn Slack, văn bản thông báo công cụ doanh nghiệp đòi hỏi cả sự ngắn gọn và chính xác.