6 Practical Salesforce Design Tips
Many of you who read our blogs are either Salesforce administrators or developers so this blog post is aimed at providing some tips that we have encountered when designing Visualforce pages. We won’t go into the actual code in this particular post, so if you aren’t a developer you can still follow along.
1. Keep Things Really Simple
Users want control and flexibility within the application space or platform that they are using. However, the more options that are available to the user the longer the learning curve will be. Increasing the number of options or functions that a user has on a page will (should) directly increase the amount of control the user has over the platform and the processes that take place. When you provide that increased functionality within a single page you are also directly affecting the complexity of the page. The example below shows how too many buttons can complicate a Salesforce environment very quickly.
One of the big things to strive for is high user adoption on the Salesforce platform. A great way to prevent people from using the platform is to create unnecessarily complex pages or confusing pages. When people get confused they tend to not do anything. Keep the page simple so that it is clear as to what is happening or what needs to happen to move onto the next phase of the process. A great example of a way to easily simplify the page shown above is to only have the buttons that are appropriate at that point in time shown. For example, if the user has not created a Quote for this opportunity there is absolutely no need for the View Quote PDF button to be shown yet. Or the button called “Button You Don’t Care About 1″ might be something that a different user profile leverages, so hide it from the current user profile. Simplify the page to reduce confusion and increase user satisfaction.
2. Clear And Visible Status Changes
Users want to know that when they push a button that the expected task was performed. You can use pop-ups, modal windows, or AJAX to do this. In the world of Salesforce, when a Save button is pressed the entire page is refreshed/reloaded to reflect the Save action being completed. This can be very taxing in comparison to using AJAX to simply update the fields or tables that contain changed data. Salesforce is moving toward this model of modular updating via their new Lightning framework, but until those changes become more widely used on the platform you will continue to have to use one of the methods listed above.
Pop-up Windows can easily be used to quickly notify the user of something that doesn’t require much interaction. An example of this might be when the user is editing a record and they click the cancel button you can provide a pop-up stating “You are about to leave this record. All the changes you have made will be lost. Do you wish to continue?”.
Modal Windows can be used when you have a mini-form that needs to be filled in or a small amount of user interaction needs to take place. One thing to consider when using modal windows is that the window will be styled similarly to the page it is on top of and therefore might be difficult to distinguish. Placing a drop shadow or darkening the background behind the modal window can help make that modal window stand out as something to page attention to. Below is an example of how you might have experienced modal windows on other websites:
If you would like to leverage modal windows you can look over this great resource from WebDesignerDepot.
AJAX is the most developer heavy method of implementing things from the options I proposed but it is one of the best options from a user experience perspective. Having the ability to submit just a portion of a page for rapid results can be extremely helpful when your objects get to be hundreds of fields in length. You can learn more about leveraging AJAX from this Salesforce tutorial.
3. Leverage Tab Navigation
Applications today highly utilize tab navigation since it is an intuitive method of organization and navigation. I’ll use two technologies to illustrate this point; Microsoft Products (Word, PowerPoint, Outlook, etc.) and Internet Browsers. I chose these two technologies because most people leverage these on a request basis despite operating system preferences. The use of tabs within products like Microsoft Word help organize your settings and features in a way that is easy to find and navigate to. In an internet browser (insert your favorite one here), they have tabbed browsing to help distinguish what you are viewing in each tab. When you look at the tabs across the top you can quickly switch between websites and your web applications simply by referencing the titles on the tabs.
This has become such a natural part of our digital lives that it should also be carried over to our Salesforce environments. Adding in features like tabs will not require training on how to utilize the tabs themselves, however, depending on your page layout design within Salesforce you may have to instruct users on where to find fields for future reference. The main point that I’m making with this is that utilizing tabs, within Salesforce, can help you categorize groupings of fields in a more significant way than simply utilizing the Page Block Sections in a normal layout.
4. Use Font Changes to Denote Importance
People are accustomed to font color changes to denote a change in behavior or importance. What do you instantly think of when you see text that is blue with an underline? You probably thought of a link to another web page or section of information. Notice, in the image above, how we use color to denote various things. For example the header is larger font, bold, and a blue text. This allows users to quickly identify new groupings of information by simply looking for this style of the text. Additionally the active and inactive tabs are represented by different colors. This allows the user to easily identify what tab they are viewing based on the tab that is colored blue. In short, use color change to your advantage to provide users with a visual reference as to what is taking place on the page.
Another easy way to utilize this is to change the font style. Typically this can only be done via Visualforce pages within Salesforce, so if you are not yet to that stage of customization then just be aware that you might not have any situations that you can leverage this advice. People are used to seeing style changes to denote important as well as color. When you see text that is bold or italicized your eye catches hold of that change and registers that as an important. Below is an example of how this can be used:
5. Emphasize Key Functionality
Ensure the correct emphasis is placed on functionality. You have probably experienced an application where you have the option to click a large button that says create or to click the small word text next to it that says cancel. This is to help place the proper emphasis on the action that should be taken on that page. In the world of Salesforce you experience this as well. Below is an example of how Salesforce uses this thought process to help users decide what to do on a page. Notice how the typical actions that a user would take are given buttons that immediately stick out to the user. The less frequently used functionality is still there, but it is simply presented as linkable text (Edit, Delete, Create New View). Again, the thought process behind this is that you shouldn’t take up space with things that the user will leverage a few times, if ever.
6. Offer Quick Create Options
Many users try to minimize the amount of data they have to input into a record to get it saved due to the sheer amount of work they have to sift through. Fortunately, this is why the concept of required fields exist. Help users quickly create the records they need without having to transition screens. Think of this as a quick create for a task or contact. Ultimately this would allow the user the provide the bare essentials without having to leave their primary record allowing them to quickly capture the data that is needed without losing focus. This is a functional change that is needed to your Salesforce layouts so if you are not leveraging Visualforce then you won’t be able to do this one either. In the example I’m going to provide below you will see a page where a user can create an Account record as well as add in all of their Contact records at the exact same time without having to transition screens. This streamlining of data entry allows our Salesforce users to focus on the task at hand, which is getting this new account into Salesforce, instead of being bogged down by the process of data entry across multiple pages.
I hope some of these practical design tips have been helpful. This is by no means an exhaustive list and there are certainly topics that I have left out that deserve their own coverage. If you have any tips that you’ve learned through your own trial and error within Salesforce feel free to email us at firstname.lastname@example.org we would love to hear about it!