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 nghĩa vụ phải thông báo rõ điều gì đã xảy ra thì không bao giờ thay đổi. Button, link, label, error, toast, skeleton, empty state, tooltip — đây chính là những cách một trang web đưa ra phản hồi cho người dùng. Các xu hướng thiết kế biểu tượng sẽ liên tục thay đổi. Bạn hãy đọc bài viết này như một quy tắc về tính trung thực của giao diện, chứ không phải chuyến tham quan danh mục widget.
Một trang web không bao giờ đưa ra phản hồi là một trang web mà người dùng sẽ bấm tới hai lần. Họ bấm hai lần vì không có dấu hiệu nào cho biết lần bấm đầu tiên đã được hệ thống ghi nhận. Các mô hình AI rất giỏi trong việc vẽ nút bấm, nhưng lại kém trong việc thiết kế phản hồi hệ thống — trừ khi bạn yêu cầu phản hồi đó như một thành phần riêng biệt. Phản hồi không phải là yếu tố trang trí, mà là ranh giới phân định giữa một biểu mẫu thực sự xử lý đăng ký và một biểu mẫu chỉ trông giống như vậy.
Button thực hiện nhiệm vụ. Link dẫn tới một vị trí khác.
Một button (nút bấm) làm thay đổi một trạng thái ngay tại trang hiện tại: gửi, lưu, đặt chỗ, hoặc xóa. Một link (liên kết) dẫn người dùng sang một vị trí khác: trang của ngày mai, bản đồ chỉ đường, hoặc trang chính sách. Khi mô hình AI vẽ mọi cụm từ dưới dạng button, người dùng không thể phân biệt giữa hành động di chuyển và hành động xử lý dữ liệu. Khi nó vẽ mọi hành động dưới dạng link, nút “Xóa” lại trông giống như một trang mới — và đôi khi thực sự biến thành một trang mới, điều đó còn tồi tệ hơn. Trong bản tóm tắt, hãy gọi tên động từ thao tác là button và điểm đến chuyển trang là link. Một button chính (primary button) trên một màn hình là đủ; các nút còn lại nên thiết kế chìm hơn. Việc hiển thị hai button chính cùng lúc là sự lưỡng lự trong thiết kế mà trang web từ chối giải quyết.
Hãy viết chữ trên button dưới dạng một động từ mà người dùng có thể kiểm tra lại kết quả sau đó. Nhãn “Đặt lịch khám” có thể được xác nhận kết quả, trong khi nhãn “Tiếp tục” hay “OK” thì không đem lại sự chắc chắn. Nếu người đọc của bạn không dùng tiếng Anh, động từ hiển thị trên màn hình phải bằng ngôn ngữ của họ. Tuy nhiên, tên thuật ngữ của thành phần mà bạn dán vào câu lệnh — button, link — vẫn giữ nguyên bằng tiếng Anh.
Biểu mẫu là một tập hợp các câu hỏi có nhãn
Một form (biểu mẫu) không phải là một chồng các hộp màu xám. Mỗi hộp là một input (trường nhập liệu). Mỗi input cần một label (nhãn) luôn hiển thị rõ ràng phía trên, chứ không phải một đoạn chữ placeholder (văn bản giữ chỗ) sẽ biến mất ngay khi người dùng bắt đầu gõ. Văn bản giữ chỗ bên trong hộp chỉ là một gợi ý, và gợi ý thì không phải là tên trường thông tin. Người dùng thường quên mất ô đó yêu cầu gì sau khi đã gõ chữ, và các công cụ dịch thuật cũng không thể đọc được tên trường đã bị ẩn mất. Hãy nhấn mạnh trong câu lệnh: mỗi input phải có một nhãn hiển thị phía trên bằng ngôn ngữ của người đọc.
Thông báo lỗi (error) phải nằm ngay bên cạnh trường input bị lỗi dưới dạng câu chữ rõ ràng, đồng thời được tóm tắt ở đầu biểu mẫu nếu có nhiều lỗi cùng lúc. Chỉ dùng màu sắc thì không thể cấu thành thông báo lỗi. Màu đỏ và màu xanh lá cây là vô hiệu đối với nhiều người bị mù màu, trong khi đó lại là thứ đầu tiên mô hình AI đem ra dùng. Hãy ghi rõ trong câu lệnh của bạn: “dùng câu chữ ngay bên cạnh trường thông tin, không chỉ dùng màu sắc.”
Trạng thái bắt buộc (required) là điều kiện bạn phải nêu rõ ràng, chứ không phải một dấu sao mà bạn hy vọng ai cũng tự hiểu. Hãy chỉ rõ những trường nào có thể để trống. Một số điện thoại bắt buộc ở quốc gia này có thể lại là tùy chọn ở quốc gia khác. Thực tế nghiệp vụ đó phải được viết bằng ngôn ngữ của bạn ngay phía dưới câu lệnh tiếng Anh.
Tin tức biến mất, tin tức ở lại, và tin tức bị thiếu
Một toast (đôi khi gọi là snackbar) là ghi chú ngắn thường xuất hiện ở cuối màn hình sau khi thực hiện một thao tác, rồi tự động biến mất. Những thông báo như “Đã lưu” hay “Đã sao chép” chỉ cần hiển thị trong ba giây là đủ. Toast tuyệt đối không được là nơi duy nhất ghi nhận một lỗi hệ thống. Các lỗi phải ở lại ngay bên cạnh trường thông tin hoặc ở đầu biểu mẫu cho đến khi người dùng sửa xong. Một thông báo toast hiện ra “Không thể đặt chỗ” rồi lập tức biến mất là một cuộc hội thoại bị đứt đoạn.
Một skeleton (khung xương tải trang) là khối mờ xám dạng khung của trang web trong lúc dữ liệu thực đang được tải về từ máy chủ. Skeleton tốt hơn nhiều so với một màn hình trắng tinh chờ đợi, và tốt hơn một biểu tượng xoay spinner không giải thích điều gì. Hãy dùng skeleton khi danh sách dữ liệu đang được tải. Đừng dùng skeleton làm giao diện cố định vĩnh viễn. Nếu dữ liệu không bao giờ tới, skeleton phải chịu thua và chuyển thành trạng thái empty state.
Một empty state (trạng thái trống) là giao diện trang web khi chưa có dữ liệu nào để hiển thị: chưa có lịch đặt, không có lớp học nào tuần này, hoặc không tìm thấy kết quả. Empty state gọi tên sự trống rỗng đó một cách rõ ràng và đưa ra một hành động tiếp theo. Một bảng trống không có chữ không phải là empty state, mà là một trang web nhún vai bất lực. Đây là màn hình mà các tổ chức nhỏ rất hay quên, trong khi lại là màn hình đầu tiên mà khách truy cập bắt gặp khi danh sách thực sự đang trống.
Một tooltip (chú giải công cụ) là một vài từ giải thích xuất hiện khi rê chuột (hover) hoặc khi tiêu điểm bàn phím di chuyển tới một biểu tượng bí ẩn. Tooltip không phải là nơi đặt chính sách dài dòng, và nó không hoạt động ổn định trên nhiều thiết bị điện thoại. Nếu các từ đó quan trọng với người dùng, hãy hiển thị chúng dưới dạng văn bản bình thường trên màn hình. Tooltip chỉ là một nhãn phụ bổ sung, chứ không phải một tài liệu hướng dẫn.
Lần nhấn thứ hai không đáng có
Một phụ huynh đặt lịch lớp học từ điện thoại trên đường về nhà. Nút bấm họ vừa chạm hiển thị chữ “Tiếp tục”. Không có thay đổi nào trên màn hình mà họ có thể quan sát được, nên họ nhấn thêm một lần nữa. Kết quả là hai lịch đặt bị gửi lên hệ thống. Bộ phận lễ tân gọi đó là lỗi của người dùng, nhưng nguyên nhân thực sự là do hệ thống thiếu phản hồi. Từ “Tiếp tục” không phải là một động từ có thể xác nhận kết quả, và một trang web im lặng không phải là một lời xác nhận.
Trang web hoạt động tốt luôn có những thành phần rõ ràng. Nút bấm ghi rõ “Đăng ký lớp học này” bằng ngôn ngữ của phụ huynh. Mỗi trường nhập liệu đều có nhãn không bao giờ biến mất. Nếu trường số điện thoại bị trống, dòng chữ thông báo sẽ xuất hiện ngay bên cạnh và ở lại đó. Khi yêu cầu thành công, một thông báo toast xuất hiện cho biết yêu cầu đã được gửi rồi biến mất, trong khi bản thân biểu mẫu chuyển thành một biên lai ngắn mà phụ huynh có thể cuộn lại xem. Nếu danh sách lớp học trống vì chưa mở khóa mới, empty state sẽ giải thích điều đó và cung cấp một nút hành động — chứ không phải một bảng trống trông như bị hỏng. Tất cả những điều này không phải là phong cách đồ họa, mà là sự tôn trọng của trang web khi không bắt người dùng phải đoán mò.
Khi viết bản tóm tắt này, hãy giữ nguyên tên các thành phần bằng tiếng Anh — button, label, error, toast, empty state — và viết mọi câu từ mà con người đọc bằng ngôn ngữ địa phương. Một mô hình AI nếu chỉ nhận được nhãn tiếng Anh sẽ xuất bản giao diện hoàn toàn bằng tiếng Anh. Đó là một dạng thất bại khác so với việc thiếu thông báo toast, nhưng cũng phổ biến không kém. Dạng thức giao diện dùng chung bằng tiếng Anh để hành vi xử lý chuẩn xác; còn câu chữ viết bằng ngôn ngữ địa phương để người dùng hiểu rõ mình vừa làm gì.
Một câu lệnh tóm tắt
Build a booking form. Each input has a visible label. Errors are written beside the field in words, not by color alone. After a successful send, show a toast that says the visit is requested and leaves after a few seconds. If sending fails, keep the error on the form. If there are no visits yet, show an empty state with one button to add the first.
Sau đó, hãy viết các nhãn và câu thông báo lỗi bằng ngôn ngữ của người đọc. Câu lệnh tiếng Anh ở trên định hình cấu trúc, còn các câu chữ phía dưới thể hiện sự thấu hiểu của bạn. Mô hình AI sẽ không biết cách một phòng khám ở thành phố của bạn gửi lời xin lỗi một cách lịch sự. Bạn mới là người biết điều đó. Bài viết tiếp theo sẽ bàn về chuyển động chuyển cảnh (motion), cũng như những yếu tố trang trí nào có thể hoãn lại cho đến khi tất cả các phản hồi giao diện này được hoàn thiện.