Jump to content

New UI


theShadow
 Share

Recommended Posts

I have started working on a new GUI mockup in photoshop, re arranging the various elements to make it more space saving, and also more visually appealing.

First of all, I have redone the UI so that instead of being centered on the bottom of the screen, it is split into 2 halves, each aligned to their opposite respective corners. This way, the UI center space can scale to fit different resolutions.

1920x1200

newUIhighres.png

1024x768

newUIlowres.png

that was the first mockup I did, copying the original UI to the pixel, and just rearranging it.

This is the second mockup, where i started working on the visual style as well.

newUI.png

All of this is still a work in progress, and I am posting it here to get feedback on the design/layout/etc. and also discuss with various developers on how feasible this is in game.

what are your thoughts so far?

Link to comment
Share on other sites

what are your thoughts so far?

On the last mockup, I would change the minimap design a bit. Eventually we are going to have at least 4 buttons (example), in the corners, so there should be room for those. Also I think it would be more aesthetically appealing if the curves on the minimap flowed to the edge of the screen instead of coming back around at the top.

Link to comment
Share on other sites

The main problem with splitting the UI is that you are (necessarily) splitting up functions that belong together. For instance...

newUIhighres.png

Why would formations and stances be so far removed from the unit panel? These functions are for units, so why aren't they grouped with the unit panel? If you do that, then what you are doing is just shoving the whole UI into the right corner, with a separate minimap on the left.

Link to comment
Share on other sites

well then I could put the construction panel on the left with the minimap, and have the right side be devoted to the unit and stances panel, or I could simply move the unit panel over to the right side, and maybe make the construction panel a little bigger to balance it.

Edited by theShadow
Link to comment
Share on other sites

I'd suggest that items commonly used together should be grouped together. Interface elements commonly used during battle should be physically proximate, but there's little need for them to be near to the construction options. By making the different areas of the interface more clearly defined you help users build up a mental map of the interface quicker and improve the learning curve of the game.

This Gamasutra article on RTS user interface design is worth reading: http://www.gamasutra.com/view/feature/1839/too_many_clicks_unitbased_.php

Edited by Ross Bearman
Link to comment
Share on other sites

ok, I moved the interface elements around so that related sections are near each other, and also did a little more work on the visual aspect.

newUIv2.png

I also separated the construction panel into 3 sections, which I will refer to as domestic, military, and special. the first 2 should be self explanatory, and the 3rd is a panel for the buildings that are unique to each civilization. This way, the differences in each civilization is made more apparent. I would suggest that this also be done for unique units as well.

Link to comment
Share on other sites

That's looking kind of cool. I like the 3 groupings of buildings.

For this mockup, a multiple units selection, I think the selection medallion (the shield with the number on it) should go up into the area above it with the unit portrait(s). Also, there will be a few more "action" buttons for units (kill, repair, garrison, etc.) than we have currently, so I would move the status bars (health, stamina, loyalty, experience) up into the portrait area, freeing up space for more action buttons below (stop, patrol, heal, scout). That's why we have vertical status bars in the current UI.

Also, I would like to see a single unit selection version and a building selection version of this demo, along with what you would do with the ribbon at the top (treasury, menu button, tribute/diplomacy, objectives, etc.).

Some extra things:

Buildings will have Health (green) and Loyalty (yellow-orange).

Units will have Health, Stamina (blue), and Experience (white).

We need at least these 4 minimap buttons. These we have planned for the current UI:

- Flare

- Idle Unit

- Minimap Zoom

- Player Scores Toggle

With possibly this many more:

- Toggle territories

- Military/Civilian mask

- Resource only mask

- Friend/Foe mask

For reference, here's my old mockup I made a year ago:

KXaLVl.jpg

(the "building" icons in this example are supposed to represent technology pairs... there's a whole concept in the DD where you choose 1 tech from a pair of related techs, making the other tech in the pair unresearchable)

Link to comment
Share on other sites

It would make more sense to move garrisoned units to a new panel (e. g. to the right of the unit panel). This way, if someday we want to garrison unit in units (say, in a ram, like in The Conquerors), it will be possible. And if we want an inventory system, so that heroes and healers and some structures can hold relics like in AOM, it will go in the same panel, which will be more consistent. The same structure could even have both garrisoned units and relics.

Link to comment
Share on other sites

It would make more sense to move garrisoned units to a new panel (e. g. to the right of the unit panel). This way, if someday we want to garrison unit in units (say, in a ram, like in The Conquerors), it will be possible. And if we want an inventory system, so that heroes and healers and some structures can hold relics like in AOM, it will go in the same panel, which will be more consistent. The same structure could even have both garrisoned units and relics.

That space between the two panels is closed up in a 1024x768 resolution, leaving no room for your new garrison panel. :) You generally have to design the UI for the lowest supported resolution. And if you have different UIs for different resolutions, then you are handicapping some people just because they run a smaller resolution.

EDIT: Hmm, but maybe if we line up the icons of the garrisoned units above the formation and portrait panels for resolutions 1280 and smaller, while creating a separate panel as you suggest for higher resolutions?

Link to comment
Share on other sites

That space between the two panels is closed up in a 1024x768 resolution, leaving no room for your new garrison panel. :) You generally have to design the UI for the lowest supported resolution. And if you have different UIs for different resolutions, then you are handicapping some people just because they run a smaller resolution.

I know, I play in 1024x768. My computer is quite old. :D

But I keep thinking that using the stances space is somewhat "lame", if you see what I mean.

I was actually wondering where this could fit. on low resolutions. Maybe some icons could be displayed smaller, to free space. The current layout doesn't leave any free space for future features.

Or you could put it over the stances (the panel will be higher anyway, to leave room for the minimap buttons, and you can extend that over the stances and over unit info).

Link to comment
Share on other sites

EDIT: Hmm, but maybe if we line up the icons of the garrisoned units above the formation and portrait panels for resolutions 1280 and smaller, while creating a separate panel as you suggest for higher resolutions?

Hey, we had the same idea ! It must be a good one then...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...