TehNrd

In my last post (you can read it here) I was ranting like an angry hippopotamus about the new salesforce.com UI released with Spring 10 and what I think it should look like. This follow up post will show you how to make the changes I proposed in that post a reality.

Before we work the magic and make the new UI even better I want to expand on some of my thoughts regarding the new UI. Some may say it is “change” and change is hard, you just need to get used to it. Not true. Change should never be hard. Change should be something better. It should be a measurable improvement over the previous version. A perfect example of this was the recent redesign of cnn.com. This was a massive improvement and nearly everyone everyone applauded the changes. Change was easy because it made our user experience better. I don’t hate the new salesforce UI. I don’t even not like it. There is just something about it that doesn’t feel right. I can’t place my finger on it but I think the changes I’ve made below will make a huge improvement. Blah blah blah, enough pointless blabbering, let’s get to the good stuff.

Since the original post I have had some time to get comfortable with the new UI and several of the changes I initially proposed probably aren’t needed.  My first stab at changing the UI was also a bit bold, too bold. I took my changes of the UI to the extreme to really emphasize the direction I think the new UI needs to move. In reality the changes needed are much softer. What it came down to in the end was eliminating the massive amount of white space in the record detail section and bringing back the old style page block section separators. So how do we do this? Greasemonkey to the rescue!!!!

The first ingredient of awesomesauce is to install the Greasemonkey plugin for the Firefox browser. You can download that here. Greasemonkey allows you customize websites with fancy pants JavaScript.

If you aren’t using Firefox, use Firefox. If you still aren’t using Firefox there are ways to run Greasemonkey scripts in your browser but Google will be your best friend on getting this to work.

The second ingredient for awesomesauce will be to install this custom Greasemonkey script I have created called “Custom Salesforce UI”. To install, simply go to this page and click then “Install” button.

Make sure Greasmonkey is enabled and the next time you go salesforce with the new UI enabled it will have gone from this old UI:

To this new and improved UI:

AWESOMESAUCE COMPLETE!!!!!!!!!!!!!!!!!!!!!!!!!!

The changes are very minor but the UI now feels a lot more comfortable, more functional, and is easier on the eyes. While I listed out many changes in my first post I only incorporated two of these changes. The first was making the detail section of a record more like the old layout. The second was creating a little more separation between the related lists. These changes make it feel just right.

If you like the direction I have taken the new layout be sure to vote for this idea: New Salesforce UI Should Look Like This