Research Screen GUI Enhancement

[The Silent One]

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.

From what I can see from your images this does not happen. In Eleazars mockup buttons keep their colours when deactivated (instead of going black). All that changes is the thickness and colour of the outline. That way, black buttons can be distinguished from deactivated coloured buttons.

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.

I'd rather have a gap than a triple border, but that's just my two cents.

[Geoff the Medio]

...buttons keep their colours when deactivated (instead of going black).

That doesn't happen, but it wasn't in your previous message either...

[The Silent One]

I thought in reference to Eleazar's mockup it was obvious what I meant. I'll be more precise next time.

[The Silent One]

Basic toggle button design:



Note that the button on the top has a 20% blue background.
The only thing that changes on toggling is the fill on the left side of the button.

[Edit] Added one button.

[The Silent One]

Can we resume the discussion on the research screen? Here's an up-to-date screenshot:



As you can see Geoff has implemented some marvellous improvements. But there are some things that need to be dealt with:

- I suggested several times to remove the scroll bars. They don't have any gameplay effect, as you can scroll without them and they are not badly needed for orientation.

- I've provided a concept for toggle buttons in the post above. Which parts of them are coloured is a pure matter of taste, the only important thing is the on/off light on the left.

- it is unfortunate that the tech icons are never shown at their original size (128x128). However, the current method how they are displayed may be close to a satisfactory solution. We could try to just increase the tech icons size to 128x128 and adjust the tech description so that it fills the empty space. The detailed text stays where it is now. But it's hard to tell how it'll look, maybe I'll do a mockup in the next few days.

[Geoff the Medio]

Note that you can increase the font size in the options menu, which should have the side effect of enlarging the displayed tech icon on the detail panel. (Might require restarting FO though...)

[The Silent One]

Note that you can increase the font size in the options menu, which should have the side effect of enlarging the displayed tech icon on the detail panel. (Might require restarting FO though...)

At text size 26 the tech icon is shown at its original size, however, at this size the rest of the tech screen is unreadable... I've produced a mockup with a suggestion that is actually looks similar to what Eleazar has proposed for the production screen:



On the left side of the red border is a suggestion how the tech description panel may look. It's really only a minor change: the panel's header is divided into two areas, the tech icon fills the left area and the text is centered in the right area.
On the right side of the red border is a modified screenshot that shows how it would look at 1280x1024. Note that there is still plenty space avaiable, so it would likely look agreeable at 1024x768.

[The Silent One]

Also, a new button concept that uses the category icons:

[eleazar]

My vote goes for the first example of a "basic toggle button" It's not necessary to beat people over the head with the color of each tech type.

On the right side of the red border is a modified screenshot that shows how it would look at 1280x1024. Note that there is still plenty space avaiable, so it would likely look agreeable at 1024x768.

It would be much better to do screenshots/mockups at 1024x768 unless there is a reason to do otherwise. Really wide images in the forum are annoying, and it's better not to make anyone guess how something would look with a smaller screen.

[The Silent One]

This is how it would look at 1024x768... but sincerely, I believe most people nowadays have a greater screen resolution than that.


Not much of a difference, really.

I favour the latest toggle button with the tech category icon.

[eleazar]

On the left side of the red border is a suggestion how the tech description panel may look. It's really only a minor change: the panel's header is divided into two areas, the tech icon fills the left area and the text is centered in the right area.
On the right side of the red border is a modified screenshot that shows how it would look at 1280x1024. Note that there is still plenty space avaiable, so it would likely look agreeable at 1024x768.

I still believe the basic arraignment of this mock-up makes the most sense:

Display controls attached to the top so they don't cover up techs (as it does in the current version)
A floating, resizable window really doesn't make sense in this role. You shouldn't have to move the controls around just to see techs on the outside edge.

Tech info in a single, movable, resizable box which includes the "navigation" info, and which disappears when no tech is selected. I see no reason to separate the navigation window from the main tech window. Both describe the same tech. And in disjoining them it creates two items to reposition to see underlying techs.

This is how it would look at 1024x768... but sincerely, I believe most people nowadays have a greater screen resolution than that.

According to these recent statistics, 55% of web browsing happens with 1024x768 screens. While that size is likely to become less popular with the passage of time, it will likely be a very common screen size for 2-4 years.

I favour the latest toggle button with the tech category icon.

But it doesn't look like a toggle button. A glowing button edge doesn't normally have that meaning. There's no reason to reinvent basic button types here.

[Geoff the Medio]

A floating, resizable window really doesn't make sense in this role.

It does if there are differing preferences about where to put the controls.

You shouldn't have to move the controls around just to see techs on the outside edge.

You don't... just drag the tree a bit futher to see the techs. This works the same regardless of where the controls are. Similarly, whether the controls are "floating" or not makes no difference; part of the tree will be not visible because of the space the controls are taking.

Tech info in a single, movable, resizable box which includes the "navigation" info, and which disappears when no tech is selected.

There is no way to not have any techs selected, other than the default condition when you first open the window.

I see no reason to separate the navigation window from the main tech window.

Having them separate makes it possible to arrange the two windows adjacent to eachother, both on a vertical edge of the tree view.

And in disjoining them it creates two items to reposition to see underlying techs.

See above re: repositioning.

I favour the latest toggle button with the tech category icon.

But it doesn't look like a toggle button. A glowing button edge doesn't normally have that meaning. There's no reason to reinvent basic button types here.

Can you suggest something that looks like a standard toggleable button?

[eleazar]

I favour the latest toggle button with the tech category icon.

But it doesn't look like a toggle button. A glowing button edge doesn't normally have that meaning. There's no reason to reinvent basic button types here.

Can you suggest something that looks like a standard toggleable button?

As previously mentioned (between the giant images)
the top one. Though i don't think the slight deviation from black as the background is noticeable.

[The Silent One]

But it doesn't look like a toggle button. A glowing button edge doesn't normally have that meaning. There's no reason to reinvent basic button types here.

The outline design will be intuitive at once (I can claim that after trying out the current buttons, which work very similar to what I described but look a little over-coloured).
Also, with the icon you won't have to read the text after you've gotten used to it. Admittedly, the coloured buttons will do the same, but buttons with icon will be even better looking and more user-friendly than that.

Maybe someone else than Eleazar, Geoff and me has an opinion on that and would like to share it? Please feel welcome to give your opinion!