Need UI Advice

[mendhak]

Let's start this by looking at the image of the graph I have attached here.

The nodes on the graph represent "topics" and the lines represent "relationships" between those topics.

My question is essentially, "How would I represent this on a web page?"

Before that though, let me explain what the web page will do.

The web page will start by displaying a choice between the initial nodes 1 and 2.

When the user picks node 1, he will be presented with all the relationships available from that node (relationship = line). Once a relationship is picked, the nodes related are shown. And then its relationships, and so on.

The user eventually selects a node and assigns it a "weight" (the purpose of which is irrelevant to our discussion).

At any point, the user may decide that a relationship exists between 1 and 5, and decides to add it.

Or, a user may decide that a new topic can be related to another topic, such as 8 and 9 as shown, and he will decide to add it.

With these 'constraints' (features?) in mind, how would I go about designing a UI for this? In my second attachment, I have shown a very simplistic UI. It is linear, the user selects only one node, and each node/relationship is being represented by a dropdown box.

How would you represent this? What do you think would make it better?

[oceanebelle]

Is this an unlimited topic relationship graph? The user can just add and add and add topics and relate them the way he wants?

[oceanebelle]

Can he remove relationships too? You did not mention that.

[penagate]

You might be able to pull off a tree diagram, that's a possibility. As the user clicks each option the next level of branches is presented. That way you do not need to show all possible branches at any one time.

[oceanebelle]

I'm also thinking... will the user be constrained to start on a two predefined nodes? What If he wants to have a different starting point?

[oceanebelle]

Here is some idea, if it is at all helpful.

The page will show a picture map of the relationships and the nodes.
below it will be the editing of a node part. Sorry if I am thinking frames here.

The idea being the picture / tree will show everything as a picture map or something. The user can then select a node from there as his preferred starting point, in doing so the said node will be highlighted or something.

Below would be three panes. The first one will be the information of the selected node, the second will be the relationhips for that node.. as well as an additional empty relationship holder (for when the user wants to relate it to an existing node).

The third pane will show all the available nodes for the chosen relationship, and the weight input... or a custom entry point (for new nodes).

When the user have selected in the second pane the "new relationship based on existing nodes", the third pane will show all existing nodes.

well that is just my idea... i hope i presented it right though. :s

[mendhak]

Yes, unlimited graph.

No he cannot remove nodes.

The initial nodes are predetermined, but he can traverse anywhere and even end up on some initial node again.

If possible, can you guys make a bad drawing of what you're trying to say?