In-game UI elements' readability and appearance: suggestions

[Toxile]

Before creating

• This is NOT a gameplay feature from Civ VI, BNW, or outside - see Roadmap
• This is NOT a gameplay feature from Vanilla Civ V or from G&K - If so, it should be a comment in Missing features from Civ V - G&K #4697

Problem Description

I'm going to be blunt and just say that I think a great deal of the UI design in this game still looks amateurish and quite bad. And I should clarify that I'm quite the hypocrite to say that, because I'm not even a design professional. However, complaining without any good-faith feedback is of no use, so my intent is to make this issue just that; a way to propose changes to the current UI.

Related Issue Links

No response

Desired Solution

I'm going to address two aspects of the current in-game HUD that I think are very harshly designed, then go over some general improvements that could be made across the unified UI.

Unit Info Box

My feedback condensed into a few bullet points would look like this:

The Good

• Good size, contrast, and blending of the border
• Good icons, except for the ranged attack one

The Bad

• No consistent top-level margin
• Large vestigial high-contrast nontext elements (divider, close button, arrows)
• Unit name text not vertically aligned with its icon
• Unit name text too small in relation to its icon
• Promotion icons too large in relation to importance
• Promotion icons too close together
• Stat icons not aligned amongst themselves
• Stat icons' text not vertically aligned therewith
• Stat icons' size not consistent
• Arranging stats horizontally uses up space without significant benefits to readability or appearance

The interface poorly conveys the most important information about a unit: its type (or name) and its stats. They are small in relation to the container they're in, they are displaced by less structural elements, their font scales poorly and has odd kerning, and while their contrast with the background is good, just about everything else in the vicinity also gets the maximum-contrast treatment, which confounds and distracts users more than it helps them. Lastly, the lack of proper and consistent margins immediately communicates a careless, haphazard design to encultured users.

Proposed Solution

To summarise the changes, I've removed the unnecessary clutter and compressed the core information just below the unit's name, visually linking the most relevant information in the container, and made the whole easier to digest by consolidating them together, aligning the text elements with their icons and amongst each other, changing the font (more on this later) and adding shadows. Whether one thinks my mockup looks any better than the original is a matter of preference, of course, but I would at least claim that it's easier to find the key information from and that it consumes a smaller amount of the limited screen space.

Tile Info Box

My feedback condensed into a few bullet points would look like this:

The Good

• Transparency is tasteful and well-defined
• Clear and well-designed icons, as usual

The Bad

• Display icons (to the left of the map) not distributed vertically
• Border pure white and not blended or rounded
• No separation between map and its neighbouring elements
• Text not vertically aligned with icons
• Terrain type not visually differentiated from other information despite being higher-level
• Tile yield presented as separate from other tile information

Despite actually being quite compact, this interface feels cluttered. It does not organise the information in a hierarchical manner as expected, but lays it out flat and makes the user do unnecessary work to find the key parts. The sharp pure-white border also just looks grim and not very idiomatic or stylistic.

Proposed Solution

I'll be the first to admit that my solution is far from satisfactory. After all, it breaks my own axiom about consistent margins (8 top-level, 2-against-3 in glass). I do believe, however, that it is an improvement. "Copper", "road", and "mine" and clearly additional, secondary information about the tile whereas "grassland", the terrain type, is the defining feature. It stands to reason, then, that the terrain and yield of the tile should be the most pronounced, and that they should all be arranged underneath the principal feature. Secondly, the piercing white border can simply be changed to a mellow tone that blends with the textured background. Lastly, the elements have been given some separation from the map; after all, they are not really parts of a whole, but are rather coincidentally arranged closely together to make space for the game itself.

Closing Remarks

Please change the font for this game. The current one clearly isn't meant to be used on a game interface, much less an information-heavy game with a lot of numbers and text. A truly sublime and excellent choice would be Inter, which is free and open-source, and specifically designed for interfaces where readability is crucial. It is an incredibly "clean" and "efficient" font, and quite similar to the one used in Sid Meier's Civilisation VI.

Whatever algorithm is used to align text with icons is currently disastrous. A small adjustment to it would go a disproportionately long way towards improving the visual clarity of the game as a whole.

The icons in this game are quite all right. There is one change, however, that I think would be significant: standardise the "dark" colour in them and change it from pure black (a very unnatural and strong contrast) to a dark charcoal-like colour. It will still appear "close enough" to black without causing the extreme eye-catching contrast that is currently reflected on, for example, the luxury icons with their pure black-on-gold colour scheme.

Alternative Approaches

See above; most of my suggestions are flexible and can be adapted into alternatives.

Additional Context

See above.

[yairm210]

Unit table

• No consistent top-level margin - Please elaborate?

• Large vestigial high-contrast nontext elements (divider, close button, arrows) - I'm not sure why you call the X and arrows "vestigal" - they're required for users, especially on Android, to navigate between units and to close the unit table. I personally hate the X so if you have an alternative I'm all ears.

• Unit name text not vertically aligned with its icon - This is actually extremely difficult due to the way the text is rendered
  . I'll need to learn more about font metadata for this

• Unit name text too small in relation to its icon - Done 👍🏿

• Promotion icons too large in relation to importance - Done 👍🏿

• Promotion icons too close together - Done 👍🏿

• Stat icons not aligned amongst themselves - Mostly done

• Stat icons' text not vertically aligned therewith - Done 👍🏿

• Stat icons' size not consistent - I couldn't tell what you were talking about, but with the stat icon changes, probably done? The ranged attack icon looks smaller because there's very little of it at the edges but it's actually the same size as the others

• Arranging stats horizontally uses up space without significant benefits to readability or appearance - Arranging stats horizontally saves vertical space, and tbh it's definitely more readable than your proposal. I initially couldn't read it because the numbers and icons closest together have nothing to do with each other

Result:

[yairm210]

Regarding the font, it's taken from your default device font. Because there are so many languages, I can't pack fonts for everything within the game - you can change this in Settings - Advanced - Font Family.

I will see if I can pack a font for the standard roman letters, since that's the majority of the playerbase 🤔

[yairm210]

Tile Info Box

• Display icons (to the left of the map) not distributed vertically - Taken literally this looks much worse:

So I think the correct course is to just space them out slightly: Original for comparison:

• Border pure white and not blended or rounded - I tried this in the past, it looked bad, tried it again now, still looks bad
• No separation between map and its neighbouring elements - Done 👍🏿
• Text not vertically aligned with icons - I assume you mean the stats, done 👍🏿
• Terrain type not visually differentiated from other information despite being higher-level - Disagree! It is no more important than the resource and improvement
• Tile yield presented as separate from other tile information - I have several options

Final:

[Toxile]

Wow, thanks for your detailed response!

No consistent top-level margin - Please elaborate?

The top-level "wrapper" container, which includes the entire box, doesn't impose any kind of consistent margin onto its children. The left side has too much white-space, the right and bottom sides have too little, but the top is fine. The right side in particular feels cramped, especially for units with short names that don't extend the container.

By picking one comfortable value and applying it for at least the outermost container, and to its children where applicable, the whole becomes more balanced and less cognitively taxing.

I'm not sure why you call the X and arrows "vestigal"

You've probably seen more people using the UI than I have, but I don't think I've ever deliberately used the arrows or the X. You can already close the unit menu by clicking or tapping on the selected unit again to de-select it, which is a common and well-understood design pattern; and I'm not sure why you would ever need to hide the info box without de-selecting the unit.

As for the arrows, the reason I don't use them is because the "Next unit" button, the ability to click on units on the map, and the "Overview" screen already provide enough navigation for the majority of the cases. Most of the time, you need the next relevant unit (accessed with the button) or to control nearby units in a specific order (accessed with the map) or to look for a specific unit or one you've forgotten about (accessed with the overview). Maybe some players do use the arrows a lot, though—I'd love to be proven wrong.

I think the divider should also go, but if you feel it's necessary, I think it should be visually demoted to a much less structural element. By, for example, shortening it, reducing its opacity (or just changing it to a mellow colour), and making it blend into the background to the left and right; maybe play around with thickness 1 instead of 2, too.

The ranged attack icon looks smaller because there's very little of it at the edges but it's actually the same size as the others

It might be that the icons' true sizes are the same, but if they don't visually align, that's still a problem IMO.

You must be playing on a larger screen than I am, because your icons look a lot sharper. Still, if one accounts for the contrast difference, the ranged attack icon visually appears to be up to 3 pixels smaller than the melee power icon, which sounds small, but really means a difference of up to 16% – especially noticeable on smaller screens like phones.

Because there are so many languages, I can't pack fonts for everything within the game - you can change this in Settings - Advanced - Font Family.

I'm not experienced enough to comment on how to improve fonts for languages like Chinese and Arabic, but Inter supports a lot of languages, so it'd give you a pretty good size-to-coverage ratio:

Otherwise, I think your changes are a step in the right direction. I still disagree with some things like the terrain type not being structurally important and the horizontal arrangement, but I won't force the issue.

[yairm210]

It's mostly the Japanese Chinese and Korean alphabets that are hard to pack in, because there are a gazillion characters

[yairm210]

The divider I can probably get rid of
Regarding the X button, I originally added it in because of players who couldn't figure out how to close the unit button, but I can poll this and see
The left and right are definitely in use, because "next unit" only goes forward, and if you want to go back it's very hard to find the exact unit if you have a lot of units

[yairm210]

I can probably replace the X with a button on the top-right that goes over the corner, which will free up that space 👍🏿

[Toxile]

Good work. I've come up with some other suggestions in the meantime, but they were easy enough to implement that I reckon I'll submit them as a pull request instead; less work for everyone involved.

[yairm210]

What do you think of this X button? I think it's much better than what we currently have

[Toxile]

Big fan. Will work well for mobile users, too. As far as I'm concerned, hit it 👍

[Toxile]

Do you reckon text outline and/or shadow would be possible? I don't enough enough about how Unciv renders text to say, but it's pretty much standard in games like this where the interface is full of information and has a lot of text on complex, noisy backgrounds. Civ 6 and Stellaris, for example, have them all over the place.

[yairm210]

We have our own ShadowedLabel for that, but it's not great

[yairm210]

I think I've done everything from the suggestions that's currently feasible, you can keep asking questions in this thread but if there are more suggestions let's open a new issue