search

lichess-org / lila

♞ lichess.org: the forever free, adless and open source chess server ♞
https://lichess.org
GNU Affero General Public License v3.0
15.62k stars 2.28k forks source link

Turn the Ui lobby__blog into a carousel that can be controled by the user, by swiping, scrolling or clicking arrow buttons #16282

Open Chico-Carneiro opened 1 week ago

Chico-Carneiro commented 1 week ago

Motivation

I have had this experience several times, when I open Lichess and click on Quick Pairing.

While the match is getting prepared, I just see an appealing blog post in the lobby__blog section.

So I open Lichess on a new tab. But now the post is nowhere to be seen. So I refresh the page 3 or 4 times, and eventually the blog post appears again.

Today I checked the code. That section is actually a slider. I had no idea, and I have been visiting Lichess for years.

Approach

The main logic seems to be here: https://github.com/lichess-org/lila/blob/fdef02d2cda5b776b79bd1bc1b0f67517e81992f/ui/lobby/src/view/blog.ts

And is the rendering done here? https://github.com/lichess-org/lila/blob/fdef02d2cda5b776b79bd1bc1b0f67517e81992f/app/views/lobby/home.scala#L127

So it seems we are getting 9 blog posts, on a slider that takes 10 seconds on each slide.

Would there be any interest in implementing this idea?

I can see 2 benefits: less requests and an overall better experience by giving control to the user.

If you want me to implement it please let me know. I already inspected the UI and got some initial boilerplate code (just some mouse events, a couple of div containers, small changes to the CSS code).

But I would like to know beforehand if there's some library you are already using for this effect, and which considerations should be taken, including in terms of style.

Please let me know, I would love to contribute!

schlawg commented 1 week ago

This is not a comment on the feature proposal, just a personal suggestion. The best way to find a blog you saw out of the corner of your eye is click Blog in the Community menu. You'll find what you're looking for on that page.

Chico-Carneiro commented 1 week ago

Another place in Lichess I didn't know about, thanks for suggesting it! Now that I know about it, it certainly solves my personal issue.

Regarding the feature proposed, I still believe the best way to find something is in the place I just saw it a few seconds ago. For the common user, unless they know the Lichess site really well, they will either do what I have been doing or they will give up and never read the post.

The suggestion still takes 2 clicks (and applies only for those who know about that), not much, but wouldn't it be better to just 1) give the User the evidence that the lobby__blog is a slider from the get-go (not only if they wait 10 seconds and the posts start moving); 2) let the User find the post they're looking for in the same place they saw it, and give them the chance to navigate the carousel for finding it faster;

Complementarily: recently, I have had a similar issue on sites/social media with auto-updating feeds, so if I left a tab open the day before focused on a post, when I return to it sometimes it even disappears right before my eyes and I simply can't find it again, unless I remember who posted and when (then having to go to their feed, scroll down, etc).

schlawg commented 6 days ago

You're right of course. It's a problem we created by randomizing blog order, and then compounded by adding a carousel.

If I were to add basic horizontal navigation to the carousel, I would start with trying large, semi-transparent, but clearly visible < and > icons superimposed on the edges of the boundary blog thumbnails that become accented on hover. Leaving them visible, but less distinct, when inactive will give users a clue that they exist and also needed for mobile in case a proper swipe implementation turns out to be too bloated.

If that didn't work out, there is the safer option of putting similar buttons alongside rather than superimposed on the blog thumbnails. This is great for usability but it reduces space available for blogs and would probably reinforce an engineering calculator aesthetic that some (me) are not crazy about.

The lobby is the most important page on the site. If you tackle this one, prepare for a back and forth process (unless you're a mind reader in addition to a web dev) because thibault applies the most rigorous standards here.

Chico-Carneiro commented 6 days ago

I think your suggestion with the buttons is likely the most logical incremental step. Other than their code and respective onClick and onHover events, we only need to slightly change the already in place logic for the rotation of the slider. I think the new logic can possibly be simpler than the current one too! It would be useful if we could reuse an already existing similar component.

The way you're putting it is just increasing my eagerness to help. I want to comply with those rigorous standards and I'm already sure I'll learn useful things along the way with you guys, which is just perfect!