- When the user is required to do something in response to an alert, let them know what they need to do and make that task as easy as possible. Think about how much context to provide with your message. For example, a notification of a system change may require more contextual information than a validation message. Write the message in concise, human readable language; avoid jargon and computer code.
- Be polite in error messages — don’t place blame on the user.
- Users generally won’t read documentation but will read a message that helps them resolve an error; include some educational material in your error message.
- But don’t overdo it — too many notifications will either overwhelm or annoy the user and are likely to be ignored.
- Allow a user to dismiss a notification wherever appropriate.
- Don’t include notifications that aren’t related to the user’s current goal.
<div style="padding: 2rem">
<div class="message message--no-icon">
<h2 class="message__title">No results</h2>
<p>Sorry, we didn't find any financial data for <strong>Committee Name</strong> in the <strong>2007–2012</strong> election cycle.</p>
<div class="message--alert__bottom">
<p>Is this information incorrect? Please let us know.</p>
<ul class="list--buttons">
<li><button class="button--standard" href="#">File an issue</button></li>
<li><button class="button--standard" href="#">Email our team</button></li>
</ul>
</div>
</div>
</div>
<div style="padding: 2rem">
<div class="message message--no-icon">
<h2 class="message__title">No results</h2>
<p>Sorry, we didn't find any financial data for <strong>Committee Name</strong> in the <strong>2007–2012</strong> election cycle.</p>
<div class="message--alert__bottom">
<p>Is this information incorrect? Please let us know.</p>
<ul class="list--buttons">
<li><button class="button--standard" href="#">File an issue</button></li>
<li><button class="button--standard" href="#">Email our team</button></li>
</ul>
</div>
</div>
</div>
/* No context defined. */