cPanel® Blog

You’re my boy, Blue!

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.

maze

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.

cPanel

The web hosting industry’s most reliable, intuitive control panel since 1997. With our first-class support and rich feature set, it’s easy to see why our customers and partners make cPanel & WHM their hosting platform of choice. For more information, visit cPanel.com.

  • Scott Summers

    cPanel seems to be ahead of the field if they really understand all these things. As someone with visual impairments, I never return to sites if I can’t easily access and traverse them. These are features and more importantly understanding I’d like to see from a company I do business with.

    • @mariorodriguez 

      Thanks Scott we try our best!

  • Will

    Nice color graphs. The bright blue button is much easier to read as well.

    Also, how come there’s no ice in my lemonade, Blue?

  • Sebastian Scaramuzza

    Thanks, this is very interesting. I NOW know WHY the default anchor colors are blue and violet! 😀

  • Francisco Esteves

    Color of IPv6 or DNSSEC is better….

  • The color is very great!

    • pennytbbt

      Thank you!