On Mon, Nov 21, 2016 at 9:18 AM, Jenny Haines <[email protected]> wrote:
> 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 ______ > > First name/last name is a very Western-centric approach to names, so while I've done separated first/last name fields like this (mainly because they were handed to me as requirements), they may not be an inclusive way to design forms: https://www.w3.org/International/questions/qa-personal-names > > - Phone Number _________ -> Phone Number (__) - __ - __ > > Phone numbers seem very tricky, because the format changes dramatically based on the country code. If all your registrants are from the United States, Canada, Bahamas, etc (+1 country code) then this approach works, though it does impact some interactions like copy/paste of a phone number into or out of the field. Of course, everything depends on what and for whom you're designing. > *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 > > -- Jonathan Yu / Software Engineer, OpenShift by Red Hat / Follow me on Twitter @jawnsy <https://twitter.com/jawnsy> *“Restlessness is discontent — and discontent is the first necessity of progress. Show me a thoroughly satisfied man — and I will show you a failure.”* — Thomas Edison
_______________________________________________ Patternfly mailing list [email protected] https://www.redhat.com/mailman/listinfo/patternfly
