Wednesday, August 29, 2018

gui design - Where should form instructions or hints be placed?



I was browsing Forrst and came about a screenshot of a form designed with Twitter Bootstrap that had the label on the left, the input field on the right, and the instruction that it's required under the field itself, like this:


mockup


download bmml source – Wireframes created with Balsamiq Mockups


I almost commented that it's the wrong way but decided to check Twitter itself. It appears to be that such a layout is a part of their style guide:


enter image description here


and here's how it appears in the live Twitter:



enter image description here


The same approach is used in Wufoo:


enter image description here


and in JotForm:


enter image description here


But Google Forms put the help text under the label and before the input field:


enter image description here


Placing the help text after the field seems to violate some of the key principles of cognition (instructions before the task) and UX (minimize back-and-forth eye movements). I've looked around but the only studies I have found relate to labels (top, right, or left of the field) and it seems there's nothing about hints and/or instructions besides the suggestion of making them inline and shown on-field focus.


So what's the "right" way to place hints/instructions/directions/etc with relationship to the field and the label? The current choices include: under the label, above the field, after the field, and next to the field as inline callouts.




No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...