<div dir="ltr"><div>It may be hard to have one answer that works in all cases. It may be the 6/7 is the best default choice. But for modals or other forms that must exist in a constrained space, placeholder text (1/2) is an acceptable alternative.<br><br></div>Matt<br></div><div class="gmail_extra"><br><div class="gmail_quote">On Mon, Jan 16, 2017 at 3:14 PM, Catherine Robson <span dir="ltr"><<a href="mailto:crobson@redhat.com" target="_blank">crobson@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Greg,<div><br></div><div>Why would you use syntax hints with a selector/dropdown? There are only limited options, so syntax shouldn't be a problem in those cases I would assume.</div><span class="HOEnZb"><font color="#888888"><div><br></div><div>- Catherine</div></font></span></div><div class="HOEnZb"><div class="h5"><div class="gmail_extra"><br><div class="gmail_quote">On Mon, Jan 16, 2017 at 2:59 PM, Greg Sheremeta <span dir="ltr"><<a href="mailto:gshereme@redhat.com" target="_blank">gshereme@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Check out this wizard we're implementing in oVirt. Option 6/7 simply won't work with this wizard at its current width.<div><br></div><div>However, how would 1/2 work with select boxes?</div><div><br></div><div>So -- I'm not sure :)</div><div><div><div><br></div><div>Best wishes,</div><div>Greg</div><div><br></div><div><img src="cid:ii_159a8daf749879a7" alt="Inline image 1" style="margin-right:0px" width="492" height="322"><br></div></div></div></div><div class="gmail_extra"><div><div class="m_2779927405692932129h5"><br><div class="gmail_quote">On Mon, Jan 16, 2017 at 2:53 PM, Catherine Robson <span dir="ltr"><<a href="mailto:crobson@redhat.com" target="_blank">crobson@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Jessica,<div><br></div><div>Thanks for so nicely laying out the options! I lean towards #6,7, with #1,2 as a possible backup. Reasoning:</div><div><br></div><div>1, 2. The inline syntax hints keep the form concise and easy to scan without the syntax hints adding to the visual clutter of the page. In *most* use cases, having the syntax hints overwritten by the user when they add a value shouldn't be much of a problem, but see why I prefer #6, 7 below as a reason for when this is a problem.</div><div><br></div><div>3, 4, 5. Below the field feels like it takes up too much vertical space on a form area where vertical space is usually the worst constraint. There are many forms where it feels like we're trying to come up with "more information" (wrap fields to two columns, show additional information or contextual information to the sides, etc etc) to show horizontally because the page is so horizontally skinny and there is a lot of whitespace to the right of the fields. This is why I prefer 6, 7 that leans towards using that space over growing an already vertically long form even longer. If users are doing two-column forms there might be a conflict with 6,7 though.</div><div><br></div><div>6, 7. I prefer this one the most because the syntax always remains, is off to the right where it doesn't grow the form or distract users in most cases, but is reference when users need it. There are use cases where there may be default values or existing values in a form (edit mode for an already created system for instance) so that the inline syntax hints (1, 2) would be invisible for a user who is changing those values. This one feels like the best use of space and persistence.</div><div><br></div><div>- Catherine</div></div><div class="gmail_extra"><br><div class="gmail_quote"><div><div class="m_2779927405692932129m_-1340867853395355176h5">On Mon, Jan 16, 2017 at 2:15 PM, Jessica Ryhanych <span dir="ltr"><<a href="mailto:jryhanyc@redhat.com" target="_blank">jryhanyc@redhat.com</a>></span> wrote:<br></div></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div><div class="m_2779927405692932129m_-1340867853395355176h5"><div style="word-wrap:break-word">Hey PatternFlyers,<div>I’ve attached a few wireframes addressing the initial discovery work [1] on syntax hints. Please send your thoughts on which option we should move forward with as the recommendation and what issues you see with it, if any. Here we go:</div><div><br></div><div>1. Placeholder syntax hints – wireframe shows the form before user clicks or starts typing into the field </div><div><br></div><div><img id="m_2779927405692932129m_-1340867853395355176m_5728570304374532510m_350738419244307975224CF0D04-4A0C-46C1-8C13-B50BE7123B33" src="cid:30A0C356-D13C-4ABB-A629-430FEADC9D3B@redhat.com" width="492" height="337"></div><div><br></div><div><br></div><div>2. Placeholder syntax hints – wireframe shows the form after user has typed data into field, submitted, and an error message is returned. The error message would need to specifically detail the problem with the syntax. </div><div><br></div><div><img id="m_2779927405692932129m_-1340867853395355176m_5728570304374532510m_35073841924430797528CF8E4DC-1296-46C7-B3E7-2A43010AAAC1" src="cid:376B260A-FB93-4342-A51A-A0C3B47DD75A@redhat.com" width="492" height="337"></div><div><br></div><div><br></div><div><br></div><div>3. Syntax hints below input field </div><div><br></div><div><img id="m_2779927405692932129m_-1340867853395355176m_5728570304374532510m_3507384192443079752A83D11DC-2882-47C8-BB2F-ECC85138A1C7" src="cid:9F1228F9-7A7E-4D44-8D61-1028B19ADBBE@redhat.com" width="492" height="337"></div><div><br></div><div><br></div><div>4. Syntax hints below input field – Original syntax hint would be removed and replaced with red error message that reiterates syntax requirements below form field.</div><div><br></div><div><img id="m_2779927405692932129m_-1340867853395355176m_5728570304374532510m_3507384192443079752808C1605-4682-419D-8033-3DA643A984C8" src="cid:CF839A92-ABAE-49B8-8C92-B7BB148E6FDD@redhat.com" width="492" height="337"></div><div><br></div><div><br></div><div>5. Syntax hints below input field – Syntax hint stays on the page after user submits and error message appears below original hint. </div><div><br></div><div>***This option seems redundant IMO and could be confusing / overwhelming visually but I’m curious if anyone could see a scenario where this might be needed.</div><div><br></div><div><img id="m_2779927405692932129m_-1340867853395355176m_5728570304374532510m_3507384192443079752269F5045-FA6A-4248-8039-08C581EA3837" src="cid:378E7B87-5C78-4B51-8525-20B7A7A6629F@redhat.com" width="492" height="337"></div><div><br></div><div><br></div><div><br></div><div>6. Syntax hints in-line with form field </div><div><br></div><div><img id="m_2779927405692932129m_-1340867853395355176m_5728570304374532510m_3507384192443079752500E7DE2-1339-4359-A196-2FDA7EE526FA" src="cid:D4C475CE-EEFB-4398-B5C7-E256579E3E26@redhat.com" width="492" height="337"></div><div><br></div><div><br></div><div>7. Syntax hints in-line with form field – Syntax hint stays on screen after the user submits and receives an error message. </div><div><br></div><div>***This could have similar challenges as #5 above and if needed, a responsive / mobile page layout would need to be determined.</div><div><br></div><div><img id="m_2779927405692932129m_-1340867853395355176m_5728570304374532510m_35073841924430797525C26BA05-C1DE-4253-9463-E66F6ECF6D12" src="cid:A02352EA-670A-48CA-831E-F04916F3F584@redhat.com" width="492" height="337"></div><div><br></div><div>Thoughts, ideas, suggestions? Thanks!</div><div>Jessica</div><div><br></div><div><br><div> <div style="color:rgb(0,0,0);letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;word-wrap:break-word"><div style="color:rgb(0,0,0);font-family:Helvetica;font-size:12px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;line-height:normal;word-wrap:break-word">[1] <a href="https://blog.patternfly.org/exploring-syntax-hints/" target="_blank">https://blog.patternfly.or<wbr>g/exploring-syntax-hints/</a></div><div style="color:rgb(0,0,0);font-family:Helvetica;font-size:12px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;line-height:normal;word-wrap:break-word"><br></div><div style="color:rgb(0,0,0);font-family:Helvetica;font-size:12px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;line-height:normal;word-wrap:break-word"><span style="font-weight:normal"><br class="m_2779927405692932129m_-1340867853395355176m_5728570304374532510m_3507384192443079752Apple-interchange-newline"><b>/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / </b></span></div><div style="color:rgb(0,0,0);font-family:Helvetica;font-size:12px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;line-height:normal;word-wrap:break-word"><b><br></b></div><div style="color:rgb(0,0,0);font-family:Helvetica;font-size:12px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;line-height:normal;word-wrap:break-word"><b>Jessica W. Ryhanych</b> <br>User Experience Design </div><div style="color:rgb(0,0,0);font-family:Helvetica;font-size:12px;font-style:normal;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;line-height:normal;word-wrap:break-word">Red Hat<br><a href="mailto:jryhanyc@redhat.com" target="_blank">jryhanyc@redhat.com</a></div></div> </div> <br></div></div><br></div></div>______________________________<wbr>_________________<br> Patternfly mailing list<br> <a href="mailto:Patternfly@redhat.com" target="_blank">Patternfly@redhat.com</a><br> <a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/mailman<wbr>/listinfo/patternfly</a><br> <br></blockquote></div><br></div> <br>______________________________<wbr>_________________<br> Patternfly mailing list<br> <a href="mailto:Patternfly@redhat.com" target="_blank">Patternfly@redhat.com</a><br> <a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/mailman<wbr>/listinfo/patternfly</a><br> <br></blockquote></div><br><br clear="all"><div><br></div></div></div><span class="m_2779927405692932129HOEnZb"><font color="#888888">-- <br><div class="m_2779927405692932129m_-1340867853395355176gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><div>Greg Sheremeta, MBA<br>Red Hat, Inc.<br>Sr. Software Engineer<br><a href="mailto:gshereme@redhat.com" target="_blank">gshereme@redhat.com</a><br></div></div></div> </font></span></div> </blockquote></div><br></div> </div></div><br>______________________________<wbr>_________________<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/<wbr>mailman/listinfo/patternfly</a><br> <br></blockquote></div><br><br clear="all"><br>-- <br><div class="gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><div><div><div>Matt Carrano<br></div>Sr. Interaction Designer<br></div>Red Hat, Inc.<br></div><a href="mailto:mcarrano@redhat.com" target="_blank">mcarrano@redhat.com</a><br></div></div> </div>