lichess-org / mobile

Lichess mobile app v2
GNU General Public License v3.0
1.22k stars 174 forks source link

Bring back the new game matrix #758

Closed csaavedra closed 2 months ago

csaavedra commented 3 months ago

Both the legacy and web app have a new game matrix that, I think, is a landmark of lichess. The new app lacks this, and instead to start a new game one needs to make a couple of taps, instead of just one.

I believe that such a recognizable landing page as lichess' one should be honored in the new app.

csaavedra commented 3 months ago

Adding a screenshot in case it's also not clear here what I am talking about.

Screenshot from 2024-06-09 14-07-26

veloce commented 3 months ago

No it's clear.

Not obvious to me the matrix has to be on home because it's the landmark of lichess. Not sure it is even the landmark of lichess.

The app remember the last choice you made from the matrix and a long press on the home create game button starts the game immediately.

stephanhuebsch commented 3 months ago

The current new game screen feels a bit like wasted space though:

Screenshot_20240610-084546

What do you think about moving the grid to that page, with the remembered last choice pre-selected, so that tapping "play" starts the game with the last time choice? This would get rid of one extra tap on the drop-down menu on the left:

Screenshot_20240610-084546

csaavedra commented 3 months ago

Not obvious to me the matrix has to be on home because it's the landmark of lichess. Not sure it is even the landmark of lichess.

I didn't say it's the landmark of lichess. I said it is a landmark. Considering both web and legacy apps have had this in the frontpage since, forever(?), I have a hard time understanding why would someone disagree with it being a very recognizable way to interact with lichess.

I also think it's been there for a long time it's because it is indeed a very intuitive and friendly way to start a new game. It also encourages you to pick a different time control if you want to, without having to open a menu and navigate different options. The current approach in the new app is very similar to that of chess.com, and I honestly think the traditional lichess matrix is much better in terms of UI/UX than both chess.com's and the new app's new game ui.

veloce commented 3 months ago

I will think about putting it in the create a game screen as suggested by @stephanhuebsch , because indeed why not? Note that this screen for is now empty but it won't remain like that. New items will be added with challenges, offline computer, etc.

I'll certainly not put in on Home screen.

csaavedra commented 3 months ago

Sounds like a good plan, thanks!

sash-a commented 3 months ago

If I can add my opinion here. Firstly I really like the new look and feel of the app, thanks for all the hard work!

I do really think that the quick game matrix gave the app an excellent flow. 95% of what I'm doing on lichess is playing games and to be dropped into a home page where there are many easy options for me to create a new game with a single click is just good UI design, currently it's 3 clicks away.

The long press on the create game button doesn't fill this need as:

  1. You don't have an option of the time control, I often like to switch between time controls
  2. It's not intuitive, I didn't realize it was a feature until I read this thread and I've never experienced this flow in another android app.

I would be very much in favour of adding it to the homescreen instead the recent games that is currently there

stephanhuebsch commented 3 months ago

I have to agree with @sash-a. I don't understand why 90% of the main landing page is dedicated to the recent games list..?

EmmetSchuler commented 3 months ago

There will eventually be more of an expansion on the home screen. The question is whether a full game matrix will take up too much space for some of the other elements. Take the old app for example: you have to scroll far to access elements like blogs, info, tournaments, etc. I like the idea of having a game matrix, redesigned with the style of this new app, but behind the create game button. The downside is that it takes two clicks, but the upside is that we can use the home screen for everything else we plan on implementing, and stop the previous issues with overcrowding. I think it's a good balance between design and functionality.

sash-a commented 3 months ago

I see your point @EmmetSchuler, but I do feel like most people use the app to play chess and playing a game should be front and center.

I think a possible nice UI compromise is to have a collapsible box at the top of the home screen that houses the matrix and the app can remember if you keep this open or closed?

I'm not a mobile dev so take this suggestion with a pinch of salt I'm not sure how well it would work. But I do feel that playing a game should be front and center for most users

EmmetSchuler commented 3 months ago

I do agree, but take the design aspect of the create game screen. We need a dedicated page to offer rating ranges, custom games, computer games, etc.

But the page could definitely feel more intuitive if there was a matrix over here Screenshot_20240610-134646.png The placement of the create game button could be lowered for reachability and fit a matrix on top.

And as for the discoverability of the matrix, at least on android (I've heard the iOS app might be different here) has a large create game button always floating at the bottom, regardless of where you are in the home screen. Screenshot_20240610-135156.png

Although playing games is really important in a chess app, we can try to make it intuitive and practical in its own dedicated environment, easily accessible from the home screen.

And I'm not sure collapsible widgets are what we want here, there shouldn't have to be a choice between the ability to play games and viewing the home screen.

sash-a commented 3 months ago

I still think that having it on the homescreen is best as a quick access to allow you to jump into a game - maybe it's something like your 3 most played/most recently played time controls so it takes up as little space as possible, then you also keep the create game button for more granular time controls etc?

But if this is not an option then I would say having it on the create game screen is a must. Also currently on this screen you press your desired time which selects the time control, but doesn't start the game, I think it should act as it does in the old app where it both selects the time control and starts the game. I guess this is because of the way the screen is currently designed if the matrix does become a permanent fixture there then I think it should automatically start a game.

veloce commented 3 months ago

"Create a game" button is a floating action button which is meant for the most important action of your app according to material design. I'm not an UX expert myself so I prefer using standard widgets and the platform way of doing things whenever possible. So as @EmmetSchuler said, this will stay like it because the home will eventually show more things than just past games (it does already actually).

There's an undeniable fact about user experience, that we have all hard time to accept change in general and more especially regarding user interface. You are too much used to the matrix so you want the matrix, even though it is debatable that the matrix is better than the new way. I hear the point that it saves one tap, it is an important one but that's not a gospel either. What I don't like about the matrix is that is has to be put in a scroll view (contrary to the desktop version which is fixed, here the original design made sense). Also it has to be put on top, which is not the easiest to access with the thumb. The matrix is not necessarily more intuitive than the new app design, even more if placed in that "Create game screen" context.

For the "save one tap": do you know a lot of players who constantly change time control after each game? I mean I don't have the stats but it seems to me the most common pattern is: 1. create a game, 2. either rematch or 3. look for new opponent, which can be done from the finished game in both cases.

To conclude, I wrote this not to say the matrix is bad and we should forget it (I said I'll think about it), but to say that it raises a lot of questions.

nCrazed commented 3 months ago

What do you think about moving the grid to that page, with the remembered last choice pre-selected, so that tapping "play" starts the game with the last time choice? This would get rid of one extra tap on the drop-down menu on the left:

This would do nothing for those of us that regularly play more than one time setting.

Having used the matrix for the past couple of years, I am not sure I'd ever be willing to switch to an app that doesn't have it as getting into a game that fits my current time constraints is the only way I use lichess on my phone.

This change is akin to removal of hotkey support which, I hope, you'll agree is not just a matter of a change, but an objective downgrade

csaavedra commented 3 months ago

do you know a lot of players who constantly change time control after each game?

The main use case of the matrix is not changing time control after each game, but starting a time control that is not the previous one when you first open the app. When I open lichess, I want to play a time control depending on how much time I have and how I am feeling in the moment. Sometimes that's 5+3, or 10+0, or 1+0. I would say that most times I don't play the same time control that I played last time I used the app. I find annoying that in chess.com, for example, I need to be finding the time control I have from a secondary screen, and I always liked that with lichess I didn't have to. But with the current design of the new app, that changed.

So you're right that when you play games serially, you often stay in the same time control and don't use the main screen. But this is besides the point, because that's a different use case. Which is why I wouldn't put the matrix in the game finished screen πŸ˜† but that's not what this is about.

ijm8710 commented 3 months ago

@veloce just adding that I for one like how you have it now and especially knowing that there will be options coming soon for computer tournaments and such hope we keep it simple. With the fact that you can hold and or it saves your preference of last game, I really think the direction you've gone is the right one

veloce commented 3 months ago

I'm experimenting with the game matrix in the challenges branch right now. It's not decided yet if we'll put it back or not.

But here are some preview screenshots:

Capture d’écran 2024-06-17 aΜ€ 11 00 06 Capture d’écran 2024-06-17 aΜ€ 10 59 43

Please react with a thumbs up or down to this comment so I can gauge the interest here. Thanks.

csaavedra commented 3 months ago

Where does that show up?

veloce commented 3 months ago

Same screen as before, it just the replace the double button "10 + 0" -- "Play".

EmmetSchuler commented 3 months ago

I know this differs from the website matrix, but could we consider incorporating the time control icon next to the words classical, rapid, etc? I think it would make it more understandable at a glance. For example the turtle next to 'Classical,' Rabbit next to the word 'Rapid,' And so on.

ijm8710 commented 3 months ago

I strongly strongly prefer how it is now @veloce Super easy to pick up from your last played variant (most players don't switch) and easy switch option for when you do want to switch. A matrix makes you hunt for what you want rather than the current implementation which resurfaces what you played last with an easy and more coherent switcher for when you want to try something new.

In fact the matrix adds clicks for when you want to repeat your game type and again that is what most players do (Yes you can hold down 'create a game' from screen prior but I can assure you most players will not discover that).

It may be redundant but at very least the current switcher would have to be below the matrix

EmmetSchuler commented 3 months ago

@ijm8710 I think there is a simple solution here, instead of adding redundancies. Holding the create game button could automatically launch the last played time control that you selected from the Matrix.

I think the root problem is with the discoverability of holding the create game button to instantly join a game. This is a key function for players like you, and it should be intuitive and recognizable in design.

There are two main aspects that need to be solved: 1) Discoverability: People need to find this function within the app. This could be done by a prompt when you first use the create game button, instructing you how the button works. I don't like this solution by itself, because it doesn't address the root problem of the design, but it goes a long way to ensure everyone is aware of the function. 2) Information: If holding the button leads you to your last selected time control, this should be shown to the user. Maybe instead of the "create a game" text we can just use a plus sign, and next to it in smaller form we can add a time control, for example 5+3. This also indicates to the user that the button has secondary functions, increasing discoverability.

Of course this is just among one of many, possibly better ways of solving the current issues with the create a game button.

Other ideas involving the design could be to slightly expand the button when held down, indicating more functions.

ijm8710 commented 3 months ago

All this is 100% why I prefer the current implementation. I'm not worried about discoverability for myself, I know we can hold it. But most others won't, not everyone is tech savvy and it is extremely tough and not worth the planning on how to overcome that.

What we have is perfect.

But again, if a matrix must be added and I vehemently am against it, redundancy is a must

@ijm8710 I think there is a simple solution here, instead of adding redundancies. Holding the create game button could automatically launch the last played time control that you selected from the Matrix.

I think the root problem is with the discoverability of holding the create game button to instantly join a game. This is a key function for players like you, and it should be intuitive and recognizable in design.

There are two main aspects that need to be solved: 1) Discoverability: People need to find this function within the app. This could be done by a prompt when you first use the create game button, instructing you how the button works. I don't like this solution by itself, because it doesn't address the root problem of the design, but it goes a long way to ensure everyone is aware of the function. 2) Information: If holding the button leads you to your last selected time control, this should be shown to the user. Maybe instead of the "create a game" text we can just use a plus sign, and next to it in smaller form we can add a time control, for example 5+3. This also indicates to the user that the button has secondary functions, increasing discoverability.

Of course this is just among one of many, possibly better ways of solving the current issues with the create a game button.

Other ideas involving the design could be to slightly expand the button when held down, indicating more functions.

EmmetSchuler commented 3 months ago

"What we have is perfect"

You mean, perfect for your needs. There are definitely people unsatisfied with the design situation for the same reasons you love it.

What we can try to do is appeal to everyone by changing the existing system, yet keeping the core functionality of both playing games quickly (via holding the button) and easily changing time controls (via the matrix).

I think it is worth it to enhance the create game button, as it essentially solves the problems you had shared about the matrix, while keeping things simple and without redundancies.

veloce commented 3 months ago

Enhancing the "Create a game" button is an interesting idea, but in practice it is not obvious how it should be done. Having the last time control in small font is a bit confusing imo, and making it expand on long press is not convenient. I guess it should stay "hidden" like that because it is not a common pattern. I even fear it is a bad pattern and some people would start games accidentally.

Another solution to add redundancy is to add the matrix directly to the Home Screen (in a more condensed form) and leave the "Create a game" screen as is. This way you'd have a 1 click fast access to the highlighted time controls, and still have access to the current way of creating games, that remembers your last setup.

stephanhuebsch commented 3 months ago

I like the idea of a condensed matrix on the home screen. The matrix doesn't have to reflect the lichess logo etc as it does on the homepage, as long as the buttons, their positions and content are the same.

So how about adding "regular" buttons (i.e., native Flutter buttons?), each having a one-line title of symbol+time, like

πŸ”« 1+0 πŸ”« 2+1 πŸ”« 3+0
πŸ”₯ 3+2 πŸ”₯ 5+0 πŸ”₯ 5+3
πŸ‡ 10+0 πŸ‡ 10+5 πŸ‡ 15+10
🐒 30+0 🐒 30+20 other
nCrazed commented 3 months ago

Would turning the matrix into a configurable grid be an option? Let people choose which options they want to see on the home screen.

If it's, just "play the last game" - great only add that If, like my self, you want buttons to instantly queue for a game of specific time controls, add a subset of the current matrix

This would pave way for other "widgets" in the future, like per-setting a clock for an OTB game

stephanhuebsch commented 3 months ago

Would turning the matrix into a configurable grid be an option? Let people choose which options they want to see on the home screen.

IMO the time formats should be consistent, both in their value and their positioning inside the matrix.

This would pave way for other "widgets" in the future, like per-setting a clock for an OTB game

I guess this could be added to the "Tools" tab at the bottom..?

ijm8710 commented 3 months ago

Problem with adding matrix to Home Screen is it's just wasting space from all the stuff that should be added to Home Screen. I think a lot of people aren't taking into account what's to come.

I think the best solution to appease both sides is matrix above the current create a game button