Bài viết này được viết vào ngày 6 tháng 11 năm 2026.
Các công cụ AI thay đổi rất nhanh. Nhưng quyết định liệu có nên dừng người dùng lại, trượt ra bên cạnh họ, hay nâng một tấm nền từ phía dưới màn hình thì không hề thay đổi. Hộp thoại (dialog), bảng điều khiển trượt từ cạnh (drawer), bảng điều khiển nổi từ phía dưới (bottom sheet), menu thả xuống (dropdown), thẻ chuyển tab (tabs), bảng xếp gọn (accordion) — đây đều là các phương thức hỏi ý kiến người dùng. Menu sản phẩm có thể liên tục di chuyển. Bạn hãy đọc bài viết này như một sự lựa chọn về dạng thức gián đoạn, chứ không phải danh mục thuật ngữ cần học thuộc lòng.
Một section trên trang có thể chứa những dữ liệu cố định: địa chỉ, giá cả, giờ làm việc. Tuy nhiên, một số thông tin sẽ gây cản trở nếu lúc nào cũng hiển thị trên trang chính, nhưng lại bị bỏ lỡ nếu bị đẩy sang một trang hoàn toàn mới. Bộ lọc tìm kiếm, xác nhận ngắn, hoặc câu trả lời dài mà hiếm ai muốn mở là những ví dụ điển hình. Từ ngữ thông dụng mà mọi người hay gọi chung cho tất cả các dạng này là “cửa sổ bật lên” (popup). Chính sự gộp chung đó khiến mô hình AI phải đoán mò. Hãy chia quyết định giao diện này thành ba câu hỏi: Người dùng có bắt buộc phải dừng lại không? Trang chính có được giữ nguyên hiển thị không? Hay đây chỉ là một góc nhìn khác của cùng một danh sách dữ liệu?
Dừng lại, chia sẻ, hay chuyển đổi góc nhìn
Một dialog (hộp thoại, còn gọi là modal) nằm ở trung tâm màn hình và làm mờ toàn bộ phần còn lại. Hãy chỉ dùng dialog khi người dùng bắt buộc phải đưa ra câu trả lời trước khi thực hiện bất kỳ thao tác nào khác: xóa một bản ghi quan trọng, xác nhận đặt chỗ, hoặc sửa một trường bắt buộc đang bỏ trống. Dialog là vị trí rất tồi cho một bài viết dài, một menu điều hướng, hay một thông báo bất ngờ. Trong lúc dialog mở, tiêu điểm bàn phím (keyboard focus) phải được giữ bên trong nó. Phím Escape hoặc một nút hủy rõ ràng phải đóng được dialog và trả tiêu điểm bàn phím về lại nút điều khiển đã mở nó. Nếu bạn không nêu rõ điều kiện này, mô hình AI thường sẽ vẽ một hộp thoại không có cách nào thoát bằng bàn phím, khiến người dùng không dùng chuột bị kẹt lại. Điều kiện đóng này không phải là chi tiết bổ sung sau, mà là yêu cầu tiên quyết.
Một drawer (bảng điều khiển trượt từ cạnh) trượt ra từ cạnh bắt đầu (start edge) và giữ cho trang chính tiếp tục hiển thị ngay bên cạnh. Hãy dùng drawer cho các thao tác tham chiếu trực tiếp tới trang chính: bộ lọc danh sách, chuỗi thông tin chi tiết, hoặc các cài đặt không mang tính khẩn cấp. Đóng drawer bằng phím Escape hoặc chạm ra ngoài vùng bảng điều khiển. Trên các trang web tiếng Ả Rập hoặc ngôn ngữ viết từ phải sang trái (RTL), cạnh bắt đầu nằm ở bên phải. Hãy dùng thuật ngữ “start edge” thay vì “luôn từ bên phải”, để drawer không bị mở ngược hướng đọc của người dùng.
Một bottom sheet (bảng điều khiển nổi từ phía dưới) trượt lên từ đáy màn hình điện thoại. Bottom sheet là phiên bản tương tự drawer được tối ưu cho bàn tay đang cầm điện thoại ở tầm thấp. Hãy dùng bottom sheet cho một vài hành động nhanh trên mục vừa được chạm: gọi điện, lưu, hoặc chia sẻ. Đừng dùng bottom sheet cho một biểu mẫu dài hai mươi trường nhập. Sheet chỉ nên dừng ở mức hiển thị một phần hoặc nửa màn hình, và phải đóng được bằng cách vuốt xuống hoặc nhấn phím Escape. Nếu ngôn ngữ của bạn chưa có từ thông dụng cho thành phần này, đừng tự nghĩ ra một danh từ cầu kỳ. Lời giải thích “bảng trượt lên từ phía dưới” kèm thuật ngữ bottom sheet là đã hoàn chỉnh bài học.
Cùng một vị trí, góc nhìn khác nhau
Một dropdown (menu thả xuống) mở ra một danh sách lựa chọn ngắn ngay cạnh nút điều khiển và tự động đóng lại khi lựa chọn hoàn tất. Dropdown phù hợp cho việc chọn ngôn ngữ, thứ tự sắp xếp, hoặc số lượng. Dropdown không phải là thanh điều hướng thứ hai và không phải là nơi chứa các đoạn văn. Nếu danh sách có nhiều hơn khoảng mười dòng, nó cần một trang riêng hoặc một drawer, chứ không phải một menu trôi nổi bị tràn khỏi màn hình điện thoại.
Thẻ tabs giữ nhiều chế độ xem khác nhau ở cùng một vị trí. Người dùng chuyển đổi sang ngang để xem các nội dung ngang hàng: tuần này và tuần sau, mô tả và thành phần. Tất cả các nhãn tabs phải luôn hiển thị rõ ràng. Việc ẩn các nhãn tabs bên trong một menu dropdown đồng nghĩa với việc chúng chưa bao giờ thực sự là tabs.
Một accordion (bảng xếp gọn) xếp chồng các câu hỏi và mở nội dung xuống phía dưới — hãy nói rõ là loại mở từng mục một hay mở được nhiều mục cùng lúc. Hãy dùng accordion cho những câu trả lời mà phần lớn mọi người sẽ bỏ qua: quy định giao hàng hoặc danh sách FAQ dài. Đừng bao giờ giấu bản sao duy nhất của giá cả bên trong một accordion đang đóng. Trạng thái đóng giả định rằng người dùng không cần nó, trong khi giá cả không phải là loại thông tin nên giấu đi.
Tabs và accordion thường bị nhầm lẫn vì cả hai đều được coi là “tiết kiệm không gian”. Tabs thay thế nội dung hiển thị chính và giữ nguyên các nhãn khác trong tầm mắt. Accordion đẩy nội dung trang xuống dưới và ẩn câu trả lời cho đến khi được click. Nếu bạn chỉ bảo mô hình AI “tiết kiệm không gian”, bạn sẽ nhận được ngẫu nhiên một trong hai dạng. Hãy gọi đúng tên thành phần phù hợp với thói quen tìm thông tin của người dùng.
Hai dạng thức sai trên cùng một bàn làm việc
Một danh sách lớp học cần hai dạng yêu cầu khác nhau. Một thao tác nguy hiểm: hủy chỗ của học sinh này. Một thao tác bình thường: chỉ hiển thị các lớp học buổi tối. Phiên bản đầu tiên đặt cả hai vào chung một “cửa sổ bật lên” (popup) vì đó là từ duy nhất trong bản tóm tắt. Kết quả là nút Hủy rất dễ bị chạm nhầm, còn bộ lọc lớp buổi tối thì che mất danh sách mà giáo viên đang đọc. Cùng một từ ngữ, hai nhiệm vụ khác nhau, và cả hai đều cho kết quả tồi tệ.
Cách khắc phục là tách biệt thuật ngữ. Thao tác Hủy sẽ mở một dialog làm mờ phần trang còn lại. Câu chữ bên trong nêu rõ ai sẽ bị xóa khỏi danh sách. Phím Escape và nút Hủy rõ ràng đều đóng dialog và trả tiêu điểm bàn phím về nút bấm ban đầu. Trong khi đó, bộ lọc lớp buổi tối sẽ mở một drawer từ cạnh bắt đầu (start edge), danh sách chính vẫn hiển thị ngay bên cạnh, và một thao tác chạm ra ngoài sẽ đóng nó lại. Trên điện thoại, chính bộ lọc đó có thể chuyển thành bottom sheet vì tay người dùng đang ở phía dưới. Giáo viên không cần phải học ba hệ thống mới; họ chỉ cần học khoảnh khắc nào được phép ngắt quãng công việc của họ.
Hãy viết sự phân biệt này bằng ngôn ngữ người đọc để team của bạn dễ hiểu, và dán các tên tiếng Anh để mô hình AI không tự gộp chúng trở lại thành một popup chung chung. Nếu tiếng Việt chưa có từ thông dụng cho drawer, định nghĩa “bảng điều khiển từ cạnh không che danh sách chính” chính là câu giải thích chuẩn xác. Đừng mất thời gian nghĩ ra một danh từ trang trọng kaku. Hành vi tương tác mới là bản chất của bài học.
Một câu lệnh tóm tắt
On the list page, put filters in a drawer from the start edge, not in a dialog. Close the drawer with Escape or a tap outside. Keep focus inside the drawer while it is open, and return focus to the filter button when it closes.
Phía dưới câu lệnh đó, hãy viết rõ các bộ lọc thực tế bằng ngôn ngữ của bạn. Mô hình AI có thể dựng một drawer mà không cần biết các bộ lọc của bạn là khu vực hay khoảng giá. Ngược lại, bạn không thể quyết định các chi tiết kinh doanh bằng thứ tiếng Anh mà bạn không nói thành thạo. Dạng thức giao diện dùng chung, còn dữ liệu kinh doanh vẫn giữ nguyên bằng ngôn ngữ địa phương.
Mọi người thường tranh cãi về việc dạng thức nào trông hiện đại hơn. Cuộc thảo luận có ích hơn là dạng thức nào tôn trọng nhiệm vụ của người dùng. Ngắt quãng người dùng chỉ để hỏi thứ tự sắp xếp là một thao tác thô lỗ. Ngược lại, giấu một xác nhận xóa dữ liệu bên trong một menu dropdown yên tĩnh là một điều nguy hiểm. Một khi bạn đã dễ dàng giải thích hai câu đó, bạn đã vượt qua phần cốt lõi của công việc. Phần tiếp theo ngắn gọn hơn và dễ bỏ qua hơn: thông báo cho người dùng biết thao tác của họ đã thành công hay chưa mà không đẩy họ sang một trang mới.