Design Pattern: Messages

UX

Mai Lệ Huyền

  • The 3 Types of Alert

  • Banner Alert

  • Modal Alert

  • Toast Alert

1. Banner Alert

  • Sử dụng khi cần người dùng biết thông tin về hệ thống nhưng không cần hành động ngay.

  • Có icon “X" ở góc để người dùng có thể bỏ qua.

Các thành phần của Banner Alert

  1. Surface

  2. Icon

  3. Dialog Message

  4. Action Button

  5. Neutral Button

Vị trí: gắn vào phía trên, trải dài hết chiều ngang màn hình.

2. Modal Alert

  • Sử dụng khi muốn thu hút hoàn toàn sự tập trung của người dùng và cần họ hành động ngay.

  • Bao gồm cuộc hội thoại và không biến mất cho đến khi người dùng đưa ra quyết định.

Các thành phần của Modal Alert

  1. Backdrop

  2. Surface

  3. Icon

  4. Title

  5. Dialog Message

  6. Divider

  7. Neutral Button

  8. Action Button

Vị trí: giữa màn hình, phủ lên màn hình.

3. Toast Alert

  • Sử dụng khi cập nhật quy trình hệ thống dựa trên hành động của người dùng.

  • Xuất hiện tạm thời và mất đi hoặc xuất hiện đến khi người dùng loại bỏ nó.

Các thành phần của Toast Alert

  1. Surface

  2. Icon

  3. Drop Shadow

  4. Dialog Message

  5. Divider

  6. Neutral Button

  7. Action Button

Vị trí: phía dưới góc trái hoặc góc phải màn hình, phủ lên màn hình.

  • The 4 Tones of Alert Messages and Notifications


  • Warning tone

  • Caution tone

  • Success tone

  • Information tone

1. Warning tone

  • Hành động có thể gây ra hậu quả nghiêm trọng (mất dữ liệu hay không sử dụng được app…)

  • Cần sự chú ý ngay lập tức của người dùng.

  • Icon: dấu chấm than trên nền tam giác đỏ.

2. Caution tone

  • Cảnh báo người dùng cẩn thận trong ngữ cảnh cụ thể ( Ví dụ: Thời hạn đăng ký sắp đến hạn)

  • Icon: dấu chấm than trên nền hình tròn màu vàng.

3. Success tone

  • Thông báo cho người dùng hành động của họ đã dẫn tới một kết quả nào đó.

  • Icon: checkmark trên nền hình tấm khiên màu xanh lá cây.

4. Information tone

  • Cung cấp thông tin và gợi ý cho người dùng.

  • Icon: “i" trên nền hình hình tròn màu xanh dương.

  • Màu nền của thông báo

  • Không nên đổ màu cho toàn bộ message box, vì:

    • Gây mất tập trung và khó đọc.

    • Phải thay đổi màu chữ trên các màu nền khác nhau để đạt độ tương phản → giao diện không nhất quán.

    • Dễ khiến icon bị bỏ qua.

  • Nên nhấn mạnh tông màu cho icon, vì:

    • Nó xác định mức độ chú ý và tầm quan trọng của thông điệp.

    • Người dùng cần biết phải phản ứng như thế nào kể cả khi chưa đọc thông điệp.

→ Nên chọn màu nền của thông báo đối lập với giao diện

  • Giao diện sáng thì thông báo có màu nền tối và ngược lại