Tối ưu hóa trải nghiệm Tooltip: Giải pháp cân bằng giữa độ trễ và tốc độ phản hồi

Trên các trang liệt kê câu hỏi cho sản phẩm của tôi, FrontPrep, tôi hiển thị logo công ty bên cạnh các câu hỏi phỏng vấn. Khi bạn di chuột qua một logo, một tooltip (chú thích) sẽ hiện tên công ty.

Có một điều khiến tôi khó chịu trong vài ngày qua. Nếu tôi chỉ di chuyển con trỏ qua trang, các tooltip cứ liên tục hiện ra ngay lập tức trên đường di chuyển. Nguyên nhân rất đơn giản: tôi đã đặt độ trễ của tooltip bằng 0, vì vậy nó xuất hiện ngay khoảnh khắc con trỏ di chuột qua logo.

Để khắc phục vấn đề này, tôi đã thêm độ trễ chuyển tiếp 200ms, điều này có hiệu quả nhưng lại tạo ra một vấn đề mới. Nếu bạn nhìn vào giao diện người dùng, có một vài hàng mà nhiều logo nằm cạnh nhau vì cùng một câu hỏi phỏng vấn được hỏi ở nhiều công ty. Giờ đây, việc di chuyển từ logo này sang logo khác đồng nghĩa với việc phải chờ đợi độ trễ 200ms mỗi khi bạn di chuột qua một logo công ty khác, điều này tạo cảm giác chậm chạp và dẫn đến trải nghiệm người dùng kém.

Bài viết này không nói về việc xây dựng một tooltip. Nó nói về một mô hình tương tác nhỏ, cùng loại mà bạn sẽ thấy trên các thanh công cụ của trình duyệt và nhiều trang web khác nhau, mà mọi người thường không để ý đến.

Đây là một video ngắn về trải nghiệm trước và sau khi thay đổi trên trang web của tôi. Nó giúp bạn hiểu rõ hơn về vấn đề này.

Giải pháp

Tôi sẽ chia giải pháp của mình thành ba phần.

Trong FrontPrep, các tooltip của tôi được xây dựng bằng Radix và Motion. Tôi sẽ minh họa mô hình này bằng một phiên bản React đơn giản hơn ở bên dưới, và sau đó trong bài viết, tôi sẽ đưa ý tưởng này vào một Claude skill mà bạn có thể sử dụng để kiểm tra codebase của chính mình.

Đây là bài viết tiếp theo mô phỏng lại trải nghiệm người dùng (UX) cơ bản ở đây mà không cần bất kỳ JavaScript nào.

Cách mã hoạt động

Tôi sẽ cố gắng giải thích mã theo đúng thứ tự diễn ra khi bạn di chuyển con trỏ.

Bước 1: Bạn di chuột qua một logo

Khi onMouseEnter được kích hoạt trên một logo, hàm này sẽ được gọi:

Khi di chuột, thành phần này đặt ra một câu hỏi: trang có đang ở trạng thái "ấm" (warm) không? Nếu có, tooltip sẽ mở ngay lập tức. Nếu không, nó bắt đầu bộ đếm thời gian 200ms và chờ đợi. Bạn có thể tự hỏi đối tượng tooltips này đến từ đâu. Nó đến từ TooltipProvider mà tôi sẽ thảo luận ở bước cuối cùng.

Bước 2: Tooltip mở ra

Đây là hàm show xử lý việc mở tooltip:

Hàm này thực hiện ba việc:

Quay lại điểm 1, nó sao chép những gì tooltips.isWarm trả về vào một cờ (flag) có tên là instant, vì cờ instant này được thêm vào tooltip dưới dạng một thuộc tính dữ liệu (data attribute), mà CSS sử dụng để bỏ qua hiệu ứng hoạt ảnh khi xuất hiện.

Đây là lý do tại sao khi trang ở trạng thái "ấm", tooltip sẽ mở ra mà không có bất kỳ hiệu ứng hay độ trễ nào.

Bước 3: Bạn rời khỏi logo

Khi onMouseLeave được kích hoạt trên một logo, hàm này sẽ được gọi:

Đầu tiên, chúng ta phải biết liệu tooltip hiện có đang mở hay không.

Giả sử con trỏ của bạn lướt qua một logo trong 50ms, ít hơn nhiều so với 200ms, nên bộ đếm thời gian được bắt đầu bởi handleEnter vẫn đang chạy và tooltip chưa mở. clearTimeout trong handleLeave sẽ hủy bộ đếm thời gian đó để tooltip không bao giờ mở ra, và if (!open) return; sẽ dừng hàm ngay tại đó, vì tooltip chưa bao giờ mở nên không có gì để đóng và không có thời gian hồi chiêu (cooldown) nào để bắt đầu. Trong video đầu tiên, một lần lướt qua sẽ mở mọi tooltip trên đường đi; giờ đây, cùng một lần lướt qua đó sẽ không mở bất kỳ tooltip nào.

Nếu tooltip đang mở, điều này xảy ra khi bạn dừng con trỏ trên logo hơn 200ms, hoặc khi trang đang ở trạng thái "ấm" và tooltip mở ngay lập tức khi di chuột vào. Chúng ta sẽ đóng tooltip và thông báo cho provider, sau đó provider sẽ bắt đầu bộ đếm thời gian hồi chiêu 300ms. Nếu bạn di chuột qua logo tiếp theo trước khi bộ đếm này kết thúc, tooltip sẽ mở ngay lập tức.

Bước 4: Provider

Đây là trạng thái chia sẻ mà chúng ta cần để toàn bộ mô hình này hoạt động. Trang có thể ở trạng thái "ấm" hoặc "lạnh". Nếu bạn để ý, markOpened sẽ hủy các thời gian hồi chiêu đang chờ; đây là điều giữ cho trang ở trạng thái "ấm" khi bạn di chuyển từ logo này sang logo khác. Về cơ bản, mỗi tooltip mới sẽ hủy bỏ thời gian hồi chiêu được bắt đầu bởi tooltip trước đó.

Bạn không cần phải bối rối về cờ skipWhenWarm, nó chỉ dành cho việc bật/tắt trải nghiệm trước và sau trong bản demo; tắt nó đi sẽ luôn làm cho provider ở trạng thái "lạnh" để giúp bạn thấy hành vi trước khi thay đổi.

Một chi tiết quan trọng khác ở đây là isWarm là một ref chứ không phải là một React state vì việc thay đổi nó không làm render lại tất cả các tooltip trên trang. Ref này chỉ được đọc bên trong các trình xử lý sự kiện.

Tại sao lại là bộ đếm thời gian 200ms?

Nếu chúng ta chọn bộ đếm thời gian dưới 150ms, khi con trỏ lướt qua một trigger của tooltip, nó rất dễ mở tooltip ra. Nếu chúng ta chọn bộ đếm thời gian hơn 250ms, thao tác di chuột sẽ tạo cảm giác chậm chạp và bị lỗi. Vì vậy, 200ms là một con số cân bằng, hợp lý trong trường hợp này.

Đánh giá & Gu thẩm mỹ

Nếu bạn yêu cầu AI xây dựng một tooltip, nó sẽ xây dựng một tooltip đầy đủ chức năng, nhưng cuối cùng, chính bạn, con người, mới là người quyết định xem tooltip đó có xứng đáng hay không, bởi vì có những chi tiết phân biệt một tooltip "hoạt động được" với một tooltip "hoàn thiện", cũng giống như cách chúng phân biệt một sản phẩm "hoạt động được" và một sản phẩm "hoàn thiện". AI chỉ có thể xây dựng một sản phẩm hoàn thiện nếu bạn hướng dẫn nó làm như vậy, và bạn có thể hướng dẫn nó khi bạn đã phát triển được gu thẩm mỹ và khả năng đánh giá, vốn đến từ nhiều năm kinh nghiệm, sai lầm và thực hành.

Tuy nhiên, bạn có thể sử dụng kỹ năng của các kỹ sư/nhà thiết kế khác để có được gu thẩm mỹ của họ về một sản phẩm hoàn thiện và cuối cùng xây dựng sản phẩm của riêng bạn khi bạn bắt đầu phát triển khả năng đánh giá của chính mình. Bạn có thể tạo/sử dụng các kỹ năng về màu sắc, khả năng truy cập, biểu mẫu, hoạt ảnh, kiểu chữ, v.v., bạn có thể tạo ra các kết quả đầu ra vững chắc nhưng điều đó không có nghĩa là nó đã sẵn sàng để đưa vào sản xuất. Bạn vẫn là người cuối cùng đánh giá và phát hành nó chỉ khi nó đáp ứng các tiêu chuẩn và gu thẩm mỹ của bạn.

Skill

Tôi đã tạo một Claude skill để giải quyết vấn đề trên mà tôi đã gặp phải, bạn có thể xây dựng một skill tương tự hoặc sao chép đoạn mã được viết bên dưới và chạy nó để kiểm tra codebase của bạn. Mỗi codebase đều khác nhau, và mỗi codebase sử dụng các thư viện khác nhau cho tooltip hoặc đã viết các tooltip tùy chỉnh theo cách khác nhau; skill này sẽ hoạt động cho tất cả.

Các quan điểm được trình bày trong bài viết này chỉ là của tác giả và không phải của Coinbase.