- 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--error">
<h2 class="message__title">Input required</h2>
<p>Please fill out at least one field.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Try again</button></li>
</ul>
</div>
</div>
</div>
<div class="slab slab--neutral" style="padding: 2rem">
<div class="message message--inverse-alt message--error">
<h2 class="message__title">Input required</h2>
<p>Please fill out at least one field.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Try again</button></li>
</ul>
</div>
</div>
</div>
<div class="slab slab--primary" style="padding: 2rem; margin-top: 2rem">
<div class="message message--inverse message--error">
<h2 class="message__title">Input required</h2>
<p>Please fill out at least one field.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Try again</button></li>
</ul>
</div>
</div>
</div>
<div class="slab slab--secondary" style="padding: 2rem; margin-top: 2rem">
<div class="message message--inverse message--error">
<h2 class="message__title">Input required</h2>
<p>Please fill out at least one field.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Try again</button></li>
</ul>
</div>
</div>
</div>
<div style="padding: 2rem">
<div class="message message--error">
<h2 class="message__title">Input required</h2>
<p>Please fill out at least one field.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Try again</button></li>
</ul>
</div>
</div>
</div>
<div class="slab slab--neutral" style="padding: 2rem">
<div class="message message--inverse-alt message--error">
<h2 class="message__title">Input required</h2>
<p>Please fill out at least one field.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Try again</button></li>
</ul>
</div>
</div>
</div>
<div class="slab slab--primary" style="padding: 2rem; margin-top: 2rem">
<div class="message message--inverse message--error">
<h2 class="message__title">Input required</h2>
<p>Please fill out at least one field.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Try again</button></li>
</ul>
</div>
</div>
</div>
<div class="slab slab--secondary" style="padding: 2rem; margin-top: 2rem">
<div class="message message--inverse message--error">
<h2 class="message__title">Input required</h2>
<p>Please fill out at least one field.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Try again</button></li>
</ul>
</div>
</div>
</div>
/* No context defined. */