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
_______________________________________________ Patternfly mailing list [email protected] https://www.redhat.com/mailman/listinfo/patternfly
