[Patternfly] Share your thoughts: syntax hints used in forms

[Jessica Ryhanych]

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
jryhanyc at redhat.com

> On Nov 17, 2016, at 10:52 AM, Leslie Hinson <lhinson at redhat.com> 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 <jryhanyc at redhat.com <mailto:jryhanyc at redhat.com>> 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
> jryhanyc at redhat.com <mailto:jryhanyc at redhat.com>
> 
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com <mailto:Patternfly at redhat.com>
> https://www.redhat.com/mailman/listinfo/patternfly <https://www.redhat.com/mailman/listinfo/patternfly>
> 
> 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161117/b5bfc93a/attachment.htm>