Trang web của bạn có một loại khách truy cập mới. Một số người dùng là con người đang chuyển từ việc tự điều hướng sang uỷ quyền các hành trình hướng đến mục tiêu cho các tác nhân AI. Những hệ thống tự động này có thể diễn giải dữ liệu đầu vào, lập kế hoạch và thực thi hành động thay mặt cho người dùng.
Tuy nhiên, nhiều trang web của chúng tôi được thiết kế để mang lại trải nghiệm đẹp mắt cho người dùng, với các trạng thái di chuột phức tạp, bố cục thay đổi và chuyển động mượt mà. Chức năng này không hoạt động đối với nhân viên hỗ trợ.
Cách nhân viên hỗ trợ xem trang web của bạn
Nhân viên hỗ trợ không xem trang web của bạn trên màn hình. Hệ thống này hoạt động dựa trên thông tin mà máy có thể đọc được trên trang web của bạn. Chất lượng của biểu diễn này sẽ quyết định hiệu quả của các sản phẩm.
Các tác nhân có thể xem trang web của bạn theo 3 cách chính: ảnh chụp màn hình, HTML thô và cây hỗ trợ tiếp cận.
Ảnh chụp màn hình
Tác nhân chụp nhanh trang được kết xuất và sử dụng một mô hình thị giác để xác định các phần tử. Dựa vào ảnh chụp màn hình, nhân viên hỗ trợ có thể nhận ra rằng thanh tìm kiếm ở trên cùng bên phải là một thanh tìm kiếm chung, trong khi hộp ở giữa có thể là một trường biểu mẫu. Các tín hiệu trực quan có thể hữu ích vì các tác nhân có thể sử dụng màu sắc, kích thước và khoảng cách để xác định mức độ quan trọng. Nút Xoá lớn có thể được hiểu là cần thận trọng hơn so với đường liên kết "Trợ giúp" nhỏ. Tuy nhiên, việc phân tích ảnh chụp màn hình có thể diễn ra chậm và tốn kém (về số lượng mã thông báo đã sử dụng), nên đây là phương án dự phòng tốt hơn khi cấu trúc gây nhầm lẫn.
HTML
Tác nhân này phân tích DOM và đọc HTML. Nó hiểu cách các phần tử được lồng, hệ thống phân cấp logic của cây DOM, các thuộc tính như mã nhận dạng và lớp xác định cấu trúc, cũng như các chuỗi dữ liệu thô tạo thành nền tảng thông tin của trang web. Điều này giúp tác nhân hiểu được mối quan hệ giữa các phần tử. Nếu nút "Mua ngay" nằm trong một vùng chứa sản phẩm, thì tác nhân sẽ giả định rằng nút đó thuộc về sản phẩm cụ thể đó.
Cây hỗ trợ tiếp cận
Cây hỗ trợ tiếp cận là một API gốc của trình duyệt, giúp chắt lọc DOM thành những gì quan trọng nhất: vai trò, tên và trạng thái của các phần tử tương tác. Đây là bản tóm tắt ngữ nghĩa của trang, được công nghệ hỗ trợ sử dụng. Đối với một tác nhân AI, nó hoạt động như một bản đồ có độ trung thực cao, bỏ qua "nhiễu" trực quan của CSS để tập trung vào tiện ích thuần tuý. Bằng cách diễn giải cây này, một tác nhân có thể tìm hiểu ý định chức năng của mọi nút bật/tắt, thanh trượt và trường nhập.
Kết hợp nhiều phương thức
Việc chỉ dựa vào một đầu vào sẽ tạo ra một khoảng trống ngữ nghĩa. Ví dụ: trong DOM, một tác nhân có thể thấy <div> mà không biết rằng bạn đã định cấu hình nút này thành một nút chức năng bằng CSS và JavaScript. Với ảnh chụp màn hình, có thể một nhân viên hỗ trợ sẽ xác định được vị trí của nút đó trên màn hình, nhưng vẫn không biết đích đến dự kiến hoặc hành động mà nút đó được thiết kế để kích hoạt.
Do đó, các tác nhân hiện đại kết hợp nhiều phương thức. Chúng sử dụng DOM và cây hỗ trợ tiếp cận để có được danh sách rõ ràng, có cấu trúc về các phần tử tương tác, sau đó tham chiếu chéo danh sách đó với một bản kết xuất trực quan để hiểu bố cục, việc nhóm và các tín hiệu trực quan.
Công việc của chúng tôi là cung cấp tín hiệu rõ ràng trên tất cả các kênh này.
Tạo trang web thân thiện với tác nhân
Để giúp nhân viên hỗ trợ điều hướng trên trang web của bạn, hãy cân nhắc làm theo những điều sau:
- Tất cả các hành động cần thiết do con người hoặc nhân viên thực hiện đều phải được phản ánh rõ ràng trong giao diện.
- Đảm bảo bố cục ổn định. Các tác nhân chụp ảnh màn hình có thể sẽ bị nhầm lẫn nếu bố cục trang web của bạn liên tục thay đổi, ví dụ: khi nút Thêm vào giỏ hàng trên trang sản phẩm nằm ở vị trí khác nhau cho mỗi danh mục sản phẩm.
- Tránh các phần tử "ảo" hoặc lớp phủ trong suốt có thể ẩn các phần tử tương tác. Phân tích trực quan do tác nhân thực hiện có thể loại bỏ các nút bị che phủ, ngay cả khi nút đó xuất hiện trong suốt.
- Thiết kế các phần tử có thể thao tác bằng HTML có ngữ nghĩa. Ưu tiên thẻ
<button>và<a>hơn các phần tử<div>và<span>đã sửa đổi. Các tác nhân nhận ra những phần tử này là tương tác.- Nếu không thể sử dụng HTML ngữ nghĩa, hãy luôn cung cấp cho phần tử
rolevàtabindexthích hợp. Ví dụ:<div role="button">.
- Nếu không thể sử dụng HTML ngữ nghĩa, hãy luôn cung cấp cho phần tử
- Đặt
cursor: pointertrong CSS, đây là một tín hiệu mạnh mẽ cho khả năng thực hiện hành động. - Thêm thuộc tính
forvào thẻ<label>để liên kết các thẻ này với dữ liệu đầu vào. Điều này giúp tác nhân AI hiểu được mục đích của một trường bằng cách cho biết văn bản nhãn được gắn trực tiếp vào chuỗi hành động. - Đảm bảo mọi phần tử tương tác cần thiết để tiếp tục hành trình của người dùng đều có một vùng hiển thị lớn hơn 8 pixel vuông để tránh bị phân tích trực quan lọc ra.
Các bước tiếp theo
Mọi thứ chúng tôi đề xuất để giúp một trang web "sẵn sàng cho tác nhân" cũng giúp trang web trở nên hữu ích hơn cho người dùng.
Việc tạo ra các trang web thân thiện với tác nhân AI là một động lực để cam kết lại với các nguyên tắc cơ bản của việc xây dựng các trang web có cấu trúc chặt chẽ, dễ truy cập và ngữ nghĩa.
- Đọc về WebMCP, một tiêu chuẩn web được đề xuất để giúp các trang web tương tác với các tác nhân, đồng thời đăng ký tham gia chương trình xem trước sớm để bắt đầu thử nghiệm.
- Kiểm tra Cây hỗ trợ tiếp cận: Sử dụng các công cụ hiện có để đảm bảo hệ thống phân cấp của trang web có thể đọc được bằng máy và ổn định.