[Patternfly] Syntax hint wireframes

Matt Carrano mcarrano at redhat.com
Mon Jan 16 20:18:39 UTC 2017


It may be hard to have one answer that works in all cases.  It may be the
6/7 is the best default choice.  But for modals or other forms that must
exist in a constrained space, placeholder text (1/2) is an acceptable
alternative.

Matt

On Mon, Jan 16, 2017 at 3:14 PM, Catherine Robson <crobson at redhat.com>
wrote:

> Greg,
>
> Why would you use syntax hints with a selector/dropdown?  There are only
> limited options, so syntax shouldn't be a problem in those cases I would
> assume.
>
> - Catherine
>
> On Mon, Jan 16, 2017 at 2:59 PM, Greg Sheremeta <gshereme at redhat.com>
> wrote:
>
>> Check out this wizard we're implementing in oVirt. Option 6/7 simply
>> won't work with this wizard at its current width.
>>
>> However, how would 1/2 work with select boxes?
>>
>> So -- I'm not sure :)
>>
>> Best wishes,
>> Greg
>>
>> [image: Inline image 1]
>>
>> On Mon, Jan 16, 2017 at 2:53 PM, Catherine Robson <crobson at redhat.com>
>> wrote:
>>
>>> Jessica,
>>>
>>> Thanks for so nicely laying out the options!  I lean towards #6,7, with
>>> #1,2 as a possible backup.  Reasoning:
>>>
>>> 1, 2.  The inline syntax hints keep the form concise and easy to scan
>>> without the syntax hints adding to the visual clutter of the page.  In
>>> *most* use cases, having the syntax hints overwritten by the user when they
>>> add a value shouldn't be much of a problem, but see why I prefer #6, 7
>>> below as a reason for when this is a problem.
>>>
>>> 3, 4, 5.  Below the field feels like it takes up too much vertical space
>>> on a form area where vertical space is usually the worst constraint.  There
>>> are many forms where it feels like we're trying to come up with "more
>>> information" (wrap fields to two columns, show additional information or
>>> contextual information to the sides, etc etc) to show horizontally because
>>> the page is so horizontally skinny and there is a lot of whitespace to the
>>> right of the fields.  This is why I prefer 6, 7 that leans towards using
>>> that space over growing an already vertically long form even longer.  If
>>> users are doing two-column forms there might be a conflict with 6,7 though.
>>>
>>> 6, 7.  I prefer this one the most because the syntax always remains, is
>>> off to the right where it doesn't grow the form or distract users in most
>>> cases, but is reference when users need it.  There are use cases where
>>> there may be default values or existing values in a form (edit mode for an
>>> already created system for instance) so that the inline syntax hints (1, 2)
>>> would be invisible for a user who is changing those values.   This one
>>> feels like the best use of space and persistence.
>>>
>>> - Catherine
>>>
>>> On Mon, Jan 16, 2017 at 2:15 PM, Jessica Ryhanych <jryhanyc at redhat.com>
>>> wrote:
>>>
>>>> Hey PatternFlyers,
>>>> I’ve attached a few wireframes addressing the initial discovery work
>>>> [1] on syntax hints. Please send your thoughts on which option we should
>>>> move forward with as the recommendation and what issues you see with it, if
>>>> any. Here we go:
>>>>
>>>> 1. Placeholder syntax hints – wireframe shows the form before user
>>>> clicks or starts typing into the field
>>>>
>>>>
>>>>
>>>> 2. Placeholder syntax hints – wireframe shows the form after user has
>>>> typed data into field, submitted, and an error message is returned. The
>>>> error message would need to specifically detail the problem with the
>>>> syntax.
>>>>
>>>>
>>>>
>>>>
>>>> 3. Syntax hints below input field
>>>>
>>>>
>>>>
>>>> 4. Syntax hints below input field – Original syntax hint would be
>>>> removed and replaced with red error message that reiterates syntax
>>>> requirements below form field.
>>>>
>>>>
>>>>
>>>> 5. Syntax hints below input field – Syntax hint stays on the page after
>>>> user submits and error message appears below original hint.
>>>>
>>>> ***This option seems redundant IMO and could be confusing /
>>>> overwhelming visually but I’m curious if anyone could see a scenario where
>>>> this might be needed.
>>>>
>>>>
>>>>
>>>>
>>>> 6. Syntax hints in-line with form field
>>>>
>>>>
>>>>
>>>> 7. Syntax hints in-line with form field – Syntax hint stays on screen
>>>> after the user submits and receives an error message.
>>>>
>>>> ***This could have similar challenges as #5 above and if needed, a
>>>> responsive / mobile page layout would need to be determined.
>>>>
>>>>
>>>> Thoughts, ideas, suggestions? Thanks!
>>>> Jessica
>>>>
>>>>
>>>> [1] https://blog.patternfly.org/exploring-syntax-hints/
>>>>
>>>>
>>>> */ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / *
>>>>
>>>> *Jessica W. Ryhanych*
>>>> User Experience Design
>>>> 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
>>>
>>>
>>
>>
>> --
>> Greg Sheremeta, MBA
>> Red Hat, Inc.
>> Sr. Software Engineer
>> gshereme at redhat.com
>>
>
>
> _______________________________________________
> 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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170116/94ccc351/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: wizard.png
Type: image/png
Size: 47044 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170116/94ccc351/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: 2. Placeholder syntax hint with error message.png
Type: image/png
Size: 41284 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170116/94ccc351/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: 7. Syntax inline with form field, error message.png
Type: image/png
Size: 42646 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170116/94ccc351/attachment-0002.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: 4. Syntax hint below input field, error message copy.png
Type: image/png
Size: 43660 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170116/94ccc351/attachment-0003.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: 5. Syntax hint below input field, error message.png
Type: image/png
Size: 42793 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170116/94ccc351/attachment-0004.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: 3. Syntax below input field.png
Type: image/png
Size: 33138 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170116/94ccc351/attachment-0005.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: 1. Placeholder syntax hint.png
Type: image/png
Size: 32894 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170116/94ccc351/attachment-0006.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: 6. Syntax inline with form field.png
Type: image/png
Size: 32976 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170116/94ccc351/attachment-0007.png>


More information about the PatternFly mailing list