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.
Curious about what others think or are doing to date. Leslie On Thu, Nov 17, 2016 at 4:32 PM, Jessica Ryhanych <[email protected]> wrote: > 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]> > 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] >> >> >> _______________________________________________ >> Patternfly mailing list >> [email protected] >> https://www.redhat.com/mailman/listinfo/patternfly >> >> > >
_______________________________________________ Patternfly mailing list [email protected] https://www.redhat.com/mailman/listinfo/patternfly
