[Patternfly] Proposed changes to Vertical Navigation

Leslie Hinson lhinson at redhat.com
Wed Jul 6 17:25:25 UTC 2016


Thanks Serena for writing all this up! Lots of good work going on here.
Comments in line below...

On Fri, Jun 24, 2016 at 11:18 AM, Serena Doyle <sdoyle at redhat.com> wrote:

>
> 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
>
>
   -

   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

All of the above makes sense, will you send a PR so the code can be
reviewed and merged?


>    -
>
>    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.
>

I see that you tested the rotated icon vs X. Did you do any testing
surround the success/use of tack icon in general vs the back arrow or any
other solution?


>
>    -
>
>    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.
>

@Kyle Baker, can you look at this comment re: the icons?

>
> 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
>
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20160706/7369f08d/attachment.htm>


More information about the PatternFly mailing list