UI Tweaks to Play page

[kevincoleman]

Warning! This is a bit of a random thread. The idea is to create jumping off points for new discussions and/or issues. Feel free to cherry pick or dissect it all.

I’ve noticed a few interface quirks in the main Play page. Any that has merit might be worth creating a separate issue about. Some examples:

In the automatch finder section all the main buttons look the same but most immediately get you queued and one launches a modal with more options. This could be jarring for someone who isn’t sure what a Blitz/Normal/Computer/Correspondence game entails, and who thinks these might just be presets used to list a game (and that they’ll see a modal with details if they click one of these). It makes some buttons into “hot” buttons—ones that you might not want to accidentally click—and the last into a less consequential one (because you can just close the modal). We might want to delineate more clearly somehow (open to ideas).

Similarly, the listed custom games have buttons on the left that say “Accept”, but what that button really does is launch a modal so you can see more details before accepting. The natural inclination is to think that if you have an “accept” button you’ll be adding that game to your games page immediately. I’ve noticed this because I like to check if games have conditional moves enabled before I accept, and the only way to check is to click “Accept” even if I don’t want to. I know this now, but it still makes me hesitate the slightest bit before clicking. So we might want to solve this by some combination of:

1. Rewording the “Accept” button to be “Accept now”
2. Adding a “View Details” button
3. Displaying all the details in the listing line, and doing away with the modal completely
4. Adding a tooltip/hover to show more details (though this doesn’t help in mobile)

I raise these interactions because it’s quite possible we’re overlooking a subset of our users: the timid. It can be kind of scary—especially for rank-sensitive new users who may be trying to establish themselves as Go players—to accept a game without knowing much about it. What if they accept a match they can’t get out of, and now have to suffer defeat or embarrassment for backing out?

I’ve noticed that often I’ll list custom games only to have someone accept them and then leave, annulling the game. The initial impression is that someone has just spam-wasted my listing, and that I’ll have to go re-list. I’m actually still not sure if there’s a mechanic that auto re-lists games in such cases. If not, maybe we consider it? If so, we need to make it clearer. Either way, we need to ask ourselves why people are accepting games and fairly immediately backing out. Maybe it’s something about the game accepting process that we can make clearer/easier.

The game listings could also benefit from a little extra space and some very-light line background color changes to help readability, like this:

Just looking at this, one more idea might be consolidating identical game listings down to one row with a “×3” tag or something. Most people are probably more interested in seeing what kinds of games are available than just how many (as they probably won’t accept more than one anyway).

Just a general question: are custom games included in the pool for people to match if they click on one of the automatch buttons? If so, can we make that clearer? If not... same?

When a player lists to find a quick game it seems odd that the UI pieces having to do with that listing get splayed out across the screen. It seems like the timer would be well suited to be in the auto-match box, and the cancel button should be centered up there under the pulsing circle. I get that it’s intended to be a site-wide element that follows you around—that’s pretty cool. Maybe we could find a slightly better presentation of it that doesn’t block UI, though? Take these for example:

This blocks the user listing header and the settings button.

This blocks the create collection UI

This little banner seems like it needs to either be a 1st-class citizen or to be removed/minimized into the top bar somehow. I see that clicking it removes it, but when I do that I’m immediately unsure if I’ve just canceled my quick-matching (which I haven’t). On that note, if a UI element follows us around the site for this it might be nice to put a cancel button in it. One idea that comes to mind is to put a pulsing circle up next to the notifications that could launch a modal showing the quick-match status and offer a cancel button, site-wide. Not perfect, but it wouldn’t block UI and would provide a quick way to cancel without losing your page (say for example if you’ve gotten really into studying joseki and decide against doing a game). I’m also very open to ideas on this. It seems an interesting piece of UI that could just use dialing in.

We might be able to improve the filter interface here. As it is, if there are no games of a certain speed they still take up real-estate. It seems like the listing area should just be for games that are available. Maybe we could add time constraints to the filter area and have them all checked on by default? Then if I know I’m not interested in blitz games those rows are easily removed. It could also be good to add some more filters for some of the other game variables, like if in-game analysis is allowed, if it pauses on weekends, or if you’d be playing as white/black. If we try to improve that the filter panel could be reworked to include several more toggles/headings/etc.

I’m sure there’s more room for improvement, and this page will need to keep iterating more, especially if it becomes a modal-style interface as we’re considering in #2366. Just thought I’d drop some here to get the balls rolling.