[h2]UI[/h2]
Hello again, everyone! Time to talk about what's most likely the hottest topic Sweet Transit has - a UI rework! Quite a few of the community's in-game frustrations and problems have come around because the UI is not doing its job as well as it could.
We understood this early on and we decided to wait for further feedback to see how to better approach things. Some parts were fixed and some were tweaked to work better. But it was clear that pure iteration won't solve all the issues and that's why talks about a UI redesign started last year.
Working with a good publisher means that if there are problems, I'm not alone and can rely on them. Around October I told Rosie, my excellent producer, that the best way Team17 could help me is by redesigning the UI. And the people at Team17 delivered with help from Clockwork Monkey Studios! My only job then was to nod and occasionally complain more about what doesn't work, until the redesign for the main parts of the UI was finished!
[h3]Clockwork Monkey Studios[/h3]
Let's start by looking through Kevin from Clockwork Monkey Studios eyes at how this redesign was achieved.
What was your first impressions of Sweet Transit UI?Kevin: "From our first play-through we could see that this was a very complex UI, supporting an incredibly deep range of options and controls. This is obviously exactly as it should be for a game like Sweet Transit! It was great to see how much players could customize and dig into every fine detail. At the same time this did feel somewhat overwhelming as new players, and so addressing this initial learning curve, without compromising the rich functionality, became one of our main focuses."
How did you approach fixing the already existing UI's?"In many ways, re-working an existing UI is easier than starting from scratch! We have a working game to play, with fully functional features, so can make decisions based on how things actually feel in practice.
The existing UI style already did a great job of capturing the game's theme and tone, and so style-wise we only had to make minor changes, such as increasing contrast, refining the palette and removing unnecessary details. Our main focus was therefore on reworking the layout to better support the existing functionality.
After analyzing everything in detail, we reconfigured the content and placement of almost every UI panel, aiming to make the core functionality easier to engage with, without compromising things for experienced players."
Where and how would you recommend developers who are struggling with their UI invest their time?"It's easy to underestimate how much work is required to make a good UI! It's good practice to spend as much time as possible wireframing high-level layout and flow (even just sketching things roughly on paper!) before jumping into the fine details and intricate design problems. This will ensure you focus on considering the most important information first, and get the fundamental questions answered before investing time in work you might end up throwing away.
In terms of UX, it's also a good idea to follow genre conventions as much as possible. Take inspiration from similar games that inspire you, try to find common functionality across multiple games, follow these trends where possible. You want players to intuitively know how to engage with your UI without a steep learning curve.
Finally, try to watch people actually using the UI, as often as possible - it's amazing how often the super-obvious button you designed seems invisible to everyone! Nothing beats a fresh user-test, even if it's just family and friends :)"
[h3]Context[/h3]
And with that being said, some of the improved UI is already in-game (in a WIP state). It takes a lot of time to rewrite how part of the UI works and looks. I didn't write any visual preview for my UI framework; everything is decided in code. This allows for much more dynamic elements with a very low-performance overhead. New context UI decides how it looks based on available space and what is selected. Here are some variations as an example.
[h3]Quality of Life[/h3]
With the new UI, I have an opportunity to implement long-awaited quality-of-life features. Some things like disabling settlement production facilities, automatic UI scaling based on screen size and content, name regeneration, custom alerts, in-game notepad, scroll bars remembering where they were last time and many other smaller features. All systems are being created to be more modular than before for easier and faster iteration in the future.
[h3]Build UI[/h3]
The biggest offender in gaming history (at least how it looks when reading some reviews and comments) is the Build UI. The first iteration wasn't as good as I would have liked, but now I know how to better approach UI problem-solving after seeing how Clockwork Monkey Studios approaches these problems. It is already much faster and easier to navigate through build options. In the future, I will add a grouping system that will improve build items navigation even more.
[h3]Build Tooltip[/h3]
Build tooltips are always right there in the player's face. Players have provided feeback about it obstructing their screen too much. And to add more salt to the wound, hotkeys are often overlooked and there is a hotkey to hide this UI. To fix this, the new design will always show just the most important information. If the cursor stays still for some time then the full tooltip pops up, pulling the player's gaze to the hotkeys. You can still hide this UI, but hopefully, it will not be in the way anymore.
[h3]Small Screens[/h3]
The old UI was not using the screen efficiently and it was very visible with 1080p or smaller displays. In the future, the minimal usable screen size will be 1280x800. This introduces a new set of problems for a UI heavy game as Sweet Transit. But with the new design and some automatic UI scaling/rearranging it seems like an achievable goal. Here is an early preview of what that looks like.
As you can see there is still a lot of work to be done, such as building icons, tooltips and other parts of the UI. However, now is the best time to leave us some feedback in Discord! You can join our Discord community
here.
Just a note to say that all UI will not be reworked in one update. Even once the rework is finished, it will be continously worked on and improved until full release, as this is a very iterative process. Next time I will share more of the new UI and how tutorial rework is progressing. Until then!
- Ernestas
