This is an ongoing development series about CHAOTIC ERA, an upcoming interstellar strategy game set in a procedurally generated universe. Subscribe below to join our beta waitlist or follow us on Twitter for the latest updates.
This month, we spent a lot of time exploring the Navigation UI to address usability concerns that we had with the Focus Engine.
Our original "targeting" approach made sense initially, but it had several shortcomings.
Imprecision was one of our biggest concerns; the target would jump all over the screen while panning. When elements were too close to each other, it would reliably pick one over the other which made some elements literally impossible to access.
The algorithm that we used to find the "best focus" in a scene worked by anticipating what the player would want to select by picking a point in 3D space both nearest to the camera, but also nearest to the screen centre.
This made sense in theory, but it ended up being less explicit and intentional than desired. Especially when dealing with solar systems and star clusters where there were many bodies onscreen at once, placed randomly in orbit.
The other factor that made us explore a complete overhaul was the expanding requirements of the Navigation view. As soon as we began experimenting with selecting multiple units (eg. a source and destination when dispatching a ship) highlighted how inflexible the target was.
While this was an anticipated use case, it felt clumsy and unclear in practice. It was difficult to understand which planet you were selecting as a destination, or where it was relative to the ship's source.
After trying to rework the "targeting" approach, we decided to start fresh and head back to our roots. We went through our archives to find visual reference points for what a new type of Navigation UI could look like.
One of our main sources of inspiration was our love of 80s scifi; Classics like Alien and Blade Runner captured the exact aesthetic that we've had in mind for Chaotic Era. Minimalism, utilitarianism, brutalism. A vision of the future from the perspective of the past.
We've always wanted Chaotic Era to feel like a tool that someone would use to navigate through space sometime in the future, so we focused on using the interfaces of these films as inspiration, along with our favourites from other eras that had similar vibes. Here are some images that resonated with us, via INTERFACE LOVE.
The Lens
The remedy to the issues that we were facing turned out to be a single solution which solved multiple problems. It started by grouping elements in 3D space based on proximity (clustering):
10 or so elements onscreen at once.
50 or so elements onscreen at once.
This enabled new types of UI which could be designed around individual clusters, such as labelled lines extruding from elements for indicating trips, and vertical labels for alerts.
A new component emerged from this which addressed the imprecision problem, a type of vertical ribbon which, when dragged on, enabled individual elements in a cluster to be selected with high precision. While this component is still being ideated on, there's high confidence it's a far more resilient solution than what existed last month. And it's pretty fun to use.
The ribbon also acts as an additional surface for us to incorporate more interactions and shortcuts for the player. One option we're currently exploring is allowing players to zoom into a selected body by holding and swiping to the left.
Before you go:
1. Recommend or share this post if you want to see more stuff like this in the future. We're 100% self-funded, so seeing your feedback is what keeps us going.
2. Subscribe below to be the first to hear about our latest updates, including our upcoming private beta for CHAOTIC ERA.
3. Let's be friends! Follow us on Twitter.
2 comments
I like the look of the UI. The one thing I’ll allow myself to be nostalgic for the 80s. Everything else was an aesthetic nightmare.
I love what you’re doing, and the thought you’re putting into your efforts. I can’t wait to hear every detail!