Pre-Order the Game!

Desura Digital Distribution

Friday, September 21, 2012

Less is More

For the past couple of months, I've been gnawing on the planet window UI.  I want to display all the important information, but wasn't sure on how to do it in a clean way.  If you look at an earlier post, I had an idea that I started on.  But it wasn't good enough for me.

I've spent hours thinking about this problem.  As Mark Twain said "I don't have the time to write you a short letter, so I'm writing you a long letter" (or something like that), it is hard to come up with a good UI design that is both functional and informative, without overwhelming the player.  I don't want my game to look like this.

I needed to be able to display planet information, production/consumption, population, regions, etc.  Then last night as I laid on my bed, a brilliant idea struck me.  "Less is more!"  The extra information that isn't absolutely critical can be put into a tooltip that shows up when hovering over something.

For example, I can just display "50 Population" without needing to display the amount for each race, that can be put in a tooltip.  Using this approach, I was able to actually reduce the window size!  The UI is mostly done now, I need to add some display text (I added them in MS Paint for the screenshot to illustrate what the final version will look like).  After this UI is done, I will then upload both the code changes and the new version on Desura.  At this point, both Desura and source code will be in sync.

Here's what it looks like, I welcome your feedback!


3 comments:

  1. That's exatly the idea I had for Stareater and I'll implement it in the next version. Civilization 4 is great example of how to utilize tooltips.

    Back to your game. Interface shown on the image is quite verbose. Instead of "Consumes 70 and Produces 50 Food" you can simply put "+20" with green color. Or even better, green arrow icon pointing up instead of "+" sign. Food icon already tells that info is about food production and words "consumes" and "produces" are kind of long for quick preview. I suggest using green and red arrows pointing up or down instead of "consumes" and "produces". If somebody wonders what that corn clip icon means, the tooltip will say that it's food, produced by agroculture regions and consumed by population.

    And last text box could use different wording. Example 1:

    Building:
    Region VI - Mining (5 turns)

    Example 2:

    Region VI - Mining
    5 turns

    Or maybe it's just that Arial makes numbers less visible within the text.

    ReplyDelete
  2. I need to show both consumption and production because the game uses "turn based processing" or maybe I should call it "deferred economy". The consumption will use up current resources this turn, while production will generate resources for next turn to be consumed. I really like your green/red arrow idea! It simplifies the text and don't require translation :) And you're right, tooltip can be used to show details about a resource.

    Since the last box on the window is for construction, "Building" is kinda redundant. I like your second example, and I think I'll go with that.

    Thanks for your suggestions!

    ReplyDelete
  3. Good to see you are making steady progress. Thought I'd stop by and say Hi.

    JosEPh

    ReplyDelete