How to make that button pop (one tiny design change might make all the difference) (#2 in a series)

by Craig McBreen · 20 comments · Design


Regardless of your mission here, you want to attract eyeballs.

But many people don’t know about simple rules of design that if used correctly, convert.

One of my favorite rules is more about “cleaning up” and making choices easier.

And you want to make it easy for your readers, right?

Uh-huh. Same here.

So, today I would like to focus on something called the “figure-ground” principle.

The wee elements that compose your site are often seen as one of two things: Figure or Ground.

And we mere mortals have a tendency to pull a figure from it’s background. Elements not seen as figures become ground. Simple, right?

In web design ground can be a background element or white spaceAnd your goal should be to create a very clear relationship between the figure and the ground.

Yes, this stuff is anything but rocket science, but I do know that little design tweaks add up and make all the difference in the world.

So, if you apply this one principal you just might do a few cartwheels … because you took another baby step to improve your presence on the social web. But let’s get more into the nitty gritty here, shall we?

Righto then, it’s time to read on.

Think about someone dropping into your fine site. They immediately have to make sense of it all and decide what is figure and what is ground.

You obviously want your “figures” to stand out. Ya?

Now think about this relationship, your site and something as super-duper basic as a submit button.

Take a look at this

Sure it stands out, but does it stand out enough?

You want to invite your readers to click on this itty bitty thing, right? Well just a few subtle touches make that more of a possibility.

And you can implement this little practice right away.

The first button blends in, but orange “sign-up” invites the reader to click. Subtle use of a radius curve, color gradients, bright orange, highlights, and a distinction between elements make this all very clear and we immediately know what part is figure and what part is ground.

In fact, Adam Toporek’s site does a lot of things right with the feature box at the very top.

You want to make it easy for the fine peeps reading your site to do something.

You also want to use subtle design cues to make these elements work for you.

I know, so “design 101,” but this does work and I do see more than a few missteps out there.

You’re saying, Hey Craig, this is Super-Duper Simple. Well, sometimes people miss the basics and little changes done right sure add up.

To go a little further, look at this site and check out the sign-up form on the left.

The form uses a combination of color, gradient and shadow to highlight the “I’m Serious” submit button.

You can also see the subtle use of direction, taking advantage of the law of continuity. The dark area is clearly highlighted and the oh, so subtle pointer directs the eye to the submit button. Clear direction, a defined hierarchy and effective use of figure ground and the law of continuity.

Now go back and look at a few graphic elements on your page.

If you have a clear idea what you want people to do on your site, but haven’t incorporated this law on something as basic as a button, why not get busy right about now?

Oh, and this is #2 in a series, so check out number 1 and stay tuned, or why not consider subscribing?

This place is going to be more about helping you and your business grow.

How have you incorporated this on your site?

Have you used this law in your design?

 

Sign-up Today to Get Your FREE eBook.

I take your privacy very seriously

{ 20 comments… read them below or add one }

Adam January 24, 2013 at 12:17 pm

Well, you know I love me some orange! :)

Loving this series Craig. As a non-designer, I’ve always tried to learn and understand the basics of design, because design is what facilitates readability and usability. Understanding basic principles like white space, contrast, or making buttons pop can make not just web sites but business communication like memos and power point docs work better as well.

I have a great example of someone who could have used these principles a few weeks ago. They sent me a price list that was a completely full page of bolded, ALL CAPS, serif text. It was unreadable. Fortunately, I know their work and them personally, so they’re getting the business anyway, but if they had been bidding against competitors with professionally made materials, they would have probably not won the job.
Adam recently posted..4 Customer Service Trends for 2013My Profile

Reply

Craig McBreen January 25, 2013 at 2:46 am

Hey Adam,

You Sir, rock the orange ;)

Thanks, and great point about other forms of communication like memos and power point docs. It’s always disheartening when someone gives a great talk, but the accompanying graphics (it whatever form) don’t jibe with the presentation or just don’t look good.

Akkkk … ALL CAPS! Did you feel like they were yelling at you? ;)

Thanks for stopping in.

Reply

Kaarina Dillabough January 24, 2013 at 1:40 pm

Great tips as always. Cheers! Kaarina
Kaarina Dillabough recently posted..Set the bar high(er) to achieve goalsMy Profile

Reply

Craig McBreen January 25, 2013 at 2:46 am

Hi Kaarina,

Thank you and cheers right back!

Reply

Laura Click January 24, 2013 at 3:43 pm

So much truth to this, Craig! One of the mistakes I often see businesses make is they try to cram too much onto the page. They think everything is important and therefore everything has visual prominence. But, when you do that, it’s really hard for the visitor to choose where to go or what to do.

I think the best websites give readers a clear path to action. And, often the best way to to that is to LIMIT choices and put the emphasis on the one thing you want the visitor to do on each page. Doing that will definitely help with conversions.
Laura Click recently posted..How to Manage Your Social Presence in One Hour a DayMy Profile

Reply

Craig McBreen January 25, 2013 at 2:50 am

Hi Laura,

Cramming too much in is definitely the most common mistake. You know the drill and it’s our job to help the client and whittle this stuff down.

Yes, limiting choices is the rule to follow when it comes to conversions. Clean, functional design is the way to go.

Appreciate you stopping in, Laura!

Reply

Andrew Stark January 24, 2013 at 10:50 pm

Hi Craig

I just recently made the mistake of upgrading my site to thesis v2 and now I’m learning a lot about design due to the fact I have almost destroyed my site.

The learning curve for thesis v2 is very steep, and should be done on a safe environment, but once I master it I will be able to add in a bold sign up form as part of my header, and leave plenty of suitable “white space”.

I want people to read my content not be faced with so many options they shut down the browser having done nothing.

Andrew
Andrew Stark recently posted..The Power Of TenMy Profile

Reply

Craig McBreen January 25, 2013 at 2:58 am

Hey Andrew,

Boy Thesis 2.0 is getting soundly thrashed, isn’t it? I’ve stuck with version 1.8 for this very reason. And with my redesign I just don’t know if I’m going to go the 2.0 route or try another framework. Genesis might be calling.

With all that being said, I’ve heard that once you learn it, it’s a beauty, and you can do a ton. But then there’s all the pain before that, right?

Do they finally have proper documentation?

Sorry to hear about your experience, but after the research I’ve done, I certainly understand you are not alone.

Thanks for the visit.

Reply

Ralph January 24, 2013 at 11:22 pm

Great tip. I am cataloging this stuff for my eventual redesign. Thanks a ton bud.
Ralph recently posted..If you have a job then your focus is on the wrong things.My Profile

Reply

Craig McBreen January 25, 2013 at 2:59 am

Hi Ralph,

Cataloging, huh? Man, at least someone is saving this stuff ;) Appreciate that and do hope these pieces help in some way.

Reply

Mary Stephenson January 24, 2013 at 11:55 pm

Hi Craig

Some great hints to what we should be doing. Went for some bolder colors in my Aweber sign up widgets on my different sites. They have become more noticeable, but still have much tweaking to do.

We get a theme and it is hard to give it up. Maybe we should sometimes redesign, but it is not always easy to go back and redo hundreds of pages if you change a background color. Got to think about that for awhile, may pick a site that doesn’t have so much data on it.

Orange I hear is very eye catching, but the color is not something I like, but will probably give it a try somewhere. Like the “I’m Serious” button, maybe I can think of something better than “submit” or ” access”.

Mary
Mary Stephenson recently posted..Conformity or Do You Stand Alone?My Profile

Reply

Craig McBreen January 25, 2013 at 3:05 am

Hi Mary,

Well, a blog is certainly a work-in-progress. And often, those slow and incremental changes are the way to go. Not sure if you’ve heard of it, but there is a nice product called Opt-in Skin you might want to check out.

So true regarding the framework you choose. Look at Andrew above. He stuck with his and the upgrade almost did in his site.

Orange and red are very good colors, but it can really be any color, as long as it’s applied correctly, and you strategically place it only where you want people to click.

Reply

Adrienne January 25, 2013 at 5:32 pm

You are so right Craig and I need to do some improvements on my blog. I actually had someone who was suppose to create an eye catching opt-in box for me at the top, the side and below my posts but he vanished off the face of the earth. Just never took the time to find anyone else I guess.

Great tips here and very important too.

Thanks and enjoy your weekend.

~Adrienne
Adrienne recently posted..My Holy Water Came Too LateMy Profile

Reply

Craig McBreen January 25, 2013 at 5:48 pm

Hi Adrienne,

Have you tried Opt-in Skin? I’m actually going to spend a bit more time looking around for options here. I know enough coding to be dangerous ;) and I’m not at the point where I am going to hire a developer, for my site at least.

Thanks and you have a great one too! :)

Reply

Adrienne January 25, 2013 at 6:50 pm

I have tried them and I don’t like the designs they offer and I don’t like the ad at the bottom either. Like you, I need to look around a bit more but I’m not at the point I want to hire someone to create one for me. I want to be able to change it up when I want.

Good luck to you too!
Adrienne recently posted..My Holy Water Came Too LateMy Profile

Reply

Craig McBreen January 25, 2013 at 8:43 pm

Not crazy about what I’ve seen either, really. I like to customize. Let me know who you find, I’m always looking :)

Reply

Carolyn January 25, 2013 at 6:13 pm

Hi Craig, Well, this might be Design 101 but I never took that class so I really appreciate this advice. Your illustrations really show the impact that an innovative design can have. I need to take another look at my buttons!

Thanks so much for sharing your wisdom with everyone!
Carolyn recently posted..Cool Currency Apps for the Blind and Visually ImpairedMy Profile

Reply

Craig McBreen January 25, 2013 at 8:46 pm

Hi Carolyn,

Thanks, Ma’am and glad you like it! With these posts I try to provide actual examples. You’re welcome and have a great weekend.

Congrats on your two year anniversary as well!

Reply

Sheila Bergquist January 28, 2013 at 8:05 am

Such a simple tip, but an important one. I love this on design, because I am still trying to learn that angle of it. Thanks!
Sheila Bergquist recently posted..The View From Down Here: What Your Cat SeesMy Profile

Reply

Craig McBreen January 29, 2013 at 3:33 am

Hi Sheila,

Yes, basic stuff for sure, but this little things to indeed add up. Glad you enjoyed and thanks for stopping in!

Reply

Leave a Comment

CommentLuv badge

Previous post:

Next post: