1
\$\begingroup\$

I'm building a mobile incremental game and as, is typical for the genre, I've got a ton of changing values to show to the user. They serve both as a way to show them their progress, but also to help them make better decisions as the game goes on.

I have five values I want to show, the amount of "Harvesters" and "Salesmen" the user has, and then how many resources they're adding or removing from the resource pool, along with the net result. Say if you're harvesting 10 resources a second, and you're selling 2, you're netting +8/s.

In the following images, blurred to focus on the area in question, you can see the different styles I've tried out. This is the first style, where everything is shown to the player, but is exceptionally busy:

style 1 everything

The second style is just the net change, but is missing the quantities of the two types of workers (ie 10 harvesters and 5 salesmen)

style 2 net

Finally the third style is a mix of verbosity and information, but does not show the net difference (ie +123/s).

style 3 verbose

I'm a fan of the first style because it shows the player everything, and as the programmer I'm happy to look at piles of numbers that represent the fruits of my labour, but the player might not want to see all of that. I've considered adding a toggle setting that goes between the styles if you press it, but I'm hoping there's some sort of happy medium here.

The highlighted parts of the image is all the space I have, but I can incorporate icons if it would help.

My question is between the three of these (or some totally different style), how can I convey the same amount of information clearly and cleanly?

\$\endgroup\$
  • 1
    \$\begingroup\$ You might go look into the work of Edward Tufte. He’s all about how to convey information. \$\endgroup\$ – Tim Holt Nov 2 '17 at 2:15
  • 1
    \$\begingroup\$ I quite liked the way this kind of information was conveyed in Endless Legend - I always clearly understood where my production was going & why. The Workers section was enlarged in their case because you could physically drag each worker icon to a different spot, but your case wouldn't need such a large area for that. \$\endgroup\$ – DMGregory Nov 2 '17 at 2:55
  • \$\begingroup\$ @TimHolt I've never heard of his work, so I'll have to do some reading, thanks for the tip! \$\endgroup\$ – TankorSmash Nov 2 '17 at 3:06
  • \$\begingroup\$ @DMGregory The idea of enlarging it when you're doing something with it is a nice idea. In EL there, it looks like there's an icon for each worker, but since in my genre you can have millions if not trillions of guys, I'd need a whole lot of icons, or a way to represent each 10x variation haha. \$\endgroup\$ – TankorSmash Nov 2 '17 at 3:09
  • \$\begingroup\$ For sure! I was only trying to respond to your entire comment. Thanks again! \$\endgroup\$ – TankorSmash Nov 2 '17 at 3:15
2
\$\begingroup\$

I don't think anyone can give you a suggestion of precisely how this should be done, as it's pretty subjective and more of a design thing that needs to fit the theme and style of your game.

But that said, I'm going to suggest that you represent the data visually, and not numerically. As a primary user experience element, give the user clear feedback about what kind of numeric level(s) they are at, and how they are changed, but not actual details.

But then also let the user, via specific actions, request the actual numbers if they care to know the details.

Specifically in your images, you're showing a blurred out game background with unblurred numbers. My suggestion is you have an on-screen visualization of the information shown at all times, with no game blurring. And if the user clicks on the visualization, show the actual numbers at whatever complexity you feel is sufficient. Which would be the first case, which you've said you like best. Go for it.

Look at sparklines for example, of a very non-numeric representation of data, which tells the user what they wish to know. It might not be what you want, but they are a neat way to show the idea of visualizing data without numbers.

Or think of a shooting game, where red flashes show on the screen when the player is damaged, with the intensity of the flash showing the damage amount, and the screen location showing the direction the damage came from. At the same time, allow the user to view the actual damage details if they wish to.

And per my comment, most definitely look into the work of Edward Tufte - this is the kind of stuff he's all about.

\$\endgroup\$
  • 2
    \$\begingroup\$ (I'm sorry, the blurring is purely to not distract away from corner section of the game screen, in game, it's actually all plainly visible. I'll edit my post to make the more clear.) Yeah that's an idea, have two bars to represent the relative output of both, similar to the RCI graph in Simcity 2000, where they can expand to get more detailed examples. Sparklines are really fun to see in games like Factorio, but this case I think something more static would apply. I like the idea of the visualization. Thanks for the answer! \$\endgroup\$ – TankorSmash Nov 2 '17 at 3:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.