top of page
  • Writer's pictureMichael Kolodner

Design for User Success: Screen Flows

Updated: Jul 11

Here's an idea most people don't consider: Screen flows can be page layout elements.

Freebie as an artist

I'm not talking about the design of the screens in the flow. (Though clearly you should design them.) I'm talking about using screen flows as part of the way you design a record page. Whether you're using just standard flow components or add-ons from UnofficialSF or other resources, you have possibilities for changing the look and feel of screen flows in ways that you might not have with any other Lightning App Builder components.


For example, want to display fields in three columns? Not really an option on a Lightning page. But you can have a flow with three columns very easily!

A screen flow screen showing three date fields next to each other. (Three columns in a single row.)

If you think about embedding a screen flow like that onto your page layout, it means that at least a portion of your page has all the design possibilities you can work with on a flow screen.


Functional Screen Flows

First, let's think "in-the-box." Screen flows were originally a way to take users through a guided script, with field updates, selections, and complex branching logic with automatic record updates. So they were originally conceived as standalone screens that users would work within. But in Lightning you can either have a screen flow take over the screen (like with a pop up) or embed it on the page. So consider where the flow will sit and how that impacts your overall design.


Load right away?

Consider that flows load slightly more slowly than most other page elements. So if you put your flow somewhere that's going to show immediately your users may see everything else load while the flow still has a progress spinner. (Not the end of the world, but something to keep in mind.)


Still, if this is a flow users are going to use often, then right on the page makes sense. Of course you should also consider when users should take in the content and how they will interact with it. (Remember how eyes move around the page.)

At the top of the right-hand section, a screen flow on the canvas that users can interact with.

Hidden behind a tab?

If this is a screen flow for users to do something they aren't doing regularly on this record page, that's a good time to put that flow behind a tab. As long as users can get to it with a click, it's going to still be easy for them. And the flow only loads when needed, which is good for performance.


In a large or small section?

It can be pain to test, but make sure you think about how your screen flow will appear based on the size of the section it appears in. If you're using the default page template with a small right-hand column, that's very different than the 50/50 split.


Launched from an action button?

If you don't want users to see the flow on the page itself, which can impact both the way the flow looks and the user experience, the out-of-the-box option is to launch the flow from a quick action added to the buttons at the top of the page.

A record page with action buttons that have emoji.

Launch Flow in Modal

One of my famorite [free] components is Launch Flow in Modal from Salesforce Labs. It does exactly what it sounds like: allows you to put a button on your page that will launch your screen flow in a modal window (a "pop up"). And you can put that button on pages (like the Home page) that don't normally have actions.

Two Launch Flow in Modal buttons shown on an app page.

Screen Flows Only For Placement

My final note is to remember that screen flows don't have to be for interaction at all. You could use one to just generate a block of content and then place that wherever you need. In this screenshot you can see an example:

A Lightning page with a block of text (not fields) in the right column.

That block of text on the right column is a screen flow that has collected data from multiple related records, performed some calculations, and merged the results into a text block. Even though this is a screen flow, there is no intent for users to interact with it—it only exists for them to get the story told by the data merged into an understandable format. Effectively, this screen flow has become another way to include text on my page, one that I can design differently than fields and field labels.


[Updated 7/11 with hat tip to reader Elizabeth Carena for pointing out the tip.]

Note: You can't remove all buttons from a screen flow by hiding them. The editor will require that there always be at least one unhidden. But if you don't need any buttons, what you can do is uncheck Show Footer. Since the buttons show in the footer, that effectively removes them.


Simple But Powerful

I don't think I'm suggesting anything revolutionary here, just reminding you that screen flows can be part of your design thinking. But once you have that in mind, there are some potentially powerful additions to your design toolbox!

190 views

Recent Posts

See All

Comments


Commenting has been turned off.
bottom of page