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 Post

The unofficial guide to become a Certified Salesforce Administrator (ADM 201)

In my attempt at maximum certifications in 60 days, I completed Salesforce Certified Administrator exam on February 11th 2013 So you have decided to ramp up your career and take certifications in your hand. Good choice. It is also likely that this is the first time you have heard of Salesforce, certification and since your company has a vision of you completing the certification you have decided to do it. At this stage it is likely that, You have done extensive googling. You have received countless brain-dumps. And you have received plenty of advise from different types of users which ranges from Admin certification is easier than making coffee to Admin certification is tougher than building a rocket-ship to fly off to the moon. The purpose of this guide is to give you a clear understanding of what to expect when you are expected to become Certified Salesforce Administrator. To bring sense to all the things you have seen so far and to clearly explain what to do and what

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 p

The Basics of writing a Apex Trigger

One of the most important and common asked question on Forums and everywhere is how do I write a trigger. Coding in Apex Trigger is like going to a dentist for a root canal, you keep dreading the moment until you realize it is actually not going to hurt you. If you plan to write an Apex Trigger this quick guide will help you doing so. The first and foremost rule in writing a trigger is to remember the oldest suggestion given to the most comprehensive Hitchhikers Guide to Galaxy, ' Don't Panic. ' Writing a trigger is not a rocket science, in-fact we should thank the team at Salesforce and ForceDotCom for making everything so simple, that anyone can do it. Enough of talk, lets code. So you want to write a trigger. Let us have a glimpse of what we are going to build. The problem statement is as follows Problem:  When the User is entering the Opportunity, check for the Opportunity Amount. If the Opportunity Amount is greater than 50,000. Mark the Parent Account as