New cPanel Interface: You’re my boy, Blue!

(Ping! Zine Web Tech Magazine) – One of the first things you will notice in the new cPanel interface is a concentrated effort to make the work flow as clear and discernible as possible. Keeping that in mind, each page of cPanel/WHM has one ‘primary’ action that is easily recognizable.

For example, the change password page has one action, but it might be overlooked. While the user is asked to enter the old password, and then the new password twice, the page’s ‘primary’ action is the “Change your password now!” button. Currently, though not completely hidden, the button doesn’t stand out as the primary action.  The Change Password page is clearly a simple page, however, the principle is the same: make the primary action as clear to the user as possible.

So how do we go about achieving this clarity? We addressed two issues with the current page:

  1.  The button is a ‘grey’ button on a grey background.
  2. The font size in the button is exactly the same size as the surrounding text.

cPanel current password UI

The user eventually finds this button, but only because it’s the last thing on the page. The user may not be confident in this choice, though. As human beings, we are always more capable of accomplishing tasks when we have confidence in ourselves. The surest way to get that confidence, is to know where we are going.

Take a look at this maze. Your first action is to find out where you’re supposed to start, and then find out where you’re supposed to end.

When we know where we are going, we significantly improve our confidence in getting to our destination. This by no means guarantees success, but it puts us a lot closer to achieving our goal.

So now that we’ve established we need a clear and distinct finish line that is easily recognizable, how do we do that? In a user interface, it’s simple: we make a nice, big button. In the Change Password page, we  also need to increase the font on our existing button. This will give it some visual weight and establish a visual hierarchy as well.

Let’s face it, button size and font size alone won’t cut it. The easiest way to make sure a user gains the confidence to find the finish, is to give that button some color. Simple enough, right? Well, maybe not so simple. cPanel/WHM have an established corporate color scheme (http://cpanel.net/company/media-kits/) consisting of orange, grey, green (teal) and blue. This is all well and good for cPanel corporate sites, however, we are building a control panel that is literally used by hundreds of thousands of people. Orange and teal are nice colors, but many of our partners have color schemes that  these colors don’t coordinate with.

Now, remember that 9% of men and .5% of women are colorblind in some form. Looking at the variations of colorblindness as compared to a standard rainbow, we notice that blue, and to a lesser extent violet, get the most traction across these spectrums.

color blind examples

With this information, we learn something about web design. It’s now clear why default links are blue with violet as the default visited state.

We need a button, that is clearly and easily found by any user, and we need to keep in mind that nearly 10% of those users are colorblind.  At cPanel we also  realize that we have numerous partners that want to customize cPanel to better match their individual brands, and we’ve already established that orange and teal are not exactly flexible colors. Taking all this into consideration, we have  narrowed down the button color options. We adjusted the button size, and the font size and color, as well as the color of the button to create this end result:

cPanel proposed new password page

The action on this page is now clear to all users. Keep in mind, this may or may not represent the ‘end’ product, but it meets our criteria.  Again, the ‘change password’ page is simple, and a button of this size may seem overkill, but this example truly shows our goal of making actions clear while maintaining consistency throughout all of cPanel’s pages.

Facebook  43 Twitter  8 Google+  1 LinkedIn  2
This entry was posted in Inside cPanelProduct Development and tagged . Bookmark the permalink.

James Thompson has been designing great UI/UX for over 20 years. He has designed interfaces to help ranch hands manage herds, and social networks for sports publishing websites like SportingNews.com and LowesRacing.com. James’ work earned a “Best Auction Site” along with a “Best of the Web” mention in Forbes Magazine, was noted in the Media Industry Newsletter for “Uses of Interactivity”, and was awarded “Best Community/Social Networking Site” in 2006 and 2007 for work done on SportingNews.com. He finds this career to be a great way to share his creativity and help users get a very rewarding experience.

Advertisement