• We have updated our Community Code of Conduct. Please read through the new rules for the forum that are an integral part of Paradox Interactive’s User Agreement.

Victoria 3 - Dev Diary #29 - User Experience

16_9.jpg

Hello, my name is Henrik and I am a UX Designer on PDS. I have been a part of the Victoria 3 team for almost the entirety of the project, and since I am about to take a few months of parental leave I wanted to leave you with a brief summary and overview of the thoughts and ideas that form the foundation of the User Experience (UX) design in our game. Also, say hello to Aron whom I have written this dev diary in cooperation with. Aron has been my UX padawan for the past year and will be shouldering the UX while I am gone.

First and foremost, why do we do what we do? Basically, our end goal is to make the game more approachable and accessible, so that we can make it even deeper and more complex. Complexity should not come from not knowing where to find something and why something happened, but from the deep simulation and game mechanics at the core of our game. The more accessible the information and interactions can be, the more complex we can make that information and those interactions.

In order to get there, we have three UX Pillars

  1. The right information at the right time
  2. Clear feedback about cause and effect
  3. Clearly separate Actions from Information

What tools do we have at our disposal to provide a user experience that satisfies these lofty goals? In this Dev Diary we will walk you through some of our main tools and approaches.

Nested tooltip, as made famous by Crusader Kings 3​

There is one piece of technology we can not see this game without: Nested Tooltips. We use it both for Game Concepts, and for getting more detailed breakdowns of numbers, and boy do we have numbers! This allows us to achieve parts of the first UX Pillar, The Right information at the right time. Instead of having to explain every single detail and anecdote in a single humongous tooltip, we can focus on the most essential and important information for the current context and leave any information that might not be directly tied to this context for the nested tooltips to cover. This is crucial in Victoria 3 where every single thing affects a whole bunch of other things, some very important and others simply knock on effects.

DD29 01 concept v2.png


DD29 02 numbers v2.png


Of course Nested Tooltips come with their own set of challenges. This is where we are happy to allow for a lot of customization and tweaking. For example, how do you want the tooltip to lock? Mouse Tendency, Timer Lock, or Action Lock? If you choose the Timer Lock, how long do you want that timer to be? Etc.

DD29 03 menu tooltip.png

Another thing we show in these tooltips is the next thing on the agenda and what y’all been waiting for - graphs!

Data visualization​

One of the more challenging areas is to clearly give feedback of a value’s change over time. In a game with as many interlocking systems as Victoria, giving feedback on how something has changed over time becomes an essential part of the game-loop. How can we take several values and show you exactly how it has changed over time? You guessed it, line graphs.

DD29 04 Graph.png


We would never make a Victoria game without the proper amount of graphs and charts! (Yes, you can switch to show pie charts for the Victoria 2 purists.)

DD29 05 area chart.png


DD29 06 pie chart.png

Numbers that update in real time and Predictions​

In most cases in our previous games, you have to tick the game in order to see the effects of things. In Victoria, we try to make all the immediate effects of your actions available the second you take them. When taking actions that have consequences spreading far and wide throughout the game's systems, it can be really hard to parse if this is a good idea or not without excessive use of spreadsheet software. So we predict things for you. (With a nested tooltip breakdown of that prediction value of course!)

The Building panel provides you with all the raw building data you could ever need, for you to analyze however you like. For whatever action you may desire, we provide our warmest support in your calculating endeavors with predictions such as the Weekly Balance when changing Production Method and predicted Earnings of the building if you were to expand it.
DD29 07 Building details.png


DD29 08 Production Methods tooltip.png


DD29 09 coal mine.png

Focus on the Map​

Our map is gorgeous and we want to put more emphasis on it. For example, all Events in the game have a location on the Map, and if you hover over a State name in any text, that State will be highlighted on the Map. This makes it easier to connect the names of things with their representation on the map, giving context to the text and the map. However, one of the coolest contextual information we are creating are Map Modes. We have Map Modes connected to most of our information panels, triggering when you open each panel which gives you the right contextual information at the right time. With the use of icons, numbers, and different heatmaps, we enable you to see several layers of contextual information at the same time without things getting too cluttered and without you having to scroll through a big sheet of data. Albeit, all Map Modes also exist in list form, making it possible to sort the information that is shown on the map, not entirely unlike a visual Ledger.

DD29 10 Fabric goods heatmap.png

The Lenses​

Every action you can take on the map, you can take from the five Lenses. Production Lens, Political Lens, Diplomatic Lens, Military Lens, and Trade Lens - each Lens comes with its own Map Mode! Basically, it is like viewing your country from a specific point of view.

DD29 11 Diplo attitude v2.png


DD29 12 Iron Mines v2.png

Right-Click menus​

The Map Interactions in the Lenses are our take on the Macro Builder, that is when you know what action you want to take and then you select what type of entity to perform that action on. On the other side of the coin, we use Right-Click menus for when you know what entity you want to perform an action on and then select an action from a list of potential actions. We have this for States, Markets, Characters, Buildings, Interest Groups and Goods. So any time you see any of those in the game, you can right-click on them to get a list of actions you can perform.

DD29 13 Right-Click.png

Empty States​

Often forgotten, but extremely important. This is the feedback of dead ends, such as looking at the Urban Buildings tab of a State with no Urban Buildings. A useful empty state will let the player know what’s happening, why it’s happening, and what to do about it. In a State with no Urban Buildings we should of course tell this to the player, but also include the potential Urban Buildings which the player can build in that State. This is only one of many examples and you’d be surprised how often this simple yet important UX design aspect is forgotten. The empty state tells the player what that screen could be populated with and what the player can do about it.

DD29 14 No urban.png

Should you get an economics degree before you play V3?​

Far be it from us to ever discourage anyone from getting an economics degree! Yet, despite Victoria 3's immense depth and complexity, our intention is still to allow you to learn even the most advanced concepts the game is based on as you play. One aspect of this is the tutorial, which we are putting more focus onto than ever before and will cover in detail in a future Dev Diary. Another aspect is through tooltippable Game Concepts, which work much like an integrated dictionary or rule book. Whenever you see such a Concept in text, such as Pops, Dividends Taxes, or Market Price, you can tooltip it to get an explanation of what it means and references to related concepts and mechanics. This powerful tool together with the Nested Tooltips allows us to design and explain anything in the game without writing a novel in each tooltip, and as a player, you can choose to deep dive into any peculiarities as you see fit.

DD29 15 pop tooltip.png

Accessibility features​

Last but not least, we can not talk about UX without mentioning Accessibility and boy are we happy to have something never before seen in any PDS game - Colorblindness mode for text! We have it on our roadmap to make this feature work with more things in the game as well. We have also worked hard to get to a point where the UI scaling should work even better out of the box than previous releases.

Default mode, Tritanopia mode, and Protanopia/Deuteranopia mode
DD29 16 Colorblind 1.png

That’s all for the first dev diary of 2022 folks. What an exciting year we have in front of us with so many tooltips to design and improve on! We’ll be back next week where Kenneth, our 2D Art Lead, will guide you through a closer look at the UI design of Victoria 3. See you then!
 

Attachments

  • 16_9.jpg
    16_9.jpg
    978 KB · Views: 0
  • DD29 01 concept v2.png
    DD29 01 concept v2.png
    1,1 MB · Views: 0
  • DD29 02 numbers v2.png
    DD29 02 numbers v2.png
    382,8 KB · Views: 0
  • DD29 03 menu tooltip.png
    DD29 03 menu tooltip.png
    146,7 KB · Views: 0
  • DD29 04 Graph.png
    DD29 04 Graph.png
    128,6 KB · Views: 0
  • DD29 05 area chart.png
    DD29 05 area chart.png
    234,7 KB · Views: 0
  • DD29 06 pie chart.png
    DD29 06 pie chart.png
    310,2 KB · Views: 0
  • DD29 07 Building details.png
    DD29 07 Building details.png
    898,2 KB · Views: 0
  • DD29 08 Production Methods tooltip.png
    DD29 08 Production Methods tooltip.png
    652,7 KB · Views: 0
  • DD29 09 coal mine.png
    DD29 09 coal mine.png
    408,7 KB · Views: 0
  • DD29 10 Fabric goods heatmap.png
    DD29 10 Fabric goods heatmap.png
    1,4 MB · Views: 0
  • DD29 11 Diplo attitude v2.png
    DD29 11 Diplo attitude v2.png
    1,6 MB · Views: 0
  • DD29 12 Iron Mines v2.png
    DD29 12 Iron Mines v2.png
    1,6 MB · Views: 0
  • DD29 13 Right-Click.png
    DD29 13 Right-Click.png
    1,1 MB · Views: 0
  • DD29 14 No urban.png
    DD29 14 No urban.png
    970,3 KB · Views: 0
  • DD29 15 pop tooltip.png
    DD29 15 pop tooltip.png
    501,3 KB · Views: 0
  • DD29 16 Colorblind 1.png
    DD29 16 Colorblind 1.png
    1,2 MB · Views: 0
  • 201Like
  • 106Love
  • 13
  • 9
  • 2
  • 1Haha
Reactions:
Claiming treemaps can't be sorted when we have examples of standard sorted treemaps literally in the dev diary doesn't really help your argument. Neither does using a deliberately unsorted treemap.
I even put it in the bold font that (clearly) sorting means deciding not to show the decision tree positions of the groups; the one thing that treemaps are supposed to do additionally to displaying sizes of those populations. And if you decide that your treemap should not work as a tree visualization... why do you even choose a treemap?
 
I agree that old school message settings were clunky and tedious to interact with because of the amount of things to configure. But it is still better than not being able to configure anything at all.

I'd rather dig through an overwhelming amount of settings once and then play the game the way I want for the many many hours after, than deal with an excessive amount of undesired notifications and the stress of not having my game paused when I want to forever. Not to mention that for most people, the process usually was that they got a notification and decided either a) that they no longer want it to pause the game, b) no longer be notified at all, or c) want it to pause the game in the future and then made the appropriate change for the event right then and there. The number of options doesn't even matter in that case.

There are many ways in which the way these settings work in EU4 work could be improved, and I am happy to discuss them. But to do that they first need to come back. Just taking them away and declaring victory does not solve anything.
I agree, and I would like to point out that the old message settings do have some features to make them less overwhelming: you can filter by category, and you can search by name. But it's still kind of overwhelming because the categorized lists are still quite big, and it's not always clear what you should search for. One way to improve that (which I also mentioned on the message settings thread once) could be to divide the categories into subcategories for each individual game mechanic. So the military category would have subcategories for battles, occupation, naval missions etc., the diplomacy category would have diplomatic plays, alliances, subjects etc.
 
  • 7
  • 3Like
Reactions:
Hello, my name is Henrik and I am a UX Designer on PDS. I have been a part of the Victoria 3 team for almost the entirety of the project, and since I am about to take a few months of parental leave I wanted to leave you with a brief summary and overview of the thoughts and ideas that form the foundation of the User Experience (UX) design in our game. Also, say hello to Aron whom I have written this dev diary in cooperation with. Aron has been my UX padawan for the past year and will be shouldering the UX while I am gone.

First and foremost, why do we do what we do? Basically, our end goal is to make the game more approachable and accessible, so that we can make it even deeper and more complex. Complexity should not come from not knowing where to find something and why something happened, but from the deep simulation and game mechanics at the core of our game. The more accessible the information and interactions can be, the more complex we can make that information and those interactions.

In order to get there, we have three UX Pillars

  1. The right information at the right time
  2. Clear feedback about cause and effect
  3. Clearly separate Actions from Information

What tools do we have at our disposal to provide a user experience that satisfies these lofty goals? In this Dev Diary we will walk you through some of our main tools and approaches.

Nested tooltip, as made famous by Crusader Kings 3​

There is one piece of technology we can not see this game without: Nested Tooltips. We use it both for Game Concepts, and for getting more detailed breakdowns of numbers, and boy do we have numbers! This allows us to achieve parts of the first UX Pillar, The Right information at the right time. Instead of having to explain every single detail and anecdote in a single humongous tooltip, we can focus on the most essential and important information for the current context and leave any information that might not be directly tied to this context for the nested tooltips to cover. This is crucial in Victoria 3 where every single thing affects a whole bunch of other things, some very important and others simply knock on effects.

View attachment 793421

View attachment 793423

Of course Nested Tooltips come with their own set of challenges. This is where we are happy to allow for a lot of customization and tweaking. For example, how do you want the tooltip to lock? Mouse Tendency, Timer Lock, or Action Lock? If you choose the Timer Lock, how long do you want that timer to be? Etc.

View attachment 793424
Another thing we show in these tooltips is the next thing on the agenda and what y’all been waiting for - graphs!

Data visualization​

One of the more challenging areas is to clearly give feedback of a value’s change over time. In a game with as many interlocking systems as Victoria, giving feedback on how something has changed over time becomes an essential part of the game-loop. How can we take several values and show you exactly how it has changed over time? You guessed it, line graphs.

View attachment 793425

We would never make a Victoria game without the proper amount of graphs and charts! (Yes, you can switch to show pie charts for the Victoria 2 purists.)

View attachment 793428

View attachment 793429

Numbers that update in real time and Predictions​

In most cases in our previous games, you have to tick the game in order to see the effects of things. In Victoria, we try to make all the immediate effects of your actions available the second you take them. When taking actions that have consequences spreading far and wide throughout the game's systems, it can be really hard to parse if this is a good idea or not without excessive use of spreadsheet software. So we predict things for you. (With a nested tooltip breakdown of that prediction value of course!)

The Building panel provides you with all the raw building data you could ever need, for you to analyze however you like. For whatever action you may desire, we provide our warmest support in your calculating endeavors with predictions such as the Weekly Balance when changing Production Method and predicted Earnings of the building if you were to expand it.
View attachment 793430

View attachment 793431

View attachment 793432

Focus on the Map​

Our map is gorgeous and we want to put more emphasis on it. For example, all Events in the game have a location on the Map, and if you hover over a State name in any text, that State will be highlighted on the Map. This makes it easier to connect the names of things with their representation on the map, giving context to the text and the map. However, one of the coolest contextual information we are creating are Map Modes. We have Map Modes connected to most of our information panels, triggering when you open each panel which gives you the right contextual information at the right time. With the use of icons, numbers, and different heatmaps, we enable you to see several layers of contextual information at the same time without things getting too cluttered and without you having to scroll through a big sheet of data. Albeit, all Map Modes also exist in list form, making it possible to sort the information that is shown on the map, not entirely unlike a visual Ledger.


The Lenses​

Every action you can take on the map, you can take from the five Lenses. Production Lens, Political Lens, Diplomatic Lens, Military Lens, and Trade Lens - each Lens comes with its own Map Mode! Basically, it is like viewing your country from a specific point of view.

Right-Click menus​

The Map Interactions in the Lenses are our take on the Macro Builder, that is when you know what action you want to take and then you select what type of entity to perform that action on. On the other side of the coin, we use Right-Click menus for when you know what entity you want to perform an action on and then select an action from a list of potential actions. We have this for States, Markets, Characters, Buildings, Interest Groups and Goods. So any time you see any of those in the game, you can right-click on them to get a list of actions you can perform.


Empty States​

Often forgotten, but extremely important. This is the feedback of dead ends, such as looking at the Urban Buildings tab of a State with no Urban Buildings. A useful empty state will let the player know what’s happening, why it’s happening, and what to do about it. In a State with no Urban Buildings we should of course tell this to the player, but also include the potential Urban Buildings which the player can build in that State. This is only one of many examples and you’d be surprised how often this simple yet important UX design aspect is forgotten. The empty state tells the player what that screen could be populated with and what the player can do about it.

Should you get an economics degree before you play V3?​

Far be it from us to ever discourage anyone from getting an economics degree! Yet, despite Victoria 3's immense depth and complexity, our intention is still to allow you to learn even the most advanced concepts the game is based on as you play. One aspect of this is the tutorial, which we are putting more focus onto than ever before and will cover in detail in a future Dev Diary. Another aspect is through tooltippable Game Concepts, which work much like an integrated dictionary or rule book. Whenever you see such a Concept in text, such as Pops, Dividends Taxes, or Market Price, you can tooltip it to get an explanation of what it means and references to related concepts and mechanics. This powerful tool together with the Nested Tooltips allows us to design and explain anything in the game without writing a novel in each tooltip, and as a player, you can choose to deep dive into any peculiarities as you see fit.

Accessibility features​

Last but not least, we can not talk about UX without mentioning Accessibility and boy are we happy to have something never before seen in any PDS game - Colorblindness mode for text! We have it on our roadmap to make this feature work with more things in the game as well. We have also worked hard to get to a point where the UI scaling should work even better out of the box than previous releases.

Default mode, Tritanopia mode, and Protanopia/Deuteranopia mode
View attachment 793440
That’s all for the first dev diary of 2022 folks. What an exciting year we have in front of us with so many tooltips to design and improve on! We’ll be back next week where Kenneth, our 2D Art Lead, will guide you through a closer look at the UI design of Victoria 3. See you then!
Glad the focus on a good tutorial remains. I think Vic2 was the PDS title with the tutorial that most made me feel actually ready to play the game (compare to: my first twenty “games” of EU4 which consisted of me just staring slackjawed at the UI; actual entire hoi4 campaigns before I realized that manpower matters)
 
  • 2Like
Reactions:
The map is hideous, and looks like playdough.
It's over thirty years since I last touched playdough, but I am entirely comfortable in saying that your description of the Vicky 3 map's appearance is objectively wrong.
 
  • 14Haha
  • 7
Reactions:
It's over thirty years since I last touched playdough, but I am entirely comfortable in saying that your description of the Vicky 3 map's appearance is objectively wrong.
Vic3's map actually looks quite nice. We definitely need more screenshots of the different map modes (lenses). I wish the watercolors had more saturated colors, it seems washed out. Maybe that is on purpose.
 
  • 4Like
Reactions:
Tinkering with tree maps I have found a nice example of how they can be used to give more information that a single pie chart.

We are playing a MP campaign in I:R and we have a formula to calculate each player power and we display it in a pie chart at the end of each session, for example this is the pie chart of last session:

1642325455342.png

Using a tree map you can display the same information but also use it to group nations by alliances and show it all together in a single graph:

1642325512185.png

I am sure Devs can use categories to improve the use of tree maps in VIC3 instead of being only an alternative for Pie charts.
 
  • 1Like
Reactions:
Using a tree map you can display the same information but also use it to group nations by alliances and show it all together in a single graph:

It's possible to do this with pie charts as well - using groups of colours for different alliance groups :) I think it's a good idea for both sets of charts (which again, we're getting both of, so there's no need to worry if one or the other is our particular preference - spare a thought for the scatterplot fans :) ).
 
  • 1
  • 1Like
  • 1
Reactions:
It's possible to do this with pie charts as well - using groups of colours for different alliance groups :) I think it's a good idea for both sets of charts (which again, we're getting both of, so there's no need to worry if one or the other is our particular preference - spare a thought for the scatterplot fans :) ).
In a deterministic world like PDX games there is less room for scatterplots but we may find a good use for them, good point.
 
Either way, be they squares or circles, it's hard to use area perception to identify which is larger between a group with 36% and a group with 39%, relative to comparing linear position. Of course you can order and label by size, but that's rather proving the point that the chart itself is doing little work in communications. At which point it's an aesthetic judgement.
 
  • 5Like
  • 2
Reactions:
In a deterministic world like PDX games there is less room for scatterplots but we may find a good use for them, good point.

I was actually having a joke with the scatterplots, but you're not wrong :) (a scatterplot could be helpful for things where there's a high number of observations, like looking at states, for example, but I wasn't being serious at all). I should have been more obscure, and said something like "spare a thought for the 3D pyramid-chart enthusiasts" :) ).
 
  • 1Haha
Reactions:
The lenses and right-click context menus sound good. Seems exactly like the kind of UX that would pull my friends who had trouble getting into paradox games before over the fence, and at the same time also very convenient for vets.


If they're not removing the "Most productive" line for unique buildings, then I'm definitely going to ignite a new era of crusades by modding an even more productive "Vatican City 2" in Mecca to spite the pope
Imagine Muslims of the world gathering in Italy while Catholics take the Titanic 3 to Mecca, truly a better world.
 
  • 1Haha
Reactions:
Why, oh why do you (Paradox) keep insisting on makiung your UI so frustrating to read?

Pop text.png

The contrast of the text compared to the background here is awful. Why do you keep doing this in your modern games? If you don't want players to read the text, don't have it there in the first place. I have spent large parts of my days for the past 20 years reading on screens, but rarely have I come across texts where I find it as straining to read as in CK3 and some of the Vic 3 screenshots. Aren't you guys are supposed to be spending time making these decisions?

In addition to the text/background colour you also chose to highlight about 30% of the text. I assume the orange highlighting means that there are some nested tooltips or clickable links for the player to interact with. When those five and a half lines contains pretty much every important aspect of the game it might be worth considering rewriting the text so it contains less highligted words, or just remove the highlighting entirely and let those wanting to know more click the 'Guide Me' button (which I assume contains more information). If players are supposed to read the text in its entirety at all that is. If we are not supposed to read it, why not just make a list of the key mechanics that are important to pops? Also, what is the purpose of the pound sterling in front of the 'Money'? Is it just auto generated whenever money is mentioned? In this case it just breaks up the sentence without any purpose whatsoever.

To me all these issues makes it look like someone decided you needed a tooltip just for the sake of having a tooltip. That's a bad tooltip.

Texas colours.png


11 words/numbers, 5 different colours. I hope it is very clear to new players what all those colours means.

States.png


Again, why is the contrast here so low? I realise that this text is just there to indicate that there is nothing at the moment, but with this little contrast I would have preferred the text to just not be there at all. I instantly see that there is some kind of text there, but it actually requires me to focus on on the text to be able to decide what it is. That seems to be the opposite of what the intention behind the low contrast is here, and I find it very distracting.

Weekly GDP.png

I realise this is WIP, but for the love of God, at least make the value the chart is supposed to show in a high contrast font colour in your early iterations. When something inevitably isn't reworked before launch it will then be presented in a somewhat acceptable state anyway. Why would anyone make the dates stand out more than the actual value in this chart? The dates aren't even important in this chart. They could be replaced with 'Start' and 'Today' and still provide the same information to the player. (but please give the dates the same font colour as the GDP).

For charts in general you may also want to skip the fading from light to dark background from top to bottom. The only real purpose it has in this case is to make it harder for the devs to highlight the important information in the chart. That seems like a bad idea.

Of course you may feel free to ignore all feedback regarding UX decisons/design like you (Paradox) did with Imperator and CK3 and make something that looks good on screenshots aimed at selling the game to people who never played your games. That's up to you.
 
  • 6Like
  • 6
  • 4
Reactions: