There was recently a thread on the 4X subreddit where someone asked for good examples of UI in 4X games. I spent a lot of time thinking about and responding to this post, even though the question was posed 10 days before my answer (the subreddit is slow-ish). Because I think the knowledge is generally useful, I wanted to excavate my response here, and also recommend that anyone looking to do 4X game UI (or UI in general) check out the thread!
I’ve been working on Cantata for a long time and have been thinking a lot about the question of what constitutes “good 4X UI”. I gathered a ton of images from different games, and put them in a public moodboard you can check out here:
One thing I learned from playing a lot of these games is that… 4X UI is generally bad. It’s often information dense, yes, but has almost zero sense of information hierarchy or really information design. It’s hard to tell what’s a button. It’s hard to tell how much a single button will open (Paradox games are particularly bad here, with small buttons opening up giant sub-menus that you didn’t know existed under that button). You only learn the UI by interacting with all of it and trying to figure out what each number means by mousing over it and hopefully getting some info.
My biggest learning is that, largely, the 4X community will grin and bear it if the game is good, but that doesn’t mean you should give up! However, 4X UI is HARD. I’ve redesigned my UI 3-4 times now and each time I do it feels like I’m programming an additional game in and of itself.
After looking at all these UIs though, I think my emergent favorite is Unity of Command 2 (not 4X, I know), or Total War: Three Kingdoms (4X adjacent). I also really like what Crusader Kings 3’s UI looks like, though I obv haven’t played it.
For Cantata, I ultimately ended up doing with a very minimalist UI that tries to be REALLY smart about what I’m showing/not-showing. It’s not skeuomorphic or overtly abstract, which I feel like would take away the focus on the pixel art. I’ll have a new devlog video up soon where I walk through it all, and I’ll be sure to post here (check my post history for some past iterations).
As a final note, I’ve tried to enforce a few things in Cantata that I think are applicable here:
I disagree with parts of this, and largely think that, especially in strategy/4X games, people are unable to separate their knowledge of a game’s systems with how “good” they think the UI is (aka I think a non-strategy player would have no idea what they are looking at when they look at Into the Breach), but the point of designing for legibility still tracks. Surface your most important info, don’t accidentally bury it. This is also another Paradox problem - it’s really hard to see at any moment what’s actually “important”.
Also just to bring up some points from users below that I definitely agree with:
Have your design responsively scale to the user’s screen resolution and viewport size. (This is hard to do if you don’t plan for it from the start as well. REALLY learn your system’s UI system and make heavy use of proper pivot points, layout groups, etc.)
Concatenate/abbreviate/round data and numbers where viable.
When dealing with detail views of a series of entities, e.g. viewing planets or cities one at a time, allow the player to cycle forward and backwards through the list without having to exit the details view (This was a big point of feedback from players even in the earliest alpha stages.)
Have the minimum relevant info presented and hide most stuff just one click down, makes a huge difference.
However I would argue that having a super high level of UI is not a priority. The more glaring issues I often find is lack of hotkeys and lack of accessible information in tooltips or info screens. (Tooltips are HUGE! Have a plan for implementing them and do it from day 1. I use attributes to procedurally generate mine.)
Thanks for reading!