Lightning Record Page Design — A Whole New Kind Of Ice Cream

Simon Whight
4 min readFeb 25, 2020

One of the seemingly scary scenarios around moving from Salesforce Classic to Lightning is embracing the world of Lightning Record Page design. Up until this point, page layouts have been a pretty prescribed experience — you get the rigid Neapolitan ice cream structure of Feed, Detail, Related Lists with very little wiggle room.

Reliable — Neapolitan is a classic.

Now, as an administrator, you have another hat to wear on your already over-burdened head — the UX designer. The conundrum is now how to design your page layout when you have a rainbow unicorn gelato’s worth of toys and freedom at your fingertips.

Vibrant — Lightning UX can be a bit overwhelming

Freedom is wonderful, but we all just want a simple place to start — the answer to the question “what is the single correct way to design a Lightning page?” Good news, I’m here with the answer, “there is no single correct way to design a Lightning page!”

Before you close tab in despair, there are some principles you can use while designing your pages that will come in handy as you look to create a solution for a scenario.

Let’s go through them.

Start with a master layout

This is going to be your org default.

You want a nice generic layout that gives a broad spectrum of information for your record. With so many visibility permutations at play, it is always worth having a safety net layout for anything that falls through the gaps.

Lightning will give you a layout out of the box, but it is better to get in and rework it into something a little more bespoke. Something to give your users that “we’ve moved to Lightning!” fanfare.

As you find use cases for diverging from this layout, you chop away using App default or App/Profile/Record Type default.

Balance is key

While this is a rather intangible metric and will come down to experience with Lightning over time, it is better to approach with this in mind than engineer it in down the line.

With Lightning, you have the capability to completely shape to many user requirements. As you create page variants, the administration headroom of maintenance increases exponentially. It is worth keeping a critical mind when being faced with layout requests.

You may wish for a specific Record Type for a Case to be dramatically different — this is a good case. A Sales team wanting a page variation which moves around the order of some components slightly — this is not a good case.

Form factor is important

You’ve spent a good couple of weeks refining and polishing your Console View three region layout with header.

After rolling out, a field agent strolls by with their high resolution — but tiny screen — Surface Pro to illustrate that they can barely see anything on the layout with 70% of the screen being dominated by a huge header with Highlights Panel and Path in it.

While you may be sat with a delicious three monitor layout at your desk, your audience might not. Do make sure what you see is what they will see.

Don’t forget mobile variants

You can now design your pages with mobile in mind. Again, this falls under considering form factor. You may want to shy away from large amounts of detail or anything which introduces lengthy scrolling and keep things at a headline level.

Anyone using mobile is more than likely doing one of two things when they fire up the app — “I would like to take an action quickly” or “I want a piece of information quickly.”

Answering these will drive your design, with all other information being superfluous.

You don’t need to have everything all of the time

There are a hell of a lot of wonderful components in Lightning Page design.

The temptation is to make one huge dominating page layout that puts every single Salesforce feature out there in the faces of your users.

While there is a certain orderly satisfaction in creating 15 tabs of features and columns of related records, this might not be useful to a user who hits upon a record with a sole purpose. A simple column of detail and a couple of actions may be all they ever want.

Again, this comes down to balance. You want Lightning feature adoption, but don’t force it where it doesn’t fit.

Component Visibility cuts down permutations

With some clever use of Component Visibility, you can cut down on both screen real estate and the amount of pages you end up designing. Component Visibility is really deft as it can let you control what appears, when, and for who.

Essentially, where mooted Summer ‘20 update Dynamic Forms will deal with this on a record by record basis, Component Visibility does this right now with entire components.

Consume all the media

With Lightning Page design being so varied, the more media you consume, the more fuel you will have for inspiration. Webinars, Dreamforce case studies, blog posts — these are all windows into the minds of those who have a different way of thinking. You might see some ingenious use for Lightning components that you would never have considered.

Don’t be a slave to Classic

You’ve left the world of Neapolitan behind, it is entirely possible to design incredibly effective objects without even touching the full Related list, Record Detail, or even Chatter components. This is a real chance to spin your objects on their heads, get creative.

Hopefully, this piece gives some architectural food for thought, and not just a desire for ice cream. I’ll be taking us through some Lightning Page design decisions in greater detail in future articles, so keep an ear to the ground for that.

--

--

Simon Whight

Salesforce button pushing person @ the UK’s #1 rated ISP Zen Internet. GetFeedback MVP & Lightning Champion. www.paypal.me/fourfourfun