Responsive web design

5 scary facts & stats about UX & Ecommerce I learned those past weeks

weboptimeez

Only 3% of the websites are judged satisfying in term of usability from a user point of view…

You may have heard of the results from Forrester Website usability report March 2012, well it’s a little depressing to know that so few users are satisfied when browsing a website. Despite the fact that it’s common mistakes since 10 years that we, web marketers, developers, webmaster… do, it can also be encouraging to know that the edge of improvement is huge. I would recommend more than anything the book I just finish and to make it short both articles I wrote about it “Few simple and concrete web usability principles“. If there is just one thing I would remind, it will be “If your grandmother can use it, then any expert/targeted audience you have will be able to use it…”

80% of customers abandon a mobile site if they have a bad user experience.


Well that sounds quite normal! As we know that mobile browser user are supposed to be more demanding, we must find a way to meet their expectations so which way will be the better : mobile first? responsive design? mobile app, mobile-tablet-any device site?… well, I think the discussion is still going on. You may know my position on the subject, I tend to believe that the responsive design although being hard-work, is the better we can offer for user experience. Anyway, as I was saying : the discussion is still on the flow: check the latest hot topic “Designers respond to Nielsen on mobile” since Jakob Nielsen last alertbox

At least 59% of potential web shoppers abandon their shopping cart


For sure, the checkout abandon rate improvement is on of the common most and revenue-driven subject, we webmarketers work on. Aside from the subjects, I went through with others articles: “How-to track your checkout conversion rate“ or “Best practices to decrease abandon rate“, here are some new tips I found from the E-commerce Usability Survey study by Baymard Institute 2011. This 148 pages report is really complete but I’ll not be able nor allowed to give away all the tips here. Let me just sum up the 6 categories that the report go through to help us enhance the checkout process:

      Data input (any kind of data input the customer must enter during checkout): this part is mostly about form usability. As ressources, I’ll advise Luke Wroblewski reading: either his book Web Form Design: Filling in the Blanks (not so free) or his writings 100% FREE
      Copywriting : the use and wording of text throughout the checkout process. I would briefly say: be clear and concise & careful to your call-to-action
      Layout: the visual layout of the checkout pages. This part is clearly about design and usability: “be consistent and clear in you visual hierarchy, the more important the more proeminent and keep the visual noise down”
      Navigation: the implementation of process steps, buttons, and navigational links.
      Flow: the flow between the individual process steps. This part give some guidelines to avoid customer confusion during the process : “having steps within steps confuses and intimidates
      customers as it breaks with their mental model of a linear checkout”.
      Focus: the site’s own business benefits vs. the customer’s shopping experience. This one is a “How-to make you web user life easy|happy OR Stop annoying your web users with your point of view or your needs.”

Access the whole survey here.

70% of shoppers use their smartphone while shopping in the store

Source: The Mobile Movement Study, Google/Ipsos OTX MediaCT , Apr 2011
This fact is not really scary but for cross channel business it’s a significant data. It’s a significant info to know that in-store people rely both on your sales person and customers online reviews to make a decision! It’s useful to know that while browsing to get information people could find any information (promotion, bad reviews…) and leave your store… This make an echo to “WINNING THE ZERO MOMENT OF TRUTH”. The way we shop is definitely changing : multiple device, multiple channel, multiple source of informations…

A 1 second delay in page response can result in a 7% reduction in conversions.


This one is not new but really a crazy fact, check here a great infography to understand how significant it can be“How Loading Time Affects Your Bottom Line“. And if you do not use it already, install Page Speed (Firebug extension) or test your website with the Google Tool : Page Speed & finally track it continuously in Google Webmaster Tools as Page Speed beign a user experience matter but also a SEO matter.

I know this sound terribly depressing… NO, it’s not! It’s challenging! Sorry I’m an eternal optimistic…

I hope the few links I shared will help if you get to work on of this challenge and if not you may start.

Mobile first ? 25% of US mobile web users exclusively use mobile web

weboptimeez

Doit-on designer pour le mobile en 1er ? Nos sites, apps mobiles… doivent-ils être une version light du site mère ? Dois-je avoir un site mobile + une app smartphone + une app tablette… ?

Un ensemble d’opinions sur le design et l’ergo mobile qui va l’encontre de ce que l’on a l’habitude d’entendre jusque peu…
Voici les quelques mythes que l’auteur Josh Clark s’appliquent a démystifier avec beaucoup de sens :

  • Myth #1: Mobile users are rushed and distracted.
  • Myth #2: Mobile = Less
  • Myth #3: Complexity is a dirty word.
  • Myth #4: Extra taps and clicks are evil
  • Myth #5: Gotta have a mobile website
  • Myth #6: Mobile is about apps
  • Myth #7: Content & API are for database nerds.

Lire la presentation complète

Ce constat “65% des utilisateurs de smartphones en France ne veulent pas perdre en confort de navigation sous prétexte d’être sur le mobile” pousse en effet a considérer la navigation mobile et son contenu autrement. Au delà de la facilité de navigation, la qualité du contenu est aussi importante. Pourquoi devoir finir sa navigation sur son navigateur de bureau si l’on peut tout faire de son smartphone, pourquoi frustrer l’utilisateur…

Le challenge du mobile serait de faire encore mieux d’un point de vue expérience utilisateur que nos sites web. Faire rentrer au chausse pied tout nos contenu sur la version mobile ?

Ok, c’est un peu une obsession en ce moment donc je ne ferais que le citer : le responsive design peut-être un début de réponse tout particulièrement pour les sites très axes contenus type journaux en ligne, blog…
Néanmoins, je ne pense qu’il y ait de réponse uniforme a cette problématique tout dépend du business et type de contenu que vous avez en ligne et du type d’utilisateurs que vous ciblez.

Mais, il est bon de savoir que le surf se transfère de plus en plus sur nos smartphones, que certaines personnes ne naviguent plus que sur leur mobile, que les apps restent une des utilisations 1eres d’un utilisateur de smartphone… Bref beaucoup de choses a prendre en compte ou pas dans l’optimisation de sa stratégie mobile !

Bonne lecture !

Lire la présentation complète

Responsive web design pour l’emailing

weboptimeez

L’email n’a beau pas être mon point de prédilection, mes diverses expériences m’ont amené a gérer des campagnes emailings, des mises en place de stratégie e-Crm – a petite échelle bien sur. A cette époque, l’optimisation de l’email se penchait principalement sur : ne pas être considéré comme spammeur, la règle du 2/3 de texte, la personnalisation de l’email, son objet, l’expéditeur, essayez de corréler le besoin de l’utilisateur au contenu qu’on lui envoi en fonction de sa navigation ou de son désir exprimé, le rythme d’envoi…
Depuis quelques temps, mon esprit était particulièrement absorbée par le CRO onsite, le webanalytics… donc exit l’email. Jusqu’à ce qu’il s’immisce dans ma vie perso et m’agace sérieusement : j’ai récemment troque mon blackberry pour un Iphone et checker ses emails et ses newsletters sur son smartphone vraiment, c’est m**** pas user-friendly pour un sou !

A quand l’optimisation des newsletters pour nos smartphones ? Tout récemment, j’écrivais un article sur le responsive web design – je pense qu’il est temps de concevoir nos newsletters sur le même modèle dans un souci d’efficacité et d’être user-centric.

L’utilisation de media querie | @media only screen and (max-device-width: 480px) { … } | s’applique aussi bien a ce cas :

C’est possible et vraiment utile a mon avis a l’heure des tablettes des smartphones et autres…

Malheureusement, il semblerait que pour le moment uniquement les Iphone puissent en bénéficier mais j’imagine que comme pour toute bonne idée ce n’est plus qu’une question de temps pour qu’ Android et autres suivent 🙂

En savoir plus :

Responsive web design : l’experience utilisateur cross-device comme on aime…

weboptimeez

Le responsive web design : il semblerait que ce soit le sujet du webdesign en ce moment parmi d’autres et effectivement ça vaut le coup d’en parler, alors je share…
Cette vidéo nous explique comment en conservant le même html et en ajoutant quelques lignes de css spécifiques pour chaque device (ipad, tablet, smartphone, laptop…) ; on peut apporter une expérience utilisateur continue a nos utilisateurs !
Comme ceci :
ou ceci

Decouvrez la video : Responsive Web Design: A Visual Guide ici. J’adore, un peu geeky mais la 1/2 heure vaut le coup 😉