0.3 graphics summary / sidepanel revision

Development of artwork, requests, suggestions, samples, or if you have artwork to offer. Primarily for the artists.
Post Reply
Message
Author
User avatar
Geoff the Medio
Programming, Design, Admin
Posts: 13587
Joined: Wed Oct 08, 2003 1:33 am
Location: Munich

#91 Post by Geoff the Medio »

The Silent One wrote:...abbrevated to 20k, 40k, +500...
That's what will happen, and what already does happen for empire resource totals.

User avatar
pd
Graphics Lead Emeritus
Posts: 1924
Joined: Mon Mar 08, 2004 6:17 pm
Location: 52°16'N 10°31'E

#92 Post by pd »

I don't like the grey boxes either - at least the grey filling. Just the contours should be much better looking and provide better readability.

The black box ontop of the planet looks weird - could work as a tooltip though.

I like the small resource icons and how the focus selection works in general. I wouldn't use hexagons though. I think a drop-down/pop-up menu with 5 icons aranged in a circle and the balance icon in the middle would be better and logical at the same time.

The building progress could be shown like this:
Icons 50% opaque as long as they are build. There is text overlay telling how many turns are left. When the building is done - it's shown fully opaque. Hovering over the building icon will provide information about what effect the building has.

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

#93 Post by eleazar »

I believe

Code: Select all

120/304 +5
is a more standard way of representing the info. Parenthesis give no indication of the relationship of the two numbers.

The two emphasis buttons the the left don't work well in some situations, like having a secondary emphasis but no primary.

However, with vertically stacked format, it's probably possible to reinstate the bars, in such a way that they are actually readable. In that case, i would let the box take up the entire length. Primary and secondary (or dual secondary) focus could be indicated by little icons to the left of the resource icons. Something vaguely like this:

Code: Select all

   (icon 1) ==========  -1
 > (icon 2) ====-       +5
   (icon 3) ===-        -4
>> (icon 4) =====-----   +3
   (icon 5) ====
The ">" and ">>" indicating focus.

User avatar
pd
Graphics Lead Emeritus
Posts: 1924
Joined: Mon Mar 08, 2004 6:17 pm
Location: 52°16'N 10°31'E

#94 Post by pd »

The two emphasis buttons the the left don't work well in some situations, like having a secondary emphasis but no primary.
There is always a secondary and primary emphasis. If it's not a special resource then it's balanced.

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

#95 Post by eleazar »

pd wrote:
The two emphasis buttons the the left don't work well in some situations, like having a secondary emphasis but no primary.
There is always a secondary and primary emphasis. If it's not a special resource then it's balanced.
Maybe it should be that way, but you're wrong— unless it's changed in the most recent release.
It is possible to have only a single emphasis. I'm not absolutely certain about the dual secondaries.

User avatar
pd
Graphics Lead Emeritus
Posts: 1924
Joined: Mon Mar 08, 2004 6:17 pm
Location: 52°16'N 10°31'E

#96 Post by pd »

Well, AFAIK you can have a primary and a secondary focus(emphasis). Both can be farming, production, construction, research, economics or balanced.

User avatar
Geoff the Medio
Programming, Design, Admin
Posts: 13587
Joined: Wed Oct 08, 2003 1:33 am
Location: Munich

#97 Post by Geoff the Medio »

You always have one primary and one secondary focus, and each can be, independently, one of farming, mining, research, trade, industry or balanced. There is no such thing as "emphasis", only primary and secondary focuses. There is no "dual secondary" focus. This is the same as it's been since around v0.2. If/that this isn't clear with the current UI, then that's part of what I'm hoping to fix with this update.
pd wrote:I like the small resource icons and how the focus selection works in general. I wouldn't use hexagons though. I think a drop-down/pop-up menu with 5 icons aranged in a circle and the balance icon in the middle would be better and logical at the same time.
The point of the hexagon is that you can see what the current selection is by what's in the middle, and can see all other options around the outside. If you had only the five resource focuses around the outside, and then balanced in the middle, it would be very awkward to use... Imaging a regular droplist:
Image
What you propose would be like not having the current selection listed at the top, and only having the options listed below.

In the hex case, if you had only the centre and five surrounding options, then before you clicked, the current selection would be shown as in the mockups, but then when clicked, the current selection would suddenly move (if it wasn't balanced). This would mean that to re-select what you're already using, you'd have to click, then move to the correct spot in the surroundings.

Six things around a hex also has no gaps between the options.
eleazar wrote:However, with vertically stacked format, it's probably possible to reinstate the bars, in such a way that they are actually readable. In that case, i would let the box take up the entire length.
Trouble with this is that, I believe, we're switching to showing resource production, not meter values. Meter values are nice, in that they're bounded in the range 0..100. Resource production is essentially unbounded though, meaning that to be able to show the full range of possible production amounts (up to 10000, say), you'd get essentially one or two pixel long bars for most planets with resource proudction under 50 or 100.
pd wrote:Icons 50% opaque as long as they are build. There is text overlay telling how many turns are left.
Is text preferable to a progress bar in this case?

IMO, for build progress, a bar is best. Even though different buildings (or multiple copies of the same building) will have different build times, it's reasonable to present progress as a percentage, or normalized to a fixed scale. This means we can use a relatively small bar, and just fill it in for what % completion the building is at (as opposed to the resource production situation which has no useful max value to normalize to).

User avatar
pd
Graphics Lead Emeritus
Posts: 1924
Joined: Mon Mar 08, 2004 6:17 pm
Location: 52°16'N 10°31'E

#98 Post by pd »

pd wrote:I like the small resource icons and how the focus selection works in general. I wouldn't use hexagons though. I think a drop-down/pop-up menu with 5 icons aranged in a circle and the balance icon in the middle would be better and logical at the same time.
The point of the hexagon is that you can see what the current selection is by what's in the middle, and can see all other options around the outside. If you had only the five resource focuses around the outside, and then balanced in the middle, it would be very awkward to use... Imaging a regular droplist:
Image
What you propose would be like not having the current selection listed at the top, and only having the options listed below.

In the hex case, if you had only the centre and five surrounding options, then before you clicked, the current selection would be shown as in the mockups, but then when clicked, the current selection would suddenly move (if it wasn't balanced). This would mean that to re-select what you're already using, you'd have to click, then move to the correct spot in the surroundings.

Six things around a hex also has no gaps between the options.
I think it's more logical to not treat the balanced icon like the regular ones. It should be placed in the center to further emphasize it's status. I don't think it would be awkward to use, actually I think it would be more logical and ergonomic. And in the end, you only know, when you try it.

Please have a look at those images:

Image
This one shows, balanced is selected. Once you click(and hold?) on it, this pops up:

Image
Balanced it always in the center, and it is shown colored, because is is the current setting. You can move the mouse around and choose an icon. Uppon hovering they become colored as well. Once you click(or drop?) the pop up disappears and this is shown:


Image

Selecting balanced could be just one click, if we use the hold + drop method.


pd wrote:Icons 50% opaque as long as they are build. There is text overlay telling how many turns are left.
Is text preferable to a progress bar in this case?

IMO, for build progress, a bar is best. Even though different buildings (or multiple copies of the same building) will have different build times, it's reasonable to present progress as a percentage, or normalized to a fixed scale. This means we can use a relatively small bar, and just fill it in for what % completion the building is at (as opposed to the resource production situation which has no useful max value to normalize to).
I think so, yes. As the player I want to know, how long(how many turns) are left for the building to complete - that's all. For more information I could click on the icon to get to the production screen. Or hover about it, to know about it's effects.

User avatar
The Silent One
Graphics
Posts: 1129
Joined: Tue Jul 01, 2003 8:27 pm

#99 Post by The Silent One »

New mockup:

Image

Got to run, will comment later. But it's fairly self-explaining.

User avatar
Geoff the Medio
Programming, Design, Admin
Posts: 13587
Joined: Wed Oct 08, 2003 1:33 am
Location: Munich

#100 Post by Geoff the Medio »

pd: In your example, you illustrated the case where there's no difference between having balanced in the centre and on the edge, which doesn't address my point.

My objection is about when you have something other than balanced selected initially. In this case, if you click on the widget when it is showing (for example) research, the spot you just clicked changes to balanced, because it's the middle.

Normally droplists work in a manner such that in you click on them to drop the list, then click away or click again in the same spot, the setting doesn't change. (Try it with the droplists on the forum posting page.) What you're suggesting is to put the current selection (from before clicking on the widget) in the same place as an (fixed-location) option after clicking to open the options. This would mean you can't twice in the same spot to open and close the list of options without changing the selection. This would make the UI hard to use, as a single accidental click changes the setting, rather than requiring a deliberate click-and-move to change it, as with a normal droplist.

If you really like having the balanced choice in the middle, then a different sort of widget might work better. Instead of the droplist-like clickable choices being placed around the widget, there could instead be a selection-indicator that you can drag around to the five corners or put in the middle. The background of the widget would change depending on where you put the marker, and when you're dragging it or mousing over, the options would appear (as non-interactive graphics) outside the corners corresponding to their choices.
Is text preferable to a progress bar in this case?
I think so, yes. As the player I want to know, how long(how many turns) are left for the building to complete - that's all. For more information I could click on the icon to get to the production screen. Or hover about it, to know about it's effects.
I think the player also would like to know relatively how much progress has been made on the building. If it's 10 turns left out of 100 turns total, that's quite different from 10 turns left out of 12 total.

Also, the turns left isn't a very good indicator of progress in the sense that it's dependent on several other values... such as the amount of PP that's already been put towards the project, the current available PP for the empire, embargos or other issues limiting local PP importation from the empire stockpile, etc. So one turn, a building could be "10 turns left", only to be "20 turns left" the next, then "Stalled" or "Never" the next, then back to "10".

If we instead (or also) show a progress bar, there's more consistency between turns and more easily-understood and, in particular, visible progress.

How about a progress bar that has the number of turns left, as a number, written over it in suitably small font?

The Silent One: I'd stick population to the left, and health to the right, and move construction somewhere else, as it's not really related to health and construction.

Also, health, construction and population all have current and max values and change between turns. If it's important to show the max and change for the resource meters, it's presumably also important to show them these three as well.

For the 5th option of indicating meter values, hop about:

100(+5) / 120

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

#101 Post by eleazar »

I suspect too much stuff is getting jammed into one bar with the planet name.

• Re focus:
0.3 requirements wrote:Both Foci can be independently set to one of the five resource meters or the "Balanced" setting.
This makes the UI much simpler anyway.

• I agree the single piece of info on a under-construction building should be a progress meter. A statement of turns to completion is likely to be an inaccurate prediction, and gives you no sense of how much (if any) progress has been made. Adding any more information (other than in a tooltip) complicates things unnecesarily.

Image
I've obviously left some stuff out of this example, stuff that i need to think a bit more about. However what i've included makes these points:
• there's no reason to start using hexagonal or pentagonal "boxes" for the icons.
• primary and secondary selection buttons need to look different.
• the information in the sidebar needs to leave room for the largest sized planets. Thus the ghosted gas-giant.
• i think it's fine to risk getting the flags partially covered by the planets. Flags should still be recognisable even in the rare situations when they are half covered.
• the box around everything indicates media ii is selected.

At the top the current sidebar is included for comparison.

User avatar
pd
Graphics Lead Emeritus
Posts: 1924
Joined: Mon Mar 08, 2004 6:17 pm
Location: 52°16'N 10°31'E

#102 Post by pd »

eleazar wrote:• I agree the single piece of info on a under-construction building should be a progress meter. A statement of turns to completion is likely to be an inaccurate prediction, and gives you no sense of how much (if any) progress has been made. Adding any more information (other than in a tooltip) complicates things unnecesarily.
Why is this inaccurate? When I'm browsing through my systems and check all my planets - all what I want to know is, how many turns it takes to complete my projects. Since this game is turn-based turns are the most important way of measuring everything. Why should I be interested in the progress, that is already made, especially if it's shown with a bar, which in the end only shows a percentage in a vague way? If I do want to know this, I could click or hover on the item.
• there's no reason to start using hexagonal or pentagonal "boxes" for the icons.
Basicly there is no real reason to make them hexagonal or pentagonal, but it still makes sense, especially in case of the pentagonal shape, where the corners point into the right directions. Also it looks better, having a pentagon surrounded by 5 items, than having a square surrounded by 5 items.

About the flag: I'm not a fan of showing it behind the planets, but we could show this on-top of the planet, but on the shadow side.

I aggree with the rest mostly.

User avatar
pd
Graphics Lead Emeritus
Posts: 1924
Joined: Mon Mar 08, 2004 6:17 pm
Location: 52°16'N 10°31'E

#103 Post by pd »

@Geoff:

Some more pics to clarify how it works:

Based on my last picture(last post), when you click on the icon, this pops up.
Image
Research is colored, even if the mouse is not hovered above it, because it is the prior selection.

Once you hover about another icon, this one becomes colored as well:
Image

Same for the center:
Image

I think this is very intuitive and easy to handle. And I prefer a way, where you click and hold your mouse.

This is a common way in some CG softwares(aliasstudio, maya, modo) by the way. It's called 'marking' oder 'pie' menu there, and is considered to be very ergonomic.
What you're suggesting is to put the current selection (from before clicking on the widget) in the same place as an (fixed-location) option after clicking to open the options. This would mean you can't twice in the same spot to open and close the list of options without changing the selection. This would make the UI hard to use, as a single accidental click changes the setting, rather than requiring a deliberate click-and-move to change it, as
I don't think you will accidently change a focus. Actually I think this is a benifit, because it allows changing the focus to balanced with just a single click. No need, to specify into one direction by moving the mouse, just click.
Your arguments about a regular drop down list, are meaningless, because we just don't have a regular drop down list here.


About the building project: I'm fine with showing the turns left together with a bar.

User avatar
Geoff the Medio
Programming, Design, Admin
Posts: 13587
Joined: Wed Oct 08, 2003 1:33 am
Location: Munich

#104 Post by Geoff the Medio »

eleazar wrote:• Re focus:
0.3 requirements wrote:Both Foci can be independently set to one of the five resource meters or the "Balanced" setting.
This makes the UI much simpler anyway.
I'm not sure what your point is... This is consistent with my previous post on the subject.
• there's no reason to start using hexagonal or pentagonal "boxes" for the icons.
There's no need to do anything other than a standard droplist, really, but the hex-box seemed appropriate since you could have six same-size and shape hexes surrounding, gap-free, the central selected hex. Since the selectable options are the same shape as what you clicked, it's clearer that you're picking a new thing to replace when you clicked on to open the ring.
• primary and secondary selection buttons need to look different.
Labels "1" and "2" would work, without needing different widgets to be implemented... It's not really any clearer what the different-size buttons would have if you didn't already know what they did. And if you did know, then you'd be fine with same-looking buttons...
• the information in the sidebar needs to leave room for the largest sized planets. Thus the ghosted gas-giant.
The UI widgets can partly cover large planets.

It's important to not use any unnecessary horizontal width to the sidepanel. You art guys like your 1600x1200 or so huge resolutions, but people running 1024x768 need all the space they can get in the middle-of-screen map view, particularly on the production screen.
• i think it's fine to risk getting the flags partially covered by the planets. Flags should still be recognisable even in the rare situations when they are half covered.
pd wrote:About the flag: I'm not a fan of showing it behind the planets, but we could show this on-top of the planet, but on the shadow side.
I agree with pd; put it at the top-left over the planet. Likely a bit smaller than in eleazar's mockup. Also: rather than a "flag", wouldn't it be a non-square-shaped imperial symbol?
pd wrote:
eleazar wrote:A statement of turns to completion is likely to be an inaccurate prediction
Why is this inaccurate?
As I discussed above, many factors influence how long it takes to build something. Turns left, if current conditions remained constant, can be calculated, but not actual turns left, which will depend on all those unpredictable factors.
Why should I be interested in the progress, that is already made, especially if it's shown with a bar, which in the end only shows a percentage in a vague way? If I do want to know this, I could click or hover on the item.
* Most people are used to seeing build progress bars for production or research in this context.
* It's more intuitive to see build progress increase each turn, rather than time left decrease (even if it was completely accurate and consistent decrease without erratic changes, as above). Production is an interactive, ongoing process, not a timer that counts down until an exact unchangable time of completion.
* The progress bars are more prominently displayed on the queues, so having the progress bars be displayed on the sidepanel is consistent
* If we eventually have sabotage or other means by which spent PP on a building-in-production can be lost, then it would be clear from the progress bar that the turns left to completion has increased because of lost progress, whereas just increasing the turns to complete would not indicate that this is due ot additional work being needed, and not reduced spending of PP
* There's strategic importance to the amount of resources put into something. If an expensive building is 94% complete, you'll likely want to protect it and ensure it has access to production points to continue building. Just seeing "6 turns left" doesn't make it clear how much cost has already been spent in proportion to what's left.
called 'marking' oder 'pie' menu
I'm not sure if "oder" means "order" or "or" if "marking oder pie menu" is a specialized type of pie menu you're referring to, but most pie menus don't have an active centre button that does something with a single click. The centre is empty, or cancels away the menu if clicked again. In case it's unclear, my suggestion is also a pie menu, specialized to six options and shown with hexes (though there's no reason we couldn't add additional menu options on the 2nd ring out, should this widget be reused for something else, perhaps in combat...?)
And I prefer a way, where you click and hold your mouse.
I'm not sure what you mean by this... Is it that you prefer to click-hold-drag-relase to select an option, rather than click-release-move-click-release? My version could work with both input methods, just like a drop-list does. In particular, if you clicked once, it'd open and stay open until you clicked again, either in the centre to cancel / not change, or on one of the outer ring options to select it. Similarly, if you clicked and dragged the mouse to one of the ring options while still holding, when you released over an option, it would be selected immediately and the ring would close.
I don't think you will accidently change a focus.
If you accidentally click, you will. This is probably why pie menus (and drop-lists) don't (generally) have active centres (or tops for the list) that do something when clicked. Rather, you have to click and move to get to an active clickable spot that does something (ie. select an option from the list / ring).
Actually I think this is a benifit, because it allows changing the focus to balanced with just a single click. No need, to specify into one direction by moving the mouse, just click.
Isn't it rather unintuitive to see a widget labelled with a research icon, click it once, and have your planet switch to balanced focus as a result? And why should balanced have this special treatment?
Your arguments about a regular drop down list, are meaningless, because we just don't have a regular drop down list here.
It's not meaningless, as drop-lists are a very simmilar and commonly used widget that many people are familiar with and which works well. And really, pie menus used in this manner are essentially a variation on a drop list (or vice versa), so the functionality shouldn't be different without good reason.

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

#105 Post by eleazar »

OK, back the the basics of production. I went back and read the relvant parts of the v.3 requirements carefully. The way it's written out is a little confusing, but things seem to make more sense now. As i read it there will never be food, trade, health, or populations etc. on a planet greater than 100. The "max value" refered to in the document seems to be the max with current conditions, never greater than 100.

Unless i'm totally misreading the v.3 req, or they are out of date, bars are the best way to show production, since we have a consistent ceiling. And therefore, most of the concepts created for production are basicly flawed since they try to accomidate production that has no predictable ceiling.


Sorry about the phantom dissagrement about the possible settings of the foci, i was misinterpreting geoff and pd's posts.

Post Reply