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
pd
Graphics Lead Emeritus
Posts: 1924
Joined: Mon Mar 08, 2004 6:17 pm
Location: 52°16'N 10°31'E

#76 Post by pd » Tue May 24, 2005 8:17 pm

don't worry about this mockup.

the sidepanel is been reworked currently.

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

#77 Post by The Silent One » Fri Dec 08, 2006 10:11 am

We seem to have stuck on the redesign of the side-panel. Still, buildings need to be shown; Geoff made a mockup a while back that, although showing a lot of information, was somewhat cluttered IMHO. So here's a first try of mine which is in agreement with freeorions current UI style:

Image

Since the size and type of planet can already be seen from the rendered planet, the text information about that could be shown by a mouse-over tooltip only. Buildings are shown as a list like in Geoffs latest mockup.

Comments?

[Edit] Slight modifications.

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

#78 Post by Geoff the Medio » Fri Dec 08, 2006 12:49 pm

I'm glad you brought this up, as I plan to spend some time to rework the sidepanel in a few weeks.

Here's the relevant part of the somewhat cluttered mockup:
Image

You might want to similarly leave out everything except the sidepanel in future images... a sparse starfield doesn't convey much useful information.

Anyway, in addition to buildings, what really needs some attention is the focus selector and resource production indicator.

In particular, we need a way to select balanced focus to replace the hard-to-use present system of clicking below the icons. I expect a separate balanced box would work for this.

Similarly, a better way to select and to indicate both primary and secondary focus is needed. This should be doable with just left clicks, and be planned taking into acount whatever balanced focus selection method is used.

Another thing is to switch from displaying meter values, as is done now, to displaying what really matters, which is the actual amounts of resource production on each planet. This means we can get rid of the current / max meter display bars, and instead display, probably numerically, the current production of each resource, and the expected change in that resource's production next turn. We do also need some indication of the max possible resource production, though, so that changing focus has some clear effect for the player, and so effect of changing focus on max and on current resource production is clear. That means up to three numbers per resource are needed: current production, change in production next turn (expected), and max possible production with current meter settings.

The max possible settings could be displayed, instead of current, when actually changing the focus settings...

I think you're right that the size and type of planet can be hidden in the standard view, and only shown when moused over.

I think max population can join that as well... We really only need the current population and expected growth next turn (which is presently missing). Mousing over this can reveal the max population, and also the food consumption of that population.

We should also have some icons somewhere to show what specials are on a planet, or on a system. These can be moused over for details.

Continuing the mousing over theme, the resource icons can reveal additional info when moused over.
-Food can indicate net food surplus or imports on the planet (depending on production and population's consumption and availability).
-Industry and Minerals can indicate surplus or imports of each accounting for total consumption for anything being built on the planet.
-Depending how trade works, any maintenance or social projects or whatever else costs trade on the planet can be tallied similarly.
-Research probably has no analog for surplus on a palnet.

Depending how focus selection is done, mousing over could also switch from showing current to max meter values. This might be redundant in practice, however.

Mousing over something should also indicate the construction meter of the planet, and the health meter. These aren't resources, so the meter value actually matters, at this point. Perhaps instead, resource indicators, when moused over, should indicate current and max production of the resource, and the turns required to reach max production, and net change in production for next turn compared to this turn.

Mousing over population should probably also indicate race, when that gets included.

Regarding your buildings list, it seems like it wastes a lot of space to the left of the icons of the buildings. The icons themselves also don't need outlining, IMO. Also, instead of a giant progress bar, a small one adjacent to the icon, similar to the small one adjacent to techs on the tree (not the queue) on the research screen would save space.

Now that I think about it, we might be able to do away with anything except the icons for the buildings. We could get four or so in a row, with just the icon, and may a small progress bar over greyed-out ones if not yet finished. The original idea was to have UI widgets for building interfaces on the large space alloted for each building, but we might not neeed this in practice...

User avatar
tzlaine
Programming Lead Emeritus
Posts: 1092
Joined: Thu Jun 26, 2003 1:33 pm

#79 Post by tzlaine » Fri Dec 08, 2006 4:17 pm

A redesign may very well be in order for the SidePanel. However, there are some elements of it as it is now that I think are important to preserve. Some of them may be implemented badly currently, but many things in the sidepanel are there to make it really easy to get an idea of how each planet is doing at a glance. Mouseovers will inherently be inferior to having all the data laid out to be taken in at once.

For instance, the changes in meters for the focus items indicates approximately what a change in focus will do, visually. This is the most common question I have in most 4X games I play: What happens when I change this setting? Showing the bars change in size, and by how much, answers that instantly.

The change in meter value from last turn under each meter is also useful, if you just want to glance at your new colony and make sure you're not in the red on some meter you didn't expect. It may be preferable to show the expected growth next turn instead of the growth from last turn, but either way, the rate of change is an important value to see. The totals for the entire system are at the top, so the total production and the change in meter value are both visible, at a glance. I would also like to see us change the totals at the top ("current"), to the current total along with the max for all planets ("current/max"). This way, you have the current meter totals, the eventual meter totals after any planned changes and/or growth on subsequent turns, and the rate of change for each meter on each planet below each planet's meters. This is a lot of useful information, and showing it this way is the most convenient way I can think of to convey it to the user at a glance. If someone else has a better way to display this imformation, I'm all ears, but I really think we should be showing this much at a minimum.

Another concern I have is that both mockups show planets with 2 buildings. What if there are 5? The current mockups don't look like they would scale well. I think Geoff is right when he says that just showing the icons is probably best. We can show in-constuction icons at 1/2 opacity, with the bottom X% at full opacity when it is X% complete, so that it also acts as a progress meter.

Even then, though, we will probably need a separate mouseover popup to show all the details of all the buildings at a planet.

Other than these specific objections, I'm in favor of the other suggested changes.

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

#80 Post by The Silent One » Fri Dec 08, 2006 5:19 pm

[Edit] Erased the old post as it was pretty much confusing.

Here's an approach that tries to implement Geoff's and Tzlaine's suggestions: three lines with current output, max output and change in output. Moving the mouse over resource icons changes max output to max output after setting a new focus to the resource. First left-click = primary focus, second click = secondary focus.

Image

Will soon address the system bar to make it visually more appealing and add population, defense buildings and ships in system.

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

#81 Post by eleazar » Sat Dec 09, 2006 2:29 am

* The square boxes for buildings are better than previous mock-ups. However, an incomplete building should in all parts provide less contrast from the background than a complete one, so it's possible to distinguish a 99% complete building from an actually functionging one.

* The medium grey boxes behind everything are a bad idea. They serve to disunify the information and provide lousy contrast for colored lables and anythinge else displayed on them.

* I would display current and maximum production on the same like like this "100/150" — to be read as "100 out of 150". The pluses and minuses would be displayed the same.

* The population icon (currently 2 humans) will, i anticipate, indicate the species of the population when non-humans are implemented. So don't shrink it down too much. I also think it's rather important to show the max population for all planets.

* I believe it's important to include the empire's emblem or flag for each occupied planet.

* i'm not convinced it's neccesary to have a button for "balanced." The slight convenience seems about equal with the possibility for confusion. If it does exist is should be narrower than the resource buttons, so as to not look like a 6th resource.


* In order to make the sidebar usable the information will have to be rather compressed, as it is currently. But to aid learning and to display odd bits of info, i think clicking on a planet should bring up a planet window with information more clearly labled, and of course a larger view of the planet.

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

#82 Post by Geoff the Medio » Sat Dec 09, 2006 3:59 am

tzlaine wrote:For instance, the changes in meters for the focus items indicates approximately what a change in focus will do, visually. This is the most common question I have in most 4X games I play: What happens when I change this setting? Showing the bars change in size, and by how much, answers that instantly.
I think we're better off showing that with numbers than with the bars. The bars are too small to get a usefully exact value, and only give a rough sense of more / less.

Re: Buildings Production Progress bars:

Rather than having the whole, or part of the, building icon fill up to indicate build progress, above I suggested progress bars similar to techs on the queue. Might look something like:
Image
Mousing over could reveal details of turns left and PP / turn (expected and max).
eleazar wrote:* i'm not convinced it's neccesary to have a button for "balanced." The slight convenience seems about equal with the possibility for confusion. If it does exist is should be narrower than the resource buttons, so as to not look like a 6th resource.
How do you suggest the player should select balanced focus then? Clicking on a resource to select that focus is intuitive, but clicking on a few nearby but not clearly marked areas to select balanced is not.

Also, a clearer way to indicate primary and secondary focus would be good. These should ideally not conflict with eachother, such as differently coloured backgrounds. A marker on the top and bottom for primary and secondary, respectively, which can be slid back and forth by dragging, or using the top/bottom half to click to select primary/secondary might work... The enclosed (1) and (2) on the resource icons on my previous mockup was intended to work along these lines.

An alternative is to not have any large clickable resource icons, but instead have two droplist-like selectors, one each for primary and secondary focus. From my piles-of-FO-stuff:
Image

Time progresses left to right. Initially indicates farming focus; click to open "droplist", click one of the options to select, list retracts to show just the selection.
* In order to make the sidebar usable the information will have to be rather compressed, as it is currently. But to aid learning and to display odd bits of info, i think clicking on a planet should bring up a planet window with information more clearly labled, and of course a larger view of the planet.
This may be eventually necessary, but I'd really like to avoid relying on this as a crutch, for as long as possible. We need to have as much of the essential info visible at a glance, without clicking on a planet, or even mousing over.
* The population icon (currently 2 humans) will, i anticipate, indicate the species of the population when non-humans are implemented.
Good point... That would probably work better than my previous suggestion of putting the race name in text after the population number(s). The name could instead appear when mousing over. Clicking the icon would open the appropriate race info or game encyclopedia page about the properties of the race.

Re: tzlaine and eleazar's comments about stuff that's important to show on the sidepanel:

Is it essential to have all these numbers visible all the time? Having too much visible info is essentially The Silent One's complaint about my previous mockup being too cluttered. By only showing details when moused over, we can clean up the display, making it cleaner and smaller (or more important things bigger). The detailed info would still be there, by mousing over or (if necessary) a separate planet screen.

Also: Could I get some specials icons in there somewhere? I'm thinking of something the size and location of the boxed R things on my cluttered mockup a few posts back.

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

#83 Post by eleazar » Sat Dec 09, 2006 6:29 am

Geoff the Medio wrote:Re: tzlaine and eleazar's comments about stuff that's important to show on the sidepanel:

Is it essential to have all these numbers visible all the time? Having too much visible info is essentially The Silent One's complaint about my previous mockup being too cluttered. By only showing details when moused over, we can clean up the display, making it cleaner and smaller (or more important things bigger). The detailed info would still be there, by mousing over or (if necessary) a separate planet screen.
My philosophy of Tooltips:

1 • Tooltips are great for translating or explaining graphics into text or numbers. In other words it's fine to not label a unique icon or to leave off numbers on a readable progress bar— because the info is there in graphic form. Thus i think it's fine to put "Large Terran" into a tooltip since the graphics already convey that info.

2 • Tooltips are bad when you must hover over something that otherwise provides no information. I.E. an icon that is merely a excuse to access info provided under the tooltip.

3 • Tooltips should be used with caution to provide supplementary information along with info that legit according to point "1."

User avatar
tzlaine
Programming Lead Emeritus
Posts: 1092
Joined: Thu Jun 26, 2003 1:33 pm

#84 Post by tzlaine » Sat Dec 09, 2006 6:37 am

eleazar wrote:
Geoff the Medio wrote:Re: tzlaine and eleazar's comments about stuff that's important to show on the sidepanel:

Is it essential to have all these numbers visible all the time? Having too much visible info is essentially The Silent One's complaint about my previous mockup being too cluttered. By only showing details when moused over, we can clean up the display, making it cleaner and smaller (or more important things bigger). The detailed info would still be there, by mousing over or (if necessary) a separate planet screen.
My philosophy of Tooltips:

1 • Tooltips are great for translating or explaining graphics into text or numbers. In other words it's fine to not label a unique icon or to leave off numbers on a readable progress bar— because the info is there in graphic form. Thus i think it's fine to put "Large Terran" into a tooltip since the graphics already convey that info.

2 • Tooltips are bad when you must hover over something that otherwise provides no information. I.E. an icon that is merely a excuse to access info provided under the tooltip.

3 • Tooltips should be used with caution to provide supplementary information along with info that legit according to point "1."
I agree with this completely.

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

#85 Post by Geoff the Medio » Sat Dec 09, 2006 7:45 am

eleazar, edited wrote:Tooltips are...
1) ...great for translating or explaining graphics into text or numbers.
2) ...bad when you must hover over something that otherwise provides no information.
3) ...used with caution to provide supplementary information along with info that [is] legit according to point "1."
(I inserted [is], assuming this to be the intention)

Do 1 and 3 include explanations or additional information about a numerical hover-target, which is neither a graphic, nor meaningless in of itself.

In particular, what about hovering over the number indicating a planet's production of a resource? The max production for that resource could then appear, being otherwise hidden to reduce clutter. The mockups with three rows and five columns of numbers are potentially too much info and too confusing (though granted, displaying as "cur/max (+change)" instead of three rows will likely help).

Cases 1-3 are excellent points / examples, but the specificity to graphics, without explanation of the omission of text, is curious...

Also, how much detail can go into a popup? Consider again the resource production number. Along with the max value of production, there could also be a list of all effects that alter the max value, along with the source object and type (building, special, tech, etc.) for each effect. This would make it easy to figure out what's influencing production levels. However this might be better done on a planet-info dialog or window...

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

#86 Post by The Silent One » Sat Dec 09, 2006 8:24 am

eleazar wrote:* The medium grey boxes behind everything are a bad idea. They serve to disunify the information and provide lousy contrast for colored lables and anythinge else displayed on them.
I chose them because they have been used for the research/production queues and probably take little work to reimplement. Also, grey does not have to be their definite color. Or do you dislike the use of these boxes on the side panel in general?
eleazar wrote:* I would display current and maximum production on the same like like this "100/150"
I'd like that too, but at large numbers it won't fit on the side panel at a reasonable font size.
eleazar wrote:* I believe it's important to include the empire's emblem or flag for each occupied planet.
Agreed.
Geoff the medio wrote:The bars are too small to get a usefully exact value, and only give a rough sense of more / less.
Exactly.
Geoff the medio wrote:An alternative is to not have any large clickable resource icons, but instead have two droplist-like selectors, one each for primary and secondary focus. From my piles-of-FO-stuff:
Image
Although I like this a lot, it will take up more space than before, since the values of all resources still need to be shown plus one/two new focus selectors.
Geoff the medio wrote:though granted, displaying as "cur/max (+change)" instead of three rows will likely help
Like I said above, this will hardly fit. I tried and found it impossible to put all resources with three values in a single row. However, we could split up the resources in two rows, but I'm unsure if that'll look decent.

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

#87 Post by Geoff the Medio » Sat Dec 09, 2006 10:00 am

The Silent One wrote:
Geoff the medio wrote:An alternative is to not have any large clickable resource icons, but instead have two droplist-like selectors, one each for primary and secondary focus.
Although I like this a lot, it will take up more space than before, since the values of all resources still need to be shown plus one/two new focus selectors.
It would remove the need to have the row of 5 or 6 big icons to indicate the resources and be clickable for the player. Instead we could have a much smaller set of icons, with corresponding resource numbers adjacent or below, with the focus selectors above or to the side. For example, take the box you have now with the resources and focus stuff in it, put the two selectors on the right half, and the resources indicators on the left half. The indicators can now take up the full height of the box. I made a horrid mockup by grabbing and shrinking the empire resource indicators and arranging them roughly where I'm talking about:
Image
The focus selectors would be on the right side of the box in the big black space...

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

#88 Post by The Silent One » Sat Dec 09, 2006 2:21 pm

I'd put the focus selectors on the left so they aren't cut off when expanded,
like this:

Image

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

#89 Post by Geoff the Medio » Sat Dec 09, 2006 3:16 pm

The Silent One wrote:I'd put the focus selectors on the left so they aren't cut off when expanded
Good point. I had some reason for putting them on the right, but I can't think of what it might have been.

I wonder if

Code: Select all

 120  (+5)  304 
ie. "cur (change) max", would be better than "cur (max) change"? That way it's clearer that the + applies to the current, not the max.

I still think there should be a way that the max value can be hidden most of the time though... exluding when actually setting focus.

Looking at that last mockup, there's a lot of empty space to the right of the resource values. The whole sidepanel could perhaps be compressed horizontally... Any saved width is important at lower resolutions on the production screen.

Also: it'd be good to have indications of the health and construction meters on there somewhere. We might be able to do that with just icons, where an icon indicates a general range of health or construction, eg. 0..10, 10..20, ... , 90..100, for each, and mousing over would give the details of current, max and expected change. (Aside: any effects that use conditions on these meters could then use the same ranges instead of checking actual meter values, perhaps...)

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

#90 Post by The Silent One » Sat Dec 09, 2006 4:00 pm

Geoff the medio wrote:Looking at that last mockup, there's a lot of empty space to the right of the resource values. The whole sidepanel could perhaps be compressed horizontally... Any saved width is important at lower resolutions on the production screen.
I wouldn't do that, as when the resource numbers increase, they might not fit, e.g. in late game, when the player has farming output 20000, max 40000, change +500... although, come to think of it, that could easily be abbrevated to 20k, 40k, +500... still, I'm rather reluctant to reduce the sidepanel's size.
Geoff the medio wrote:120 (+5) 304
I'm okay with that.
Geoff the medio wrote:Also: it'd be good to have indications of the health and construction meters on there somewhere.
Maybe we can put it below the planet name, above of the resources? When I find the time I will try that out.
Or, if health and construction are merely represented by icons instead of figures, they could be crammed on the right of the planet name; but I'd prefer to have a seperate space for them.

Post Reply