Oracle WebCenter Interaction: Page Flyout Navigation

The out of the box navigation options bundled with WebCenter Interaction use dated designs and leave something to be desired.  Like many other customers, we decided to create a custom navigation when we began implementing our portal in 2005.  We utilized a header based community navigation and a left column page navigation portlet - a design common across many websites.  After some time we noticed, through analytics and feedback, that users were struggling with the page navigation.

To remedy this problem we decided to redo the typical "My Communities" dropdown navigation so that when a user hovered over a community in the dropdown the pages from that community would "fly-out" to the right.
After some searching we settled on the Superfish jQuery plugin which has a pleasing display.

The coding wasn't very challenging and required just adding an extra loop in the forEach Community section to gather and display the pages.

The final result has been praised by our end users and has led to an increase in sub-page views across communities.

Lessons Learned:

• Our previous communities were built with announcements on their home pages however now that users are able to skip the home page they sometimes miss important news.


• We are now getting demands for the occasional sub or related community to display as if it were a page.  If this were an across the board demand we could simply gather and display those but because of the infrequency of this request we have opted to create stub pages which contain a single portlet which does a URL redirect to the associated community.  The solution is ugly (as redirects are) but gets the job done. A prettier alternative would be to code an if condition into the loop that displays the pages so that when the particular community it appears it gets an additional faux page added.

Update after nearly a year:

1. The concept of flyout is wonderful but there needs to be governance around how many items should appear in the dropdown.  We are now at the maximum that will fit on a monitor at 1024x768 resolution and find this to be exceptionally limiting. 


2. I've always been against fly-out navigation from a usability perspective, especially when there is more than one level of fly-out.  However, limiting yourself to one level of fly-outs essentially limits your navigation to only two levels in depth which is exceptionally limiting.


3. We are a mid sized company (1200 employees, 2000 extranet users) with 150 communities.  If it were my choice I would completely redo our navigation away from fly-outs and away from dropdowns.


4. I strongly recommend not using fly-outs.

Code:
<li><a href="#" class="tab" ><img src="pt://images/plumtree/custom/DimensionHeader/images/tab_comms.gif" border="0" /></a>
   <ul><!-- loop through each community -->
      <pt:logic.foreach pt:data="sortedComms" pt:var="element">
      <pt:logic.collection pt:key="subpages"/>
      <pt:ptdata.communitypagesdata pt:id="subpages" pt:commid="$element.objid" />
      <pt:logic.variable pt:key="showpage" pt:value=""/>
         <li>
         <pt:core.html pt:tag="a" href="$element.url"><pt:logic.value pt:value="$element.title" /></pt:core.html>
         <pt:logic.collectionlength pt:data="subpages" pt:key="length"/>
         <pt:logic.intexpr pt:expr="($length) > 1" pt:key="boolvalue"/>
         <pt:logic.if pt:expr="$boolvalue">
         <pt:logic.iffalse>
         </pt:logic.iffalse>
         <pt:logic.iftrue>
            <ul>
            <pt:logic.foreach pt:data="subpages" pt:var="sp">
               <pt:logic.stringexpr pt:expr="($showpage) == a" pt:key="boolvalue"/>
               <pt:logic.if pt:expr="$boolvalue">
               <pt:logic.iftrue>
                  <li>
                     <pt:core.html pt:tag="a" href="$sp.url"><pt:logic.value pt:value="$sp.title"/>
                     </pt:core.html>                      
                  </li>
               </pt:logic.iftrue>
               </pt:logic.if>
               <pt:logic.variable pt:key="showpage" pt:value="a"/>
            </pt:logic.foreach>
            </ul>
         </pt:logic.iftrue>
         </pt:logic.if>
         </li>
      </pt:logic.foreach>
   </ul>
</li>