- 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--success">
<h2 class="message__title">Thanks for helping us improve</h2>
<p>This information has been reported on GitHub, where it's publicly visible.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Track your feedback</button></li>
<li><button class="button--standard" href="#">Submit another issue</button></li>
</ul>
</div>
</div>
</div>
<div class="slab slab--neutral" style="padding: 2rem">
<div class="message message--inverse-alt message--success">
<h2 class="message__title">Thanks for helping us improve</h2>
<p>This information has been reported on GitHub, where it's publicly visible.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Track your feedback</button></li>
<li><button class="button--standard" href="#">Submit another issue</button></li>
</ul>
</div>
</div>
</div>
<div class="slab slab--primary" style="padding: 2rem; margin-top: 2rem">
<div class="message message--inverse message--success">
<h2 class="message__title">Thanks for helping us improve</h2>
<p>This information has been reported on GitHub, where it's publicly visible.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Track your feedback</button></li>
<li><button class="button--standard" href="#">Submit another issue</button></li>
</ul>
</div>
</div>
</div>
<div class="slab slab--secondary" style="padding: 2rem; margin-top: 2rem">
<div class="message message--inverse message--success">
<h2 class="message__title">Thanks for helping us improve</h2>
<p>This information has been reported on GitHub, where it's publicly visible.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Track your feedback</button></li>
<li><button class="button--standard" href="#">Submit another issue</button></li>
</ul>
</div>
</div>
</div>
<div style="padding: 2rem">
<div class="message message--success">
<h2 class="message__title">Thanks for helping us improve</h2>
<p>This information has been reported on GitHub, where it's publicly visible.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Track your feedback</button></li>
<li><button class="button--standard" href="#">Submit another issue</button></li>
</ul>
</div>
</div>
</div>
<div class="slab slab--neutral" style="padding: 2rem">
<div class="message message--inverse-alt message--success">
<h2 class="message__title">Thanks for helping us improve</h2>
<p>This information has been reported on GitHub, where it's publicly visible.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Track your feedback</button></li>
<li><button class="button--standard" href="#">Submit another issue</button></li>
</ul>
</div>
</div>
</div>
<div class="slab slab--primary" style="padding: 2rem; margin-top: 2rem">
<div class="message message--inverse message--success">
<h2 class="message__title">Thanks for helping us improve</h2>
<p>This information has been reported on GitHub, where it's publicly visible.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Track your feedback</button></li>
<li><button class="button--standard" href="#">Submit another issue</button></li>
</ul>
</div>
</div>
</div>
<div class="slab slab--secondary" style="padding: 2rem; margin-top: 2rem">
<div class="message message--inverse message--success">
<h2 class="message__title">Thanks for helping us improve</h2>
<p>This information has been reported on GitHub, where it's publicly visible.</p>
<div class="message--alert__bottom">
<ul class="list--buttons">
<li><button class="button--standard" href="#">Track your feedback</button></li>
<li><button class="button--standard" href="#">Submit another issue</button></li>
</ul>
</div>
</div>
</div>
/* No context defined. */