Designing the JoVE UI

This blog entry is for discussion purposes with JoVE and other interested parties.

So I am working on the JoVE UI and it comes down to the fact that there are two primary sections to every page: navigation and content.  Given the new architecture of the site, initially I suggested putting the navigation at the top.  Then it would look something like this:

image
Figure 1

And that’s ok, except that, because the number of children is unpredictable, this could quickly get out of hand.  That lead to another suggestion by David for a vertical navigation:

http://sites.google.com/a/jove.com/jove-20-design/design-suggestions#TOC-Vertical-Design-suggestion:

This could work really well, except that I noticed that, even in this LJ, I rarely use the navigation on the left.  Usually I expect it to be at the top.  So how to bring a tree structure to the top?

image
Figure 3

Then I thought about the skimming ideas – it’s difficult to skim content that is not rigidly organized.  So I cam up with this:

image
Figure 4
 

Stuff doesn’t open up unless you click on the Click for more area.  But then it’s hard to create a custom interface for a specific level because it all fits into the same level.  So it looks like a solution could be:

image
Figure 5

So the pros of this approach is that every next level can choose the best way to display the sub-nodes.  However, this is also problematic because it places the content beyond a single click, as it is on the site now (i.e. if I want to browse by issue, mouse over Browse allows me to select this option.

Another option may be to stick to Figure 4 and assume that custom navigation would be included in the content section (as is the case with the present site).  Honestly, I am torn between which navigation style is better.  I think I might stick to Figure 1 for starters and then try all of these to see which work best.

Unless someone else has any suggestions?

 

Nikita’s LJ Tags: , ,
Advertisements

Leave a comment

Filed under JoVE

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s