small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p><a href="https://uxplanet.org/how-to-write-a-perfect-error-message-da1ca65a8f36?source=rss----819cc2aaeee0---4">UX Planet &mdash; Medium</a> | Vitaly Dulenko <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xzoYpYHX1Cgb9cuUi6w-LQ.png"></p>
<p>Every system can’t work without errors. It can be user’s errors or system’s fails. In both cases, it’s very important to handle errors in a right way as they are crucial for a good user experience.</p>
<p><strong>Here are 3 vital parts of every good error message:</strong></p>
<ol>
<li>Clear text message.</li>
<li>The right placement.</li>
<li>The good visual design.</li>
</ol>
<h3><strong>Clear text</strong> message</h3>
<h4>1. Error message should be clear</h4>
<p>The error messages should clearly define what the problem was, why it happened, and what to do about it. Think of your error message as a conversation with your user — it should sound like they’ve been written for humans. Make sure your error message is polite, understandable, friendly and jargon-free.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/921/1*2RdNRoDJmqfArWaViXal-g.png"></p>
<h4>2. Error message should be helpful</h4>
<p>It’s not enough to write that something went wrong. Show the users the way how to fix it as soon and easy as possible.</p>
<p>For example, Microsoft describes what’s wrong and provides a solution in the error message so you can immediately fix this issue.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/921/1*9eTjcpNOWtE7pEWXpiPivA.png"></p>
<h4>3. Error message should be specific to the situation</h4>
<p>Very often websites use only one error message for all validation states. You left this email field blank — “Enter a valid email address”, you missed the “@” character — “Enter a valid email address”. The MailChimp does it in another way — they have 3 error messages for each state of email validation. The first one checks if the input field isn’t blank when submitting the form. The other two check if there is “@” and “.” characters. (However “Please enter a value” isn’t a great example of the error writing, it is unclear what kind of value you need to enter.) Show your users actual messages instead of general ones.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/921/1*cbmeYu8zkwhuw-I6fxn5gQ.png"></p>
<h4>4. Error message should be polite</h4>
<p>Don’t blame your users that they did something wrong even if they did. Be polite to your user, make them feel comfortable and convenient. It’s a great opportunity to use your brand voice and add personality into the errors.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/835/1*4C2I4mLoV7A2Xclp5xXYmg.png"></p>
<h4>5. Use humor if it’s appropriate</h4>
<p>Be careful using humor in your error message. First of all the error message should be informative and helpful. Then you can improve user experience adding some humor in your error message if it’s appropriate.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/758/1*cVp9802WuM8W1pb4kSRH-A.png"></p>
<h3>The right place for error messages</h3>
<p>The good error message is that one you can see when needed. Avoid error summaries, place error messages next to the UI elements they are related to.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/921/1*90bO1c3llbghosgQTH0hwA.png"></p>
<h3>The right visual design for the error message</h3>
<p>The error message should be clearly visible. Use contrast text and background colors so the user can easily notice and read the message.</p>
<p>As usual, the red color is used for error message text. In some cases, yellow or orange colors are used as some resources state that red color is too stressful for users. In both cases, be sure that the error text is legible, with noticeable contrast against its background color. Don’t forget to provide a related icon alongside the color to improve the accessibility for people with color-blindness.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/921/1*Gny4mwee7oJL1vQsNgJhkg.png"></p>
<h3>Conclusion</h3>
<p>Error messages are a great opportunity to improve user experience, share your brand voice and personality. Pay attention to all aspects of a good error message — the language, placement, and visual design to make it a really perfect.</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Fb3e808%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Fb3e808%2F&#038;image=https%3A%2F%2Fupscri.be%2Fmedia%2Fform.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="480" frameborder="0"><a href="https://medium.com/media/96d08ab34921bdd17986cb5c0396842f/href">https://medium.com/media/96d08ab34921bdd17986cb5c0396842f/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=da1ca65a8f36" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://uxplanet.org/how-to-write-a-perfect-error-message-da1ca65a8f36">How to Write a Perfect Error Message</a> was originally published in <a href="https://uxplanet.org">UX Planet</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


How to Write a Perfect Error Message

How to Write a Perfect Error Message

Top Stories