A Look into Registration Buttons in Web Design
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.
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
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 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 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 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 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 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
Playintraffik
Baramail
Notableapp
Betterblogger
Mini Squadron
Championsound
Shakeitphoto
Glasscubes
Kiwi App
Hispaloto
HelpSpot
Solidshops
Xpelo
Myows
Myvoxtopia
Myzeo
Onehub
Ooizit
Simplifythis
Sprouter
Storenvy
Briterevolution
Logodeck
Related Content
- How to Create a Slick and Clean Button in Photoshop
- Create an Animated "Call to Action" Button
- 80 Examples of Add to Cart Buttons for Design Inspiration
- Related categories: User Interface and Web Design
About the Author
.
27 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.
Leave a Comment