Skip to main content

Four secrets to improve the usability of your visualforce/Lightning pages on Salesforce

In the immortal words of a certain machine returning back in time, I am back. For now. After procrastinating for over a year and drafting a lot of rants- I am back with a very important coding lesson for you. For now.

When we are designing a Visualforce page or an app or a lightning component (added that only to trick google) or any web page for that matter, we often tend to wrap up things quickly. Ask anyone on the team, how to design a good User Experience? and the person will immediately throw buzz words like Bootstrap, angular and other useless libraries (did someone squint?)

Ok, Bootstrap, Angular-Js, and all the libraries are really cool and are useful in designing a fabulous UI. They are helpful in creating responsive pages that will work on all the devices but this post is not about those. Nope. For the purpose of this post, all the external libraries and buzzwords you use to decorate your resume are useless. (Adding Angular JS in your resume for a Salesforce consultant position when you don't know workflows is useless too, just saying). Another comment I receive fairly regularly is that- there are a lot many things you cannot do on salesforce. Which is true but still annoying. While there are a lot many things you cannot do, there are still a lot of things you can still do. One of those things is stop being annoying. Moving on.

Salesforce is a customer-centric system, as such, a user is at the center of whatever you do. Whenever you design an interface on Salesforce you have to remember that- someone will be paid to use the thing for 8 hours a day. If you design bad user experience, their job will be harder and reduce productivity and usability. And one important trick to remember designing a form is- DO NOT LET USER SCROLL. Make sure your form elements are reachable by tabbing.

So with that out of the way, let us take a look at the four secrets you should know before designing a visualforce page

1. Separate your data from the background
This is a tip that was given to me by the director of a college play. You clearly mark the area on the stage where you want the audience to focus their attention.
By default, any web system uses white background and text in black. This form is consistent unless you are on the Dark side or environment-friendly when you will use black background over white text. But don't be google when it comes to displaying complex data on the page. All you need to do is clearly separate the data from the background, you can do that by adding a thin gray background to your text or, as Salesforce does it, place the data between neat equidistant lines. If you are not using sidebar and headers, do include SectionHeader on the page. Make sure you set your data in a way, it is clearly distinguishable from the background.

2. Give visual feedback whenever you are processing information
This is visualforce building 101, if you are using a tag from the family of Command and Action (e.g., apex:commandButton, apex:commandLink, apex:actionfunction, apex:actionsupport etc) you HAVE TO use the apex:actionStatus. Don't leave your user guessing if the button press worked or no. There has to be a visual feedback.
You could be extra quirky to indicate what is happening or give an error message. Shiva has a good code for the same, you can use his action status in your code.

3. Take an extra hour to fix the error messages. Keep them consistent. 
Salesforce provides different ways to display error messages. Some are field level error messages, others are page level error. When developing a custom page, spend an extra effort to make sure your error messages are consistent. If you have a server-side validation, make sure it is displayed alongside the field instead of the top of the page. Don't make the user scroll the whole page looking for the next error message. Remember, someone will be spending 8 hours looking at the page you are developing. The early they understand where the error messages are displayed, the quicker they will adopt.

4. Place the buttons on the bottom as well as the top of the page.
This is a common problem in the majority of the visualforce pages. People will provide multiple sections of a form and them make sure scroll all the way up to press submit. Bad idea. Also if the user wants to just fill the required fields and then submit- which is also ok, don't make them scroll all the way down to look for the submit. Be smart, place your button on top as well as the bottom. Besides, give the user a choice and they feel included in the design.

So in summary, design user-centric system that they can adopt faster and learn quicker. Most of the Salesforce implementation fail because users do not adopt the system as they should. Make their job easier, not harder. A twenty-year experience sales person should not be bothered to learn a new system just because his job wants him to, instead, design the experience so much friendly that the said person should pick it up on the job quickly.

Hope that helps in any future design you create. If you have any other tips, share in the comments below.
Ok. Bye. For now.

And in the mortal words of a immortal machine traveling back in time, I will be back.


  1. Your posts is really helpful for me.Thanks for your wonderful post.It is really very helpful for us and I have gathered some important information from this blog. so keep sharing..

    Salesforce training in chennai

  2. good point, well explained but if we take a extra time to fix the errors means howling time needs for bug fixes.

    Salesforce Training in Chennai


Post a Comment

Popular posts from this blog

The curious case of the custom redirection on Salesforce Console

Every developer worth their salt knows that the easiest way of redirection from a page to another is by using everyone's favorite function

public PageReference redirect() { PageReference pageRef = page.peskyProblemRedirection; pageRef.setRedirect(true); return pageRef; }
And the method is called by adding it to the Action attribute of the CommandButton or link, which works like charm and the user is redirected to the page after completion of the action.
So why am I going back to the basics? Because this way of redirection causes a pesky little problem in using the Service Cloud or Sales Cloud console.

Let's illustrate the problem, let's say you have a visualforce page as follows:

<apex:page sidebar="false" showHeader="false" controller="myExampleController"> <apex:form > <apex:pageBlock > <apex:pageBlockButtons > <apex:commandButton action="{!Redirect}&qu…

Some PDF tricks on Visualforce: Landscape, A4, page number and more

The beauty of Visualforce is simplicity. Remember the shock you received when you were told the entire page renders as PDF if you just add renderAs=PDF to the Page tag.

For those who thought I spoke alien language right now, here is the trick, to render a page as PDF, we add a simple attribute to the <apex: page> tag

<apex: page renderAs='pdf'> This will render the entire page as PDF.

Now, say we need to add some extra features to the PDF. Like a page number in the footer or we need to render the page in landscape mode. Faced with this problem, I put on my Indiana Jones hat and went hunting for it in the vast hay-sack of the internet (read: googled extensively). Imagine my happiness when i found a big big page with many big big examples to solve the problem. The document I am referring to is from W3C, paged Box media.

Long story short, I now possess the ultimate secret of rendering the page in any format I want. So here are few tricks I learned from the page. To p…

Cache me if you can: What you should know before daring to set URL parameter on visualforce

If someone gave me a pence for every time there was an SOQL query in an APEX Class without using Limit or a condition during a code review, I could afford a Lamborgini this month. Sigh. If only. We make it a habit of going digging for data, at the very moment we need it. The crux of this problem happens when you have chain classes which are independent of each other. Each class needs the reference from a single record and we have to query for that record every single time.

While we don't see it, every SOQL query has a cost to it, and it does not go in my Lamborghini fund, however, it should. In a recent project, we had to construct an Account 360 page that could fetch information from different integration points. The page was also called using a live telephony integration, which could pass the phone number for the account. This required an ability to keep in context the Account that was on call.

Passing the Account id in URL parameter was a valid option, however, any manipulatio…