Design Guidelines in ServiceNow

in

When developing in ServiceNow, I think there are some unspoken rules about the design that it would be best if everyone followed, so there is a more consistent user experience.

Disclaimer: I definitely am not a UI Designer, but I like to dabble!

#1 Sentence case Column labels

If you look hard enough, you’ll notice a majority of all the columns out of the box use sentence case instead of title case for the labels. What I mean is that it is always “Assignment group” and not “Assignment Group”. Besides being consistent, it’s been proven that Sentence casing is overall easier to read and comprehend at a glance.

#2 Keep UI Action Names Short

Besides it being an official bad practice, it’s just a terrible user experience to see a long button name taking up room in the header bar, elongating the context menu, or looking like a paragraph in the related links. It’s best to keep these “action” names as short and brief as possible. And if they are long, and there is no way to shorten it (Ex: Create Emergency Change), then just keep it as a context menu or related link. In general it’s best to keep UI action names under 20 characters, and 3 words or less.

#3 Form Etiquette

Record forms are where users spend a lot of their time in the system, it’s important to think through them a bit more critically. Some basic rules are:

  • The same field shouldn’t be on a form twice

  • There shouldn’t be more than 40 fields on a form, the more fields you add, the worse performance gets, and overcrowds the user.

  • Use form sections to organize similar variables, and for large string fields ensure they span the full length.

  • Use tooltips as much as you can, and also for more guidance use form annotations sparingly to guide users on how to fill out the record.

  • Minimize the number of options in a choice field.

#4 Native Font

ServiceNow uses the Lato font across the platform and portal interfaces. It’s best when developing any UI elements to stick to this same font type.

#5 Next Experience Theming

Since San Diego family release version, ServiceNow has shifted their design language to use a subtle purple (31304D) and space themed elements like astronauts. When developing custom UIs into the future, it would be wise to incorporate similar design illustration components.