For years now I’ve been planning to ultimately create a menu for accessing Cogmind’s lesser-used “particular instructions,” options not solely requiring the keyboard, however even all assigned to Shift-Alt key combos. So these not often wanted (however nonetheless typically helpful) options had been already fairly clearly grouped collectively as a unit by their annoying modifier, however ideally they need to be simpler to set off, to not point out additionally extra available to mouse customers.

I waited fairly some time to implement this menu, primarily as a result of I wished to design and construct it for a extra secure and full set of particular instructions, one which we couldn’t actually ensure about till later in growth (and certain sufficient these options have been step by step increasing and fluctuating over time, coming to a head within the present Beta 11). Within the meantime it wasn’t an particularly urgent problem as a result of, once more, these aren’t precisely generally wanted options, so sometimes requiring a participant to wrangle with awkward instructions through Shift-Alt-[“some-letter-I-forgot-because-I-rarely-use-it”] wasn’t all that horrible. Even with the arrival of a devoted “Particular Instructions” interface, the Shift-Alt-[letter] method shouldn’t be going away–it’s nonetheless accessible for individuals who don’t thoughts, and even favor it, however as you’ll see we additionally achieve different advantages within the course of.

All you have to do is press Spacebar and a brand new menu pops up with a variety of choices initially solely coated by certainly one of these Shift-Alt-modified keys, and the menu permits each button entry through mouse or hitting the corresponding key to enter a given “particular command” (mainly a blanket time period for much less generally used UI options).

There are many benefits right here:

• Permits mouse entry to particular instructions
• Gamers aren’t compelled to make use of Shift-Alt for these instructions (particularly on non-Home windows techniques, the place using Alt may be problematic), the place Spacebar+[letter] will do
• Characteristic discovery is drastically improved, since all related choices are listed following a single keypress
• No want to recollect the letter related to every command, since these are listed as nicely
• Having an express menu visualized within the interface additionally affords a straightforward approach to describe what every function does

The menu look is animated in customary Cogmind fashion, however enter is accepted as quickly as Spacebar is pressed to maintain it responsive for individuals who merely need to use this in its place approach to enter keyboard instructions they already know, for instance Spacebar+s to dump stats, with out the window annoyingly popping up in between the keys. In actual fact, for this goal the window even has a slight 150-millisecond delay after urgent Spacebar earlier than it seems, a delay that isn’t actually noticeable for somebody utilizing the mouse, however loads of time to enter a second key.

Earlier than precise implementation, as all the time I used REXPaint to design the final structure of this menu based mostly on its meant performance, and to tell later UI coding work. I streamed the method when getting began, on this video the place I additionally coated REXPaint and glanced at different previous UI designs:

It’s not precisely probably the most thrilling piece of UI design, particularly since for consistency sake it principally attracts on present easy parts from prior window designs, although I’ll cowl among the design evolution right here.

The preliminary mockup drawn on stream in REXPaint.

The primary iteration above aimed toward merely getting all of the probably parts right into a field and work from there, so it makes use of a reasonably typical title and border fashion (the lacking notch within the bottom-right is for a possible shut button, which in Cogmind makes use of a special double-width character so can’t be proven on this identical REXPaint file), reveals the complete record of instructions we’ll be together with (11 in all), and contains two separate sections of grey textual content, one to level out that the instructions will also be entered instantly through Shift-Alt, and one other to offer an outline for every button/function because the mouse hovers over it. As it is a mockup, the grey textual content shouldn’t be truly written out in its last type (and even to make sense :P), simply copied from elsewhere as I used to be transferring issues round to get an concept of structure. Actual content material comes later.

Having a vertical record of choices is mostly best so far as menus go (particularly alphabetically-listed choices), however the issue right here is that, not less than all different issues equal, a tall-style window finally ends up limiting the quantity of horizontal house accessible for command descriptions until they probably span quite a few strains, which doesn’t make for good studying.

One thing wider can be most popular, so let’s break up the choices into two columns…

The second mockup continued enhancing the structure on a number of fronts.

Unequal column size apart, this can typically look a bit higher insofar as giving us extra horizontal house for descriptions. Additionally right here I break up up the 2 grey textual content areas by straddling the choices, since protecting them aside appears to make sense given they’ve totally different functions, one static and one other dynamic.

Altogether it was wanting higher, however I didn’t actually just like the unequal quantity of house afforded to the choice rows, and determined to equalize that:

Additional refinements with a 3rd mockup.

On this structure the UI appears much less lopsided, which whereas not a necessity (both might work), I most popular this aesthetic, plus we even get somewhat further room for the extra textual content.

Now there’s no manner I’m doing my greatest work whereas streaming, definitely not alongside an unavoidable lack of focus attributable to chatting and whatnot, and streaming or not I have a tendency to sit down on issues like this (any sort of design work) for a bit after an preliminary move and revisit them for refinement anyway. Positive sufficient, later that afternoon after some hours away from it I took one other have a look at the interface and instantly had a brand new tackle it…

What began it was that I didn’t actually like the thought of this being a comparatively small floaty window out over the big map view. We don’t actually have these in Cogmind–windows are often both giant or related to another related object or UI factor, however on this case it’s a general-purpose function menu so doesn’t have a pure place within the interface to affiliate with.

I assumed it’d be higher to attempt to redesign it with a watch in direction of having it occupy extra space, and in that vein got here up with an aesthetic fairly totally different from what we had going earlier than, however very a lot consistent with different items of the UI which provide performance not fully in contrast to this one: Cogmind’s choices menu and instructions reference pages!

Fourth and last mockup, fairly totally different from the others however I prefer it!

The above mockup assumes that the window seems over the map and extends out to both aspect of it in each instructions. The button fashion already matched the choices menu (as does the assistance textual content), and now the header and border does as nicely.

Different enhancements within the last mockup:

• Some instructions had been renamed, ideally in order that their first letter matches the related key.
• We truly solely want one part of grey textual content, somewhat than two, as a result of we solely want the descriptions accessible particularly when the mouse is hovering over a button, in any other case it may well show the “default” message about Shift-Alt entry.
• The additional width permits for even longer descriptions with out newlines, the place as an alternative every description will probably be written to maintain it inside the size seen within the mockup above (too lengthy can also be unhealthy). This additionally permits the window structure to be extra constant since we don’t want to depart room for potential extra strains.

Right here is the ultimate implementation in motion:

A demo of Cogmind’s new Particular Instructions window, right here utilizing it to activate the map ruler overlay.

Discover how the particular instructions menu shouldn’t be vertically centered on the map. That is to depart some environmental context round Cogmind whereas it’s open, for reference. Not precisely a vital function, however there’s room so why not 😀

Throughout the polish part a number of automations had been added for comfort in terms of mode switching and have toggling. For instance, Spacebar will routinely deactivate an lively map ruler overlay since this can typically save time, significantly for mouse customers who in any other case must open the menu and click on on the button once more to toggle it off, and there’s seemingly no actual purpose one would want to maintain the ruler on and then additionally entry a second particular command on the identical time.

There are a number of Shift-Alt instructions not discovered within the menu, all three of which in all probability virtually nobody ever makes use of anyway, however additionally they require holding the important thing to take impact, so in all probability aren’t all that appropriate with this menu method anyway.

As for mouse entry to the menu itself, I thought of enabling that through center mouse button, however that already has a considerably extra necessary use (plus once more particular instructions aren’t that generally wanted…). Spacebar can also be large and comparatively straightforward to hit in these instances. I additionally thought of having a clickable button on the primary UI that might be used to open this interface for even higher discoverability, and utterly not needing the keyboard in any respect, however don’t actually need to go that far simply yet–it’s in all probability not all that wanted in comparison with the additional litter it could add for such low-use options.