[Patternfly] Proposed changes to Vertical Navigation

[Serena Doyle]

This email outlines a number of proposed changes to the existing PatternFly
Vertical Navigation design pattern.  Some of these changes are
modifications of the current pattern based on user feedback, and others are
to fulfill additional use cases/requirements.

Proposed modifications to the current vertical navigation pattern

When an early release of our product was made available to the field, we
received a LOT of feedback on Vertical Navigation.  This feedback was from
a variety of sources including users, the field as well as other Red
Hatters.  Based on that feedback, we made the following changes in the
product which have been received positively, and would like to contribute
these improvements back to PatternFly:


   -

   Change the delay for the initial hover over (when no other hover menu is
   displayed for the current level) to equal the delay that exists when a
   hover menu is already displayed.

Why?  This causes a delay when initially hovering on the menu and reduces
the number of accidental menu showings that occur. Only if the user hovers
on a menu item for  .5 seconds will the menu be shown (thus eliminating
fly-by menu showings).

   -

   Primary and secondary menus should always be the same width.

Why?  With the current implementation, upon pinning the secondary menu, the
width of the menu is wider than the primary menu.  When you unpin the menu,
the width of the main content area changes, flickers and resizes
unnecessarily.  Previously, when the "pin/collapse" function was used, the
width of the content panel changed because the width of the secondary and
tertiary panels were wider that the primary nav panel.

   -

   Badges should be optional, and not used by default.

Why?  This decreases the menu width

   -

   Non-persistent menu behavior should be an option
   -

   Change the arrow icons used to collapse/pin the menus to a thumbtack.

Why? Since these are flyout (non-persistent) menus, we feel like the arrows
are misleading since clicking on the -> really just unpins the tertiary
nav, it doesn’t move the menu back to the right.  After considering
multiple options and getting feedback from a number of people, the single
thumb-tack ( http://fontawesome.io/icon/thumb-tack/ ) icon is being used.
Once the menu is pinned, the tack is rotated.  Note that we are testing
this icon at Summit to see if an “x” may be more appropriate.

   -

   Only show the thumbtack when the collapse/pin action is available.

Why? Previously, the menu was disabled, but we got a lot of feedback saying
that users couldn’t tell when/if it was ever disabled.

   -

   Change the size of the main navigation icons ( moved from 14px to 20px )
   - this doesn't match PatternFly

Why? We received input that the icons weren’t large enough.  This was more
of an issue when using Collapsed Primary Navigation.  (Note that the icons
shown in the high fidelity mocks here
http://www.patternfly.org/pattern-library/navigation/vertical-navigation/#_design
are actually larger than the implementation, so we think the intent was
likely to have them larger.

   -

   Support tooltips for the icons in the primary navigation bar

Why? To help the users understand what the icons represent when using
Collapsed Primary Navigation

Extensions to current vertical navigation

In our product, the navigation paradigm has changed from horizontal to
vertical.  The UXD team extended the current Vertical Navigation pattern to
support the following use cases/requirements.

   -

   Non-persistent secondary navigation - this allows easy discoverability
   for our novice or infrequent users
   -

   Support non-persistent tertiary navigation (fly-outs)
   -

   Support pinning of tertiary navigation - this allows our expert users to
   quickly change between areas in a tertiary menu.


We would also like to contribute these back to PatternFly to extend the
Vertical Navigation pattern.

Jeff Phillips is the developer associated with the above changes, and I did
the design work
If you're interested in seeing the changes, Jeff's test page is available
here:
http://rawgit.com/jeff-phillips-18/patternfly/tertiary-nav/tests/vertical-navigation-tertiary.html#

Would love to hear thoughts from the community on this!

Thank you

-- 
- Serena Chechile Doyle
*UXD | Unified Management Experience*
*Red Hat*
*Cell* 508-769-7715 | *IRC* - serena | *Skype* - serenamarie125 | *Twitter* -
@serenamarie125
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20160624/73a73768/attachment.htm>