How to Get People to Click on Your Buttons: A Crash Course

/ Zach Heller
click-here-button.jpg

Buttons are everywhere online, having replaced text links in most places as new technology has shifted consumers from clicking our mice to tapping our fingers.

Buttons are the go-to link. And they are critical for marketers to get right.

Why? Because buttons act as your calls to action and navigation. They are the tools that people use to get where they want to go, as well as the tools we use to get people where we want them to go.

A button exists to be clicked. But not all buttons will be clicked with the same frequency. Which is why we created this crash course on buttons. By the time you finish reading this, you will be prepared to create better buttons (buttons that get more clicks).

There are five critical elements of every button:

  1. Color

  2. Size

  3. Text

  4. Design

  5. Action

Button Color

When it comes to choosing a color for your buttons, there is no right answer. However, there are many wrong answers.

Many designers choose the color in one of two ways: they either stick with one of their brand colors or they choose something that stands out as unique. Both are valid options, as the color of a button interacts with the color of the rest of the page, and should call attention to itself as a part of the larger design.

But the research says there are some colors that are just more likely to get clicked than others. Bright, bold colors are more likely to draw a user’s attention. Oranges, blues and greens tend get clicked on the most, in that order.

Choose a color that stands out from the rest of the design, and one that makes reading the text on your button simple, and you can’t go wrong.

Button Size

A button that is too small is too hard to hit with a finger. A button that is too big looks ridiculous as it takes up such a large portion of one’s screen.

Believe it or not, there is a ‘correct’ button size. Here we look to Apple, who recommends a minimum button size of 44 pixels wide by 44 pixels tall. The key here is minimum. Not every button will be a perfect square, nor does every design call for the same size button.

But in designing your buttons, you will want to stick to the 44-pixel minimum on the smallest side, otherwise you will be left with buttons that are difficult to tap.

Button Text

The most common button text is “Click Here”. It’s also the worst.

Studies continually show that more descriptive text works better than generic actions. Instead of “Click Here”, yours might say “Learn More”, or “Get Started”. It might say “Claim Offer” on a sales page. Or “View Now” on a product description.

Use the text to explain to the user what they are going to get if they click, rather than simply using it as a way of telling them what you’d like them to do.

Button Design

Your buttons need to look like buttons. That might sound obvious, yet too many websites include buttons that look like flat squares. If you can’t tell the difference, you are in trouble.

There are a number of ways to make buttons look more like buttons. Many designers have taken to rounding corners – even if just slightly. Others opt for pill-style buttons, which take rounded corners to the extreme, creating an oval shape.

One can also use shading to ‘elevate’ your button, setting it apart from other elements on the page.

A final way to prove to users that your button is a button is to identify it as clickable. And you can do this with actions.

Button Action

A button action is a visual clue that a button is clickable. This is often done with a hover effect. A button may change color – becoming slightly darker or lighter – when a user hovers over it. It might shift position ever so slightly – growing larger or smaller – with bolder text.

And when clicked, the button can be given the action that looks like it is being pressed, just like one would expect with a button in the physical world.

/ Zach Heller/ Comment
Design
button design, button color, web design

Zach Heller

90% of Your Emails Are Being Opened on a Phone

/ Zach Heller

The latest email stats are in, and the shift to mobile has only continued. The latest analyses show that 59% of all emails are opened on a mobile device. This number has been steadily rising over the last decade, up from just 25% in 2012. And it includes people who are using email for work, which is more often done on a desktop or laptop computer.

So if you want to know how many of your consumers are opening up your marketing emails on their phones, is getting closer and closer to all of them. One company even reports that as many as 90% of all their email opens are happening on phones.

Think about that for a second. And before we determine what to do about it, consider your thinking if we knew the reverse. If we knew that only 10% of emails were being opened on phone, and that number was only likely to decrease, would we even give mobile optimizations a second thought?

No. And that’s the point. Desktop and laptop email readers will likely never drop to 0%. But there is never going to be a reverse of the current trend. More and more email users will be on mobile devices.

So why are you still designing emails for desktop clients? Why do you care so much what your emails look like on a desktop?

You shouldn’t. Your sole focus when thinking about emails, writing emails, and designing emails to be used in marketing should be – how is this going to feel/look/read on a phone?

Luckily, we find ourselves in the year 2019. There are established best practices for mobile emails – to ensure they load correctly, fit the screen, are easy to read, with buttons easy to click on.

Why aren’t you familiar with them yet? Why isn’t your email team using them?

Your competitors are.

When it comes to email, it’s no longer mobile-first. It’s mobile-only. From today forward, when you think “email”, think “mobile”. We shouldn’t even have to say it. The “mobile” should be implied.

Design for Idiots

/ Zach Heller

Website design is not easy. And that fact in itself presents an opportunity. Because you can choose to be better than your competition. And many companies today are finally prioritizing user experience. And design is a major part of experience.

There are many different theories on what makes “good design”. But let me propose one to you that is simple, and in my experience, quite effective.

Design for Idiots

In other words, use the design of your website to guide someone through its use.

Assume that the person landing on your site has no idea who you are, what you do, or how they should interact with your website. Now, this does not make them an idiot, of course. But we are using that term as a stand-in for anyone who does not have the same domain expertise or brand familiarity as you do.

How to Design for Idiots:

1. Keep it simple

The quickest way to design something that fails the effectiveness test is to make it overly complicated. New designers like to show off their design skills and often over-design a page or a site. They add a bunch of graphical elements, and moving parts, using fancy fonts and lots of color.

It might feel to them like good design, because they used a lot of different things that they had learned in design school. But good design is not the sum of all techniques, it is identifying the one or two techniques that will have the most impact. Quality, not quantity.

One or two fonts. One or two colors. A prominent hero image. That is often all you need.

2. Avoid clutter

This may fall under the bucket above, but I believe it deserves its own call out. And that is because clutter kills good design.

White space is your friend. And that’s coming from a marketer (not a designer) who used to try to fill every square inch of white space with copy and buttons.

You know it already. The simplest websites to use are the ones that are clean. They only use color and imagery to assist the visitor, not because they can.

Marie Kondo asks us to declutter our homes by taking each possession and asking whether or not it sparks joy. If they answer is no, she says, throw it out. Apply that same critical thinking to your website. For each element, does it improve the user experience? If the answer is no, it needs to be removed.

3. Easy access to help

For many designers, navigation may not feel immediately like a design element. But of course it helps a visitor find what she is looking for. So navigation is a critical design feature.

An easy-to-use navigation is a tool that your visitors can use to accomplish their goal. And when they get interrupted, or can’t figure out what to do next, we want to give them options.

A phone number (which will be answered), a live chat option, FAQs, a contact form – these are all things you can include so that your visitors don’t feel lost and ignored. Because if they do, you will lose them.

4. Mobile first

Good design accounts for the fact that most of your visitors are likely coming to your website from a mobile device. Browsing behavior is different for mobile users vs desktop users. And any time you design a page, you have to consider first what the mobile experience will be like.

If anything, this only reinforces the items above. The site needs to be simple and easy to navigate. Clickable items must be large enough to fit a thumb. Font needs to be large enough that mobile visitors don’t need to squint or pinch the screen. Try to avoid drop downs or other elements that don’t translate will to mobile devices.

5. Clear calls to action

Your calls to action are not just buttons for people to click on. They are like the road signs for your website. They tell people where to go, and what to expect.

Actionable items are critical elements of any design. But one of the biggest mistakes we often make is trying to be clever or subtle with them. We hide buttons within images or use language that does not clearly state what they will be used for.

If you want someone to use your website without confusion, clearly identifiable calls to action are a must-have.

/ Zach Heller/ Comment
Design
web design, design tips, usability,

Zach Heller

What’s the Deal with White Space?

/ Zach Heller
askus.png

If you have participated in any conversations about design, you’ve likely encountered the term white space. Likelier still, you’ve heard a designer talk about white space in a positive way. And if you are like me, you have heard the non-designers in the room talk about white space in a completely different way, viewing it as ample opportunity to add more text, more imagery, more buttons.

White space is the illusive design element that doesn’t feel like a design element. It exists in the absence of everything else. It is a part of the design, and yet it just feels like empty space the designer forgot to use.

Sometimes these conversations get heated, and turn ugly. Designers don’t like explaining to marketers that white space is a good thing, that white space can help emphasize the elements of the design that you want to emphasize. Marketers think designers are just saying that, like it’s some excuse not to add more to the page/poster/flyer, etc.

So who is right? Is white space a good thing or not? Let’s settle the debate once and for all.

I don’t like to admit this, but in this case, the designer is right. But…(we’ll get back to the “but” later)

Why White Space Matters

White space, which is actually a common practice in a variety of arts, actually derives its name from graphic design, when everything used to be printed on white paper. But actually, white space doesn’t have to be white. It can be any color.

White space is simply blank space in and around the design. And it serves as a background, a buffer zone, a separation of individual elements, calling attention to the things in the design that you want people to see when they look at it.

We all know what the absence of white space looks like when we see it. It’s the old coupon flyers that people carry around the grocery store, and the original homepage design on Amazon.com, and a million other things that are so cluttered they are tough to look at.

And that is why white space matters. Because it makes the design more pleasing to the eyes. It keeps things clean and directs the eye.

Good designers know how to use white space to their advantage. They know that when the rest of us look at something, we’re not thinking, “oh, what great use of white space”. But we like what we see, even if we don’t know why.

What About that “But”?

There’s always a “but”. And that’s because some designers fall in love with white space. Just because it is an important design element, doesn’t mean it should be overused. If you overuse anything, it becomes a problem.

In an effort to simplify, designers cut and cut and cut, until the message gets lost in an attempt to emphasize just one element at the expense of every other.

Just like anything else, designs should be tested and adjusted in the real world.

/ Zach Heller/ Comment
Design
web design, design theory, design elements, designers

Zach Heller

When You Emphasize Everything, You Emphasize Nothing

/ Zach Heller

This is a post about design. But it could just as easily be a post about copywriting, or pricing and offers, or marketing strategy on the whole. Because the concept is the same no matter what we talk about.

priority.jpg

But to really hone in on the message, let’s use an example. Let’s say that you are responsible for marketing at a company that sells doggie treats. Your boss/CEO/manager puts you in charge of a new campaign to launch the latest line of doggie treats.

“There’s a lot riding on this,” she says. “But I’m confident you can get the job done.”

You are working with your web team and your email team and your social team (or maybe that’s all one person, and maybe it’s you) to put together the initial announcements and offers, and to create the landing page on the site that you will drive interested dog owners to.

Your web designer might ask, “What is the most important element of this page?”

Several things enter your mind, and you start saying them aloud:

  • The name of the product
  • The special introductory offer
  • The “buy” button
  • The main product image
  • Our 5 star rating on Facebook

Notice the look of panic (or disgust) on your web designer’s face. She asked you what the most important element of the page is and you have already listed five different elements of the page.

And that’s the point – when you are creating a web page, or an email, or an ad, or anything else, everything can’t be the most important thing. We have to put the emphasis on one, maybe two things, and let the designers and copywriters do what they do best to highlight those things.

In your mind, you might say, “Well, those are all important.” What you mean is that they are all important to you. Or that you don’t know which ones are more important than the others.

But if everything is important, you end up emphasizing nothing. And then the prospective customer doesn’t know where to look or what to read.

By highlighting what’s important, you guide their thinking, and shuttle them through the purchase funnel.

To get into this new mindset, it helps to pay attention to how other companies emphasize certain things. Look at websites, and billboards, and marketing emails and ask yourself, “what is the most important thing here that the designer/marketer wants me to see?” The answer should be clear. It should jump out at you.

Then ask the same question of your own stuff. Do you notice a difference? How well are you guiding consumers toward those points of emphasis?