With more than a billion and a half web sites to choose from and a combined total of nearly five million apps across mobile operating systems, creating experiences that captivate users, keep them on your site or app, and keep them coming back, can mean the difference between your property becoming the next Netflix or just another also-ran.
Business apps are the latest to jump into the rising user experience (UX) tide, and legacy players and innovative startups alike are all tooling their products around a better user experience.
In our latest webinar installment from our App-etizer series, “Embrace Modern Web Design,” we briefly discussed Salesforce’s reboot of its Communities product into Experience Cloud to better align its products across the enterprise and offer a more consistent UX.
We also demonstrated how you can use Skuid to incorporate some of the latest trends in modern app design and usability into your Salesforce Experience Cloud in just minutes and with little or no additional code.
In the next couple of sections, we’ll discuss five of these web design trends and how you can easily build them into your existing properties. But let’s first dive in with a short discussion about four things to keep top-of-mind when designing any digital property.
The four pillars of application design.
When it comes to building digital solutions, there are four things every application and solution needs to offer.
Utility: Whatever you’re building and for whomever you’re building it, it has to work. It needs to help end users accomplish their tasks to reach their goals. If a business app designed to consolidate multiple data records into a common interface that can be manipulated and edited takes too long to load, it’s not worth much to users.
Efficiency: A basic tenet of accessibility is the idea that an app must be easy to use. Efficiency means that end users can perform their tasks more quickly than the alternative solutions available.
Clarity: How quickly can end users see and understand how the application works? Users should be able to use it without training or a user manual. A well-designed digital solution should be tested by users with a wide range of experiences, backgrounds, and skill levels.
Delight: All three of the previous characteristics can be summed up by this one thing—did the user walk away with a positive overall feeling? Just looking at the app should inspire a user’s confidence in both the tool and the organization that crafted it for them. Delight is what brings users back to the application, and it’s probably the single most important factor in an app’s longevity.
Now, with our firm base of application design principles in mind, let’s take a look at five of the most popular modern app design and UX trends you can incorporate into your Salesforce business apps quickly and easily...
Five popular trends in modern application design
These recommendations come from our community of Salesforce Admins and developers, as well as the Skuid team. A few of these represent some new functionality and trends, and a couple of them are old favorites.
Dynamic colors
Dynamic colors is a combination of interaction-based color responses, with the eye-pleasing variety of shading, gradients, and shadowing, making elements in your apps fun to use and interesting to look at.
Here are a few of the ways you can use coloring dynamically in your apps:
In the Skuid Design System Studio, quickly create multiple variations of Skuid components such as text inputs and buttons without having to create entirely new elements for each desired state.
Here, you can create and configure borders, colors, shadow, fonts, without needing to write any CSS/HTML.
Adding dynamic colors to elements in your apps makes them more visually interesting, and provides mental cues that the application is working and recognizing the user’s interaction with the on-screen elements.
What was old is new again; but this time, working with gradients offers an almost unlimited choice of colors and a dazzling array of options designed to make your brand pop. Here, we’re using a third-party application, CSS Gradient, to create a new gradient color in Skuid using the linear-gradient definition that was generated from CSS Gradient.
Writing for UX
We’re not suggesting you add paragraphs of text to your apps. Rather, it’s making the copy in your apps as conversational, human, and as interesting, as possible.
Here is a great example from our webinar.
You can see we have the login screen of a restaurant delivery app we created with Skuid. Typically, microcopy (the descriptions of what buttons do) is generic, something like, “Customer Login.” But, to make it more interesting, you can create a library of microcopy to populate either randomly or based on certain conditions. Here, rather than something boring like, “Customer login” we see, “Get that grub,” which makes it feel like you’re doing something fun and exciting. Using microcopy, the next time the user comes to the login screen, rather than seeing, “Get that grub” they might see, “Feast time!” or some other interesting login alternative.
And the best part of this is that you can store this information at the UI level rather than saving it back at the field level in your database.
Microinteractions
Microinteractions are another enhancement to the user experience. Similar to dynamic colors, microinteractions are very subtle, but they provide visual clues that the actions you’re taking on the site or app are registering. In this webinar, all of the microinteractions we showed you were highlighting how you can use Skuid to extend the Design System Studio with CSS.
For example, here you can see a very simple animation where the object, in this case, the detail card for Pluto grows and then returns to normal size as you roll your cursor over it, offering a quick “pop” of interest.
In that same options dialog, you can do other interesting things like focus on an object when you hover over it by blurring everything else on the page or in that window. And, a personal favorite, the “Bouncy Checkbox.”
Bouncy Checkbox is a fun little animation where the checkbox bounces ever-so-slightly when you select or deselect it. Again, it’s very subtle, but your brain picks up on the fact that a response occurred and it offers a touch of additional personality over a static checkbox.
Neumorphism
The term neumorphism has gained a lot of traction in 2020. If it sounds familiar, it’s probably because you’re thinking of skeuomorphism, which is a cousin of polymorphism. But, where skeuomorphism centers around designs that try and mimic the real world with directional lighting and tactile considerations, the new skeuomorphism, or neumorphism, creates a unified look and feel that is both organic to the rest of the app’s design, while also playing with colors and shadows to create a pleasingly soft interactive experience.
Here is a beautiful example of how to create incredibly realistic neumorphic experiences for users in third-party applications like Neumorphism.io. You can easily create shadow variants in the Skuid Design System using the box-shadow definition being generated.
Dark mode (returns!)
Whether or not dark mode is better on the eyes and saves battery life on mobile devices is neither here nor there. The reality is that it’s incredibly popular right now and if you build it, they will switch to it—at least for a while.
The take-home message here is, in addition to its popularity, creating dark mode themes for your apps is now possible without code. With Skuid, there are a few ways to do this. You could create a whole "dark design system" or create dark variants of each component that could be applied conditionally.
You don’t have to settle for boring business app experiences.
If you don’t have the title “UX Designer” next to your name, trying to keep up with the latest app design trends and developments in user experience, and the latest in design tools, is probably an afterthought at best.
With Skuid, you can create beautiful user experiences across all your Salesforce clouds (Classic and Lightning), with little-to-no coding.
