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
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.