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

[Leslie Hinson]

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