Tính năng lọc bài viết theo thẻ và quay lại vị trí trước đó!

Vấn đề

Xin chào độc giả của 2coffee.dev, lại gần một tuần im hơi lặng tiếng, tuần này tôi mang đến cho bạn đọc hai tính năng mới!

Khi xem lại dữ liệu trong quá khứ, tôi nhận ra rằng có khá nhiều người "hiếu kỳ" bấm vào khu vực tags (thẻ) bên trên tiêu đề bài viết. Đồng cảm với hành vi đó, tôi nghĩ rằng bạn đang muốn xem liệu bấm vào đây thì có điều gì xảy ra hay không?

Thường thì người ta sẽ nghĩ nó lọc bài viết dựa trên thẻ đó, tôi cũng nghĩ như thế. Giả sử hành vi đó là hợp lệ, thì nó lại gây ra một "bối rối" khác cho người dùng, như là làm thế nào để quay trở lại, làm thế nào để biết bài viết đang được lọc theo thẻ, hay chỉ đơn giản là làm thế nào để tôi biết rằng bấm vào đó thì tính năng lọc bài viết được thực thi...?

Vì thế tôi quyết định làm thêm một tính năng lọc bài viết theo thẻ. Có một danh sách các thẻ, bạn đọc muốn lọc theo thẻ nào chỉ cần bấm vào thẻ đó, ngay lập tức một danh sách bài viết đã lọc hiện ra.

Song song với đó là tính năng "bấm vào để đến vị trí trước đó", mà tôi tin rằng nó rất hữu ích cho nhiều người "quên" không mở bài viết bằng tab mới của trình duyệt. Nói hơi nhiều rồi nhỉ, ngay sau đây tôi xin phép được trình bày chi tiết cho bạn đọc.

Bấm vào để đến vị trí trước đó

Infinite loading là một kỹ thuật tải thêm nội dung mới mà người dùng dùng không cần làm gì thêm ngoài việc cuộn trang, khi đến một thời điểm nào đó, ví dụ như sắp đến cuối trang, nội dung mới sẽ tự động được tải xuống để không làm gián đoạn trải nghiệm của họ. Kỹ thuật này thường được các mạng xã hội áp dụng một cách triệt để vì họ không muốn người dùng phải thao tác nhiều hơn để nhận dữ liệu mới.

Thông thường, bạn sẽ thấy một số trang web yêu cầu người dùng bấm vào các trang tiếp theo để điều hướng sang nội dung mới. Cách làm này có lợi thế là rõ ràng, họ biết đang ở trang nào và sau đó có thể nhanh chóng điều hướng đến trang có nội dung đã biết.

Trước đây 2coffee cũng thử áp dụng cách yêu cầu người dùng phải bấm vào nút để đến trang tiếp theo hoặc tải thêm bài viết, nhưng có vẻ điều đó không thực sự hiệu quả cho lắm, vì có khá ít người bấm vào nút và vô hình chung nó gây cản trở người dùng tiếp cận với nhiều nội dung khác (không phải ngẫu nhiên mà Infinite loading lại vướng vào nhiều lùm xùm về khả năng gây nghiện trên các mạng xã hội :D), buộc tôi phải quay trở lại với các tiếp cận "tải vô cực" trước đó.

Trải nghiệm của Infinite loading có lẽ không còn gì cần bàn cãi, chỉ duy nhất có một nhược điểm là nếu như vô tình tải lại trang thì coi như bạn đọc phải cuộn lại từ đầu, mà có khi còn không nhớ vị trí trước đó là ở đâu. Hmm... có phải tôi đang muốn "đuổi" họ đi hay không?

Thật ra vấn đề này tôi đã phát hiện ra từ rất lâu rồi, nhưng vì chưa thực sự nghiêm túc nghĩ giải pháp cho vấn đề này, nên mọi thứ thi thoảng lại trôi vào quên lãng. Một lần nữa xin lỗi các độc giả của tôi, cho ai đã từng rơi vào cái thao tác chết tiệt này.

Trong cái khó, ló cái khôn. Tôi thấy có nhiều bạn đọc không trực tiếp bấm vào liên kết bài viết, mà họ sẽ "mở bài viết trong tab mới". Vâng, tôi cũng là một người hay làm như vậy bởi vì thói quen đọc hàng ngày. Khi đọc bất cứ một trang web nào khác, tôi sẽ dạo qua một vòng, mở hết một lượt bài viết mà mình thấy hứng thú rồi sau đó mới bắt đầu đọc từng cái một. Xem ra nhiều người cũng có sở thích giống như mình đấy chứ!

Quay trở lại, tôi vẫn cần phải có giải pháp để xử lý triệt để tình trạng này, vì thế tôi đã thêm một thông báo nhắc nhở người dùng bấm vào, để đưa họ đến vị trí cuối cùng của danh sách bài viết. Vị trí được xác định bằng liên kết cuối cùng mà họ bấm vào khi ở trang chủ, trang bài viết nổi bật...

Ban đầu tôi định tự động cuộn trang cho người dùng khi họ đang từ trang chi tiết bài viết mà quay ra trang chủ. Nhưng đến lúc làm thì có nhiều vấn đề cần giải quyết, ví như là khi người dùng cuộn trang quá sâu, thời gian để tải phân trang lâu hơn, người dùng không thể kiên nhẫn để chờ đợi trong khi họ không hề hay biết là có tính năng tự động cuộn trang. Vì thế họ có thể vô tình cuộn trang và làm cho tính năng này bị vô hiệu hóa. Do vậy, thay vì cuộn một cách tự động, hãy để cho họ chủ động. Nếu phát hiện ra họ có vị trí cuối cùng -> một thông báo hiện lên -> bấm vào và phần còn lại đã có tôi lo.

Tưởng chừng là đơn giản nhưng càng làm thì càng ra vấn đề, trước đó tôi chỉ đinh ninh là chỉ có trang chủ mới có danh sách bài viết thì sau đó các trang như Nổi bật, Nocodes cũng có. Như vậy cần phải xử lý thêm nếu họ có "vị trí cuối cùng" ở trang nào thì thông báo mới hiện ra.

Cuối cùng, thay vì lưu trữ thông tin vị trí bền vững vào localStorage thì sessionStorage có vẻ tối ưu hơn. Bởi vì trong phiên truy cập hiện tại, người dùng quan tâm đến vị trí cuối cùng của họ hơn là so với lần tiếp theo truy cập mới hoàn toàn. Sau một khoảng thời gian, có khi họ không còn nhớ gì cả.

Lọc bài viết theo tag

Ngay đầu danh sách bài viết, bạn sẽ thấy một hàng dài các thẻ mà tôi liệt kê ra ở đây, nếu thấy hứng thú với cái tên nào, bạn đọc có thể bấm vào để hệ thống lọc ra các bài viết có gắn thẻ đấy.

Thú thật cho đến thời điểm hiện tại, các thẻ này đang được tôi "fix cứng" ở phía giao diện, tôi coi đây như là một tính năng thử nghiệm cho nên thời gian hoàn thành mới là thứ cần được ưu tiên. Sau khi phát hành, tôi sẽ theo dõi thái độ của bạn đọc với các thẻ này để tối ưu hóa ngay sau đó.

Một điều nữa là tính năng này hiện tại chưa có trên giao diện điện thoại, đơn giản vì tôi...chưa nghĩ ra vị trí thích hợp cho nó. Nếu chỉ đơn giản là thu nhỏ lại thì trông có vẻ không hợp lý lắm, dù sao trải nghiệm trên điện thoại vẫn là cái gì đó khác biệt so với màn hình lớn hơn. Vì thế tôi sẽ hoàn thiện tính năng này trong tương lai.

Cuối cùng cảm ơn bạn đọc đã theo dõi bài viết này, bạn có nghĩ rằng bạn thích tính năng nào trong hai cái tôi vừa kể ra ở trên không? Bạn có phát hiện ra lỗi gì không? Vì kiểm tra tính năng mình làm ra là một cái gì đó rất "omg", là lập trình viên ai chẳng nghĩ mình "code" không bao giờ có "bug"!? Thái độ của bạn sẽ được tôi xem xét một cách cẩn thận, hoặc nếu bạn có góp ý gì thì đừng ngần ngại để lại bình luận xuống dưới bài viết nhé. Xin cảm ơn!