Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

miniautomatch for overview page #2352

Closed
wants to merge 7 commits into from

Conversation

shinuito
Copy link
Contributor

@shinuito shinuito commented Aug 29, 2023

attempt at brining a minimal version of the automatch to the homepage.

It was a request I've seen come up in a good few redesigns of the homepage as in

https://forums.online-go.com/t/how-intuitive-is-ogs-for-new-users/31614/107?u=shinuito

and

https://forums.online-go.com/t/new-landing-page-idea/46491?u=shinuito

Proposed Changes

Current version of the overview page for a user with no games - e.g. a new user

image

demo-version with a mini automatch

image


It seems functional in that I've been able to automatch between different accounts on the beta server, but I'd like to mark it as a draft for now, because it's mainly a cut and paste of some of the key sections from the code on the play.tsx page and play.styl file.

I'm sure it'd be better to do some refactoring rather than duplicate code, but then maybe having a mini-automatch as a separate component might even be better (it can be modified, styled independently).


Why a mini automatch?

I've seen it mentioned before that the play page is a bit cluttered and hard to understand, and the custom game options too, it's a lot of setting and options to digest especially if you're new to the site.

So it might be handy to just have a minimal two buttons to click to get a game, no messing with settings or details, just queue up and play.

I've intentionally left out the correspondence and custom game buttons, because you probably will want to actually pick those things yourself intentionally so it's better to just go to the play page and have all the options.

Here it's just for people that don't really care, will play the default settings either because they're ok with them, or they're just new to the site or to Go, and just want a game without thinking too much.

attempt at brining a minimal version of the automatch to the homepage.
@github-actions
Copy link

github-actions bot commented Aug 29, 2023

Uffizzi Ephemeral Environment deployment-34689

☁️ https://app.uffizzi.com/github.com/online-go/online-go+com/pull/2352

📄 View Application Logs etc.

What is Uffizzi? Learn more!

@benjaminpjones
Copy link
Contributor

a separate component might even be better (it can be modified, styled independently)

Note - the same component can be styled in different ways - CSS is cool like that!

#Overview .automatch-row button {
  background-color: hotpink;
}

@shinuito
Copy link
Contributor Author

a separate component might even be better (it can be modified, styled independently)

Note - the same component can be styled in different ways - CSS is cool like that!

#Overview .automatch-row button {
  background-color: hotpink;
}

Oh I see what you mean, because we have a div for the overview containing everything. I wasn't thinking about it like that :)

So I suppose if it was chopped out, which I don't feel confident to actually do :), then it can have a style file in its component folder which can specify where it is, overview/play etc and then style appropriately.

@anoek
Copy link
Member

anoek commented Aug 30, 2023

I think this idea is worth exploring more. The ideas and thoughts below are for discussion not really "this is how we should do it". I've grown to not really like the home + play page system as it currently exists, it's just hard for me to reconcile all of the pertinent information and come up with something elegant that doesn't suck for a large portion of our user base.

I think on the home page it would probably be good UX to have buttons start a new computer game and a new game against a player. Furthermore I think those buttons should always be there, even if there are correspondence games going on, unlike what we currently have.

My gut says when we click either of those buttons, the user should then either see a modal or be navigated to another page for more settings. For example, when playing a human, I could see a modal that is basically everything in the automatch box sans the "Computer" option For computer I could see the same computer modal popping up (although I would love to have a simplified version of that as well, but that's a whole other topic I think.)

That said, as I mentioned I'm not really happy with the home + page setup as is. They're by far the two most used pages (outside of the Game page), and folks go back and forth between them, indicating to me that merging them would be good - but making any sort of unified interface that isn't even more overwhelming seems like a tall order. 🤷

@shinuito
Copy link
Contributor Author

shinuito commented Aug 30, 2023

it's just hard for me to reconcile all of the pertinent information and come up with something elegant that doesn't suck for a large portion of our user base.

So I suppose for the moment the home page as it is, removed a lot of the overlap that it used to have with the profile page. Now really it's main focus is just showing your correspondence games if you have any, and then links to thinks that the new nav bar already provides.

So the main overlap is still again with the profile page, which shows your ongoing games, your tournaments, ladders, groups, which are also shown under their respective pages (groups ladders etc).

I think I've had the experimental interface changes on since before the new nav bar was a thing, and I don't miss anything that was on the right hand side, tournaments, friends list etc.

If we do away with the home/overview page, the main thing is where do we send players, and where do we show ongoing games if any?

Some possible ideas:

Watch/games page

  • Navigate directly to watch/games, since that's what already happens when you're not logged in. I suppose one could show your correspondence games there too if you wanted.

  • Some people might like to watch a game while they're waiting to make moves or do other things.

  • Some groups of people like to kibitz games or watch top players games, and so any updates to the watch page that improves that (maybe showing number of viewers on the games page if you want to encourage that).

  • One can also consider showing professional games that have been played that day, or links to past demo board relays, things that have an OGS game or review id, and keeping them there for 24 hours.

Basically a number of things like this could make the Watch/Games page attractive as a home page.

Play page

I think it might also be a fine idea to have the play page as a home page, assuming that's what people want. I'm not sure what the best way to simplify the page is for newcomers, either beginners or experience players.

  • One could maybe have a default collapsed view which just shows the live/correspondence challenges and the buttons for automatch, hide the seek graph, hide rengo - and have an expanded additional view that you can click to show/hide. (Old webarchive view below, except I removed the seek graph and centered the automatch).

image

  • Another thing that could be helpful is replacing the ~30s per move and ~10s per move on the automatch buttons with their actual time settings, or at least explaining them somewhere. It would of course work better if there weren't multiple defaults, having to show 20m+5x30s, 3m+30s etc. I feel like it should help to avoid confusion if people know what they're signing up to. To be honest, I don't even know what the automatch settings are if I got match with someone that plays fischer or canadian only etc. I don't know how many games I've played and I don't know that info :)

  • Another option is simpler fully unified defaults for automatch. You could do popular vote, you could look at statistics, and if enough people have changed the default and play with it, if it's japanese + byo-yomi then one could run with it. That might be more contentious though of a change, forcing a ruleset and time control type.

Other options

Since you mentioned something about a modal, one could consider having a mini automatch as a modal or some kind of dropdown like the way friends, notifications etc are on the nav bar.

I'm thinking either

  • it's something kind of like the way websites have these help popups, like support chat popups, something in the corner of the screen, that's maybe if you're in an active game, but there otherwise, unless it's dismissed
  • or an additional dropdown from the navbar, with some minimal buttons like the live, blitz ones, and I suppose the computer button could still bring up the usual computer challenge modal. It might just encourage people to jump into a game no matter where they are with the automatch, where they're in chat, kibitizing, just finished a game or just opened the site, whatever the hompage is.

I don't know exactly what the best is, I just know that the homepage is a regular complaint from people that don't play correspondence, and I've seen people get confused by the play page a lot.

@anoek
Copy link
Member

anoek commented Aug 30, 2023

Yup, complicated and lots of options sums it up. I don't have the design energy myself to work through a comprehensive refactor of those pages, but I'm open to attempts.

@BHydden
Copy link
Collaborator

BHydden commented Aug 30, 2023

A total site overhaul has been a dream project of mine for a while, but life has been crazy last couple years. Maybe in the next year I'll be able to approach it.

Since you want to do a full overhaul anyway, but that's a long term goal and complicated, would you consider at least merging this PR while the other options are discused?

@anoek
Copy link
Member

anoek commented Aug 30, 2023

Since you want to do a full overhaul anyway, but that's a long term goal and complicated, would you consider at least merging this PR while the other options are discussed?

I'm ok with working towards a smaller goal

@shinuito
Copy link
Contributor Author

Since you want to do a full overhaul anyway, but that's a long term goal and complicated, would you consider at least merging this PR while the other options are discused?

Do we have a checklist then for what would make this PR mergeable? Maybe a series of tests or things to check generally in the code. Like I mentioned it's mainly some copy and paste and then fixing various dependencies, importing missing things, functions etc. A bigger overhaul like trying to refactor and extract the automatcher into a separate component, I'm not sure I would be able to do. Also there's the worry of breaking a functioning automatch, as opposed to introducing a beta mini automatch while still having the old functioning automatch as a backup.

@anoek
Copy link
Member

anoek commented Sep 10, 2023

For the UI we need to iterate. I'm open to alternatives, but here were my thoughts from up above on the matter:

I think on the home page it would probably be good UX to have buttons start a new computer game and a new game against a player. Furthermore I think those buttons should always be there, even if there are correspondence games going on, unlike what we currently have.

My gut says when we click either of those buttons, the user should then either see a modal or be navigated to another page for more settings. For example, when playing a human, I could see a modal that is basically everything in the automatch box sans the "Computer" option For computer I could see the same computer modal popping up (although I would love to have a simplified version of that as well, but that's a whole other topic I think.)

Basically I think my complaint with the current setup is it's not going to be consistent (ie when there are games going it's now going to be a different flow to find a new game), so it's going to be confusing, However it's also too big to be consistent, and it also doesn't offer everything we need (computer play for one, and for a first time viewer there's no indication that they could hope to find a correspondence game on this server). Hence my thought about a couple of buttons to on this page or something of the sort. I'm open to alternatives, just photoshop up something so we can talk about it kind of thing before a lot of effort is spent.

@shinuito
Copy link
Contributor Author

shinuito commented Sep 10, 2023

My feeling is that the site is fine for correspondence, there's no real rush to create a new game, you can spend time finding the settings you want, or creating a game with those settings. You can seek out opponents on the sites main ladders or ladders within groups. You're not really expecting a game to start and to start playing right away anyway.

The complaint I've mainly seen has been on the live games side of things.

Anyway I'll have a look at adding in a computer button and adding in the automatch button even when correspondence games are there.

Tbh it might even be easier to just do it in code, than to figure out how to photoshop it or download something like inkscape or gimp and so on.

In terms of first time players - I think maybe we could modify the dismissable popup message that links them to the learn to play page. We could add in a link to the ladder. There is a link to the play page anyway.

I'll think about it and post some updated ideas.

@shinuito
Copy link
Contributor Author

For instance, the button for playing the computer doesn't really make sense logically as being part of an automatch system, because it's not an automatch at all.

Rather instead you're picking an opponent. I get the idea that it's there because it needs to be somewhere but maybe it'd be better to simplify even the challege modal in that case. There's a few too many options to have to think about if it's your first time on the site.

adds correspondence + computer buttons with a link to the play page.

Tried to simplify the computer challenge options on the home page by taking out all the time controls
@shinuito
Copy link
Contributor Author

Here's kind of update, with what I have in mind for what you're saying

image

^^ buttons for correspondence and computer challenge and a link to the play page. Also I've edited the messages for when you have no correspondence games, suggesting to go to the play page for more game options. Similarly at the bottom of the automatch. The message that pops up when you click the correspondence automatch is also updated suggesting to go to the play page to cancel it.

image

^^ This is maybe one idea to simplify things for the computer challenge. Obviously people might want more options at some point, but my feeling about this homepage, and mini automatch should be that it's main focus is getting a game with some default settings, quickly, with minimal clicking. If you want to spend hours learning and trawling through all the settings you can on the play page, but if you just want to click a button to get a game vs a human or computer it should be simple if you don't understand or care about the settings.

The issues I have, is that I couldn't quite see how to reset the options in the modal. Normally you tweak clock type or game speed or whichever and then some functions are called which check for sensible values and check for cached ones and so on, and there's fallback. I couldn't think of how to force certain fixed settings for the computer play (which again would even be simpler) than just taking whatever you last played against the computer on the play page.

The plus side of attempting the code over some photoshop is that at least maybe someone else could work with it if they have ideas to change it :) Someone will know how to make the css prettier.

Several people have tried photoshopping and that got buried in the forums :)

@anoek
Copy link
Member

anoek commented Sep 11, 2023

Was toying with gimp with @GreenAsJade and we came up with this as a possible alternative

image

Any feelings one way or another towards that direction?

As for the computer challenge, I'm in support of simplifying things in general but I also want the challenge modal to be consistent no matter where you launch it from, so I think the easy case is to provide the normal computer challenge modal, and if we ant to simplify it, redesign it to simplify it for both places (but keep the time options and whatever else was cut out somewhere that can be accessed kind of thing, or however that ends up working). If there's going to be a redesign, that should probably be a separate PR.

Undo changes to the mini challenge modal, and update the css to reflect the image on github.

Also updated the experimental overview page, for those that have it on in settings.
@shinuito
Copy link
Contributor Author

I've updated the overview page and the experimental view page to reflect the alternative @anoek and @GreenAsJade mocked up. I've removed the changes to a mini computer challenge modal.

It should look like this now for the old interface

image

and for the new experimental interface

image

It seems to be working okay in terms of getting matched up.

The more options link just links to the play page.

by extracting mini-automatch into component
forgot to hit save on overview.styl when it was extracted to MiniAutomatch.styl
@GreenAsJade
Copy link
Contributor

I think it'd be worth testing and posting a screenshot of what it looks like with some invites active.

@benjaminpjones
Copy link
Contributor

Screenshot_20230912_152444_Firefox

I was curious about mobile, turns out asdf had some invites :D courtesy of uffizi

@GreenAsJade
Copy link
Contributor

Looks good for that layout eh!

@GreenAsJade
Copy link
Contributor

In fact, with the gumph from the right hand side put underneath instead, I think there's an argument for including it in the web view.

I think it looks very messy on the right, as in the "not experimental" screenshot.

But if it were layed out horizontally perhaps as a separate section under the boards in web view it might be nice...

In undoing changes, lost the pause on weekends button because of a || null still hanging around.
@shinuito
Copy link
Contributor Author

Old overview
image

Experimental overview
image

I'm a bit zoomed in, normally I'd zoom out on the main site/beta, but also that's just how the challenges also appear on beta - they take up a lot of space. I didn't change that.

@shinuito
Copy link
Contributor Author

Looks good for that layout eh!

It was a good mockup design :)

I think I currently have the buttons as space-between, but other options will probably align them to the left side of the page or collapse the space a bit.

I guess there's some little things like that that can be decided and tweaked.


I just fixed an issue where I didn't revert changes in the ChallengeModal properly, it looks like the only changes left there are a couple of blank newlines and a commented out console.log(). I can probably just remove those too.

@anoek
Copy link
Member

anoek commented Sep 14, 2023

I think I like the buttons on the top better than the bottom.

For the button spacing, I think it's probably good how it is. Certainly open to exploring left justifying or bounding the width of those so they stay centered and not too spaced out (I think adding the "container" class will do that), but it's hard to say without seeing it.

@kevincoleman
Copy link
Collaborator

kevincoleman commented Sep 15, 2023

Hello all! Great thread you’ve got going here. Reading it over gave me a few things to ponder, so I thought I’d drop them here and get some feedback.

First, I love this idea. Using the big blank space for starting new games when you have none is a UX no-brainer. In terms of keeping people engaged it’s perfect to give them the most likely action item for their app state (the no-game state).

I also like the idea of iterating and not trying to refactor everything just because it’s being touched. That said, this discussion should really be about finding the ideal solution before we tear things up, so we can decide how much we want to iterate once we have clear direction.

Here are some of my thoughts on the proposed mockups.


I like the idea of featuring the match-finder front and center when there are no games. It seems natural in a full-screen mode, and probably in a mobile view too. It’s the main actionable item, so it should have the visual center.


However, by the time it gets to the mobile view with invites and active games this page starts to feel like an omnibus that feels like a gauntlet. Disagree? Check out how far you had to scroll just to get down to this text. When people hit this page 95% of the time it’s because they do have ongoing games, so we want to try to make sure we’re not in the way of that.


I’m actually not a big fan of this horizontal layout, because it messes with two key design principles: proximity and alignment. The principles as they were taught to me are:

  1. Proximity: put like things closer to each other, so the implication is that they belong together.
  2. Alignment: align things along the same lines when they are multiple similar-importance items in a set, so the implication is that they have equal importance and a relation to the things they’re aligned with.

In this mockup it just so happens that there are 4 games, and each one aligns with a button above it. While there are section headers, the alignment kind of implies that each button has something to do with the game below it. The proximity of the match finding buttons gets broken up, implying that the buttons are less related to their common task (finding a new game).


I think the idea of putting these below the active games is the right direction of play (Go jokes, right?), but not quite the right implementation. Hierarchically speaking, active games should be more important than starting new games, so having this appear lower makes sense. Visually it becomes an estranged afterthought or a site footer. Not really what we’re after.

That said, the UI is something that is probably best approached from a goal-focused mindset. Instead of thinking “where can we fit this?”, think “where would people expect this?”

If we think of the list of games as a representation of what the user is engaged in interacting with, a new option pops into view. Where do you naturally want to add another thing to the list? Well, right where the list runs out. Consider something like this:

New-Game-Mockup
This way it doesn’t have to struggle to find a place on the screen.

Screenshot 2023-09-14 at 6 19 03 PM

I also revised the way some of the buttons work on here, so the options are more toggle-select style. This way starting a new game could be as easy as clicking “Find” or ”Create”, but it could also be easily modified. The “More Settings” option could bring up a modal with more complete settings.

And if the player has no games yet, we could zoom this up to take up a larger area of the huge empty space, so it’s easier to interact with, and is more inviting for the first-time player.

While this is not the point of this thread, I think we could apply a similar visual treatment to game invitations. Rather than a vertical stack of cards, we could place them right above the games in a similar grid/list view, with the size of a goban. This way every game a player views has a consistent visual representation of having a board—or at least a board’s size. This could clean up the UI considerably while also expanding its offerings. I think the thing I like the most about this idea is that it unifies the representation of a game to always be some thing that’s square like a goban. It’s a natural way to help people grok what they’re looking at.

Ok, I know there’s a lot here, but I completely welcome discussion. Pick it apart. Quote it. Disagree. I want to iterate to something awesome here, and even if we do an MVP version of this first it just seemed like the natural direction.

@shinuito
Copy link
Contributor Author

I have a few comments in response.

  1. Proximity: put like things closer to each other, so the implication is that they belong together.
  2. Alignment: align things along the same lines when they are multiple similar-importance items in a set, so the implication is that they have equal importance and a relation to the things they’re aligned with.

In this mockup it just so happens that there are 4 games, and each one aligns with a button above it. While there are section headers, the alignment kind of implies that each button has something to do with the game below it. The proximity of the match finding buttons gets broken up, implying that the buttons are less related to their common task (finding a new game).

I think this is really interesting, the design principles. I do think that 4 games and 4 buttons is a very special case. It seems coincidence that something might line up for one user and not for 10,000 more so it seems strange to attribute any meaning to it.

I think the idea of putting these below the active games is the right direction of play (Go jokes, right?), but not quite the right implementation. Hierarchically speaking, active games should be more important than starting new games, so having this appear lower makes sense. Visually it becomes an estranged afterthought or a site footer. Not really what we’re after.

I mean for me it actually makes sense. Firstly the active games are correspondence games, people that use the home page for correspondence, I would argue are probably less interested in starting many consecutive live games (there's exceptions), but I mean they probably want to see their ongoing correspondence games, the ones where it's there move as a priority over automatch buttons they're not using.

Secondly, the automatch on the home page, really initially is to cater for live only players. This is where it has been heavily requested because if you don't play correspondence the home page is completely blank barring a find a new game button linking to the play page on the experimental view, or in the standard view just a link to profile, tournaments groups etc - it's like a second visual nav bar.

Of course though for consistency the automatch probably should be there for both types of players, I would think below the correspondence games instinctively, but to be honest given that I don't know how many correspondence games the average user has, probably it is best to be above the games.

I also revised the way some of the buttons work on here, so the options are more toggle-select style. This way starting a new game could be as easy as clicking “Find” or ”Create”, but it could also be easily modified. The “More Settings” option could bring up a modal with more complete settings.

And this brings me onto the next point. It looks fancy to incorporate the automatch into the games list when there's 6 games, but what about when theres 100 games, or 600. There's different kinds of players, some play one or two correspondence games, some will 8 games from a round robin tournament, and some will have 20, 100, 200, 1000 simultaneous correspondence games, and we don't want the ui to be completely broken for them either.

While this is not the point of this thread, I think we could apply a similar visual treatment to game invitations. Rather than a vertical stack of cards, we could place them right above the games in a similar grid/list view, with the size of a goban.

Design principles aside, I suppose it doesn't bother me that invites and open challenges are front and centre. Most of the time, particularly games invites are going to be temporary, and you want them to be as easy to find as possible. Sometimes people struggle to understand the avatar or notification icons in the top right, how they have multiple functions, but having these things like invites and the open challenge link incredible easy to find, and temporary take up space is probably a good design for usability and accessibility in some sense.

Ok, I know there’s a lot here, but I completely welcome discussion. Pick it apart. Quote it. Disagree. I want to iterate to something awesome here, and even if we do an MVP version of this first it just seemed like the natural direction.

I do appreciate the time you put into picking apart the different versions. I don't really have any UI training, and my css skills are a bit minimal, I've tended to try the minimal things that work. It's there anyway

Uffizzi Ephemeral Environment deployment-34689

☁️ https://app.uffizzi.com/github.com/online-go/online-go+com/pull/2352

📄 View Application Logs etc.

What is Uffizzi? Learn more!

This link should work also to preview it, and things like css style and alignment can be tweaked in browser.

If we remove all kinds of alignment, margins, and the space between option for the buttons for instance it looks like

image

It's all aligned but it just makes me a bit uncomfortable or something.

Center aligning feels better if we want to remove space in between the buttons say.

image

But again I don't really have a massive preference, it's just going off of feeling.

@kevincoleman
Copy link
Collaborator

kevincoleman commented Sep 15, 2023

Thanks for taking the time to put thought into this!

I do think that 4 games and 4 buttons is a very special case. It seems coincidence that something might line up for one user and not for 10,000 more so it seems strange to attribute any meaning to it.

Agreed, it’s coincidence. However, I do think it’s a pretty common one. The range that displays a four-wide grid of games is 1760 – 2110px, which just so happens to include the resolution width of 1920px (as in 1080p). We could look up stats and get into numbers, but I think it’s fair to say that’s not an uncommon size. Even still, this is only a minor point about that layout, and with the drawback of the proximity issue I think we’re leaning away from making the buttons justified anyway.

Secondly, the automatch on the home page, really initially is to cater for live only players. This is where it has been heavily requested because if you don't play correspondence the home page is completely blank barring a find a new game button linking to the play page on the experimental view, or in the standard view just a link to profile, tournaments groups etc - it's like a second visual nav bar.

I actually just had to go and check, but it turns out that the Home page shows live games too. It makes sense that I didn’t even know, though, because when you’re playing a live game you’re probably not playing several, and you’re probably not spending a lot of time looking at the index of games or making new ones. This page definitely caters to the correspondence crowd, and I see how it would feel wasted on the live-play crowd. The question is if we can improve it for one without damaging the other’s experience—or better, improve it for both.

I would think below the correspondence games instinctively, but to be honest given that I don't know how many correspondence games the average user has, probably it is best to be above the games.

I think I see the logic here, but I’m pretty torn to agree. As someone who regularly uses the correspondence page I definitely don’t want to scroll past anything when I go to play moves. If we follow a heuristic of having a main goal per view I think we’d better not get in the way of the main goal of that view for correspondence folks: playing their games. This is actually especially true for the live-play crowd, because their timers might be ticking while they’re frantically trying to navigate to their games. I could see maybe putting a link in the sidebar for starting a new game, but I really don’t think we should push the games down the page for an action that’s a nice-to-have in this view.

I’m beginning to see why this is such an issue: there are primarily two different kinds of users of this page. Think of it this way: if you had to pick only one of these things to have on this page, which would you rather have? The list of your games, or the quick-match buttons? For correspondence folks it’s definitely the games that are more important, so having the automatch finder below is no issue for them. For live-play folks they may want the automatch finder more often, but I’m still not sure they need it so much more that they need it above their active games. I mean, their active games are on time limits!

And this brings me onto the next point. It looks fancy to incorporate the automatch into the games list when there's 6 games, but what about when theres 100 games, or 600. There's different kinds of players, some play one or two correspondence games, some will 8 games from a round robin tournament, and some will have 20, 100, 200, 1000 simultaneous correspondence games, and we don't want the ui to be completely broken for them either.

I think you raise an excellent point about the number of correspondence games people have. I bet we could actually pull stats on this, but even if 15% of people have a huge number of games we don’t want to hurt the experience for them. That said, we’re talking about adding functionality to this page, so unless it gets in the way of what the player wants it’s hard to say we’re damaging the experience. Maybe in cases where there are a lot of games going we could put a minimal version of this (or a button) in the sidebar. Also, though, looking at this in light of our two different kinds of players maybe the thing at the end of the list of games should be a way to create a game with all the options, modal style. It doesn’t feel “quick” to scroll to the bottom to start a quick live-play game. So maybe that idea could get shoveled off to another feature request. If we had it launch a modal it could clean up the appearance of the new game tile, too, so it’d look more like this:

Screenshot 2023-09-15 at 12 17 02 PM

Design principles aside, I suppose it doesn't bother me that invites and open challenges are front and centre. Most of the time, particularly games invites are going to be temporary, and you want them to be as easy to find as possible. Sometimes people struggle to understand the avatar or notification icons in the top right, how they have multiple functions, but having these things like invites and the open challenge link incredible easy to find, and temporary take up space is probably a good design for usability and accessibility in some sense.

Yeah, I think I mean more that we could restyle them to be square. I think I thought they stacked vertically first because of how “your open invites” is separate from invites that are extended to you, so I was just confused. If we did make the cards more game-sized then we could actually put pending invites right inline with games. Think of it as a game that the other user just needs to play in next. In this paradigm in the user’s brain they’re looking at a game object, not just an invite card. Almost like a tile that says “it’s your move to accept this game” or “this game is just waiting to be accepted”. The contents of the invitation card are great by me. They look very clear and actionable. I would say these could hang out at the top of your list if they’re your “move” (to accept/decline the game) or at the bottom if they’re your opponent’s “move”.

They’d look more like this:
Screenshot 2023-09-15 at 12 57 30 PM

I’m more than happy to make this idea its own issue, though. I’ll try to copy/migrate the relevant discussion to a new issue.

I do appreciate the time you put into picking apart the different versions. I don't really have any UI training, and my css skills are a bit minimal, I've tended to try the minimal things that work. It's there anyway

My pleasure! We do come from different sides. I started with print design and moved toward UI then UX and programming. It’s when we’re able to put our strengths together that everyone wins.

If we remove all kinds of alignment, margins, and the space between option for the buttons for instance it looks like

image

It's all aligned but it just makes me a bit uncomfortable or something.
Agreed. It feels like nobody remembered to style it—it lacks intention.

Center aligning feels better if we want to remove space in between the buttons say.

image

But again I don't really have a massive preference, it's just going off of feeling.

The main thing I’ve taught over the years about center alignment is that it has to be used carefully and intentionally. By center-aligning multiple things of different widths you end up with a bunch of sides of objects that don’t line up with anything, so you can easily end up in a messy state that’s hard to visually parse. In this example the four main buttons seem pretty good to me, but the header, size selector, and “More Options” seem sprinkled in randomly. Add some game invites on top of this and we’ve got chaos. Thankfully this can be fixed with a simple design motif: a box. People don’t always love reaching for a box to solve their problems (especially when they think back to the early days of web dev and table layouts), but often a box is the perfect tool.
Screenshot 2023-09-15 at 12 08 06 PM

Still, this only addresses the layout if we keep a similar feel to the Play page’s quick match. I think if we went with an option that had these above games I would only be interested in it if users could at least choose to hide it, either with a quick toggle in the corner or with a user setting. To me having it above the games would be enough that I’d say nix the whole idea. When adding a feature for convenience it’s important not to get in the way of people’s “happy path” of using the app, or we end up with a very hacked-together experience. Of course, I play almost exclusively correspondence games, but I think we’d be better off finding another solution entirely than to damage one experience to help another.

Again, I appreciate all this discussion. It’s probably the hardest part, but if we can find the golden ticket solution through discussion we can save a lot of pain.

One other idea: move this into a modal, and give people a button. We could more easily find a place for this content if it were button-sized.

@shinuito
Copy link
Contributor Author

shinuito commented Sep 16, 2023

Thanks for taking the time to put thought into this!

No problem I appreciate the discussion and ideas.

I actually just had to go and check, but it turns out that the Home page shows live games too.

Even if it does, I would say it’s very likely to be <0.000001% of players that even use the home page for live games. I’ve seen people use multiple windows when playing simuls, so not even in that small use case do they use the home page for this.

I think for live/blitz only players the only time they see the overview page it’s blank unless they accidentally clicked it while in a game. So I don’t think there’s a real dichotomy problem here. The automatch will likely be the only thing there for a decent number of players, so the real question would be, is it in the way for correspondence players for looking at their games.

Which goes into the next point, which is that you’re only considering one particular view of the Home Screen which is when the number of active games is small.

Typically when players have more than a certain amount of games the games view switches from mini gobans to list view

IMG_4966

so whatever alternate solution you’re proposing would also need to work in list. I think trying to incorporate into the games list itself is just going to be over complicated and it will need so many special cases, for screen sizes, list view vs goban view that it won’t be unified or worth it.

At least as I mentioned if it’s above the correspondence games it won’t be nudged down to scroll oblivion for some players, it will always be in the same spot. If you have 10+ games in goban view or you adjust in settings to show a lot of gobans (it’s in general settings to toggle the number - but the average user may not know this), you’re probably going to be scrolling a lot to see them anyway. There’s probably some edge cases where you can have a huge monitor and show all the thumbnails somehow, but I don’t think the design can assume this view, and not scrolling, and not take into account list view etc.

Yeah, I think I mean more that we could restyle them to be square.

Sure it probably is good if they’re compact or square or tidy, I don’t exactly know. I do think it’s quite a minimal case to have several existing open challenges. Maybe I’ll have one open for a few minutes once every few weeks for a league game.

I’m more than happy to make this idea its own issue, though. I’ll try to copy/migrate the relevant discussion to a new issue.

Yeah, I’m sure there could be a big rework of the overview, play pages, watch/games pages. One could include subsets of different components on the home page to make it a one for all for everyone. You can see some design suggestions on the forums.

The main thing I’ve taught over the years about center alignment is that it has to be used carefully and intentionally. By center-aligning multiple things of different widths you end up with a bunch of sides of objects that don’t line up with anything, so you can easily end up in a messy state that’s hard to visually parse.

I think I can understand that, in isolation it might be ok, but fitting with everything else it can become chaos.

Still, this only addresses the layout if we keep a similar feel to the Play page’s quick match. I think if we went with an option that had these above games I would only be interested in it if users could at least choose to hide it, either with a quick toggle in the corner or with a user setting.

I was thinking about a toggle between correspondence game view and the automatch, it was kind of my initial thought, but then there’s some cases to think of, like maybe it should default to the automatch since when you sign up as a new user you have no games. If you have no games maybe the default should also be to the automatch, but it’s was a layer of complication on top of just extracting the automatch code so I didn’t try it yet :)

One other idea: move this into a modal, and give people a button. We could more easily find a place for this content if it were button-sized.

I have thought a little about this one as well. I was thinking a modal component that could be on the nav bar like friends notifications and so on. The plus side is maybe you could start a game from anywhere on the site. It’s one of those things servers with clients can kind of do, if they open a window for a new game, you close it you’re back to the default home view and you can start a new game.

In any case though, I think one design priority should be to minimise the number of clicks to start a new game, particularly for live and blitz players. If you’re new to the site or if you have the home page bookmarked, you want a game in one click if possible. So automatch live or blitz, straight away queue for a game with one click. I think it’s something people tend to praise about lichess’s home design, click one button on a time control you want you get a game. Chess dot com maybe you’ve to go to play page first but generally not too many clicks to start a game.

I don’t think we want to hide it behind any more pop ups, modals, options and settings than we need to.

That’s at least my personal motivation at the moment from reading multiple threads and other conversations in person.

@kevincoleman
Copy link
Collaborator

Yeah the list idea makes more sense for starting a new correspondence game, which is less the point of this thread.

If it involves putting those bulky buttons above the games I think this is a step backward. There's already a whole site page devoted to starting games. The only case I see it as an improvement is if there are no games.

In the top nav with a modal seems smart. Site-wide, always available, not in the way. Only drawback is the nav bar is often crowded depending on the screen size. If anything is worth it, starting a game should be, though.

@anoek
Copy link
Member

anoek commented Sep 16, 2023

image

That feels really intuitive to me. There's the consideration for what to do when in list mode, but that could be as simple as show a button to open whatever modal this would open (or link to the play page or whatever), or something else. That's a less common use case and I think optimizing on this experience is definitely more important.

I think it’s something people tend to praise about lichess’s home design, click one button on a time control you want you get a game.

I think they used to do that, but now it's this:
image

image

which I think is smart, their grid of time options was very confusing for beginners.

@anoek
Copy link
Member

anoek commented Sep 16, 2023

Ahh looking more, they actually do both, if you first click on the "Quick pairing tab", then you have the grid thing still:

image

but the button + modal thing is still available at all times.

@shinuito
Copy link
Contributor Author

I think the problem we have compared to lichess is that we have at least 3-4 times the amount of time settings types that they have.

If lichess’s time settings are confusing to beginners, imagine OGS - it’s not just Fischer to worry about it’s byo-yomi, Canadian and simple, which sounds simple but it’s not self explanatory. It doesn’t say there’s no increment, or what happens if you submit early and so on - it’s just implied by the time per move option.

So I don’t think offering a big modal is beginner friendly, if that’s the angle we’re thinking of. I think a couple of buttons, and a clean way to get across what the time settings are would be good (of course we still have the issue that you might be playing any of 3 different time settings in the automatch anyway…).


I do agree that the board as the create new button is intuitive and very nice looking.


If someone wants to take over this I’m happy enough. The attempt at coding was to see what might work, and how easy it would be to get the automatch from the play page. Possibly it could even be extracted entirely as a component, e along with the create button that brings up the challenge modal, it’s just there’s multiple interactions between it and the lists of games on the play page that probably need to be managed and I’m not so confident on that part.

@anoek
Copy link
Member

anoek commented Sep 16, 2023

If lichess’s time settings are confusing to beginners, imagine OGS

For sure, to be clear I wasn't advocating for that grid, I was just correcting myself because when first landing on lichess I no longer saw the grid and thought they had moved to the button and simple modal, as sort of a signal that maybe they found that superior. But then they also have the grid, so 🤷‍♂️.

@kobakitty
Copy link
Contributor

IMO it would be better to be before the ongoing games but below the announcements
It could be just centered so it remains neatly in place regardless how many ongoing games user has
Screenshot 2023-10-14 at 20 20 15

Plenty of room there ^____^

@shinuito
Copy link
Contributor Author

IMO it would be better to be before the ongoing games but below the announcements It could be just centered so it remains neatly in place regardless how many ongoing games user has Screenshot 2023-10-14 at 20 20 15

Plenty of room there ^____^

I think that’s where it is at the moment, but we’ve stalled a bit on whether there should be something fancier like a goban that you click (which probably doesn’t work when you’ve 100 games, unless it’s the first one in the list always) or something else that brings up some kind of modal with buttons to bring up another modal or something?

For me anyway, the thought of this is just to facilitate getting a game as quickly as possible as soon as you land on OGS, and the more clicks and menus you have to go through, the further we get from that. If someone wants to spend 15 mins finding the perfect custom settings they can do that on the play page, but if you just want to play Go, and the Home Screen is currently being used for no other purpose (it’s blank for me now that I have no more correspondence games) it seems to make sense to add this kind of thing in.

I guess maybe it’s annoying if you add it and then retroactively change or remove it, but it seems like a rework of the home page is inevitable anyway at some point.

@kevincoleman
Copy link
Collaborator

kevincoleman commented Oct 15, 2023

I'm happy to admit that the idealism of the “add to list” style goban was a bit impractical. The model was fine but it missed the intent of this topic.

I still completely disagree that we should have a quick match feature above games on the Home page. It steals the action area from the topic of the page: games.

I do think it's a great idea to have the auto match panel present when there are no games.

@shinuito nailed it though. What we really need is to rethink the Home and Play pages as a full UX rework. Adding an automatch panel to Home is a stopgap, but it waters down one of two views which currently have clear intents (ironically you go home to Play and Play to create).

One step in the direction of this refactor is to hoist the new game functionality into a modal launched straight from the menu. It is, after all, an action more commonly used than many pages.

So in short: sure, let's try an automatch in the Home page when there are no games, but know that there's also a bigger refactor beginning to gain momentum.

@kobakitty
Copy link
Contributor

I actually really love the idea of renaming "home" and "play" as "my games" and "new game", that feels like intuitive way of solving the "new users encountering a blank page" problem.

And maybe then the renamed "my games" could also include a link to users entire game history (profile page only has the most recent 5000 games) and some cool stats like what gotstats has (or just a link to gotstats if Chinitsu will keep that place running forever)

@kevincoleman
Copy link
Collaborator

Some cool ideas. Definitely leaves room to iterate on what the ideal games page would be. I would think “My Games” should stay as focused on possible on just playing, and that maybe we could improve the user’s profile area to show deeper stats if we want to. That’s just my hot take though. Haven’t done any digging yet.

For now the aim is to put this reorganization in experimental. I just need to draft it up first...!

Copy link

This pull request has been marked stale and will be closed soon without further activity. Please update the PR or respond to this comment if you're still interested in working on this.

@github-actions github-actions bot added the stale Issues or PRs that have been open for a long time with no activity label Nov 17, 2023
@shinuito
Copy link
Contributor Author

What we really need is to rethink the Home and Play pages as a full UX rework.

It probably is the case that that’s something worth doing long term - but big jobs get in the way of small QOL things also.

I think this could be a decent QOL for the short to mid term (depending on how long it’s on the back burner). We can have another few months to years of a home page with nothing on it but a link to the play page in the meantime

image

@github-actions github-actions bot removed the stale Issues or PRs that have been open for a long time with no activity label Nov 23, 2023
Copy link

This pull request has been marked stale and will be closed soon without further activity. Please update the PR or respond to this comment if you're still interested in working on this.

@github-actions github-actions bot added the stale Issues or PRs that have been open for a long time with no activity label Dec 24, 2023
Copy link

github-actions bot commented Jan 9, 2024

This pull request has been automatically closed due to inactivity. Please feel free to re-open it if you still want to work on it.

@github-actions github-actions bot closed this Jan 9, 2024
@shinuito
Copy link
Contributor Author

shinuito commented Jan 9, 2024

I don't think I have the capacity to redesign the entire home + play page so I guess this pr will stay closed, unless we accept that we can make small improvements to the home page, even if in some year(s) time, there may be some plan to redesign both.

It was worth a shot anyway.

@anoek
Copy link
Member

anoek commented Jan 9, 2024

I certainly appreciate the effort @shinuito, I know the decision is a disappointment to you, and I'm sorry about that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
stale Issues or PRs that have been open for a long time with no activity
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants