Not a member yet? Why not Sign up today
Create an account  

  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Proposition Mock for the Build Menu

Years ago I designed a mockup for an improved UI. I had already written the post, even, but it seems that I forgot to actually post it. My apologies for the severe and unnecessary delay. Thankfully, I found it again in my SCREENSHOTS folder.

This is in reponse to Nick's post here. I've decided to overhaul the build menu since much can be gained there: It's used very (if not most) frequently, new players tend to get stuck using it and its design is arguably the least optimized from a user experience (UX) perspective.

[Image: DknMbOu.jpg]

Major changes:
 - Full screen Build Menu changed to a less invasive Build Bar, which appears when the E key is pressed in Build Mode, causing the mouse to appear and the camera to lock its position. Alternatively it could be visible at all times during build mode, and controlled with the keyboard's arrow keys, with the the vertical bar collapsing upon mouse movement - or both as a setting in the  Options menu.
 - Categorical hierarchy with visual structure (vertical vs horizontal, and tabs) added for accessibility and high scaling potential for new content.
 - Changed Prefabs, Subobjects and New Vehicle into buttons leading to respective pop-up submenus, in order to distinguish them clearly from static single block categories as found in the build bar.
 - Paint bar changed to vertical to accommodate the horizontal build bar. Reversing them is also an option: Paint bar below, build bar on the left. Convention is important however, as ease of use is in part determined by familiarity, so having the build bar below is likely the best option.

Minor changes/features:
 - Categories slightly changed. "Power" will hold anything directly related to the production and storage of power for example, including multiple engine types. More tabs can be added easily by sizing down the tab icons, or adding a second row. More optimized categorization however is preferable.
 - Tooltip clarity improved, created a format with less wasted space and added implied information categories (the white lines): Description (top), general attributes (row of 4 cells), attributes in relation to specific function (in this case, shooting - cell on the bottom-left) and niche general information which less frequently needs to be accessed (cell on the bottom-right).

 - A third "layer" of block categories can be implemented by allowing the vertical bar buttons to also house an additional horizontal bar. This should be avoided if possible; it would increase the number of actions required to reach those blocks. More important than number of actions required, however, is clarity - proper categorization by function is paramount, to allow intuitive browsing.
 - The question marks on tabs lead directly to Help pages, which I suggest should also contain buttons to the step-by-step build tutorials. Once realized, the Help button could be removed from the Pause Menu as well, to optimize further.
 - I've added the build bar aesthetics because I wanted to experiment with using in-game content as the UI itself. Wood texture has been a staple in game UI designs for generations, an obvious choice. However, the modern trend is simplicity, elegance and (often literal) transparency, which takes far more work - I might go there if there's enough interest.
 - Got tired of photoshopping block images, hence there are only three.
 - As far as I can tell, the FtD color scheme and the one in my mock are not yet optimized for the visually impaired (which I'm not, by the way). Roughly 10% of all males suffer from color blindness, the most common visual impairment. This should be considered in the final design.

Side-note: There is another great opportunity for optimization, namely the three map menus (Map, Tactical Control, Strategic Control) and Friendly AI Control - these can be merged into a single "Map" menu, with functions arranged along the screen edges like in most games. Considering the theme of FtD, a ship captain's map table would be a nice backdrop if desired, for that nautical vibe. Heck, it could even be a block - the Captain's Desk.

Bearing in mind that actually implementing this takes far more effort than photoshopping and writing a thorough post, we might end up with a menu screen that looks like this:

[Image: TcJ4GiV.jpg]

Other forum dwellers, discuss. I might do a more visual/complete version, or I could give other menus a try, depending on results.

For further reading on UI design from a UX perspective, consult this guide. It captures the do's and dont's quite clearly, which will hopefully improve the quality of discussion here (if any). Unlike in the field of Graphic Design, there is right and wrong in the field of UX, though I'm no expert.

Messages In This Thread
Proposition Mock for the Build Menu - by Gessie - 2018-08-15, 09:36 PM

Forum Jump:

Users browsing this thread:
1 Guest(s)