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

Research Screen GUI Enhancement

#1 Post by eleazar »

In a lot of ways i'm impressed with the GUI, most of it works well, which doesn't happen by accident it a game this complex. 8) But there seems to be a consensus in the threads i've read, that the GUI could be visually enhanced. I'd like to take a stab at creating an improved concept.

I'll start with the Research Screen, since it seems to be the simplest, most polished, and perhaps most importantly, i feel like i know what everything is supposed to do. Then if my ideas are well-received, i'll move on to try to bring a similar treatment to the rest of the game.

My goals are (in order of importance)
  • 1) Usability
    2) Clarity
    3) Repeatability
    4) Coolness
    5) Not fixing what isn't broken
So, my questions:

1) Is there any other content that should go in the Research screen?
2) Most of the GUI seems to be vectors. Is that purposeful? Are the performance trade-offs?
3) Is there a thread discussing the Research Screen that i just missed?
4) There seems to be a strong correlation between most of the 5 catagories of research and the 5 areas of production each planet has. (Economics = Trade) Shouldn't we just use the same colors in each instance?
5) We can do little tooltips for a few second mouseover, right? Not that i'd want to put too much into tooltips, but they can give you the freedom to use more icons— which makes internationalization easier.
6) What happens if the name of a tech is longer than the standard box?
7) semi-Transparency places a greater load on the system than pure opacity, right?
Last edited by eleazar on Wed Apr 25, 2007 3:26 am, edited 2 times in total.

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

Re: Enhancing the GUI

#2 Post by Geoff the Medio »

eleazar wrote:1) Is there any other content that should go in the Research screen?
There's potential in future for stuff related to espionage-sourced research as separate from domestically-done research. The two should probably be distinct in appearance. Also, the techs on the queue and the tree aren't very attractive at the moment. pd had some suggestions
2) Most of the GUI seems to be vectors. Is that purposeful? Are the performance trade-offs?
As in they are procedurally generated, rather than bitmaps? There's a variety of reasons... including that tzlaine is a programmer, not an artist, and was writing a general GUI library (GG) not a specifically themed one. I'm not sure if he's planning to make GG GUIs easily skinnable or not. Procedurally generated windows are also easy to resize and reconfigure and rearrange the contents of...
3) Is there a thread discussing the Research Screen that i just missed?
There was one here, though many of the example images are gone. Some of the stuff from here is probably also applicable.
4) There seems to be a strong correlation between most of the 5 catagories of research and the 5 areas of production each planet has. (Economics = Trade) Shouldn't we just use the same colors in each instance?
There isn't a 1 to 1 correspondance. Production has Industry and Minerals in it. Construction doesn't have any resources directly in it.
5) We can do little tooltips for a few second mouseover, right? Not that i'd want to put too much into tooltips, but they can give you the freedom to use more icons— which makes internationalization easier.
I'm quite keen on icons with tooltips to convey lots of info without too much text clutter. The functionality exists in GG, though isn't presently enabled in the FO engine, though changing that wouldn't be a big job, AFAIK.
6) What happens if the name of a tech is longer than the standard box?
Right now, it gets chopped off. Try to make the box big enough. I might need to rename a few techs / abbreviate.
7) semi-Transparency places a greater load on the system than pure opacity, right?
Use what is most functional and looks good. Optimization can be done later if necessary.

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

Re: Enhancing the GUI

#3 Post by eleazar »

Thanks. A little follow-up..
Geoff the Medio wrote:
eleazar wrote:1) Is there any other content that should go in the Research screen?
There's potential in future for stuff related to espionage-sourced research as separate from domestically-done research. The two should probably be distinct in appearance. Also, the techs on the queue and the tree aren't very attractive at the moment. pd had some suggestions
Can you explain or link to what espionage-sourced research is? It's not just techs that you've stolen? If so i don't see why they would need to be treated differently.
3) Is there a thread discussing the Research Screen that i just missed?
There was one here, though many of the example images are gone. Some of the stuff from here is probably also applicable.
I haven't completely read these, but these links look like the discussion that led up to the creation of the current research interface. I should have specified that i was looking for ideas about taking this UI further.
4) There seems to be a strong correlation between most of the 5 catagories of research and the 5 areas of production each planet has. (Economics = Trade) Shouldn't we just use the same colors in each instance?
There isn't a 1 to 1 correspondance. Production has Industry and Minerals in it. Construction doesn't have any resources directly in it.
But still (if i understand) there's There's a strong connection between food—growth, trade—economics, and science—learning. Those colors should match and different colors should be chosen for the rest.

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

Re: Enhancing the GUI

#4 Post by tzlaine »

eleazar wrote: My goals are (in order of importance)
  • 1) Usability
    2) Clarity
    3) Repeatability
    4) Coolness
    5) Not fixing what isn't broken
I agree 100% with 1 and 5. Isn't 2 subsumed by 1? If not, what exactly do you mean by clarity? I just plain don't understand 3. 4 is a pretty low priority for me.

Some background: I was begging for input on the Tech UI for a long time, and got almost nothing. Then, for about 6 weeks, I got some discussion leading to a design very close to what we have now. I implemented that. Then I got notes, and the design changed to what we have now. I am unwilling to do any more programming on the Tech UI to make it look better, because I have a whole program to write. I can't keep rewriting things that are "good enough" and make any forward progress. Almost as important is that I need to feel like I'm making forward progress to stay motivated. Note that this resistance does not apply at all to making the UI more usable or extending it. I definitely want to add things or change things that add utility, but I'm unwilling to redo things like the tech panels, if it's because they're not pretty enough.

Now, answers to your specific questions:
2) Most of the GUI seems to be vectors. Is that purposeful? Are the performance trade-offs?
As pointed out by Geoff, they're easier to scale. We support arbitrary screen sizes. This doesn't apply to everything, since the tech panels for instance are fixed sizes, but the need for scalability has definitely put me in the mindset of doing everything as vectors. That, and no one has ever given me UI textures to incorporate, though I've asked for them many, many times.
5) We can do little tooltips for a few second mouseover, right? Not that i'd want to put too much into tooltips, but they can give you the freedom to use more icons— which makes internationalization easier.
GG (my GUI library, on which FO is built) has very extensive support for tooltips. You can have arbitrary levels of tooltip, such as one tooltip for a 0.25-second hover, a more expanded one for a 1.5-second hover, or a really expanded one for a 3-second hover, or whatever. You can also put anything in them, not just text -- graphics and so forth are ok, but they're not interactive, so no buttons or anything like that. I'd really like to see all our UIs have tooltips, but haven't gotten around to putting in good hooks for non-programmers to use.
7) semi-Transparency places a greater load on the system than pure opacity, right?
No. But, as Geoff alluded to in his post, even if it were, "Premature optimization is the root of all evil."

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

Re: Enhancing the GUI

#5 Post by eleazar »

Clarity and Usability (as i was using the terms) are similar, But a GUI that emphased Clarity over Usability would be easier for newbies to get used to, because the function of various elements would be more explicity stated, but as user grew more expert, that extra explanation would tend to get in the way.

By Repeatability I meant that ideas should be preferred that could easily be applied to other situations.
tzlaine wrote:Some background: I was begging for input on the Tech UI for a long time, and got almost nothing. Then, for about 6 weeks, I got some discussion leading to a design very close to what we have now. I implemented that. Then I got notes, and the design changed to what we have now. I am unwilling to do any more programming on the Tech UI to make it look better, because I have a whole program to write. I can't keep rewriting things that are "good enough" and make any forward progress. Almost as important is that I need to feel like I'm making forward progress to stay motivated. Note that this resistance does not apply at all to making the UI more usable or extending it. I definitely want to add things or change things that add utility, but I'm unwilling to redo things like the tech panels, if it's because they're not pretty enough.
I wish i had found this project earlier. :wink:
I believe these ideas, make the research screen easier to use. I guess you'll have to judge weather my ideas enhance usability or only change the aesthetics. I don't have any new funtionality to add, (unless there's somthing missing from the screen that i'm not aware of.) I respect that you will have to make the call on how to spend your time improving the game, if for no other reason than that it's your time.

So is there any visual aspect of the GUI you want an artist's input on? With a little more work i'll probably post my ideas for the Research screen anyway, for whatever value they may be. But if i have something to contribute i'd rather work were the need it greatest.

I did go over to the GiGi home page, and see what i could learn, but i'm afraid most of the specifics were too technical for me. :?

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

Re: Enhancing the GUI

#6 Post by tzlaine »

So is there any visual aspect of the GUI you want an artist's input on? With a little more work i'll probably post my ideas for the Research screen anyway, for whatever value they may be. But if i have something to contribute i'd rather work were the need it greatest.
Not atm, though when we start doing the combat system (which is at least on the horizon, if not real soon), some artist input would definitely be appreciated.
I did go over to the GiGi home page, and see what i could learn, but i'm afraid most of the specifics were too technical for me. :?
Yeah, I have really good docs for GG if you're a programmer, and basically nothing for artists who want to figure out what the capabilities are. I'm not sure what to do about that exactly, other than to say that GG itself is totally flexible wrt the graphical representation of its windows and controls. That is, you can write code to make a button with vector graphics or bitmaps, as you prefer. As for its other facilities, I guess you'll have to ask if you want to know if it can do X.

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

#7 Post by eleazar »

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

Image

• "Reseach" now appears once in the upper left, emphasized with white type.

• The box under research isn't divided into little pieces

• Transparency to the map screen is removed since it was cluttering up the tech tree display, and it has no bearing on reseach.

• All the controls for modifying the tech tree display are put together on the top. Catagory buttons take on their tech's color. "Zoom in" and "Zoom out" buttons are added for those without scroll wheels. Text description of the display modifiers are simplfied.

• Electric blue is used as a selection and hightlight color.

• Each Tech displays it's own icon. Yes, you loose a little text space, but all large zooms the text is unreadable, but the icon might be recognisable.

• For clarity the lines between techs originate together at the right end.

• Applications have a more distinct shape (see collective thought network)

• Scroll bars are wider.

Restracted:• Scroll bar will highlight when mousewheel will move them (not shown)

•Tech Descriptions only displays at the bottom when a tech is selected. Otherwise that space is free to display the tech tree. This box is slightly transparent because what's behind is relevant.
• This box also takes up as much vertical space as neccesary to avoid scrolling through the description. (this would be a bad idea if the descriptions get very much longer)

• Tech Description is reorganized.

• Two small icons near upper left of text description toggle between the "verbose" and "simple" description text.

• No longer is there a white box around the whole screen.
Last edited by eleazar on Sat Sep 30, 2006 1:37 pm, edited 1 time in total.

User avatar
utilae
Cosmic Dragon
Posts: 2175
Joined: Fri Jun 27, 2003 12:37 am
Location: Auckland, New Zealand

#8 Post by utilae »

Very good Eleazar.

1)The description text window (that is transparent and over other techs) should have that space for itself, not be transparent. The vertical scroll section should end at the top of the description text window (horizontal scrollbar position at top of description text window as well). The reason is that the player cannot interact with the techs behind the description text window, they have to scroll down. It seems obvious to remove any temptation for the user to try and click on those techs in the background for the description text window.


2)I never really liked the idea of having the techs in a big web like that, so you have to scroll vertically and horizontally. I guess with prerequisites as detailed as we have them, we have to do this. But if prerequisites were simpler (eg all level 2 techs unlocked if 75% of level 1 techs researched) then you could have a grid system scrolling only horizontally (each column is a level, with X techs in each column, eg with 5 in each and 20 levels it would be a 5x20 grid). I think this system would be much easier for the user, and might even look good, heh. Probably too late though. :)

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

#9 Post by Geoff the Medio »

eleazar wrote:• "Reseach" now appears once in the upper left, emphasized with white type.
I quite dislike the extra window title bar at the top of the research and production screens. It's a waste of space, and on the production screen it also shifts the sidepanel down, which I especially hate.
• Transparency to the map screen is removed since it was cluttering up the tech tree display, and it has no bearing on reseach.
Have to disagree... Having the map partly visible keeps the whole game visibly connected, rather than separate unrelated interfaces, and the stars / lanes are sufficiently faded to not visibly interfere with the foreground techs and lines.
• All the controls for modifying the tech tree display are put together on the top.
While theoretically good (keep all controls together), I'm not sure this is really necessary. The tech buttons are somewhat like tabs for each category's techs (though hopefully will be independently togglable later...). Having the statuses (statii?) and types options below breaks this association visually. Also, having the status/type options between the category buttons and tree means that the mouse has to move extra distance between the two, which is bad because they're probably the most commonly used. Also also, the status/type options are conceptually different enough from the categories that putting them at the bottom isn't objectionable to me.

The statii and types should be independently togglable though, just like the categories. So you'd have on/off for each of researchable, researched and unavailable, as well as theory, application and refinement.
"Zoom in" and "Zoom out" buttons are added for those without scroll wheels.
Might be better to have a vertical slider over top the tree ala google maps. Shows the available range of zooms, lets the player zoom all the way in/out with one motion, not multiple clicks.
• Electric blue is used as a selection and hightlight color.
This conflicts with the category colours... Is there a problem with just a white outline, or a selection indicator of some sort?
• Each Tech displays it's own icon. Yes, you loose a little text space, but all large zooms the text is unreadable, but the icon might be recognisable.
I could go either way on this, though I don't think the icons are very well suited to display at various zoom levels, particularly not while shrunk down, at which point they'll probably be rather difficult to distinguish...

It might be nice to have techs that are moused over enlarge themselves (ala MacOS icons in a row that biggify when mouse over) so as to make them more readable. The point of the zoomed out view would be to see the overall tree structure... you'd have to mouse over or zoom in to read most techs names easily though... which is likely unavoidable.
• Scroll bar will highlight when mousewheel will move them (not shown)
Which is never... (?)
•Tech Descriptions only displays at the bottom when a tech is selected. Otherwise that space is free to display the tech tree. This box is slightly transparent because what's behind is relevant.
Why move it to the bottom? At the top is consistent with the research screen, which has a buildable items list at the bottom.
• This box also takes up as much vertical space as neccesary to avoid scrolling through the description. (this would be a bad idea if the descriptions get very much longer)
If it's resiziable, it might as well be player-controlled resizing, not automatic.
• Tech Description is reorganized.
explain...?
• Two small icons near upper left of text description toggle between the "verbose" and "simple" description text.
Why not have summary at the top of the description, and more detail below, with scrollbar if necessary? I don't see the use for two buttons for this... I had suggested and effects button and a description button previously, though in practice I don't see the need to make the distinction; in practice theories have lots of fluff and no effects, while applications have little fluff and effects described.

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

#10 Post by eleazar »

Geoff the Medio wrote:
eleazar wrote:• Transparency to the map screen is removed since it was cluttering up the tech tree display, and it has no bearing on reseach.
Have to disagree... Having the map partly visible keeps the whole game visibly connected, rather than separate unrelated interfaces, and the stars / lanes are sufficiently faded to not visibly interfere with the foreground techs and lines.
Maybe in some circumstances it's not a problem, but tech trees are inherently complicated items. It's bad UI design to add pointless complications to what is already hard to visually digest. Sure a player can understand and use the version with transparency, but he has to work harder to do so.

Image

I'm not going to address the rest of Geoff's comments except to say that a vertical zoom slider is a good idea.


utilae, something about the way you construct your sentences makes your meaning hard for me to grasp. It took 3 or 4 reads before i was reasonably sure what you meant. Please spend a little more effort towards clarity. However, if english isn't your first language, i can appreciate the difficulty of learning our crazy language.

User avatar
utilae
Cosmic Dragon
Posts: 2175
Joined: Fri Jun 27, 2003 12:37 am
Location: Auckland, New Zealand

#11 Post by utilae »

eleazar wrote:
Geoff the Medio wrote: Have to disagree... Having the map partly visible keeps the whole game visibly connected, rather than separate unrelated interfaces, and the stars / lanes are sufficiently faded to not visibly interfere with the foreground techs and lines.
Maybe in some circumstances it's not a problem, but tech trees are inherently complicated items. It's bad UI design to add pointless complications to what is already hard to visually digest. Sure a player can understand and use the version with transparency, but he has to work harder to do so.
I agree with Eleazar. The tech tree is such a complicated thing to look at, the player will thank you for having the background opaque.
eleazar wrote: utilae, something about the way you construct your sentences makes your meaning hard for me to grasp. It took 3 or 4 reads before i was reasonably sure what you meant. Please spend a little more effort towards clarity. However, if english isn't your first language, i can appreciate the difficulty of learning our crazy language.
Sigh, english is my first language :p Anyway, I was trying to refer to the tech description box that you have as transparent. Saying how it should not be transparent, I see no reason for it.

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

#12 Post by eleazar »

utilae wrote:...I was trying to refer to the tech description box that you have as transparent. Saying how it should not be transparent, I see no reason for it.
I wouldn't fight for that box to stay transparent, but since the UI is currently very transparency heavy, i left it to maintain some consistancy.

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

#13 Post by pd »

I haven't read through all this, just wanted to share my thoughts about this:
transparency to the map screen is removed since it was cluttering up the tech tree display, and it has no bearing on reseach.
I second this. Didn't like the transparency at this screen my self.
All the controls for modifying the tech tree display are put together on the top. Catagory buttons take on their tech's color. "Zoom in" and "Zoom out" buttons are added for those without scroll wheels. Text description of the display modifiers are simplfied.
I don't like the controlls at the top and the tech descriptions at the bottom.
If I click on a tech, I want to read about it, I don't want to look at the bottom at the screen to do so. The description should be at the top.
Also I asked for the possibility to zoom in and out since ages.
Electric blue is used as a selection and hightlight color.
Looky like cyan to me, I don't like it. Techs could probably highlight in their own color.
Applications have a more distinct shape (see collective thought network)
True we need more destinction here.
Scroll bars are wider.
Maybe not the scroll bars itself should be wider, just the clickable area. This way it doesn't look that chunky.
Scroll bar will highlight when mousewheel will move them (not shown)
Maybe every clickable item should highlight, once the mouse is hovering about it.

I'm in a hurry now. I'll be back on sunday.

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

#14 Post by Geoff the Medio »

pd wrote:Techs could probably highlight in their own color.
I thought you were against having much of any colour on tech on the tree? (here) Or is this different because it's just one colour, for the selected tech, at a time, and not the whole tech box, but just the outline?
Maybe every clickable item should highlight, once the mouse is hovering about it.
There was some discussion between tzlaine and I regarding what should highlight when moused over. Right now, buttons (including on number spinners), scrollbar tabs (not sure why this in particular is being re-suggested...), radio buttons, check boxes, tech quicklink buttons at the top-right, planets and fleets (via enlarging) do. What else do you (pd or eleazar) have in mind? For reference, from an email:
tzlaine wrote:The things I left undone are all the techs in the tree and queue (since they're drag-droppable or double-clickable items, not single-click action items like buttons), and the drop-down lists. The drop-down lists are left out because they are not doable without changing the GG::ListBox implementation in a fairly fundamental way. I can't justify making this change, with all its possible ramifications elsewhere, for such a small payoff.
eleazar wrote:Maybe in some circumstances it's not a problem, but tech trees are inherently complicated items. It's bad UI design to add pointless complications to what is already hard to visually digest. Sure a player can understand and use the version with transparency, but he has to work harder to do so.
A reasonable point, and that example image you posted effectively illustrates when it can be a problem. ...Odd that I dislike the map parallax starfield and like this transparency, but everyone else like the opposites...
I'm not going to address the rest of Geoff's comments except to say that a vertical zoom slider is a good idea.
Could you explain what you mean by "Tech Description is reorganized.", and what you mean by scroll bars highlighting when mousewheels will move them? For the latter, is this unrelated to the tech tree view, on which the scrollwheel zooms instead of scrolling in the plane? I'd also like to know why you wanted to move the tech description to the bottom, though the other two are more important if you're disinclined to humour me.
pd wrote:Also I asked for the possibility to zoom in and out since ages.
Are you referring to zooming itself, or buttons to zoom without a mousewheel? The zooming has been in the SVN version for several months...
Maybe not the scroll bars itself should be wider, just the clickable area. This way it doesn't look that chunky.
I'm not sure what you mean... By wider, do you mean longer in the direction that the bar moves, or the direction perpendicular to that? The latter would mean something like the lower of the two in this image (the upper is what we have now):
Image

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

#15 Post by eleazar »

Some explanation:
eleazar wrote:• Scroll bars are wider.
By "wider scrollbars" i simply want a "fatter" area to click, throughout the game. The target is a noticeably skinnier than "standard scrollbars." Also in fullscreen mode there are about 6 pixels of dead space between the end of the clickable zone and the edge of the screen, thus unnecesarily failing to take advantage of Fitt's law.
http://en.wikipedia.org/wiki/Fitts'_law
eleazar wrote:• Scroll bar will highlight when mousewheel will move them (not shown)
Retracted: This is a slightly more esoteric idea, which i should have explained more. It also could be applied accross the UI. Say you were playing FO and stopped for a few minutes to talk to somebody. You are in the galaxy-map with a sidebar up. You don't remember what the last thing you clicked was. You want to zoom the galaxy map. Will the scroll-wheel zoom the map or scroll the sidebar? The UI give you no way of knowing without remembering clicks. It's non-optimal if the user cannot tell by looking at the screen what the consequences of a particular action will be.

Thus i propose graphicly emphasizing the scrollbar (or in the future, zoom-slider) of the active window, since the only significant effect of a window being active (currently) is that it takes all scroll-wheel input.
Last edited by eleazar on Sat Apr 28, 2007 5:56 pm, edited 3 times in total.

Post Reply