Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Usability: Turn Visitors Into Customers - 11 tips


Published on

You're loosing potential clients on your website every day. Everybody is.
These 11 tips will help you to turn more visitors into customers.
Warning: you will not always like what you see.

Published in: Design, Technology
  • Sex in your area is here: ❤❤❤ ❤❤❤
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ♥♥♥ ♥♥♥
    Are you sure you want to  Yes  No
    Your message goes here

Usability: Turn Visitors Into Customers - 11 tips

  1. 1. 11 tips to turn your visitors into customers Karl Gilis - AGConsult Web usability & Information architecture
  2. 2. These slides were created to support an oral story. In an attempt to make them interesting without hearing the story, I've added these bubbles. I hope they will give enough context to tell the story.
  3. 3. 1 tip to start with (I owe credit to Gerry McGovern for this one)
  4. 4. The view of the universe by a smart guy: Aristotle. He was so wrong.
  5. 5. My view of the world and the universe until I was 30. I was so wrong. Karl Gilis
  6. 6. The view of many marketing, communication and web managers. They are so wrong. My company / My website
  7. 7. The bitter truth about the internet. The visitor is at the centre. He's the king. The dictator even. He's always right! The visitor
  8. 8. This is what I mean by 'centre of the universe approach'. This is the product page on green energy on the website of Electrabel, "the largest power company in Belgium". Do you notice how they don't talk about the product, but only about how great they are? "The biggest producer of green energy". "Green energy for the future of our planet." "A real engagement." Good for them. A big round of applause. But the visitor doesn't care. He wants to see product information. Not bragging about how great Electrabel is. Most visitors will leave upon seeing this.
  9. 9. <ul><li>We are not the centre of the universe. </li></ul><ul><li>The visitor is. </li></ul>1. Your daily mantra You should start every working day with this mantra.
  10. 10. 2 tips for visitors coming from Google
  11. 11. 2. Make sure the right pages are on top in Google <ul><li>High rankings in Google are good. </li></ul><ul><li>Make sure the right page has the highest ranking. </li></ul><ul><li>Visitors will leave 'bad' pages immediately: </li></ul><ul><ul><li>Pdf </li></ul></ul><ul><ul><li>News pages </li></ul></ul><ul><ul><li>Pages with too much text </li></ul></ul>
  12. 12. I'm still looking for green energy. The first result in Google for Essent was this page. Good thing they rank high. Bad thing they do so with a pdf file with the rules of a contest. Bummer. The visitor will leave and not become a customer.
  13. 13. So yeah, I'm still looking for green energy. The first result in Google for SPE-Luminus was this page. Good thing they rank high. Bad thing they do so with a page about where they get their green energy from. Frankly, at this stage the visitor doesn't care. He wants to see the product specs. Prices. So he will leave.
  14. 14. In the case of Luminus it really is a pity that previous slide is their highest ranking page. Because on their main website they have a pretty good page on green energy. But it doesn't rank the highest for their company when searching for 'green energy'.
  15. 15. 3. Each page must stand on its own <ul><li>All information about 1 topic or product should be on 1 page. Each page needs to tell the full story. </li></ul><ul><li>Don't worry if the page gets long (see tip 6) </li></ul><ul><li>If it's not possible to put all info on 1 page: </li></ul><ul><ul><li>Provide clear links to all the info that's needed to get the full picture </li></ul></ul><ul><ul><li>Make sure those pages don't rank higher than the 'main page' (see tip 2) </li></ul></ul>
  16. 16. So here I am, still looking for green energy. The first result in Google for Carrefour is this page. They have a European label for their product. Yep, that's really what the visitor wants to know. Now he's convinced. Not. He already left the page. Because the only thing he sees is 'European label' and he was looking for green energy.
  17. 17. The solution: make 1 page for your product. And start with the product info. And maybe, if you really feel the need to tell people about your label, do it at the end. Because most people are not interested in those things.
  18. 18. Because I didn't find a good solution to buy green energy, I was looking for solutions on how to reduce my energy consumption. After doing some research, I decided that a heat pump was a good solution for me. My next question: can I get a grant for a heat pump?
  19. 19. When Googling I found this page. It tells me a lot about what a heat pump is. And at the bottom (invisible on this screenshot) a link to a pdf-file to apply for the grant. Is this what the visitor was looking for?
  20. 20. No. This is not what the average visitor expects. At this stage, he knows what a heat pump is. Remember, this company is not selling heat pumps. They give grants to people that reduce their energy consumption. What do visitors expect from this page? How much the grant is. Result: the visitor will leave.
  21. 21. Why are the amounts of the grants not on the detail page? Because this company made a classic mistake. People follow logical paths in a website, don't they? That's why they only show the amounts on the page that shows all the grants. That's good, but not good enough.
  22. 22. So remember: put all the info that's necessary to have the full story on the destination or detail page.
  23. 23. 2 tips for spontaneous visitors
  24. 24. 4. Homepage & website focus <ul><li>Why is focus so important? </li></ul><ul><ul><li>People are visiting your website because they're looking for something. </li></ul></ul><ul><ul><li>All visitors are on your website to perform a task. </li></ul></ul><ul><ul><li>Most visitors are very impatient and want to get the task done as quickly as possible. </li></ul></ul><ul><ul><li>&quot;Without order you have chaos. With chaos comes stress. With stress comes the inability to perform well. When you don't perform well, you feel dumb.” Brian Peterson  Do you want your visitors to feel dumb? </li></ul></ul>
  25. 25. <ul><li>The main problem: you! </li></ul><ul><ul><li>You think you're a complex organization. </li></ul></ul><ul><ul><li>You want to show your complexity to the visitor. </li></ul></ul><ul><ul><li>You want to tell the visitor how great you are. </li></ul></ul><ul><ul><li>You want to show off how busy you are and overwhelm the visitor with news. </li></ul></ul>
  26. 26. <ul><li>News flash: </li></ul><ul><ul><li>You are not important. </li></ul></ul><ul><ul><li>The visitor is not interested in your so called news. </li></ul></ul><ul><ul><li>Do you know when the visitor will think you are a great company? When he can easily find what he was looking for! </li></ul></ul>
  27. 27. Question <ul><li>Do you think Google is a complex organisation? </li></ul>
  28. 28. I don't know what your answer was. I'm always surprised to see how many people think Google is a simple company. That's probably because they see Google as the search company. Or maybe because they think of Google as the company with the very easy to use homepage.
  29. 29. And yes, Google has a very simple homepage.
  30. 30. But their technology is very complex. Their indexing mechanism, the ranking, the speed, … That is very complex.
  31. 31. As we all know, Google has much more to offer than search. Google docs, Picase, orkut, AdWords, Chrome, API's, Google News, Translate, Analytics, … and much much more.
  32. 32. <ul><li>Where are all those tools and solutions on the homepage? </li></ul><ul><li>Where's all the news on how great they are? </li></ul><ul><li>Why don't they show it? </li></ul><ul><li>Is the web manager of Google stupid? </li></ul><ul><li>Did he die a few years ago? </li></ul><ul><li>Do the stakeholders of Google know their homepage is so dated and empty? </li></ul>
  33. 33. All that stuff is not there because it's not the top task of the visitor of Google. Believe me, the people at Google are not stupid. They know what they're doing. They measure everything. They don't follow their gut feeling. That's why the homepage has a clear focus on search and easy to see links to 'Advertising programs' and 'Business solutions'.
  34. 34. <ul><li>How to find your focus? </li></ul><ul><ul><li>Find the top tasks of your website through research </li></ul></ul><ul><ul><ul><li>Why are people coming to your website? </li></ul></ul></ul><ul><ul><ul><li>Based on numbers (Google Analytics) </li></ul></ul></ul><ul><ul><ul><li>Based on user research (interviews, user testing, …) </li></ul></ul></ul><ul><ul><li>So not what's important in your opinion! </li></ul></ul><ul><ul><li>Put the 3 (maybe 5, not 10) top tasks on your homepage </li></ul></ul>
  35. 35. Question <ul><li>What are the top tasks of websites like Esso, Chevron, Fina, Shell, Q8 or Lukoil? </li></ul>Think for one minute. Write down the 2 or 3 top tasks that cross your mind. Ready? Let's find out what they do…
  36. 36. Yes, this is the homepage of Esso. I know you think it's the homepage of ExxonMobil, but no, it really is Esso. At least, this is what you see when you go to . For your information: the red line is what you see on your screen without scrolling. So what's the focus here? A huge article on their internal study &quot;Outlook for Energy: Expectations for the year 2030&quot;. You didn't see that one coming, did you? Or was it really on your list of top tasks?
  37. 37. <ul><li>This is the homepage of Lukoil. </li></ul><ul><li>The focus: </li></ul><ul><li>Price information </li></ul><ul><li>Find a gas station near you </li></ul><ul><li>Fleet card for companies </li></ul><ul><li>Download all gas stations to your GPS </li></ul><ul><li>I'm sure at least 2 of those were on your list too. </li></ul>
  38. 38. I'm sure you agree that in this comparison Lukoil is the winner. Lukoil knows what their visitors want. Now look at the website of your company. Is it in line with Google and Lukoil? Or does it reflect the Esso approach?
  39. 39. 5. Provide clear choices on overview pages <ul><li>What's an overview page? </li></ul><ul><ul><li>The homepage </li></ul></ul><ul><ul><li>Every page between the homepage and your 'detail pages' </li></ul></ul><ul><li>Purpose of an overview page </li></ul><ul><ul><li>Direct the visitor to the 'detail page' that will fulfill his need or answer his question as quickly as possible. </li></ul></ul><ul><li>2 main attention points: </li></ul><ul><ul><li>Clear lay-out: </li></ul></ul><ul><ul><ul><li>Blocks are always a good idea </li></ul></ul></ul><ul><ul><ul><li>Horizontal alignment improves scannability </li></ul></ul></ul><ul><ul><li>Meaningful links </li></ul></ul>
  40. 40. This is the homepage of the Belgian Government. Visitors really like the 9 'blocks' with links. Why? Because those blocks and links guide the user to the section he needs. Is it fancy? No. Does it work? Yes.
  41. 41. This is the homepage of Vlerick. Students and managers all over the world like the blocks in the centre. Why? They give direct access to the sections they need and are easy to scan.
  42. 42. This is the homepage of a water company. And even without understanding Dutch, you see there are 3 easy choices (drinking water, water for industrial use and waste water).
  43. 43. If you choose drinking water, they give you a page that resembles a site map. Maybe you think it looks boring. Newsflash: the user doesn't care. They all love this page because it helps them to find what they're looking for.
  44. 44. 5 tips for all visitors
  45. 45. 6. Optimize the 'scannability' of every page <ul><li>Treat every page as a landing page: </li></ul><ul><ul><li>Clear lay-out </li></ul></ul><ul><ul><li>Critical information above the page fold </li></ul></ul><ul><ul><li>Details and longer explanations below the page fold </li></ul></ul><ul><li>Why important: </li></ul><ul><ul><li>Every page can be the entry page and has to make a good impression. </li></ul></ul><ul><ul><li>Within 4 seconds a visitor decides if he's going to stay or not. </li></ul></ul><ul><li>Do the 4 second test on your own site! </li></ul><ul><ul><li>Pick a random page of your website. </li></ul></ul><ul><ul><li>Put off the screen after 4 seconds. </li></ul></ul><ul><ul><li>Did the most important stuff for the visitor stand out. </li></ul></ul><ul><ul><li>Really? </li></ul></ul>
  46. 46. Let's do the test on some pages. I was looking for car insurance. The first result in Google was a page from ING. Look at it for 4 seconds… Don't go to the next screen manually. Push the play button.
  47. 48. What did you see? Anything important? Or have you just seen a big load of text? And maybe the very interesting 'More information' links. Because that's really what you want now, isn't it? More information. Or do you agree that in real life you would return to Google and try the next result?
  48. 49. Let's see what the second company has to offer. Ready for the car insurance page of Ethias? Click on the play button to make sure you'll see it for 4 seconds only.
  49. 51. What did you see? Anything important? Was this better than ING? I think so. But not that much better, was it?
  50. 52. Let's see what the biggest web shop on earth does. Image you're looking for a digital camera. And the search results lead you to the next page. Again, click the Play button to see it for 4 seconds.
  51. 54. Do you recall the brand? The model? The price? Was it in stock? Would you stay on this page? Do your web pages have this magic build-up?
  52. 55. 7. Use useful pictures <ul><li>Some facts about pictures </li></ul><ul><ul><li>They take up a lot of valuable screen real estate. </li></ul></ul><ul><ul><li>On the web, images play the second fiddle. Most of the time they are not the attention grabbers. Text is. </li></ul></ul><ul><li>Examples of bad use of pictures </li></ul><ul><ul><li>Smiling people without any direct link to your product. </li></ul></ul><ul><ul><li>‘ Perfect’ people. </li></ul></ul><ul><ul><li>Big visuals that force users to scroll to see real content. </li></ul></ul><ul><ul><li>Images that don't show the whole picture. </li></ul></ul>
  53. 56. On the next slide you'll see some heat maps. A heat map is the result of eye tracking research. A red area means that > 80% of the users looked at it. Yellow: 60 to 80% of the users Green: 40 tot 60% Pay special attention to the 'heat' of the images.
  54. 57. Damn, it seems that visitors largely ignore images. Does this mean you should stop using images? No, but only use them when they have an added value. The smiling lady on the left is okay. She doesn't take up too much space.
  55. 58. This smiling lady is not okay. She's taking up too much space and pushing the content downwards. As a heating company you should show your products. Visitors know that when their home is heated in winter, they will be happier than when they freeze to death.
  56. 59. Last week we had a user test on a comparable website with smiling people. The user was struggling to find something. Suddenly he said: &quot;I can't find what I'm looking for but I'm glad those people are smiling.&quot; He was a big fan of irony. Those smiling people made him angry. That's what smiling people do when your site is not perfect. They upset the visitor.
  57. 60. The next slide shows the homepage of a transport company. Look at the pictures. What do they tell you?
  58. 62. <ul><li>This is what these pictures tell me: </li></ul><ul><li>We are a transport company. </li></ul><ul><li>We only do transportation by road. </li></ul><ul><li>We have 2 trucks: a big one and a small one. </li></ul><ul><li>We also have a very big office with computers and people. - And a large stack of toilet paper? </li></ul><ul><li>What's the added value? </li></ul><ul><li>What do you do if you have goods that do not fit in 2 trucks? </li></ul><ul><li>What do you do when you want railroad transport? </li></ul>
  59. 63. You would probably leave the website. That means this company has lost a potential customer. Because 3 levels deep in the structure the item 'transport modes' makes it clear they do transport by truck, train, boat… Showing those transport modes on the homepage (as links) instead of the trucks, would have increased the chance of you becoming a customer.
  60. 64. 8. Always give a price indication <ul><li>When selling products price information is essential: </li></ul><ul><ul><li>Price is one of the top criteria in the decision to buy or not </li></ul></ul><ul><ul><li>Visitors will do everything to find out the price </li></ul></ul><ul><ul><li>Visitors want to compare products </li></ul></ul><ul><li>What to do? </li></ul><ul><ul><li>Give the price </li></ul></ul><ul><ul><li>If necessary, cover yourself with 'recommended retail price' </li></ul></ul><ul><li>What to do when you're selling services? </li></ul><ul><ul><li>Are you really selling a service or do you disguise your product as a service? </li></ul></ul><ul><ul><li>Even if it's a service, a price indication will do you more good than harm. </li></ul></ul>
  61. 65. 9. Lead generation on every page <ul><li>Why? </li></ul><ul><ul><li>If you want to sell, it should be very easy to contact you. </li></ul></ul><ul><ul><li>A link to 'Contact' in the navigation is not enough. </li></ul></ul><ul><ul><li>A page without lead generation, is a dead end. </li></ul></ul><ul><li>What should be on every page? </li></ul><ul><ul><li>Phone number </li></ul></ul><ul><ul><li>E-mail address </li></ul></ul><ul><ul><li>Link to a contact form of request for offer </li></ul></ul>
  62. 66. This company has a very complex product range. So there's quite a big chance that a lot of visitors want to contact them when seeing this page. Below the page fold there's a 'Contact us' link. That's okay. Would be better if it was above the page fold. Let's click on it.
  63. 67. What's this? The visitor is forced to choose which Atlas Copco he wants to contact? How should he know that? Why should he know the internal structure of a company?
  64. 68. Want more info? Not sure what solution suits you? Call: 0800 25 000 Mail: [email_address] Chat: Start online chat Contactform Just for fun, I made this little adjustment to the first page. I filled the empty spot with contact information. This will turn visitors into customers.
  65. 69. 10. Always be polite! <ul><li>Check your website for any improper or rude language. </li></ul><ul><li>Pay special attention to error messages. You don't want to loose the visitor in the final stage of becoming a customer. </li></ul>To check the error messages on your website, push the 'send' button on all the forms on your web site without filling them in.
  66. 70. &quot;We want something that looks like an email address!&quot;
  67. 71. &quot;Misses? / Mister?. Thank you.&quot;
  68. 72. &quot;Email problem Push the BACK button to solve the problem&quot; Don't you wish everything in life was this easy? Just push the back button and all your problems ate solved.
  69. 73. That's it. Wait. 11 tips, remember?
  70. 74. 11. Find out how AGConsult can help you <ul><li>Usability & information architecture </li></ul><ul><ul><li>Expert review </li></ul></ul><ul><ul><li>User test </li></ul></ul><ul><ul><li>Competitor's analysis </li></ul></ul><ul><ul><li>User research </li></ul></ul><ul><ul><li>Information architecture </li></ul></ul><ul><ul><li>Creating a prototype </li></ul></ul><ul><ul><li>Writing for the web </li></ul></ul><ul><li>Visit us: </li></ul><ul><ul><li>Online: </li></ul></ul><ul><ul><li>Twitter: </li></ul></ul><ul><ul><li>Blogs: </li></ul></ul><ul><ul><ul><li> (English) </li></ul></ul></ul><ul><ul><ul><li> (Dutch) </li></ul></ul></ul><ul><ul><ul><li> (French) </li></ul></ul></ul><ul><li>Training </li></ul><ul><ul><li>Usability </li></ul></ul><ul><ul><li>Writing for the web </li></ul></ul><ul><ul><li>Intranet </li></ul></ul><ul><ul><li>Newsletters </li></ul></ul><ul><ul><li>Information architecture </li></ul></ul><ul><ul><li>Search engine optimisation </li></ul></ul>