Custom Corner: Service Portal Announcements

“Custom Corner” is intended to be a series of posts that takes a closer look at different widgets and features of Service Portal from a designer’s point of view. In these posts, I work with fellow designers to understand what a feature does, what options are available, and lay out the complexities involved in designing alternative views and layouts for a given feature.

Just the other day I had the chance to sit down with my friend Paige Garland, a veteran designer that not too long ago joined our little corner of the universe as an Experience Designer with the good folks over at Servos. She, like most of us design-oriented folks that have found our way onto the platform, has had to learn the nuances involved in successful Service Portal design. As you can imagine, we have a lot to talk about. To kick off our conversation, we dove into Service Portal’s Announcements feature.

Feature Summary: Platform

First things first: check out the official ServiceNow documentation here.

Functionality

This feature is pretty cut and dry. Announcements allows you to set different messages for display in the Service Portal, through a list-like widget or as a banner notification at the top of the portal page.

Announcements are set in the platform. You can view a list of available announcements and create new ones by navigating to Service Portal > Announcements. From the announcements record form, you can set up your announcement message with a host of options, including where and when the announcements appear.

Form Features: Setting up an Announcement

The docs give a pretty thorough explanation of all the options available for announcements, but there are a few I want to point out that you want to particularly pay attention to when styling this feature for a custom portal, which I’ve mapped out on the image below.

Title: The primary short title of the announcement; this is the first, most prominent text the user will see.
Summary: This section allows you to supply additional information; a couple sentences of clarification for your announcement.
Display Style: This option allows you to set up some styling that is more in line with the branding you’re trying to adhere to. You can set up multiple display styles (or use the ones provided OOB) to set the background and text color for the particular announcement. Typically, you’ll see this used by having one color set for regular announcements, and a second color for high-priority / emergency announcements. These can easily be set to use an accent color in the brand that will both stand out and maintain the visual continuity. Pro tip: while deciding on background / foreground colors, use the WebAIM Link Contrast Checker to ensure the colors you’re setting are legible to your audience.
Glyph: Add an icon to your announcement. This is a limited subset of Bootstrap glyphicon icons. Of special note, there is no way to update the icons displayed in this field. If you want to use a different icon set or expand the available icons, you’ll want to create a new field to hold this information.
Type: The form comes with two types of announcements OOB: Widget, and Banner. Using this setting, you can choose where your announcement displays. For top-of-the-page banner announcements, choose banner. If you want them to display in the Announcements widget, choose widget. Or choose both. You can create additional announcement types if you want; this could be useful if you’re creating a wholesale new widget or place you want to display announcements.
Click target: Using this feature will allow you to place a text link at the bottom of your announcement. For Widget Announcements, this displays beneath the title and summary and appears OOB as regular underlined text in the same color as the title and summary; for Banner Announcements, this link is a right-aligned button. Note, that for banner announcements, the link does not pick up the link color or other styles you’ve set in your portal’s theme without customization. For widget announcements, links will show in the portal’s theme styles for links, so long as the widget is not set to use the announcement display styles.

Feature Summary: Portal

Now let’s take a look at how this information manifests in the portal.

Widget Announcements

At the risk of sounding redundant, the Announcements widget is a panel-based widget that you can place in your Service Portal to display the active announcements you’ve set up platform-side.

A few things I’d like to point out about the way your Announcements data is displayed in this widget:

In the image of the OOB Announcements widget shown here, notice that the glyphs do not appear, even if selected, for widgets with the Type set to “Widget”.
Notice that the summary information is hidden under an accordion dropdown by default. The user will have to open the accordion item by clicking the arrow (technically chevron) icon on the right to view the summary and link.
In the version of the widget shown above, notice that the display styles are not used, so links are picking up the link styling set in your portal theme.
As a point of visual consideration, remember that the length of this panel will always be dynamic. There is no way to perfectly line it up with other panels for length on the page, unless you’re paginating and limiting the number of records, even then, the length will change as users expand and collapse different announcements to view their content.

I’ll admit, this is one widget where I feel like ServiceNow was really thorough in the options they gave us. So let’s review some of the different instance options available that allow us to configure some of the look and feel of this list:

With display styles and pagination active

Pagination inactive, max records set to 3

Title: The title displayed in the panel heading. You can also add a glyph here.
Use display style: Checking this box will display each announcement with their selected display style foreground / background colors, rather than the thematic colors for the portal. I can see there being some different instances where this would add value, but for the most part, it can add unneeded visual complexity to a list that otherwise flows seamlessly with your portal’s styles.
Paginate / Max Records: This allows you to show a paginated list; paired with the “Max Records” option, you can somewhat control how long the announcements list can get. If you opt to not paginate announcements, the “Max Records” option will just truncate the list to the set number, with a link to a “view all” page listing all active announcements.
View All Page: By default, clicking the “view all” link, visible if there are more active announcements than your list is set to show, will take the user to a very plain page with a list widget showing all of the active announcements. You can change this, if you want to dress up the announcements page, or show the full list on a different page altogether (perhaps pairing this information with the system status pages?).

Banner Announcements

Banner announcement with title (1), summary (2), glyph (4), and link (6)

Banner announcements appear at the top of every page in the portal. There really aren’t any configuration options for banner announcements OOB other than what you get in the Announcement record in the platform, but here are a few things to keep in mind.

When announcements appear, they “push down” the entire page of content, appearing above the header.
Banner announcements always inherit and display the display style you choose for the announcement, overriding any other styles set in your portal theme.
Having multiple banners will stack; the results are less than ideal as seen here. Encourage whomever will be setting announcements to limit banner announcements to only one or two at a time.
OOB there is no way to move the announcements from their placement at the top. Moving these, even to just below the header to display in the same way as success / error / info message, requires customization.

Overall, unless you have the time and budget to commit to custom development, banner announcements are one of those “you get what you get and you don’t throw a fit” situations.

Design and Customization Considerations

Designing beyond OOB

As with most custom development, there are different levels of effort when it comes to customizing the Announcements functionality in the portal. Below I’ve listed a few of the customizations I typically see and the level of effort required for each of them. As you consider these options, remember: design and develop for the timeline and budget you have. Additional features = additional complexity = additional time to design, develop, test, and deploy.

Change base styling for OOB widget: This is a lower level of effort that can help bring the OOB widget in line with the styling of your portal. See an example here.

Maintain the use of the accordion expand / collapse in your design.
Maintain the overall panel structure, with a distinct heading, body, and footer. The header containing the title, body containing your list of announcements, and footer containing your pagination / view all controls.
Use only the information available to you from the Announcements record as-is. Do not include new fields / content for this level of effort. This means only using the icons available, and no images.
Make big impact with changes to typography (fonts chosen as a part of your overall theme), background / text colors, spacing, location, and use of display styles.

More in-depth styling for OOB widget: Building off the base changes, you can add to the complexity by making more drastic changes to the display and layout of your announcements:

Elect to remove the accordion expand / collapse for announcements, in favor of displaying announcements as cards, as an activity feed, or even a carousel.
Add new types of information to your announcements, such as images or alternative icons. Note: work with your development team to determine whether or not there is adequate time / budget for this. Adding new settings in this way can result in some heavier custom development.

Alternatives for banner announcements: Banner announcements are going to potentially require sizeable custom development to achieve. If you have the opportunity to go this route though, the most common design choice I see is in changing the location from above the header, to just below it, much like the system error / success messages. Taking this a step further, you can design some really unique message boxes for your announcements (which honestly, work for either the banner or widget announcements). I would consider this one of the most complex things you can attempt with the announcements, but with the proper time and attention, it can really make an impact.

Design for Dynamic Content

As with most things in Service Portal, the content of your announcements, however you choose to display them, is going to be ever-changing and largely out of your control. If you’re going to design a new look and feel for your announcements, make sure to take the following cases into consideration. You’ll want to know before you begin development what the design / content will do in each of these cases:

No announcements: what happens if there are no active announcements? Does the panel / widget still display? If so, what does it look like? What does that “no news is good news” message look like?
Lots of announcements: Think more than 4. Will you paginate the list of widgets? Or just truncate the list? How many announcements make the cut for a short list? Don’t forget to style those pagination elements!
One announcement: if there’s only one announcement, you want your design to allow it to stand on its own without looking incomplete.
Variable content length: What happens if the title of the announcement is really long? How does the text wrap? Or does it not and truncate to stay on one line? Same for the summary, how will the text behave for really short / really long / no summary?
Icons: How will icons display? What happens if some announcements have icons and some dont?
Links: As with icons, how will these display? Will they display differently if “use display styles” is enforced? How will you maintain a cohesive design if some announcements have links and others dont? (OOB this is taken care of by hiding the link / summary under an accordion).

Design sustainably for successful, long-term use

After you’ve designed, developed, and deployed your announcements functionality with the rest of the Service Portal, someone is going to be responsible for setting those announcements in production. Think about who that person is, and how they will use the announcements functionality. It’s a good idea to get a sense of this in your workshops, because this can play heavily into the design decisions you make. For example, if announcements are set by only a few people from the IT help desk, you probably don’t want to design an announcements widget that requires a matching custom image every single time. If you can supply them, perhaps a set of images for a few select categories of announcements instead? You don’t want to leave your client in a situation where they have to do extra work they aren’t prepared to take on. Overall, you want to ensure that the solution you create makes your user’s day easier by simplifying the way by which they pass along important messages to their organization.