Using great visuals = Failing your customers

by Urs E. Gattiker on 2009/12/24 · 22 comments 11,444 views

in c blogging - case studies,e marketing 101 KISS,e marketing 101 serving a need,e marketing 101 style matters

Image - Sign-up button for MyComMetrics - 1st versionA week ago we brought you three reasons why A/B testing fails in web design, including but not limited to:

    1. The 30 percent rule.
    2. Designers do not automatically know what clients crave.
    3. The US is not the world – LOL (laughing out loud).

Below we share how this was applied to one of our own websites and outline the lessons we came away with from this exercise. To give you the biggest benefit, please download the 8-page document:

Step 1: Yes, creating a mock-up helps
As shown in the above document, we made a mock-up based on what we knew about usability design, our server-side statistics, guideline reviews and input by other experts, in the hopes that it would suit our clients.

It was then submitted to some reviewers and was tweaked after we looked through some sites we thought did a great job. Of course, the question was whether our clients would like it.

Lesson 1: Selling legal services in Brazil is not the same as in Canada, and building a website for books in Germany or designer coffee in Sweden are completely different ballgames. The reality check is what your customers need and prefer. If your mock-up design does not reflect this, you are off to a bad start.

Step 2: Choosing the designer(s) is the easy part
We wanted a team that successfully uses social media and networks for their own purposes, while going beyond the usual fare.

Most designers have a preference and tend to repeat themselves over and over with each new contract – so the real clincher is whether you can get them to think outside the box.

Lesson 2: You must be able to convince the designer(s) that meeting your clients’ usability needs is what matters, not their preferences for certain approaches.

Step 3: User feedback is key
We started with two choices and did an A/B test by showing users two designs and asking them their preference. We took their responses regarding choices 1 and 2, as well as some additional comments to create another design (see page 4 in the above document).

Lesson 3: Convincing designers that things may be quite the opposite of their own preferences is tricky. However, smart designers will always consider client preferences (meaning your customers’ usability needs) a valid reason to change things.

Step 4: Keep some testers from beginning to end
We also added new testers in every new review cycle while keeping some for the duration of our improvement process.

For instance, over 60 percent of the ‘old hands’ liked what they got with our design on page 4, while others, along with some first-time reviewers, asked for some changes. Both groups wanted us to use darker graphics and visuals, as presented in the design on page 3, and our design on page 6 reflects that. Some testers felt this small change would make it much easier to read and comprehend the message we intended to convey.

Lesson 4: Testers have different talents. Some can tell you quite succinctly what does not suit them on a design, while others have ideas to fix a particular challenge. Both need to be part of your group of testers. No doubt, customers serving as testers can be an invaluable source of insight.

Image - Sign-up button for My.ComMetrics.com - what works best - branding and colors fitStep 5: One little tweak can make a huge difference
To illustrate, we redeveloped our sign-up button (see top right). While some clients felt this improved things, a clear connection to the My.ComMetrics.com tools was now missing, so we added some text (see right) and made sure that My.ComMetrics.com uses the same font-color as the headline (see below ComMetrics).

Image - logo for ComMetrics and byline - tools for benchmarking social media

We used a bar-graph as the logo because it conveys numbers and data to most business people (think spreadsheet, as two testers put it). The words in the byline also have meaning for our clientele, especially tools and benchmarking.

Lesson 5: Listen to your customers! If more than 30 percent believe a change might help, seriously consider it. Focusing on the critical changes while sticking to the KISS (Keep it Simple, Stupid) principle helps improve usability.

More resources about A/B testing, usability and more

Bottom line
We all crave conversion, but it is often more than getting a client to purchase your corporate strategy or landing a new contract for whatever product or service you sell.

A site needs to give people the information required to get their problems solved while keeping them engaged. This helps encourage them to continue through the marketing funnel (e.g., go from our blog to signing up and using our product and eventually upgrading from freemium to premium).

Take-aways
There are some crucial things to remember about designing a website or a product (e.g., household goods).

    1. The in-law acid test: One of our customers told us that everybody needs to use an older (e.g., age 70) web surfer to test a design. If navigation and usability is such that they can easily find what they came for and complete the process you want them to, your design has successfully cleared a big usability hurdle.
    2. Be thankful that your designer and clients threw out your original design suggestion: Yes, crowdsourcing CAN work for this clearly defined problem. If your clients are motivated to help, you can end up with something that much better. If you end up with the original design smiling back at you, something went wrong. Guaranteed.
    3. Worry if it looks like Las Vegas: Show me a site with great visual appeal and I am pretty sure it was created without doing A/B tests, interviewing clients and usability testing with design review. Our users wanted a simple, relatively bland design. Accordingly, our desire to add color and visuals got thrown out early on the way to the final design. Sure, we have an international crowd of business folks, and you can relax because your music lovers are different. Or maybe NOT.

Please, leave a comment! We love to hear your thoughts: how have you improved how your webpage feels and looks. Here is a chance for anyone with first-hand knowledge (this means you!) to please share your insights.

P.S. – You can get updates on this blog in Twitter by following @ComMetrics. You can also get a free subscription by RSS or:



  • http://www.pookymedia.com/ pookyamsterdam

    Using effective video is a hallmark of professionalism, if one picture is a 100 words than a video is a hundred thousand. And this can offer a feature to any site that is an addition to and supplements the content. Getting client and potential feedback involves a broader set of reactions and this makes a lot of sense.
    I love the in-law acid test and think that this will be a mantra of the new decade for usability. Great post, and very easy to read. Thank you!

    • http://My.ComMetrics.com Urs E. Gattiker

      Pooky

      Thanks for your comment – I think video is great as long as people can get the message. However, as you probably know better than most, with the fragmentation of our markets (e.g., TV channels) it is becoming ever more difficult to reach a wide segment.

      For instance, based on language, age, spending power, religion and so forth videos or visuals need to target their markets ever more carefully to avoid negative press with those possibly being offended or feeling misunderstood.

      The next decade will show how effective we can handle these challenges. We will see who copes the best.

      Thanks and I wish you and your loved ones a Merry Christmas!

  • denikasrel

    Great post with many worthwhile points. All matter, though lesson 2 is sometimes a stickier wicket than one might like, and it not only applies to designers, but the website owner(s) — as in the person/company whose website it is. The key is to recognize that attractive design and good usability are not necessarily one and the same — you can have the former without the latter (it happens a lot).

    Also a biggie: Step 5, small changes can make big differences, both positive and negative. And this is one area where many surprises can pop up when testing. The determination of usability (or not) is in the testing. Not the designer's or anyone else's opinion.

    And once you launch, further testing results come by way of analytics tools, like the one's provided by ComMetrics.

    • http://My.ComMetrics.com Urs E. Gattiker

      Deni

      This is an interesting comment indeed. I have been wondering about these things myself. It is a difficult balancing act one must master to address lesson 2 successfully. The added difficulty with the Internet is that designing a good website is a critical step. But ever more important is that the designer is being comfortable using the technology effectively him/herself. This type of designer we were after for our website.

      A great challenge to achieve usability is to make sure that the designer does not design something that fails to work with social media of today and maybe tomorrow. It is one thing to put up a great blog, however, offering users to share their comments written on a blog post easily is a second albeit very important step. Hence, to achieve usability you also need a designer who understands this challenge and feels comfortable building these options into the final design to enhance the user experience.

      Step 5 is a real cruncher because unless one tests by making one tweak at the time and re-testing before doing the next one, things can go awfully wrong. My.ComMetrics.com tools can help but talking to users is key and to do some testing (e.g., change, test, change again, and so forth) is important. Especially, sometimes one can change one little thing only and then must test again before doing another change. Unless this is done, one is never sure what caused the results. To illustrate, we tweaked our sign up box with one byline, then we tested before we made the next change. Hence, we could identify succinctly which of either change triggered what kind of response from our target groups. This helped to improve the mileage we got out of the small changes in order to improve the user experience.

      Fascinating topic and since we are now changing http://info.CyTRAP.eu and http://HowTo.ComMetrics.com as well, I am looking forward to see the improvements in the area of user experience.

      Thanks for sharing Deni and Happy Holidays.

  • nilsmontan

    Yes, I think that sites can be overdesigned for sure and I much prefer simplier sites. By the way, although I am only 60, I can act as your site tester for a small fee.

  • http://My.ComMetrics.com Urs E. Gattiker

    Nils: nnThanks so much for leaving this comment. Your statement:nn”I am only 60, I can act as your site tester” nnintrigued me. For starter, you helped us out already and it is very much appreciated Nils. nSecond, age is most certainly one moderator that effects usability AND user experience of a web site, blog or tool hosted online.nnAnother factor might also be country the user comes from, cultural background, gender, level of education.nnWe tested for a few of these moderators and reported on our experiences here:nnhttp://www.cytrap.eu/files/ComMetrics/2009/pdf/12/2009-12-21-ABtesting-what-steps-ComMetrics-went-through.pdfnnI hope the above is interesting :-). If there are other things that you or any of our readers, users and so forth think need to be improved, please drop me a line.nnThanks for commentingnnUrs nhttp.//My.ComMetrics.com – benchmark your blog to improven

  • http://My.ComMetrics.com Urs E. Gattiker

    Nils: nnThanks so much for leaving this comment. Your statement:nn”I am only 60, I can act as your site tester” nnintrigued me. For starter, you helped us out already and it is very much appreciated Nils. nSecond, age is most certainly one moderator that effects usability AND user experience of a web site, blog or tool hosted online.nnAnother factor might also be country the user comes from, cultural background, gender, level of education.nnWe tested for a few of these moderators and reported on our experiences here:nnhttp://www.cytrap.eu/files/ComMetrics/2009/pdf/12/2009-12-21-ABtesting-what-steps-ComMetrics-went-through.pdfnnI hope the above is interesting :-). If there are other things that you or any of our readers, users and so forth think need to be improved, please drop me a line.nnThanks for commentingnnUrs nhttp.//My.ComMetrics.com – benchmark your blog to improven

  • http://My.ComMetrics.com Urs E. Gattiker

    Nils: nnThanks so much for leaving this comment. Your statement:nn”I am only 60, I can act as your site tester” nnintrigued me. For starter, you helped us out already and it is very much appreciated Nils. nSecond, age is most certainly one moderator that effects usability AND user experience of a web site, blog or tool hosted online.nnAnother factor might also be country the user comes from, cultural background, gender, level of education.nnWe tested for a few of these moderators and reported on our experiences here:nnhttp://www.cytrap.eu/files/ComMetrics/2009/pdf/12/2009-12-21-ABtesting-what-steps-ComMetrics-went-through.pdfnnI hope the above is interesting :-). If there are other things that you or any of our readers, users and so forth think need to be improved, please drop me a line.nnThanks for commentingnnUrs nhttp.//My.ComMetrics.com – benchmark your blog to improven

  • http://My.ComMetrics.com Urs E. Gattiker

    Nils: nnThanks so much for leaving this comment. Your statement:nn”I am only 60, I can act as your site tester” nnintrigued me. For starter, you helped us out already and it is very much appreciated Nils. nSecond, age is most certainly one moderator that effects usability AND user experience of a web site, blog or tool hosted online.nnAnother factor might also be country the user comes from, cultural background, gender, level of education.nnWe tested for a few of these moderators and reported on our experiences here:nnhttp://www.cytrap.eu/files/ComMetrics/2009/pdf/12/2009-12-21-ABtesting-what-steps-ComMetrics-went-through.pdfnnI hope the above is interesting :-). If there are other things that you or any of our readers, users and so forth think need to be improved, please drop me a line.nnThanks for commentingnnUrs nhttp.//My.ComMetrics.com – benchmark your blog to improven

  • http://My.ComMetrics.com Urs E. Gattiker

    Nils:

    Thanks so much for leaving this comment. Your statement:

    “I am only 60, I can act as your site tester”

    intrigued me. For starter, you helped us out already and it is very much appreciated Nils.
    Second, age is most certainly one moderator that effects usability AND user experience of a web site, blog or tool hosted online.

    Another factor might also be country the user comes from, cultural background, gender, level of education.

    We tested for a few of these moderators and reported on our experiences here:

    http://www.cytrap.eu/files/ComMetrics/2009/pdf/

    I hope the above is interesting :-). If there are other things that you or any of our readers, users and so forth think need to be improved, please drop me a line.

    Thanks for commenting

    Urs
    http.//My.ComMetrics.com – benchmark your blog to improve

  • Pingback: Revolver PR

  • Pingback: Paul Blaser

  • Pingback: Adrián Segovia

  • Pingback: かっくん カタリストのつぶやき

  • Pingback: abtests

  • Pingback: Paul Milford

  • Pingback: Kazumasa Harumoto

  • Pingback: Rex Dixon

  • Pingback: IDS IT Solutions

  • Pingback: Sarah Rink

  • Pingback: 4 strategies to leverage usability tests » best practice, checklist, social media monitoring, social media marketing, benchmark testing, Twitter monitoring, Facebook strategy, customer engagement » ComMetrics University social media seminar (Weiterbildu

  • Pingback: 2011 trends: Mobile communication and ROI » trendwatch, social media monitoring, social media marketing, best practice, Twitter monitoring, benchmark test, Facebook strategy, customer engagement » Helping you benchmark smarter to increase ROI with: Soci

Previous post:

Next post: