Needed suggestion for tech-screen UI

Development of artwork, requests, suggestions, samples, or if you have artwork to offer. Primarily for the artists.
Post Reply
Message
Author
User avatar
Sandlapper
Dyson Forest
Posts: 243
Joined: Sat Nov 01, 2003 11:50 pm
Location: South Carolina, USA

#61 Post by Sandlapper » Thu Dec 09, 2004 2:27 am

One thing we could try is "mouse over" tech icons. Moving the cursor over the icon temporarily shows the other interconnections besides the primary ascension. No clutter unless you seek it.

Perhaps a "sticky" option to keep some interconnections turned on. Provide colour highlights to the interconnections, perhaps even some "motion" in the lines like a linear pulse. Also, forward and back buttons, as on a browser, would be nice to retrace your steps through the tree.

I like the "ruler" at the top idea, too.

User avatar
Tyreth
FreeOrion Lead Emeritus
Posts: 885
Joined: Thu Jun 26, 2003 6:23 am
Location: Australia

#62 Post by Tyreth » Thu Dec 09, 2004 4:35 am

Don't worry about refinements being prerequisites for other research options. The tree will be deep enough without adding that on.

Think about refinements as leaves on a tree - they are the farthest you can go.

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

#63 Post by tzlaine » Thu Dec 09, 2004 5:33 am

Tyreth wrote:Don't worry about refinements being prerequisites for other research options. The tree will be deep enough without adding that on.

Think about refinements as leaves on a tree - they are the farthest you can go.
I disagree, since undoubtedly some Refinements will be prerequisites for others. If you meant that no Refinements will be requirements for Theories or Applications, I agree. We should make that a formal rule.

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

#64 Post by utilae » Thu Dec 09, 2004 6:22 am

tzlaine wrote:I disagree, since undoubtedly some Refinements will be prerequisites for others.
Heh, I'm sure Tyref mean't that as well.

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

#65 Post by Geoff the Medio » Thu Dec 09, 2004 8:49 am

pd wrote:what about this one:
[image]
it's only one category atm, i'll add more tomorrow, together with some more complex and crossing realtions.
IMO it's better to have prerequisite links connect directly to the techs they allow / are allowed by, rather than joining another prerequisite link at some distance behind the tech being allowed. Eg. connect the link from the leftmost R1 to R2 directly... not to the link connecting R2 to the middle A. This allows one or the other of the links to be hidden without affecting the other, and just seems less arbitrary to me... Why would the connection be made part way along and not somewhere else? This will add some extra parallel connection lines from time to time, but IMO it's probably better...

I made some mockups. Took quite a bit more than 10 minutes though....
Before expanding + with purple lines coming out of it...
Image
After expanding + that had purple lines coming out of it
Image

:arrow: Blue + means there is a hidden tree to expand
:arrow: Cyan + means the tree would be collapsed, but all stuff hidden under it is visible due to other trees being expanded
:arrow: Blue - means expanded tree, showing all immediate contents
:arrow: Blue lines are actual prerequisites
:arrow: Purple lines are prerequisites for which the tech to the left isn't an actual prerequisite, but where the prerequisite is hidden in the collapsed tree of the tech to the left.
:arrow: All lines enter techs on the left and leave on the right, and do so horizontally, in order to look nice
:arrow: Techs have only one line coming out to the right, which goes into a circle with a + or - in it, with which to expand / collapse the tree. Techs can have multiple lines going into their left side... though this is debatable.
:arrow: Lines enter (from left) circles horizontally, from after leaving (from right) tech just to the left of the circle
:arrow: Lines leave + or - circles at one of five angles... which would limit each tech to unlocking five subsequent techs, but this isn't an important rule
:arrow: Only techs that are visible on tree have purple or blue prerequisite lines shown.
:arrow: Expanding a tree can shift stuff to the right to make room for techs that need to be to the left of what was previously visible
:arrow: Not shown, but expanding a tree can make a blue + into a cyan + by unhiding a tech in the tree, meaning all techs hidden by formerly blue + are now visible (so + becomes cyan)

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

#66 Post by noelte » Thu Dec 09, 2004 9:22 am

hmm, imo those + and - confuse people, at least me ;-)
IMO it's better to have prerequisite links connect directly to the techs they allow / are allowed by, rather than joining another prerequisite link at some distance behind the tech being allowed
I agree, that's more clear, maybe we can add some kind of button at the place where a link connects to tech. Hitting that button will focus on the tech on which the other tech depends on.
Press any key to continue or any other key to cancel.
Can COWs fly?

User avatar
Ablaze
Creative Contributor
Posts: 314
Joined: Tue Aug 26, 2003 6:10 pm
Location: Amidst the Inferno.

#67 Post by Ablaze » Thu Dec 09, 2004 9:31 am

Here's a very quick and very rough sketch of what I am planning on doing for my tech tree. It seems like it would look good here too:

Image

That thing in the middle is the trunk and dragging the mouse rotates around and moves the view up and down the trunk. All the nodes are in some specific 3D space with the more advanced techs being higher up.
Time flies like the wind, fruit flies like bananas.

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

#68 Post by Geoff the Medio » Thu Dec 09, 2004 10:02 am

noelte wrote:hmm, imo those + and - confuse people, at least me ;-)
How so?

If it's the meaning of blue vs. cyan, that can be represented another way...
Ablaze wrote:That thing in the middle is the trunk and dragging the mouse rotates around and moves the view up and down the trunk. All the nodes are in some specific 3D space with the more advanced techs being higher up.
A 3D tech tree seems like a good idea, and I hope you can get a workable system figured out, but I'm somewhat doubtful the interface will be easy to use...

User avatar
Daveybaby
Small Juggernaut
Posts: 724
Joined: Mon Sep 01, 2003 11:07 am
Location: Hastings, UK

#69 Post by Daveybaby » Thu Dec 09, 2004 10:25 am

tzlaine wrote:
Tyreth wrote:Don't worry about refinements being prerequisites for other research options. The tree will be deep enough without adding that on.

Think about refinements as leaves on a tree - they are the farthest you can go.
I disagree, since undoubtedly some Refinements will be prerequisites for others. If you meant that no Refinements will be requirements for Theories or Applications, I agree. We should make that a formal rule.
IMO refinements should never be be prerequisites, either for other techs or for other refinements (*except* for further refinement of the same base tech).

@Geoff : I likey your scheme. The +/- thing makes perfect sense, but thats probably because its a common windows UI way of doing things. You can probably lose the colour coding though, its not really imparting any critical information that couldnt be inferred from the diagram anyway - better to keep colour coding for really important things, such as tech categories etc.

@Ablaze : Nice idea, and i'm sure it would look very impressive. However, i get the feeling that in practice it would make people's brains bleed trying to figure out what was going on.


An idea for tech trees in general : Clicking on a tech on the tech tree should 'focus' the tree on that tech. One of the effects of this focus would be that the tech tree is 'pruned' to show only the information relative to that tech, i.e. show all of its immediate prerequisites, and all of the techs it is a prerequisite for, but nothing else. At this point the user can either:

* Click on a prerequisite tech to set that tech as the focus (and see its own prequisites).
* Click on the same tech again to revert back to the full tree.
Last edited by Daveybaby on Thu Dec 09, 2004 10:35 am, edited 1 time in total.
The COW Project : You have a spy in your midst.

User avatar
Kharagh
Pupating Mass
Posts: 97
Joined: Sun Nov 21, 2004 12:51 pm
Location: Germany

#70 Post by Kharagh » Thu Dec 09, 2004 10:33 am

I think we won't be able to make the tech-tree that easy to use anyway. As I see it we will have loads of theories, applications and refienements and however we decide to display them, the tree will be at least a little bit complicated.
Ppl will need some time to get used to handling it, but that is no reason to simplify it in any way, as the tech-tree is one of the most important aspects of the game.

The more technologies, the more freedom, and the more freedom in a game, the more fun it is to play.

The most important thing imo is not to make the tech-tree icons too big. You get a much better impression of the tree if you can see a larger part of it. Making it zoomable would be best, I think.

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

#71 Post by pd » Thu Dec 09, 2004 10:34 am

it's better to have prerequisite links connect directly to the techs they allow / are allowed by, rather than joining another prerequisite link at some distance behind the tech being allowed. Eg. connect the link from the leftmost R1 to R2 directly... not to the link connecting R2 to the middle A.
i can't agree with this. while my proposed system doesn't allow as much expanding/collapsing as your system, it still looks so much more organized. and easier to understand imho. also, there is absolutely _nothing_ arbitrary in it.
i can't think of a case that is not possible to display via this tree approach.

back to your approach:
the fact that you needed 12 sentences to explain what's going on speaks for itself.... gernerally speaking i don't think it's very userfriendly. might also be harder to code.

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

#72 Post by Geoff the Medio » Thu Dec 09, 2004 11:11 am

pd wrote:
it's better to have prerequisite links connect directly to the techs they allow / are allowed by, rather than joining another prerequisite link at some distance behind the tech being allowed. Eg. connect the link from the leftmost R1 to R2 directly... not to the link connecting R2 to the middle A.
i can't agree with this.
Why?
while my proposed system doesn't allow as much expanding/collapsing as your system, it still looks so much more organized.
Much more organized? How so? Keep in mind that it probably helps that none of your lines cross over/under other lines, but in practice, it might be difficult to make that happen. My mockup is rather densely linked and busy in order to demonstrate the various features I'm proposing. A real tree could be designed to be better organized, like your mockup appears.
and easier to understand imho.
I agree the expanding / collapsing stuff is harder to understand than having everything always visible, but IMHO being able to prune branches you don't care about on the fly in the GUI is worth the confusion while you learn how things are represented. The tree can be initially presented fully expanded, if that helps. Then my system is essentially the same as yours, except I have some 45 degree angled connectors.
also, there is absolutely _nothing_ arbitrary in it.
Can you explain the placement of the connections between lines on your mockup then? They're the main thing that seemed arbitrary...
i can't think of a case that is not possible to display via this tree approach.
Nor can I. (My version is intended to allow hiding of information, not to extend what can be displayed)
the fact that you needed 12 sentences to explain what's going on speaks for itself....
Six of the 12 are minor stylistic points. The other six could be summarized:

Tree roots can be expanded to show or collapsed to hide techs that have the root as a prerequisite. Prerequisite lines are drawn from all visible techs to all visible prerequisites, or the root of the tree in which the hidden prerequisites are located.

I was verbose so as to be explicitly clear about the rationale behind the mockup.
gernerally speaking i don't think it's very userfriendly.
If it's hard to understand the expanding / collapsing, everything can be expanded to revert to essentially your mockup, aside from the lines connecting to techs or other lines issue. The option to collapse is available if desired, which seems more user-friendly than always showing the full tree, including branches the player doesn't care about.
might also be harder to code.
Would definitely be harder to code.

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

#73 Post by pd » Thu Dec 09, 2004 5:16 pm

geoff wrote:
pd wrote:
it's better to have prerequisite links connect directly to the techs they allow / are allowed by, rather than joining another prerequisite link at some distance behind the tech being allowed. Eg. connect the link from the leftmost R1 to R2 directly... not to the link connecting R2 to the middle A.
i can't agree with this.
Why?
i told you... because it's more organized.
geoff wrote:
while my proposed system doesn't allow as much expanding/collapsing as your system, it still looks so much more organized.
Much more organized? How so? Keep in mind that it probably helps that none of your lines cross over/under other lines, but in practice, it might be difficult to make that happen. My mockup is rather densely linked and busy in order to demonstrate the various features I'm proposing. A real tree could be designed to be better organized, like your mockup appears.
actually i've come to the conclusing, it's better to use as few links as possible, because if you link too much you will force the player to research everything. we should allow the player more freedom in the decision which way he chooses to go in the tree.

take a look at this one:
Image
we have those 2 open connections and we could simply combine them(like in my other tree). it would probably guide into the next theory. the benefit is, it would again allow more freedom, because it offers two ways to go. it also keeps the tree closely. the only problem i see is that the following theory doens't have fixed requirements.

if we don't combine them the tree will spead more and more. we could prevent this with just removing one connection. but then again, you would force the player in one direction...
geoff wrote:
might also be harder to code.
Would definitely be harder to code.
it would be nice if we could come up with a xml representation of the techtree to minimize the coding effort instead of letting the code build the tree.

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

#74 Post by BreadMan » Thu Dec 09, 2004 8:16 pm

@ Lots of people:
[generalizing] its ok if the UI is confusing because people will eventually get used to it when they play...
no no no no no no NO. WORST thing you could ever say about UI design. This is where bad design comes from! There is always a simple way to do it, if there isn't then the design requirements need to be reevaluated.

I'm kinda getting that most people here don't have a lot of design background, so let me quote some design principles which seem obvious but nobody ever follows:

§ Affordances – does it look like it should be used the way it is supposed to be used?
§ Mapping – does the design of the control suggest the effect of its use?
§ Feedback – does the tool provide (visible) evidence that you did what you wanted to do?

Run through these questions everytime you're evaluating an idea guys, and be objective. Don't get fixed on something just cause it's "your" idea and don't get offended if people criticize.

Ok that was a rant, and I take some of it back cause I was forgetting that what we're doing is brainstorming and getting ideas out, and sometimes the bad ideas lead to new better ideas. (For instance, a 3D tree may not be very feasible but at least Ablaze is thinking outside the box, and maybe it could just work if it was well thought out) Anyway, keep an open mind is all I'm saying.

@ Geoff's latest diagram
I don't think its so much that people don't understand the expand / collapse idea, I think its just the way you're showing it. Just having a little (+) on the line with nothing else around it isn't very intuitive, and hard to find in that big web of things. I had to look at your two diagrams pretty hard before I could find what was different between the two. Needs to be more indication that something will happen by clicking there, like an icon next to it or something. Also I think just the way you've got everything arranged is confusing, hard to see any natural progression of things, kinda scattered. Changing the lines to arrows would help immenseley. Same for pd's.

And also, while many of these diagrams look good, they're still all just small parts of what is probably going to be a huge tech tree. While they may work on a smaller scale, they're gonna get a lot more confusing when you have to deal with 40x the info (and that's not an exaggeration, I estimate each category will have about 8x as many techs as can fit on this page, and there's five categories).
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
pd
Graphics Lead Emeritus
Posts: 1924
Joined: Mon Mar 08, 2004 6:17 pm
Location: 52°16'N 10°31'E

#75 Post by pd » Thu Dec 09, 2004 8:39 pm

Changing the lines to arrows would help immenseley. Same for pd's.
in my case they are not necessary. it's obvious in what direction it's going.

edit: same for geoffs... you just need to know, that it's not possible to go backwards, which is well... obvious.

Post Reply