The New Salesforce UI Should Look Like This
UPDATE: See the follow up post here: Improve the New Salesforce UI with Greasemonkey
The new salesforce.com UI has been rolled out to all instances as of March 6th and the feedback is starting to roll in. Based on the feedback I have heard, direct and indirect, is that there appears to be four groups of people. A few people that love it, a few people that like it, a lot of people that are undecided, and a lot of people that don’t like it. This is probably not the distribution of feedback salesforce was hoping for.
So what do I think? I actually think it’s not too bad. Some people hate all of the bright blue, I actually don’t mind it. Yet the one thing that really bothers me about the new layout is the over use of light colors and the lack of defined spaces. All the different functional areas of a page layout seem to blur together making it difficult to find what you are looking for. One example of this is the detail section of a record. It is a giant white mass where the different sections are barely differentiated. The problem with this is that not all data is created equal. Easy to identify page block sections allow you to highlight and quickly find important information. This was lost with the new UI.
I’ll be the first to admit that I have some very rudimentary styling skills and I am no fancy pants web designer. So if I don’t have the artistic skills to build a super cool UI who am I to question a UI that was probably built by people who specialize in UI design? Me, I’m only a guy who has been using a computer since he was four years old. Using computers from this young age to the present has shaped my mind into one that can really understand how people interact with computers. It’s one thing to read and learn about this. It’s another thing to literally grow up with a computer in your face before you could even read.
What I have decided to do is tweak the new salesforce UI ever so slightly. It is not a major change as the new UI is pretty good. I simply think it could use a few refinements that would make it perfect and move that huge group of people who are undecided to the group of people that give the new UI a thumbs up. I believe the biggest problem with the new UI is that lack of defined spaces and this is what I have addressed with my changes. Without these defined spaces it is difficult for the eyes, and therefore the brain, to focus on and locate specific information.
Here is the new UI unchanged. LINK
Next is my new and improved version of the new UI. LINK
And finally there is an image calling out some of the minor changes that I think made a big difference. LINK
1) Brought back the page block style to the main detail section of a record. In all page blocks and related lists I also made the grey background a tiny bit darker which has helped the sections pop out from the background.
2) Added stronger page block section similar to the old layout but made the color much softer. Also have rounded corners.
3) Increased the border size of the related lists. This helps define the space better for each related list.
4) Got rid of that nasty blue table header. On a record with a lot of related lists it becomes quite distracting and noisy.
5) Increased the space between related lists. Again, to make each list have more a a defined space and be easier to locate with your eyes.
6) Increased the title size of the related lists. This helps each list pop and helps you find what you are looking for quickly.
As you can see these are very minor changes but I think the outcome is a very positive impact on the new UI. Are my changes perfect? Definitely not, as I’m sure it could still be fine tuned but I think the tweaks are a move in the right direction. What do you think?
Salesforce.com has always been pretty receptive to feedback. As they grow it has clearly become more difficult for them to respond to the thousands of customers they now support. With that said this is a major change affecting all users and I think (hope) it’s not to late to influence the design of the new UI. If you like the changes I have made please provide feedback, retweet this post, and spread the word.
Then again, I could be completely wrong about everything and maybe everybody loves the new UI. Let me know.
EDIT: Feedback on this has been positive so I created an idea on salesforce.com Ideas Exchange. You can view it by clicking here.
I like the mods. Seems like a merge between old and new. Although, I think that it looks a tad too much like the old one. Can’t put a finger on specifics though.
Jenna
@Rather_Geeky
@Jenna Baze
It’s the main detail pageblock that makes it feel like the old. Ideally I would have made the grey background on the main section slightly lighter than the related lists but they share the same style sheet so this made it a pain. I would also make the page block section seperators a little lighter.
Agree, my biggest beef is that the related lists all mash together. SF fix that and I’m all in. Minor beef – let us define color scheme, particularly between tabs like the olden days of yore.
I personally don’t mind the new UI, but I agree many areas have become more difficult to read.
1. The sections in the detail page are not as clearly delinated so quick scrolling to find something has become more difficult. I like they increased the section name font – but the lack of the clear definition makes the whole page blur together.
2. The tab coloration has almost compeltely gone away. Now there’s no way of looking at a page and quickly seeing what object your own. On the original layout the Tab color continued in the header block. Now that’s white on every page and the color is only defined on the “tab” and the small lines in the section
3. I like the new look of related lists – but would prefer to have a bit more space to clearly define them. On pages with lots of related lists you get a lot of empty white space. The original one at least carried the gray background of the sidebar all the way down. The page just seemed a bit more separated then blurred with white.
4. Maybe it’s just on my sandbox (haven’t turned the UI on for Production yet), but there’s no logo anymore in the header. The cloud is there but no lady bug! If it wasn’t for the “Discovery Spring ’10″ and knowing the new UI came up this release – I wouldn’t know what release I was on!
I like the addition of the grey in your mock-ups. I like the new UI and believe it’s an improvement over the old, but it just seems a bit too bright and shiny. I haven’t rolled it out to my users yet, so I will be curious to get their impression once I do.
Did you post this to the idea exchange? If not you should piggyback it on to Jenna’s idea.
@Mike Gerholdt
Idea link: http://sites.force.com/ideaexchange/ideaView?c=09a30000000D9xt&id=087300000007sy5AAA
I come from the Tufte school of information design that is hyper critical of every pixel, so I guess I’m in the group that loves the new UI. Very low drag and minimalist.
But you bring forward some excellent subjective design ideas. Really the only compromise here would be for Salesforce to expose the CSS and let designers do mods. But from my initial analysis, the CSS and new chatter app functionality look pretty tightly coupled.
A Greasemonkey script might be the other alternative.
Jason I love it. From a design point of view I see your point Mike, but functionally I disagree. Simple design and clean white space works great for sites like Facebook, but when you’re trying to digest data quickly, it helps to be able to track positioning with colored headers and such.
@Richard
Yup, as much as salesforce wants to get into the social space the main use of this app is that of a business application where ease of use and quickly finding what you are looking for is most important.
From a design perspective, I’d say the layout would qualify more as a table than a graph. The eye must be trained to scan for particular rows by header. Training the eye is rewarded with consistency across all pages/object types.
Colors in this type of layout provide no additional information to the design, as it would in a graph.
@Mike Leach
I can’t agree that colors provide no usefulness. Here is what the new ui would look like in black and white.
http://www.tehnrd.com/wp-content/uploads/2010/03/blackwhiteui.jpg
Oddly enough…. I think it is better than the new UI……but not better than the new UI with my changes
. There is just something not right with the new UI.
It struck me as interesting the recycle bin is colored Green, like users are doing a civic duty properly disposing of records
The only time I’m ever in the recycle bin is in a moment of panic to undo a deletion (!)
But I digress… sounds like you need the ability to create a custom style sheet (maybe that feature is still there?). I’d be happy to try out your design if it were posted to a gallery.
I thought during Dreamforce the related lists on the top of the page were moved to the right side of the page? Is this an option?
PS: I like the changes proposed above!
Ack that black and white reminds me of a tax form.
@eddy
Eddy, I talked to our premiere support person about that. It looks like those – as well as the Opportunity Layout change – are pushed back to Summer. But you know — safe harbor yada yada…
Brian, thanks for checking on that for me! I thought I was losing my mind!
I was awake all night trying to figure out what UI means, could it be University of Idaho, Units international, U & I, understanding internet. Then a light went on ….it means user interface! Actually a light didn’t go on, I had to google it. Jason, you sure communicate in a very strange language.
Jason, I completely agree with everything you’ve said on this post. Your comments on the UI are spot-on, particularly with regards to the tension to manage between functionality and design. Good work. I’ve voted on your idea in the exchange.
And, by the way, Jason’s mom? You’re awesome.
I totally agree with your UI modifications and spoke with various people from SalesForce at the recent CloudForce 2010 about offering various UI themes. Hopefully, they will listen to this growing group of people not happy with this new bland theme which makes it harder to tell which object you are working in.