I have a rather lengthy form that is going to be filled out by non-technical users. They need as much help as they can get. But I still want it to look pretty without littering the form with paragraphs of text everywhere.
Thus, I think I want some kind of help text to appear when they focus an element. I was thinking I could do this in a little speech bubble. I was also going to have error messages appear to the right of each text box they screwed up. But then the help bubble would obscure the error message when they focus the element to fix the error. I just can't picture a nice way to do this...
Does anyone have some examples?
You can use two separate boxes. One for error mesages (you can use a color such as red in order to alert the user) and a second box for information. Using a little bit of jQuery for the effect, and photoshop in order to draw this boxes, the outcome would be very catchy even for a newbie
you could inject your error messages INTO the speech bubbles.
you could make your speech bubbles appear above the form field they apply to, but that would be annoying for users who do not need them, as it's more difficult to ignore them in that space.
if your form fields have enough space above and below them, you could display your error message directly above the input, when necessary.