Call them what you want, but a record page, a Lightning page, an app, or anything else you work in in Salesforce is going to be displayed to your users as a web page. (Unless they're on mobile.) So the first thing you should keep in mind when you design your Salesforce pages is that people interact with your pages the way they interact with any other website.
That means that [for speakers of left-to-right languages] eyes move across the page from top left to lower right, then bounce up to the middle of the window on the right, then work their way back across to the top left. More-or-less like this:
A quick note here: I'm ignoring the Salesforce header bar. Your users do too. They've scanned this in the past from left to right and taken in the logo, search bar, help and profile icons, and the names of the object tabs. In everyday use, I believe they essentially don't even see this part of the page anymore. So when a new record page loads, this is the direction of eye movement across the part of the application you actually want to design for.
Ignoring the Details Pane (for a sec)
The first thing your users are going to train themselves to do is to ignore the details pane on the pageâyou know, all those important data fields! Not that details aren't important, but unless looking for a particular field, users know they don't need to get into the weeds of the fields when the page first loads. That's part of how the eyes can skim down to the bottom of the window quickly to take in the overall architecture, the brain knows that the details section has lots of information, but the data in the fields can wait for a moment.
As designers, we are going to use that tendency to our advantage.
Bounded by the Edges
It seems worth nothing that we can also be confident our users' eyes are going to stay bounded by the window frame. Even the OS is designed to help us concentrate on the active window, not to mention the browser app design. And the user knows they need to stay within the focus window as well. So their eyes are not going to zip out of the frame before taking in what's there.
General Principles
I'll go through some of the most basic conventions I use in my page designs. Feel free to steal!
Details on the Left (loading first)
First of all, I'm a firm believer in loading to the details pane and keeping it on the left part of the page. (And, of course, thse pages are using the 50/50 template.). As noted above, this lets my users learn to scan the whole page design in a quick glance. If you load to a related list tab, first tof all they don't all load instantly. And second, I just don't think loading to related lists is usually what people need.
Since I also always load to the leftmost tab in a tab component for consistency, that means Details will be the first tab. I hate the Salesforce default of making Opportunities load to the Related tab.
Fields you want to draw attention to on the right, "above the fold"
Using the newspaper analogy, I consider the bottom of the screen to be like the fold of a newspaper. Just as readers are more likely to read the first few articles at the top of a newspaper section, anything you can see before scrolling is going to get more attention.
To that end, I love to use the Related Record Hack (not called that in the blog post) to put rollup summary fields or other important pieces of data in a prominent place toward the top of the right-hand column.
By putting such rollup summary fields or other information over there, it's in the place that we know eyes are going to linger for a moment and, therefore, be more likely to get the attention we want.
Banners Top Right (or Full Width)
Notice another thing in the image above: There's a Lightning Messaging Utility banner in the top of the right-hand column. Again, it's where the eyes might linger. And it looks different enough from the rest of the page to catch the eye.
Here's another example of a banner, this one across the whole page because it's meant to complement the Path component.
Important Related Lists Upper Right
You may have noticed in all these screenshots that I put the Related List Quick Links at the top of the right column. I think that's a super-functional component and a good place to make it easy to find the list you might want and work with it. I pretty much always put it in that position. (And check the box to hide the header! There's not much value to showing "Related List Quick Links." People know that's what they are.)
But then I also put the most imoprtant one or two (or at-most three) single related lists in the right column. Those are the ones I think users are going to need to interact with most frequently, so I can save them clicks and time.
Other Tabs
Last, but not least, the eye comes to the tabs in the left column. I mentioned that the first-loading tab will be details. But you can have a whole bunch of other tabs here as well. As I said at the beginning of this series, consider taking fields off the details page layout and putting them behind tabs so they're easy to find with just a click. Make thematic tabs that have fields and related lists for a single purpose.
We've got those eyeballs exactly where we want 'em. đ§
Once we've thought about where focus is going it can help us start organizing our pages to guide our users to find the right information and work effectively. And isn't that what we're all trying to do for our colleagues?
Comments