Nút tác vụ nổi (FAB) cho Shopify: Khi nào hữu ích và khi nào gây phiền toái

Nút hành động nổi (Floating Action Button — thường gọi tắt là FAB) là một nút tròn hoặc viên thuốc ghim cố định trên màn hình khi khách cuộn trang, nổi lên trên nội dung thay vì nằm chìm trong bố cục. Đây là một chi tiết giao diện nhỏ nhưng lại là một trong những thành phần dễ bị lạm dụng nhất: cực kỳ hữu ích khi bảo vệ một hành động chuyển đổi then chốt, nhưng gây khó chịu khi trở thành vật cản cạnh tranh tầm nhìn với thanh Tab Bar di động.

Nút FAB thực chất dùng để làm gì?

Khái niệm FAB bắt nguồn từ hệ thống Material Design của Google, nơi nút hành động nổi đại diện cho hành động quan trọng nhất trên một màn hình — thường hiển thị dưới dạng nút tròn ghim ở góc dưới bên phải hoặc chính giữa phía dưới, luôn nhìn thấy dù người dùng cuộn đến đâu.

Trên cửa hàng thương mại điện tử, “hành động quan trọng duy nhất” này thường rơi vào một trong các mục sau:

• Thêm vào giỏ / Thanh toán nhanh: Giúp hành động chuyển đổi chính luôn trong tầm tay mà không cần vuốt ngược lên đầu trang.
• Chat trực tuyến / Hỗ trợ khách hàng: Giữ kênh tư vấn cách 1 chạm mà không chiếm chỗ cố định trên thanh điều hướng chính.
• Khuyến mãi hoặc giảm giá có giới hạn thời gian: Tạo điểm nhấn thị giác nổi bật hơn một mục menu thông thường.
• Nút cuộn lên đầu trang (Back-to-top): Phục vụ các trang danh mục hoặc bài viết nội dung rất dài.

Điểm chung: FAB dành cho những tính năng bạn muốn khách hàng truy cập từ mọi nơi, nhưng không muốn lãng phí một vị trí cố định trên Tab Bar hoặc thanh Header.

Nguyên tắc sống còn: Chỉ chọn một hành động chính

Sai lầm tai hại nhất của các cửa hàng là bật nhiều nút nổi cùng lúc — bong bóng chat ở một góc, nút giỏ hàng ở góc đối diện, vừa cuộn vừa rung lắc. Khi mọi thứ cùng “nổi”, không có thứ gì thực sự quan trọng trong mắt người mua sắm.

Nếu cửa hàng thực sự cần cả kênh hỗ trợ lẫn lối tắt giỏ hàng, giải pháp tối ưu là dùng 1 nút FAB mở rộng (speed-dial) hoặc đưa giỏ hàng vào thanh Tab Bar đáy, chỉ để lại FAB cho hỗ trợ tư vấn.

Kích thước và vị trí theo chuẩn công thái học

1. Vùng chạm tối thiểu: WCAG 2.5.5 và Apple HIG đều quy định kích thước tối thiểu là 44×44 CSS pixels. Đừng thu nhỏ nút chỉ để “cho đẹp” — ngón tay người dùng thực tế sẽ bấm trượt hoặc bấm nhầm.
2. Vị trí góc dưới bên phải: Đây là vùng ngón cái tự nhiên của người thuận tay phải (chiếm 90% dân số). Nếu đã có Tab Bar, nút FAB nên được đặt cách mép trên của Tab Bar tối thiểu 16–20px.
3. Không bao giờ che khuất nút Mua Ngay: Trên trang chi tiết sản phẩm (PDP), nút FAB nếu đặt vụng về có thể che mất bảng chọn kích cỡ hoặc nút Thêm vào giỏ hàng.