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:
- The button is a ‘grey’ button on a grey background.
- The font size in the button is exactly the same size as the surrounding text.
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.
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:
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.
