Mở đầu — vì sao bài này quan trọng
Nếu bạn nhìn kỹ bất kỳ ứng dụng nào bạn dùng hằng ngày — Shopee, MoMo, Grab, hay Gmail — bạn sẽ thấy phần lớn tương tác quan trọng nhất không diễn ra trên màn hình chính, mà diễn ra trên một lớp phủ (overlay) xuất hiện đè lên trên. Bạn xác nhận thanh toán trong một hộp thoại. Bạn mở giỏ hàng từ một ngăn kéo trượt ra bên phải. Bạn chọn bộ lọc trong một menu bật ra. Bạn thấy phần giải thích của một biểu tượng khi rê chuột vào.
Bốn thứ đó — Modal, Drawer, Popover, Tooltip — trông có vẻ giống nhau vì đều "nổi lên trên nội dung chính", nhưng chúng phục vụ những mục đích hoàn toàn khác nhau. Chọn sai loại overlay là một trong những lỗi phổ biến nhất mà tôi thấy ở designer junior. Ví dụ điển hình: dùng Modal để hiển thị một thông báo phụ không quan trọng, khiến người dùng phải dừng mọi thứ lại chỉ để bấm "OK". Hoặc dùng Tooltip để chứa nội dung mà người dùng thực sự cần đọc kỹ — trong khi Tooltip biến mất ngay khi con trỏ rời đi.
Bài này giúp bạn nắm được bản chất của từng loại overlay, biết khi nào dùng cái nào, và quan trọng nhất là thiết kế chúng đúng chuẩn về behavior (hành vi) — vì overlay là nơi behavior quan trọng ngang với visual. Một Modal đẹp nhưng không đóng được bằng phím Escape là một Modal hỏng.
Khái niệm cốt lõi
Cách đơn giản nhất để phân loại bốn overlay này là dựa trên hai câu hỏi: (1) Nó có chặn người dùng khỏi phần còn lại của giao diện không? và (2) Nó neo (anchor) vào một điểm cụ thể trên màn hình hay không?
Modal (Dialog) — chặn toàn bộ, đòi hỏi quyết định
Modal là overlay "nặng" nhất. Nó xuất hiện ở giữa màn hình, có một lớp phủ tối (thường gọi là backdrop hoặc scrim) đè lên toàn bộ nội dung phía sau với độ mờ khoảng 40–60% opacity màu đen. Lớp phủ này không chỉ để đẹp — nó truyền tải một thông điệp tâm lý rõ ràng: "Mọi thứ phía sau tạm dừng, bạn phải xử lý cái này trước."
Modal dùng khi bạn cần người dùng đưa ra một quyết định tập trung (focused decision): xác nhận xóa dữ liệu, điền một form ngắn quan trọng, đọc điều khoản trước khi tiếp tục. Nó là trạng thái "block" — chủ động ngăn người dùng làm việc khác cho tới khi họ phản hồi.
Vì Modal chặn luồng làm việc, nó bắt buộc phải có đường thoát rõ ràng:
- Phím Escape để đóng.
- Click ra ngoài vùng backdrop để đóng (trừ khi đó là quyết định không thể quay lui).
- Một nút đóng (X) ở góc, và/hoặc nút hành động rõ ràng (Hủy / Xác nhận).
Drawer (Panel) — trượt từ cạnh, ngữ cảnh liên quan
Drawer là một panel trượt vào từ một cạnh màn hình: trái, phải, trên hoặc dưới. Trên desktop, Drawer thường dùng cho giỏ hàng, bộ lọc, hoặc bảng cài đặt chi tiết. Trên mobile, Drawer trượt từ dưới lên (bottom sheet) là pattern cực kỳ phổ biến vì nó nằm gần ngón cái.
Điểm khác biệt tinh tế giữa Drawer và Modal: Drawer thường dùng cho nội dung phụ có liên hệ với màn hình hiện tại nhưng không nhất thiết chặn hoàn toàn. Ví dụ, mở giỏ hàng dạng Drawer cho phép người dùng vẫn thấy trang sản phẩm phía sau — họ chưa rời khỏi bối cảnh mua sắm. Drawer có thể có backdrop mờ (kiểu "modal drawer") hoặc không có backdrop (kiểu "non-modal drawer" cho phép tương tác với cả hai vùng).
Drawer phù hợp khi nội dung dài hoặc có cấu trúc — danh sách sản phẩm trong giỏ, nhiều nhóm bộ lọc — vì nó tận dụng chiều cao của cạnh màn hình tốt hơn một Modal ở giữa.
Popover — neo vào phần tử, nội dung tương tác nhẹ
Popover là một hộp nhỏ neo (anchor) vào một phần tử cụ thể — thường bật ra khi bạn click vào một nút. Nó không chặn toàn màn hình, không có backdrop tối (hoặc chỉ có backdrop trong suốt để bắt click ra ngoài). Popover chứa nội dung tương tác nhẹ: một menu chọn, một bảng chọn màu, một mini-form nhanh, hay danh sách hành động.
Đặc trưng của Popover là mũi tên hoặc con trỏ chỉ về phần tử gốc để người dùng hiểu nó "thuộc về" nút nào. Popover đóng lại khi click ra ngoài hoặc nhấn Escape, nhưng khác Modal ở chỗ nó nhẹ nhàng hơn nhiều — không có cảm giác "dừng mọi thứ".
Tooltip — chỉ hiển thị thông tin, không tương tác
Tooltip là overlay nhẹ nhất và cũng dễ bị dùng sai nhất. Nó xuất hiện khi người dùng rê chuột (hover) hoặc focus bằng bàn phím vào một phần tử, hiển thị một mẩu thông tin ngắn — thường là nhãn cho một icon, hoặc giải thích một thuật ngữ.
Nguyên tắc vàng: Tooltip chỉ chứa nội dung không tương tác được và không thiết yếu. Người dùng không thể click vào bên trong Tooltip, không thể chọn văn bản trong đó (trên nhiều triển khai), và Tooltip biến mất ngay khi con trỏ rời đi. Vì vậy, đừng bao giờ đặt nội dung mà người dùng bắt buộc phải đọc kỹ hay thao tác vào Tooltip. Tooltip là "gợi ý thêm", không phải "nội dung chính".
Một bảng so sánh nhanh để bạn ghi nhớ:
| Loại | Backdrop | Chặn luồng | Neo vào phần tử | Nội dung tương tác |
|---|---|---|---|---|
| Modal | Có (40–60%) | Có | Không (ở giữa) | Có, quan trọng |
| Drawer | Tùy chọn | Thường có | Không (cạnh màn hình) | Có, thường dài |
| Popover | Trong suốt | Không | Có | Có, nhẹ |
| Tooltip | Không | Không | Có | Không |
Tình huống thực tế
Ví dụ 1 — Tiki và bài học "đừng dùng Modal cho mọi thứ"
Hãy tưởng tượng một designer junior tại một sàn thương mại điện tử kiểu Tiki được giao nhiệm vụ thiết kế luồng thêm sản phẩm vào giỏ. Bản đầu tiên của bạn ấy: mỗi khi người dùng bấm "Thêm vào giỏ", một Modal ở giữa màn hình bật lên với dòng chữ "Đã thêm vào giỏ hàng!" và nút "OK".
Vấn đề: người dùng mua nhiều món liên tục. Cứ mỗi lần bấm "Thêm vào giỏ", họ lại bị chặn bởi một Modal, phải bấm "OK" để tiếp tục. Trong một phiên test với 8 người dùng, 6 người tỏ ra khó chịu rõ rệt sau lần thứ ba. Tỷ lệ thêm sản phẩm giảm vì mỗi hành động bị gián đoạn.
Giải pháp đúng: thay Modal bằng Toast (một dạng thông báo tạm thời không chặn) hoặc mở một Drawer giỏ hàng ở bên phải để người dùng thấy giỏ mà vẫn tiếp tục lướt. Modal chỉ nên dùng cho quyết định quan trọng — ví dụ khi người dùng bấm "Xóa toàn bộ giỏ hàng", lúc đó Modal xác nhận là hoàn toàn hợp lý vì đó là hành động không thể hoàn tác dễ dàng.
Bài học: Modal có "chi phí gián đoạn" cao. Chỉ chi trả chi phí đó khi hành động thực sự đáng để người dùng dừng lại.
Ví dụ 2 — MoMo và Drawer bottom sheet cho mobile
Một ví thanh toán kiểu MoMo thiết kế lại luồng chọn phương thức thanh toán. Trên mobile, họ có 6–8 phương thức (số dư ví, thẻ liên kết, QR ngân hàng...). Nhóm ban đầu định dùng một Modal ở giữa màn hình, nhưng khi test trên điện thoại màn hình lớn (Samsung Galaxy 6.7 inch), người dùng phải với ngón cái lên tận giữa màn hình để chọn — rất bất tiện khi cầm một tay.
Họ chuyển sang bottom sheet Drawer: danh sách phương thức trượt lên từ đáy màn hình, nằm gọn trong tầm với ngón cái. Người dùng có thể vuốt xuống để đóng, hoặc chạm vào backdrop mờ phía trên. Sau khi đổi, thời gian trung bình để hoàn tất chọn phương thức giảm khoảng 25%, và tỷ lệ bỏ dở ở bước này giảm đáng kể.
Bài học: Trên mobile, vị trí vật lý của overlay quan trọng ngang với nội dung. Bottom sheet Drawer là lựa chọn mặc định tốt cho các thao tác chọn lựa trên điện thoại vì nó tôn trọng "vùng ngón cái" (thumb zone).
Ví dụ 3 — Popover và Tooltip trong một dashboard quản trị
Một startup SaaS ở TP.HCM xây dashboard phân tích cho khách hàng doanh nghiệp. Họ có một biểu tượng "?" bên cạnh chỉ số "Tỷ lệ chuyển đổi". Ban đầu, họ nhét cả một đoạn giải thích dài 3 câu kèm một link "Xem chi tiết cách tính" vào một Tooltip hover.
Vấn đề nảy sinh: người dùng rê chuột vào để đọc, nhưng khi họ cố di chuột tới link "Xem chi tiết", Tooltip biến mất vì con trỏ rời khỏi biểu tượng "?". Link trở nên không thể bấm được. Đây là lỗi kinh điển — dùng Tooltip cho nội dung có tương tác.
Giải pháp: đổi sang Popover kích hoạt bằng click. Khi người dùng bấm vào "?", một Popover neo vào biểu tượng mở ra, chứa đoạn giải thích và link có thể click được. Popover chỉ đóng khi người dùng click ra ngoài. Còn Tooltip được giữ lại cho những trường hợp đơn giản thực sự — ví dụ nhãn "Xuất file CSV" hiện lên khi hover vào icon tải xuống.
Bài học: Nếu nội dung cần được click, chọn, hay đọc kỹ — đó là việc của Popover, không phải Tooltip. Tooltip chỉ dành cho gợi ý ngắn, một chiều.
Hướng dẫn từng bước
Đây là quy trình tôi khuyên bạn dùng mỗi khi cần thêm một overlay vào thiết kế:
Bước 1 — Hỏi: nội dung này có bắt buộc chặn người dùng không? Nếu có (quyết định quan trọng, không thể bỏ qua) → nghiêng về Modal. Nếu không → cân nhắc Drawer, Popover hoặc Tooltip.
Bước 2 — Hỏi: nội dung có neo vào một phần tử cụ thể không? Nếu nội dung "thuộc về" một nút hay icon cụ thể → Popover (nếu tương tác) hoặc Tooltip (nếu chỉ thông tin). Nếu nội dung độc lập, dạng danh sách dài hoặc form → Modal hoặc Drawer.
Bước 3 — Hỏi: nội dung dài hay ngắn, và người dùng có cần thao tác nhiều không? Nội dung dài, nhiều nhóm, dạng danh sách → Drawer (tận dụng chiều cao cạnh màn hình). Nội dung ngắn gọn, một quyết định → Modal.
Bước 4 — Thiết kế trạng thái đóng ngay từ đầu. Đừng chỉ vẽ overlay ở trạng thái mở. Với mỗi overlay, hãy ghi rõ trong file Figma:
- Đóng bằng gì? (Escape, click backdrop, nút X, vuốt xuống)
- Backdrop có hay không, độ mờ bao nhiêu?
- Focus đi đâu khi mở và khi đóng?
Bước 6 — Ghi chú behavior cho developer. Trong bản handoff, ghi rõ hành vi: "Modal này KHÔNG đóng khi click backdrop vì là xác nhận thanh toán", hoặc "Tooltip xuất hiện sau 300ms delay khi hover". Những chi tiết này developer không tự đoán được từ hình tĩnh.
Lỗi thường gặp & mẹo
Lỗi 1 — Modal chồng Modal. Khi một Modal mở ra một Modal khác, người dùng mất phương hướng hoàn toàn. Nếu bạn thấy mình cần Modal thứ hai, hãy thiết kế lại luồng: có thể dùng nhiều bước (steps) bên trong cùng một Modal, hoặc chuyển sang một trang riêng.
Lỗi 2 — Quên phím Escape và focus trap. Đây là lỗi accessibility phổ biến. Mọi Modal và Drawer bắt buộc đóng được bằng Escape, và focus phải bị bẫy bên trong khi mở. Ghi rõ điều này trong spec.
Lỗi 3 — Tooltip chứa nội dung thiết yếu. Đã nói ở ví dụ 3: nếu người dùng bắt buộc phải đọc hoặc thao tác, đừng dùng Tooltip. Ngoài ra, Tooltip chỉ-hover không hoạt động trên màn hình cảm ứng (không có hover trên mobile) — cân nhắc điều này.
Lỗi 4 — Popover bị tràn khỏi màn hình. Popover neo vào một nút, nhưng nếu nút đó ở sát mép phải màn hình, Popover có thể bị cắt. Mẹo: thiết kế Popover với khả năng "lật hướng" (flip) — nếu không đủ chỗ bên phải thì bật sang trái, không đủ chỗ dưới thì bật lên trên. Ghi chú hành vi này cho developer.
Lỗi 5 — Backdrop quá nhạt hoặc quá đậm. Backdrop dưới 30% opacity không đủ tách biệt overlay khỏi nền, khiến giao diện trông "lẫn lộn". Trên 70% thì quá tối, che mất ngữ cảnh. Vùng an toàn là 40–60% opacity đen.
Mẹo — Dùng độ trễ (delay) cho Tooltip. Tooltip hiện ra ngay lập tức khi lướt qua nhiều icon sẽ gây "nhấp nháy" khó chịu. Thêm delay khoảng 200–400ms trước khi hiện giúp giao diện mượt hơn.
Mẹo — Animation có hướng. Drawer nên trượt vào từ đúng cạnh nó xuất phát (phải thì trượt từ phải), Modal nên fade + scale nhẹ từ 95% lên 100%, Popover nên xuất hiện gần điểm neo. Hướng chuyển động giúp người dùng hiểu overlay "đến từ đâu".
Bài tập thực hành
- Kiểm toán overlay. Mở một ứng dụng bạn hay dùng (Shopee, Grab, MoMo...). Tìm và chụp màn hình ít nhất một ví dụ cho mỗi loại: Modal, Drawer, Popover, Tooltip. Với mỗi cái, ghi lại: nó chặn luồng hay không, đóng bằng cách nào, và bạn thấy lựa chọn đó có hợp lý không.
- Sửa lỗi chọn sai overlay. Tìm một trường hợp trong thực tế (hoặc tự dựng) mà một overlay được chọn sai loại — ví dụ Modal dùng cho thông báo phụ, hay Tooltip chứa link. Vẽ lại phương án đúng trong Figma và viết một câu giải thích lý do.
- Thiết kế bộ lọc dạng Drawer. Trong Figma, thiết kế một Drawer bộ lọc cho một trang danh sách sản phẩm: ít nhất 3 nhóm bộ lọc (giá, thương hiệu, đánh giá), nút "Áp dụng" và "Xóa tất cả". Thiết kế cả phiên bản desktop (Drawer phải) và mobile (bottom sheet). Ghi chú đầy đủ hành vi đóng/mở.
- Viết spec behavior. Chọn một Modal bạn đã thiết kế và viết một bảng spec ngắn cho developer: backdrop opacity, cách đóng, focus khi mở, focus khi đóng, và animation. Đây là kỹ năng handoff bạn sẽ dùng thường xuyên.
Tóm tắt
Bốn overlay — Modal, Drawer, Popover, Tooltip — khác nhau ở hai trục: có chặn luồng không và có neo vào phần tử không. Modal chặn toàn bộ để đòi hỏi quyết định tập trung, có backdrop 40–60% và bắt buộc đóng được bằng Escape kèm focus trap. Drawer trượt từ cạnh, phù hợp nội dung dài hoặc có cấu trúc, và là lựa chọn tuyệt vời cho mobile dưới dạng bottom sheet. Popover neo vào phần tử, chứa nội dung tương tác nhẹ và có mũi tên chỉ về nút gốc. Tooltip chỉ hiển thị gợi ý ngắn, không tương tác, và biến mất khi con trỏ rời đi.
Điều quan trọng nhất cần mang theo: overlay là nơi behavior quan trọng ngang visual. Một designer giỏi không chỉ vẽ overlay đẹp mà còn định nghĩa rõ nó đóng thế nào, focus đi đâu, và animation theo hướng nào — rồi ghi chú tất cả cho developer. Chọn đúng loại overlay và thiết kế đúng hành vi của nó chính là dấu hiệu phân biệt một UI được làm cẩn thận với một UI làm cho có.