Great UX Trick: 250 hidden icons to use with bookmarks

ServiceNow contains a hidden treasure of almost 300 icons than can be used to convey better visual distinctiveness to your users’ bookmarks, service portals and system info messages. This distinctiveness can be used to ensure that your contextual messages receive more attention and to facilitate navigation in your instance.

Those icons are dingbats characters grouped in a special web font included in your instance, and can be applied in your html content via CSS classes, applied to the italic or emphasis tag. Example: <i class=”icon-name”>i>.  This web font was compiled by ServiceNow, using the open source Grunt-Webfont project. As of June 2017, the version included in Jakarta is called retina_icons_2017_1_17.woff and contains 295 distinct icons.

You can access a nice preview with all the characters included in the web font via a hidden URL that is available in any instances, even HIhttps://YOUR_INSTANCE.service-now.com/styles/retina_icons/retina_icons.html

Extra icons for Bookmarks

Just in case you’re not familiar with ServiceNow Bookmarks, I’ll start by briefly present the base functionality before moving into advanced territories, before showing some handy advanced tricks and use cases.

What is a Bookmark?

It’s a very useful feature. You can drag records, filters and a few other things from the main frame to the navigation pane on the left, and voilà, a Bookmark is created!

Any user can create additional bookmarks for himself, and manage them. It’s exactly like saving a favorite in your browser, but since they are stored server side they have the advantage of following you when you change switch computers or browsers.

Via the “Edit Favorite” link located at the bottom of the bookmarks list, users can manage their own user and choose between 48 icons and 12 colors.

By default, there is only one bookmark that is created for each user the first time they log into the instance: Home.

Manage your users’ bookmarks

You can navigate to  “System Definition > Bookmarks” to manage all existing bookmarks.

250 hidden icons to use with bookmarks!

For some silly reasons the default view still displays the Image field. Most usages of 16x16px images were deprecated from the Platform with the advent of high-resolution displays and OSes. Those images were last used in UI11. You should remove this field and replace it with the Icon field.

This field is a string that contains one icon class and an optional color class (Ex: “icon-home color-green”).

But as an admin you have access to all the other characters included in the Retina web font. In the list, you can copy the name of any icons and paste it in the Icon field of your bookmark, minus the first “icon-” part. Example: marker should be pasted instead of icon-marker.

Create other default bookmarks, that will apply to every user

The trick is to create a bookmark with an empty User and the “Auto add” field set to true. Only when those two conditions are met, will the system instantiate icons the first time a user log.

Please note that the system won’t automatically assign new bookmarks to users that have already logged once previous to your bookmark’s creation.

A few examples of custom bookmarks

Not supported in native Mobile Apps

Apparently ServiceNow did not include the same version of the font in their mobile apps. Any non-standard icon will show as blank in Mobile Apps.

Managing user interface on for native mobile apps

On native Android or iOS ServiceNow Apps, the bookmarks are the principal way to configure the App landing screen. When a user log in the App, the main start screen contain their own bookmarks displayed as tiles, a bit like Windows Tiles. This is really inconvenient UX as the main screen of your mobile needs to be configured from a Desktop browser.

If you intend to use those apps, managing bookmarks are essential to configure the main screen of your users’ Mobile Apps and allow them to have a better user experience.

Follow ups

I’ll plan to publish follow up articles about additional usages of those retina icons, like field decorations and HTML info messages.

Leave a Reply