Sometimes when you see keywords being talked about on the Internet, they seem really a bit mysterious. But in our everyday life, they are all about us. In the photos above, you can see some examples I came across wandering around Montpellier in France.
- Update: Spotting the keywords ‘instruments de musique’ on this shop’s awning stimulated the idea for this post. The text on the awning looks like quite a nicely optimised title tag. The telephone number is a nice touch too.
- The accessories shop uses ‘accessories’ in its name. You can also see ‘ear piercing’ being given primary space in the window display - in both English and French.
- It’s pretty clear the pasta place has got two main offerings - pasta and cafe. They also manage to get pasta in both languages.
- The photograph developer makes it pretty clear that they develop photos and they are focussed on price - ‘Photo Price’. They even get the word development (’développment’) in their tagline.
- A little off topic, the fourth images is an example of early graphics. A mortar and pestle representing the work of the pharmacist on the outside of a pharmacy. The graphic with the two serpents has clearly gained more acceptance over time.
The Human Powered Search Engine
Of course the Yellow Pages was the original way to search for businesses. And its full of keywords. We approach the index with a few words or keywords in mind. The index gives us the most common form. Then we skip to a particular page number to look through the businesses under that keyword.
Naturally the ads themselves are covered in keywords. Note the ads for this Apple Centre - ‘Apple Centre’ is given a prominent position. Then the French equivalents of ‘hardware’, ’software’, ‘training’ and ‘maintenance’. All good stuff!
And Back to the Web…
So how does this all apply to you and your website?
- You need to know the most important keywords that relate to your business.
- They should be displayed in prominent positions throughout your website
- You should also use them in the promotion of your website both offline and online.
The goal here is two-fold. Firstly, when a visitor arrives on your site, they spot the keywords they have in mind quickly. The visitor knows they are in the right place. Secondly, when a search engine visits, it knows your site relates to those keywords. Then the search engine knows to return your website for the searches on the right keywords.
Learn more about our approach to keywords »
We haven’t really looked at search before here at Yclick.it. It often plays an important role in converting your visitors to customers. Certainly if they can’t find what they want - you are off to a bad start.
One interesting development with web browsers over the last while is the integration of a search box direct in the browser window. Firefox has gone a step further by allowing its users to select which search engines they would like available. In Firefox 2+:
- Click the mouse on the Google icon on the left hand side of the search box.
- Click on ‘Manage Search Engines’
- You can then reorder the search engines or choose another one by clicking ‘Get more search engines’.
But it’s not only the big search engines that can offer this service. Perhaps your site has a useful search engines and your customers could benefit from having direct access to it from their browser. Firefox provides information on their site on how to integrate your search engine.
If you decide to provide this service for your site, then take note the clever approach a few sites have taken to promoting this service.
First of all detect if the visitor is using a browser that has such a integrated search. For those that are, show a graphic call to action to install the custom search. Place it at the top right of the browser screen just underneath where the search box will be. Make sure you set it up so the visitor can get rid of it and ensure it doesn’t appear when they have installed it.
Yahoo! was the first site I saw that implemented this. The Yahoo! search came installed with Firefox, however it wasn’t the default search selected. Their call to action was for visitors to switch to the Yahoo! search. Clever stuff. The screenshot above is from the Exalead search - their call is for visitors to ‘add Exalead to your search engines’ list.
Many thanks to Sébastien Billard for suggesting this Yclick.it!
We have looked at optimising the download process a few times now: making it obvious how to download, reducing the process to one-click if possible, using strong contrast for download buttons and providing step by step installation instructions.
Panic produce a number of mac applications including one for web development called Coda. They also have a number of features in their download process that are worth noting. These could be integrated into your site if you offer for example documents or software for download.
First of all, as per the thumbnail above, they have reduced their process to a one-click download. They have been able to do this even though the software has to be registered for full-use. They also provide download information (file size, format, requirements etc.) close to the download button. Not as per Firefox on the button, but rather in a javascript overlay which appears when you put the mouse over the download button.
As well as that, when you actually click on the download button, the background fades and another overlay appears. This one lets you know that the download process has begun. That you will find it in your download file and that you can try it out but you will need to buy it if you want to continue to use it. This screen fade and overlay is an excellent way to get focussed attention. Particularly when you want to ensure the download process is as smooth as possible.
(Thanks to Airbag for the always amusing wry humour and the Panic tip!)
Last week we looked at a particular example of how contrast can be used to emphasise particular elements. Today we are going to look at a few more examples that I have come across.
Colour, Underline & Exclamation
Lighthouse is an online service for issue tracking. In their navigation, they have emphasised their ‘Signup’ call to action by putting it in a contrasting colour - dark blue to the rest of the navigation’s white text. They have underlined it in white and they’ve added an exclamation!
Size, Order & Raquo Character
Icebrrg is a tool to help you create and manage internet forms. The
navigation is split in two - normal links above the horizon line and more product focussed ones below. I love the way the iceburg is heading for the horizon line! The latter navigation is given more contrast and larger type. The call to action is emphasised with a raquo character (») on the right.
Order & Exclamation
Expression Engine is a content management system. They are using just an exclamation mark and placement at the end of the list to emphasise their ‘Buy Now’ call to action. There’s an in-depth article on its redesign by web designer Jesse Bennett-Chamberlain if you’re interested.
Testing with Google Website Optimizer
All four of the examples above use very simple changes to emphasise the call to action: change of colour, exclamation characters or the addition of the raquo character. These are the sort of changes that can be tested in Google’s new Website Optimizer. This new tool allows you to easily test how variations in page elements affect your conversion rate. We’re looking forward to getting our teeth into it over the next few weeks.
Grok Dot Com have some excellent material to get you started with the Optimizer »
(Thanks to Tim for the Lighthouse link…)
Problogger recently carried out an informal survey of why readers unsubscribe from a blog - useful information for anyone running a blog. The top ten reasons are:
- Too many posts (the post levels are too overwhelming).
- Infrequent Posting (or the blog is effectively dead).
- Partial Excerpts Feeds.
- Blog Changes Focus (too much off topic posting).
- Too many posts that I see elsewhere (Redundant, Repeated or Recycled News).
- Uninteresting Content.
- Irrelevant Content.
- The Blogger’s Ego - Too much self promotion.
- Low Quality Content.
- Too many posts that are too long.
Content of course comes up as key: the right amount, on a relevant and interesting topic. Partial feeds get the two thumbs down. Remember if you have to have them then design them to be compelling.
There are plenty more useful points to read in the full post »
We’ve talked quite a lot about 37signals designs in the past (1 & 2). Last week they launched Highrise and as always there is plenty to look at!
It’s interesting to see how they have used contrast to emphasise the most important elements. The most prominent elements at the top of the page are the headline (’Keep in touch…’) and the main calls to action (’Take a tour’, ‘Sign up for free’).
If we look at the design without the distraction of colour, we can see more clearly the actual tones (or shades) and contrasts being used. The headline has the darkest tone relative to its background. It’s also clear from its design that it’s not a link. So if the visitor is looking for the next step, they have to move on.
Next up the calls to action (’Take a tour’, ‘Sign up for free’). Looking at this section in black and white, you can see more clearly why this section is so prominent. Despite being red text on a yellow background, the tones of both colours are quite dark. In fact that yellow background is the largest area of dark tone on this part of the page. It contrasts strongly with its background.
Another interesting point is how they have emphasised ‘Pricing & Sign up’ in the navigation. The links in the navigation are simple blue underlined links. In this case the contrast is provided by ‘Pricing & Sign-up’ being in bold. The placement, at the end of the list, also makes it likely to be noticed.
Provide the visitor with a clear message and a clear path to progress on your site. Contrast can be used as a key design tool to do this. It can be used to emphasise the most important elements - in this case headlines and calls to action. But also used less strongly for other elements like points of resolution, testimonials etc.
What else do you think is worth noting on the Highrise site?
It’s tiring work moving that mouse about and performing all those clicks. This Japanese website have come up with a brilliant way to illustrate it!
If we have any Japanese readers - perhaps you could tell us a bit more what it’s about!
Thanks to Amélie for the link!
We spoke about designing for scanning and skimming recently. Today we have a further two examples of sites using highlighting. But these ones are being used to focus the visitor’s attention on a call to action.
The first is on the 37signals jobs board. A dark yellow highlight immediately draws your attention to their call to advertise. ‘Post a job and find the right person’ is nicely reassuring and the text underneath lets us know the cost and duration without committing to a click.
Notice also among the job listings, how the job title is being used as the link text. This nicely helps to optimise the linked page for that text which helps those job ads get out there among the search results. The result - more chance of that ad finding the right person!
Etre is a user experience agency based in the UK. I first came across them when I watched a video demonstrating their eye tracking service. Clearly based on their homepage, they want visitors to be able to find this service.
‘Looking for Eye Tracking?’ is highlighted in a dull light yellow. The minimal and rather cool colour palette for the page means this is pretty much the brightest element on the page. It emphasises the keywords ‘eye tracking’ and provides a link to find out more.
Conclusion
Highlighting can be used to effectively emphasise a call to action:
- Using text instead of a graphic makes it easier to include more specific text and more importantly trigger words or keywords.
- And using highlighting once on screen can help to immediately focus the visitor on one element.
Of course to prove that we would probably have to do an eye tracking study. But I’m guessing etre might know a thing or two from their previous studies!
Finally the blog is all transferred to its new home! And our readers (that’s you!) have started to swop over to the new feed. With all the work, things have been pretty quiet here but expect to see more action from now on!
Apart from the transfer of home, we have also made a few adjustments to how things work here at Yclick.it. If you’re reading this in your feedreader, come out and take a look!
First things first, we separated the French and English versions. We changed the layout of posts to give more space. And following some yclick.it analysis of our own, we decided to include full blog posts on the blog homepage. So visitors to the blog get to see all the content without that extra click!
We also changed how you see the screenshot detail and the full screenshot. Notice the little magnifying glass at the bottom right of the image above. Click on it and your browser will open up the full screenshot. We were saving the picture for a post on ‘Waiting for Your Cat to Bark‘ (UK) but today’s its day - meet Ben’s cat Minna!
We’d love to hear your feedback on the changes - feel free to comment below. Or if you notice any oddness on the site, it could happen, please email me at solutions at logicintuition dot com. Thanks for your patience!
Big thanks due to the Wordpress Lightbox Plugin and to the Sweetie icons.
Update: This post is for those subscribed to the ‘Insights for the Enterprising’ Feed.
The Short Explanation
We are consolidating our two blogs into just one. If you are subscribed to the ‘Insights for the Enterprising’ feed, please update the address for the feed to:
http://feeds.feedburner.com/yclickit/en/
Apologies for the inconvenience. There will be some great new content over the next while and it will be well worth it!
The Long Explanation
You may have noticed that this blog has been pretty quiet over the last while. We have found our subject much more naturally on our blog Yclick.it. It looks at persuasive website design - how real websites are designed to get the clicks that turn visitors into customers.
As a result, we have decided to consolidate the two blogs into just one. We will continue looking at persuasive website design. But over time we will expand to include more topics in our broader field of expertise - web marketing.
Thank you for reading and supporting ‘Insights for the Enterprising’. We think you’ll really like the new blog!
About Yclick.it
A blog that looks at how websites are designed to persuade visitors to become customers. It's updated weekly with screenshots and thoughts on how language, colour, contrast, positioning all play their part in getting those all important clicks.
logic+intuition is a marketing agency specialising in providing, entrepreneurs like you, key intelligence that will give your website competitive edge.
Learn More ».
Subscribe
Resources
Archives
Visit our
archives for previous insights you might have missed out on.
