2

I'm looking for examples, or guidance otherwise on a good model to implement navigation for an application who's data is not linear or hierarchical.

A few examples ... hierarchical information architectures can be very easily visualized as a tree

- thing
  - sub thing 1
  - sub thing 2
  - sub thing 3
- another thing
  - another sub thing

On the other hand, it's simple to push users along a linear info path by doing something like

# Sub Thing 2
this is the current content

[Previous](/subthing1) | [Next] (/subthing3)

However, for a data structure that is neither linear or hierarchical, the answer doesn't seem as clear. One model that might come up is wikipedia, and that navigation is highly dependent on hyperlinks being embedded in the content (totally valid, of course, but not always a possibility). The only other thing that I've really been able to find is to represent the navigation as a literal graph (as in http://www.music-map.com/) ... but this hardly seems usable, because more often than not you'll end up with something that looks like this:

force-directed graph

So what I'm looking for, basically, is ideas and discussion around this topic ... how can navigation for data like this be presented to the user in a way that is still usable and also focuses on the "current" piece of content (as opposed to simply centering a graph on the active node). Thanks!

3

I think non-linear navigation is very common, but maybe is a terminology matter (English isn't my native language). Anyways, just for reference, take a look at the image below from Oracle Alta Documentation showing non-linear navigation. Additional info, including link to nav bar application can be found here

enter image description here

However, based on your picture, I think you mean multidimensional navigation. In this case, navigation is more complex and there's not a set rule. For example, a few days ago I had a similar issue (not exactly a nav bar, but included a navigation component on multidimensional data) and the way I chose to display it is slightly similar to your picture: simply focus on one node and connect all nodes as needed. Of course I don't have the amount of data you display on your picture, so it's a bit cleaner and easy to follow.

Another way is to use that music-map approach, which is basically a tag/category cloud, like you probably had seen in many blogs.

Finally, you have some more classic navigation patterns (visually speaking) that tries to solve the multidimensional navigation challenge from a nav bar approach:

enter image description here image taken from here

Finally, and just as an idea, I think you could create a multidimensional navigation based on a combination of filters and hyper-links. Like this:

1) start navigation node by hyper-link or search parameter
  1.2) if node found, display directly connected nodes as hyper-links, else kill process
2) from returned hyperlink, display new directly connect nodes

and so on (see image below).

enter image description here

But same as your Wikipedia or your Music-Map examples, multidimensional navigation usually happens at content level, specially if you have big amounts of data and interconnected nodes

Additional info

  • thank you @tohster , the particular case I mention is one for which you provided me some insight and help a couple weeks ago, so everything comes back! – Devin Jun 11 '15 at 18:31
  • This is great, thanks for the in-depth response @Devin :) I wonder if you could post a couple of examples of what you ended up with when you said, "not exactly a nav bar, but included a navigation component on multidimensional data". Will be reading through the links you've provided. – Joel Martinez Jun 11 '15 at 21:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.