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.