As a User Experience (UX) Designer, a question I am frequently asked is “Are there any standard changes my team makes to out-of-the-box Salesforce functionality?” I think a reason this comes up so often is because many teams don’t have a dedicated UX resource. If you’re eager for some quick UX wins, then this blog is for you!
Customization helps tell the user story more clearly. Salesforce Lightning offers consistency and feature-rich components with little overhead, but knowing when and how to customize is the secret to get that ‘WOW’ factor.
Standard Salesforce UX customization? That sounds like an oxymoron…
Here are best practices for customizing the Salesforce Lightning user interface (UI) to prioritize user experiences. Fair warning though: as I mentioned in a previous blog post, there is no one-size fits all solution for UX Design.
Do: Use customization to highlight your message.
Analyze user stories and determine which products or features are good candidates for extra polish. This will give your message a clear focus and keep the team aligned on design priorities.
Don’t: Use customization as a substitute for solid functionality
Remember, there is no replacement for the fundamentals. The foundation must be in place before building the house. If user feedback indicates that a feature is confusing, then it’s better to simplify design rather than adding more bells and whistles.
Salesforce UX Use Case 1: Branding within Lightning Web Components
The most obvious way to communicate a clear message is with consistent company branding. One of the benefits of the Salesforce Lightning Design System is that components have a consistent look and feel. But how do you let your specific story within Salesforce shine through?
Let’s look at a specific example with one the most fundamental building blocks of any user interface — buttons.
With Salesforce Lightning Web Components (LWC), a developer can add a modern-looking button by simply invoking the lightning-button element. Take a quick look at the difference between a lightning button and a standard HTML button in Chrome.
Neat, right? But what if you want your button to use your brand’s primary color? Or what if you have an edgier design, and want to ditch the rounded corners? (Pun intended).
Let’s take it one step further. What if you wanted to create one singular CSS class for buttons so when branding changes, all buttons will update simultaneously?
You could create a CSS module to import, and this would be the result.
What happened? Only the browser button got the branding. That’s because the lightning-button’s elements exist in the Shadow DOM, which means they can’t be accessed in the LWC’s StyleSheet.
Solution: Static Resources
Importing a CSS as a static resource allows for more customization because it gets loaded higher in the DOM hierarchy where it cascades to individual LWCs on the Lightning Page. Now, any LWC can override the standard lightning-button by importing the CSS static resource.
Final result:
Salesforce UX Use Case 2: Preloading and Error Handling
So what about when we’re not clicking widgets or dragging sliders? Downtime can be just as essential a part of UX as the visuals.
According to a study by gomez, satisfaction of web users drops after as little as 2 seconds. First impressions are critical, so we want to reach the user from the moment they load the page.
We also want to carefully consider the messaging when the component is empty. “Did it break or is it still loading?” This should never be a question in the user’s mind.
One advantage of Lightning Experience is the Web Component architecture. Components are modularized so they can function asynchronously. Each component loads when it’s ready and doesn’t hold up the entire show.
Illustrations are a great way to show the user that everything is still going as expected. Here are some benefits:
Informational text can be more playful
Chance to leverage assets for customization
Graphic fills the negative space giving a polished look
Common scenario: A data table that loads from a click in another component
The Salesforce Lightning Design System provides several illustrations ready to be consumed. It even includes guidance when creating your own so you can get even more customization.
Salesforce UX Use Case 3: Stencils vs. Spinners
Just like lightning-buttons, lightning-spinners are great consumable components to use while waiting for asynchronous data fetching. However, other than a color and size change, they are not very customizable. This is where stencils are useful!
Salesforce recommends using a stencil instead of a spinner after a 300 millisecond wait. Like illustrations, stencils are a great way to control the aesthetics of downtime.
Initially, it’s not possible to have a stencil for every single component. This is where having a clear user story will help the team align on what features should be highlighted. After developing a few, design teams will have a robust library and customization will be faster down the line. After identifying which components are candidates for stencils, implementation is a two-step process.
Step 1: Create the stencil
Salesforce recommends using stencils that are responsive, i.e. they stretch to fill the container they are in. This means they can be created programmatically or created in a vector drawing program like Adobe Illustrator and exported as code in .svg format. It is not recommended to use a static resource as a stencil because of the increased load time.
Step 2: Create logic to conditionally display the stencil
Use the if:true|false={property} template directive in the component’s markup to display the stencil while the component is still loading. This directive refers to logic in the component’s Javascript controller and conditionally renders the stencil while preloading.
Want an even better experience? Try using both! For example, use an inline-spinner with information text superimposed over a stencil.
Putting it all together
Adding some pizzazz above and beyond the standard out-of-the-box functionality can help tell the user story with more clarity. Analyze which features best contribute and communicate these areas of customization to the entire team.
We looked at a couple examples of how to go above and beyond with Salesforce UX design. Static resources can be used to apply branding globally and efficiently. Illustrations won’t leave the user hanging and allow for reusability. Lastly, stencils are a great alternative to spinners and can be added iteratively during each project.
Contact CRM Science Salesforce Consultants
How do you customize Salesforce to prioritize user experiences? Our dedicated UX resources know all the best customizations to improve user adoption by building better user experiences. Whether you’re new to UX or want to take your Salesforce UX customizations deeper, we’d love to hear from you.
Philip Bolognini
User Experience (UX) Developer
CRM Science
