The theory follows the practice: Today I show you successful call-to-action examples for home, landing page, product page, ordering process, content and e-mails. Get inspired and find the right approach for your own website!
In my last post I explained why be worth CTAs and how your they designed best. Now is the time to leave the gray theory behind us and immerse ourselves in the colorful world of the Call-To-Action buttons. That is why today I dedicate myself to a whole series of best practice examples. I distinguish between the various “locations” of the call-to-action, because the magazine content can be used differently than on the start page or in a salesletter.
With one click you get directly to the respective section:
Call-to-action on the home page
On your homepage you give the users a first impression from your company or your products and makes them curious to know more. A call-to-action (or several) may not be missing here. It should be placed in the upper part of the page in order to reach scroll-unwilling users.
The design of your start page CTA can be quite different. Colored buttons that stand out from the rest of the page are especially effective. But, of course, it always depends on the style of your side, which fits Call-To-Action.
The stationery brand Brunnen lets the pictures of their products in the start page slider speak for themselves. The call-to-action is placed in the middle of the top page area, thus “above the fold” – ideal to get instantly into the field of view of the site visitor. While the “View Collection” prompt would cause the user to click only to a certain extent, the large, appealing image and the text “Summertime. Summer feelings for your office “Fancy more.
Conclusion: It is important to think about the placement of the buttons. In the middle or in the upper side area, the user’s gaze is most easily detected. In addition, the “full” the start page, the less effect the call-to-action can unfold. Do not be afraid to leave the upper section of your homepage comparatively “empty”. As long as the header contains all important elements, such as Luisa recently here has declared an elaborate CTA should be combined with an enticing picture quite sufficient to arouse the curiosity of the users.
Papershift uses two CTA-buttons on the homepage (it is even four if you count the “Login” and “Register” buttons). The more striking in the CI color green wants the user to start the service planning tool free of charge. The unobtrusive white button is intended for site visitors, who are still undecided and want to learn more about the tool.
Conclusion: Especially if your product is in need of explanation, you should the User indemnify if he wants to immediately deal with the product, including information initially suggested.
Simple but effective: Muji.com does not use the CTA buttons on the homepage. Instead, the call “Carry nature into the city” is combined with a picture. A great way to make the user curious and at the same time remain faithful to the unspoken, clear design of the site.
Conclusion: It does not always need to have a colored button. Even in interaction with a high-quality picture, your call-to-action can show effect!
Call-to-action on the landing page
A landing page without call-to-action is a no-go! Here, you not only make your offer to the user your offer, you also want to move him to a closer look at your products and finally to a conversion.
4. Dropbox Business
The design of the landing page dropbox.com/business is very clear and unobtrusive. The calls-to-action can unfold their full effect here: they fall into the eye, but do not push themselves to the user. Interesting is also the different design of the CTAs: From the simple link (“contact customer support”, “buy now”) over a decent white button (“30 days free trial”) upper right right up to the strong blue button (likewise “30 days Free trial “) at the bottom left.
Conclusion: Not all your calls-to-Action must look the same. Especially if you want to accommodate several CTAs in a small space, you should alternate: important action requests are highlighted with distinctive buttons, less relevant CTAs can also appear as a simple text link.
5. Leibniz Butter
Why not a bit creative about the CTA? The fact that a button is not the only option to call attention to a call-to-action is demonstrated by the Landingpage for the Leibniz Butterkek: The user’s view is directed to the torn-down notepad that brings him to Butterkek’s TV sport.
Conclusion: Sets your unlimited creativity! In many places, for example on the product page or in the ordering process, classic buttons are essential, because the users are used to it. But on a landing page, it can also be more creative. Of course, the button replacement must also fit into your corporate identity.
Small drawback in this example: The red call-to-action in the slider is not optimally readable on the colorful background.
6. Esprit Men’s Fashion
On the Landingpage for Men’s Fashion, Esprit uses pictures that effectively influence the call-to-action: the photos in the example express dynamics and convey how diverse denim can be. Through the clever picture composition the view is placed in the center, where the CTA button is located. The CTA is invitingly formulated, but by no means tormented: “Find your jeans” makes the user feel like in the shop to browse – from buy is once not at all.
Conclusion: Especially for products where there is a lot about optics, large images in combination with a call to action are ideal. Just let your product work – if it is attractively presented and the CTA formulated as a friendly invitation, then really not much can go wrong.
Call-to-action on the product page
A special type of the CTA button is the purchase button on the product page. It should be visible in any case without scrolling and to the user’s eye – usually the button lights in a striking color. The label “Add to Cart” is the standard.
The drugstore market DM shows in its online shop not only the shopping cart button, but also a more insignificant button, to put the article “to the shopping list”. Both buttons are distinguished both in color and with the small icons (shopping cart or list).
Conclusion: DM is leading by example and lets the user choose whether he wants to store the product at first only on a watch list or order now. Frequently, the notice function is displayed on product pages very unobtrusively, for example with a pin or a text link. By placing a CTA button underneath the shopping basket, you ensure that users perceive the memorize option. In this way, irresistible site visitors can be used to interact with one another and increase the chances of a later conversion.
By the way: While in the drugstore chain DM the term “shopping list” is meaningful, in other areas the “Merkzettel” or the “wishlist” durchgestezt. The decisive factor is that the term corresponds to the expectations of the users: To DM I go with a shopping list, with Esprit I put first all the clothes, which I like, on a wishlist and later choose how much I can afford.
8. Baby Walz
Babywalz scrapes the shopping cart button: The forklift icon is a nice idea and gives more attention than an ordinary button. In addition, the forklift truck brings with it a certain dynamism, which perhaps unconsciously encourages the user in his action plan.
Conclusion: The shopping cart button must be calm and playful a little. Of course, it should still be recognizable as such, but even a small gag like an unusual icon can give you points of sympathy.
If you are interested in topics product pages, read here my product pages tips!
Call-to-action in the checkout process
Call-to-action buttons are not negligible in the buying process either. You should use them both in the shopping cart and during the ordering process. As with product pages, you are on the safe side if you consider conventional CTA formulations.
9. S. Oliver
A pop-up informs the user that the product has landed in the shopping cart. Now the question arises: Buy or still search for further products? S. Oliver provides two color-coded buttons, between which the user can choose.
Also in the shopping cart itself two different buttons are used: The more striking black leads to the ordering process, the less discreet back to the shop:
Conclusion: In the basket you should easily make it possible to the user, once again return to the shop and find other products. Hide the “Continue shopping” link not somewhere, but makes it well visible.
At the beginning of the checkout process, Conrad uses different colored CTA buttons depending on whether the customer wants to log in to an existing customer account (yellow), wants to register (blue) or prefers to order as a guest (gray). This allows the user to differentiate the different options better.
Conclusion: By your use different button colors in the order process, you provide more user friendliness. When you label the buttons, you should consider Conrad.de as the conventional formulations (“(Jetzt) anmelden”, “Register” …): In the buying process – unlike, for example, on the homepage – creativity is rather contraproductive. The users want to have the process behind them quickly and not have to consider which option is hidden behind the CTA button.
Hornbach offers two buttons in the checkout process: With “Next” the customer continues the purchase process, with “Back” he goes to the previous order step. This may seem logical, but there are some online shops that make it difficult for their users to go back again, in order to correct an erroneous statement.
Conclusion: The labels “Previous” and “Next” are sufficient here. Place the Next button both above and below the order form to make it easier for the user to navigate.
More information about a user-friendly purchase process you gain here .
Call-to-action in the content
CTAs are also used in the content, be it in the magazine of a shop or in the company blog. They can have different purposes: Either they take the reader by their hand and lead it through the existing content to other relevant content, or they draw attention to the relevant products and offers of the shop.
Calls-to-action in a blog article must by no means be obtrusive. Dawanda, for example, encourages readers to browse the DIY portal for more ideas at the end of an article with craft tips. This is a useful hint for the readers interested in the basement – they will perhaps continue to deal with the DIY ideas on Dawanda.com longer, instead of leaving the page after reading the article.
At the end of each blog contribution, Dawanda asks its readers to share the contribution at pleasure. The reader feels personally addressed and may be more willing to make the contribution than would be the case if only the icons were displayed to him.
Conclusion: Sets in continuous text, about your shop / business blog, from time to time a Call-To-Action. This is how you can encourage your readers to discover related contributions and to continue to deal with your content. Of course, you can also draw attention to products where it is appropriate. To spammy, however, the CTAs should not work.
Siemens makes its brand tangible and invites the user to a journey through the history of the Siemens household appliances. A seemingly dry theme is presented here in a visually exciting way – but also the CTAs (“Start your journey now”, “Experience exceptional moments …”) contribute a substantial part to the curiosity of the user and he is awakened with Of the page.
A point of criticism would be that the CTAs as such do not stand out clearly enough. With the aid of striking buttons, they would be more eye-catching to the site visitor.
Conclusion: With specifically employed Calls-To-Action you can arouse curiosity and ensure that it is longer engaged in your content to site visitors. Even with relatively little effort, you can emulate Siemens and direct the virtual steps of your users: Use your CTAs on your “About Us” page to guide the user to the team concept, company history or your offers (à la “Meet our team”, “Learn more about our company’s history” …).
Call-to-action in e-mail marketing
CTAs can also be used profitably in e-mail marketing. Again, it is essential to place the (most important) CTA button in the upper screen area.
Opentable sets clear design in its newsletter without distracting elements. The picture serves in the truest sense of the word as an “appetizer”. The delicious Indian dish forms the eyecatcher and is in a line with the CTA button. This way, the receiver’s view is directed directly downwards, where the CTA button is visible in conspicuous red. Through the white space in its surroundings, the button can unfold its effect fully.
The call-to-action invites the reader to “discover” restaurants. This sounds non-committal and will probably let more users click, as for example with “table reservation” would be the case.
Conclusion: “Less is more” – which can also be applied to e-mails. With an effective picture and a prominent button, you can possibly reach more than with a mailing, which offers a firework of pictures and links. First of all offer the reader a non-binding offer: Invite him to “discover” content or products. The “Buy” will only become relevant as soon as it has entered your Landingpage.
The conservation organization WWF is the best example of how well-placed CTAs to a huge increase in the conversion rate can result in a newsletter campaign: In 2012, was the design of the donations mails revised and equipped with eye-catching CTA buttons. The result: every 3rd click from the mailing led directly to the conversion (a donation), and the donations were 14% higher than other comparable campaigns!
In the above (current) example of the WWF Newsletter, the pink buttons clearly stand out. Especially the CTA below the e-mail text is quite concrete: the user is not only asked to “donate”, but learns exactly what his donations are meant for (donate for the ranger and the protection of the elephants).
Conclusion: Take some to send emails an example the WWF and is a meaningful, unique CTAs to move your subscribers to action. It may be useful to set several CTA buttons: one in the upper page area, which is also visible for “scrollfaule” recipients, and another below the text, in order to address the readers once again.
The best practice examples have hopefully provided you with some suggestions for how to use your own successful action requests in your shop or your mailings.
Here are my most important tips:
- Places the Call-To-Action button in the visible region of a web page or an e-mail.
- Make sure that your button catches the eye: its placement, the color or the design.
- Be as creative as necessary (Home, Landing Pages, direct mail)and so conventional as necessary (product page, shopping cart, order process).
- Increases the effectiveness of the Call-to-Action using a matching image.
- Posted obligation CTAs where users often no intent to purchase cherish (Home, Landing Page, Newsletter).
- Uses different designs or colors to make CTA buttons with different objectives distinguishable (eg “Login” versus “Register”).
- Hidden CTA buttons not that represent a help for the user (such as the “Back” button in the order process).
- Uses Calls-To-Action also in the content of your site to make users aware of additional content or specific products.
Do you know any other great examples for using CTAs? What is the ideal CTA button for you?
After all the examples, information and tips your head buzzes you? You are welcome to us with specific questions about helping Seokratie! put.