Dev Diary: User Interface
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.
Today we're continuing our journey through the interface of Espiocracy. While the title of this diary is "User Interface", in practice it's just a continuation of the previous diary, since distinction between UX and UI is rather blurry.
[h2]Interface Hierarchy[/h2]
Grand strategy games are commonly known as "map games". The map, naturally, is central part of the interface of these games, including Espiocracy.
We already explored the map in a separate diary (DD#35). Numerous other diaries showcased various map modes and data layers. For instance, you can click on any country to immediately see its alignment with all the other countries in the world:
Here, we can embed the map in the wider context. From the perspective of the whole interface or even by observing the evolution of the genre in recent years, it can be deduced that maps in map games are usually superficially central (sometimes also situationally, eg. during a war - but this a Cold War game!). More often than not, the map is just a comforting central background. Like... the TV set for Al Bundy.
Paradoxically, this point of view does not make the map (or the TV set) any less important. Instead, it allows us to avoid mistakes that would actually make the map less important: less intelligible and less useful. In this game, the map has clear position in the interface hierarchy: the map -> widgets -> windows -> full-screen overlays.
Widgets on both sides of the screen feature summary interfaces (such as above), allow inspecting details (such as below)...
...and provide more advanced tools for exploring the world:
If an interaction requires more thought, it usually takes the form of a window:
And if it's a critical game-stopping interaction, it can take over full screen, as in this screenshot from DD#63:
[h2]Buttons and Icons[/h2]
Speaking of full screens, the simplest way to communicate the vibe of the game is usually its main menu. You can see all the characteristic "physical" buttons, panels, screws, and pins right away:
There are many sets of such buttons in various shapes, all the way to "pointy" radial menu:
In addition to precise tooltips for every button, majority of them have labels on the screen. Even square buttons, where there is place only for a small visual symbol, often display a side label that appears when player moves cursors towards them.
Symbols themselves are simple and flat, with game-wide color coding (eg. orange = actions, white = parameters, green = espionage assets; note that it's not yet implemented in full on the screenshots). The game has currently more than 500 distinct symbols and the list will certainly grow.
[h2]Visual History[/h2]
The Cold War was the era of photography. Pulitzer Prize has been extended to photographers in 1942, the White House created the office of official photographer in 1961, Kodak grew to 150 thousand employees in the 1980s. Everyday life and almost every historical event has been immortalized by cameras. Espiocracy draws from these rich historical sources directly. A few examples below (non-exhaustive list).
Every nation in the game has a set of historical photos showing ordinary life roughly around the current year in the game:
Events are accompanied by relevant historical photos and documents, which can be inspected on hover:
Operational steps are tied to frames from real training videos for intelligence and law enforcement officers (right-hand side of the screen):
[h2]Scaling[/h2]
The interface can manage all the most popular screen resolutions, from Steam Deck's 1280x800 all the way to 4K:
Widescreen works as well!
[h2]Audio[/h2]
Last and the least, audio layer of the game is so simple that it can be described by one paragraph in this diary. In addition to standard sounds effects that you can hear in any game, the game also features fully moddable radio with songs divided into stations that can be turned on/off. Playlists can be influenced by tags of songs defined in text files, such as "communist", "nuclear_war", or "YYYY" (year in the game, so that period-based music mods are possible).
[h2]Final Remarks[/h2]
The next dev diary will be posted on the first Friday of the next month: November 7th.
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:
---
"Colonel in charge invited the entire Berlin press corps to a briefing and tour of the tunnel and its facilities. As a result, the tunnel was undoubtedly the most highly publicized peacetime espionage enterprise in modern times prior to the U-2 incident" - CIA report on discovery of an eavesdropping tunnel between West and East Berlin. Journalists were allowed to take photographs inside the tunnel which were then caused sensation and were printed by the newspapers around the world
Today we're continuing our journey through the interface of Espiocracy. While the title of this diary is "User Interface", in practice it's just a continuation of the previous diary, since distinction between UX and UI is rather blurry.
[h2]Interface Hierarchy[/h2]
Grand strategy games are commonly known as "map games". The map, naturally, is central part of the interface of these games, including Espiocracy.
We already explored the map in a separate diary (DD#35). Numerous other diaries showcased various map modes and data layers. For instance, you can click on any country to immediately see its alignment with all the other countries in the world:
Here, we can embed the map in the wider context. From the perspective of the whole interface or even by observing the evolution of the genre in recent years, it can be deduced that maps in map games are usually superficially central (sometimes also situationally, eg. during a war - but this a Cold War game!). More often than not, the map is just a comforting central background. Like... the TV set for Al Bundy.
Paradoxically, this point of view does not make the map (or the TV set) any less important. Instead, it allows us to avoid mistakes that would actually make the map less important: less intelligible and less useful. In this game, the map has clear position in the interface hierarchy: the map -> widgets -> windows -> full-screen overlays.
Widgets on both sides of the screen feature summary interfaces (such as above), allow inspecting details (such as below)...
...and provide more advanced tools for exploring the world:
If an interaction requires more thought, it usually takes the form of a window:
And if it's a critical game-stopping interaction, it can take over full screen, as in this screenshot from DD#63:
[h2]Buttons and Icons[/h2]
Speaking of full screens, the simplest way to communicate the vibe of the game is usually its main menu. You can see all the characteristic "physical" buttons, panels, screws, and pins right away:
There are many sets of such buttons in various shapes, all the way to "pointy" radial menu:
In addition to precise tooltips for every button, majority of them have labels on the screen. Even square buttons, where there is place only for a small visual symbol, often display a side label that appears when player moves cursors towards them.
Symbols themselves are simple and flat, with game-wide color coding (eg. orange = actions, white = parameters, green = espionage assets; note that it's not yet implemented in full on the screenshots). The game has currently more than 500 distinct symbols and the list will certainly grow.
[h2]Visual History[/h2]
The Cold War was the era of photography. Pulitzer Prize has been extended to photographers in 1942, the White House created the office of official photographer in 1961, Kodak grew to 150 thousand employees in the 1980s. Everyday life and almost every historical event has been immortalized by cameras. Espiocracy draws from these rich historical sources directly. A few examples below (non-exhaustive list).
Every nation in the game has a set of historical photos showing ordinary life roughly around the current year in the game:
Events are accompanied by relevant historical photos and documents, which can be inspected on hover:
Operational steps are tied to frames from real training videos for intelligence and law enforcement officers (right-hand side of the screen):
[h2]Scaling[/h2]
The interface can manage all the most popular screen resolutions, from Steam Deck's 1280x800 all the way to 4K:
Widescreen works as well!
[h2]Audio[/h2]
Last and the least, audio layer of the game is so simple that it can be described by one paragraph in this diary. In addition to standard sounds effects that you can hear in any game, the game also features fully moddable radio with songs divided into stations that can be turned on/off. Playlists can be influenced by tags of songs defined in text files, such as "communist", "nuclear_war", or "YYYY" (year in the game, so that period-based music mods are possible).
[h2]Final Remarks[/h2]
The next dev diary will be posted on the first Friday of the next month: November 7th.
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:
---
"Colonel in charge invited the entire Berlin press corps to a briefing and tour of the tunnel and its facilities. As a result, the tunnel was undoubtedly the most highly publicized peacetime espionage enterprise in modern times prior to the U-2 incident" - CIA report on discovery of an eavesdropping tunnel between West and East Berlin. Journalists were allowed to take photographs inside the tunnel which were then caused sensation and were printed by the newspapers around the world