On almost any website, you can find a button like this…
…a “call to action” (CTA) button, designed to incite user engagement on a website.
Brief: Traditional Call To Action Designs
Appearing on public-facing websites, CTA’s can make a big impact on site conversions when used effectively. A homepage CTA is often the entry point to the most direct user path towards conversion. A successful CTA consists of a lot more than a button; it involves the entire site design, structure, & layout.
AmericanExpress.com has a well executed design & structure that represents a traditional homepage call-to-action; it uses a formulaic design format that works one-and-the-same for two other completely different product CTA’s (see all three below.) It includes the following site elements: top navigation, a top right search bar, one main graphic image, a login box, and 4 call to action buttons.
Above we see clear and concise calls to action– colorful buttons begging to be clicked, one in the middle, three horizontally aligned across the bottom. The top nav options are there but are overshadowed by the central call-to-action design. You’ll notice the four CTA buttons are arranged in a “Z” formation, which is a common approach since studies show this is the way our eyes scan a website (see marked up image above.)
Calls To Action Under The Influence of User-Centric Design
Whereas we used to see homepage CTA designs that gave users navigational freedom, like the ones above, today we see more and more minimalist CTA designs. (scroll down for examples.)
So why the minimalist CTA designs? The reasoning is derived from a user-centric design approach, one that anticipates user behavior and designs accordingly. With less navigation and fewer calls to action the number of user paths (through the site) are restricted. The idea is that by limiting the number of user paths, conversion odds are more favorable.
User-centric or user interface design is an approach we see more frequently in conjunction with web application design; but upon second glance, UX/UI design influences seem to be shaping some of the more progressive calls to action we see on the web.
What am I talking about? Let’s take a look at some examples…
The Latest In ‘Call To Action’ Site Design
iCloud.com‘s public-facing marketing website is designed more like an internal application page. We’ve lost the traditional top nav items and layout. There are only 5 elements on the page, all images, the largest of which presents only two calls to action, overtly stated in metallic silver set against a dark gradient. There we have it– new format, minimalist design, fewer but more overt calls to action.
Ironically, fewer calls to action & less navigation actually enhances the user experience here; users are happy because they don’t have to think for themselves to use it. It’s intuitive.
Smart & Interactive CTA’s
I’ve seen two other new types of call to action designs that enhance the user experience & simplify the user interface, all by implementing a minimalist design that gives users fewer choices.
Imgur.com, an image hosting service, is a prime example of a public facing website that is designed as though it’s an internal page of a web application. This website pretty much only has two calls to action (upload images & view images,) and it doesn’t even require users to sign up or log in first.
Once logged into your imgur.com account, additional application features appear within this same interface. This website only has two calls to action (upload images & view images,) and doesn’t even require users to sign up or log in first. The internal and external websites are almost identical; as a result, the calls to action become much more central to the site design & functionality.
37 Signals’ marketing site for their web applications also has a simple design with only four segmented calls to action. These calls to action are hidden until the user rolls over each box, wherein the site design changes and reveals a call to action, leading down a specified user path. This design concept works well as a call to action because it keeps users engaged, and reinforces goal-oriented behavior.
(top: active CTA on roll-over)
(bottom: static page design)
Gilt.com is a web application, so you have to log in to access their service. Instead of creating a public page design with lots of different calls to action (like AmericanExpress.com,) the public-facing Gilt.com site takes the opposite approach; the only two calls to action are to sign in or sign up for an account, so the public facing site becomes just a portal into the application.
But it goes a step further– if, like me, you’re already a member of the site, you’ll only be presented with one call to action, to login. The ‘Join Now’ CTA is greyed-out because the website recognizes that I’m already a member, and so the interface reacts by reducing the calls to action down to just one. If a site visitor wants to find out anything about the gilt.com service, they have to create an account and experience it firsthand. This slimmed down CTA homepage design forces the user to engage and progress through the first step of a user path.
The above example is a bit of an exception in that the Gilt.com is itself a web application, but I’ve witnessed the same “smart call to action” on public marketing sites as well. (See Box.com example below; the same instance is circled in red.) Call to action designs are becoming much more keen & receptive to user engagement, by narrowing the scope of the user’s navigational path which also improves their user experience.
The Bigger Picture
As user-centric design becomes a standard practice across the web, calls to action are becoming more and more integrated into site designs. CTA’s are an important element of any user experience design, so why not give them the same design treatment as the internal web application design? I’d argue that this is all evidence of a larger-scale shift in web design, wherein internal & external page designs are becoming more integrated as a means of delivering a seamless user experience. Especially now that so many brands & companies offer web and mobile application services, accessed via their public website, the line between logged in and logged out is beginning to blur.