<div dir="ltr">I agree- the first of the two options seems like a great way to give the user a last chance to view the syntax text. This is important when someone quickly tabs through a form. There are definitely some specific cases when breaking apart form fields makes more sense from a usability perspective. <div><ul><li>"Name ________ -> First Name _____  Last Name ______</li><li>Phone Number _________ -> Phone Number (__) - __ -  __ <br></li></ul></div></div><div class="gmail_extra"><br clear="all"><div><div class="gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><div><div dir="ltr"><b><font size="2">Jenny Haines</font></b><div><b><font size="1">UI/VISUAL DESIGNER</font></b></div><div><font size="1">(m) 443-889-2881</font></div><div><font size="1"><a href="mailto:jhaines@redhat.com" target="_blank">jhaines@redhat.com</a></font></div><div><font size="1"><a href="mailto:jennyhaines10@gmail.com" target="_blank">jennyhaines10@gmail.com</a></font></div></div></div></div></div></div>
<br><div class="gmail_quote">On Mon, Nov 21, 2016 at 11:27 AM, Matt Carrano <span dir="ltr"><<a href="mailto:mcarrano@redhat.com" target="_blank">mcarrano@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"><div>I like the first option also, and feel like this is most consistent with what I expect.<br><br></div>Matt<br></div><div class="gmail_extra"><div><div class="h5"><br><div class="gmail_quote">On Mon, Nov 21, 2016 at 8:06 AM, Leslie Hinson <span dir="ltr"><<a href="mailto:lhinson@redhat.com" target="_blank">lhinson@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">Nice, thanks for sending out these examples. Out of these two options, I prefer the first one and don't find it too visually distracting.<div><br></div><div>Curious about what others think or are doing to date.</div><span class="m_-3965669512866721918HOEnZb"><font color="#888888"><div><br></div><div>Leslie </div></font></span></div><div class="m_-3965669512866721918HOEnZb"><div class="m_-3965669512866721918h5"><div class="gmail_extra"><br><div class="gmail_quote">On Thu, Nov 17, 2016 at 4:32 PM, Jessica Ryhanych <span dir="ltr"><<a href="mailto:jryhanyc@redhat.com" target="_blank">jryhanyc@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 style="word-wrap:break-word">Hey Leslie,<div>That is a great point – I found two examples of responsive forms that could be a workaround:</div><div><br></div><div>1. The syntax text stays visible when a user clicks, but only disappears as they start typing. See <a href="https://order.emporiumpies.com/" target="_blank">here</a>. (In step 1 of the form, pick Delivery to see a few examples.) </div><div><br></div><div>2. The syntax text gives the user an idea of the format needed and appears for about 1 second after clicking in the field. See <a href="https://stuffandnonsense.co.uk/contact" target="_blank">here</a>. (look for “Existing website address”)</div><div><br></div><div>Thoughts from everyone? Would this be challenging to implement? Depending on the length of the form, I could see option 1 becoming visually distracting.</div><div><br></div><div>Thanks,</div><div>Jessica</div><div><span><div>
<div style="color:rgb(0,0,0);font-family:Helvetica;font-size:12px;font-style:normal;font-variant: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 class="m_-3965669512866721918m_8440305814485091370m_774712938226156009Apple-interchange-newline">/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / </b></div><div style="color:rgb(0,0,0);font-family:Helvetica;font-size:12px;font-style:normal;font-variant: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: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>Senior Designer, Employment Branding + Communications <br>Red Hat<br><a href="mailto:jryhanyc@redhat.com" target="_blank">jryhanyc@redhat.com</a></div>
</div>
<br></span><div><blockquote type="cite"><span><div>On Nov 17, 2016, at 10:52 AM, Leslie Hinson <<a href="mailto:lhinson@redhat.com" target="_blank">lhinson@redhat.com</a>> wrote:</div><br class="m_-3965669512866721918m_8440305814485091370m_774712938226156009Apple-interchange-newline"></span><div><span><div dir="ltr">Thanks for sending this out Jessica. <div><br></div><div>One of the things that will be tricky if figuring out a solution for how this text behaves in the responsive states. That would be the advantage of putting syntax help inside the text box. However, I know that it's a usability issue when the syntax help disappears when the user clicks.<div><br></div><div>Leslie</div></div></div></span><div class="gmail_extra"><br><div class="gmail_quote"><span>On Tue, Nov 15, 2016 at 2:18 PM, Jessica Ryhanych <span dir="ltr"><<a href="mailto:jryhanyc@redhat.com" target="_blank">jryhanyc@redhat.com</a>></span> wrote:<br></span><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word"><span>Hi PatternFly,<div><br></div><div>I’m gathering information during this sprint on syntax hints used in forms and need your feedback. What have you observed? What worked well? What did you find distracting? What use cases need to be addressed? </div><div><br></div><div>I’ve been reviewing an <a href="http://static.lukew.com/webforms_lukew.pdf" target="_blank">excerpt</a> from Luke Wroblewski’s book, Web Form Design, and found a few examples that might be food for thought.</div><div><br></div><div><b>Examples:</b></div><div><b><br></b></div><div>- syntax hint is below input field, left aligned, font color & weight is differentiated from label text</div></span><div><span id="m_-3965669512866721918m_8440305814485091370m_774712938226156009cid:F89CBA9B-8C2D-49A3-8FFF-FBB6CDB89A48@rdu.redhat.com"><Screen Shot 2016-11-15 at 1.51.13 PM.png></span><span><br><div><br></div><div><br></div><div><br></div><div>- syntax hint is left aligned to input field, font color & weight is differentiated from label text</div></span><div><span id="m_-3965669512866721918m_8440305814485091370m_774712938226156009cid:18FEC3B8-3B18-47F3-AE8E-ECBFADA2479F@rdu.redhat.com"><Screen Shot 2016-11-15 at 1.25.31 PM.png></span></div><span><div><br></div><div>- syntax hint follows label text, font color is differentiated from label, placement above input field</div></span><div><span id="m_-3965669512866721918m_8440305814485091370m_774712938226156009cid:D77A7C7D-CEC5-4838-8507-62ACEB5CF4FB@rdu.redhat.com"><Screen Shot 2016-11-15 at 1.25.39 PM.png></span></div><span><div><br></div><div>Please share any examples from your daily work and/or other considerations I might have missed. Thanks!</div><div>Jessica</div><div>
<div style="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 class="m_-3965669512866721918m_8440305814485091370m_774712938226156009m_-4447492689366948385Apple-interchange-newline">/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / </b></div><div style="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="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>Senior Designer, Employment Branding + Communications <br>Red Hat<br><a href="mailto:jryhanyc@redhat.com" target="_blank">jryhanyc@redhat.com</a></div>
</div>
<br></span></div></div><span><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></span></blockquote></div><br></div>
</div></blockquote></div><br></div></div></blockquote></div><br></div>
</div></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"><br></div></div><span class="HOEnZb"><font color="#888888">-- <br><div class="m_-3965669512866721918gmail_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>
</font></span></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></div>