Phân biệt: modal, popup, tooltip, popover, alert, …
- Thuy Nguyen
- 1 thg 8, 2023
- 2 phút đọc
Đã cập nhật: 13 thg 8, 2023
Với các bạn mới vào nghề nhưng non-IT hoặc có background IT nhưng không chuyên về code (giống mình) thì mình nghĩ đâu đó các bạn cũng ít khi gặp hoặc phân biệt được các thuật ngữ như popover, dialog, popup,… Hoặc đôi khi gặp rồi nhưng không biết tên gọi của nó là gì! 💔
Bản thân mình đôi khi cũng không phân biệt được rõ tên của chúng và mình cứ default gọi là “modal” hết 🥴. Có lần bị dev bắt bẻ là “Tester mà không biết popover là gì à?”.
Nghe cay ghê 😒
Trong quá trình tìm hiểu thì mình tổng hợp được những loại sau: tooltip, popover, modal, dialog, alert, popup, lightbox, flash notice
1) Tooltip
Chỉ chứa text ngắn gọn. User không thể thao tác với nội dung trong tooltip.
Hiển thị khi user có thao tác di chuột qua hoặc click vào 1 phần tử nào đó.
2) Popover
Sử dụng để chứa text dài, links hoặc data. User có thể tương tác với nội dung trong popover như: chọn văn bản, click vào link …
Hiển thị khi người dùng di chuột hoặc click vào một phần tử.
3) Modal
Hiển thị trên nội dung của trang và ngăn cản sự tương tác của user với trang Mình đang hiểu là: chặn action khi click ra ngoài trang, buộc phải click [X] hoặc 1 button nào đó để đóng modal.
Sử dụng để hiển thị hình ảnh, biểu mẫu (forms) hoặc nội dung yêu cầu tương tác của user.
4) Dialog
Hiển thị trên nội dung của trang.
Sử dụng để hiển thị nội dung và yêu cầu phản hồi từ phía user như: biểu mẫu, một số văn bản để xác nhận một hành động nào đó.
Dialog có thể được bao gồm trong modal; user có thể lựa chọn cancel/dismiss/ignore để đóng chúng
(Dialog với modal: mình đọc doc xong thấy nó cứ giống nhau thế nào ấy, nên nếu gặp thì gọi là modal hay dialog đều được nhé 😖)
5) Alert
Dùng để thông báo về một cái gì đó mang tính hệ thống; chỉ nên được sử dụng trong những trường hợp ngoại lệ, vì user phải lựa chọn Yes/No/OK.
6) Popup
Popup cũng như 1 dạng alert nhưng user có thể close nó mà không ảnh hưởng tới việc mình làm (mình thấy được sử dụng khá nhiều trên bản đồ)
7) Lightbox
Thuật ngữ này sử dụng trong trường hợp có 1 popup bật lên làm tối trang web và hiển thị dialog chứa hình ảnh hoặc nội dung khác.
Chúng có thể được đóng bằng cách chọn [X] hoặc nhấp vào bất kỳ đâu trong phần tối của trang.
8) Flash notice
Là một message tự động hiện ra trong 1 khoảng thời gian nào đó, user có thể tắt nó đi hoặc để nó tự động tắt sau 1 khoảng thời gian.
Ngoài ra, các bạn có thể đọc thêm ở đây nhé:
P/s: Tìm hiểu về mấy thuật ngữ này xong bị lú thực sự! T_T
Comments