GUI Focus Group: Main Menu

[x4000]

Turns out that it is easiest for me to show you things in video form, so that I can just talk and point, and everyone has the exact same point of reference in terms of how the GUI functions.  Otherwise we may be thinking and talking about different ways that the GUI functions in different versions, or half of us might have seen still images while the other half actually opened the game... etc.

So here's the main menu.  The simplest of all possible screens, really.  It doesn't feel right to me.  There are elements I like, elements I don't.  Let 'er rip.

Take our quick poll and give us your feedback on the Main Menu!

https://goo.gl/forms/GyRlUhkzDZiYomUe2

[x4000]

Immediately I'm doing this:

* Main menu ship changes: the main wing of the ship no longer has giant glowing bits; the unity bloom has been removed; the amplify bloom has been toned down from 0.8 to 0.5 in intensity; the extreme chromatic aberration has been toned down a bit.

[BadgerBadger]

I think the "AIWar2" and "Arcen Games" text should be a bit larger. I'm glad you've toned down the glow from the previous wing.

I'm kinda tempted by a Main Game flow that feels like "When you open the game for the first time, you're prompted to enter your username. If you enter a username that hasn't played a Tutorial yet, you'll be prompted with a "Perhaps you'd like to begin by playing the tutorial." If you haven't done the tutorial yet, that
button will glow in some vigorous fashion.

Here's a sample proposed layout for the screen, provided mostly to get the discussion started. In my proposed layout the buttons would need to be pretty striking to stand out against the strong colours of the Ship

[Draco18s]

This is me right now on this one:



Ship was definitely too bright on the bloom, already fixed.
Version number...lower left instead maybe?
Layout seems fine I guess. Doesn't feel good, but I can't think of anything better.

[Kordy]

I'm just going to list some stuff that popped out to me on a mock-up.



1) The boxes. I'm liking the availability of everything immediate, but if you're going to go with asymmetric design, do more than gray boxes. Add shapes, break those shapes, basically anything other than an excel cell filled with color, I'd say.

2) Release notes are an immediate concern (and good on you for providing them easily), but having an easier access to your website (preferably a landing page with access to bug reports and general forums, ESPECIALLY in the beta) is preferable to me. Plus it can balance the asymmetry of the menu buttons.

3) Don't be afraid of a big title! The ship marking is a bit too subtle, and there's nothing wrong with reinforcing your game's name. People are going to use screenshots of your main menu, and nothing wrong with a big title drop in there. Unless, t's outshadowed by...

4) The BLOOOOOM. I play warframe as well and it's as bad as this'un. Unnecessary glow takes away from the focal point, in this case the lovely ship. By all means show us that the engines are powerful, but not with a glare that overpowers your game's name and your company logo. Front glow is even worse.

5) Adding more dynamism to the background in the form of missiles, lasers or other types of projectiles from a presumably enemy unit might give you more action without compromising the strength of the main menu. Adding a bit more to the flight loop animation (really shallow angle banks and whatnot) might also help, otherwise it's just a 2d object bobbing up and down.

And for the future, whenever you're in doubt of a visual design, I'd suggest squinting and looking at it. Here, have another mock-up. Ze bloom, it's killing everything! Apart from that, none of the buttons are popping out! I'll make yet another mock-up to show what I mean by popping up and asymmetry.

fake edit: okay, bloom is getting lowered, hooray!

real edit: here have the button mock-up:



Obviously a bad mock-up, but that's what I mean by breaking the shape a bit. Placing more emphasis with just added color is also a possibility for promoting the tutorial over other options. Or hell, just make it the biggest button in there on first-run.

Simple contours, text color, border color etc can add a lot more to boring bland clicky boxes. I'm going to suggest you guys to have the player pick a color upon account creation and use that color to add accents to text boxes.

[etheric42]

Great feedback!

1) The boxes. I'm liking the availability of everything immediate, but if you're going to go with asymmetric design, do more than gray boxes. Add shapes, break those shapes, basically anything other than an excel cell filled with color, I'd say.

Here's a sample proposed layout for the screen, provided mostly to get the discussion started. In my proposed layout the buttons would need to be pretty striking to stand out against the strong colours of the Ship

I've seen games with centered menus, side menus, top menus and bottom menus, so I think it is all fair.  When I see bottom menus I think the task bar from Windows and those rectangular boxes really match in with that experience.  Although I agree that I really like the non-nested layout of the menu, in order to solve the asymmetry, what about collapsing that left column into a single "Play game" button that you click and then the other buttons unfold from?  Is having everything on the same layer too much to sacrifice for that?  This would also open up room for other accordian buttons without sacrificing UI space if they can be grouped with an existing column.

I don't like that there is a "Join multiplayer" button but not a "Start multiplayer" one.  I understand that starting/loading a game is the same route whether you are single player or multiplayer, but not everyone is going to grok that right away and I will admit to hitting join multiplayer to see if that was where I was supposed to start multiplayer from.  I am not saying creating some redundant start/load multiplayer ones, but is there any text that can be put on the start/load game buttons to clarify they are for multiplayer too?

2) Release notes are an immediate concern (and good on you for providing them easily), but having an easier access to your website (preferably a landing page with access to bug reports and general forums, ESPECIALLY in the beta) is preferable to me. Plus it can balance the asymmetry of the menu buttons.

I love release notes, but I don't want to have to go to a browser to see them (I can, but if I'm running full screen with a different resolution than my desktop, the changing back-and-forth is really annoying).  If we don't want dev time spent on an internal browser/window for this, can it pop Steam overlay and browser?  How would this break things for people who run from the executable (or another storefront)?

I agree that there needs to be easy access to bug-reports from in-game, whether that is connecting an in-game window to the bugtracker (preferable) or linking to the bugtracker (easier on devs).  On release a link to a Steam review can be added as well.  If the button is just pointing to an Arcen website landing page, what would it be labeled to help people understand that this was for forums/bugtracker/release notes/etc?

3) Don't be afraid of a big title! The ship marking is a bit too subtle, and there's nothing wrong with reinforcing your game's name. People are going to use screenshots of your main menu, and nothing wrong with a big title drop in there. Unless, t's outshadowed by...

I like the AI War on the ship, but the II part isn't entirely clear it is denoting "2" as opposed to just being a logo/icon.  The Arcen games part is not too legible.  I also like it blown up like in your picture, but that looks like it should be removed from the ship if you do that.  Does there need to be something else in that spot if the logo is floating?  Maybe the player's username (not sure how feasible that is)?  Maybe move the company logo there?

5) Adding more dynamism to the background in the form of missiles, lasers or other types of projectiles from a presumably enemy unit might give you more action without compromising the strength of the main menu. Adding a bit more to the flight loop animation (really shallow angle banks and whatnot) might also help, otherwise it's just a 2d object bobbing up and down.

I know Chris was going to focus on adding dynamics to the ship later, but what if it was interactable in some way?  Maybe click and drag to rotate it and make it a piece people can play with, or if that is difficult just having some hotspots that play some animations?  Probably not something to spend too much dev time on, but if someone finds that fun some players engage if they have a tactile "object" to play with.

[FalseMyrmidon]

1.  I really dislike the amount of bloom.  I'm the kind of person that turns it off completely in most games because it feels like smearing a thing layer of vaseline on the monitor.  I'm of the opinion that in order to look good it needs to be used VERY sparingly.

2.  I don't like the 3 buttons stacked on the left side.  Having some of the buttons collapsed and then expanded when the parent is clicked could help.  However, I'd like to keep the button that players will be clicking 95% of the, Load Game (or even better a 'Continue Last Save' button) visible.

3.  I like the suggestion of having players being prompted to play the tutorial the first time they start the game.

4.  Accenting the buttons with a player choosable color is a nice idea.

5.  I think being able to report bugs from ingame would be not be a good use of time for a team this small unless it's VERY easy to implement.


FWIW one my most memorable main menus was from Heroes of Might and Magic 5: https://www.youtube.com/watch?v=74dW5js9XZs .  The menu is small, in the corner and each button goes to a new page to keep it small.  The action in the center is very memorable and sets the atmosphere for the game (even though the actual game plays nothing like that).


Edit: The game takes a while to load the main menu, it could use at least a splash screen to show that it's not frozen.  Also, the main menu only shows windowed for me whereas the rest of the game will do full screen.

[Kordy]

I love release notes, but I don't want to have to go to a browser to see them (I can, but if I'm running full screen with a different resolution than my desktop, the changing back-and-forth is really annoying).  If we don't want dev time spent on an internal browser/window for this, can it pop Steam overlay and browser?  How would this break things for people who run from the executable (or another storefront)?

I agree that there needs to be easy access to bug-reports from in-game, whether that is connecting an in-game window to the bugtracker (preferable) or linking to the bugtracker (easier on devs).  On release a link to a Steam review can be added as well.  If the button is just pointing to an Arcen website landing page, what would it be labeled to help people understand that this was for forums/bugtracker/release notes/etc?

Oooh yeah, good catch. I'm generally only using steam nowadays due to regional pricing but you're right about not everyone playing AI War on steam. I think the resolution difference shenanigans is going to be a necessary evil for nonsteam versions. For steam though, the ingame browser would be a better idea indeed.

I like the AI War on the ship, but the II part isn't entirely clear it is denoting "2" as opposed to just being a logo/icon.  The Arcen games part is not too legible.  I also like it blown up like in your picture, but that looks like it should be removed from the ship if you do that.  Does there need to be something else in that spot if the logo is floating?  Maybe the player's username (not sure how feasible that is)?  Maybe move the company logo there?

Agreed that a title drop would make the ship's text kinda obsolete. Maybe lore tidbits and an actual name for the ship, perhaps. Like, -=ARK01=- Fighter Escort or something?

I know Chris was going to focus on adding dynamics to the ship later, but what if it was interactable in some way?  Maybe click and drag to rotate it and make it a piece people can play with, or if that is difficult just having some hotspots that play some animations?  Probably not something to spend too much dev time on, but if someone finds that fun some players engage if they have a tactile "object" to play with.

I've spun ships in eve stations for too long to say no to that. Maybe post release though. Hell, I might even try modeling a few ships myself and add them there. Emphasis on 'Try' though

5.  I think being able to report bugs from ingame would be not be a good use of time for a team this small unless it's VERY easy to implement.

Reporting bugs from in-game isn't what I meant, but instead a button that pops up your Operating System web browser that goes to a web page that has links to the mantis bug tracker and other stuff like AI War 2 General Discussion etc.

[dfinlay]

My thoughts:

1) The logo on the ship is cool, but it is also a bit small and tilted. I realize that having the ship perfectly horizontal would probably not look dynamic enough, but the title being tilted definitely seems awkward somehow, and kind of under-emphasizes it (which is really bad since it is already under-emphasized by being small and not at the top of the screen). It's also not super clear that It's AI War II as opposed to AI War.

2) Patch notes are great, but games launching external browsers isn't. I'm not sure what the development-cost of having patch notes presentable within the game would be, but I do know that it always feels a bit hokey to me when patch notes load in an external browser.

3) I'd probably change "Start New Game" to "New Game". It's just as clear what it does, is more standard, and uses less words.

4) Making "New Game" and "Load Game" different colours so that they jump out more would probably be good.

5) You mentioned the "Tutorial" button being a bit out of the way, which is probably good, but it might be a good idea to have a popup box asking if you want to play the tutorial the first time you launch the game (with "Yes", "No" and "Ask me again next time" style options).

Edit:

6) It might be a good idea to have a quick start/advanced start distinction (in which case they need to be two different buttons here). Advanced start would be much as AIWC is, letting you generate maps, pick starting planets, and adjust a bajillion levers and settings, whereas quick start would have 3 or 4 settings and then propagate all of the game's settings with settings based on those and some randomization. For an example of how this could work, the settings you would have could be difficulty, galaxy size, game pace, number of players and something like advanced features (with none/low/medium/high/maximal, which controls things like how many minor factions, AI Plots and such are randomly turned on and which ones are allowed). One of the big things that made AIWC inaccessible was figuring out how to set up an enjoyable game and this streamlining would really help new players.

[BadgerBadger]

I must say I disagree with the desire to open game notes in the game itself. I much prefer things to open in my external browser. There's no reason to re-implement a web browser inside a game.

[Draco18s]

I must say I disagree with the desire to open game notes in the game itself. I much prefer things to open in my external browser. There's no reason to re-implement a web browser inside a game.

Agreed

[Taichikitty]

Can't play game on my Macbook Pro, so I am going entirely off the video.

1) I cannot easily read the Arcen Games logo.  Suggest more light ( spotlights? ), and maybe move it forward on the ship.  Having the text on the ship limits changing the ship models, since it takes more work to incorporate them on arbitrary models.

2) If you stay with the text-on-ship, you could incorporate the version number as the ship's designation number.  eg. "AWT .702", "AG 1.032"

3) I like the idea of using the title screen as a vanity space for ship models.  As simple as having a random model on each start, through changing the model for major updates, to unlocking models based on achievements.  There are some cool possibilities in this space.

4) You are priming the customer for a vertical eyeflow in the center of the screen.  I feel the most used buttons should also be part of that vertical flow.

5) Agree that "New Game" is distinctly better than "Start New Game"

6) You can spend a little or a lot of time "cooling up" the buttons in general.  Ideas:
   a) 50% alpha transparent background.  White text with black border such as used in high contrast text.
   b) Custom shader to give the button background an oily roil behind the text.
   c) Give the buttons good audio feedback when activated. 
   d) New Game, Load Game, and Quit seem to be the critical bunch.  Start Multiplayer would be next in prority; I would rather it be first class than have a 2nd choice after New Game.   The rest could probably be collapsed under a More... button.
   e) After an update, give a "until clicked" hilight / difference to the Release Notes button to inform the customer that there is new information there

7) Please post a new video showing the first batch of changes you feel are worth getting iterative feedback on.

Think about the purpose of the title screen and the expected time customers will spend on it.  Let that inform you as to how much work is worth being put into it.  Remember the 80/20 rule.  Better to spend time polishing the stuff inside the game that people will spend many hours interacting with, than the screen most will spend the least time looking at.

9) If you have story lore, or cinematics, then putting links to them under More... would be good.

[ilitarist]

Oh, late to the party. Ahem.

1) The idea with a ship in a middle and AI War printed on it. I have many problems with it. I suspect there will be many expansions - will they end up as separate ships? Will they be stuck in the corner as before? Even if we don't think about the future this looks a little amateur: people in the world itself probably don't call their ship AI War and you probably don't want to teach users to examine ships. Any user's first reaction would be to perceive the ship as background feature, that text feels almost like an Easter Egg. I think it would be much better as a traditional huge UI text.

There's another reason why I don't like the ship. Because even though it's pretty it may make you think you're playing Elite or Freelancer or any other spacesim. This game is about galaxy. The perfect image, I think, would be a demo of a culmination of some game with whole galaxy visible. Kinda like, say, N++ shows you demos of other people playing. (Random letsplay where you can see it in the beginning: https://www.youtube.com/watch?v=QOQtWNKLPCY) I can understand that doing this exact thing can be a huge feature on itself - it means either the ability to record games or processor-heavy simulation of some sorts. Still, I'm convinced that showing player something resembling the exact thing he's playing for - big strategic showdown - would be much better than showing him graphics he won't probably care about if he likes the game itself. If there should be some vanity let there be something like a panorama of a space battle with various types of ships arriving from different sides, this will give some sort of feeling of scale and ship properties.

2) How about separate button for Create/Host Multiplayer Game? I assume Start New Game lets you chose MP game. I think it'll be easier for player to see that MP is clearly separated and he wouldn't start it accidentally by checking some checkbox. Even if Host MP game leads to the same screen with checkbox ticked.

3) How about only showing build version when you go into the settings? Also it would be nice to have a date near the build. You hear there's new patch, you check the game and see that the date is recent, you don't have to remember 3 digit number.

4) I urge you to think about a font. A lot. I have a long-standing problem with Arcen games fonts. This one is different than before and to me it looks... even worse.

As I understand, font has three functions: style, readability, prettiness. This one certainly has style. It screams of old sci-fi shows pretending that in the future we will have lot of monochrome screens with fancy fonts. But it's not readable. Every letter is too wide, there are too much straight angles with little curves. And I suspect there's a lot of stuff to read at first and to quickly glance over later, so readability is much more important than style. It doesn't look good on modern screens, it looks sort of pixelated, not utilizing high DPI. I'd argue that simpler font, even if not as futuristic, would work better. Maybe something like Ubuntu font https://fonts.google.com/specimen/Ubuntu - probably not Ubuntu specifically because for many players it would feel too familiar, kinda like Arial or Segoe. Maybe Exo 2 https://fonts.google.com/specimen/Exo+2 would work; Dosis also looks fine: https://fonts.google.com/specimen/Dosis, and more widely used fonts like PT Sans or even Open Sans can be OK.

Menu and title labels can use even more stylized font - after all, you only see it for several seconds and you know what it says. Dhurjati looks like less ugly version of current font: https://fonts.google.com/specimen/Dhurjati

Hope that's helpful!

[etheric42]

4) You are priming the customer for a vertical eyeflow in the center of the screen.  I feel the most used buttons should also be part of that vertical flow.

Tachikitty, could you explain what you mean by that?  How is the player being primed for a vertical eyeflow?  What can be done to fix it if that is not what is desired?  Are you saying put buttons like "New game" in the middle of the row on the bottom instead of the corner?

4) I urge you to think about a font. A lot. I have a long-standing problem with Arcen games fonts. This one is different than before and to me it looks... even worse.

Oh, I like Exo 2.  Dosis also looks good, if a bit tall.  ilitarist, Would you recommend using one font for buttons and another for other text, or a unified font?

I must say I disagree with the desire to open game notes in the game itself. I much prefer things to open in my external browser. There's no reason to re-implement a web browser inside a game.

From the standpoint of someone who runs a two-monitor setup and usually runs a game fullscreen-windowed in one with chat/supporting documentaiton in another, I agree.  From the standpoint I was in previously with a single monitor and usually running indie games that often had terrible UI scaling for my 4k monitor (and therefore required a non-native resolution in-game) I hate having to alt-tab.  I agree that this is something that probably does not deserve much (if any) dev time at this point, but my understanding is if you want a larger audience to engage with a feature, don't make them leave your app to do so.  Subnautica's feedback feature was great (it even let you see responses in-app).  Book of Demon's browser-based survey feature worked because the survey was longer and it triggered when exiting the app.  (Surprised by this lately: anyone see Dawn of War 3's uninstall survey?  When you uninstall the game it pops your browser without asking and navigates to an exit survey page!)

1) The idea with a ship in a middle and AI War printed on it. I have many problems with it. I suspect there will be many expansions - will they end up as separate ships? Will they be stuck in the corner as before? Even if we don't think about the future this looks a little amateur: people in the world itself probably don't call their ship AI War and you probably don't want to teach users to examine ships. Any user's first reaction would be to perceive the ship as background feature, that text feels almost like an Easter Egg. I think it would be much better as a traditional huge UI text.

There's another reason why I don't like the ship. Because even though it's pretty it may make you think you're playing Elite or Freelancer or any other spacesim. This game is about galaxy. The perfect image, I think, would be a demo of a culmination of some game with whole galaxy visible. Kinda like, say, N++ shows you demos of other people playing. (Random letsplay where you can see it in the beginning: https://www.youtube.com/watch?v=QOQtWNKLPCY) I can understand that doing this exact thing can be a huge feature on itself - it means either the ability to record games or processor-heavy simulation of some sorts. Still, I'm convinced that showing player something resembling the exact thing he's playing for - big strategic showdown - would be much better than showing him graphics he won't probably care about if he likes the game itself. If there should be some vanity let there be something like a panorama of a space battle with various types of ships arriving from different sides, this will give some sort of feeling of scale and ship properties.

I think this is an important point.  Part of what the ship represents to me is this game's change to 3d/less icony graphics than the original.  But it does set a tone of "focus on a ship" and not "focus on a galaxy/war".  Recent games to compare with are Endless Space 2 which has a fleet of ships.  Galactic Civilizations 3 has a planet.  Stellaris has a planet and orbital space station with a couple of ships flying to it.  Any other examples?

(Oh, and I like having the date with the version number, but I if there is a date I like having it on the front screen, I don't want to have to go to the settings screen to find the last update date.)

So what buttons are we looking at here?

Play expands to (or is a column of):
New game (quick start / advanced start?)
Load game
Continue last save?
Multiplayer (how do we define the distinction between host new multiplayer game vs host loaded multiplayer game vs join multiplayer game?)

Tutorial

Settings

More expands to (or is a column of):
Patch notes
Bug report / suggestion? (or does this need visibility and be a top-layer item?)
Forum
Join mailing list (nobody's said this yet, but I like it when devs give me a way to stay connected to their important news)

Exit Game

Did I miss anyone's suggestions?

Should the Play button/column be reorganized into a Single Player and Multiplayer pair of buttons/columns, or maybe New Game and Load Game pair of columns?

[ilitarist]

I'd recommend a separate font for title text and regular ones. E.g. main menu, start game button and title of popup message all should have fancy stylized font. Everything else including tooltips and buttons for mundane stuff should be a regular font like Exo 2.

Abou title ship: Stellaris and GalCiv3 remind you they're about economy and politics with their screens. AI War is, well, about war, so that wouldn't work. But it's about war on a galactic scale so it should be reflected. Maybe a fleet would be ok. I still think something like a demo of a midgame would work perfectly as a background.