Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

May 24 2013

18:03

The Perfect User Interface: GoodUI Equips Web Designers with Solid Marketing Knowledge


  
goodui-w550

Jakub Linowski, UI designer from Toronto, Canada, is used to be working for the bigger brands. He obviously possesses knowledge not only in the field of webdesign craftsmanship but also in the field of marketing. The latter is what he conveys through his side project GoodUI.org. If you are a web designer interested in maximum conversion aka massive sales, you should definitely care for obeying what Linowski teaches you. Not each and every tip will be a fit to every project, though. Just as it is in real life, if the shoe fits, wear it. If not, don't...

August 17 2012

07:58

Beautiful Button Design in Action: Examples & Tips for Creating Effective Buttons


  

Designing beautiful buttons for the web is an art form in and of itself. The best buttons often appear simple and easy to design, yet are deceptively difficult, and are often comprised of many subtle design elements, backed by solid marketing theories. Today we’re going to look at some of the principles behind great button design, and give you some practical tips to improve your own website’s buttons, and boost your conversions/click-through rates.

Tips and Techniques for Designing Effective Buttons

Below are some applicable tips for improving your web buttons and boosting their click through rates.

1. Make Your Buttons Bold and Bright

Whilst a bold/bright button will clearly not fit with every web layout, as a rule of thumb these are the buttons that receive the most clicks. A bolder/brighter button naturally attracts more attention from your visitors, as the human eye is drawn to color and solid hues.

If you’re into split testing your designs then try increasing the saturation of your buttons (within a tasteful level) and watch your click through rates go up slightly.

2. Larger Buttons Attract More Attention

This is another common sense part of button theory, but one ignored by many website owners. Generally speaking, larger buttons will naturally attract more attention.

It’s been proven time and time again that by increasing the size of your call to action buttons more people will notice them, and by extension click them.

The trend of HUGE web 2.0 buttons may be over, but by integrating a tasteful, large button into your design you will definitely be prompting action on the part of your visitors.

3. Buttons Should Fit With Your Site’s Theme

Whilst contrast is good (we’ll get to that in the next step) you should remember to integrate your buttons well with the surrounding website design.

If you run a nature themed website then it would look pretty weird to have an industrial steel textured button. Even if it did attract attention it would be the wrong type of attention, as the button would appear awkward and visually clash.

Try to find common themes, moods and motifs in your website design and then artfully integrate these into your button design. Taking elements from the surrounding website (be it icons, textures, lighting etc…) can add a lot to a strong button design.

4. Contrast is Good!

Another staple of button design theory is that contrast will get you more click through rates. If you have a plain white background for your website then don’t make your button light gray or cream, make it black, or a solid, bold color!

Contrast is one of the most powerful techniques for getting your buttons noticed. It also applies to the text, which should contrast well against the button color.

Don’t make your buttons something that people can skim over, make them noticeable.

5. Small Details Make a Big Difference

As with all design, the small details can take your work from ‘good’ to ‘great’. A website button may be a fairly simple visual element, but don’t forget to pay attention to the subtle details.

A thin border, subtle gradient, faint pattern, or lighting effect can make a world of difference. Not only do these kinds of visual touches show professionalism and an attention to detail, but they often add depth to your buttons, making them stand out and ‘pop’ from the surrounding page more.

6. Don’t Forget the Text!

Probably the main element people overlook in their button design is the text, yet it can have the biggest impact. In this sense your button text or ‘copy’ is crucial to it’s success.

Gone are the days when ‘buy now’ or ‘join’ were sufficient. People like a bit of creativity in their button copy, and they also appreciate getting a hint at the benefits of your service/website.

Try some of the following techniques for making your button copy more interesting:

  • Instead of just having ‘buy now’ use ‘Try (Your Service)’
  • Going one step further have ‘Try (Your Service) for (Low Price)’ by ‘Try (Your Service) and (Give Brief Benefit)’
  • Another variation is ‘(Common Problem)? Try (Your Service)’

A real life example that you’ll see in this post is Akismet, whose main call to action button reads: ‘Get Started and Say Goodbye to Spam’.

7. Think About the Surrounding Details

A successful button design doesn’t end with the button, you need to also consider the details of the surrounding website. Think about how this surrounding area can point people towards your call to action button, and help accentuate it.

Here are some practical ideas:

  • If your web design has a common light source make sure that this is reflected in your button design (i.e.: ensure that your buttons highlights/shadows relate to the wider light source on the page)
  • Use shapes such as arrows to direct attention to your button. These have been proven to vastly increase click through rates.
  • Think about establishing trust/credibility if you’re offering a service. Using ‘secure payment’ signs, major credit card logos, or testimonials near your button can make people more likely to click it.
  • Consider the amount of padding around your button. Generally speaking if a button has more padding then it will seem more isolated and will draw more attention, as there is less competing content around it.

8. The Magic Button Example

On his blog Smart Passive Income, Pat Flynn wrote an article about how he increased his earnings for an ebook in 5 minutes by simply updating his ‘buy now’ button to a ‘Magic Button’ invented by marketer Ryan Deiss.

You can read the article here: How to Increase Your Earnings in 5 Minutes or Less. We won’t repeat the details of Pat’s entire post, but essentially Ryan Deiss came up with the button design by split testing 43 variations to find the one that converted best.

Now you’ll probably agree that the final button isn’t the most attractive, or elegant. However, it undeniably gets the job done!

Whether you opt for something this in your face or not, you should take away some of the principles that this button utilizes (it’s large, bold, uses surrounding details like the border/credit cards/discounted price to draw more attention etc…).

Beautiful Button Design

Beautiful Button Design in Action

Groupon
Groupon has one of the most unique button designs around. The button combines with a progress bar that entices people to see what lies ahead if they sign up for the site. The forward arrow and bold blue button are equally enticing.

Beautiful Button Design

Bundlr
Bundlr uses a very simple, but effective call to action button on their site that works for several reasons. It is clearly very bold and colorful against the plainer background, which helps it stand out. The imperative text ‘start now’ also pushes users in the right direction. Finally, the subtle design touches such as the drop shadow, 1px border and inner highlight all help the button pop and appear more professional.

Beautiful Button Design

Status Board
Status Board’s button is everything I love about effective button design. It’s bright, it’s bold and it makes you want to click it! The bevel effect really makes the button stand out and feel more ‘pushable’, which must help their conversions. The text choice is also interesting, shying away from standard web fonts and opting for something more creative.

Beautiful Button Design

Votizen
Votizen uses a bold red button design to attract visitor’s attention, and also overlay a pixelated pattern to make the button more eye catching. Importantly, the red of the button ties in with the other primary colors in the design, which allude to the US flag.

Beautiful Button Design

My Design Deals
My Design Deals uses an effective button design to help get subscribers to their newsletter. The bright, lime green button design contrasts the dark gray backdrop really well, whilst the accompanying yellow arrow helps draw further attention to the area. The imperative ‘get free updates now’ encourages users to sign up by giving them a direct action to take.

Beautiful Button Design

Club Divot
Club Divot shows how button design doesn’t have to be boring! Their charming wooden button fits perfectly with the site’s golfing theme, and gives a very natural feel for the site. The embedded design with a sharp white highlight across the top also gives depth.

Beautiful Button Design

Kissmetrics
You would hope that a company dealing with online metrics and testing had an effective button design, and Kissmetrics don’t disappoint! Their understated button is professional and sleek, and fits perfectly with the surrounding clean website. The copy ‘get me started with Kissmetrics’ is effective as it’s fairly casual, yet entirely relevant to their company.

Beautiful Button Design

The Copper Tree
The Copper Tree uses some charming button designs that complement the surrounding web design nicely. The red leaves fit well with the surrounding graphics, and also act as graphical arrows which encourage users to click the buttons.

Beautiful Button Design

Zero Bundle
Zero Bundle is a classic example of a bold, bright button that converts very well. The green call to action button is paired with some creative, bold text to draw extra attention. The white text is given a bold drop shadow to help it stand out.

Beautiful Button Design

App Sumo
App Sumo started as a ‘get it live, not perfect’ kind of business, but as they’ve grown to a giant in the online deals market they began rigorously testing each element of their page. It’s safe to say that their current buttons are the best converting they’ve ever had. The current deal button is incredibly bright, and uses a very tall font to take up most of the button.

Beautiful Button Design

Pixeno
Pixeno uses a fairly standard button design with some lovely touches to help draw attention to it. The green button uses a subtle highlight effect, faint border and stylish arrow to stand out. The text also uses an elegant drop shadow to give it extra depth.

Beautiful Button Design

Hot Sauce Fever
Hot Sauce Fever has a really interesting grungy button design on their website to encourage action from their visitors. The button has a rough texture overlay, as well as a unique, relevant icon. Overall it’s large, eye catching and well designed.

Beautiful Button Design

Make it Bloom
Another great example of a simple, effective button design. Make it Bloom uses a bold green button that fits with the nature theme of their site. The subtle gradient and bevel effect makes the button appear more 3D and add depth.

Beautiful Button Design

Mighty Deals
Mighty Deals uses a very clever button that fits well with their design deals site. The button is in the shape of a sales tag and therefore is really unique to their website. The bold text combined with bright orange button gradient is very eye catching.

Beautiful Button Design

Desk Time
Desk Time uses the principle of ‘bigger is better’ by using a HUGE call to action button that encourages users to sign up for their free trial. The button is very clean and colorful and uses the additional tagline ‘no credit-card required’ to boost conversions.

Beautiful Button Design

The Forge
The Forge have an interesting choice of button. Their ‘hire us’ button is the same size and shape as the main menu buttons. This should help increase click through rate on the button. The button also establishes positive connotations by including a tick icon, which should further help engagement.

Beautiful Button Design

Akismet
The call to action button at Akismet could easily be just another button. However, it’s incredibly eye catching for a couple of reasons. Other than the bright blue design, the bold white border adds far more contrast against the green background. The text provides an instant reason for signing up ‘say goodbye to spam’ which gives people more incentive to click.

Beautiful Button Design

Ampersand Commerce
Ampersand Commerce is a classic example of a button effectively contrasting the surrounding design. The button is bold, colorful and ‘solid’, whilst the surrounding area is fairly sparse, monotone and plainer. This contrast ensures that your eye is drawn to the button straight away.

Beautiful Button Design

Xhtml Genius
A very clean and professional button design that is classically ‘clickable’. The ‘ORDER NOW’ text stands out by being all in caps and bolder than all the surrounding website text. The red button color complements the shades of lighter red and green in the rest of the site, whilst standing out against the plain background.

Beautiful Button Design

What Do You Think?

We would love to know what you guys thought! Did you have any favorite examples from this post, or perhaps a technique that stood out to you especially? What makes a great button in your opinion?

(rb)

Sponsored post
feedback2020-admin
04:05

December 26 2011

10:00

10 Crimes a Web Designer can Commit on Call to Action Pages

Call-to-action pages are dedicated to prompt visitors to take a desired action, whether an opt-in, a sale or any type of click that brings a user one step closer to a company’s goal. Basically, any website can be classified as a call to action page because virtually every person who creates a website has a specific action he/she wants a visitor to take.

Most websites commit at least one of the top crimes listed below. Do you agree with the choices?

1. Graphic Clutter


Graphic-Clutter-Worst-Call-to-Action-Pages

It’s obvious this website’s purpose was show as much information to visitors as possible above the fold. While this is a valiant effort, too many graphics can work against you.

A great call to action page will send your eye to a specific area. When you look at this page, your eyes are drawn everywhere and if you were looking for a car, you wouldn’t even know where to begin.

Though this page is not a landing page, it is a prime example of why less is more when trying to increase conversions with web page design. A call to action page should include benefits, features, logos, maybe one or two images and a prominent call to action button. Any more and the page will suffer.

A website home page should follow suit while including clear navigation and an easy experience for visitors. Avoid clutter at all costs. White space is your friend!

2. Blended Call to Action


Blended-Call-to-Action-Worst-Call-to-Action-Pages

Though the call to action button on this page is outlined in yellow, it does not stand out enough from the background. The yellow also matches the font above it so it blends into the background even more. The color scheme of the page is yellow, red and orange and the call to action button follows the same color scheme; therefore, it does not stand out enough. A solid color in contrast to the page would work best.

3. Distracting Background


Distracting-Background-Worst-Call-to-Action-Pages

Many businesses want to incorporate their brand colors into their website design. While this is a smart marketing strategy, if the color is overdone or distracting, it can have an adverse effect. The bright yellow background in this web page is very distracting and it draws the eye away from the purpose of the website. If you view this website in its normal size, you will see how truly distracting the bright yellow background is.

It’s good to implement your brand colors in your website design, but not at the expense of distracting visitors away from your purpose. Your background should support your web page and be somewhat neutral.

4. Lost call to action


Lost-Call-to-Action-Worst-Call-to-Action-Pages

On this page, the call to action button is not only lost, it is nonexistent. One of this website’s desired actions is to urge users to click and find out more information about the Thank You® Premier card. The current call to action is simply text that says “Get Moving”.

If you really want to lead users to an intended action, use buttons in contrasting colors. Text will never be strong enough to get users’ attention. The button should include a contrasted color that screams “click me” without slamming it in user’s faces.

Also consider the call to action button’s proximity to other elements. For example, with an ecommerce site, the “Add to cart” button would be most effective if it were placed right next to the product. You can also place call to action buttons near places of interest like testimonials, feature lists and benefits, etc. Make sure, though, not to clutter your page with too many buttons. Keep them close to your key points and at a  maximum of 2-3 per page for simple landing pages.

5. Too Much Information


Too-Much-Information-Worst-Call-to-Action-Pages

When people offer us more information than we want to hear we often say it is TMI or Too Much Information. Similar to how you would want that person to be quiet, a web page will suffer this same reproach if it is suffering from TMI.

On this example web page, the call to action is not front and center and your eye is drawn to the articles instead of the “Get a Quote” text. This page, while meant to attract visitors to get a quote, leads them towards reading an article which may be too much information for this page. Content is not necessarily bad; great content outlines the pages of some of the greatest websites. But when it blurs the message of the site or distracts users from a clear call to action, profits will suffer.

For this website, a more prominent call to action in a more effective location would draw the eye there first.

The goal with a call to action page is to lead your visitors to click on the call to action button without distracting or boring them with too much information. You should include enough information (features, benefits, guarantees, testimonies) to lead them to take action without overdoing it. If your visitors cannot figure out whether or not your site will be beneficial to them in the first few seconds, they will assume the worst and hightail out of there.

6. Too many Links


Too-Many-Links-Worst-Call-to-Action-Pages

This page is actually ranking quite well for competitive mortgage related keywords, but the design of the site unfortunately does not follow suit.

Unless your site is product specific (e-commerce) or purely informational, excessive text links can overwhelm users.

The purpose of this website is to guide consumers to get a mortgage quote. While classifying the links by states is a good idea, the clutter and small font does nothing for visitors’ eyeballs. As stated before, text links are ineffective as calls to action on pages like these and the close proximity of these links jumbles everything together to look like one cohesive blue link.

There is no clear call to action here. This webmaster would benefit from making this page a second page and redesigning the home page to include one or two buttons only, leading people to “Get a Quote”.

Here is a trick: Squint your eyes slightly to blur your vision and look at the page. If your call to action doesn’t stand out, adjustments may need to be made.

7. Button Placement & Location


Button-Placement-Location-Worst-Call-to-Action-Pages

Though this website is committing many faux pas, I chose it due to improper placement of the call to action button.

If you look on the far right (it probably took you a few seconds to find it, which is a few seconds too long), you will find a small box with a dropdown menu. This is where the webmaster would like a user to click. The only element standing out is the small red arrow and that is even questionable.

The placement and location of your call to action button is equally as important as its size and color. A great call to action will not be effective if it is surrounded by too much text or not enough whitespace, or if it is located out of sight.

Generally, it’s important to keep call to action buttons above the fold (visitors can see it without scrolling), clearly visible and prominent in relation to all other elements. If you have content that is only visible by scrolling, include a call to action button towards the end so users do not have to scroll back up to click on it.

8. Button Size


Button-Size-Worst-Call-to-Action-Pages

Your website visitors should know exactly where they need to go the second they land on your website. In this example, though well-designed, this “Buy Now” call to action button seems a bit small for the animation of the site. If you click on the entire website, you will notice a busy background which can distract from the small button as well.

Please note, though, that a bigger button is not always associated with higher conversions. The button should stand out from the other design elements without overwhelming the entire design, which can turn people away as well.

9. Button Text


Button-Text-Worst-Call-to-Action-Pages

This website used the word “Go” to urge users to click for a quote. While the design does draw your eye to the quote box, I am not sure the word “Go” is the best choice.

Though there are some basic rules for button text to maximize conversions, it is more of a function of the type of website rather than a general consensus. For example, a business offering a free trial may use “Click Here to Get Your Free Trial” while a service-oriented website may use “Get Started Today”.

General rules of thumb for call to action button text:

  • Avoid being too wordy
  • Keep it simple
  • Add urgency
  • Limited availability if applicable
  • Use action words like “now” or “today”
  • Always split test

When it comes to elements such as button text, the only way to determine what works best is to split test. Sometimes, minor changes can increase conversion rates dramatically.

10. No Clear Message


No-Clear-Message-Worst-Call-to-Action-Pages

Many businesses are not clear on their sales funnel; therefore, their visitors are not led to take a desired action. This dealership is trying to push users to perform too many actions at once along with reading text which can be boring for people looking to buy or lease a car.

TIP: The purpose of your call to action is to get users to the next step only. In the case of the dealership, the final goal would be to sell a car, but that should not be the main goal of the website. That is the car salesperson’s job. The website should only urge visitors to take the next step which is to visit the dealership.

Don’t try to sell a car with your website. Just sell the next step!

Have you seen any call to action crimes? What call-to-action crimes have you committed?

July 18 2011

10:00

Call to Action Buttons: A Survey of Best Practices

Call-to-Action buttons play a pivotal role in soliciting action from the user. To garner the requested action, buttons are placed on the website that allow the user to perform an action, such as buying something, or leading to another page for more information. Careful planning is necessary in the creation of your call to action, and in this article I will explain the best practices for creating effective call to action buttons. I will also present you with examples in action to give you a better understanding of what works.

In order for your Call-to-Actions to work successfully, you must first determine how they’ll fit into the overall scheme of your site. By laying the groundwork, or information architecture, you’ll begin to discover how the buttons work within the web interface. To survive in the market, you have to generate revenue. So, the successful website is that which leads the reader of web page to the desired end result (“Buy Now”…”Learn More”). Now the question arises, how can we make effective call to action buttons which work in the real world.

Factors to Consider

Size

In web design, historically the larger the element, the more important it is. The size of your call-to-action in relation to its surrounding elements is essential in converting users to take action. After all, it’ll be hard to get the intended action from your user if your button is miniscule in size and blends in with the rest of the text.

  • Use white space: A lot of what can be achieved from increasing the size of a button can also be accomplished by simply placing the button around plenty of white space. A button surrounded by white space will be much more prominent than one which is lost in a sea of text and graphics.
  • The more white space there is in between a call to action button and a surrounding element, the less connected they are. Therefore, if you have other elements that can help convince users to take action, reduce the white space in between those elements and the call to action.

ScrapBlog
You can see the effects of using a prominent color, sufficient white space, and size relative to surrounding elements to attract users’ attention. Straightforward language conveys a sense of easiness, claiming that you can “start” right away by taking action.

 

Mozilla Firefox
“Free Download” button of the Mozilla Firefox is a true revolution in terms of call-to-action graphics. Its large, unevenly shaped, vibrantly colored and detail oriented button has made its mark in the industry.

Color

To ensure the user notices your button, it’s also important to consider its color. Although there are a few choice colors for a call-to-action button, it can be worthwhile to choose a contrasting color than the background. This essentially makes the button jump toward you, enticing you to click it.

  • It has sometimes been said that a red button (and red text links) performs the best
  • Perform some A/B testing to see what colors performs best for your website
  • The performance of any button may be attributed to the contrast on the page instead of its color

 

Vuze.com visitors will have no problem finding the download call to action button. The use of contrasting color, plenty of white space, and placement on both the top and bottom of the page make this call to action noticeable and effective.

Placement

An effective button should be clearly visible on a page, and at least relatively prominent in relation to other elements.

  • On a landing page – and indeed for most pages, where this is feasible – a button should appear above the fold. The likelihood that a button will be clicked is greatly diminished if a visitor has to scroll to see it.
  • Increase the likelihood of a button being clicked by placing both at the top of the page (or above the fold) and at the bottom of a longer page. It’s likely a user may not scroll back up the page if they’ve passed it, or scroll down a page if they already see one.
  • Proximity to other page elements is important as well. Obviously for an e-commerce site an “add to cart” button that’s right next to a product should perform better than one that’s further removed.
  • In other situations, it is important to keep a call-to-action button close to such things as value propositions, testimonials and feature lists that are intended to stimulate conversions.

You can see these concepts in practice on the website for YourWebJob.com. By putting the call to action “Post a Job!” in a very prominent area, it is more likely that the user will notice it or remember it later, after they have looked at the site’s content.

Mobile Web Design
This call to action button is placed in a prominent location; it has large size and a distinctive color with respect to surrounding elements.

Mobile Cubix
Mobile cubix uses a round outline surrounding the “Read More” button and then leading it to the application that not only attracts visitors’ attention but also informs them what they can expect.

Making Its Use Known

Of course none of these procedures matter if the button doesn’t actually look like a button! You need to make it clear to the visitors that this graphic is in fact a button that can be clicked on to result in a specific action and not simply another element on the page. Graphically speaking there are a number of ways to do this, including:

  • Embossing the button
  • Placing the call-to-action text in a discreet bordered area
  • Offsetting the button from other graphical elements
  • Making it behave like a button when the user’s mouse hovers over it
  • For buttons that are not hyperlinked (and so do not automatically generate a hand symbol in the mouse over state) this can readily be accomplished with CSS.
  • A change in the button’s appearance itself on mouse over, such as a change in color, is a further signal to the visitor that the button is clickable.

Kalculator
This call to action tells users exactly what to expect: by clicking on this call to action, they should anticipate shelling out $3.99. Using the word “only” hints that this is quite a good deal, which can help make the sale.

 

Postbox adds value through the download call to action by adding that its “FREE” 30-day trial and reduces consumer doubt with the purchase call to action by stating it’s a “No Risk Guarantee!” More often than not web sites calls to action simply ask the visitor to Buy Now! without reinforcing the value or ease of the action.

SEO

A button, in many cases, is directly linked to a page indexed by search engines. Adding an <img> alt attribute will provide the search engines with text they will associate with the target page:  if you are targeting keywords on that target place, you should employ them in your <img> alt.

To get the most out of your button, your image’s alt attribute (or, depending on the browser, an <a> title attribute) may be displayed to a visitor when they mouse over the button, providing yet another opportunity to reinforce or your call-to-action (“start your trial today!”).

Additional Resources

5 Tips for Creating An Effective Call To Action Button

How to Create a Slick and Clean Button in Photoshop

10 Techniques For An Effective ‘Call to Action’

July 14 2011

07:21

The Secrets Behind Great Call To Action Buttons

Advertisement in The Secrets Behind Great Call To Action Buttons
 in The Secrets Behind Great Call To Action Buttons  in The Secrets Behind Great Call To Action Buttons  in The Secrets Behind Great Call To Action Buttons

Within web design ‘calls to action‘ can be defined as any element of the page that prompt an action of the user. However, clearly some actions are more desirable than others. For example, any site owner would prefer users to click on a ‘buy now’ link than a ‘twitter’ link.

For the most important calls to action a designer will often employ a call to action button. Buttons traditionally entice users to click them, and so generally result in much higher click through rates than standard links. Like this example from the showcase below:
Calltoaction13 in The Secrets Behind Great Call To Action Buttons

How To Get Your Call To Action Button Right!

It’s important to realize that not all call to action buttons are the same. As your call to action button could drastically impact your user’s/customer’s behavior it’s essential to get it right!

Below I’ve laid out a hypothetic example of a call to action and how to improve it. Here are some pointers to improve your click through rate:

  • Experiment with various button shapes. Sometimes breaking the norm can garner more attention.
  • Try to contrast your buttons color against it’s backdrop.
  • Try to use bold, clear text, and great typography for your button’s copy.
  • Feel free to use humor, informative taglines or credible references within the copy.
  • Try to make the button more clickable. Think of it like a real button (who can resist pushing a button!).
  • Introduce subtle design touches (highlights, drop shadows, borders, indents, textures, patterns etc…). These can really help your button stand out.

To illustrate these tips I’ve laid out an example below:

Calltoactionexample1 in The Secrets Behind Great Call To Action Buttons

Calltoactionexample2 in The Secrets Behind Great Call To Action Buttons

Remember to keep it subtle!

Obviously the example above is fairly extreme just to demonstrate how some of the techniques I’ve mentioned can make a button have more impact. The idea is not necessarily to implement all of them, but to create an attractive, effective call to action button that makes your users take notice. You don’t want to over do things and end up with a tacky, overwhelming call to action that will dissuade your users. Instead, tweak your buttons styles until you’re happy with the result.

It’s not all about looks…

Whilst you don’t want to overwhelm your users, it’s equally important not to get hung up on how beautiful your calls to action are. Some of the ugliest calls to action have the best click through rates. If you’re trying to run a business then really you should value sales/conversions over aesthetics. A great solution is A/B testing. Perhaps design a few variations on your button and see which perform better, and which get the best feedback from your users.

Inspiring Call To Action Buttons

Here are 40 inspiring examples of effective and well designed call to action buttons. Hopefully these will inspire your own designs!

Ronin App
Ronin use a large, bright call to action button that really pops against the relatively subdued background color. The 1px highlight at the top of the button and subtle outer glow make the button appear more 3D and ‘clickable’, thus encouraging action on the part of the user. The tagline ‘No credit card required’ provides a subtle extra incentive to click the button.

Calltoaction1 in The Secrets Behind Great Call To Action Buttons

Ehab Aref
This is a great example of how contrast can lead to an effective call to action button. In this case the simplicity of the button is what helps it stand out. The background is bright and integrates a woven pattern design. Therefore the lighter, simpler call to action button contrasts this and draws the eye. Notice also how the button text is darker than the surrounding headline text, which helps attract clicks.

Calltoaction2 in The Secrets Behind Great Call To Action Buttons

Light CMS
One of the more effective call to action buttons in this article. There is a whole lot going on with this button! First of all, look at the backdrop – there is a kind of indented area in which the button sits, which instantly adds depth and creates intrigue in the viewer. Then the button itself stands out, using a teal color in the midst of a large block of orange background. Subtle inner glows, drop shadows etc… are applied to really make the button pop. Finally, the button is divided into two halfs ‘sign up’ and ‘for free’. This creates the illusion of two call to action buttons, despite there only being one. This seems to create double the attention from a users perspective, surely resulting in more click throughs.

Calltoaction3 in The Secrets Behind Great Call To Action Buttons

Shane Guymon
Shane Guymon uses two prominent call to action buttons on his homepage. These buttons work really well, as they both stand out from, and fit in with the overall design. The red and blue buttons fit with the main colors of his logo/slogan, yet really stand out against the plain white background of the main content area. There is a clear visual hierarchy at work, as the red button is given more visual precedence. This is achieved through it’s slightly larger size, more apparent gloss style, and preferential positioning (as we read left to right we encounter this button first).

Calltoaction4 in The Secrets Behind Great Call To Action Buttons

Simon Albrecht
The call to action buttons at Simon Albrecht’s page are really well designed. Interestingly each button mimics the color-scheme of the social networking site that it links to. This helps establish instant brand recognition, and should boost click throughs. One point to note is that whilst these buttons may be effective, they are in fact navigating away from his main portfolio site. If this is the aim fine, otherwise they may be hindering more than helping.

Calltoaction5 in The Secrets Behind Great Call To Action Buttons

Web App Heaven
Really interesting call to action button, as it promotes a newsletter, rather than a product sale. The square button shape makes the button appear almost more like a banner ad than a call to action button. However, the intricate icons and masterful typography are very enticing. Overall this is a very nicely designed button, but perhaps the site owner should consider a more traditional button shape.

Calltoaction6 in The Secrets Behind Great Call To Action Buttons

Resume Baking
Easily one of my favorite buttons from this collection. In a world dominated by traditional rectangular or rounded rectangular buttons, this retro shaped button is incredibly eye catching. The shape and side lines make this button almost resemble a car logo. The bold red color helps the button pop, whilst the indented background design, drop shadow and gradient fill all help give the button depth and purpose.

Calltoaction7 in The Secrets Behind Great Call To Action Buttons

Studio Press
The two main call to action buttons at Studio Press are effective for a number of reasons. Their 1px stroke effect and drop shadows help make them stand out from the background. The typography is also consistent with the main navigation at the site, implying that the buttons should be clicked. The copy is simple and straight to the point. ‘View Our Themes’ could not be clearer, so the users know exactly what to expect.

Calltoaction8 in The Secrets Behind Great Call To Action Buttons

Snoack Studios
Snoack Studios is a great example of how call to action buttons don’t need to do anything too revolutionary. Sometimes simple is best. The traditional button shape, bold blue design and contrasting text work well. A little extra impact is provided by the button’s inner glow and subtle arrow.

Calltoaction9 in The Secrets Behind Great Call To Action Buttons

Concept Engine
Concept Engine has a great call to action button. Not only does it contrast well against the main page background but it feels very clickable due to a heavy bevel/drop shadow effect. Finally, the unusual arrow shape makes the button feel somewhat like a sign post directing the site’s users further into the website.

Calltoaction10 in The Secrets Behind Great Call To Action Buttons

Code my Concept
Code my Concept use a pretty unique call to action button, which integrates into the pricing box directly above it. This indented design feature creates a direct link between the prices/services offered and the option to place an order. The low opacity stroke effect really helps to define the button, and the arrow icon should help boost click through rates.

Calltoaction11 in The Secrets Behind Great Call To Action Buttons

Now Up
Now Up uses quite a cartoony style call to action button, which really fits with the surrounding aesthetic. The subtle metallic gloss on the text and gloss on the button make the button stand out against the plain, vector style page background.

Calltoaction12 in The Secrets Behind Great Call To Action Buttons

Vision 18
Vision 18 is one of the most creative examples in this post. The designer has photo manipulated the sofa image that acts as a welcome graphic, making one of the cushions red. This red cushion then acts as a bold call to action button, that creatively integrates with the surrounding graphics. It’s both artistic and functional.

Calltoaction13 in The Secrets Behind Great Call To Action Buttons

Square Space
Square Space use a really large call to action button that grabs plenty of attention. The bright green button design really pops against the dark gray backdrop and the text is clear and direct. The additional text ‘no credit card required’ is indicative of a growing trend I’m seeing, where important extra details are displayed as part of the call to action button, in a tagline format.

Calltoaction14 in The Secrets Behind Great Call To Action Buttons

Reynolds Digital
This is another example of a simple but effective call to action button. Nothing fancy going on, but the call to action works. The user is not distracted by unnecessary bells and whistles, but instead views the button as having an obvious purpose (in this case as represented by the copy ‘submit design brief’).

Calltoaction15 in The Secrets Behind Great Call To Action Buttons

Site Plan
Couldn’t analyze the copy in this example (my language skills are that bad!). However, the design for this button is solid. Fairly simple, yet the rounded edges, bright gradient and Museo typeface all combine to create a modern, elegant call to action.

Calltoaction16 in The Secrets Behind Great Call To Action Buttons

Alan Power
One of my favorite call to action button designs. The details are really inspiring, such as the subtle stitching and indented lines. The creative drop shadow style helps at depth and draws the users eye towards the button. The text is given a subtle outer glow to make it pop against the button backdrop.

Calltoaction17 in The Secrets Behind Great Call To Action Buttons

Bomb Plates
This simple call to action button works well by following the wider site color-scheme. It’s position on the page works well as your eye is drawn down the left of page towards the button. The subtle noise effect for the button background adds a nice design touch.

Calltoaction18 in The Secrets Behind Great Call To Action Buttons

Custom Bags HQ
A lovely pair of call to action buttons, using nice complimentary colors. The inner glow and button highlights give them an appealing glossy appearance, whilst the outer border effect gives a really professional touch. A great example of how the details can make or break an effective call to action button!

Calltoaction19 in The Secrets Behind Great Call To Action Buttons

DFied
Another great example of a call to action button being integrated into content areas. This button straddles the main welcome area and area underneath, and appears to be indented due to a semi-transpareant border effect. The indented text adds depth and the bright orange color-palette really helps the button pop.

Calltoaction20 in The Secrets Behind Great Call To Action Buttons

Pierre Saikali
These call to action buttons are simple but effective. Perhaps one of their main draws is the huge amount of white space around them. They comprise most of the content in a vast header area, and therefore the eye is naturally drawn towards them.

Calltoaction21 in The Secrets Behind Great Call To Action Buttons

Iphone Icon
The ‘order now’ button on this page is practically the only colorful element on the page, which is otherwise gray/white. Therefore it really stands out. Additionally the call to action button uses bold typography, a fairly heavy drop shadow, and a highlight effect to grab attention.

Calltoaction22 in The Secrets Behind Great Call To Action Buttons

Mojo Themes
Mojo Themes have a great call to action button. Apart from the obvious great design of the button itself, it’s the surrounding elements that really make this button work. The site’s mascot is gesturing towards the button, whilst the tagline ‘get started now by…’ leads the users eye down to the button.

Calltoaction23 in The Secrets Behind Great Call To Action Buttons

Platinoom
The call to action button here is effective for a number of reasons. The button is large and prominent, with subtle design touches such as an inner shadow, 1px border etc… The shopping cart icon instantly creates a visual link for the purpose of the button (buying the theme).

Calltoaction24 in The Secrets Behind Great Call To Action Buttons

Pixel2Html
This call to action button has a great retro design that fits with the overall design of the site. The subtle patterned background, chunky border and large drop shadow all make it jump off the page and the copy ‘submit your order’ couldn’t be clearer.

Calltoaction25 in The Secrets Behind Great Call To Action Buttons

Make It Bead
Make It Bead use a nice clean, bold set of call to action buttons. The designer has used a classic technique of visual precedence to encourage people to click on the brighter red button, whilst offering a secondary option (the yellow button). The indented style for each button just makes you want to push them as they look almost real!

Calltoaction26 in The Secrets Behind Great Call To Action Buttons

Quote Roller
Quote Roller’s call to action button would be fairly plain, but the heavily rounded shape and indented button add a lot to quite a simple design. The arrow icon is a great visual element to suggest additional content – we wonder ‘what is that arrow leading to?’.

Calltoaction27 in The Secrets Behind Great Call To Action Buttons

Slamdot
The bright neon green color of this call to action button really pops against the blue backdrop. Importantly the tagline underneath the primary text helps explain where the user is clicking.

Calltoaction28 in The Secrets Behind Great Call To Action Buttons

Reflex Studios
The only other elements on the homepage using the pink of call to action button are the bullet points leading down to it. Therefore a clear visual flow is established scanning down the bullet points (which highlight services provided) to the call to action (‘view our work’). As the brightest element on the page, this is where users are most likely to click.

Calltoaction29 in The Secrets Behind Great Call To Action Buttons

Geekletics
Geekletics use one of my favorite call to action buttons in this collection. The button is really prominent and large, so instantly grabs people’s attention. The real selling points for this button are the details. The subtle border, inner glow and gradient work beautifully together. Combine this with excellent typography (notice the subtle color difference on the word ‘Go’), and the simplistic but effective icon. The Zazzle logo adds a lot of credibility to the shop which the button links to.

Calltoaction30 in The Secrets Behind Great Call To Action Buttons

Wire Hive
Wire Hive mount their call to action button on top of a curved graphical area. This positions the button totally central, so is really eye catching. The indented graphic on the button helps make it stand out, and the sharp drop shadow adds depth and perspective.

Calltoaction31 in The Secrets Behind Great Call To Action Buttons

Desk Time
DeskTime uses a fairly standard call to action button, but it’s very effective. Another example of how simplicity can work wonders! The green on blue combination helps the button stand out, and the subtle drop shadow and gloss effect add impact.

Calltoaction32 in The Secrets Behind Great Call To Action Buttons

Baby Li.st
One of the simpler call to action buttons in this compilation, yet one of the more artistic. This is a great example of how typography can make a button much more interesting. The word ‘BabyList’ uses the site’s logo text, rather than the font used elsewhere on the button. This subtle variation is really eye-catching and helps maintain the company’s brand.

Calltoaction33 in The Secrets Behind Great Call To Action Buttons

WP Zoom
A super bright call to action button which starkly contrasts the dark blue background. The main button text is accompanied by a cheeky subtext ‘You will definitely find one you’ll like!’. This helps establish a personal/emotional connection with the viewer, who is most likely used to plain/boring copy buttons they encounter.

Calltoaction34 in The Secrets Behind Great Call To Action Buttons

Podio
Podio’s call to action buttons are understated, but work well with the page design. By staying small and sleek they support the quietly professional brand of the website. There is a visual hierarchy established by the colors of each button, whereby the ‘get started for free’ button is given more precedence than the ‘find out more’ button. Clearly the brighter button is encouraging users to sign up, as the primary call to action on the page.

Calltoaction35 in The Secrets Behind Great Call To Action Buttons

FanExtra
FanExtra uses a large call to action button that has adopted some of the graphical elements of a banner to help draw plenty of attention. The button includes a professional icon design, as well as copy that clearly states what is offered by signing up. The ‘sign up today!’ text is styled bright yellow in order to stand out the most.

Calltoaction36 in The Secrets Behind Great Call To Action Buttons

Assistly
Assistly uses a simple, elegant call to action button to encourage users to sign up for their service. The green button compliments the purple background well, yet the button stands out partly through use of a drop shadow effect.

Calltoaction37 in The Secrets Behind Great Call To Action Buttons

Hello Bar
Hello Bar has a great call to action button. The button is one of the most colorful elements on the page, and uses a bold outline/inner glow effect to stand out. The ‘signup now’ text uses a very bold font, which helps it have the impact of a headline or title area. This is a great example of subtle design aspects making a button more ‘clickable’. The very subtle texture used on the button design makes it feel more real/palpable and jumps out more to users.

Calltoaction38 in The Secrets Behind Great Call To Action Buttons

Open Public App
Open Public use maroon for highlights against a largely blue/gray web design. The bold maroon ‘DOWNLOAD’ button is really bold, and the white text provides a great contrast. The subtle drop shadow adds depth to this button.

Calltoaction39 in The Secrets Behind Great Call To Action Buttons

Janko at Warp Speed
Another great example of a layout with two call to action buttons and a clear visual hierarchy. The bolder ‘read my blog’ button is clearly given more precedence than ‘view my work’. Both buttons are enticing though. Whilst they fit with the subdued color-scheme of the website the arrows help draw attention, and the large amount of padding given to the buttons helps them stand out against a plain backdrop.

Calltoaction40 in The Secrets Behind Great Call To Action Buttons

(rb)

June 11 2010

12:00

Calls to action

I am hard pressed to think of a type of web site that doesn’t need a call to action of some sort. As such, this collection of call to action buttons should be very useful.

http://www.webanddesigners.com/35-creative-call-to-action-buttons-for-inspiration

May 10 2010

10:00

Case Study: Call to Action in Web Design Usability

I’ve recently been working on a new website for a very large organization. The organization is made up of numerous policy teams who are all tasked with keeping different topics of interest up to date. The one downfall of this is that each policy team considers their content to be the most important. This has led to every new section being given to us with the instruction of “making it more prominent”.

We keep informing them every time we make something ‘more prominent’ we are taking prominence from the previously highlighted sections, effectively making nothing stand out. While researching the topic, to formulate an evidence based repost for our client, I discovered numerous reasons why it’s essential to distil your calls to action down to only the core outcomes you want from your audience.

Look at me!

Be wary of causing choice paralysis

“…we think, if we provide (users) with 200 brands of peanut butter, they are more likely to find a brand that suits their taste. Schwatz cites surveys done in supermarkets that showed the reverse. When customers were presented with a huge selection of brands of a certain item, fewer customers bought the item than when fewer brands were displayed.”

Christopher Heng

Choice paralysis occurs when users are supplied with too many similar choices. The abundance of choice leaves consumers confused as to which option to take. They end up not making a choice at all, in fear of making the wrong decision.

Your calls to action should have clearly distinct outcomes

“…it is not so much the number of actions as the distinctiveness of each.”

Paul Boag

If you need to provide your users with more than one call to action on a page, try to ensure that your users understand the difference between them. For example, having one call to action labeled ‘Sign-up’ and another labeled ‘Register’ would make it very difficult for any users to decipher which option they should take. If both calls to action seem to lead to the same outcome the likelihood of confusion increases.

We don’t read pages, we scan them

“One of the very well-documented facts about Web use is that people tend to spend very little time reading most Web pages. Instead, we scan (or skim) them, looking for words or phrases that catch our eye.

Steve Krug (Don’t make me think)

If users read everything on a Web page in the order they are displayed, numerous calls to action wouldn’t be as much of a problem. The individual would read the supporting paragraph, decide they want to read more about that and hit the corresponding link.

However, as Steve Krug describes, “we scan (or skim) them, looking for words or phrases that catch our eye”, which means it is unlikely that your users are going to read the accompanying paragraphs and will instead choose where to go next by the text within the call to action. The more call to actions they have to scan through, the higher the chances they will choose the wrong one.

There are only so many ways to make something stand out

Every time our client asks us to make something ‘stand out’ on a page they don’t seem to grasp our warnings that this will dilute previous calls to action. I think the reason for this is because they are used to seeing the page in its previous state and therefore have become desensitized to the previous calls to action. So when we add another one this stands out, to them, far more than any others.

However, a new viewer of that page has no previous experience with it and therefore everything is new to them and therefore fighting for their attention.

There are only a few different design techniques that can be used to make something stand out; contrast, white space, size, positioning etc. With this in mind, when you have numerous calls to action on a page it is very unlikely that any of them will stand out more than others.

More choice leads to greater dismay because expectations are raised

“When people have more choices, they expect more, because they expect that they will be able to choose the exact item that meets their needs perfectly.”

Christopher Heng

Our client’s homepage consists of a number of pods, with each pod representing a different segment of their target audience. We tried to create broad pods, to ensure that everyone who visits the site instantly notices a section that could potentially be for them. However, our client wanted to present some very specific roles along with our broader suggestions.

This presented the problem that a visitor to the site could see these more specific options and believe that there would be a specific role for them, thus raising their expectations. When they discover that their specific area hasn’t been represented, they could wrongly decide that this site doesn’t have what they are looking for.

However, if we were able to keep the number of pods to a minimum, users would be more likely to want to explore a section that could possibly relate to them.

To conclude

When thinking about the possible calls to action on your site, be sure to ask yourself exactly why every call to action needs to be there. More calls to action lead to a more complicated interface and could possibly lead to more dissatisfaction.

Try to highlight only the most important actions on your site, otherwise you could risk none of your calls to action being noticed. Finally, I thought I’d leave you with an excellent example of a focused call to action.

The guys at 280 slides have decided they want their users to try a demo of their product and so this is the only call to action on the homepage. They could easily have given numerous options to their users increasing the cognitive load, however they have done a great job of focusing their audience on the task they think is most important to them.

280 Slides screenshot

Related reading

The Paralysis of Choice and How to Improve Sales and Customer Satisfaction

Call to Action Buttons: Examples and Best Practices

10 techniques for an effective ‘call to action’

April 13 2010

12:00

A call to action

The call to action button is a near cousin of the more basic button.  In this case the call to action not only needs to be clicked, but it offers up a more compelling reason to do so. This collection of samples shows that a number of motivational factors can be leveraged when creating such design elements.

http://www.hongkiat.com/blog/call-to-action-buttons-guidelines-best-practices-and-examples/

April 05 2010

12:00

A call to action!

One of the most critical elements of a commercially oriented site is the call to action. What is it you want your users to do? In my book the real answer to optimizing this is a/b testing. Take a good stab at it, and then try variations. Chances are not good you will get it right the first time, so don’t kill yourself. Just get started and tweak as you go.  (btw, I wish the author of this post I am linking to would have not stretched and compressed his images in goofy ways. Almost made me not want to link to it, but in the end it is a pretty good set).

http://www.bestdesigntuts.com/40-effective-call-to-action-buttons/

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...