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
Geoff the Medio
Programming, Design, Admin
Posts: 12422
Joined: Wed Oct 08, 2003 1:33 am
Location: Munich

#16 Post by Geoff the Medio » Sat Sep 30, 2006 12:36 pm

eleazar wrote: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.
Are you referring to on the Research and on the SidePanel of the Production screen, but not the SidePanel when the Production screen isn't open?
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.
I'm confused... The effect of the scrollwheel on the map zoom or sidepanel scrolling is determine by the location of the mouse cursor, not what you last clicked. Unless there some special circumstance you're referring to that I'm not getting...
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.
What does "active window" mean? As above, AFAIK there's no selection of which window is "active" except by mousing over it. Clicking on a window changes nothing, except possibly the z-order of the windows that over lap in some cases.

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

#17 Post by eleazar » Sat Sep 30, 2006 1:33 pm

Geoff the Medio wrote:
eleazar wrote: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.
Are you referring to on the Research and on the SidePanel of the Production screen, but not the SidePanel when the Production screen isn't open?
exactly.
Geoff the Medio wrote:...The effect of the scrollwheel on the map zoom or sidepanel scrolling is determine by the location of the mouse cursor, not what you last clicked.
oops, i miss-analyzed that one. Scratch my second point. It's best as it is

User avatar
LithiumMongoose
Audio Lead Emeritus
Posts: 188
Joined: Fri Jul 25, 2003 1:52 pm
Location: Cincinnati OH, USA

#18 Post by LithiumMongoose » Sat Sep 30, 2006 7:44 pm

I'm gonna throw something out here just for the heck of it to see if it's at all helpful in any way. Apologies if it's not. :)

There's an extremely well-made game out there called Sid Meier's Civilization 4, which has a rather unprecendented level of mod-abiltiy to it for a major and still-current title (all gameplay-related C++ source released as an SDK, a fully moddable Python layer on top of that mostly for UI stuff, and a fully moddable XML layer on top of that for all the stuff XML is good for). I wound up sinking a lot of time into my own big mod for it over the last year, and part of that included a tech tree revamp.

The vanilla Civ4 tree had major issues. Lots of empty space in the grid, lots of long connection lines, and tech placements and progressions that didn't even make any sense in some cases. BUT, the basic structure was fantastic, and that's what I'm getting to with this post.

Take a look at this composite jpg I put together from 5 or so separate in-game screenshots for showing off my revamped tree without ppl having to download my mod. Sorry about the low graphics quality; best I could do and still keep the filesize reasonable.

http://homepage.mac.com/klwelch/Civ4/LM_TechTree.jpg

The way it works, which is what I thought you guys might be interested in for FO purposes, is the white connecting lines are basically OR requirements. Additional tech icons appearing in the top right corner of a tech box indicate auxiliary AND requirements (and have a mouseover in-game naming the icon if you don't happen to instantly recognize it).

The purple text at the top was added later (ie not from in-game) to illustrate the chronological meaning I'd given columns and tech placements and you can pretty much ignore that I guess.

But basically I've found the "OR reqs with arrows plus AND reqs with corner icons" design works wonderfully from the player's perspective, and can support an essentially depthy tree with plenty of branches and interdependencies just about perfectly.

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

#19 Post by eleazar » Sat Sep 30, 2006 8:09 pm

I'm not sure i understand. If i understand how you say it works, it's opposite of what seems logical to me. While lines are much more explicit connections than yet-another-tiny-square-icon, and thus seem to me to be better indicators of a required connection.

Regardless of my preference, i don't think the lines & icons are used consistently. What about "Monotheism"? As i read it this tech requires "Masonry", and for the second prerequisite you have the choice of "Polytheism" or "nothing"? Or "Horseback riding" has only one "Or" connection?


I personally like the idea of different possible prerequisites for Civ techs, but don't know if it is as useful for FO, which has a short tech tree broad at the base, rather than Civ's skinny, tall tech tree.

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

#20 Post by Geoff the Medio » Sat Sep 30, 2006 8:39 pm

eleazar wrote:...FO, which has a short tech tree broad at the base, rather than Civ's skinny, tall tech tree.
Keep in mind there's a lot left to add to the tree, both at the start and later on. Right now, most of the latter theories have no applications, and only one or two refinements exist anywhere... and having more apps/refinements will signfiicantly increase the depth of the tree, and the breadth at the later stages. There's also several yet-to-be created categories, presumably for ships, sociology & governance, espionage, diplomacy, and ground combat... and having more categories will increase the breadth all over, particularly near the ends when they are filled with applications and refinements.

User avatar
LithiumMongoose
Audio Lead Emeritus
Posts: 188
Joined: Fri Jul 25, 2003 1:52 pm
Location: Cincinnati OH, USA

#21 Post by LithiumMongoose » Sat Sep 30, 2006 11:52 pm

eleazar wrote:Regardless of my preference, i don't think the lines & icons are used consistently. What about "Monotheism"? As i read it this tech requires "Masonry", and for the second prerequisite you have the choice of "Polytheism" or "nothing"? Or "Horseback riding" has only one "Or" connection?
No. Monotheism requires "Polytheism and Masonry". Please note I referred to the AND reqs as auxiliary before; they're and'ed onto the end of an OR string which is the white lines. Horseback Riding requires Animal Husbandry, straight up, plain and simple. Writing requires "Pottery or Sailing or Priesthood". A better example would be something like Composites way at the end of the tree on the bottom; it requires "(Space Flight or Advanced Flight) and (Computers and Plastics)".

But point taken as to FO having a more breadthy tree than Civ. I just think it works out really well this way in terms of greatly reducing visual clutter and still being instantly understandable.

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

#22 Post by eleazar » Sun Oct 01, 2006 3:58 pm

Geoff the Medio wrote:Keep in mind there's a lot left to add to the tree, both at the start and later on...
I knew there was supposed to be more items, but this sounds like 2 — 5+ times more tech items in the tree. Making this super easy to use is more important that i thought.

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

#23 Post by eleazar » Wed Oct 11, 2006 9:01 pm

As for the Civ 4 interface, it's prettier, but IMHO not as well designed. You shouldn't have to be thinking in terms of a specific Boolian equation to make sense of a tech tree chart. What we have is a better foundation and can graphicly clarified with the proper use of color.

Since the tech tree will apparently grow much larger, the Queue should be "minimize-able" to give more screen space to the tree. And as stated in the with the previous example, the tech description panel should only appear when wanted. I don't really care where. The player should probably be allowed to move it around.

Image

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

#24 Post by Geoff the Medio » Tue Feb 20, 2007 1:33 pm

I've modified the tech screen. There's now a resizable (see inset) window that holds the category buttons. Also, the options at the bottom for type (theory, application, refinement) and status (researchable, done, unavailable) are changed into buttons, and are placed under these. All buttons are separately toggleable... so you can have whatever combination of categories, types and statuses you want.
Image

User avatar
noelte
Juggernaut
Posts: 872
Joined: Fri Dec 26, 2003 12:42 pm
Location: Germany, Berlin

#25 Post by noelte » Tue Feb 20, 2007 2:25 pm

Hmm, where's the difference to the buttons ahead of the tree-window??
Press any key to continue or any other key to cancel.
Can COWs fly?

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

#26 Post by Geoff the Medio » Tue Feb 20, 2007 3:18 pm

noelte wrote:Hmm, where's the difference to the buttons ahead of the tree-window??
I can't figure out what you're trying to say by this... could you rephrase?

edit: Also, are there any objections or comments on changing the default colour scheme of the research screen, so that tech panels on the tree are coloured like so:

Image

Specifically: 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.

User avatar
noelte
Juggernaut
Posts: 872
Joined: Fri Dec 26, 2003 12:42 pm
Location: Germany, Berlin

#27 Post by noelte » Tue Feb 20, 2007 7:37 pm

Geoff, i'm just wondering why are there now two areas with the category buttons. The one you have marked and the one aligned into two rows. Or is it just the same moveable window and you showed us two possible positions of that one window?
Press any key to continue or any other key to cancel.
Can COWs fly?

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

#28 Post by Geoff the Medio » Tue Feb 20, 2007 8:44 pm

noelte wrote:Or is it just the same moveable window and you showed us two possible positions of that one window?
It's not movable, but is resizable. The marking outline just shows that it's been cut-pasted from two images to show both shapes.

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

#29 Post by eleazar » Wed Feb 21, 2007 2:31 pm

Geoff the Medio wrote:edit: Also, are there any objections or comments on changing the default colour scheme of the research screen, so that tech panels on the tree are coloured like so:

Specifically: 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.
It's a good idea to color "researchable" and "currently un-researchable" techs differently. 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

Contrast can be overdone. Don't use pure white anywhere except the text of the Researched items.


I have other comments, but not much time. I'm moving to a different state this weekend.

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

#30 Post by Geoff the Medio » Wed Feb 21, 2007 3:39 pm

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...

Post Reply