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

[Jenny Haines]

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
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
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20161121/ad3619cc/attachment.htm>