Dev Diary: Advanced UI/UX
What's happening / TLDR: Developer diaries introduce details of Espiocracy - Cold War strategy game in which you play as an intelligence agency. You can catch up with the most important dev diary (The Vision) and find out more on Steam page.
Nested tooltips, iconic part of UI/UX of modern complex strategy games, were invented by a solo indie developer: by Jon Shafer for "At The Gates". It's no coincidence - innovation thrives in such environment. I often look at development of Espiocracy from this perspective, looking for unusual (perhaps even first in the world) implementations that not only make this game interesting but could even propagate further in the genre. This is a diary about a few such solutions that made it to the build. They are generally optional (can be turned on/off in the settings), rough around the edges, and will evolve following your feedback in the future.
[h2]Double Tooltip For Decisions[/h2]
Slightly extrapolating on Jon Shafer's idea, Espiocracy features nested tooltips for decision-making. When you hover over a button leading to a significant decision, you can get a comprehensive prediction of consequences, calculated for this particular decision, enumerating gains and costs (including opportunity costs and long-term effects!). The tooltip tries to highlight consequences that are not be obvious to people unfamiliar with the world of espionage - for instance, above you can see that establishing relations with Czechoslovakia will grant diplomatic immunity to Czechoslovak intelligence officers in our homeland.
[h2]Map HUD[/h2]
Moving the cursor over map generates standard tooltips like in any other map game:
However, you can change it in the settings to HUD (heads-up display) that follows your cursor:
It shows basic data, visualized with horizontal bars for quick comparisons, and a list of available decisions with associated shortcuts. It is an initial simple implementation that certainly could feature more inspirations from real world HUDs used in aircrafts and other vehicles.
[h2]Picture-in-picture[/h2]
Speaking of vehicles, prevalence of mirrors and cameras in vehicles suggests that we, humans, are well-adjusted for visual multitasking. Espiocracy allows such approach: you activate picture-in-picture of any selected part of the world (for instance an ongoing revolution in Indonesia, as seen above), so that you can play zoomed in far away without missing the action elsewhere on the map.
[h2]Off-Screen Visualization[/h2]
To expand further on not-missing-out part, there is also an option to activate off-screen visualization inspired by navigation software: glyphs at the edge of the screen which point to events that would otherwise never show up on your screen.
[h2]Declutter Mode[/h2]
As you could see on the previous screenshots, the interface of the game can get very busy. Borrowing an inspiration from aircraft HUDs, the game allows you to declutter the interface. All parameters except for critical ones are now hidden, number and density of elements on the map is drastically lowered, outliner or widgets are hidden unless manually opened. It also calms down notifications and popups, following EEMUA guideline of less than 1 interruption per 10 minutes under normal conditions, and less than 10 interruptions per 10 minutes during crisis situation (notifications exceeding the limit are queued up and can be acknowledged collectively). Apart from manual activation, this mode is also suggested for "relaxed" mode, new/casual players, and optionally you set auto-activation for overwhelming events (similarly to declutter mode auto-activating in an aircraft when it is sharply banking, likely due an emergency).
[h2]Drawing on the Map[/h2]
Simple & quick feature: you can grab a marker and draw directly on the map (and later erase it). So far, I found it useful for instance for marking countries of interest.
[h2]Trajectory of Parameters[/h2]
One more aircraft inspiration: optionally, you can activate an attitude-indicator-like (navball-like) background behind parameters. At a glance, it shows current value (horizon position) and future value (horizon rotation). Importantly, it is smoothly animated on change (and predicted change) of either, so that it captures your attention like an attitude indicator.
[h2]Two-Step "Intelligent" Validation[/h2]
Manuals about designing complex interfaces dedicate a lot of space to eliminating user-introduced mistakes. Here's one of such solutions that made it to the game: certain important decisions are checked against logical conditions, and if they look like a user-introduced mistake, the player is asked to confirm the decision with attached explanation.
[h2]History of Relevant Decisions[/h2]
When you select a country, an actor, or a unit (more kinds of entities in the future), you can inspect history of your own decisions with regards to this entity. It's a simple log that allows you to verify what and when you did or didn't, and convenient help when you return to an older save. There is also a global list of all decisions made by the player.
[h2]Ledger[/h2]
Now a standard feature for grand strategy games - a sheet comparing all countries in the world - but with a slight iteration, featuring also available actions (so you can launch a battery of decisions from this screen alone).
[h2]Low Intel Mode[/h2]
Espiocracy wouldn't be Espiocracy if you couldn't see the world from the confusing perspective of intelligence agencies denying each other access to real information. You can activate an optional mode in game rules - certainly only for hardcore players - which approximates how much realistically an intelligence director knew at the time. Depending on your intelligence community (huge difference between, say, Irish and British capabilities), many values will be hidden, approximated, or even have attached bias modifying real value. Majority of actors is unknown by default, unless you acquire relevant intelligence. Availability of decisions is generally unknown and so are costs associated with decisions. There is even a realistic delay of events, news, and feedback arriving to your screen - for instance, a resolution of Chinese civil war may become apparent a month after it happened. If it sounds frustrating, I must admit that it indeed is, and this mode is more of an optional curiosity.
[h2]Before Final Remarks: 2026[/h2]
The release date of Espiocracy is no longer planned for 2025. As we are working hard on delivering the best game possible, we are looking currently at 2026 as the potential release year.
[h2]Final Remarks[/h2]
The next dev diary will be posted on the first Friday of the next month: December 5th.
If you're not already wishlisting Espiocracy, consider doing it
https://store.steampowered.com/app/1670650/Espiocracy/
There is also a small community around Espiocracy:
---
"I fly because it releases my mind from the tyranny of petty things" - Antoine de Saint-Exupery
Nested tooltips, iconic part of UI/UX of modern complex strategy games, were invented by a solo indie developer: by Jon Shafer for "At The Gates". It's no coincidence - innovation thrives in such environment. I often look at development of Espiocracy from this perspective, looking for unusual (perhaps even first in the world) implementations that not only make this game interesting but could even propagate further in the genre. This is a diary about a few such solutions that made it to the build. They are generally optional (can be turned on/off in the settings), rough around the edges, and will evolve following your feedback in the future.
[h2]Double Tooltip For Decisions[/h2]
Slightly extrapolating on Jon Shafer's idea, Espiocracy features nested tooltips for decision-making. When you hover over a button leading to a significant decision, you can get a comprehensive prediction of consequences, calculated for this particular decision, enumerating gains and costs (including opportunity costs and long-term effects!). The tooltip tries to highlight consequences that are not be obvious to people unfamiliar with the world of espionage - for instance, above you can see that establishing relations with Czechoslovakia will grant diplomatic immunity to Czechoslovak intelligence officers in our homeland.
[h2]Map HUD[/h2]
Moving the cursor over map generates standard tooltips like in any other map game:
However, you can change it in the settings to HUD (heads-up display) that follows your cursor:
It shows basic data, visualized with horizontal bars for quick comparisons, and a list of available decisions with associated shortcuts. It is an initial simple implementation that certainly could feature more inspirations from real world HUDs used in aircrafts and other vehicles.
[h2]Picture-in-picture[/h2]
Speaking of vehicles, prevalence of mirrors and cameras in vehicles suggests that we, humans, are well-adjusted for visual multitasking. Espiocracy allows such approach: you activate picture-in-picture of any selected part of the world (for instance an ongoing revolution in Indonesia, as seen above), so that you can play zoomed in far away without missing the action elsewhere on the map.
[h2]Off-Screen Visualization[/h2]
To expand further on not-missing-out part, there is also an option to activate off-screen visualization inspired by navigation software: glyphs at the edge of the screen which point to events that would otherwise never show up on your screen.
[h2]Declutter Mode[/h2]
As you could see on the previous screenshots, the interface of the game can get very busy. Borrowing an inspiration from aircraft HUDs, the game allows you to declutter the interface. All parameters except for critical ones are now hidden, number and density of elements on the map is drastically lowered, outliner or widgets are hidden unless manually opened. It also calms down notifications and popups, following EEMUA guideline of less than 1 interruption per 10 minutes under normal conditions, and less than 10 interruptions per 10 minutes during crisis situation (notifications exceeding the limit are queued up and can be acknowledged collectively). Apart from manual activation, this mode is also suggested for "relaxed" mode, new/casual players, and optionally you set auto-activation for overwhelming events (similarly to declutter mode auto-activating in an aircraft when it is sharply banking, likely due an emergency).
[h2]Drawing on the Map[/h2]
Simple & quick feature: you can grab a marker and draw directly on the map (and later erase it). So far, I found it useful for instance for marking countries of interest.
[h2]Trajectory of Parameters[/h2]
One more aircraft inspiration: optionally, you can activate an attitude-indicator-like (navball-like) background behind parameters. At a glance, it shows current value (horizon position) and future value (horizon rotation). Importantly, it is smoothly animated on change (and predicted change) of either, so that it captures your attention like an attitude indicator.
[h2]Two-Step "Intelligent" Validation[/h2]
Manuals about designing complex interfaces dedicate a lot of space to eliminating user-introduced mistakes. Here's one of such solutions that made it to the game: certain important decisions are checked against logical conditions, and if they look like a user-introduced mistake, the player is asked to confirm the decision with attached explanation.
[h2]History of Relevant Decisions[/h2]
When you select a country, an actor, or a unit (more kinds of entities in the future), you can inspect history of your own decisions with regards to this entity. It's a simple log that allows you to verify what and when you did or didn't, and convenient help when you return to an older save. There is also a global list of all decisions made by the player.
[h2]Ledger[/h2]
Now a standard feature for grand strategy games - a sheet comparing all countries in the world - but with a slight iteration, featuring also available actions (so you can launch a battery of decisions from this screen alone).
[h2]Low Intel Mode[/h2]
Espiocracy wouldn't be Espiocracy if you couldn't see the world from the confusing perspective of intelligence agencies denying each other access to real information. You can activate an optional mode in game rules - certainly only for hardcore players - which approximates how much realistically an intelligence director knew at the time. Depending on your intelligence community (huge difference between, say, Irish and British capabilities), many values will be hidden, approximated, or even have attached bias modifying real value. Majority of actors is unknown by default, unless you acquire relevant intelligence. Availability of decisions is generally unknown and so are costs associated with decisions. There is even a realistic delay of events, news, and feedback arriving to your screen - for instance, a resolution of Chinese civil war may become apparent a month after it happened. If it sounds frustrating, I must admit that it indeed is, and this mode is more of an optional curiosity.
[h2]Before Final Remarks: 2026[/h2]
The release date of Espiocracy is no longer planned for 2025. As we are working hard on delivering the best game possible, we are looking currently at 2026 as the potential release year.
[h2]Final Remarks[/h2]
The next dev diary will be posted on the first Friday of the next month: December 5th.
If you're not already wishlisting Espiocracy, consider doing it
https://store.steampowered.com/app/1670650/Espiocracy/
There is also a small community around Espiocracy:
---
"I fly because it releases my mind from the tyranny of petty things" - Antoine de Saint-Exupery