I agree- the first of the two options seems like a great way to give the user a last chance to view the syntax text. This is important when someone quickly tabs through a form. There are definitely some specific cases when breaking apart form fields makes more sense from a usability perspective.
- "Name ________ -> First Name _____ Last Name ______ - Phone Number _________ -> Phone Number (__) - __ - __ *Jenny Haines* *UI/VISUAL DESIGNER* (m) 443-889-2881 [email protected] [email protected] On Mon, Nov 21, 2016 at 11:27 AM, Matt Carrano <[email protected]> wrote: > I like the first option also, and feel like this is most consistent with > what I expect. > > Matt > > On Mon, Nov 21, 2016 at 8:06 AM, Leslie Hinson <[email protected]> wrote: > >> 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 >> >> > > > -- > Matt Carrano > Sr. Interaction Designer > Red Hat, Inc. > [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
