{"id":5501,"date":"2013-02-19T08:29:58","date_gmt":"2013-02-19T14:29:58","guid":{"rendered":"http:\/\/blog.cpanel.net\/?p=5501"},"modified":"2013-02-19T08:29:58","modified_gmt":"2013-02-19T14:29:58","slug":"youre-my-boy-blue","status":"publish","type":"post","link":"https:\/\/devel.www.cpanel.net\/blog\/products\/youre-my-boy-blue\/","title":{"rendered":"You\u2019re my boy, Blue!"},"content":{"rendered":"<p>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 \u2018primary\u2019 action that is easily recognizable.<\/p>\n<p>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\u2019s \u2018primary\u2019 action is the \u201cChange your password now!\u201d button. Currently, though not completely hidden, the button doesn\u2019t stand out as the primary action.\u00a0 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.<!--more--><br \/>\nSo how do we go about achieving this clarity? We addressed two issues with the current page:<\/p>\n<ol>\n<li>\u00a0The button is a \u2018grey\u2019 button on a grey background.<\/li>\n<li>The font size in the button is exactly the same size as the surrounding text.<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"aligncenter\" alt=\"cPanel current password UI\" src=\"http:\/\/cpanel.net\/images\/blue-oldpword.png\" \/><\/p>\n<p>The user eventually finds this button, but only because it\u2019s 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.<\/p>\n<p>Take a look at this maze. Your first action is to find out where you\u2019re supposed to start, and then find out where you\u2019re supposed to end.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" alt=\"maze\" src=\"http:\/\/cpanel.net\/images\/blue-maze.png\" \/><\/p>\n<p>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.<\/p>\n<p>So now that we\u2019ve established we need a clear and distinct finish line that is easily recognizable, how do we do that? In a user interface, it\u2019s simple: we make a nice, big button. In the Change Password page, we\u00a0 also need to increase the font on our existing button. This will give it some visual weight and establish a visual hierarchy as well.<\/p>\n<p>Let\u2019s face it, button size and font size alone won\u2019t 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 (<a href=\"http:\/\/cpanel.net\/company\/media-kits\/\">http:\/\/cpanel.net\/company\/media-kits\/<\/a>) 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\u00a0 these colors don\u2019t coordinate with.<\/p>\n<p>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.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" alt=\"color blind examples\" src=\"http:\/\/cpanel.net\/images\/blue-color.png\" \/><\/p>\n<p>With this information, we learn\u00a0something about web design. It\u2019s now clear why default links are blue with violet as the default visited state.<\/p>\n<p>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.\u00a0 At cPanel we also\u00a0 realize that we have numerous partners that want to customize cPanel to better match their individual brands, and we\u2019ve already established that orange and teal are not exactly flexible colors. Taking all this into consideration, we have\u00a0 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:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" alt=\"cPanel proposed new password page\" src=\"http:\/\/cpanel.net\/images\/blue-newpwrd.png\" \/><\/p>\n<p>The action on this page is now clear to all users. Keep in mind, this may or may not represent the \u2018end\u2019 product, but it meets our criteria.\u00a0 Again, the \u2018change password\u2019 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\u2019s pages.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 \u2018primary\u2019 action that is easily recognizable. For example, the change password page has one action, but it [&hellip;]<\/p>\n","protected":false},"author":77,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[73,49],"tags":[521,537,525],"class_list":["post-5501","post","type-post","status-publish","format-standard","hentry","category-cpeople","category-products","tag-uiux","tag-usability","tag-x4"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>You\u2019re my boy, Blue! | cPanel<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devel.www.cpanel.net\/blog\/products\/youre-my-boy-blue\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"You\u2019re my boy, Blue! | cPanel\" \/>\n<meta property=\"og:description\" content=\"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 \u2018primary\u2019 action that is easily recognizable. For example, the change password page has one action, but it [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devel.www.cpanel.net\/blog\/products\/youre-my-boy-blue\/\" \/>\n<meta property=\"og:site_name\" content=\"cPanel\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cpanel\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-02-19T14:29:58+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/cpanel.net\/images\/blue-oldpword.png\" \/>\n<meta name=\"author\" content=\"cPanel Community\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cPanel\" \/>\n<meta name=\"twitter:site\" content=\"@cPanel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cPanel Community\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devel.www.cpanel.net\/blog\/products\/youre-my-boy-blue\/\",\"url\":\"https:\/\/devel.www.cpanel.net\/blog\/products\/youre-my-boy-blue\/\",\"name\":\"You\u2019re my boy, Blue! | cPanel\",\"isPartOf\":{\"@id\":\"https:\/\/devel.www.cpanel.net\/#website\"},\"datePublished\":\"2013-02-19T14:29:58+00:00\",\"dateModified\":\"2013-02-19T14:29:58+00:00\",\"author\":{\"@id\":\"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/8cf97408aad4fb70cf55d11a1d4f57f8\"},\"breadcrumb\":{\"@id\":\"https:\/\/devel.www.cpanel.net\/blog\/products\/youre-my-boy-blue\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devel.www.cpanel.net\/blog\/products\/youre-my-boy-blue\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devel.www.cpanel.net\/blog\/products\/youre-my-boy-blue\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devel.www.cpanel.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"You\u2019re my boy, Blue!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devel.www.cpanel.net\/#website\",\"url\":\"https:\/\/devel.www.cpanel.net\/\",\"name\":\"cPanel\",\"description\":\"Hosting Platform of Choices\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devel.www.cpanel.net\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/8cf97408aad4fb70cf55d11a1d4f57f8\",\"name\":\"cPanel Community\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e1949945083b5526bb95711bd3d616b3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e1949945083b5526bb95711bd3d616b3?s=96&d=mm&r=g\",\"caption\":\"cPanel Community\"},\"description\":\"The web hosting industry's most reliable management solution since 1997. With our first-class support and rich feature set, it's easy to see why our customers and partners make cPanel &amp; WHM their hosting platform of choice. For more information, visit cPanel.net.\",\"sameAs\":[\"https:\/\/cpanel.net\"],\"url\":\"https:\/\/devel.www.cpanel.net\/blog\/author\/cpadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"You\u2019re my boy, Blue! | cPanel","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devel.www.cpanel.net\/blog\/products\/youre-my-boy-blue\/","og_locale":"en_US","og_type":"article","og_title":"You\u2019re my boy, Blue! | cPanel","og_description":"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 \u2018primary\u2019 action that is easily recognizable. For example, the change password page has one action, but it [&hellip;]","og_url":"https:\/\/devel.www.cpanel.net\/blog\/products\/youre-my-boy-blue\/","og_site_name":"cPanel","article_publisher":"https:\/\/www.facebook.com\/cpanel\/","article_published_time":"2013-02-19T14:29:58+00:00","og_image":[{"url":"http:\/\/cpanel.net\/images\/blue-oldpword.png"}],"author":"cPanel Community","twitter_card":"summary_large_image","twitter_creator":"@cPanel","twitter_site":"@cPanel","twitter_misc":{"Written by":"cPanel Community","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devel.www.cpanel.net\/blog\/products\/youre-my-boy-blue\/","url":"https:\/\/devel.www.cpanel.net\/blog\/products\/youre-my-boy-blue\/","name":"You\u2019re my boy, Blue! | cPanel","isPartOf":{"@id":"https:\/\/devel.www.cpanel.net\/#website"},"datePublished":"2013-02-19T14:29:58+00:00","dateModified":"2013-02-19T14:29:58+00:00","author":{"@id":"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/8cf97408aad4fb70cf55d11a1d4f57f8"},"breadcrumb":{"@id":"https:\/\/devel.www.cpanel.net\/blog\/products\/youre-my-boy-blue\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devel.www.cpanel.net\/blog\/products\/youre-my-boy-blue\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/devel.www.cpanel.net\/blog\/products\/youre-my-boy-blue\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devel.www.cpanel.net\/"},{"@type":"ListItem","position":2,"name":"You\u2019re my boy, Blue!"}]},{"@type":"WebSite","@id":"https:\/\/devel.www.cpanel.net\/#website","url":"https:\/\/devel.www.cpanel.net\/","name":"cPanel","description":"Hosting Platform of Choices","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devel.www.cpanel.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/8cf97408aad4fb70cf55d11a1d4f57f8","name":"cPanel Community","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e1949945083b5526bb95711bd3d616b3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e1949945083b5526bb95711bd3d616b3?s=96&d=mm&r=g","caption":"cPanel Community"},"description":"The web hosting industry's most reliable management solution since 1997. With our first-class support and rich feature set, it's easy to see why our customers and partners make cPanel &amp; WHM their hosting platform of choice. For more information, visit cPanel.net.","sameAs":["https:\/\/cpanel.net"],"url":"https:\/\/devel.www.cpanel.net\/blog\/author\/cpadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/posts\/5501"}],"collection":[{"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/comments?post=5501"}],"version-history":[{"count":0,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/posts\/5501\/revisions"}],"wp:attachment":[{"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/media?parent=5501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/categories?post=5501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/tags?post=5501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}