How to improve the game-top-bar design.
  • 17 posts
  • Page 1 of 2
Matty wrote:
Sooo on the old site the attack interface consisted of 1 bar on the top, with the attack button and all the previous/end phase buttons and stuff.
Some people said that it wasn't always clear what phase we were in, so we quickly made a new design, using two bars.
It's a lot more functional and clear, this way, which is good.
However, it is also ugly, and that's bad.

I've been thinking a bit about how to improve it, and I came up with something, but I'm still not very convinced, so... do you guys have ideas?

For reference: the current design:
[image]

And some ideas of me on how to improve it:
[image]


If you have ideas, by far the most effective way to show them is by making an ugly paint mockup what I have done. It's much easier that way, words are hard.
"Strength doesn't lie in numbers, strength doesn't lie in wealth. Strength lies in nights of peaceful slumbers." ~Maria
Hoodlum wrote:
moveable transparent window (click to show)

thought about it the other day, dunno if it it's possible. A transparent like moveable window that isn't too obtrusive. The buttons and actions can be close as you like or positioned where you want. The window won't go missed for what phase you are in..

edit... like the join game one! just bigger.
Hoodlum is online.
Hoodlum wrote:
game stages (click to show)

something like this.

(bar at top wouldn't be there)

(and only 1 box at a time... and can be moved to where ever convenient).

default location, maybe where the bonus inset is.

never played on a phone,..so maybe a bad idea lol
Hoodlum is online.
Cireon wrote:
I am not a huge fan of the idea. You are right that on mobile devices this would be a pain. Also, as you can maybe already see, it's very likely to be in the way. Sure, you can drag it around, but you would be dragging it around all the time to see the entire map and I think that would just be annoying. It'd rather do something that is not in the way.
“This is how humans are: We question all our beliefs, except for the ones that we really believe in, and those we never think to question.”
- Speaker for the Dead, O.S. Card
The_Bishop wrote:
Personally I have no problem to understand what phase I'm in. But if it is necessary for clearity then I think the new layout proposed by Matty is the good solution. The name of the phases just under the "end phase" button, I would say perfect location. My question is: it is necessary to display the 4 phase names? Perhaps only the name of the current phase in progress is enough. Anyway as they are right now they look too much like buttons, sometimes I click the phase "attack" by mistake instead of clicking the real action button (less visible in the corner).
«God doesn't play dice with the World» ~ Albert Einstein
Vexer wrote:
I agree with the bishop on all points.

Let's just be sure that the attack button and move in troops button are not in the same spot so that you don't accidentally move all your troops in by over-clicking the attack button. I heard so many complaints about that.
supiachao wrote:
Happened to me on my first round after the update, I clicked on the attack button in the middle instead. I like the way it is like before.

Tbh, prior to playing on d12 I have no experience playing on other risk site and only know the basic of the game, I find the old interfere easy to understand and easy to use without too many complicated duplicated signage. Plus, the how to play guide is really makes it very easy for a new player to learn about how to take a turn.

If I have a choice I chose the old one over this current one, but if changes is going to be made on the new one just don't add anymore buttons.

s_lone wrote:
Playing on a mobile is very difficult. To press the ''attack'' button (which is always at the upper far right no matter what), I need to completely ''un-zoom'' the screen. The attack button becomes very small and it's nearly impossible to press on it without accidentally pressing on another option and ending up in the lobby.
Cireon wrote:
Mobile phones are not officially targeted by this website. It is mainly aimed at desktop players. We would like to improve the mobile layout, but currently we are still looking at making the desktop version work out first.
“This is how humans are: We question all our beliefs, except for the ones that we really believe in, and those we never think to question.”
- Speaker for the Dead, O.S. Card
Matty wrote:
Still, by just moving the button more to the center it'd improve it.

Also a setting for buttons to be 20% bigger or something should be quite easy. Not perfect, but better.
"Strength doesn't lie in numbers, strength doesn't lie in wealth. Strength lies in nights of peaceful slumbers." ~Maria
The_Bishop wrote:
I do really like as it was before i.e. all in one line. I hate when maps need to be scrolled or zoomed out in order to have a complete view.

I would prefer "End Attack" instead of "End Phase". It would be more clear in my opinion,
and it also tells you that you are in the attack phase without the need of those 4 markers.
«God doesn't play dice with the World» ~ Albert Einstein
aeronautic wrote:
Very good point Bishop, although I rarely play, when I do, if the site is freezing (ironically, it froze as I typed this), I'm not sure if it moved to the next Phase or not and that would just be so intuitive.
Hyd yn oed er fy mod Cymraeg , dim ond yn siarad Saesneg, felly yr wyf yn gobeithio y bydd y cyfieithu yn gywir.
Cireon wrote:
If we move back to a less high top bar again, how would you propose the issues that originated this design to be solved? That is, buttons overlapping between phases so you accidentally skip a phase or buttons being too close to each other and looking too similar.
“This is how humans are: We question all our beliefs, except for the ones that we really believe in, and those we never think to question.”
- Speaker for the Dead, O.S. Card
The_Bishop wrote:
I think the issue still stands, just because I have recently misclicked "End Turn" instead of "End Phase" in a couple of games.
In my opinion It would be perhaps more evident and certainly less spaced if it shows only the current phase in progress, instead of displaying all 4 and hightling the one.

As for the wording, "Turn", "Phase", are generic words, "Attack" is a precis thing, it makes the difference immediate in my mind.
And yes the two buttons look similar, almost same size, that's another reason why I suggest "End Attack", it makes the button a bit wider and a bit more different from "End Turn"
Or why not, even longer: "End Attack Phase".
«God doesn't play dice with the World» ~ Albert Einstein
Cireon wrote:
The problem with only showing the current phase is that it is a lot less obvious when you change to the next phase. Right now there is a drastic change between the phases. We need to keep those drastic changes to make it very clear in what phase you are. Also, if you are getting rid of the top row, where do you want to put the current phase? And the buttons on the right also have to be crammed back in again, which is going to cause three (or even four?) buttons next to each other in the worst case, which makes it really difficult to find what you want to press.

No, I think this requires more than a "quick fix", we really need to think about it. What I would suggest doing as first step is going through a whole turn and for every step write down what we have to display in the top bar. Then we can see what every phase has in common and what is different and go from there. I would love to spend time on speccing and designing this, but I am afraid I can't make the time for that right now.
“This is how humans are: We question all our beliefs, except for the ones that we really believe in, and those we never think to question.”
- Speaker for the Dead, O.S. Card