Graphically Navigating SarcomaHelp.org
An ESUN Article
I have been exploring graphical interfaces to navigate around the wealth of information found on the SarcomaHelp.org web site for people who might also like to experiment with an alternative approaches to locating information on the Internet. From my perspective, such interfaces are not meant to replace conventional menus, tabs, and pull downs, but are meant to augment them. I have placed one of the interfaces I have been working with on WebBrain.com. When you click on this link, the screen shown in Fig. 1 should appear in your browser window. You may find it very helpful to read this brief "Guide" before using this interface for the first time.
![]() |
There is an "upper" pane, where a "graph" of the web site is shown and a "lower" pane where notes, web pages, and other material are displayed. In the above figure, the upper pane contains a high-level graph of the sarcomaHelp.org website and the lower pane contains a brief introduction to the SarcomaHelp.org web site.
Each "node" in the graph has a name, e.g., "SarcomaHelp", "Sarcoma Learning Center", "The Clinical Trials Learning Center", and "ESUN". The names are indicative of the content that the node will lead you to. One of the nodes, called the selected node (or active node) has a red rectangle surrounding its name. In the case of the above figure, SarcomaHelp is the selected node. If you click on the "Sarcoma Learning Center" node it will become the selected node and will reveal information associated with this learning center as shown in the screen in Fig 2.
![]() |
Some nodes contain a small icon in addition to their name. Clicking on the icon will take you to a webpage, open an Adobe PDF document, play a FLASH video, etc, all depending on what the icon represents. The small Internet globe icon will retrieve a web page. If you click on this icon in the Sarcoma Learning Center node, for example, you will see information appear in the lower pane as shown in Fig. 3.
You could scroll through the information on this web page using the scroll bar on the right hand edge of the lower pane, but this would get pretty tedious since the size of the pane is so small. There are several useful ways to adjust the size of the panes. Notice the two arrow heads and the diamond in the upper right hand corner of the lower pane, i.e.,
If you click on the upward pointing arrow head, the content in the lower pane will fill the window as shown in Figure 4. If you click on the downward pointing arrow head, the graph of the web site will fill the entire window as shown in Figure 5. If you click on the diamond (a combination of the upward pointing and downward pointing arrow heads), you’ll restore the panes to their positions as shown in Figure 3.
![]() |
![]() |
You can also adjust the amount of space the upper pane and lower pane occupy by placing your cursor on the boundary between the two panes. When the double-headed arrow appears, you click and can move the boundary where you would like it.
You can also adjust the size of the type in the graph. When you place your cursor slightly above the selected node’s red surrounding box, a small green "sizing" circle will appear,

You can click on it and drag it outward to increase the text size and inward to decrease the text size.
You can position the graph in the upper pane vertically by clicking on the black background and then moving upward or downward.
Note the row of node names at the top of the window. These are quick "links" into the graph. For example, if you click on the "Clinical Trials Learning Center", it will immediately take you to that node in the graph and make it the selected node. Note the row of node names at the bottom of the window. This is a sequence of "breadcrumbs" showing you how you navigated to the current place displayed on your screen. Clicking on any one of them will immediately display that node as the selected node.
You can search the entire SarcomaHelp.org graph using the search box in the lower left hand corner of the pane containing the graph. Here, for example, I have keyed in "mo":
A list of all the nodes containing a word beginning with "mo" appears. Clicking on any of these links and the node will appear as the selected node. There are some additional navigation aids in the upper right hand corner of the upper pane,
Clicking on the home icon will take you the top level of the SarcomaHelp graph. The left and right arrows allow you to go backward and forward among previously opened selected nodes. I encourage you to experiment with the remaining three icons. You will discover a "Normal", "Outline" and "Expanded" view of the graph. When there are many links off of a single node, such as the "Types of Sarcoma" node, the Outline view may be more useful than the Normal view.
I would appreciate any feedback from those of you who experiment with this graphical interface. I hope some of you will find it useful.
V6N6 ESUN Copyright © 2009 Liddy Shriver Sarcoma Initiative.




