Research Screen GUI Enhancement

Development of artwork, requests, suggestions, samples, or if you have artwork to offer. Primarily for the artists.
Message
Author
User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

#31 Post by eleazar »

Geoff the Medio wrote:
eleazar wrote:
Geoff the Medio wrote:Unresearchable techs are the dullest darkest grey. Researchable techs are bright white outlines and text over black. Completed / researched techs are a mid-grey between the other two.

This way, the useful and currently reserachable techs stand out a bit, and look a bit more inviting compared to the informative but nonuseful other status techs.
However, the colors you've chosen are a little counter-intuitive. Work on the following scale. Against a pure black background, the meaning is intuitive.
Already Reasearched: brightest, highest contrast.
Researchable: in between
Currently un-researchable: darkest, lowest contrast
I see the logic in your colour scheme, but there's also logic to my scheme that you didn't address (as quoted). The difference may be due to different assumptions: When using the research screen, I'm assuming that the most important thing is to prominently indicate which techs the player can interact with (by enqueuing) by making them stand out. The alternative you suggest, having a gradient of colours from unresearchable - researchable - researched, would make more sense if the research screen was just a list of techs that the player didn't interact with. In that case, more emphasis on which techs are researched, and thus "in effect", would be important. But since the screen is, to me, more about doing research than reviewing what reserach has been done, I find my scheme more useful...
Of course you prefer your own scheme.
The domain of visual communication only partially overlaps the verbal. I'm growing weary of providing laborious explanations, especially when experience has shown me that persuasion is of little use if the client doesn't trust the designer. This is the area of my expertise. Please trust me a little.

The basis of my arrangement, is not primarily one of emphasis, but an attempt to show the relationship between the different "statuses" of techs. The most difficult thing to perceive at a glance is the relationship between techs, therefore the important thing is to show an obvious progression between the what is already done, and what is currently impossible. It's not necessary in this case to guess what the player wants to find. There should be no difficulty in making each of the three categories distinct enough to be easily found.

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

#32 Post by Geoff the Medio »

eleazar wrote:The most difficult thing to perceive at a glance is the relationship between techs, therefore the important thing is to show an obvious progression between the what is already done, and what is currently impossible.
Have you considered doing something more prominent and distinctive with the curvy arrows connecting techs to indicate this progression? I ask because there's not really much relevance of status between most pairs of techs... eg. I might have researched Planetary Ecology, and presently be able to research Nanotech Production, but these facts are totally unrelated; one is not the consequence of the other, so indicating progression with colours / shades is somewhat imprecise and (to me) of little clarifiaction value.

Arrows, conversely, indicate such relationships, or lack thereof, more specifically and (arguably) clearly... Though apparently not clearly enough (yet), since you want to use colours/shading as well... which I can understand, given the hard-to-follow jumble of arrows that there are on the tree now. Perhaps colour-coding of techs on the tree (despite pd's previous objectsions) by category would help with this, with the colour-coding being extended to arrows originating from a tech?

Presumably if arrows are used instead of brightness to better indicate progression, brightness and contrast could be reserved for other purposes. One important such purpose is obviously highlighting the selected tech.. and perhaps associated techs before and after it on the tree, or perhaps all trees before it in the tree that need to be researched before it can be? (Perhaps behaviour could vary depending on whether the selected tech is researched, researchable or unresearchable?) Anyway, I quite dislike how the brightness variation is currently used to show selection and status... a selected unreserachable tech looks quite like an unselected researchable one, save for its brightened connecting arrows. This is obviously an implimentation problem, and not a fundamental, though.

Alternatively to the above, perhaps a tech selection reticle, similar to the galaxy map system selection indicator, could be used to indicate the selected tech?

Alternatively #2, if you really want to emphase the left-to-right progression independent of individual tech relationships, the layout of the tree could be altered dynamically and dramatically to indicate progression: We'd divide the tree into three sections, one each for researched (leftmost), researchable (middle) and unresearchable (rightmost). There would be a fairly prominent vertical line separating horizontally-adjacent sections. Techs of each status would be located within the limits of the appropriate section, and as techs are researched or become researchable, they'd be shifted left.

I anticipate concerns with the above about the tree being too dynamic and it being hard to find stuff in this scenario if it keeps moving around, but the tree is fairly dynamic anyway, since you can toggle on / off categories and types and statuses, and possibly collapse subtrees (though this specifically I find useless and will likely remove it if there's no big objection).
It's not necessary in this case to guess what the player wants to find. There should be no difficulty in making each of the three categories distinct enough to be easily found.
I wasn't concerned about difficulty telling which classification a given tech was in, or finding a tech of a particular classification. I just like how the higher contrast within the white-on-black reserachable techs stands out more and invites attention, compared to the other techs that the user is likely less interested in finding when surveying the whole tree.

Anyway, I do trust you to provide good solutions, but you don't always have the whole context of a problem, and occasionally have different priorities than I do, so I'll inevitably pine for justification for what I perceive as odd or seemingly-bad suggestions. I'll hopefully defer readily to you or other artists when it's primarily an aesthetic judgement, or when the principles aren't in dispute, though.

BreadMan
Space Squid
Posts: 88
Joined: Fri Aug 06, 2004 1:37 am
Location: Chico, California

#33 Post by BreadMan »

eleazar wrote:Ok here are some of my ideas roughly drawn. Judge if they be merely prettifications or usability enhancements:

Image

Usability enhancements. This tech screen > my tech screen.


P.S.: Hi :)
Good afternoon! This is the Earth Alliance embassy diplomatic office. My name is Alex. How may I assist you?
HUMANS! BLAUGHRAN EMPIRE CLAIMS PLANET KREIGHTON! YOU GIVE RAY GUN SCIENCE OR BLAUGHRANS DESTROY HUMANS ON KREIGHTON!!!

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

#34 Post by eleazar »

BreadMan wrote:Usability enhancements. This tech screen > my tech screen.


P.S.: Hi :)
:?
Does that mean you like it, or think it should be changed?

BreadMan
Space Squid
Posts: 88
Joined: Fri Aug 06, 2004 1:37 am
Location: Chico, California

#35 Post by BreadMan »

eleazar wrote: Does that mean you like it, or think it should be changed?
Like it.

Having the description on the top makes the screen top heavy, the placement is a remnant of previous designs and something I would have changed if I'd thought about it. Moving it to the bottom makes more sense aesthetically, and I like your idea of hiding it when nothing is selected for more tree-browsing real estate.

Actually a number of your suggestions, like having icons on the tree itself and the lines originating from a common point were in my original mockup. Also the shapes of the lines were a bit more distinct from the starlanes and I had no idea there were going to be that many on the screen. I think in this case it would be acceptable to ditch the transparency to make the thing more readable.
Good afternoon! This is the Earth Alliance embassy diplomatic office. My name is Alex. How may I assist you?
HUMANS! BLAUGHRAN EMPIRE CLAIMS PLANET KREIGHTON! YOU GIVE RAY GUN SCIENCE OR BLAUGHRANS DESTROY HUMANS ON KREIGHTON!!!

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

#36 Post by Geoff the Medio »

I've done some research screen work recently:
* The layout is significantly more user-customizable, by dragging and resizing some of the windows around.
* Tech icons are added on the tree and queue.
* All categories, status and types of techs can be independently toggled on and off the tree view.
* The queue items and the tech detail window contents resize with UI font size.
* The layout of the detail window changed signficantly. The icon is on the left now, and smaller (though varies with font size) so as to not get in the way of the text, and to make resizing that window vertically more workable, without having a big empty space below the icon.

Image
Image

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

#37 Post by The Silent One »

Looking good!

Some comments:

* Can the scrollbars at the right and at the bottom of the screen be removed? (Can't the player move the techs like the stars on the galaxy map?)

* Are the colours of the science categories user-adjustable? The colors in Eleazar's mockup are much easier on the eyes imo; also, deactivated buttons with toned down colors may look better than plain black buttons.

* How do the tech icons look with a transparent background?

* Is it possible to get rid of the double border of the navigation panel?

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

#38 Post by Geoff the Medio »

The Silent One wrote:* Can the scrollbars at the right and at the bottom of the screen be removed? (Can't the player move the techs like the stars on the galaxy map?)
I suppose...
* Are the colours of the science categories user-adjustable? The colors in Eleazar's mockup are much easier on the eyes imo;
You can edit the config.xml to change the colours. The objection is probably to hue/saturation relative differences though...
...deactivated buttons with toned down colors may look better than plain black buttons.
As long as a scheme works for both coloured and uncoloured buttons, it's doable. So how should the uncoloured status and type be shaded?
* How do the tech icons look with a transparent background?
They don't have transparent backgrounds, so I don't know.
* Is it possible to get rid of the double border of the navigation panel?
It's actually got a triple border... Getting rid of the innermost one probably isn't going to happen if it remains resizable. The problem is that if the controls (a list box in the Navigator's case) are flush with the 2nd (middle) border of the window at the bottom right, then they overlap the resize-drag tab and make it impossible to resize.

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

#39 Post by eleazar »

It's nice to see some of these things implemented. :)
Geoff the Medio wrote:
The Silent One wrote:* Can the scrollbars at the right and at the bottom of the screen be removed? (Can't the player move the techs like the stars on the galaxy map?)
I suppose...
I don't have a problem with the scroll bars at this point. They aren't absolutely necessary, but they do provide an indication of the relative position and size of the viewable area to the whole.
Geoff the Medio wrote:
* Are the colours of the science categories user-adjustable? The colors in Eleazar's mockup are much easier on the eyes imo;
You can edit the config.xml to change the colours. The objection is probably to hue/saturation relative differences though...
Yep, but not a big deal since it can be changed with a common text editor.
Geoff the Medio wrote:
...deactivated buttons with toned down colors may look better than plain black buttons.
As long as a scheme works for both coloured and uncoloured buttons, it's doable. So how should the uncoloured status and type be shaded?
The fundamental problem here is that the FO normal button form is used as a radio button. (a button that you can click on and off) Giving different types of buttons the same appearance is a big UI no-no. In my mock-up i meant them as tabs, but didn't make that very clear.
Geoff the Medio wrote:
* How do the tech icons look with a transparent background?
They don't have transparent backgrounds, so I don't know.
They would look better with transparent backgrounds, though some of them would need to be redone to work in that format. The techs that use the category icon (without background) demonstrate this.

Also i note that the category icon is used presumably where the a unique icon is not available. Ideally these are automatically substituted whenever a unique icon is not defined, or when the icon is missing.

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

#40 Post by Geoff the Medio »

eleazar wrote:The fundamental problem here is that the FO normal button form is used as a radio button. (a button that you can click on and off)
A radio button is where you can pick one of several options, and picking one option unpicks the others in the group. In computer UIs, these traditionally have a circular outline with a dot in the middle to indicate selection, but that's not really the definition of a radio button.

The buttons in question aren't be used as radio buttons. Rather, they are a group of independently toggled buttons; you can turn them on and off independently in and combination. So, perhaps what is needed is a distinctive look for toggle buttons?
Giving different types of buttons the same appearance is a big UI no-no. In my mock-up i meant them as tabs, but didn't make that very clear.
I think I realized you meant them to function as tabs, but it's much more convenient to have them all toggle on and off separately, so you can have any combination of categories, types and statuses shown.
They would look better with transparent backgrounds, though some of them would need to be redone to work in that format.
They would all have to be redone, as they don't currently seem to have transparent backgrounds. I'm not rendering any differently when showing a tech icon or a category icon; they appear differently because the latter have transparent backgrounds and the former don't. (Unless there's something going on in the texture-loading code I'm not aware of...)
Also i note that the category icon is used presumably where the a unique icon is not available. Ideally these are automatically substituted whenever a unique icon is not defined, or when the icon is missing.
The "when not defined" part already happens. If an icon is missing, I seem to get a black square... I'm not sure why it's not the "missing" texture, but I'm not really very concerned about it...

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

#41 Post by The Silent One »

eleazar wrote:It's nice to see some of these things implemented. :)
Geoff the Medio wrote:
The Silent One wrote:* Can the scrollbars at the right and at the bottom of the screen be removed? (Can't the player move the techs like the stars on the galaxy map?)
I suppose...
I don't have a problem with the scroll bars at this point. They aren't absolutely necessary, but they do provide an indication of the relative position and size of the viewable area to the whole.
That's true, but is this information really valuable? After all, the player can always zoom out to get an overview; also, after some games the player will know if he's browsing the early or late techs.
Geoff the Medio wrote:
...deactivated buttons with toned down colors may look better than plain black buttons.
As long as a scheme works for both coloured and uncoloured buttons, it's doable. So how should the uncoloured status and type be shaded?
Eleazars mockup provides a good solution (again): activated buttons have a wide, coloured outline, while deactivated buttons have a thin, grey outline. The outline of the activated button is brighter than the button itself.
Geoff the Medio wrote:
* How do the tech icons look with a transparent background?
They don't have transparent backgrounds, so I don't know.
Can you set black as a transparent color? Although that will almost certainly look weird in some cases.
If we want to do transparent backgrounds for the tech icons, I'd give it a try.

[EDIT]
Geoff the medio wrote:
* Is it possible to get rid of the double border of the navigation panel?
It's actually got a triple border... Getting rid of the innermost one probably isn't going to happen if it remains resizable. The problem is that if the controls (a list box in the Navigator's case) are flush with the 2nd (middle) border of the window at the bottom right, then they overlap the resize-drag tab and make it impossible to resize.
Couldn't the innermost border be made invisible, or doesn't GG allow that?

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

#42 Post by Geoff the Medio »

The Silent One wrote:
Geoff the Medio wrote:
...deactivated buttons with toned down colors may look better than plain black buttons.
As long as a scheme works for both coloured and uncoloured buttons, it's doable. So how should the uncoloured status and type be shaded?
Eleazars mockup provides a good solution (again): activated buttons have a wide, coloured outline, while deactivated buttons have a thin, grey outline. The outline of the activated button is brighter than the button itself.
That describes what already happens, but doesn't address what should happen for uncoloured buttons.
Can you set black as a transparent color? Although that will almost certainly look weird in some cases.
If it's possible, I don't know how. But as noted, it won't work properly for icons using the same black colour for "background" and actually desired blackness inside icons.
If we want to do transparent backgrounds for the tech icons, I'd give it a try.
I'd rather get new, missing, icons that have you or anyone else spend time redoing existing ones. Black tech icon backgrounds is not a major problem.
Getting rid of the innermost one probably isn't going to happen if it remains resizable.
Couldn't the innermost border be made invisible, or doesn't GG allow that?
Possibly, though I'm not quite sure how, and then there would be an unexplained empty blank space around the contents of the navigator... Currently the inner border "explains" the gap visually.

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

#43 Post by eleazar »

Geoff the Medio wrote:The buttons in question aren't be used as radio buttons. Rather, they are a group of independently toggled buttons; you can turn them on and off independently in and combination. So, perhaps what is needed is a distinctive look for toggle buttons?
Giving different types of buttons the same appearance is a big UI no-no. In my mock-up i meant them as tabs, but didn't make that very clear.
I think I realized you meant them to function as tabs, but it's much more convenient to have them all toggle on and off separately, so you can have any combination of categories, types and statuses shown.
"More convenient" is debatable— but not worth debating at this point, since the tech-tree has a long way to go, and this aspect of the GUI can easily be switched.
• FO does need a distinctive "toggle button" since other parts of the UI have toggle button that look just like the normal buttons. That should be a different topic.
• A check-box is probably the best solution for the functionality Geoff is trying to get (Except for the "All" button, which is just a normal button that checks all checkboxes).
Geoff the Medio wrote:
They would look better with transparent backgrounds, though some of them would need to be redone to work in that format.
They would all have to be redone, as they don't currently seem to have transparent backgrounds.
Yeah, i know. That's something that can be progressively dealt with by the artists. I doubt an automatic turn-black-to-transparent would be satisfactory.
Geoff wrote:I'd rather get new, missing, icons that have you or anyone else spend time redoing existing ones. Black tech icon backgrounds is not a major problem.
The proper priority, but it's really not an either/or situation. It takes much less artistic-skill/time/attention to remove the background than to make up a new esoteric icon from scratch.

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

#44 Post by Geoff the Medio »

eleazar wrote:• A check-box is probably the best solution for the functionality Geoff is trying to get
Check boxes, in my impression / experience, tend to be passive, in the sense that usually if you check something, it doesn't immediately change anything else until you click OK (typically to close the modal dialog box in which they appear). With these toggle buttons, as soon as you click them, the tree updates, which is more consistent with how buttons functions (do something) than check boxes (select something to do later).

Also, check boxes tend to look as though you have to click the very small check area to activate them. Usually you actually can click anywhere on the text or the check area, but there's usually not an outline around the large clickable area as there is with buttons, which makes their actual function somewhat unintuitive.

Also, the check indicator to the left of the text, and the text itself, usually takes up more horizontal space than just the text and space around it for the outline of a button would.

...

Anyway, regarding the Research UI in general, can someone suggest a better way to indicate the selected tech on the tree and/or queue than brightening as is done now? Perhaps a selection indicator similar to that for systems on the galaxy map? The trouble with brightening is that it can be hard to tell the difference between a researchable unselected tech, and a selected unresearchable tech, since both states are indicated with similar brightening.

Also, some way to show all techs backwards in the tree that are direct or indirect prerequisites of the selected tech might be nice... Specirfically, these are the techs that would be auto-enqueued if a currently-unresearchable tech is double clicked.

Also, some slightly more distinctive shapes for the different tech types (theory, application, refinement) on the tree, that would also work with the tech icon at the left as is now done. The angled corners suggestions from earlier might interfere with the icon. Hopefully the items on the queue itself can be made to use these distinctive shapes as well.

Also, some way to make it more obvious that a particular tech is enqueued might be nice. The bottom-right "Queued" indicator doesn't stand out very well, I find...

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

#45 Post by eleazar »

I added a few tech icons, and removed the backgrounds from some others so now there are about a dozen in trunk to test the background-less look with. Not all of these are top quality, since the general style may still need to be tweaked.

I'll be away for the rest of the week, and the first part of next week.

Post Reply