!

Update Alerts
Best Practice: How to Implement Update Alerts
Short update alerts can be a highly visible and effective means of informing users of important and
personally relevant changes. We can use update alerts to inform users of general changes (i.e.,
those that relate to the overall user experience) or of context-specific changes, such as bulletins
showing users what status updates their friends have made whenever they log in to their personal
homepages. Implementing update alerts involves these steps:

1 Condense each individual update into a small piece of information, without sacrificing the
meaning of the event. For example, someone might have uploaded a photo from a recent
visit to the Sistine Chapel in the Vatican City and have tagged a number of people. While the
users who know this traveler might be interested to know all of this information, they only
need to know what type of activity has taken place, so they can investigate further if they
wish to do so.

2 The updates should be a snapshot of the activities from the user's friends and family, rather
than an exhaustive catalogue of all the events ever to have taken place. Therefore, starting
the updates from a certain time is the best idea, such as updates from the day or week the
user has signed in.

[Continued on next page]

INTERACTION-DESIGN.ORG

Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.
[Continued from previous page]

3 The updates should ideally contain inline links that navigate the user directly to the related
contents, saving that user from having to wade through the people’s accounts. Generally, you
should ensure the user can go to the event itself within the other user’s timeline and can
click through to the other person’s account. For example, the user’s profile image might
appear at the head of the update, which the user can click – diverting him or her straight to
that person’s account.

4 Ensure the update alert is eye-catching, without dominating the whole screen. In order to
draw the user’s attention to the alert, the background is usually ‘greyed-out’, but still visible,
which gives the appearance of a figure/ground distinction, so the updates seem more
prominent within the display.

5 While updates might be interesting to users, users must be able to close the update panel
quickly. Once the panel is closed, allow the user to resume his/her original activities
immediately.

INTERACTION-DESIGN.ORG

Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.
Do you want to learn more?
Learn how to use this template to your best advantage in our online course UI Design Patterns for
Successful Software. Sign up for it today and learn how you can create user interfaces that work
just right if you haven’t already started the course.

UI Design Patterns for Successful Software

Beginner course
User interface (UI) design patterns can be a designer’s best friend, allowing you to build excellent
user experiences with structure and speed. When used in the wrong way, however, they can quickly
lead to experiences that confuse your users... and no-one wants that! Our course UI Design
Patterns for Successful Software will equip you with the knowledge required to master UI design
patterns and secure them as one of the best attributes in your designer’s toolkit. You’ll be guided
through best practices relating to content organization, navigation, data entry, and social
integration—all with detailed templates that you can use in your daily work. You’ll also analyze and
critique popular websites to see how the best of the best utilize UI design patterns to achieve great
UX design. If you found this template useful, then this course is a treasure trove of resources and
guidance that will continue to enhance your knowledge of UI design.

Learn more about this course

INTERACTION-DESIGN.ORG

Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.
How to advance your career
with our online courses

Take online courses by Get a Course Certificate. Advance your career.

industry experts.
Your answers are graded by Use your new skills in your
Lessons are self-paced so
experts, not machines. Get existing job or to get a new
you'll never be late for class
an industry-recognized job in UX design. Get help
or miss a deadline.
Course Certificate to prove from our community.
your skills.

See all our courses

About the Interaction Design Foundation

With over 66,000 alumni, the Interaction Design Foundation is the biggest design school globally.
Industry leaders such as IBM and Adobe train their teams with our courses, and universities such
as MIT and the University of Cambridge include our courses in their curricula. Our online courses
are taught by industry experts and cover the entire spectrum of UX design from beginner to
advanced. We give you industry-recognized course certificates to advance your career. Since 2002,
we’ve put together the world’s biggest and most authoritative library of open-source UX Design
literature created by such noted authors as Don Norman and Clayton Christensen.

INTERACTION-DESIGN.ORG

Creative Commons BY-SA license: You are free to edit and redistribute this template, even for commercial use, as long as you give credit to the Interaction Design Foundation. Also, if you remix,
transform, or build upon this template, you must distribute it under the same CC BY-SA license.