lichess-org / mobile

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

[Enhancement] Design suggestions for the menus for space conservation / intuitive use #936

Open EmmetSchuler opened 2 months ago

EmmetSchuler commented 2 months ago

As the mobile app gains more and more features from the Lichess website, I think it's important to optimize the placement of options and buttons. It's hard to do this for some of the features, but I have some suggestions - many coming from the design of the former Lichess app - that could help conserve some space in the hamburger menus and make things a bit more intuitive for the user.

1) At the end of a game, you are shown the result menu, which in my opinion serves its purpose very well, however clicking on the hamburger menu leads you to an expansive list of options, such as Screenshot Position, Share PGN, etc. In the future I'd assume the Bookmark Game option would also be seen here, and possibly some other options in the future. I believe that all the sharing options should go under a one button category of Share and Export, saving five lines of options in the Hamburger menu. The same applies in the analysis board, where I feel these sharing options should also all be present, yet compacted under the one button Share and Export.

2) Another consideration I have regarding the in game menu is the Add 15 Seconds button. This is just a personal preference, but I don't enjoy adding time through a hamburger menu, where I have to keep opening the menu and repeat the process to add any more than 15 seconds to an opponent. I suggest adding a plus icon next to the opponent's clock, where you can press to add 15 seconds just like you would on the website. I feel this would be more intuitive and easy to add up more time compared to opening up the menu. However, I don't think this feature should leave the menu, but rather remain as a choice between both options.

3) I think adding icons would make the popup menus much easier to navigate at a glance. For example, if I want to quickly flip the board in a game, I have to read the words 'flip board' every time. An icon would make that process more seamless. It would also create some consistency between the bottom shelf icons and the menu items. Just all around more intuitive for the user!

4) Finally, although I enjoy the majority of the design choices within the game screen, I just can't get used to the resign button being in the bottom bar. I've heard that some players find it useful to quickly resign games, especially in bullet time controls - and I can appreciate that. However, I feel that a button that is only used in ~50% of your games, (and only once, at that!) should not take such a prominent spot in the bottom bar. There are several functions that I think would fit much nicer, like a permanently featured flip board icon, which (at least for me) is used multiple times a game to better understand a position. The resign button being present at all times also feels foreboding to me for some reason, like a constant reminder that resigning is right at the tip of your thumb. In a chess app, I feel like a function that applies to the game instead of a function that ends the game should be used.

I'd love to hear people's opinions on these things, and of course these are all open for discussion, but this is just my take on the current state of the menus. Again, I really appreciate the path this app has been taking, there has been so much improvement over the original!

veloce commented 2 months ago

All your comments make sense, thank you for taking the time to write them properly.

I think we should do everything you said. And I agree about the resign button, I reacted to complaints from bullet players but they are not the most numerous players out there. Not sure what to do about it. We could add a settings (disabled by default) to show the resign button at the bottom, or (maybe better because I don't like adding settings) put the resign button in the bottom only for bullet games.

veloce commented 2 months ago

Done so far: