<div dir="ltr">Thanks Serena for writing all this up! Lots of good work going on here. Comments in line below... <br><div class="gmail_extra"><br><div class="gmail_quote">On Fri, Jun 24, 2016 at 11:18 AM, Serena Doyle <span dir="ltr"><<a href="mailto:sdoyle@redhat.com" target="_blank">sdoyle@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-style:solid;border-left-color:rgb(204,204,204);padding-left:1ex"><div dir="ltr"><span><p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><br></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">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.</font></span></p><font face="tahoma, sans-serif"><br></font><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;color:rgb(0,0,0);font-weight:700;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">Proposed modifications to the current vertical navigation pattern</font></span></p><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">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:</font></span></p><font face="tahoma, sans-serif"><br></font><ul style="margin-top:0pt;margin-bottom:0pt"><li dir="ltr" style="list-style-type:disc;font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">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. </font></span></p></li></ul><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;margin-left:36pt"><font face="tahoma, sans-serif"><span style="font-size:14.6667px;color:rgb(0,0,0);font-weight:700;vertical-align:baseline;white-space:pre-wrap">Why? </span><span style="font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline;white-space:pre-wrap"> 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).</span></font></p></span></div></blockquote><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-style:solid;border-left-color:rgb(204,204,204);padding-left:1ex"><div dir="ltr"><span><ul style="margin-top:0pt;margin-bottom:0pt"><li dir="ltr" style="list-style-type:disc;font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">Primary and secondary menus should always be the same width.  </font></span></p></li></ul><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;margin-left:36pt"><font face="tahoma, sans-serif"><span style="font-size:14.6667px;color:rgb(0,0,0);font-weight:700;vertical-align:baseline;white-space:pre-wrap">Why?  </span><span style="font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline;white-space:pre-wrap">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.</span></font><span style="line-height:normal"> </span></p></span></div></blockquote><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-style:solid;border-left-color:rgb(204,204,204);padding-left:1ex"><div dir="ltr"><span><ul style="margin-top:0pt;margin-bottom:0pt"><li dir="ltr" style="list-style-type:disc;font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">Badges should be optional, and not used by default.  </font></span></p></li></ul><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;margin-left:36pt"><font face="tahoma, sans-serif"><span style="font-size:14.6667px;color:rgb(0,0,0);font-weight:700;vertical-align:baseline;white-space:pre-wrap">Why? </span><span style="font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline;white-space:pre-wrap"> This decreases the menu width</span></font></p></span></div></blockquote><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-style:solid;border-left-color:rgb(204,204,204);padding-left:1ex"><div dir="ltr"><span><ul style="margin-top:0pt;margin-bottom:0pt"><li dir="ltr" style="list-style-type:disc;font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">Non-persistent menu behavior should be an option</font></span></p></li></ul></span></div></blockquote><ul style="margin-top:0pt;margin-bottom:0pt"><li dir="ltr" style="list-style-type:disc;font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">Support tooltips for the icons in the primary navigation bar</font></span></p></li></ul><div><span style="font-family:tahoma,sans-serif;font-size:14.6667px;color:rgb(0,0,0);font-weight:700;vertical-align:baseline;white-space:pre-wrap">Why? </span><span style="font-family:tahoma,sans-serif;font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline;white-space:pre-wrap">To help the users understand what the icons represent when using Collapsed Primary Navigation</span> </div><div><br></div><div>All of the above makes sense, will you send a PR so the code can be reviewed and merged?  </div><div><br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-style:solid;border-left-color:rgb(204,204,204);padding-left:1ex"><div dir="ltr"><span><ul style="margin-top:0pt;margin-bottom:0pt"><li dir="ltr" style="list-style-type:disc;font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">Change the arrow icons used to collapse/pin the menus to a thumbtack.  </font></span></p></li></ul><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;margin-left:36pt"><font face="tahoma, sans-serif"><span style="font-size:14.6667px;color:rgb(0,0,0);font-weight:700;vertical-align:baseline;white-space:pre-wrap">Why? </span><span style="font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline;white-space:pre-wrap">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 ( </span><a href="http://fontawesome.io/icon/thumb-tack/" style="text-decoration:none" target="_blank"><span style="font-size:14.6667px;color:rgb(0,0,0);text-decoration:underline;vertical-align:baseline;white-space:pre-wrap">http://fontawesome.io/icon/thumb-tack/</span></a><span style="font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline;white-space:pre-wrap"> ) 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.</span></font></p><ul style="margin-top:0pt;margin-bottom:0pt"><li dir="ltr" style="list-style-type:disc;font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">Only show the thumbtack when the collapse/pin action is available.  </font></span></p></li></ul><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;margin-left:36pt"><font face="tahoma, sans-serif"><span style="font-size:14.6667px;color:rgb(0,0,0);font-weight:700;vertical-align:baseline;white-space:pre-wrap">Why? </span><span style="font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline;white-space:pre-wrap">Previously, the menu was disabled, but we got a lot of feedback saying that users couldn’t tell when/if it was ever disabled.</span></font></p></span></div></blockquote><div><br></div><div>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? </div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-style:solid;border-left-color:rgb(204,204,204);padding-left:1ex"><div dir="ltr"><span><ul style="margin-top:0pt;margin-bottom:0pt"><li dir="ltr" style="list-style-type:disc;font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">Change the size of the main navigation icons ( moved from 14px to 20px ) - this doesn't match PatternFly</font></span></p></li></ul><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;margin-left:36pt"><font face="tahoma, sans-serif"><span style="font-size:14.6667px;color:rgb(0,0,0);font-weight:700;vertical-align:baseline;white-space:pre-wrap">Why? </span><span style="font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline;white-space:pre-wrap">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 </span><a href="http://www.patternfly.org/pattern-library/navigation/vertical-navigation/#_design" style="text-decoration:none" target="_blank"><span style="font-size:14.6667px;color:rgb(0,0,0);text-decoration:underline;vertical-align:baseline;white-space:pre-wrap">http://www.patternfly.org/pattern-library/navigation/vertical-navigation/#_design</span></a><span style="font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline;white-space:pre-wrap"> are actually larger than the implementation, so we think the intent was likely to have them larger.</span></font></p></span></div></blockquote><div> </div><div>@Kyle Baker, can you look at this comment re: the icons?  </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-style:solid;border-left-color:rgb(204,204,204);padding-left:1ex"><div dir="ltr"><span><font face="tahoma, sans-serif"><br></font><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;color:rgb(0,0,0);font-weight:700;text-decoration:underline;vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">Extensions to current vertical navigation</font></span></p><font face="tahoma, sans-serif"><br></font><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">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. </font></span></p><ul style="margin-top:0pt;margin-bottom:0pt"><li dir="ltr" style="list-style-type:disc;font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">Non-persistent secondary navigation - this allows easy discoverability for our novice or infrequent users</font></span></p></li><li dir="ltr" style="list-style-type:disc;font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">Support non-persistent tertiary navigation (fly-outs)</font></span></p></li><li dir="ltr" style="list-style-type:disc;font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline"><p dir="ltr" style="line-height:1.38;margin-top:0pt;margin-bottom:0pt"><span style="font-size:14.6667px;vertical-align:baseline;white-space:pre-wrap"><font face="tahoma, sans-serif">Support pinning of tertiary navigation - this allows our expert users to quickly change between areas in a tertiary menu.</font></span></p></li></ul><font face="tahoma, sans-serif"><br><span style="font-size:14.6667px;color:rgb(0,0,0);vertical-align:baseline;white-space:pre-wrap">We would also like to contribute these back to PatternFly to extend the Vertical Navigation pattern.</span></font></span><div><div><font color="#000000" face="tahoma, sans-serif"><span style="font-size:14.6667px;white-space:pre-wrap"><br></span></font></div><div><span style="color:rgb(0,0,0);font-family:tahoma,sans-serif;font-size:14.6667px;white-space:pre-wrap">Jeff Phillips is the developer associated with the above changes, and I did the design work</span><br></div><div><font color="#000000"><font face="tahoma, sans-serif"><span style="font-size:14.6667px;white-space:pre-wrap">If you're interested in seeing the changes, Jeff's test page is available here: <a href="http://rawgit.com/jeff-phillips-18/patternfly/tertiary-nav/tests/vertical-navigation-tertiary.html#" target="_blank">http://rawgit.com/jeff-phillips-18/patternfly/tertiary-nav/tests/vertical-navigation-tertiary.html#</a></span></font></font></div><div><div><br></div><div><div><font color="#000000" face="tahoma, sans-serif"><span style="font-size:14.6667px;white-space:pre-wrap">Would love to hear thoughts from the community on this!</span></font></div><div><font color="#000000" face="tahoma, sans-serif"><span style="font-size:14.6667px;white-space:pre-wrap"><br></span></font></div><div><font color="#000000" face="tahoma, sans-serif"><span style="font-size:14.6667px;white-space:pre-wrap">Thank you</span></font></div></div><span class=""><font color="#888888"><div><font color="#000000" face="tahoma, sans-serif"><span style="font-size:14.6667px;white-space:pre-wrap"><br></span></font></div>-- <br><div data-smartmail="gmail_signature"><div dir="ltr"><div><div dir="ltr"><div><div dir="ltr"><div style="color:rgb(0,0,0)">- Serena Chechile Doyle</div><div style="color:rgb(0,0,0)"><i>UXD | Unified Management Experience</i></div><div style="color:rgb(0,0,0)"><b style="color:rgb(0,0,173);font-family:"trebuchet ms",sans-serif;font-size:11px">Red Hat</b></div><div style="color:rgb(0,0,0);font-family:"trebuchet ms",sans-serif"><span style="font-size:11px"><b style="color:rgb(0,0,173)">Cell</b><span style="color:rgb(0,0,173)"> </span><a href="tel:508-769-7715" value="+15087697715" style="color:rgb(17,85,204)" target="_blank">508-769-7715</a> | <b style="color:rgb(0,0,173)">IRC</b> - serena | <b style="color:rgb(0,0,173)">Skype</b> - serenamarie125 </span><span style="font-size:11px">| </span><b style="font-size:11px;color:rgb(0,0,173)">Twitter</b><span style="font-size:11px"> - @serenamarie125</span></div></div></div></div></div></div></div>
</font></span></div></div></div>
<br>_______________________________________________<br>
Patternfly mailing list<br>
<a href="mailto:Patternfly@redhat.com">Patternfly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/mailman/listinfo/patternfly</a><br>
<br></blockquote></div><br></div></div>