Mở đầu — vì sao bài này quan trọng
Bạn có bao giờ điền một form đăng ký ngân hàng và bắt gặp một icon dấu chấm hỏi nhỏ xíu bên cạnh ô "Mã CVV"? Bạn rê chuột vào, và một khung nhỏ hiện lên: "3 chữ số ở mặt sau thẻ". Đúng một giây đó, bạn hiểu ra và điền tiếp. Đó chính là tooltip đang làm việc — âm thầm, ngắn gọn, đúng lúc.
Tooltip và helper text là hai trong những công cụ khiêm tốn nhất của UX Writer, nhưng lại là nơi rất nhiều sản phẩm mắc lỗi. Người thì lạm dụng tooltip đến mức nhét cả đoạn văn quan trọng vào đó — rồi người dùng mobile không bao giờ đọc được vì không có chuột để hover. Người thì để helper text mờ nhạt, chung chung, không giúp được gì. Có người lại nhầm lẫn hai thứ này với nhau, dùng sai chỗ, sai thời điểm.
Trong bài này, chúng ta sẽ làm rõ ranh giới: tooltip là gì, helper text là gì, khi nào dùng cái nào, và quan trọng nhất — khi nào KHÔNG được dùng tooltip. Đây là kiến thức bạn sẽ áp dụng hằng ngày, dù bạn viết cho một app ngân hàng, một sàn thương mại điện tử, hay một nền tảng học trực tuyến. Nắm vững nó, bạn sẽ giảm được rất nhiều sự bối rối của người dùng mà không làm giao diện rối rắm thêm.
Khái niệm cốt lõi
Tooltip là gì
Tooltip là một mẩu văn bản ngắn xuất hiện tạm thời khi người dùng kích hoạt một trigger — thường là rê chuột (hover) trên desktop, hoặc nhấn giữ (long-press) trên mobile, hoặc focus vào một phần tử khi dùng bàn phím. Đặc điểm quan trọng nhất: tooltip ẩn theo mặc định và chỉ hiện khi có hành động chủ động.
Vì bản chất "ẩn mặc định" này, tooltip có ba đặc tính bắt buộc:
- Ngắn gọn: thường 1–2 câu, lý tưởng dưới 15–20 từ. Nếu bạn cần một đoạn dài, tooltip không phải là chỗ đó.
- Bổ trợ, không thiết yếu: thông tin trong tooltip phải là "biết thêm thì tốt", chứ không phải "không biết thì không dùng được". Người dùng phải hoàn thành được tác vụ ngay cả khi họ không bao giờ mở tooltip.
- Theo ngữ cảnh: tooltip gắn với một phần tử cụ thể (một nút, một icon, một trường nhập liệu) và giải thích riêng phần tử đó.
Helper text là gì
Helper text (đôi khi gọi là hint text hoặc supporting text) là văn bản luôn hiển thị, thường nằm ngay dưới một trường nhập liệu hoặc bên cạnh một lựa chọn. Nó khác tooltip ở chỗ: người dùng không cần làm gì cả — thông tin đã ở đó ngay từ đầu.
Ví dụ dưới ô "Mật khẩu" có dòng chữ xám nhỏ: "Ít nhất 8 ký tự, bao gồm chữ và số." Đó là helper text. Nó luôn nhìn thấy được, nên phù hợp cho thông tin mà người dùng cần biết trước khi hành động, chứ không phải sau khi tò mò.
Sự khác biệt then chốt
Hãy ghi nhớ nguyên tắc này — nó sẽ giải quyết 80% các quyết định của bạn:
> Thông tin càng quan trọng, càng phải hiển thị mặc định. Chỉ đưa vào tooltip những gì người dùng có thể sống thiếu.
| Tooltip | Helper text | |
|---|---|---|
| Hiển thị | Ẩn, cần trigger | Luôn hiện |
| Độ dài | 1–2 câu | 1–2 câu, có thể dài hơn chút |
| Loại thông tin | Bổ trợ, "nice to know" | Cần thiết, "need to know" |
| Rủi ro mobile | Cao (khó trigger) | Thấp |
Tại sao mobile là điểm chí tử của tooltip
Trên desktop, hover là hành động tự nhiên. Nhưng trên điện thoại, không có trạng thái hover. Người dùng chỉ có thể chạm. Long-press thì hầu như không ai đoán ra là có tooltip ẩn ở đó. Vì vậy, nếu bạn nhét thông tin quan trọng vào tooltip, bạn vừa loại bỏ toàn bộ người dùng mobile khỏi thông tin đó — mà ở Việt Nam, tỷ lệ truy cập từ điện thoại thường vượt 70–75% với nhiều loại sản phẩm. Đây không phải chi tiết nhỏ; đây là lý do gốc rễ khiến quy tắc "đừng dùng tooltip cho thông tin thiết yếu" tồn tại.
Tình huống thực tế
Ví dụ 1 — Ví điện tử MoMo và trường "Mã bảo mật"
Bối cảnh: Giả sử đội thiết kế của một ví điện tử kiểu MoMo đang làm màn hình thêm thẻ ngân hàng. Ban đầu, họ để trường "Mã bảo mật (CVV)" kèm một icon dấu hỏi, và toàn bộ giải thích "Đây là 3 chữ số ở mặt sau thẻ, dùng để xác thực giao dịch" được nhét vào tooltip hover.
Diễn giải: Dữ liệu phân tích cho thấy tỷ lệ bỏ dở ở trường CVV cao bất thường trên bản mobile — khoảng 18% người dùng dừng lại ở đây. Lý do: trên điện thoại, họ không biết CVV là gì, không thấy được tooltip, và bối rối. Đội UX Writer quyết định chuyển giải thích cốt lõi thành helper text luôn hiển thị ngay dưới ô: "3 số ở mặt sau thẻ". Tooltip vẫn giữ lại cho phần bổ sung "Số này giúp xác thực thanh toán, chúng tôi không lưu lại". Sau thay đổi, tỷ lệ bỏ dở ở trường này giảm rõ rệt.
Bài học: Thông tin mà người dùng bắt buộc phải biết để điền đúng (CVV nằm ở đâu) phải là helper text. Thông tin "cho yên tâm" (chúng tôi không lưu số này) mới là ứng viên cho tooltip.
Ví dụ 2 — Sàn TMĐT và tooltip giải thích "Freeship Extra"
Bối cảnh: Một sàn thương mại điện tử kiểu Shopee/Lazada hiển thị nhãn "Freeship Extra" bên cạnh sản phẩm. Người dùng thường không hiểu chương trình này khác gì với "Miễn phí vận chuyển" thông thường. Đội ngũ đặt một icon "i" nhỏ cạnh nhãn; khi chạm vào (họ chủ động thiết kế cho cả tap trên mobile, không dựa vào hover), một tooltip hiện: "Giảm thêm tối đa 70.000đ phí ship, áp dụng cho đơn từ 0đ."
Diễn giải: Đây là cách dùng tooltip đúng bài. Thông tin này là bổ trợ — người dùng vẫn mua được hàng dù không đọc. Nhưng với người tò mò, một câu 12 từ giải thích đủ rõ mà không làm rối trang danh sách sản phẩm vốn đã dày đặc. Điểm quan trọng: họ dùng tap làm trigger trên mobile, không phải long-press, vì tap dễ khám phá hơn nhiều. Icon "i" là tín hiệu thị giác rõ ràng rằng "có gì đó để bấm ở đây".
Bài học: Khi buộc phải dùng tooltip trên mobile, hãy chọn trigger dễ khám phá (tap vào icon rõ ràng), và đảm bảo nội dung đủ ngắn để hiện gọn trên màn hình nhỏ mà không che mất phần đang thao tác.
Ví dụ 3 — Nền tảng học trực tuyến và ô "Slug khóa học"
Bối cảnh: Trên một nền tảng dạy học trực tuyến, giảng viên khi tạo khóa học phải điền trường "Đường dẫn khóa học (slug)". Nhiều giảng viên không phải dân kỹ thuật, không hiểu "slug" nghĩa là gì và thường điền cả dấu tiếng Việt, khoảng trắng, khiến URL bị lỗi.
Diễn giải: Đội nội dung đặt helper text cố định dưới ô: "Chỉ dùng chữ thường, số và dấu gạch ngang. Ví dụ: ux-writing-co-ban". Phần "vì sao lại thế" — tức "đây là phần địa chỉ web hiển thị công khai của khóa học" — được đưa vào tooltip qua icon "?", vì đó là thông tin nền tảng, không bắt buộc phải đọc để điền đúng. Kết quả: số lượng slug bị lỗi định dạng giảm mạnh, vì quy tắc quan trọng nhất luôn hiển thị, kèm một ví dụ cụ thể.
Bài học: Ví dụ cụ thể trong helper text (như "ux-writing-co-ban") thường mạnh hơn cả một câu quy tắc trừu tượng. Người ta bắt chước mẫu dễ hơn là hiểu luật.
Hướng dẫn từng bước
Khi bạn đứng trước một phần tử cần giải thích, hãy đi qua quy trình sau:
Bước 1 — Hỏi: thông tin này thiết yếu hay bổ trợ? Nếu người dùng KHÔNG THỂ hoàn thành tác vụ mà không có nó → thiết yếu → dùng helper text (hoặc thậm chí đưa thẳng vào label/placeholder). Nếu chỉ là "biết thêm thì hay" → bổ trợ → cân nhắc tooltip.
Bước 2 — Hỏi: có thể loại bỏ nhu cầu giải thích không? Trước khi thêm bất kỳ chú thích nào, hãy tự hỏi liệu có thể viết lại label cho rõ hơn không. Một label tốt thường xoá bỏ nhu cầu tooltip. "Mã bảo mật (3 số sau thẻ)" tự nó đã đủ, không cần icon hỏi. Chú thích tốt nhất là chú thích bạn không cần viết.
Bước 3 — Nếu chọn tooltip, kiểm tra độ dài. Viết nội dung, rồi đếm từ. Trên 20 từ thì phải cắt hoặc chuyển sang dạng khác (helper text, một dòng mô tả, hay một trang trợ giúp). Tooltip không phải chỗ chứa đoạn văn.
Bước 4 — Thiết kế trigger cho cả desktop lẫn mobile. Trên desktop: hover và focus (đừng quên focus, để người dùng bàn phím tiếp cận được). Trên mobile: dùng tap vào một icon rõ ràng, không dựa vào long-press. Đảm bảo có tín hiệu thị giác (icon "i" hoặc "?") báo rằng đây là điểm có thể tương tác.
Bước 5 — Viết nội dung theo ngôn ngữ người dùng. Đừng dùng thuật ngữ nội bộ. Giải thích bằng lời người dùng hiểu. "CVV" nên đi kèm "3 số sau thẻ", không chỉ trơ trọi từ viết tắt.
Bước 6 — Kiểm tra khả năng tiếp cận (accessibility). Tooltip phải đọc được bằng bàn phím (kích hoạt qua focus) và có thuộc tính phù hợp để trình đọc màn hình nhận diện. Nội dung không được biến mất quá nhanh khiến người dùng chưa kịp đọc.
Lỗi thường gặp & mẹo
Lỗi 1 — Nhét thông tin thiết yếu vào tooltip. Đây là lỗi phổ biến và nghiêm trọng nhất. Nếu người dùng mobile không đọc được nó mà vẫn phải làm đúng, bạn đã đặt sai chỗ. Mẹo: mỗi khi định viết tooltip, tự hỏi "nếu không ai mở cái này, người dùng có làm sai không?". Nếu câu trả lời là có → chuyển thành helper text.
Lỗi 2 — Tooltip quá dài. Nhồi ba bốn câu vào một khung nhỏ khiến nó che mất giao diện và không ai đọc hết. Mẹo: giữ dưới 20 từ; nếu cần dài hơn, dùng liên kết "Tìm hiểu thêm" dẫn tới trang trợ giúp.
Lỗi 3 — Dựa vào hover trên mobile. Không có hover trên điện thoại. Mẹo: luôn thiết kế trigger dạng tap vào icon rõ ràng cho mobile.
Lỗi 4 — Icon trigger mơ hồ. Đặt tooltip vào một chỗ không có dấu hiệu gì báo rằng "có thể bấm". Người dùng không rê chuột vào những chỗ họ không nghĩ là tương tác được. Mẹo: dùng icon quy ước như "i" (thông tin) hoặc "?" (trợ giúp).
Lỗi 5 — Helper text chung chung, vô nghĩa. "Nhập thông tin của bạn" dưới một ô trống thì không giúp được gì. Mẹo: helper text tốt nêu ràng buộc cụ thể ("ít nhất 8 ký tự") hoặc cho ví dụ ("ví dụ: ux-writing-co-ban").
Lỗi 6 — Lạm dụng, đặt tooltip khắp nơi. Khi cái gì cũng có icon hỏi, giao diện trở nên rối và người dùng bắt đầu bỏ qua tất cả. Mẹo: chỉ chú thích những chỗ thật sự gây bối rối; ưu tiên làm rõ label trước.
Mẹo bổ sung — Đừng để tooltip che thứ nó đang giải thích. Tính toán vị trí hiển thị để tooltip không đè lên chính trường người dùng đang thao tác, đặc biệt trên màn hình nhỏ.
Bài tập thực hành
Bài tập 1 — Phân loại. Cho các mẩu thông tin sau, quyết định mỗi mẩu nên là helper text, tooltip, hay viết lại vào label. Giải thích lý do:
- "Mật khẩu phải có ít nhất 8 ký tự."
- "Điểm thưởng của bạn được tính dựa trên tổng chi tiêu 90 ngày gần nhất."
- "Nhập số điện thoại để nhận mã OTP."
- "Chúng tôi dùng email này để gửi biên lai, không gửi quảng cáo."
Bài tập 3 — Audit thực tế. Mở một ứng dụng bạn dùng hằng ngày (ngân hàng, ví điện tử, hoặc app đặt đồ ăn) trên điện thoại. Tìm 3 chỗ có icon "i" hoặc "?". Với mỗi chỗ, ghi lại: nó dùng trigger gì trên mobile? Thông tin bên trong là thiết yếu hay bổ trợ? Nếu thiết yếu, bạn sẽ đề xuất chuyển nó thành gì?
Bài tập 4 — Viết cặp đôi. Cho trường "Ngày hết hạn thẻ (MM/YY)", hãy viết cả một helper text (luôn hiện) và một tooltip (bổ trợ) sao cho hai thứ bổ sung nhau chứ không trùng lặp.
Tóm tắt
Tooltip và helper text là hai công cụ khác nhau cho hai nhu cầu khác nhau. Helper text luôn hiển thị, dành cho thông tin thiết yếu mà người dùng cần biết trước khi hành động. Tooltip ẩn theo mặc định, kích hoạt qua trigger, chỉ dành cho thông tin bổ trợ ngắn gọn 1–2 câu.
Nguyên tắc vàng: thông tin càng quan trọng, càng phải hiển thị mặc định — đừng bao giờ giấu thứ thiết yếu trong tooltip, đặc biệt vì người dùng mobile gần như không tiếp cận được nó. Trước khi thêm bất kỳ chú thích nào, hãy thử làm rõ label trước; chú thích tốt nhất là chú thích bạn không cần viết. Khi buộc dùng tooltip, hãy giữ ngắn, dùng trigger dễ khám phá (tap vào icon rõ ràng), và đảm bảo cả người dùng bàn phím lẫn trình đọc màn hình đều tiếp cận được. Làm đúng những điều này, bạn sẽ giảm bối rối cho người dùng mà không làm giao diện thêm rối rắm.