[Patternfly] Syntax hint wireframes

[Jessica Ryhanych]

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/ <https://blog.patternfly.org/exploring-syntax-hints/>


/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / 

Jessica W. Ryhanych 
User Experience Design 
Red Hat
jryhanyc at redhat.com

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