CTAs are important because without them you’re leaving it up to users to find things they need (or worse, leave your website). Your aim should always be to reduce the cognitive load on users by making things simple and easy to execute. A successful CTA should be succinct, well-designed and accessible to users with a wide range of experience and abilities in order to maximize the amount of people who can see and interact with them.

Now that we have a bit of a foundation, let’s dive into ways you can maximize the effectiveness of your call-to-action buttons.

CTA Text

The text for your CTA button is just as important (if not more) than how it looks. Some users may be more likely to engage with a button that includes actionable text such as “Now” or “Today” as it generates a subtle sense of urgency.

Letter case in buttons

Another thing to take into consideration is the letter casing of your call-to-action buttons. In most cases (pun intended), you’ll want to decide on a single format (all-caps, lowercase, sentence case, etc.) for consistency. This should also align with your brand voice. Using all capital letters (aka, all-caps) may be too aggressive for a dog-boarding website but could fit in with a more serious-toned brand or more urgent CTA (like donations for a nonprofit).

The case of your button text should also influence the text itself; for example, using actionable phrases like “SIGN UP NOW” combined with all-caps could be perceived as too forceful. If you do choose to go with all-caps text, you should also make sure the CSS styles for the text are optimized. Take the following example where we’ve added some letter spacing and reduced the overall font size to make the button feel more professional and less forceful.

Test, adjust, repeat

Just because you’ve written a seemingly effective and concise CTA doesn’t mean your work is done, either. There are lots of case studies of high-profile websites that tweak their CTA messaging based on data such as analytics, user testing, and heatmaps. Former Mailchimp designer, Aarron Walter, discussed in his book, Designing for Emotion, how Mailchimp saw an increase in signups by simply changing the button text in their header from “Sign Up” to “Sign Up Free.”

Accessibility

When designing your call-to-action buttons, you should also be considering the various accessibility issues involved. In terms of the actual code of buttons, there are a lot of things to consider such as aria-labels and other functionality for users navigating your site via keyboards, screen readers or other forms of assistive technology. We’ll stick to design considerations for this blog post.

The first thing I check when designing buttons is color contrast. There are free tools like the WCAG Color Contrast checker that allow you to plug in your hex code values to check the contrast. Poor contrast means that users with less-than-perfect vision (a lot of people), color-blindness (about 8% of the male population in the US), or other forms of impairment, will have a hard time reading your button text. This can be tough when your main brand color is on the brighter end of the color spectrum (such as yellow, orange, red, green, etc.). You should always aim for at least passing AA contrast. You can see the buttons so far in this article pass for everything except normal-sized text for AAA contrast. If we want to shoot for AAA, it’s as easy as selecting a slightly darker button color or changing the text color.

This was a pretty easy example, but what if you have a tough brand color such as yellow? Let’s look at some ways of working within that constraint. We can see that out of the gate, this yellow fails all the checks for color contrast, but fear not; we can apply some creativity and have this passing contrast checks in no time!

Here are four potential ways of using the yellow brand color from before but in contrast-friendly ways. We can use an outline (or ghost) button style with the brand color as the border, text and icon combination, or a combination of both. You can get creative and come up with even more variations.

Design

Lastly, let’s look at some overall design considerations for your call-to-action buttons.

Padding

One of the most common mistakes I see with CTA buttons is simply not having enough spacing (or padding) for the button. This leaves the text feeling cramped and awkward, while also making it harder for users to click or tap due to the small amount of real estate. Not to mention, it makes your CTA seem less professional or legitimate. Aside from these items, the button on the right just looks more “clickable” than the other button, wouldn’t you agree?

Spacing

The spacing and proximity of your CTAs to other elements on the page is incredibly important in drawing attention to them. Make sure that your CTA has plenty of breathing room (white space) to increase engagement and so it doesn’t get lost in a sea of elements vying for attention. You should also take care not to overload any given CTA section with too much content. One sure-fire way to turn off users is overloading them with text. Sometimes, communicating an idea with a single, snappy heading and nice image will draw far more attention than over-describing an idea with paragraphs of text.

Multiple CTAs

There will be times when you will want to display a primary and secondary CTA in the same component. When you need multiple CTAs so close together, it’s important to consider the spacing rules we already covered. You’ll also want to make sure that you’re giving visual priority to your primary CTA, as opposed to giving equal visual weight to both (i.e. you need to make it clear to the user that one is more important).

Closing

Whether you’re running an enterprise-level corporate website, a large-scale media site, or a consumer goods website that helps people track down their favorite products, the design decisions you make in regards to your CTA buttons can either convert your visitors into loyal customers or provide no impact at all. Use these tips and guidance to ensure you’re making the right choices for your CTA buttons.

Ready to improve the CTA buttons of your website? Talk with our team. We’d love to strengthen the design elements of your call to actions and improve your conversion rates.

The post 3 Design Tips for Call-to-Action Buttons appeared first on WebDevStudios.

First, identify these three things.

• Brand. Who are you? Are you a media website offering loads of information and education? Are you a nonprofit offering assistance to those in need? Are you a retailer selling a product? Define your brand’s identity and move forward from there.
• Call to action. What do you want your visitors to do? Do you want them to read, give you their email address, register for a webinar, donate, or make a purchase? Identify what you want your website visitors to do when they’re on your website, and you’ll have a better understanding as to how to organize your content.
• Target audience. Who is your website for? Your audience may be multiple types. For example, a nonprofit website’s audience will more than likely be people in need of their services, donors, sponsors, volunteers, board members, and foundations. Knowing the people who make up your audience will give you insight. Look at your website through their eyes and imagine how they would like to see content displayed for their personal UX.

Take a look at AllClear ID. Not only is it plain to see what solutions the company provides, but the call to action is straightforward with evident Learn More buttons. Plus, because AllClear ID services both consumers and businesses, there are obvious pathways for each audience.

These pages should be on every website.

No matter your business, service, or purpose of your website, it should go without saying that there are certain pages that every website should have. These pages will set the stage for how the rest of your content should be organized. Consider these pages as the foundation of your site and your additional content.

• Home. Your home page is the first thing people see when they visit your URL (i.e., www.yourdomainname.com). This page should be a brief overview of your brand identity—who you are and what you do.
• About. This page allows for more storytelling. It’s there that you can go into more details about the history, mission, and purpose of your organization and website.
• Contact. There are actually websites that exist without any contact information listed anywhere. Hopefully, these forgetful website owners are your competitors. One of the easiest ways to nab a sale or achieve whatever goal your website has set is to include a contact page on your website. It should include any and all ways that a visitor (potential client) can get a hold of you: email, phone number, postal address, physical address (if you have a brick-and-mortar location), and a contact form on that page that a user can easily fill out and submit.
• Blog. Your blog works as your news hub and allows for the opportunity to continually add fresh, new content to your website. Search engines love that. One of the easiest ways to boost your SEO is to blog regularly.

Check out Partnership for Drugfree Kids. The nonprofit has a clearly marked About Us page and Parent Blog. The group’s contact page is titled Get Help & Support, which works as a call to action and supports its mission.

Landing pages are essential to organizing website content.

Now that you’ve organized content based on Home, About, Contact, and Blog, let’s talk landing pages. The landing pages you create set the organizational structure for the rest of your content. Our Creative Lead, Cameron Campbell, wrote about creating landing pages that work, and in that blog post he says:

Website landing pages are important. They are a sales opportunity. Think of them as windows for conversion—your chance to influence a website visitor to become a customer. That’s why landing pages should not be taken lightly or treated as an afterthought.

Each service you provide, each product you sell, each subject matter you report on (if you’re a media site), should have its own landing page. Think of your website content like the products available in a large hardware store. Tools, lighting, garden, and indoor plumbing each have their own aisle. And within each aisle, each type of product has its own spot.

So, while you would find wrenches, hammers, and drills all located on the aisle for tools, hammers would be grouped separately from wrenches and drills. Grouping and organizing your content in the same sort of manner makes the UX of your website friendlier and more pleasant. If you walked into a large hardware store and found hammers in the aisle for indoor plumbing and drills located in the garden section, wouldn’t you get frustrated and leave the store? You’d probably never return, too. When a customer encounters a bad experience, they feel betrayed and as though their time has been wasted. Don’t do this to your website visitors. The best way to make them feel welcomed (and encourage them to return) is to help them consume your content in a simple, easy-to-navigate manner.

We recently had the pleasure of redesigning the corporate website for Campbell’s. The experience of working with this client was, of course, “mmm mmm good.” But aside from building a tasty relationship with a beloved brand, we have been greatly impressed with how the company organizes content and utilizes landing pages. Visit the Campbell’s corporate site, click around to explore, and see for yourself.

Make headway with headers.

In the hardware store example, “tools” would be the header. It’s the main grouping or category for a myriad of subcategories that fall beneath it. For a media site, “current events” would be a typical header. On a nonprofit website, “volunteer opportunities” is a usual header. Headers act as headlines and allow your website visitors to instantly find the information they seek in the most obvious manner. When it comes to website UX, making things obvious is a good thing.

We love the way our client Uwishunu organized their content with headers, like Latest Posts, Popular, By Neighborhood, and Roundups. What headers could you use to keep your content neat and easy to consume for your website visitors?

Avoid these things.

• Cluttered navigation bar. The navigation bar is the main navigational menu usually located at the top of your website that helps visitors move from one page to another. Now that you’re inspired to organize your content neatly, don’t get so caught up in the excitement that you dump the entire kitchen sink there. Use your navigation bar to display your main product, service, or topic categories (i.e., tools), then rely on subcategories (i.e., hammers) to be displayed in a dropdown menu for each one.
• Long drop down menus. But don’t allow your dropdown menus to be so long that they match the length of your web page. Remember, you’re trying to create a pleasant UX for your visitor. Consider consolidating subcategories and relying on “more” in order to control the length of your dropdown.

Let’s take a look at Central Market. As the biggest grocery store chain in Texas, the brand offers a plethora of products. Imagine if the company listed each and every department or subcategory within their navigation bar or as a dropdown menu? Instead, Central Market offers one shopping category: Departments. Then the customer is offered 15 subcategories (i.e., Frozen, Product, Housewares), which are conveniently listed in a two-column dropdown, making it easy to select the correct virtual aisle and shop accordingly.

Website content that is organized shows that you care about the visitor experience on your site and value their time, which will encourage them to return. You may even instill loyalty due to your thoughtfulness. So, view your site through the eyes of your customers. What can you improve? Which content needs clearer pathways? If you need assistance with organizing website content, contact us. We would love to help by providing an audit and making recommendations.

The post Tips for Organizing Website Content appeared first on WebDevStudios.

Visual Simplicity

Landing pages should be as clean and minimalistic as possible. Think Swiss design. The use of minimalism and white space allows us to focus 90% of the visual attention on the call to action (CTA), which is the lifeblood of the landing page!

When you are creating landing pages, remember that your calls to action should be very bold and strong. An overall simplicity can create natural contrast by helping CTAs stand out from the content and sales material. Take a look at these examples, and it’s pretty clear that a more minimalistic approach helps you focus on the messaging and CTA and promotes action more effectively.

Eye-catching and Pithy Content

Landing pages are not the appropriate setting for a blog-style amount of content. You’ll lose the users attention quickly if you don’t engage them. Content should be short and to the point, with headlines that are catchy and draw attention to the main CTAs. For example, look at the difference between these two examples; which catches your attention more?

Call to Action Text

The actual call to action link or button text should have just as much thought as the heading copy. For example, you may be able to significantly increase your conversion numbers simply by changing your CTA copy from “Sign Up” to Sign Up Free.” As you go through the process of creating landing pages, consider the words you’re using. If your button has drab copy such as “Learn More,” you’re almost certainly missing out on conversions. Opt for something more persuasive that also indicates a small amount of urgency. It should encourage action from the visitor by using words like “Get Started Now” and “Start Exploring.”

Sharp, Beautiful Media

Just like successful songs need a catchy hook to get stuck in your head, your landing page should have some type of graphic to help hook the user visually. This can be a beautiful photo (custom photography is a million times more effective over stock photos, by the way), a well-executed product shot, or a custom graphic or illustration.

It’s important to determine which is appropriate for your brand and the goals of the landing page. For example, if your target audience is hip 24-year-olds in New York City, a cool abstract illustration or graphic will work much better than a landing page targeted to 45-year-old blue collar workers, who would probably benefit more from a clean product shot or photo.

Even if you don’t have a physical product, you can always hire a designer to mock your product up into a more real-world design to help connect with users. For example, this product shot is for an eBook, but because it’s mocked-up in the form of a physical book, it builds trust that it’s a legit product and helps catch the visitor’s eye.

Use Testimonials and Real People

Even if you only have one or two, featuring real words from real people can help create a more personal connection with your users. It’s been proven time and time again that showing real people on product and landing pages helps to increase conversion numbers. Highrise decluttered their landing page, and by adding prominent testimonials and pictures of real users, they saw their conversion rates skyrocket.

Many, many websites overlook the essential elements of landing pages. Just by following my recommendations, you can easily stay ahead of the competition, appeal to your visitors, and increase your conversion rates. Your website exists to make your business a success. Guarantee that goal by creating landing pages that work.

The post 5 Tips for Creating Landing Pages That Work appeared first on WebDevStudios.