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

Mon Nov 21 17:40:06 UTC 2016

On Mon, Nov 21, 2016 at 9:18 AM, Jenny Haines <jhaines at redhat.com> 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
> jhaines at redhat.com
> jennyhaines10 at gmail.com
>
> On Mon, Nov 21, 2016 at 11:27 AM, Matt Carrano <mcarrano at redhat.com>
> 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 <lhinson at redhat.com>
>> 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 <jryhanyc at redhat.com>
>>> 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
>>>> 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>
>>>> 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
>>>>>
>>>>>
>>>>> _______________________________________________
>>>>> Patternfly mailing list
>>>>> Patternfly at redhat.com
>>>>> https://www.redhat.com/mailman/listinfo/patternfly
>>>>>
>>>>>
>>>>
>>>>
>>>
>>> _______________________________________________
>>> Patternfly mailing list
>>> Patternfly at redhat.com
>>> https://www.redhat.com/mailman/listinfo/patternfly
>>>
>>>
>>
>>
>> --
>> Matt Carrano
>> Sr. Interaction Designer
>> Red Hat, Inc.
>> mcarrano at redhat.com
>>
>> _______________________________________________
>> Patternfly mailing list
>> Patternfly at redhat.com
>> https://www.redhat.com/mailman/listinfo/patternfly
>>
>>
>
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com
> 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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161121/4eb2847f/attachment.htm>