Less is More: Visualforce Page Usability and Performance

Are your Visualforce pages slow to load and hard to use effectively? You might need to consider re-evaluating the design and use of your pages to focus on the information you really need. Design strategies that make it easier for people to focus on the information they need to perform a task can also lead to pages that perform better. This post details strategies you can use to make your Visualforce pages both easier to use and high performance.

Introduction

Imagine that you are designing the main working page for a call center application, and speed is of the essence. Reps need to understand the customer’s issue and offer a response within your target SLA of 10 seconds. To make this happen, your support reps might need:

  • The customer’s current complaint
  • A clock showing their wait time
  • Their purchased products
  • A dozen related lists showing recent cases, open tasks, warranty information and more
  • A dashboard showing case resolution time for the last six months

So you build a grand console that has everything including the kitchen sink, which takes…10 seconds to load. Worse, reps now need to scan the whole page to find the three pieces of data that answer the customer’s question. Total response time: 15-20 seconds at best.

It seems to make intuitive sense that people will be able to act faster if they have all the information they need “at a glance”. But this intuition is simply wrong. Research on perception, attention and memory demonstrate that a person can’t take in all the details of a 24 inch long page at one time without some form of grouping or structuring of the information. On a big, undifferentiated list of a page, the information that is critical for the service rep is very likely to be hiding in plain sight.

Performance without Compromise: Designing Lean

Happily, the design strategies that make it easier for people to focus on the information they need to perform a task can also lead to pages that perform better. When you group and present smaller sets of data, you can build smaller pages that load faster, or update only a portion of a page instead of reloading the entire page repeatedly.

These strategies include:

  • Analysis and user testing to identify the subset of information relevant to each focused task people need to perform, based on the role the user plays in customer service
  • Architecting pages that appropriately group or segregate data so that the user can focus on what is most important for the task they are performing at the moment
  • Use of tabs, or other navigation structures that allow people to quickly switch between tasks or related sets of information
  • Breaking structured flows up into concise logical steps
  • Limiting dynamic page elements to data that changes frequently

In a recent engagement, the customer employed a combination of these to increase the usability and improve the load time of their service console. They slimmed down the Case page by removing unnecessary or infrequently used related lists. Since customers’ installed equipment changed only rarely, they replaced a dynamic, query based view of product data with static info and a refresh button to update when needed. They also replaced a Visualforce component for displaying idle time with a standard formula field presenting the same information. Together, these improvements improved load times for the Case page by 30%.

Summary

Many discussions of improving Visualforce page performance center around minimizing view state, query tuning and the efficiency of transactional components such as callouts. These are all important efforts, but you can also score significant performance gains by returning to the basics of information design and usability. Making BOTH the page AND the user faster is a winning combination!

Related Resources

Page Design

Visualforce Cheat Sheet

Tabbed Accounts in 30 Seconds

Page Performance

Video: Building Efficient Visualforce Pages

Visualforce Performance: Best Practices

About the Author

Bud Vieira is an Architect Evangelist within the Technical Enablement team of the salesforce.com Customer-Centric Engineering group. The team’s mission is to help customers understand how to implement technically sound salesforce.com solutions. Check out all of the resources that this team maintains on the Architect Core Resources page of Developer Force.

Leave your comments...

Less is More: Visualforce Page Usability and Performance