Hey Leslie,
That is a great point – I found two examples of responsive forms that could be 
a workaround:

1. The syntax text stays visible when a user clicks, but only disappears as 
they start typing. See here <https://order.emporiumpies.com/>. (In step 1 of 
the form, pick Delivery to see a few examples.) 

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 here 
<https://stuffandnonsense.co.uk/contact>. (look for “Existing website address”)

Thoughts from everyone? Would this be challenging to implement? Depending on 
the length of the form, I could see option 1 becoming visually distracting.

Thanks,
Jessica

/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / 

Jessica W. Ryhanych
Senior Designer, Employment Branding + Communications 
Red Hat
[email protected]

> On Nov 17, 2016, at 10:52 AM, Leslie Hinson <[email protected]> wrote:
> 
> Thanks for sending this out Jessica. 
> 
> 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.
> 
> Leslie
> 
> On Tue, Nov 15, 2016 at 2:18 PM, Jessica Ryhanych <[email protected] 
> <mailto:[email protected]>> wrote:
> Hi PatternFly,
> 
> 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? 
> 
> I’ve been reviewing an excerpt <http://static.lukew.com/webforms_lukew.pdf> 
> from Luke Wroblewski’s book, Web Form Design, and found a few examples that 
> might be food for thought.
> 
> Examples:
> 
> - syntax hint is below input field, left aligned, font color & weight is 
> differentiated from label text
> <Screen Shot 2016-11-15 at 1.51.13 PM.png>
> 
> 
> 
> - syntax hint is left aligned to input field, font color & weight is 
> differentiated from label text
> <Screen Shot 2016-11-15 at 1.25.31 PM.png>
> 
> - syntax hint follows label text, font color is differentiated from label, 
> placement above input field
> <Screen Shot 2016-11-15 at 1.25.39 PM.png>
> 
> Please share any examples from your daily work and/or other considerations I 
> might have missed. Thanks!
> Jessica
> 
> / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / 
> 
> Jessica W. Ryhanych
> Senior Designer, Employment Branding + Communications 
> Red Hat
> [email protected] <mailto:[email protected]>
> 
> _______________________________________________
> Patternfly mailing list
> [email protected] <mailto:[email protected]>
> https://www.redhat.com/mailman/listinfo/patternfly 
> <https://www.redhat.com/mailman/listinfo/patternfly>
> 
> 

_______________________________________________
Patternfly mailing list
[email protected]
https://www.redhat.com/mailman/listinfo/patternfly

Reply via email to