Development UI/UX Design: Alerts & Notifications Mila Gizli Development 12 mins read Nov 3, 2022 Table of Contents Dissecting alerts & notifications So, what can be done better? Share This Article Facebook Twitter LinkedIn Email Government messaging should be made more accessible to civilians, building a stronger and safer community. Alert and notification development allows the public to access critical information. They help prevent hazard and harm, and guide them to make better decisions. Notification design has three main components: usability, functionality, and accessibility. Let’s unpack what the role of accessibility means for message delivery, the elements of alert design, and what works vs. what doesn’t. Dissecting alerts & notifications 1. The role of accessibility in getting important information Accessibility in UX design relies on both the internal and external logistics. The external structure refers to functionality, while the internal relies on its messaging and delivery, re: qualitative and quantitative testing. They mutually rely on circumstance and relevancy for proper execution. Simply put, it comes down to the basic formatting, content, and execution. The format requires built-in UX elements that carry your informative message. Strategize the kind of message you want to deliver, depending on the information at hand. The copy is the voice in which you carry your critical information to the public. Your design content should communicate information clearly and concisely. Thus, you should avoid excess information, wordy text, busy structure, or confusing layout. Process flow showcases the effective communication (microinteractions) relationship between user and UX designs © NNG Then there’s the how. Broadly speaking, there are two kinds of messages which need two different approaches to be accessible: Messages asking users to take action Just FYI messages” –Inclusive Components When you deliver your notification through a digital medium, consider how it’s received. Most are depicted as a push or pop-up notifications, with a flashy visual signal or sound. A loud alert immediately expresses just how important the message is. Another useful tip? Implement regular test runs before launch, in case the message fails to deliver. Refer to Nielsen’s Usability Testing 101 guide for everything you need to know on usability testing. 2. The elements of alert design Alert modal example © Medium Types of alerts & notifications Push or pop-up alert: What’s the delivery method of your message? News, climate, or emergency: What category does your message fall under? Government or business: Where is your message coming from? Functionality Alerts and notifications should be functional, but there’s more to it than just usability. They should be practical, useful, and make an impact. Every detail matters, from the layout to the way the message displays and its content within the modal design. Here are the key elements: Buttons: Designed for action guidance, allowing for users to make decisions that keep them both actively updated and aware. Icons: Small visual elements to indicate that the information depicted is urgent, an emergency alert, or clarifies context of the notification. Descriptions: Simple, informative, and dense, keeping your users well-informed on the subject matter without distractions or excess. Extras: High impact additions to your design give a sense of urgency, such as secondary buttons as consequences to primary buttons, text fields for feedback, or resource links for more information. A satirical take on an extra element to your alert design. In this case, it’s taken too far–but you get the gist. © StackExchange 3. Do’s and don’ts of alert designs ATTENTION! 🚨 You’ve just received an Amber Alert. After a few alerts startling us this past year, emergency alerts and notifications continue with extremes, ending in little to no payoff. The solution behind this is clear, there’s a serious need for UI/UX improvements. Users are people at the end of the day, living their regular lives. There are more consequences to receiving abrupt alerts and intrusive notifications than we realize. As a result, we should prioritize notification deliveries based on tracking, status, and phone activity. Not just for the sake of urgency. Based on the Merrill Covey Matrix, this table depicts the different outcomes with users and informative designs: urgent vs. non-urgent information, and active vs. passive actions © Rick Monro, Puppet For example, consider this (predictable) scenario: You’re waking up in the middle of the night to your phone’s blaring sirens of an alert. Naturally, your attention will go straight to the message. But it’s not necessarily productive, here’s why. You’ve just been startled awake, therefore, the information is harder to process. You notice the location is unrecognizable, looking it up to confirm it’s over 10 hours away from you. The male predator’s description isn’t detailed enough, and you don’t know what a Kia Sorrento looks like off the top of your head. You don’t have the time, resources, or energy, considering you were just asleep. Most likely, you won’t receive timely updates when you’re awake. Out of frustration, you might think to yourself: What am I supposed to do with this information? Rather than dwell on it, reposition yourself in a UX standpoint. The different types of UI modal dialogs and their ranking on level of intrusiveness © UX Planet So, what can be done better? Ranking of different attention-level notification alerts © Toptal A lack of freedom & autonomy Non-customizable settings & standards Miscommunication & inconsistent updates You receive alerts from relative locations and local vicinity, so there’s a bigger chance of contribution. There are visuals, graphics, and precise descriptors of predators, missing children, and other relevant information. You can change the alert’s standard settings to fit your lifestyle, while still receiving the information–such as toning down the volume, night mode, and preferred language. Often too wordy, alerts and urgent messages can be lost in translation. The copy cuts to the chase, leaving out the rest for the user to research on their own time. It’s easier to absorb that way. A general overview of proper alert design Simple formatting Diverse content Inclusive copy Visual-based Language settings Sound control Specific and functional CTA buttons Customizable notification banners Confirm previous actions to sequential ones Inclusivity Copy At the heart of every good UX design is empathy. If you’re not intentionally including an audience, you’re unintentionally excluding. Kat Holmes, writing in their book, “Mismatch: How Inclusion Shapes Design,” says that “inclusive design doesn’t mean you’re designing one thing for all people. You’re designing a diversity of ways to participate so that everyone has a sense of belonging.” We want people to feel as though they belong in every aspect of this exercise, be it the copy or the design. We want everyone to be able to understand the importance of the message they’re getting. Over at Boldist, they have a wonderfully extensive list of how to write copy with inclusive language. They point out that all copy should be written for inclusivity, regardless of its aim. Why? As they point out, in the US alone, the population is wildly diverse. For example: 26% of the US population has a disability. 20% of the US population suffers from mental illness. 5% of the US population is LGBT. And while the boldist article goes on to discuss in great detail how one might be inclusive in their communications, some of the best ones for these purposes are: Monitor your use of regional phrases and words. Be careful of cultural references that not everyone will understand due to age or geography. Embrace gender diversity and don’t assume that readers are female or male, heterosexual, cisgender and so on (e.g., use the term partner instead of girlfriend or boyfriend). Stick to gender-neutral pronouns like they. Improve readability by using shorter sentences, cutting unnecessary words and making paragraphs smaller. Improve comprehension with simpler words and writing at a lower reading level. An 8th-grade reading level or below is ideal. Avoid industry jargon the average person won’t understand. When communicating important information, it is important to ensure that the copy is accessible to everyone who might read it, regardless of their background or identity. Images In this article, Sam Sadasivan, Senior Service Designer at Service Design Canada talks about his experience illustrating for a diverse and inclusive COVID alert app. Sam’s team is always striving for approachable services for all, but he knows that there is more work yet to be done. With the idea that they can always be learning, they’re constantly improving the means by which they build trust and improve people’s interactions with government services. The goals they set out for themselves with building the COVID alert app were: Create clear mobile-friendly concepts. Reflect diverse populations within Canada. Curate approachable and credible visuals in the app to promote the use of more visual storytelling in government services. In the process of creating the visuals and reaching the goals they had set out for themselves, Sam discovered these three things that anyone designing for inclusivity in critical messaging can learn from. 1. Create collaboratively In the early days of creating the illustrations, Sam relied heavily on collaboration. As he began each design, he would show the team his concepts and ask for critique before even adding color. Speaking about that part of the process, he says: “While critique sometimes gets a bad rap, it was crucial to this design process, providing insight into how these illustrations could be seen and understood by those who would use the app. I never said no to reworking a rough draft of a concept because I relied on my team’s honest critique, which ultimately saved us a lot of time and iterations when the visuals later went through rounds of testing.” Collaboration and openness to critique are crucial to the process of creating inclusive designs. One could say that one must be inclusive in seeking out critique in order to create that inclusivity. 2. Show diversity beyond hair While hair is something that we could point to as something that helps to set people apart, it’s also something that can be a cause for judgment at the most inopportune times. As easy as it might have been to use hair as a means of demonstrating diversity, Sam pushed himself to “show diversity in other ways, through clothing, items, movement, and accessories.” The exercise forced him to look more closely at his own experience, which is something that everyone working on inclusive design can use as a starting point. The end result is a group of characters whose diversity is demonstrated in everyday life activities. 3. Use a minimal color palette Minimal color palettes help to reduce confusion. They give viewers’ eyes the opportunity to adapt to each screen. It also helps people with vision challenges to see more clearly. For this exercise, Sam used the minimal color palette, but also wanted to reflect the visual identity of all Canadians. In this case, he gave equal contrast and tone to all characters featured on a screen by not giving lighter skin characters in the app pigmentation. This allowed characters’ skin tones to “be seen and represented more equally, resulting in a more inclusive design.” Sam goes on to talk about how great an opportunity developing the illustrations for the COVID Alert app was, and how important user experience in visual design is. Perhaps the most poignant takeaway from his article is the following: Visual storytelling is more than an aesthetic—it’s a core feature that can impact whether people see themselves in a service. It’s particularly important that the design of an app sharing vital information be accessible to as many people as possible, and the illustrations in the app went a long way towards capturing Canada’s diversity of experiences. Share This Article Facebook Twitter LinkedIn Email
Accessibility is a Team Effort! Don’t Put it all on One Person’s Shoulders Elizabeth Holloway Strategy 6 mins read May 12, 2025
Brand Archetypes Are the Ultimate Storytelling Hack Elizabeth Holloway Branding 6 mins read May 5, 2025
Third Wednesday Webinar Presents: Marketing Research Reinvented Elizabeth Holloway Strategy 27 mins read Apr 28, 2025
Outsmart the Summer Slump: How to Reverse-Engineer Your Summer Campaigns Elizabeth Holloway Campaigning 5 mins read Apr 14, 2025