Réussir = simplicité ?

Je suis un grand défenseur de la simplicité : simplicité des concepts, des interfaces, des services.

De manière gérérale, je pense que la simplicité est l’un des éléments clé pour réussir…

C’est bien souvent vrai, mais il y a de sacrés contres exemples…

Facebook notamment !

Ce service est tout sauf simple… On ne comprend pas grand chose quand on regarde ou utilise ce service.

Et pourtant, quel incroyable succès !

C’est la preuve par l’exemple qu’on peut aussi réussir avec un service pas simple !

Bon, c’est pas une raison pour faire des services complexes, hein ?

Même les pros font de grosses erreurs

L’iPhone est un appareil incroyablement bien réussi.

L’ergonomie est réellement bien faite.

Mais il y a des failles, d’incroyables failles.

Ainsi, le truc qui m’énerve, plusieurs fois par jours, c’est le bouton pour afficher la barre de recherche, dans les contacts :

Pour afficher cette barre, indispensable pour chercher un contact, il faut “cliquer” sur la petite loupe.

Mais ce bouton est tout petit, et ça rate jamais : soit c’est le “+” qui est sélectionné (création d’un nouveau contact), soit c’est le premier contact sous la loupe…

Bref, il faut systématiquement 3 ou 4 essais avant de chopper ce p… de bouton.

Belle boutique avec Magento : Pull-In Underwear

Pull-in est une boutique réalisée par Hitomistudio, et propulsée par Magento.

Exemple de page produit : très très sobre, le produit est donc naturellement bien mis en avant.

(Personnellement, j’aurais plutôt mis la colonne prix / Taille / Commande à droite, qui est une zone plus “chaude” qu’à gauche)

La réalisation est propre, bravo donc à l’équipe !

Page produit avec photo XXL

Très intéressant le site Martin & Osa.

On parle souvent de l’importance de mettre de belles et grandes photos pour les produits.

Et bien sur ce site, ils ont poussé très loin cette idée, puisque la photo produit devient carrément le fond de la page :

Le cadrage a été calculé pour être compatible avec cette présentation, ou les informations sur le produit apparaissent en transparence, sur la partie droite de la page.

Autre exemple sur le même produit :

Sur cet exemple là, c’est donc un zoom qui s’affiche en fond de page.

Génial, non ?

Déclinaison Taille / Couleur chez Amazon

Vous ne le savez peut être pas, mais Amazon vend des chaussures :

Les chaussures, comme bien d’autres produits, on la caractéristique de se décliner, en taille et couleur.

Comment Amazon traite ce sujet ?

D’abord, ce qui est “remarquable”, c’est que l’écran est “élastique”, le contenu s’adapte à la largeur de la fenêtre :

Autre élément intéressant : le bouton “Acheter”. Il a son apparence normale, mais quand on rapproche la souris sans avoir choisi le couple couleur / Taille, un petit message s’affiche, au niveau de la souris :

Autre élément très dynamique : la synchronisation “Ajax” des combinaisons taille couleur.

Je m’explique :

Quand on déplace sa souris sur les tailles, dynamiquement, les couleurs associées sont mises à jour.

Réciproquement, quand on déplace sa souris sur les couleurs, les tailles disponibles sont mises en avant, et la grande photo est mise à jour !

Le mieux est d’essayer ici.

GMail et le langage de requêtes

Google est une boite créé par des gars qui ont une vraie culture informatique, et ça laisse des traces ;)

Exemple : savez vous rechercher les mails, dans la boite de réception, non lues ?

Il faut saisir dans le champ de recherche :

in:inbox is:unread

Et oui, on peut taper de véritables requêtes dans le champ de recherche GMail !

C’est à mon sens une interface vraiment réussie, parce qu’elle a plusieurs niveaux d’accès :

  • Le débutant peut simplement taper le mot qu’il recherche ;
  • Le gars plus expérimenté peut aller beaucoup plus loin ;
  • La page qui affiche la recherche avancée affiche la requête associée, c’est donc une interface didactique.

Les nuls du e-commerce…

Bon, j’ai pas l’habitude de “dégommer” les sites sur ce blog. Ce n’est pas l’esprit.

Et puis c’est toujours facile de critiquer…

Mais bon, il y en a qui poussent loin…

Exemple, ce formulaire :

Bon, jusqu’ici, rien de catastrophique.

Il y aurait bien des tas de trucs à dire, mais bon, “pourquoi pas” pourrait on dire….

J’ai donc rempli sagement ce formulaire…

Et non, il y a une erreur : il faut ajouter une région.

Ah zut, il n’y a pas de champ Région dans le formulaire !

Voilà donc une équipe marketing qui ne fera pas trop de spam…

Des menus dynamiques pour naviguer dans les catégories

Suite au billet sur Estée Lauder, je me suis dit que c’était sans doute une bonne idée de creuser un peu plus cette histoire de menus de navigation dans les catégories.

Donc, la question, c’est comment présenter les catégories, pour que l’utilisateur s’y retrouve.

La question devient de plus en plus critique quand le nombre de références augmente : on risque d’avoir alors des “listes à la Prévert”…

Une première question est : ou mettre ces menus.

Le standard de fait est de les mettre en haut de la page, sur une barre :

On peut également mettre ces catégories sur deux lignes :

Sur ce sujet, Amazon innove, en plaçant ce menu en colonne, à gauche :

De plus en plus, les boutons des catégories sont en fait actifs, et permettent d’afficher un menu plus complet (Merci Javascript).

Quelques exemples :

L’étude attentive de ces exemples est super intéressante, et mine de rien, les différences sont nombreuses :

  • Certains menus font pro, d’autres non (je vous laisse vous faire votre opinion…) ;
  • Pour certains sites, il faut cliquer pour ouvrir le menu. Sur d’autres sites, le menu s’ouvre tout seul.
  • Certains menu s’ouvrent avec une mise en scène : comme un rideau, … Alors que d’autres s’affichent d’un coup.
  • Certains menus présente une simple liste, alors que d’autres sont beaucoup plus structurés, avec des espaces différents, …
  • Sur certains sites, les menus ne s’ouvrent pas tout de suite : il faut charger des éléments. Sur d’autres, les éléments ont été pré-chargés.
  • Quand on déplace la souris sur les lignes, la ligne peut être mise en valeur… ou pas.

Voilà, je pense que ma démonstration est faite : pour un résultat de bonne qualité, il faut un savant mixe entre plusieurs métiers :

  • Une bonne analyse du catalogue, pour faire les bons regroupements et créer les bonnes catégories. Bonne pour le Web !
  • Une bonne conception, ergonomique, avec un travail précis sur la dynamique des menus.
  • Une excellente réalisation technique, qui ne doit pas être traité à la fin… mais au fil de l’eau, avec une approche eXtreme programming, pour que la réalisation de très bonne qualité sorte, après nécessairement plusieurs itérations.

Actuellement, on ne peut pas décoreler les différents métiers. Il faut assurer une cohérence globale pour avoir un résultat … qui transforme.

Remplir les formulaires contact automatiquement avec Reversoform

On le sait tous : les formulaires de création de compte représentent une véritable corvée pour le client, et un challenge pour le e-commerce.

C’est une zone de fuite importante dans le processus achat.

Alors, pour avoir plus de clients qui achètent, soit vous suivez les conseils avisés de notre capitaine préféré, soit vous pouvez utiliser des solutions qui facilite la vie de l’internaute.

Reversoform entre dans la deuxième catégorie.

L’idée est simple : l’internaute renseigne juste un numéro de téléphone fixe, et le reste du formulaire est automatiquement renseigné :

Dans cet exemple, j’ai a peine eu le temps de saisir mon numéro de téléphone que déjà, sans avoir à cliquer, le formulaire est rempli.

Pour le e-commerçant, c’est l’assurance d’avoir un formulaire bien renseigné.

Pour le client, c’est facile et bien plus rapide.

Combien ça coute ?

Le e-commerçant paye à l’usage (nombre de formulaire renseigné).

Checkout en une page ?

Vous pensez quoi de cette copie d’écran, reprenant le processus de checkout d’un site marchand us ?

Ouf, vous êtes encore là, après avoir eu le courrage de “scroller” : bravo !

Donc, vous en pensez quoi de ce processus d’achat, avec un choix très fort : une seule page pour l’ensemble du processus achat, quite à avoir une page forcément très longue…

Vous pensez que ça va pas bien transformer ? Qu’il vaudrait mieux découper ça en plusieurs pages, plus digestes ?

Erreur !

L’AB Testing a parlé : cette page transforme beaucoup, beaucoup plus pour ce site que la version avec plusieurs pages.