top of page
  • Writer's pictureMichael Kolodner

🌈 Design For User Success: Add Interest through Color

Freebie the puppy sitting at a drafting table working on a drawing.

When you're designing Salesforce record pages, you're not just placing fields for a database. This is the main application your colleagues spend their day interacting with, the place where they do their job. [At least, I hope that's the case! If not, you might want to spend some time searching out those shadow systems where people are keeping that critical data you need for reporting!]


So if your colleagues are going to spend a good portion of their day in the system you're responsible for, perhaps you can give them some joy. Why be boring? Whoever designed your office (back when people had those) didn't just leave bare walls and a sea of cubicles. Usually.


I think the same goes for our Salesforce orgs. Classic page layouts were functional, even if they looked oh-so-2003.

A Salesforce account page in Classic.

But people expect more from computer systems in 2024. I bet you've had that moment when someone shares a screen or logs you into a system with a tiny font and icons straight out of Windows 95. It doesn't inspire confidence, does it?


I'm advocating for making our Salesforce orgs look as well designed as the consumer websites we all access every day. (At least to the best of our abilities and within the constraints of Salesforce itself.) We may not have carte blanche to design however we want. But we have a lot of free and easy options most people don't take advantage of.


I'm going to admit that this recommendation, comes with a bit of controversy, or at least a little need for nuance. Color may not work well for visually impaired users. Color choice is important. Web Content Accesibility Guidelines (WCAG) have opinions on color, particularly around contrast. I strongly encourage you to think about accesibility whenever you're designing. So please consider my recommendation to use color to implicitely mean "add color appropriately and with compassion."


But the point still stands: Adding color to your page brings visual interest that will aid in understanding and speed for your users. A big green banner on a page layout lets most users know even before they read a single word that a record is "good," or "finished," or "complete." Trailhead makes this point very clear, "Visual aids increase retention from 10 to 65%." Here's a tiny screenshot of a record. I bet you have some idea of its status!

A Financial Contribution record with a big green banner that has a checkmark on it.

There are a lot of ways to play with color in your org:


Lightning Messaging Utility

The banner in the screenshot above was created with Lightning Messaging Utility, a free app from Salesforce labs, which I've written about before.


In a Formula Field

There's a method from the stone ages for displaying an image saved in the Files library in a formula field. It works, I suppose.


But as I've said when presenting, this requires you to be your own graphic designer creating those images. I can admit that mine were pretty ugly.

A contact page in Classic with an image formula showing the organization's logo and "FULL MEMBER."

Plus those images aren't screen-reader compatible by default. But you know what are good looking images complete with alt-text that are available on just about every device? That's right, let's hear it for emoji 🥳!


Salesforce Indicators

There's a really cool project from the Open Source Commons called Salesforce Indicators. Indicators is a free and open surce, easy to declaratively manage, Lightning Web component meant for adding visual...indicators to your record pages. Try it out!

Screenshot of the icons from Salesforce Indicators placed on a contact record page.

Sometimes Color Comes Free

If you add a related list to your page layout, you automatically get the icon for that object. As a sysadmin you probably barely notice this anymore. But now that I'm pointing it out, consider how that pop of color draws the eye and [might] convey some information with the icon.

Page layout with three Single Related Lists on the right column. Each has a colored icon setting it off from the rest of the page.

Of course if you add a Related Record component with a Quick Action (my friend the Related Record Hack that I wrote about last post) you also get the object icon for that related record.


Themes and Branding

Don't forget that you can change up the whole look for your Salesforce by setting the background color and the logo. That kind of attention to detail will be particularly appreciated by your organization's brand managers. And it gives your Salesforce pages a pop that's different from standard Salesforce screeshots.

Screenshot of the org for Raisedby.Us, whose logo is bright red and background and main text set also to red.

The options here are nearly endless if you want to play around in ⚙️ Setup>User Interface>Themes and Branding.


Screen Flows

Last, but definitely not least, screen flows offer all kinds of ways to change up the look of a Salesforce page (or section). Whether with the standard components or some of the cool things put out by UnofficialSF, you can add color and visual interest to delight and entertain. Here I just used emoji to make a pretty basic screenflow more fun.

Screen flow for adding contacts and leads to an engagement point record has a row of emoji at the top of all different kinds of "people" emoji, including ballerina, student, fencer, graduate, and more.


222 views

Recent Posts

See All

Commentaires


bottom of page