So I realize Adam has been focused on gameplay and the visuals are being updated over time like with the 1.1 update to the shipsets and a few other things. I think the gameplay is pretty spot on with the core concepts so kudos there for that. However, one area I feel is sorely needing an update is the interface. By way of background, I'm a product designer who's been stuck in his house for far too long due to the pandemic and decided to write something up for fun as a exercise. Maybe it'll have something useful for ISG, maybe it won't. Thought on the interface: Consistency The interface is inconsistent in presentation and occasionally function. Some elements have an inner glow applied rather heavily while others are much more subtle or none at all. Personally I don't think the glow is adding anything to the interface and is distracting from the content by reducing contrast making some content not as readable. See how the overview panel looks vs the end turn button. The end turn button looks much cleaner and crisper. Angles used on various elements aren't consistent or are oddly shaped. Case in point, the leaders button on the governor panel within the planet screen. Also see the finished construction tooltip. Consistent angles used on these elements would make the interface feel more unified. Iconography is also rather hit or miss. Some icons are nice and clean while others are quite bad. Icons should be consistent. Pick one style and stick with it. In the interest of being less busy, flat icons are probably better, especially if you use color sparingly for important icons or stats like with the orange, green, and yellow for production, planetary engineering, and infrastructure. Reducing the number of icons, especially if there are really similar ones such as with gravity will help with consistency. In this case, colors would be more readable and identifiable using a single icon than having multiple very similar icons to represent the levels. This makes it easier to parse at a glance and reduces the likelihood of mistaking the gravity levels. Below are some examples of the different icon styles. Hierarchy The interface lacks good visual hierarchy in most places. Everything is given equal visual weight either due to the size of an element or the density of the information. Some elements overlap others awkwardly. Information Density The interface packs too much information into the screen with too little whitespace to allow the eye to parse the data. Case in point, planet overview cards have a lot of functionality too tightly packed. Add more padding around icons, some of them are actually outside of their containers like on the planet view. You can get away with too dense information with a single card, but it gets pretty hard once there's several planet cards. On the planet view card, give it more horizontal space. While the planet cityscape is cool, it's not really giving much critical information and giving that sidebar a bit more real estate to breathe isn't going to take away from the view. Typography The interface relies too much on all caps in tooltips and parentheticals which makes it hard to read larger groups of text. It also relies too munch on a single typeface that should have a display type for thematic text like headers and a more readable font for body copy or small text. Why is this a parenthetical when it has it's own frame? It doesn't make sense and just makes the screen busier These are only representative examples and by no means cover every portion of the interface. I haven't played a really long time, but these are few things that I've noticed. If you think any of this has merit, I might put together some examples of what I'd consider a better ui experience.
Hi Vaaish, thanks for your comments on the UI, and welcome to the forums! It was a useful exercise, thanks for your time. Thanks also for the gameplay praise. Developing good gameplay is very hard but I've come to realize over the time of developing my first game that developing a good UI is equally hard, especially for a very complex game like this. The UI received several iterations, and believe me you'd not want to see the first ones Or perhaps you'd like for academic reasons. In fact, it took us an enormous amount of time and effort for the UI to reach where it is now. A small indie dev team can only have so many skills and talents, so we're always learning how to do a better job everyday. That's why our company is called Praxis: "The art and passion of making games through practice and learning." Let's go through your examples. It's the eternal style over readability issue. I tend to favor the latter a lot, but I concede that you also need some visual flair for the UI to be more attractive. When I can I tend to favor crisp, solid and 100% readable UI text and iconography, but I realize that may not be interesting from a style point of view. It's a balance, and our UI artists did the best they could. We can always improve readability further where we can, so I'll keep this in mind going forward. The different shapes and angles are remnants of those several UI iterations and style revamps. Once upon a time we had only straight angles, then we switched to a more angled shaped approach. In the end we settled for something in between. The UI is enormous, so I'm sure we left some pieces with different angles here and there. My hope is that this is not too noticeable and distracting to the untrained eye Criticism accepted. It's absurd the number of icons a game like this ends up requiring. I had no idea how many icons there were in a game like this, and I was playing them for a long time. And, good icons are very expensive, so an indie studio just starting up needs to cut corners somewhere. That said, I'm pleased with the end result. Could they be better? Perhaps. Granted, not all icons use the same style. Ideally, they should. However, we also think that some icon shapes and colors result better in certain situations, depending also on the size of the icon and the function involved. So, in the end this is what we ended up with. I think the icons fulfill their purpose well enough, however I concede they could be better harmonized. Believe me it was always our wish to try and harmonize the icons better at some point, but that point was never reached, more and more icons were needed, and in the end that's what you got. Icon improvement is an ongoing activity, and some of those icons will actually be improved with time, at least the ones we found to be more critical. We did our best, and I'm pleased where we ended up with respect to the hierarchy of screens and panels. Considering the fact we support almost all of the plethora of monitor resolutions and aspect rations in the market out there is something I'm actually very proud of. Supporting all these types of monitors comes with a cost, especially in a tiny team like ours, so it's natural that in some places compromises had to be done to allow all resolutions to work equally well, or at least good enough. That said, the example you give could use improvement. In fact, the unique abilities icons you see there on top of the grey panel were more to the top once, but due to a player suggestion we brought them below a bit, and now you can see the result It's tough. The colony screen and the colonies overview panel are two good examples where information is perhaps too densely packed, I agree with you. I think we could perhaps enlarge a bit more both examples horizontally, as you suggest, and these key information areas readability would improve substantially. The all caps criticism is fair. It started as just a couple words here and there, but in some tooltips it ended up taking whole sentences, which of course isn't ideal to read. That was not our intention but it's one of those things that start as something and then end up with issues and at that point it's hard to solve the issue without taking a significant amount of effort. So, the all caps sentences here and there is probably something we'll have to accept to live with. Hehe, the excess of parentheticals is probably my fault No, in that example we probably don't need it. Do you know why the parentheticals are there? Because... yes, in the earlier iterations there was no subpanel for the (YellowStar). Then the subpanel was added but the parentheticals remained. It's tough This was a fair critique and exercise, thanks for that, I appreciate it. As for you providing more examples where the UI could be improved, feel free to do that if you wish and if it's fun for you. I'm afraid it's too late in the development process to make any substantial changes to the UI, but tweaks and small improvements can surely be done, or at least considered.
Hey Adam, Thanks, and I would be interested to see the first iteration of the UI. Just for context I'll reply to the rest later, but I'm curious, what typeface are you using in the UI?
Here's a few shots from the Pre-Alpha days just for fun. And these aren't the "bad" ones, as those are even from earlier versions I don't have handy right now. Mostly CarbonPlus and Expressway.
That's pretty rough. Especially that tech screen So as a designer, why does it have to be either/or? You have enough screen real estate here that I think size and space could help you maintain the style without sacrificing readability. I'll put together and example later. That's unfortunate. I'd recommend adjusting some of the more egregious examples of this such as with the leader button or the arrow in the bottom corner of the planet info box on the system view or the shape of that construction complete box (though that has more issues). I understand completely. I did a UI overhaul mod for Star Ruler 2 and at first I was just like, I'll do a few icons here or there.... then they didn't match so I did more.... and more... and before you know it there's 50+ icons. To be fair, there's also a ton of icon packs out there you can get access to that would easily handle most of the UI needs freeing up resources to do the ones specific to IS:G. I might be convinced to do something if modding comes availble or as a pro bono side project to keep me busy if you're interested. Support for screen resolutions is a nightmare and quite an accomplishment to be sure. Some of the hierarchy issues stem from visual weight or font size, and some are overlap issues like with the abilities icons and system bar or the fleets panel partly overlapping the turn button, or the new turn overlay interacting badly with the overview panel. Most of these are solvable by minor shifts or tinted overlays to better contrast. Actually, most of the UI issues are in a large part solvable with increased used of whitespace. lol. Just stop it already...you can free up and declutter a lot of the interface if you kill those. I'll throw up something for the topbar as an exercise. Just simple increased spacing and cleanup to give a better example of how visually small tweaks can make a lot of difference.
I had a bit of time tonight to put something together. The first is the original UI, just a screeshot. The second is a redesigned UI keeping the same style but cleaned up a bit. I'm not trying to reinvent the wheel for this just make it more unified with more space and a few other tweaks. I don't have the typeface you're using so I pulled a free one that was fairly similar. Updated UI:
Thanks for the exercise. I hope you don't mind some critique In general, I liked your suggestions a lot. Starting in the top left, I like the increased space between the text in the panels, makes it more readable, however I feel it takes too much space, and I'm not sure it would fit the 5:4 aspect ration resolutions. Seems unnecessarily big. I do like the sharper font and the panel looks sharper in general. Although it may look good from a design point of view, I would not put the unique abilities at the left corner, but that's a minor point. I like what you did on the bottom-left by making that layers subpanel crisper and with better contrast. On the bottom-right, the end turn button, your example also looks crisper. On the top-right, the game systems buttons, I like your idea to invert the contrast in the icons. And, you also got rid of the connector bar between the buttons which is probably not needed. It also looks crisper. However, our UI artist thought it didn't feel as good to offer disconnected buttons there because it didn't feel right when comparing with the panel on the top-left in the overall scheme of things. We didn't have the connector-bar between the buttons before though, that was added very late. All in all I like your exercise. So, this indicates we could use some improvement in those 4 UI corners of the galaxy map which is what a player will see most of the time in the game. Thanks a lot for this, this was a nice surprise. We may actually use some of your suggestions!
Not at all, so long as you don't mind me defending the choices. Thanks for taking the time to think this though! I think that the space is needed here because the total length of the income, research, and cultures lines is variable. The space gives it more room to fit crazy numbers. Size on that copy is 25pt which is large, but only so large as to create a hierarchy to draw the eye in to the most important info. I see your point with 5:4 resolutions and a lot depends on if you do any scaling for that or if this gets dropped in 1:1. There's definitely some tweaks I can make here to the spacing but overall there's not a lot of difference in the amount of space blank here vs the original. It's just placed differently. I placed these on the top left because they don't get used super often compared to the other info and didn't warrant the visual weight they were given in the middle of the screen. They felt right as an anchor for the stat bar but I'm not married to that location. Is there a reason you dislike them in the upper left? I have to disagree with your UI artist. Adding the bar is one way to make that more uniform but you'd need to drop the circle shape from the icons and put them spaced more like the top left bar. Adding that background along with the icons shape just made the whole region visually busy. Another way to fix this is what I did here. First, the inversion is so that the eye sees the actual icon and not the white around it. Second we've placed the icon within a circle frame that matches the rest of the UI style with the colored stroke and gradient inside. Even though the shape doesn't match it still ties into the rest of the elements. But wait... there's more! I did get a tentative layout for the overview cards worked up earlier. I say tentative because there's still some things I can probably adjust and the whole piece is quite complex with all the info being shown. Colonized: Uncolonized:
I prefer that they standout where they are, not strictly part of the empire info panel on the top-left, which contains the game's resources aspects. The colonies and planets solution you present looks good, with more space between things, it's definitely a good alternative, visually speaking. However, I'm afraid it comes with a big cost, as too little instances can be presented in one go without using the scroll bar. In the current solution 7 colonies can be presented at once, and in this solution only 5. And, the gravity and richness info is missing in the colony list. On the planets list, the current solution can show 7-8, while in this solution it can only show 6 at once. That's the main reason why we went with a more "cramped" version. It's a lot of info to show, and I'm afraid we need it all there.
I can understand keeping the resources separate, but If I can push a bit more into that, what's the goal of making them so prominent? Why there and not another location? They seem like something that's a secondary interaction rather than something you'd want to constantly reference. I'm curious how you've landed on needing to see 7 colonies and 8 colonies? That seems like an arbitrary number. In my experience you aren't going to need to reference that many at one time. You gain more information but at the expense of being able to easily access that information. Not necessarily a better route for a UI. Case in point, the research screen has extremely dense information but it's really hard to parse and your focus isn't really on a large portion of the screen. What's the use case for needing to see those two extra colonies? I agree that there needs to be a useful number shown but how is that number determined? I pulled it off because I'm not certain it gives useful information on a colony you own here since the rest of the info is more abut management but I wasn't 100% certain so I was looking at another layout to include it.
Not everything has a rational explanation, or an easy one at least, as a designer yourself you'll probably agree with me. Certain things are put in certain places organically, and what you see is the result of many, many iterations and player feedback. The unique abilities are an important aspect on how you play and I feel they must standout, so where they are is a good spot for me, not part of the empire resources panel nor in the game systems, so that's a good spot for them to land. There's no magic number. The more instances you can see at once the better. So you can have a better picture over your empire. I even think 7 is too few, but I must live with that. I'm aware of the trade-offs involved. That said, I'm sure some fine-tuning on the fonts, backgrounds, and colors can improve the UI in many aspects substantially, time allows (including some of the examples you provided). At this stage of the project, whatever is to be changed in the UI, if at all, must be kept in the places they are now, in principle. In other words, the locations and the number of objects are basically locked at this point, and only tweaks to the existing objects and their positions can be done. I assure you there was a reason for every piece of information to be where it is. As for the looks, sure, I admit the UI could be improved but not the information it shows and where. As for the research screen, I understand it's a bit dense, and we actually have an open task to spread out things a bit more to make it look better. However, it's important to me to show as much information as I can there and require the minimum of scroll bar and wondering around, as this is a game where the player needs to think and carefully consider things, and seeing the big picture in the research screen is important. One requirement is that all techs branches are shown, and as many techs in the branch as possible. As I said above, every bit of information in the UI at the moment is there because it needs to be, as a result of the design and many, many iterations with a lot of player feedback. In some cases, some of that information was actually added as a result of player feedback, which I considered and agreed, of course. As I said in a post above, I'm afraid it's too late in the development process to make any substantial changes to the UI, and revamping the UI is certainly not one of our goals at the moment, nor a priority. We actually already had quite a few of those already. That said, tweaks and small improvements can and should probably be done as time allows, or at least considered. You've shown that the UI could use some work on the fonts, colors and contrasts. Even minor size changes here and there could be made. However, structural changes, hiding and showing information or showing information in different locations is not something we're looking forward to do at this point, especially because every proposal and change would have a considerable impact in both analysis and implementation work. Anyway, thanks again for you time, and if you have any other suggestions where fonts, colors, contrasts or icons could be improved with little perceived effort, if you're bored and you want to help us out, then please feel free to do so, or send me a private message if you prefer.
No worries, I just like to understand more about things. Can't make good suggestions if you don't understand the why first. Even though this is just an exercise for myself, knowing constraints and needs makes it a more useful exercise than just me trying to make something look good for dribbble. I'll ping you later.
One more for the road taking into account your feedback. Some font size tweaks, moved the special abilities back to the middle but anchored them more as part of the UI. Adjusted the colonized planet card to include the gravity and richness values. Adjusted the uncolonized planet card to be smaller. was able to gain enough space to get an extra card on there for each which puts them at one less than current which I think is a good tradeoff for the added readability. I did want to go one more with an overlay for the fleets but it's been a fun exercise. Thanks for the feedback.
