UI tidbits

[Haustvindr]

Ok, since the noise seems to be dying down a little, I guess I should get to work a little. Since I was hit with the pumping sim issue, I can only review the main menu, settings, and new campaign screens, along with the loading progress one.

I'm pretty sure most of these are already on your backlog, so I apologize beforehand.

Without further ado:

Loading screen

It's fine and dandy but... it doesn't really match the rest of the game. The fonts and progress bar style are just different to the rest of the UI. Moreover, the white text blends too easily in some backgrounds. Even the gray background from the progress bar blends into the backgrounds.

I think that it would be much better if you embrace the "retro" look in the loading screens, the same way you do in the rest of the interface. You could even use a similar scheme as console UIs handle progress bars, as it would fit perfectly fine with the current UI style.

I mean something like these (excuse my photoshopping):

Spoiler

Of course, I'm not really a graphic designer, even though I need to do some here and there in my line of work, so I'm sure you have people who can provide much better ideas and inspiration than my lousy ones, the important thing is the idea and not my mockups.

Message boxes unification

When resetting settings to default, the popup question uses a very different visual style. I think the design should be homogeneous, as it presents the user with similar designs for similar concepts (in this case, a question with 2 answers). You already have a perfectly fine, and more appealing, popup box in the exit warning. It should not be that wrong to use it in more places.

Spoiler

New campaign

There's a little misalignment in the "back" button when switching screens from "new campaign" to the campaign details. It doesn't look like much, but since the are effectively replaced by each other, it is noticeable.

Also, I don't think those ## serve any purpose. While I'm okay with visual elements for the sake of giving richness, in this case it looks ood due to the same thing as the misalignment: the screens are replaced by each other. When the replacement suddenly loses the ## and the bottom line goes up, it looks a little jarring. I think it would be better to left them also in the new campaign configuration, or to get rid of them in the new campaign screen.

Spoiler

The text fields are a little big, especially compared with other fields in the UI. I mean, I get the reason for them to be bigger, but I think it's a tad too much.

Spoiler

As for the color picker, the circle representing the color picked is not centered in the active pixel of the mouse pointer, which makes:

• a bad representation of the color picked, since the circle is shifted down and left, but the color is picked by the active pixel of the mouse
• when approaching the bottom and left, the circle just starts dissapearing, until it goes completely off the view

Spoiler

Settings

Even though the list/select component has the same height than other fields, it gives the feel that it is, indeed, not the same height. I'm not sure how to begin to fix something that is so much related on perception, but I guess centering the contents or giving a wider left margin would help a little. I don't know, this one has me a little puzzled.

Spoiler

When the list is open, there's some clipping in the options. This is not super important, though, it simply looks a little off.

Spoiler

The fields in the row have zero margin on the right, it is very noticeable when the row is highlighted. Also, in some of them a pixel is cut off!

Spoiler

I think that some of the sliders (not all), may benefit of setting the value manually. It may not be really important for the settings screens, but for parts configuration later on while playing!

Spoiler

In the controls menu, I think there is a big improvement if you color the fields as... the rest of the fields elsewhere. The white border makes too contrasty. Also, since the selected key is also outlined in white, it mixes unnecesarily. Moreover, even if it is a little far-fetched, once the player is accostumed to having editable fields in a particular UI representation, this change in this only screen may confuse them about what they can or cannot change.

Spoiler

There are some perceptual alignment issues here and there, due to the active/selected buttons not having a dark outline. This makes it look like the fields are not properly aligned, but in reality they are! You should consider darkening a bit the outmost outline of active/selected buttons.

Spoiler

Other tidbits

Scrollbars. The handler is waaaaaaay to thin. This is also something that I've seen in the slider fields, though in those you can actually click and drag wherever and the handler will stick to the mouse pointer. This is however something that people won't know, and will actively hunt the little handler.  Moreover, the language picker has a wider one!

Spoiler

Talking about scroll, the boxes that have scroll advance too fast. One tick on the scroll wheel equals one page, no matter what you have configured in your OS. I think those boxes should either respect the OS settings, or just tone a little down the scroll speed. I'm pretty sure that many people missed half of the campaign flags, and left wondering why there are only half of those in KSP1 (spoiler: they are there!).

Spoiler

I'm sure you already know, but these pixel-wide UI highlights get translated very poorly when you set the game in other resolution different than native. I don't think there's an universal solution for this, it's just how the algorithms for image scaling works. There is a way out however: making sure everyone can use their native resolution, which is... much easier said than done.

Spoiler

Last one, and this is a proper suggestion: to use your very own vessels in the main menu! I don't mean to replace the default ones, but to complement them with some randomly picked vessels from the user saves. To greatly limit the sample data, you could just pick those that are between this and that height, or weight, or number of parts. Then, when you launch the game this time you get to see a default ship, and the next time, you may find yourself looking at the menu and wondering why that one ship looks so familiar!

Edited March 4, 2023 by Haustvindr

[Sea_Kerman]

Additionally, the parts manager has really thick margins above and below each entry, making it take up way more vertical space than it needs to. 
 could probably be squashed to 

[Haustvindr]

You though I was done, BUT IT WAS ME, D...

Ok, enough fooling aroung, here comes part 2:

Margins boogaloOoOoO

There are quite a number of UI elements with inconsistent margins. If you can homogeneize them it should help a lot with perceived consistency. Making them homogeneus != making them all the same, but making them consistent. Some images are much better than a few words, so there you go:

Spoiler

 

Edited March 5, 2023 by Haustvindr

[sumeee]

On 3/4/2023 at 10:44 PM, Sea_Kerman said:

Additionally, the parts manager has really thick margins above and below each entry, making it take up way more vertical space than it needs to. 
 could probably be squashed to 

I do agree, it looks like the UI was made for touch and it's not the case for this game.

[Lorion]

Awesome post and a very comprehensive complement to my thread with similar issues regarding the flight UI. I can second all of this.

Regarding the color manager in the VAB: I think the fields with the selected colors take up way too much space. They are about twice as high as the color fields in the agency color picker.

[Rpatto92]

If I were on their UI team I would fear you. This pixel peeping is on point. 

[zeekzeek22]

+1 great post. no notes.