The best way that several books (e.g., 37 Signals, and I believe Luke Wroblewski's Web Form Design book has it as well) have shown to display an error message is to use an error icon, such as an X or a ! (often surrounded by a circle or triangle or diamond), and to the right of that error icon, display a message above the incorrect field. If there is no room to display it above the incorrect field, you could put it the the right if there are no formatting hints in the way. You could also surround the entire error message and field with a red outline to make it really stand out.
To help avoid an error, have a forgiving format, (for example, allow phone numbers with no spaces, spaces, hyphens, parentheses) or if that is not possible given your database or the code, then provide a formatting hint (e.g., xxx-xxx-xxxx) to the right in gray text or underneath, depending on space constraints. Highlighting the fields is good, but color shouldn't be the only way that you convey information to your users. Red-green color-blind people might miss the highlighting distinction (they see red and pink as shades of brown). Also, make sure that you indicate required fields (a standard is with bold and asterisks) to highlight that distinction, to help avoid errors occurring in the first place. Hope that helps. Courtney Senior Usability Analyst -----Original Message----- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Rachel Sent: Thursday, November 06, 2008 10:53 AM To: [EMAIL PROTECTED] Subject: [IxDA Discuss] Error messages for edit-in-place forms I'm working on an Ajax app that will have edit-in-place forms (a.k.a. inline editing). Page has read-only data; parts of the data are editable. User chooses to edit a part; that part turns into an editable form. When user saves changes, the form converts back to read-only data (this happens without a page reload). The fields in the forms are required. So if user leaves any blank, they need to be challenged, and we need to let them know which fields are in question. What's the best way to handle this? We are reluctant to show an error message right above the form, because it will push the form & other content on the page downward, creating a visual "jumping" effect. (unless we overlay the error message over top of other content on the page) What are best practices for this? Good examples? Thanks, Rachel ________________________________________________________________ Welcome to the Interaction Design Association (IxDA)! To post to this list ....... [EMAIL PROTECTED] Unsubscribe ................ http://www.ixda.org/unsubscribe List Guidelines ............ http://www.ixda.org/guidelines List Help .................. http://www.ixda.org/help ________________________________________________________________ Welcome to the Interaction Design Association (IxDA)! To post to this list ....... [EMAIL PROTECTED] Unsubscribe ................ http://www.ixda.org/unsubscribe List Guidelines ............ http://www.ixda.org/guidelines List Help .................. http://www.ixda.org/help
