people don't like things about how the new UI looks

[cgolubi1]

This is an open ticket to hash out complaints about the UI refactor in #517. In particular:

• What looks broken on your browser?
• What do you think is negative progress relative to the previous UI look?
• What would you like to see tweaked further?

Note: in response to this ticket, i will probably wind up introducing a small number of UI user preference options, so it's not necessary to achieve consensus on everything at this point (though i'll probably only be able to vary simple things by player).

[cgolubi1]

To get things started, in https://github.com/buttonmen-dev/buttonmen/pull/517#issuecomment-33899467, Shadowshade noted that the die recipes overlap the circles when he plays on Safari 5.1.7 on a Mac.

[AdmiralJota]

I like this general layout a lot. I do have a handful of thoughts about things which might be able to be improved on (in my opinion, which I'm sure everyone will agree is also the same as objective truth).

Looking at a typical mid-game screenshot:

• The fact that the two button images are almost but not quite horizontally aligned rankles me a bit. I think that if they were either aligned, or vertically further apart (so that they don't look _mis_aligned), it'd be better.
• The text above the button looks like it's almost up against the player text, making it seem like they should be part of one thing, even though they're separate things.
• The score -- which I think is the most important part of the surrounding text -- is kinda buried. I've had to hunt for it each time I want to compare it, and flipping its position for the opponent unfortunately exacerbates the issue.
• Not exactly a layout issue, but: should the parentheses around die recipes really be displayed in the UI in-game? They seem to make things slightly harder to read than it would be without them. (I'm thinking about both the button recipe and the individual dice.)
• I'm not sure that coloring the text inside the circles really benefits anything much. But I guess it doesn't hurt anything either.
• The button circles, being clickable, should probably have "cursor: pointer;" or "cursor: default;" in their styles, so you don't get a text selection cursor when the mouse is over the number in the circle.
• The two sets of dice are, IMO, too close together. Comparing this screenshot, from later in a round:

...it feels more like the three dice go together with each other, rather than the top die with the top text and the bottom dice with the bottom text. I imagine the colored numbers were probably intended to help with that, but I don't think they really do. I think it would work better to either separate the two players' areas with a bit of white space, or to actually color the background of each player's area, to make them more visually distinct. Or both, like this:

This does use a little more vertical space, but I think it's worth it -- plus, it separates the two button images a bit more, so they no longer look almost-but-not-quite-aligned.

(If you happen to like this or want to tweak it, the CSS I used was "background: #DDEEFF; padding-top: 25px; padding-bottom: 5px; margin-bottom: 20px; margin-top: -10px;" for the current player's dice div and "background: #DDFFDD; padding-bottom: 25px; padding-top: 5px; margin-top: 20px; margin-bottom: -10px;" for the opponent's.

• As the late game screenshot above shows, having two columns of player text can look pretty weird when there aren't that many dice remaining. I'd suggest combining them into one column in the center, with three rows of text:

  Player: Jota - W/L/T: 0/0/0 (3) Dice captured: (X=13) Score: 28 (+5.3 sides)

(And in reverse order for the opponent, of course.)

This would also help with the issue of the score being buried (this way, it'd be the single line closest to the actual dice, and the opponent's score would be directly aligned with it), and with the issue of the button text jutting up against the player text.

• Finally, at the end of the game:

I think that instead of saying who won in the middle of the play area, it would be more easily visible if it were on a line below "The game is over", probably in a large font and with whitespace around it. (Actually, I guess keeping it were it is might be OK -- if it had a large enough font and enough whitespace to really stand out.)

[cgolubi1]

Thanks for the comments, Jota. I'll think about them. I will say that, in general, i want to be pretty zealous about conserving vertical space when possible, because i haven't yet heard a proposal for moving the action log and chat log that i like a lot, and i want everyone to be able to see those elements without scrolling. So if i can disambiguate the two players' play areas with color, lines, or horizontal space, rather than vertical space, i'm generally going to try to do that.

One thing: i agree that it's a little weird that the two button images are close-to-but-not vertically aligned. The problem is that i want each image to be in the same table element as its button name and recipe so those stay near each other, and i want the player's name/recipe to be above the image and the opponent's to be below for symmetry and disambiguation. So if i could put the two images each aligned with the center, but have one's text above and the other's text below, i would do that, but i couldn't figure out how. Do you know how?

As far as the circles around the side counts: the current proposal for button skills includes allowing skills to have single-letter representations which are the same as those used for swing dice (e.g. R, Z). The old site didn't do this. The upshot of that will be that it will be absolutely necessary to put the swing values in parens for disambiguation. So, if you hate the look, IMO the place to argue is the die skills representation discussion. :>)

[AdmiralJota]

I guess one question, then, is what is the minimum amount of screen real estate (vertical and horizontal) that we want to make sure we can fit the game and the action/chat logs into? (And another is how much of those logs need to be visible without scrolling?)

[cgolubi1]

Enh, i mean, maybe... all i'm saying is it's a tradeoff, obviously we need some vertical space for various screen elements. Different people will always have different sized screens.

As for "how much"... one thing i'm hoping to be able to do at some point is to use color to identify new activity (action log entries and chat which are new since the last time the viewing player took a turn). So i think if the first couple of entries are visible, that's good, because it means people can see that without expending a lot of effort, and they can always scroll down if it's obvious that something interesting might be down there.

[AdmiralJota]

For the sake of saving vertical space, I bet the navigation area at the top of the page could easily be converted into a left sidebar.

[AdmiralJota]

Also, since moving the two-column player text into a one-column form would use up slightly more vertical space, I wonder if there's a way the player text could be combined legibly into a single row, maybe separated by a bullet character? I'm not sure how well it would fit, but something like:

Player: Jota  *  W/L/T: 0/0/0 (3)  *  Dice captured: (X=13), (10)  *  Score: 35 (-3.3 sides)

And if we did want to make the two button images aligned with each other, it might work to put the button name above each button and the recipe below it.

[ElihuRoot]

While I do like the button images, I'd like a way to turn them off [in the preferences menu?] as some buttons are not work-place friendly images.

[ManvilleFog]

don't know how this happened, but it's not pretty. I did notice a similar problem with dice whose skill list required two lines, so the circles above them were uneven. That's the main problem with the new layout - things aren't lining up.

[cgolubi1]

Fog, i haven't seen that in my testing. What browser and OS?

[cgolubi1]

Unrelatedly, Fog suggested that i put the text below the button images, pushing the images further up/down. That looks like this:

What do y'all think of it?

[cgolubi1]

BTW, i'm not going to make any changes related to this ticket for a week --- i want to give people some time to think about the current UI and discuss changes, without rapidly following up on any of them. I expect to do at least one more round of UI modification before the beta, but i'm not even going to try to respond to changes in real-time. So please keep throwing ideas around!

[AdmiralJota]

As long as we can find a good way to make sure the users don't mistakenly think that the button text is meant to go with the wrong player's text (i.e., to make sure they don't think the "Button: Avis" bit goes along with the "Score: 30" to the right of it), then I think that looks great and definitely solves the "almost but not quite aligned" problem I mentioned.

[cgolubi1]

ElihuRoot: i think turning off the button images as a preference is somewhat separate from the rest of the debate. Can you make a standalone ticket for that?

[blackshadowshade]

The coloured background idea of Jota's would also work for grouping the button with the player, if it were big enough. The general idea could be like a (slanted) play mat.

[AdmiralJota]

At the moment, when you select a die, the border around the die you selected is square. Given that our dice are presently circular, I think it might look nice if the border were as well. What does anyone else think?

(The CSS for the change is just to add "border-radius: 26px;" to the style on the div for the die image.)

[cgolubi1]

Hmm, i don't like it because it's too close to the existing die circle and hard to see. Maybe mock it with radius 28 or 30?

[irilyth]

I like the shading idea a lot; it lets you group a horizontal strip of dice with a box of button art and text on the side, without ambiguity.

[AdmiralJota]

The coloured background idea of Jota's would also work for grouping the button with the player, if it were big enough. The general idea could be like a (slanted) play mat.

Something like this?

The obvious issue with this example is that we'd need to make sure our button images had a transparent background rather than white. Do we know if that'll be the case for the 150x150 images?

[blackshadowshade]

That's the general idea, yes. If we could manage it with less corners, that could be more attractive. :)

[AdmiralJota]

Hmm, i don't like it because it's too close to the existing die circle and hard to see. Maybe mock it with radius 28 or 30?

It turns out that's a bit trickier to pull off: the border for the div with the circle image in it is pretty much going to be attached to the div itself. However, I did this one by creating a second slightly larger div outside of it and putting the red border on that one instead:

[cgolubi1]

Hmm. Yeah, that sounds (more) complicated... i'm not particularly aesthetically bothered about the square, and i like the clarity and ease of implementation. What do other folks think?

[AdmiralJota]

That's the general idea, yes. If we could manage it with less corners, that could be more attractive. :)

Like this?

[cgolubi1]

Ooh. That's pretty cool looking. I'd still rather have transparent-background images than put them in the boxes... okay, so i made round gifs of Clare and Niles using imagemagick:

Here's the CLI (for 100px images, obviously we'll scale the numbers for 150px images) so i don't lose it:

button=niles
convert $button.jpg \( +clone -threshold -1 -negate -fill white -draw "circle 49,49 50,1" \) -alpha off -compose copy_opacity -composite ${button}_circ.gif

What can you do with those? Anything good?

[AdmiralJota]

[cgolubi1]

I like that a lot.

[blackshadowshade]

Me too.

[AdmiralJota]

While I do like the button images, I'd like a way to turn them off [in the preferences menu?] as some buttons are not work-place friendly images.

I've added this as #528.

[irilyth]

I like the shading, but those two colors are too similar -- at the angle my laptop screen was at, I couldn't actually tell them apart until I changed the screen angle.

On a related note, anything we do with colors should probably take into account color-blindness...

[cgolubi1]

Not to be self-serving (i like eggplants), but would light purple and green work better?

[irilyth]

Also a nice B5 reference. :^)

(Sounds fine to me.)

[blackshadowshade]

To address the visibility issue, the easiest way would be to increase the saturation and decrease the luminance for the opponent's play field.

[AdmiralJota]

The screenshots above are using #DDEEFF and #DDFFDD for their background colors.

Here's an alternative using #00FFFF and #00FF00 (the colors from the chat and history):

I personally thing those are a bit too garish, so I'll let other folks propose color pairs that they think look good next to each other.

(If we do auberginify them, then we ought to make sure that the chat/history colors get updated to green and purple match.)

[cgolubi1]

Yeah, i think that's a little loud, and i came up with those colors to begin with. :>)

Definitely, i'll keep the chat/history colors synced with the battle area colors we choose.

[irilyth]

I'm not set up to fiddle with the code, but try #DD99DD for the purple shading, and #CC00CC for the chat/history?

[irilyth]

If we get the shading working, I think it'd be nice to move the player info off to the sides, and then center the scoring info. One drawback of the current layout is that the two players' scores aren't aligned with each other; it'd be nicer if they were both centered. Kicking the player info out to the side might make that easier to do.

[irilyth]

Actually, on further reflection: Right now there are three two-line pairs: Button name & button stats, player name & W/L/T, and game score & dice captured.

I'd suggest two three-line triplets: Player name, button name, and button stats; and dice captured, game score, and W/L/T. Put the first off to the side with the button art, and the second centered above or below the dice.

[AdmiralJota]

Or another idea, along those lines: what if the player name, rounds and score all moved over to the sides with the button art, but the list of captured dice -- which could get fairly long by the end of the round -- remained above and below the dice in play? I think that might potentially use even less vertical space than we do now, since we'd only have one line of text above and below the dice.

EDIT: I retract this suggestion. That's way too much stuff crammed in with the button image.

[AdmiralJota]

I tried irilyth's suggestion for the layout, and I tried mine, but neither really seemed to work well in my opinion. But then I played around with it a bit and eventually came up with this:

It's nicely compact and at the same time not too hard to read. The captured dice lines could end up being fairly wide, but that's just horizontal space, which in theory we've probably got plenty of.

(Also, this is irilyth's purple.)

[blackshadowshade]

I'd like to see that on a Max vs Max game, both early and late in the game.

[cgolubi1]

Another thing to try with this --- can you hardcode in '(X sides)' and '(-X sides)' next to each score? We know that's going to be there eventually, so i'd like to make sure there's room for it.

Thanks for doing all these mockups --- this is really useful!

[AdmiralJota]

(Remember that you'll need to click through to the images to see how wide the layout actually is, since github resizes them to fit in the comment thread.)

[AdmiralJota]

Another option, if this is too wide, is to keep the "Player * W/L/T * Score" line the way it is, and to place the "Dice captured" line immediately under it. But I personally think I prefer the cleaner single line there, since it makes it easier to spot the score and the opponent's name without any hunting.

[irilyth]

Hmm. I still feel like captured dice should go near the score... This would also have the side effect of keeping the width of the center part more constant as the game went along, as dice moved from in-play to captured.

So my two cents is still to have art, recipe, button name, and player name, on the left and right; and score, w/l/t, in-play dice, and captured dice, all in the center. (I guess this would add another two lines to the height; I think that would be ok.)

[yawetag]

I agree with irilyth's thoughts on the layout. The left and right should generally remain the same size throughout the battle, and even from game to game (though it may expand with larger recipes), but the center area should expand the most.

In effect, the edges should be for full-game reference, while the middle is used for ever-changing information. This way, the player doesn't need to look to the left or right to see what's going on with the game.

Andrew Senger asenger@gmail.com

On Mon, Feb 3, 2014 at 9:03 AM, irilyth notifications@github.com wrote:

Hmm. I still feel like captured dice should go near the score... This would also have the side effect of keeping the width of the center part more constant as the game went along, as dice moved from in-play to captured.

So my two cents is still to have art, recipe, button name, and player name, on the left and right; and score, w/l/t, in-play dice, and captured dice, all in the center. (I guess this would add another two lines to the height; I think that would be ok.

Reply to this email directly or view it on GitHubhttps://github.com/buttonmen-dev/buttonmen/issues/520#issuecomment-33962657 .

[AdmiralJota]

So something more like this?

[irilyth]

That does make it a bit taller vertically, doesn't it. I agree with Andrew that it's easier to use, though (for exactly the reasons he mentioned).

In very picky nits, I slightly prefer putting the button name next to the button, and the recipe in between the button name and player name. But I don't feel strongly about that.

[cgolubi1]

It's a bit taller vertically than the previous example, but it should be the same height (two rows of text above and below the dice) as what we have deployed right now, which i think is acceptable.

I do like it. Would it be too much to boldface the player names? I'd like "who am i playing against?" to jump out when i look at the page. I guess another option would be to set the title bar, which currently just says "Button Men Online Game" to something more like "Button Men Game #69: Jota (Max) vs. glassonion (Max)"

[irilyth]

I think it'd be fine to highlight the player names somewhere. Boldface in the right and left column sounds fine to me; the