A Look into Registration Buttons in Web Design

Feb 3 2010 by Dibakar Jana | 28 Comments

Designing an informational/content-centered website (such as a portfolio or a blog) is much easier than designing a website where we have to deal with registered users. The target of websites that enable user accounts (such as Amazon.com or Gmail, for example) is to not only highlight their featured items and services, but to also convert visitors to signed-up users.

Sites with user registration want to grab every visitor who goes their website. They list their website in every popular search engine, use advertising in other websites, work with bloggers to help promote their products, enlist the help of usability experts and go through great lengths to get noticed.

All the effort is for a single desired action, which is user registration.

A Look into Registration Buttons in Web Design

Converting Visitors to Users

To convert a visitor to a registered user is not an easy process. The website’s interface must be well thought out and carefully planned to encourage users to register. Many websites employ carefully created usability tests—such as split tests, for example—to determine the optimal layout that gets the most user registrations.

They study their website analytics results vigilantly to find pages that convert visitors to users successfully, and web pages that don’t.

Here are some tips for enticing users to register to your site.

The registration button should be positioned near the main features/header area (usually at the top part of web layouts). The visitor shouldn’t have to search for the registration button when they first visit the site. The visitor shouldn’t have to scroll down to see the register button. Create an enticing and memorable call to action that asks visitors to register and try your services.

Display the top main features of the product/website/service in the homepage. When a visitor goes to a new and unfamiliar website, he/she wants a clear vision of what the website is about. It’s very important to create effective, high-impact, and powerful website headers to compliment your registration buttons.

Mention the benefits of registering on your website. What special features will the visitor get to justify the few seconds that they invest in registering and becoming a user? Highlight these benefits near your registration button so that when they read it, they have quick access to your registration form.

Looking at Some Registration Buttons

Let’s see some real-world examples of good registration buttons.

Liveresto

Looking at Some Registration Buttons

Liveresto is a website for restaurants. They display the three best websites that they’ve designed at the top part of the layout. Under it, there is a chef pointing to the Sign Up button, drawing attention to the button and making sure that first-time visitors won’t miss it.

EECI

EECI

EECI is about conferences around a city. When you enter the website, your eye will go straight to the bright red "San Francisco" ribbon on the left. The eye then naturally flows to the right, towards a star badge registration button that says, "Register today!" The badge registration button is bright and huge. The color of the star badge beautifully blends with the site design, yet is still very noticeable.

InstantLoop

InstantLoop

InstantLoop shows their registration button with the call to action text, "Try Now". The button is huge and located prominently in the header area.

Vegas Uncork’d

Vegas Uncork'd

Vegas Uncork’d has a huge Flash banner that starts playing a catchy site intro that becomes an interactive JavaScript-based slideshow with information about the events to let users know what the site is all about. There is a button at the top of the web page that says "Sign up for updates" for easy access once the visitor is familiarized with the site and ready to become a user.

Buysellads

Buysellads

BuySellAds is a very popular site where many blogs can find advertisers to advertise on their website. Only the publishers have to register to set up their Publisher dashboard. On the left side of the web layout, you can see a section for Publishers that has a call-to-action button that says "Join Us".

Fitbit

Fitbit

Fitbit is website for health-related products and their main objective is to sell their products. When you first visit the site, your attention will go straight to the text "fitness & sleep" to the right of the layout. The "Sign Up" registration button is below it and has a bright pink color that makes it hard to miss.

More Examples of Registration Buttons

Squadedit

Squadedit

Playintraffik

Playintraffik

Baramail

Baramail

Notableapp

Notableapp

Betterblogger

Betterblogger

Mini Squadron

Mini Squadron

Championsound

Championsound

Shakeitphoto

Shakeitphoto

Glasscubes

Glasscubes

Kiwi App

Kiwi App

Hispaloto

Hispaloto

HelpSpot

HelpSpot

Solidshops

Solidshops

Xpelo

Xpelo

Myows

Myows

Myvoxtopia

Myvoxtopia

Myzeo

Myzeo

Onehub

Onehub

Ooizit

Ooizit

Simplifythis

Simplifythis

Sprouter

Sprouter

Storenvy

Storenvy

Briterevolution

Briterevolution

Logodeck

Logodeck

Related Content

About the Author

Dibakar Jana is a 22 year old Web/Graphic/Flash Designer and Blogger from Calcutta ("Kolkata"), India. He is the founder and Chief Editor of DJDesignerLab, a blog for designers. He also runs DJDesignFuture, a web design freelancing group. You can follow him on Twitter@djdesignerlab and join him on Facebook.

28 Comments

Reece

February 4th, 2010

awesome post,i love the better blogger 1

Poonit Patel

February 4th, 2010

Hi Dibakar
Nice collection of Registration buttons.
Thank you very much for sharing with us.

Matthew Heidenreich

February 4th, 2010

some great examples, thanks for this.

Maverick

February 4th, 2010

definitely the registration button should also highlight what additional features the user will get after registering or else i feel very few people will register.

Edward Lewis

February 4th, 2010

Nice.. some cool examples to recreate!

Melvin José

February 4th, 2010

So, from looking at the examples I would say make them big and prominent.

Sjors

February 4th, 2010

you are using some bad examples: Mini Squadron, Xpelo and Hispaloto seem to confuse people more than that they help to convey a simple message. Next time you set your self out to find a set of buttons, go for quality and not quantity please :)

Brian Lovin

February 4th, 2010

A great roundup of examples. Sometimes designing a button can be difficult – a designer has to achieve the right colors, style, type, and feel. This post will help down the road, thanks!

Tom

February 4th, 2010

wow, lots of inspiration in the post, thanks

BigM75

February 4th, 2010

nice buttons for account

Scott Buchanan

February 4th, 2010

How did a website using Comic Sans (Simplifythis) make it on Six Revisions?

nikhil

February 4th, 2010

nice collection…i love all those.
thnx for sharing it.

Niubi

February 4th, 2010

I’ve always thought that http://www.dubli.com had a lovely registration button, although many of the examples presented here are also rather nice!

Max

February 4th, 2010

Love such posts! Inspiration, inspiration, and again inspiration! Clients will like my work, because sixrevisions gives me new mental food :) Thanks, Dibakar!

Dibakar Jana

February 4th, 2010

Thanks everybody to like my article.

Anthony

February 5th, 2010

Some of those buttons are really poorly designed. Typography is off and spacing wrong. And the site with Comic Sans? Seriously?

Sascha

February 5th, 2010

Hi isent there missing some comments here?

lonnie

February 5th, 2010

a starburst? really? I understand the importance of usability, but does that mean we abandon design principles?

Robert Eerhart

February 5th, 2010

Thannx for naming the EECI conference here. One point though: EECI is not a conference about a city, but a conference about the beautiful products ExpressionEngine (EE) and CodeIgniter (CI). Cheers!

Myows

February 5th, 2010

I’m so proud to make it to 6revisions, Thank you for featuring my Call to Action buttons.

I spent days on these!

Max

jan

February 7th, 2010

some real nice looking buttons

aditia

February 9th, 2010

great focus on seeing this button, what I think about registration button always glossy style or mac style button, thanks for the post

Brian

February 10th, 2010

Just FYI you should take down the logo deck screen shot. They stole a government trademarked image from Von Glitshka of http://www.glitschkastudios.com/ The Hawkeye Investigations logo is a DIRECT rip from his tutorial on http://www.illustrationclass.com/

They are currently under consideration for prosecution unless they take it down.

Adnan

February 11th, 2010

Is this a post about “How not to design a registration button”? Very poor examples Dibakar.

Alex

February 14th, 2010

Very useful post. Thank you!

Oliver

February 16th, 2010

I’d like to see their Multi Variate test results, or heat map, that’s way more exciting :)

Rob Loukotka

February 16th, 2010

I’ve found that the most successful buttons are the ones that utilize a lot of negative space. Really give your call to actions a lot of breathing room & padding. If you have text hugging the edges of the button, or the area is cluttered near the button, a lot of users may miss it.

So definitely feel free to give your actions a ridiculous amount of padding, make it the only option the visitor can make it in that area. If you have a lot of call to action buttons, identify which one is most important, and give it priority.

Great collection. It’s good to see these things all in a row for comparisons.

Matt

February 15th, 2011

Nice collections. Time for more designs and more a/b testing.

Matt

Leave a Comment

Subscribe to the comments on this article.