Tìm hiểu về nút Back to top khi làm web

3 phút

Hiện tại hầu hết các trang web đều áp dụng nút Back to top (Trở lên đầu trang) để giúp người dùng dễ dàng bấm và trở lên trên đầu trang để xem lại nội dung hoặc thực hiện một thao tác mới nào đó. Vị trí của nút này cũng thường thấy ở góc phải bên dưới của trang web. Bây giờ chúng ta sẽ cùng tìm hiểu tại sao lại có nút này và các tiêu chuẩn cần thiết khi phải đưa nút Back to top này vào trong trang web.

Tại sao lại có nút Back to top

Với sự ra đời của responsive design thì các vấn đề về cuộn trang để tìm kiếm thông tin trên thiết bị di động trở nên khó khăn hơn trước: Thiết kế responsive có xu hướng gom và sắp xếp nội dung thành dạng hiển thị 1 cột (theo chiều đứng của phone, tablet) hoặc 2-3 cột nếu thiết bị đặt theo chiều ngang.

Như vậy từ đó sinh ra nhu cầu cấp thiết của một Nút (hoặc bằng cách nào đó) để có thể trở về đầu trang một cách nhanh nhất có thể. Riêng trên iPhone thì chúng ta chỉ cần chạm đầu trang, chỗ không gian nhỏ của Safari là có thể trở về đầu trang nhanh chóng.

Thông thường khi người ta bấm nút Back to top để lên đầu trang thì dễ rơi vào các trường hợp sau

  • Xem lại menu và tìm cách đến một trang khác, thông qua menu.
  • Nếu đang ở trang hiển thị thông tin như sản phẩm hoặc nhiều thông tin cần lọc, người ta sẽ tìm xem đầu trang có chức năng Lọc thông tin hay không
  • Tìm tới ô Search để gõ từ khoá

Hướng dẫn sử dụng nút Back to top

Mình sẽ liệt kệ vài quy tắc cơ bản của việc đặt nút Back to top ở trang web. Những quy tắc này là tối thiểu, một số cái có thể được áp dụng cứng nhắc hoặc linhh động tuỳ vào đối tượng thực tế của bạn. Điều quan trọng là chúng ta ứng dụng vào tình huống cụ thể, chứ không phải cái nào cũng đưa vào xài hết.

  • Sử dụng nút Back to top đối với các trang web có độ dài nội dung lớn hơn 4 trang. Trang ở đây được hiểu chính xác là screen. Thực tế sử dụng thì chúng ta cần trải nghiệm để biết được qua 4-5 lần scroll hết màn hình đang xài có nên bổ sung nút này vào không.
  • Góc đặt nút Back to top thường ở phía dưới góc bên phải của trang web. Đây là vị trí dễ gây sự chú ý nhất đối với đa số người dùng. Chúng ta nên đặt cố định và đồng nhất vị trí của nút này ở mọi trang.
  • Thường chúng ta nên đặt tên cho nút Back to top này. Ví dụ: back to top, top, về trang chủ. Tuy nhiên thực tế sử dụng lại cho thấy đa phần bỏ qua bước này. Điều này cũng không gây ra vấn đề phiền toái về sử dụng do người dùng đã mặc nhiên chấp nhận sự tồn tại của nút này, và cũng dễ liên tưởng hơn nên có sẵn icon trên nút. Bạn có thể tham khảo trang overstock ở chế độ giả lập responsive trên trình duyệt.
  • Trường hợp dễ gặp nhất trước đây (những năm 2000-2002 trở về trước) đó là việc đặt anchor link dạng Back to top để mình có thể bấm vào. Điều này cũng tương đồng với các kiến thức lẫn bài tập ở nhà trường. Tuy nhiên qua thực tế sử dụng thì việc đặt các anchor link này không gây ra sự chú ý lớn đối với người dùng. Hiện tại có thể bắt gặp đâu đó ở vài trang FAQ hoặc các trang cần các thông tin nghiêm túc. Bạn có thể truy cập vào trang này để xem ví dụ: https://www.usa.gov/notices
  • Kích thước của nút thì cần sự cân đối giữa 2 việc: Đủ nhỏ trên desktop và đủ lớn để chạm trên phone và tablet. Lớn bao nhiêu là vừa, nhỏ bao nhiêu thì đủ? Cái này rất đơn giản, code thử, test thử là ra kết quả.
  • Cần chọn màu của nút làm sao cho nó có độ tương phản nhất định với nền trang web đang xem. Hạn chế chọn các màu dễ bị chìm vào màu nền của trang web.
  • Một số trang web nhiều nội dung (hiển thị quá trời sản phẩm, hình ảnh stocks) người ta hay áp dụng cách: chỉ hiện nút Back to top khi người dùng cuộn trang được 2-3 trang, hoặc khi cần người dùng chú ý vào khu vực nào đó thì nút này sẽ xuất hiện để giúp người dùng hiểu rằng trang này còn thêm thông tin, hoặc nếu vừa đủ thì có thể trở lên trên thực hiện thao tác khác.
  • Một số trang có áp dụng việc Back to top tự động, sau khi người dùng thực hiện một thao tác nào đó. Điều này mình không khuyến khích áp dụng, trừ khi chính khách hàng yêu cầu vì…thích.

Các phương án khác

Thực tế có nhiều phương án khác dưới cái tên Back to top. Chúng ta hay gặp nhất là hình dạng nút, hoặc anchor link. Mình cũng muốn chia sẻ thêm vài dạng phối hợp khác nhau để phục vụ việc Back to top này.

Sử dụng footer

Hiện tại xu hướng sử dụng footer này rất phổ biến. Tuy nhiên đa số trường hợp sử dụng dạng này là để….SEO.

Sử dụng menu cố định

Vị trí đặt menu cố định hay gặp là đầu trang, bên trái hoặc phải, và hiếm khi đặt menu ở dưới cùng. Trong thực tế sử dụng chúng ta cũng sẽ hay bắt gặp các trang vừa có menu cố định vừa có nút Back to top luôn.

Nút Home trên Twitter.com

Hiện tại chỉ có trang Twitter chơi kiểu này: Nút Home vừa đóng vai trò về trang chủ, vừa đóng vai trò nút Back to top. Nếu áp dụng trên các dạng trang web khác thì không có ý nghĩa gì cả, còn nếu bạn có ý định làm trang web mạng xã hội như Twitter thì nên tham khảo qua.

Quoc Huy Tran Written by:

I do digital product management. I grew up in Danang and moved to Ho Chi Minh City in 2003 where I've enjoyed the tech/startup scene since. I'm a minimalist in lifestyle. I'm passionate about technology, startups, design, football and basketball. For now I focus on building Web App/App products. I have 6+ years of tech startup experience and believe in the MVP approach of shipping early and often.