Guidelines For Designing Effective Error Messages
Contents |
& Navigation Analysis Usability Testing UX Strategy Consulting In-House Training Reports Articles About NN/G Overview People Why NN/g? Contact News History Books Search Home Training Consulting Reports Articles friendly error messages examples About NN/G Browse by Topic and Author Topics E-commerce Intranets Mobile & error message ux Tablet User Testing Web Usability See all topics… All Article Topics All Topics (hide) Accessibility Agile Analytics error messages best practices & Metrics Application Design B2B Websites Behavior Patterns Branding Collaboration Content Strategy Corporate Websites Design Patterns Design Process E-commerce Email Eyetracking Heuristic Evaluation Human Computer Interaction Ideation Information
"error Message" Guidelines
Architecture Interaction Design International Users Intranets Management Mobile & Tablet Navigation Non-Profit Websites Personas Persuasive Design Prototyping Psychology and UX Research Methods Search Social Media Strategy User Testing Visual Design Web Usability Writing for the Web Young Users Author Jakob Nielsen Don Norman Bruce "Tog" Tognazzini See all authors… All Authors (hide) Aurora Bedford Raluca Budiu form error messages design Susan Farrell Therese Fessenden Kim Flaherty Sarah Gibbons Page Laubheimer Angie Li Hoa Loranger Kate Meyer Jakob Nielsen Don Norman Kara Pernice Christian Rohrer Amy Schade Katie Sherwin Bruce "Tog" Tognazzini Kathryn Whitenton Kate Williamson Recent Articles Journey Mapping in Real Life: A Survey of UX Practitioners Consistency in the Omnichannel Experience Scan and Shake: A Lesson in Technology Adoption from China’s WeChat Frequency & Recency of Site Visits: 2 Metrics for User Engagement International B2B Audiences: Top 5 Ways to Improve Your Site for Global Users See all articles… Popular Articles Usability 101: Introduction to Usability Top 10 Mistakes in Web Design How Users Read on the Web F-Shaped Pattern For Reading Web Content 10 Usability Heuristics for User Interface Design 10 Best Intranets of 2016 When to Use Which User-Experience Research Methods Response Times: The 3 Important Limits Why You Only Need to Test with 5 Users The Fold Manifesto: Why the Page Fold Still Matters Error Message Guidelines by Jakob Nielsen on June 24, 200
Experience View 21 comments Outline In order to display error messages on forms, you need to consider the following four basic rules: The error message needs to be short and meaningful The placement of the message needs to be associated with the field error message examples text The message style needs to be separated from the style of the field labels and
Good Error Message Text
instructions The style of the error field needs to be different than the normal field By combining these four rules, it is possible
Error Message Text Prank
to provide the necessary information to users where they have made mistakes on filling in forms and how to rectify them quickly and easily. This will encourage and help users to continue with their journey on the site; reduce https://www.nngroup.com/articles/error-message-guidelines/ basket abandonment; increase site registrations; increase enquiries about an application form and so forth. Introduction A typical interaction with many websites is filling in forms. For example, if you are buying something online, you have to give your card details, delivery address and other personal information. By clever placement of labels, instructions to fill in a field and additional design elements can make a form less daunting and may result in fewer mistakes made (Jarrett, C. and Gaffney, http://www.nomensa.com/blog/2010/4-rules-displaying-error-messages-user-experience-perspective G., 2008). However, I have seen that users make the same mistakes on forms again and again as these websites show error messages which are either not very clear to the user or because of their placement; users are unclear what messages relate to. This article focuses on how to provide error messages on forms from a user experience perspective. The message The error message needs to be clear, precise, short and punchy. Users should be able to immediately understand what ‘mistakes they have made’ and how to recover the error. This is fundamental and will have a huge impact if users can’t immediately understand what mistake they have made. One example of an unclear error message is on the Hotmail registration page where it asks for user’s ‘Birth year’. I remember using only two digits to represent a year before the year 2000. Well, the form does not give any instruction on that; even the error message does not give a clear idea of what was wrong with entering two digits for my birth year. Figure 1: Hotmail registration page- error message not providing how to put the birth year (e.g. ‘yyyy’) I know I was born in ’81 and I can verify it with my birth certificate. The error message should mention the format of the birth year that the user needs to follow, for example “Please enter b
Web Dev @ Microsoft SEO By WooRank Books Courses Screencasts Newsletters Versioning Shop Forums https://www.sitepoint.com/error-message-ux/ Advertise Contribute Contact Us Our Story 995kSubscribers 132kFollowers 80kFollowers Design & UX http://ux.stackexchange.com/questions/26173/what-is-best-practice-for-designing-form-error-messages Article The UX of Error Messages By Byron Houwens December 15, 2014 They glide beneath the waves of the web, silent, ferocious and seemingly just waiting for the opportunity to strike. They come in all shapes, sizes and levels of annoyance, and they almost always attack when error message you least expect it. Error messages are a part of the digital world and, like it or not, everyone has come across them before, from the technologically-challenged housewife to the hardcore gamer. As developers we likely see them more often than most. They’re inevitable, but the way we present these errors to the user can either have a error message text positive effect (well, as positive as can be expected) or a decidedly negative one. Let’s look at ways that we can approach handling error messages so that they convey meaning and provide a good user experience. Also, I feel it’s important to note that all the examples posted here have beenchosen without bias. I only chose them because they illustrated some point. Prevention is Better Than Cure Before going into handling error messages, it may be good to see how we can prevent the error from happening in the first place by guiding users in the right direction ahead of time. New passwords, for instance, are classic candidates for this method. The tweet above is funny, but it speaks to an issue that in many cases could’ve been avoided completely: letting users know about bad passwords after the fact. See how much attention that tweet got? It’s a sign, industry. A better approach would be to inform the user about what your password validation requirements, or advice on to make a good password, befor
Start here for a quick overview of the site Help Center Detailed answers to any questions you might have Meta Discuss the workings and policies of this site About Us Learn more about Stack Overflow the company Business Learn more about hiring developers or posting ads with us User Experience Questions Tags Users Badges Unanswered Ask Question _ User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute: Sign up Here's how it works: Anybody can ask a question Anybody can answer The best answers are voted up and rise to the top What is best practice for designing form error messages? up vote 136 down vote favorite 92 I've seen quite a lot of research on form design, but so far, I haven't come across any studies on error message design best practices. The only piece of advice seems to be that each error should clearly be associated with the invalid form field that it aims to correct. Has there been any research on this? I have some specific issues I'm trying to work through and would appreciate any insight or resources. Error message location When you have live form validation, where should an error (or success) message appear in relation to the form element? Some options: To the right of the input download bmml source – Wireframes created with Balsamiq Mockups To the right of the label download bmml source Above the label download bmml source Below the label download bmml source Below the input download bmml source There are some thorny issues that also need to be taken into account regarding location: How are errors displayed for radio or checkbox groups? How wide is the error message? Is the error message multi-line? Error message visibility Besides location, I'm also interested in how the visibility of the error message affects its usability. Does it matter or is it strictly a aesthetic decision? Consider the following 3 options: download bmml source Edit: There have been some excellent points on accessibility in some of the answers so far, as well as some interesting examples. However, I really would like to see some data