[Patternfly] Syntax hint wireframes

Mon Jan 16 20:14:00 UTC 2017

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
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20170116/deaf0d68/attachment.htm>
-------------- 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/deaf0d68/attachment.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/deaf0d68/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/deaf0d68/attachment-0002.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/deaf0d68/attachment-0003.png>
-------------- 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/deaf0d68/attachment-0004.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/deaf0d68/attachment-0005.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/deaf0d68/attachment-0006.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/deaf0d68/attachment-0007.png>