Don’t make me think! Few simple and concrete web usability principles – Part 2

weboptimeez

The 2nd half of the book and so the 2nd part of my article deals with the following subjects:

      1. How to get the best of your homepage design ?
      2. Why, When and How conduct usability testing?
      3. User-friendliness and Accessibility


Like in the 1st article, I’ll try to briefly expose what should be remembered from this book. It may not be 100% loyal to the book, 1st because of my interpretation and 2nd because I also express my own point of view.

1. How to get the best of your homepage design ?

Even if your homepage is not the first page that user will get through – it’s commonly known that an entry page is not always homepage, and the less it is the better as your landing page should be reflecting the path the user used to access your website.
Anyway, the homepage is still the page a user will go through during the navigation to have an overall impression, to look for guidance, to restart his navigation… That’s mainly why you need to make sure that on the homepage, people get it!
Here is what they should get:

      – an homepage should give the website identity and mission : a logo and an tagline should be enough – make it clear, short and it should convey differenciation and benefits
      – an homepage should show the website hierarchy : your navigation
      – an homepage should allow to search through a search box, shortcuts, teases and deals
      – an homepage should allow users to complete primary goals (sign up, registration to newsletter, fill a form for a free trial, …)

Your homepage should stay concise and understandable for any users and answers those:

      – what is this site?
      – what do they have?
      – what can I do here ?
      – why should I be here and not somewhere else?

The design of a website especially the homepage and main pages could be a very frustrating and conflicting process. Each team: design, IT, marketing, stakeholders, CEO… want to be a part of it which is certainly a good thing but when you get to a conflict of opinion – which may happen on every feature, every pixel, every color… “who hold the truth?“.
Hopefully, I can answer to this question : “Nobody” pfiouuuu, that’s a relief!

Nevertheless, the real question should be :”How can we realise this feature to provide a good user experience to our web users”. I would say by asking the web users their opinion & testing. This bring us to :

2. Why, When and How conduct usability testing?

I kind of already answer to the Why question, but let’s sum up the reason why you should conduct a usability testing:
Mostly because, using usability testing will improve your revenue through enhancing customer satisfaction & retention, but also:

      – if you want web users to complete the goals you have in mind when building your website, better to ask them directly if they get it or not! (the purpose, the value proposition, the concept, how it works…)
      – if you think that web users will use your website the way you build it for: you’re wrong!
      – if you want to avoid endless discussion with your team, please ask the web users to settle this for you
      – if you think that you are objective (and you’re better not be…): you’re wrong!
      – if you think this is useless: try once with neighbours, friends or anybody to browse the same website (with a similar goal for all : like buy a pair of Nike on Ebay for instance) and watch! You’ll be amazed!
      + it’s easy and fun to do

How not to do usability testing... (Image credit: blog.templatemonster.com)

First of all some guidelines of usability testing concept from Jakob Nielsen and a definition from Wikipedia:

Usability testing is a technique used in user-centered interaction design to evaluate a product by testing it on users. This can be seen as an irreplaceable usability practice, since it gives direct input on how real users use the system.


Here are few guidelines for testing:

      – the sooner in your process the better
      – testing with one web user one is better than nothing
      – testing is an iterative process
      – 3 to 5 users is enough
      – don’t hold the testing because of problem to find the perfect tester- take “anybody” to test “if your grandma can use it an expert/ targeted audience will do”
      + most of all here the Steve Krug’s guide to conduct your testing.

1 rule that I think would be amazingly great, useful and revenue oriented: “Each web dev team should make once morning a month a usability testing and debrief over lunch”.

To conclude about usability testing, I think it’s really a great tool to increase user satisfaction and thus revenue, which finally is the goal in a ecommerce website :). Using usability testing is one tool among others, like AB Testing, Focus group, Card sorting… but each tool have a “perfect timing” during the process of building or enhancing your website.
This leads me to conclude on:

3. User-friendliness and Accessibility

Few guidelines to “behave” and make your web users happy:

      – don’t ask for useless or really annoying form fields: this will lead the users to ask himself why are you asking him those informations and either he will lie or he will quit
      do not hide informations from the users: anything you would want to hide thinking that you can “trick” the web user in filling in registration form first, hold it!
      – no marketing only flash slide intro… which get on the user way to accomplish something
      – do not punish the user for not filling exactly how you think they should – for instance don’t erase all the credit card information because the cardholder name is missing (you should adapt to the web user not the opposite)
      – do everything to make the web user navigation on your website easy!

Accessibility meaning that people with disabilities can use the Web is considered as part of usability.
I’ll not dig into too many details for this part as there are already a lot of guidelines online about this subject and the rules to follow.
Nevertheless here is a quick list, you can follow:

      – make things usable for everyone will help users w/ disabilities (fixing common issues)
      – use CSS and allow your text to resize
      – add alt text to every image & link
      – make your forms work with screen readers
      – make all content accessible by keyboard
      – use client-side image map

That’s it for today (and for the book also)!
You can go on with reading the following book of Steve Krugs “Rocket Surgery Made Easy” (focus on Usability Testing) and also follow his work on www.sensible.com.

From my point of view, this book is a good reminder of a lot of usability guidelines we easily forget and also a great great guide to do some usability testing! I hope this will help you too and lead you to pick some tips, buy the book or conduct some usability testing!

Sangomar 2012, a lead generation oriented website!

weboptimeez

Sangomar2012.com is a website I created for a friend. This website was created on Senegal presidential election occasion to engage the senegalese youth to vote!

I am certainly not a developer, but I really cannot hold on looking into the code, trying to code some stuff myself particularly as WordPress is really easy-going and flexible and also because my companion is web developer… so if I mess things up – as it often happens he could say – he can fix it!
Anyway, don’t want to bother you with my personal life, I just wanted to introduce my last “freelancer” website project Sangomar2012!
One of the reason why, I’ve been kind on lazy those last weeks on the blog, I was doing a website WordPress based for a friend. My friend choosed a wordpress compatible template + his domain and I took care of setting up the website for him. In few words, it was for me the occasion to build from scratch a website with WordPress (except for my blog).

      – From my friend/client point of view, this website was meant to promote and engage young senegalese to vote during the last election. As you may know, we just get the final results a few days ago.
      – From a webmarketer point of view, the main goal of this website is lead generation that’s why I put my effort in making the newsletter subscription form prominent and redundant but not too overwhelming. I used both Google Feedburner email & RSS feed functionalities and also a simple php based form.









I tried to gather the best WP plugins for his needs and also for my curiosity, here is the list of plugin I used to implement the functionalities needed according to the website main objective.

  1. Google Analytics for WordPress, impossible for me not to… I’m too curious
  2. Really simple Facebook Twitter share buttons
  3. HeadSpace2, for SEO purpose to customize page title, description…
  4. SEO Smart Links, also for SEO pupose a great plugin to promote internal links
  5. Simple Google Sitemap XML
  6. Google Feedburner

Very few compared to the list of plugins I’m using for this blog ! This website is my very fisrt one on my own, please feel free to comment, to criticise as long at it can help me to improve…

Allow me to make an aparthe, I’m pretty happy that I spend some time on this website as besides being one of my friend website, this website echoed my personal opinion about why vote is important!

Tracking checkout conversion rate with Google Analytics or Omniture Site Catalyst

weboptimeez

About conversion rate, I would like in this article to dig a little deeper into checkout conversion rate and how to measure it. Currently, I’m doing an AB Test to compare the performance between a classic step-to-step checkout with a less classic “accordion checkout” (not to be confonded with one-page checkout).
Few things to define before talking about tracking with either Google Analytics or Omniture Site Catalyst.

1. Conversion rate

Well, this design should do the trick

Conversion Rate illustration
Illustration from the great great Conversion Rate Experts blog

Our subject being checkout, we will assume that the website is an ecommerce one and as a consequence the main goal/action we want the user to take here is “placed an order”.

2. AB Testing

Also here i think an illustration will express it better than words

Few words about the AB testing subject here.








3. Checkout ergonomy and design

Just want to highlight the difference between : accordion checkout, classic step-to-step checkout and one page checkout. The checkout being the step just after the basket, not to be considered lazy but once again examples is better than words:

  1. Accordion checkout: Following the principle of an accordion, this kind of design hide and show the step following the user progression without leaving the page, it’s a “vertical” design using Ajax most of the time. When the user is taken to the checkout the first section is open and he can see the titles of the following sections just below.
  2. Classic checkout: The classic checkout is more a “horizontal” design, each step of the checkout = one dedicated page.
  3. Single Page Checkout: This kind of checkout design can be horizontal or vertical, the principle here is having everything on the same page and every fields open, better option for short checkout process > everything is visible at a glance.

Context being clear now, lets get quickly to measurement! First of all, most of the checkout being in multiple steps – whatever the kind of design you choose – I would advise to measure 3 things:

  1. Checkout conversion rate = sales / number of carts initiated
  2. Overall conversion rate = sales / unique visitors
  3. Fall out step by step = % of visitors who drop on each step

    4. The 2 first performance indicators can show you trend and the 2nd expecially allow you to compare your rate to market conversion rate: knowing that the formulas can depend but either way the 2nd formula is supposed to be the one the market use and communicate about.

    The fall out indicator is the one you should/could take more time to analyse and set up on your webanalytics tool.

    With Google Analytics

    You first have to set up your goal. In our case, you goal is the last page of the checkout, usually the Thank You page then you have to set up the funnel which is each page/section of your checkout process. This is useful only if your checkout is a multiple page checkout : new step = new page. For one page checkout or accordion checkout, I would implement events tracking to get info about the steps within the page, but I will dig into this in a later article. Here is what you should get from GA:

    Why do I love Google Analytics: because it’s flexible, any webmarketer can do this without involving development team!















    With SiteCatalyst

    You will first have to set the “pagename” in the tracking page properties. But most of the time, this should have been done when implementing Omniture SiteCatalyst the first time. With this, it’s also really easy and flexible as you just have to drag and drop your pagename into the “Fall out report” to build your report!
    Here is what you will get:
    What I do love about SiteCatalyst fallout report, is that you may need developement team help but you will be able to track PAGE and SECTION in a page so any kind of checkout design can be tracked!








    Well, tracking is the first step of optimisation: go this article to learn more about few tips to enhance your checkout flow and decrease your checkout abandon rate.

Don’t make me think! Few simple and concrete web usability principles – Part 1

weboptimeez

Finally, I saved some time to read this very useful and quite short book! This book of Steve Krug, web usability expert and consultant, is a nice way to find simple tips to check you website with fresh eyes and easily pinpoint what should be improved and how final users may think it’s improvable (user-oriented)! And also, it has great guidelines for a revamp or website creation.

The subheadline of this book “A Common Sense Approach to Web Usability” is fully adequate to what it is :). It’s mostly basic stuff but most of those basics are so basic that we tend to overfly them. Reading this book, remind me 2 principles : “Back to the Basics” & “Keep it simple, s“.

In this first article about this book, I’ll go through what I think should be remembered from the first 6 chapters (half of the entire book) in 10 points. Sorry if sometimes, it feels pretty obvious but nevertheless even the obvious is good to be remind of!

Knowing that when we/people use the web:

      ~ People scan web page and do not read all the content of a web page
      ~ People are looking for keyword because we (people) know we dont need to read everything we are just reaching for what we are looking for
      ~ When browsing, people dont search for the best option but for the most reasonable option
      ~ We muddle through as we don’t care about understding, we care about getting to our point

Here are my 10 usabilty guidelines:

      1. Copy, Call-to-action, Headline… : Make it obvious, self evident or at leat self explanatory!
      2. Create a clear visual hierarchy: the more important = the more proeminent
      3. Create a clear visual hierarchy: things related logically are related visually (color, font…)
      4. Use conventions: make it obvious that a call-to-action is clikable | Keep the visual noise down
      5. No needless word get rid of 3/4 of your content
      6. Navigation: give the user something to hold on. Good navigation give us confidence in the website builder
      7. Follow the conventions: Persistent navigation must be including return home, search box, login, category…
      8. Follow the conventions: This persistent navigation should be everywhere exept homepage & checkout
      9. Every page need a name, the name should be the same as the link which take the user on the page or at least match maximum keyword
      10. Exercise… Quick test for a good navigation: At a glance on your pages, Answer to:
      – What’s the site id (logo)
      – On which page am I (page name)
      – What are the major section of the website
      – What are my navigation option at this level
      – How can I search

If you want to go deeper, and you should, read this book: Don’t Make Me Think – A Common Sense Approach to Web Usability. And you can also wait for Part 2 of this article!

Average conversion rate by country in 2011

Average conversion rate by country in 2011

weboptimeez

France is doing pretty well !
Conversion rate by country 2011
Read more on Kissmetrics

So what ?
Conversion rate is on the best KPI to review the effectiveness of Ecommerce sites.
An average of 98% of your visitors don’t buy/convert on your website when browsing. Despite all the improvements in ecommerce websites in recent years, abandonment rates are increasing. But it’s quite normal, knowing that not all your visitors are here for the right reason, some just need information, decision-making can take time and knowing also that consumers are now consulting an average of 10.7 sources when making a buying decision – double the rate of 2010..

Let’s just focus on the checkout abandon rate for instance (actually, it’s because i’m working on this right now 🙂 ). This video Checkout in real life cannot happen in real life, but it happens on a website for an average of 60% of your potential buyer – by potential buyer, I mean a visitor who put a product in his basket. This could be improved by many means, a common list of Todo / Not Todo emerged through the years :
– display trust seals (VeriSign…)
– allow guest checkout and if not explain why you need all that personal information about your buyer
– display a contact number or chat or FAQ… anything to reassure
– show how many steps left and give the buyer an overall impression of his progression
– work hard on your form (get some insights about form best practices here)
– read more here.

And also innovating but keeping conventions in mind, testing and tracking remains to me the best way to improve this rate.
I’m currently running a AB test for my company, comparing onepage-accordion checkout to multiple page checkout, I should be able to share the results in a few ! Knowing for some companies this modification result in a significant increase of their conversion rate… you can guess how much i’m expecting here !
Fingers crossed !