<html><head><meta http-equiv="Content-Type" content="text/html charset=utf-8"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class="">Hey Jonathan,<div class="">Thank you for sharing all these questions, they really got me thinking about what we’re specifically trying to solve for in this user story. I’ve included my questions and thoughts in response below. If anyone has specific examples where they thought syntax hints would be helpful, let me know! </div><div class=""><br class=""></div><div class="">Thanks!</div><div class="">Jessica</div><div class=""><div class="">
<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; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; line-height: normal; word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class=""><b class=""><br class="Apple-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; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; line-height: normal; word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class=""><b class=""><br class=""></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; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; line-height: normal; word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class=""><b class="">Jessica W. Ryhanych</b><br class="">Senior Designer, Employment Branding + Communications <br class="">Red Hat<br class=""><a href="mailto:jryhanyc@redhat.com" class="">jryhanyc@redhat.com</a></div>
</div>
<br class=""><div><blockquote type="cite" class=""><div class="">On Nov 21, 2016, at 1:35 PM, Jonathan Yu <<a href="mailto:jawnsy@redhat.com" class="">jawnsy@redhat.com</a>> wrote:</div><br class="Apple-interchange-newline"><div class=""><div dir="ltr" class=""><div class=""><div class=""><div class=""><div class="">I don't have any specific recommendations, but hoped that these questions might help you refine the interaction design:<br class=""></div><ol class=""><li class="">Is the syntax well-defined based on your problem domain? The same phone number can be written as <a target="_blank" value="+16505555555" href="tel:%2B1%20%28650%29%20555-5555" class="">+1 (650) 555-5555</a>, <a target="_blank" value="+16505555555" href="tel:6505555555" class="">6505555555</a>, <a target="_blank" value="+16505555555" href="tel:650.555.5555" class="">650.555.5555</a>, …</li></ol></div></div></div></div></div></blockquote>- I would think so. It would be helpful to have global recommendations but also address specific use cases for a variety of input data (based on language, region, etc). Similar to the Country Selector example you shared to avoid user error. <br class=""><blockquote type="cite" class=""><div class=""><div dir="ltr" class=""><div class=""><div class=""><div class=""><ol class="" start="2"><ul class=""><li class="">Would client-side parsing and formatting be better than showing an example? If the user types "<a target="_blank" value="+16505555555" href="tel:6505555555" class="">6505555555</a>", format that for display "<a target="_blank" value="+16505555555" href="tel:%28650%29%20555-5555" class="">(650) 555-5555</a>" either inline (tricky) or in an adjacent output text area. This shows the user that we understood their input, allows them to confirm things were input correctly, and allows the user to enter the number in whatever format they prefer.</li></ul></ol></div></div></div></div></div></blockquote>My gut reaction is that if we want the user to complete the form quickly, an example input would help speed up form completion. If a user has to start typing to confirm the format, they may need to delete content or start over. Thoughts from the group on this one?<br class=""><blockquote type="cite" class=""><div class=""><div dir="ltr" class=""><div class=""><div class=""><div class=""><ol class="" start="2"><ul class=""><li class="">Are there secondary validations that would be useful? It looks like a phone number, but is it a valid one that the user controls? Twilio specializes in this sort of stuff, and they have a useful Lookup API [0, 1].</li></ul><li class="">Is the syntax required to understand the contents of each field?</li><ul class=""><li class="">The second link doesn't have any examples and seems pretty understandable, so maybe the placeholder text is superfluous?</li></ul></ol></div></div></div></div></div></blockquote>- Should syntax hints be used on every form field or only per recommended use cases? (with the recommendation of using progressive disclosure to avoid visual overload?)<br class=""><blockquote type="cite" class=""><div class=""><div dir="ltr" class=""><div class=""><div class=""><div class=""><ol class="" start="2"><ul class=""><li class="">If it's required, then how should it interact with assistive devices like screen readers? And is the low contrast problematic for visually-impaired users?</li></ul></ol></div></div></div></div></div></blockquote>Has anyone had any experience working on a scenario like this? I think the contrast in the example is problematic – we would need to address that in the visual design phase for sure.<br class=""><blockquote type="cite" class=""><div class=""><div dir="ltr" class=""><div class=""><div class=""><div class=""><ol class="" start="3"><ul class=""><li class="">The disappearing text trick looks cool (though it doesn't seem to work in Firefox on my machine), but is it actually helpful for the user? Additionally, it implies that only http:// links (not the https:// links that are more preferred nowadays) are accepted.<br class=""></li><li class="">I'm a fan of minimalism and Strunk/White's "omit needless words"
(perhaps more than this hastily-written email would seem to suggest)</li></ul><li class="">Is the user interested in what needs to be put in the box (syntax), or do they want to know how the information will be used (usage)? The "this will be used to sign into your account" comment is helpful, as would a "we won't spam you or share your email with anyone" promise.</li></ol></div></div></div></div></div></blockquote>- Another great question, I think the main goal is around the syntax, but are there scenarios where both would be needed for a user to complete a task? Or complete a task faster?<br class=""><blockquote type="cite" class=""><div class=""><div dir="ltr" class=""><div class=""><div class=""><div class=""><ol class="" start="4"><li class="">Is your form interactive?</li><ul class=""><li class="">Would progressive disclosure make the form less daunting at first? The more explanatory text and fields that are on a form (whether online or on paper), the worse your conversion rates are likely to be. At least for me, seeing forms with lots of fields or legalese makes me go "ugh, how much do I *really* need whatever the form will grant me?”</li></ul></ol></div></div></div></div></div></blockquote>- I agree on this one, which goes back to my question of – do we use syntax hints on all form fields? If so, I like the idea of progressive disclosure.<br class=""><blockquote type="cite" class=""><div class=""><div dir="ltr" class=""><div class=""><div class=""><div class=""><ol class="" start="5"><ul class=""><li class="">The business rules may vary based on some parts of the form input; for example, in OpenShift Online, we need to collect your county (for tax purposes) for the United States, but not for other countries, so we progressively disclose that input according to the country (which is completed "earlier" by virtue of being ordered first in the form, on the underlying assumption that most people complete forms top-to-bottom)<br class=""></li></ul><li class="">Is there an intelligent default that can be automatically detected or inferred? For example, if you have the user's address, you can likely infer their timezone (which, as an aside, should be an IANA timezone [2] like America/New_York to properly handle daylight savings and other rules). Similar for currency, language, or other internationalization-related things like preferred number formatting. Of course, these should be overridable.<br class=""></li></ol></div></div>My general thought with respect to implementation difficulty is a simple cost/benefit comparison:<br class=""></div><div class=""><ul class=""><li class="">Is it a one-off? For example, a little web site to go along with an ad campaign for a limited time wouldn't justify as much investment.</li><li class="">Is it a problem shared by many applications? (phone number or email fields - or any of the other <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes" class="">special HTML5 form inputs</a> - are a good indicator that the control is common across many different types of applications)</li></ul></div></div></div></blockquote>- Can anyone share specific examples of pain points where syntax hints could improve the user experience? This would help determine in what scenarios they should be used. <br class=""><blockquote type="cite" class=""><div class=""><div dir="ltr" class=""><div class="">PatternFly is great because we all benefit from the initial user research, design, and development effort, amortizing that initial upfront investment across all the users of it, so it's often worth spending a relatively long time working on something, especially if it improves key metrics like conversion rates (and general user/customer happiness). An example I really like is this country selector: explanation [3] and demo [4]<br class=""></div></div></div></blockquote><div>- I really like this example and agree – there are a lot of questions to address around syntax hints.</div><blockquote type="cite" class=""><div class=""><div dir="ltr" class=""><div class=""><br class=""></div><div class="">Best of luck!<br class=""><br class=""></div><div class="">Jonathan<br class=""></div><div class=""><br class="">[0] <a target="_blank" href="https://www.twilio.com/lookup" class="">https://www.twilio.com/lookup</a><br class="">[1] <a target="_blank" href="https://www.twilio.com/blog/2016/03/announcing-caller-id-name-lookup.html" class="">https://www.twilio.com/blog/<wbr class="">2016/03/announcing-caller-id-<wbr class="">name-lookup.html</a><br class="">[2] <a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones" class="">https://en.wikipedia.org/wiki/List_of_tz_database_time_zones</a><br class="">[3] <a href="https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/" class="">https://www.smashingmagazine.com/2011/11/redesigning-the-country-selector/</a><br class="">[4] <a href="http://baymard.com/labs/country-selector" class="">http://baymard.com/labs/country-selector</a><br class=""><div class=""><div class=""><div class=""><div class=""><div class=""><div class=""><div class=""><div class=""><div class="gmail_extra"><br class=""><div class="gmail_quote">On Thu, Nov 17, 2016 at 1:32 PM, Jessica Ryhanych <span dir="ltr" class=""><<a target="_blank" href="mailto:jryhanyc@redhat.com" class="">jryhanyc@redhat.com</a>></span> wrote:<br class=""><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div style="word-wrap:break-word" class="">Hey Leslie,<div class="">That is a great point – I found two examples of responsive forms that could be a workaround:</div><div class=""><br class=""></div><div class="">1. The syntax text stays visible when a user clicks, but only disappears as they start typing. See <a target="_blank" href="https://order.emporiumpies.com/" class="">here</a>. (In step 1 of the form, pick Delivery to see a few examples.) </div><div class=""><br class=""></div><div class="">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 target="_blank" href="https://stuffandnonsense.co.uk/contact" class="">here</a>. (look for “Existing website address”)</div><div class=""><br class=""></div><div class="">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 class=""><br class=""></div><div class="">Thanks,</div><div class="">Jessica</div><div class=""><span class="gmail-m_8119456889254693335gmail-"><div class="">
<div style="font-family: helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-position: 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;" class=""><b class=""><br class="gmail-m_8119456889254693335gmail-m_-707483426372222740Apple-interchange-newline">/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / </b></div><div style="font-family: helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-position: 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;" class=""><b class=""><br class=""></b></div><div style="font-family: helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-position: 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;" class=""><b class="">Jessica W. Ryhanych</b><br class="">Senior Designer, Employment Branding + Communications <br class="">Red Hat<br class=""><a target="_blank" href="mailto:jryhanyc@redhat.com" class="">jryhanyc@redhat.com</a></div>
</div>
<br class=""></span><div class=""><blockquote type="cite" class=""><span class="gmail-m_8119456889254693335gmail-"><div class="">On Nov 17, 2016, at 10:52 AM, Leslie Hinson <<a target="_blank" href="mailto:lhinson@redhat.com" class="">lhinson@redhat.com</a>> wrote:</div><br class="gmail-m_8119456889254693335gmail-m_-707483426372222740Apple-interchange-newline"></span><div class=""><span class="gmail-m_8119456889254693335gmail-"><div dir="ltr" class="">Thanks for sending this out Jessica. <div class=""><br class=""></div><div class="">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 class=""><br class=""></div><div class="">Leslie</div></div></div></span><div class="gmail_extra"><br class=""><div class="gmail_quote"><span class="gmail-m_8119456889254693335gmail-">On Tue, Nov 15, 2016 at 2:18 PM, Jessica Ryhanych <span dir="ltr" class=""><<a target="_blank" href="mailto:jryhanyc@redhat.com" class="">jryhanyc@redhat.com</a>></span> wrote:<br class=""></span><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div style="word-wrap:break-word" class=""><span class="gmail-m_8119456889254693335gmail-">Hi PatternFly,<div class=""><br class=""></div><div class="">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 class=""><br class=""></div><div class="">I’ve been reviewing an <a target="_blank" href="http://static.lukew.com/webforms_lukew.pdf" class="">excerpt</a> from Luke Wroblewski’s book, Web Form Design, and found a few examples that might be food for thought.</div><div class=""><br class=""></div><div class=""><b class="">Examples:</b></div><div class=""><b class=""><br class=""></b></div><div class="">- syntax hint is below input field, left aligned, font color & weight is differentiated from label text</div></span><div class=""><span id="gmail-m_8119456889254693335gmail-m_-707483426372222740cid:F89CBA9B-8C2D-49A3-8FFF-FBB6CDB89A48@rdu.redhat.com" class=""><Screen Shot 2016-11-15 at 1.51.13 PM.png></span><span class="gmail-m_8119456889254693335gmail-"><br class=""><div class=""><br class=""></div><div class=""><br class=""></div><div class=""><br class=""></div><div class="">- syntax hint is left aligned to input field, font color & weight is differentiated from label text</div></span><div class=""><span id="gmail-m_8119456889254693335gmail-m_-707483426372222740cid:18FEC3B8-3B18-47F3-AE8E-ECBFADA2479F@rdu.redhat.com" class=""><Screen Shot 2016-11-15 at 1.25.31 PM.png></span></div><span class="gmail-m_8119456889254693335gmail-"><div class=""><br class=""></div><div class="">- syntax hint follows label text, font color is differentiated from label, placement above input field</div></span><div class=""><span id="gmail-m_8119456889254693335gmail-m_-707483426372222740cid:D77A7C7D-CEC5-4838-8507-62ACEB5CF4FB@rdu.redhat.com" class=""><Screen Shot 2016-11-15 at 1.25.39 PM.png></span></div><span class="gmail-m_8119456889254693335gmail-"><div class=""><br class=""></div><div class="">Please share any examples from your daily work and/or other considerations I might have missed. Thanks!</div><div class="">Jessica</div><div class="">
<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" class=""><b class=""><br class="gmail-m_8119456889254693335gmail-m_-707483426372222740m_-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" class=""><b class=""><br class=""></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" class=""><b class="">Jessica W. Ryhanych</b><br class="">Senior Designer, Employment Branding + Communications <br class="">Red Hat<br class=""><a target="_blank" href="mailto:jryhanyc@redhat.com" class="">jryhanyc@redhat.com</a></div>
</div>
<br class=""></span></div></div><span class="gmail-m_8119456889254693335gmail-"><br class="">______________________________<wbr class="">_________________<br class="">
Patternfly mailing list<br class="">
<a target="_blank" href="mailto:Patternfly@redhat.com" class="">Patternfly@redhat.com</a><br class="">
<a target="_blank" href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" class="">https://www.redhat.com/mailman<wbr class="">/listinfo/patternfly</a><br class="">
<br class=""></span></blockquote></div><br class=""></div>
</div></blockquote></div><br class=""></div></div><br class="">______________________________<wbr class="">_________________<br class="">
Patternfly mailing list<br class="">
<a target="_blank" href="mailto:Patternfly@redhat.com" class="">Patternfly@redhat.com</a><br class="">
<a target="_blank" href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" class="">https://www.redhat.com/mailman<wbr class="">/listinfo/patternfly</a><br class="">
<br class=""></blockquote></div><br class=""><br clear="all" class=""><br class="">-- <br class=""><div class="gmail-m_8119456889254693335gmail_signature"><div dir="ltr" class=""><div style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px" class=""><span class=""><span class="">Jonathan</span><span class=""> </span><span class="">Yu</span><span class=""> </span></span>/<span class=""> </span><span class="">Software Engineer</span>,<span class=""> </span><span class="">OpenShift</span><span class=""> </span>by<span class=""> </span><span class="">Red Hat</span><span class=""> </span>/<span class=""> </span><a target="_blank" href="https://twitter.com/jawnsy" style="color:rgb(49,175,89);text-decoration:none" class="">Follow me on Twitter @jawnsy</a></div><br style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px" class=""><i style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px" class="">“Restlessness is discontent — and discontent is the first necessity of progress. Show me a thoroughly satisfied man — and I will show you a failure.”</i><span style="color:rgb(68,68,68);font-family:arial,"helvetica neue",helvetica,sans-serif;font-size:12px;font-style:normal;font-weight:normal;letter-spacing:normal;text-align:start;text-indent:0px;text-transform:none;white-space:normal;word-spacing:0px;display:inline;float:none" class=""><span class=""> </span>— Thomas Edison</span></div></div>
</div></div></div></div></div></div></div></div></div></div></div>
</div></blockquote></div><br class=""></div></body></html>