<div dir="ltr"><div>Here's a form that might be interesting (attached).  It's for mail server configuration.  You'll see that there is an challenge here because there are controls associated with the outgoing server address (to the right and below), but we also wanted to have a hint.  We placed the hint in this case below the label, but that may not be the best answer.<br><br></div>Matt<br></div><div class="gmail_extra"><br><div class="gmail_quote">On Tue, Jan 17, 2017 at 12:27 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">Here are some examples I had handy Jessica:<div><br></div><div><a href="https://redhat.invisionapp.com/share/8JA1Y1D7A#/214646965_WildFly-EAP-Modal-Form" target="_blank">https://redhat.invisionapp.com<wbr>/share/8JA1Y1D7A#/214646965_<wbr>WildFly-EAP-Modal-Form</a><br></div><div><a href="https://redhat.invisionapp.com/share/8JA1Y1D7A#/214799830_WildFly-EAP-Form" target="_blank">https://redhat.invisionapp.com<wbr>/share/8JA1Y1D7A#/214799830_<wbr>WildFly-EAP-Form</a><br></div><div><a href="https://redhat.invisionapp.com/share/6NA2FHPYX#/screens" target="_blank">https://redhat.invisionapp.<wbr>com/share/6NA2FHPYX#/screens</a><span class="HOEnZb"><font color="#888888"><br></font></span></div><span class="HOEnZb"><font color="#888888"><div><br></div><div>- Catherine</div><div><br></div></font></span></div><div class="HOEnZb"><div class="h5"><div class="gmail_extra"><br><div class="gmail_quote">On Tue, Jan 17, 2017 at 12:05 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 team,<div>Thanks for all the feedback and conversation! I’m going to do some exploration / design iterations based on these ideas and share them back with you all. </div><div><br></div><div>One suggestion in the PF Demo meeting this morning was to work with a real world form design that is more robust and complex to test these ideas on – could anyone share files that I could work from? I’d specifically like to test out solutions on forms with multiple inputs, drop downs, etc. on desktop, mobile, and within modals.</div><div><br></div><div>Greg, I think the wizard example you shared could be a good one to work from. Could you share that with me?</div><div><br></div><div>Thanks!</div><span class="m_-8263072435677047766HOEnZb"><font color="#888888"><div>Jessica</div></font></span><span><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"><b><br class="m_-8263072435677047766m_4405521928841968487Apple-interchange-newline">/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / </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><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></span><div><div class="m_-8263072435677047766h5"><div><blockquote type="cite"><div>On Jan 17, 2017, at 11:58 AM, Allie Jacobs <<a href="mailto:ajacobs@redhat.com" target="_blank">ajacobs@redhat.com</a>> wrote:</div><br class="m_-8263072435677047766m_4405521928841968487Apple-interchange-newline"><div><div dir="ltr">I interpreted Sarah's suggestion as using the same behavior in the examples with labels but having the placeholder syntax hints shrink and move below the input field as you type. It's an interesting idea. </div><div class="gmail_extra"><br><div class="gmail_quote">On Tue, Jan 17, 2017 at 11:05 AM, Thomas Maas <span dir="ltr"><<a href="mailto:tmaas@redhat.com" target="_blank">tmaas@redhat.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">Looking at the previous examples, we have to be careful not to mix the semantics of placeholders and labels:<br>
<br>
- Labels tell you what (name, email, etc)<br>
- Placeholders/syntax hints give you hints on how (‘your full name’, <a href="mailto:you@yourdomain.com" target="_blank">you@yourdomain.com</a>’)<br>
<br>
The examples in the last 2 emails are not placeholders but labels that sit where placeholders are normally rendered.<br>
<br>
As for the placeholder discussion:<br>
<br>
- I agree that having hints on the right side will give space problems in many cases<br>
- I don’t think we should worry too much about vertical space, people can scroll<br>
- Option 4 where the error message takes the place of the (syntax) hint works well in practice, sometimes that means that all you need to do is ‘color the syntax message red'.<br>
- I would suggest we use the placeholder attribute only for actual placeholders like ‘<a href="mailto:you@yourdomain.com" target="_blank">you@yourdomain.com</a>’ and always render descriptive hints outside the input field<br>
<br>
Thanks for creating all these wireframes Jessica,<br>
-Thomas<br>
<br>
Thomas Maas<br>
Designer<br>
<a href="mailto:thomas.maas@redhat.com" target="_blank">thomas.maas@redhat.com</a><br>
<div><div class="m_-8263072435677047766m_4405521928841968487h5"><br>
<br>
<br>
<br>
> On 17 Jan 2017, at 15:32, Sarah Rambacher <<a href="mailto:srambach@redhat.com" target="_blank">srambach@redhat.com</a>> wrote:<br>
><br>
> Yes, that's like what I saw. Chris found these other examples too -<br>
><br>
> <a href="http://littlebigdetails.com/post/82478225432/circleci-once-activated-the-input-placeholders" rel="noreferrer" target="_blank">http://littlebigdetails.com/po<wbr>st/82478225432/circleci-once-a<wbr>ctivated-the-input-placeholder<wbr>s</a><br>
><br>
> <a href="https://github.com/jverdi/JVFloatLabeledTextField" rel="noreferrer" target="_blank">https://github.com/jverdi/JVFl<wbr>oatLabeledTextField</a><br>
><br>
> On Tue, Jan 17, 2017 at 9:07 AM, Leslie Hinson <<a href="mailto:lhinson@redhat.com" target="_blank">lhinson@redhat.com</a>> wrote:<br>
> Yes! I've seen this too Sarah. Check out the video [1] on material to see an example of this behavior (however they are using it for labels vs syntax hints).<br>
><br>
> Option 1 can be tricky when you take responsiveness into consideration. This was a large discussion when discussing required/optional fields.<br>
><br>
> [1] <a href="https://material.io/guidelines/components/text-fields.html#text-fields-search-filter" rel="noreferrer" target="_blank">https://material.io/guidelines<wbr>/components/text-fields.html#t<wbr>ext-fields-search-filter</a><br>
><br>
> -  Leslie<br>
><br>
><br>
> On Tue, Jan 17, 2017 at 8:22 AM, Sarah Rambacher <<a href="mailto:srambach@redhat.com" target="_blank">srambach@redhat.com</a>> wrote:<br>
> I saw an interesting way of doing this on PayPal - if I remember correctly, there was placeholder text until you clicked into the field, and then the field enlarged slightly and the placeholder text was still shown within the field but in smaller text above where you were typing.<br>
><br>
> I'm not sure how to find it again - it was from a site that linked me into PayPal for a one-time payment, and I remember thinking "hey, that's nice" but was focused on my task and didn't take the time to screenshot it ;-P<br>
><br>
> On Mon, Jan 16, 2017 at 5:24 PM, Patrick Cox <<a href="mailto:pcox@redhat.com" target="_blank">pcox@redhat.com</a>> wrote:<br>
> What is the typical length of a syntax hint? What is the max length? What about the length of text for corrective action?<br>
><br>
> If they can get long, it seems like you'd want to put them below the field and allow them to wrap underneath it. If you have lengthy text, putting it out to the right side seems like it could look wonky and/or be hard to read if it wraps, or possibly force horizontal scrolling if it doesn't. Putting lengthy text inside the field could truncate it.<br>
><br>
> It seems to me that you'd want as much flexibility as you can get to accommodate variability in this situation, and putting the text below the fields will afford that the most of any of the solutions.<br>
><br>
> Pat<br>
><br>
> On Mon, Jan 16, 2017 at 3:58 PM, Allie Jacobs <<a href="mailto:ajacobs@redhat.com" target="_blank">ajacobs@redhat.com</a>> wrote:<br>
> My reasons for not liking 1&2 is because once you start typing, you lose the syntax help. If it's something complicated or if we generalize this to field level help, the user might need to reference it again. I prefer 3 for this reasons.<br>
> With #2 the user has to look further away (above the field) to find out what syntax rule was not met. With #4 that info is closer to the field.<br>
><br>
> On Mon, Jan 16, 2017 at 3:43 PM, Jenny Haines <<a href="mailto:jhaines@redhat.com" target="_blank">jhaines@redhat.com</a>> wrote:<br>
> Option 1/2 seems like a great option because it would suit a variety of cases.<br>
>       • By having the specific details in the top error message box, the error message is freed up to mention any errors not dealing with just single form fields, but also dependencies between form fields.<br>
>       • If there are multiple errors, the error details will take up less vertical space when encased in the top error message box. Less vertical space is due to the error details having more horizontal real estate before needing to wrap to the next line. (This is especially important in form layouts like the one Greg has included, above. You'll notice in this case, there isn't a ton of horizontal real estate under the form fields.)<br>
><br>
> Jenny Haines<br>
> UI/VISUAL DESIGNER<br>
> (m) <a href="tel:443-889-2881" value="+14438892881" target="_blank">443-889-2881</a><br>
> <a href="mailto:jhaines@redhat.com" target="_blank">jhaines@redhat.com</a><br>
> <a href="mailto:jennyhaines10@gmail.com" target="_blank">jennyhaines10@gmail.com</a><br>
><br>
> On Mon, Jan 16, 2017 at 3:18 PM, Matt Carrano <<a href="mailto:mcarrano@redhat.com" target="_blank">mcarrano@redhat.com</a>> wrote:<br>
> 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>
> Matt<br>
><br>
> On Mon, Jan 16, 2017 at 3:14 PM, Catherine Robson <<a href="mailto:crobson@redhat.com" target="_blank">crobson@redhat.com</a>> wrote:<br>
> Greg,<br>
><br>
> 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.<br>
><br>
> - Catherine<br>
><br>
> On Mon, Jan 16, 2017 at 2:59 PM, Greg Sheremeta <<a href="mailto:gshereme@redhat.com" target="_blank">gshereme@redhat.com</a>> wrote:<br>
> Check out this wizard we're implementing in oVirt. Option 6/7 simply won't work with this wizard at its current width.<br>
><br>
> However, how would 1/2 work with select boxes?<br>
><br>
> So -- I'm not sure :)<br>
><br>
> Best wishes,<br>
> Greg<br>
><br>
</div></div>> <wizard.png><br>
<span>><br>
> On Mon, Jan 16, 2017 at 2:53 PM, Catherine Robson <<a href="mailto:crobson@redhat.com" target="_blank">crobson@redhat.com</a>> wrote:<br>
> Jessica,<br>
><br>
> Thanks for so nicely laying out the options!  I lean towards #6,7, with #1,2 as a possible backup.  Reasoning:<br>
><br>
> 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.<br>
><br>
> 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.<br>
><br>
> 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.<br>
><br>
> - Catherine<br>
><br>
> On Mon, Jan 16, 2017 at 2:15 PM, Jessica Ryhanych <<a href="mailto:jryhanyc@redhat.com" target="_blank">jryhanyc@redhat.com</a>> wrote:<br>
> Hey PatternFlyers,<br>
> 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:<br>
><br>
> 1. Placeholder syntax hints – wireframe shows the form before user clicks or starts typing into the field<br>
><br>
</span>> <1. Placeholder syntax hint.png><br>
<span>><br>
><br>
> 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.<br>
><br>
</span>> <2. Placeholder syntax hint with error message.png><br>
<span>><br>
><br>
><br>
> 3. Syntax hints below input field<br>
><br>
</span>> <3. Syntax below input field.png><br>
<span>><br>
><br>
> 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.<br>
><br>
</span>> <4. Syntax hint below input field, error message copy.png><br>
<span>><br>
><br>
> 5. Syntax hints below input field – Syntax hint stays on the page after user submits and error message appears below original hint.<br>
><br>
> ***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.<br>
><br>
</span>> <5. Syntax hint below input field, error message.png><br>
<span>><br>
><br>
><br>
> 6. Syntax hints in-line with form field<br>
><br>
</span>> <6. Syntax inline with form field.png><br>
<span>><br>
><br>
> 7. Syntax hints in-line with form field – Syntax hint stays on screen after the user submits and receives an error message.<br>
><br>
> ***This could have similar challenges as #5 above and if needed, a responsive / mobile page layout would need to be determined.<br>
><br>
</span>> <7. Syntax inline with form field, error message.png><br>
<div class="m_-8263072435677047766m_4405521928841968487HOEnZb"><div class="m_-8263072435677047766m_4405521928841968487h5">><br>
> Thoughts, ideas, suggestions? Thanks!<br>
> Jessica<br>
><br>
><br>
> [1] <a href="https://blog.patternfly.org/exploring-syntax-hints/" rel="noreferrer" target="_blank">https://blog.patternfly.org/ex<wbr>ploring-syntax-hints/</a><br>
><br>
><br>
> / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /<br>
><br>
> Jessica W. Ryhanych<br>
> User Experience Design<br>
> Red Hat<br>
> <a href="mailto:jryhanyc@redhat.com" target="_blank">jryhanyc@redhat.com</a><br>
><br>
><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>
><br>
><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>
><br>
><br>
><br>
> --<br>
> 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>
><br>
><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>
><br>
><br>
><br>
> --<br>
> Matt Carrano<br>
> Sr. Interaction Designer<br>
> Red Hat, Inc.<br>
> <a href="mailto:mcarrano@redhat.com" target="_blank">mcarrano@redhat.com</a><br>
><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>
><br>
><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>
><br>
><br>
><br>
> --<br>
><br>
> Allie Jacobs<br>
> UXD<br>
> calendar<br>
><br>
><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>
><br>
><br>
><br>
> --<br>
> Patrick Cox<br>
> Manager, User Experience Design<br>
> <a href="tel:919-264-3017" value="+19192643017" target="_blank">919-264-3017</a> (mobile)<br>
> <a href="mailto:patrick.cox@redhat.com" target="_blank">patrick.cox@redhat.com</a><br>
><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>
><br>
><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>
><br>
><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>
<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>
</div></div></blockquote></div><br><br clear="all"><div><br></div>-- <br><div class="m_-8263072435677047766m_4405521928841968487gmail_signature" data-smartmail="gmail_signature"><div dir="ltr"><div><br></div>







Allie Jacobs<br>UXD
<p><span><a href="https://www.google.com/calendar/b/1/embed?src=ajacobs@redhat.com&ctz=America/New_York" target="_blank">calendar</a></span></p></div></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" target="_blank">https://www.redhat.com/mailman<wbr>/listinfo/patternfly</a><br></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></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>