Map Selection Buttons

These aren't so much buttons as they are checkboxes, but the concept is still the same. Valorant doesn't have a map selection, which I've already talked about in-depth so won't cover here, so the best source of inspiration is, you guessed it, CS:GO! Older Counter-Strike games have just has a drop-down to choose the desired map (this is playing offline or in a LAN, online is just the server browser), so CS:GO is the first in the series to have this feature. Because of this, the options are limited, but I decided to make something similar, yet still different.

After showing this video to various groups of people (UI artists and UX designers, CS:GO players and peers, etc.), I gained an understanding into what people thought of it, and what to change to make it better. One of these was to increase the distance between the tabs and the map checkboxes to make it even and feel less cramped. I didn't notice this before, so it's good that someone pointed it out as I completely agree. Another point was to make the checkboxes a different colour so it's easier to tell when a map is checked. This is a point of criticism that I'm on the fence about, as I personally don't think any more needs to be done to make it clearer which is checked, however since the border is still visible when it's unchecked, I see how it can cause confusion. CS:GO's map checkboxes don't show the border when unchecked, so it's a lot easier to see which is checked by the border alone, they just added a checkbox to aide that visibility.

This is the design I made from that feedback, and it is so much better than before. Someone mentioned the fact that hovering over the button whist it's selected doesn't change anything visually, and I agree that it should, but what? At first I thought about having the brightness change be that, but then I thought about the map image changing size. I wanted that to be the main factor of hovering over the button, so decided it'd be best to have a subtle size change when hovering and unhovering over it when it's selected. However I haven't done anything like this before, and it would require a lot more logic than I've done before, so I first implemented the same person's first idea, which was to have a coloured strip at the bottom which changes colour depending on the state of the checkbox.

This looks awesome in my opinion, and is certainly almost finished. I just need to make the hovered animation and get feedback from other people to make sure.

To make this, I just made a Branch to play each animation separately for each state. Since there are only two states, a Branch can be used. If there were more, I would use an Enum with a Switch.

More was done in the Checked Event and Unchecked Event, where I just called the Checked Hover Event and Checked Unhover Event to make them play when changing states so no "snapping" occurs.

I ended up having three separate animations for this checkbox, which is more than I would normally have, so I feel quite pleased with myself for it.

After adding a few adjustments to the layout of the buttons, I finished with this:

Using principles from Fitts' Law, I divided the maps into two categories, Defuse and Hostage to give the screen some sort of order. The Hostage game mode doesn't suit 2v2 well at all, so only Defuse maps are there. The ordering of the maps in those categories are random however, so I should order them in a certain way, probably which is the most popular or newest to the game. I haven't seen a certain order in which CS:GO has its maps laid out, so I don't think it actually has an order, so get the edge over it, ordering the maps in either their likeness to either other or which is most played seems like the most logical step.

After some specific fine tuning of the scroll box, I achieved this result:

These changes include:

• Disabling overscroll

• Animating the scroll to focused elements (the scroll to selecting or unselecting a map button)

• Disabling right click drag scrolling

• Increasing the scroll multiplier to 2 (so that the player can go from the top to the bottom in one motion instead of two)

Even though these changes are small, they are all necessary in making the UI feel robust and battle-tested like AAA game UIs are.