blog e-commerce, François Ziserman
e-commerce, marketing des sites marchands, technologies 2.0, entrepreneuriat,...

Chaque fois que ma chère épouse revient de Bretagne, cela me donne l’occasion de tester bien à fond le site www.amendes.gouv.fr :

Pas grand chose à redire :

• L’ergonomie est claire ;
• Le service est simple ;
• Le “chemin” est bien balisé, on trouve facilement les options dont on a besoin.

Allez, quelques pistes d’amélioration :

• Une option pour payer à la chaîne plusieurs amendes, en ne saisissant qu’une seule fois le numéro de carte bleue ;
• Une option, pour pouvoir préciser, que très bien, je paye, mais pouvoir dire qui est le conducteur concerné par le retrait des points…

La nouvelle version de firefox est nettement mieux intégrée dans la charte de chaque OS.

Sur Mac, l’interface reprend l’effet “acier brossé” du meilleur gout.

J’en parlais dans mon billet précédent, dans une bonne interface, il faut différencier, pour le même bouton, plusieurs états : repos, quand la souris passe dessus, et quand on a cliqué.

Voici les trois états, proposés par Firefox, pour le même bouton :

Et le curseur tournant pour attendre l’affichage ? Sur Firefox, il est mis en œuvre à plusieurs endroit : sur l’onglet en cours de chargement et à droite de la barre d’adresse.

Sur une interface Web, on peut positionner ce curseur dans le bouton, mais il y a bien sûr d’autres options possibles.

Quand on dessine un site, on se pose rapidement la question de la largeur de l’écran, qui va conditionner la largeur d’affichage de la page.

On est ainsi passé du 640 au 800, et maintenant au 1024.

Ce genre de réflexion conduit à faire un site de largeur fixe, adapté à une taille d’écran donné.

Si l’écran est plus petit, il y aura un vilain ascenseur en bas de la fenêtre du navigateur.

Si l’écran est plus grand, il y aura une bordure, à gauche et à droite du contenu… Comme sur ce blog par exemple.

Tout cela est en fait bien dommage, pour plusieurs raisons :

• La taille des écrans est très variable, et va continuer à évoluer. On ne peut donc pas avoir un site adapté à tous les cas ;
• C’est très réducteur de faire le choix du “plus petit dénominateur commun”, faire des écrans étroits, qui ne seront pas adapté aux grands écrans ;
• Le navigateur n’est qu’une fenêtre dans l’écran. Qui nous dit que l’internaute veux afficher sa fenêtre en plein écran ? Donc, même si l’internaute à un grand écran, on ne peut pas préjuger de la taille qui nous sera allouée.

Comment répondre à cette problématique ?

La meilleure solution est probablement de concevoir sa page avec une largeur variable.

Concrètement, il faut quand même définir une largeur minimum. Tout ne peut pas être variable, il faut bien une taille minimum.

Ensuite, la disposition des éléments HTML s’adapte à la largeur de la fenêtre.

Prenons comme exemple Amazon (par hazard ).

Voici la fenêtre, la plus petite possible (880 pixels) :

Voici la même page, dans une fenêtre beaucoup plus large (1400 pixels) :

Cet exemple permet de montrer toute la richesse de cette adaptation dynamique :

• Les onglets restent de taille fixe et centrés (on doit pouvoir faire mieux ) ;
• La largeur de la colonne de gauche évolue, entre un minimum et un maximum ;
• La colonne de droite est de largeur fixe ;
• Pratiquement toute l’adaptation se fait en fait au milieu ;
• La partie la mieux faite étant la deuxième ligne, ou le nombre de produits évolue dynamiquement, en fonction de la largeur disponible (ajax…).

Dans cet exemple, on a bien une utiliation (presque) optimum de l’espace, quel que soit la taille de cet espace.

Mais voilà, concevoir de tels interfaces est beaucoup plus difficile, et réellement beaucoup plus long, donc, mécaniquement… plus cher !

La simplicité est l’un de mes sujets favori, vous le savez !

Je suis complètement convaincu que pour réussir, il faut faire des choix.

Un e-commerçant doit faire des choix. Il se bat dans un environnement extrêmement concurrentiel. Pour de démarquer, il faut être le meilleur. Et comme on ne peut pas être bon partout…

Je vous propose de regarder ce que fait Apple en la matière.

Rappelons qu’Apple a de nombreuses activités, entre la vente de logiciels serveurs, de serveurs, le support qui doit gérer l’historique des produits, …

Comment le site Web d’Apple est-il structuré pour présenter simplement toutes ces activités ?

Cette page d’accueil est vraiment remarquable pour plusieurs raisons.

Premièrement, 90% de l’espace est occupé pour mettre en valeur le nouveau produit d’Apple (le MacBook Air en l’occurrence).

Cette mise en avant est orientée sur l’image avec une grande photo du produit, et juste une phrase.

Deuxièmement, cette page contient très peu de liens, et ouvre donc sur peu d’actions : la barre d’entête du site ne contient que 7 boutons plus un champ de recherche : 3 boutons produits (Mac, iPod et iPhone), 2 boutons support, un bouton accueil et un bouton pour aller dans l’espace marchand.

Le champ de recherche est particulièrement intéressant :

Plusieurs éléments remarquables :

• L’affichage des résultats se fait en temps réel, au fil de la saisie (fonction Ajax) ;
• Les résultats sont présentés de manière particulièrement claire, avec des chapitres (Produits, Espace Marchand, …), et chaque élément est présenté avec une petite image.
• Le système n’affiche pas tous les résultats : juste une sélection, bien lisible.

En dessous de la très grande publicité pour le MacBook Air, une ligne de news, puis 4 espaces de publicité :

Trois images sur 4 pour mettre en avant les nouveaux produits d’Apple…

Enfin, le pied de page :

Au delà des inévitables liens obligatoires, ce pied de page est le seul endroit ou l’on pourra trouver des informations très utiles, comme le site-map, seul sésame pour accéder à certains services Apple (comme l’espace Serveur) ou le sélecteur de pays (tout en bas).

Ce site est optimisé pour s’afficher sur un écran 1024 de large. Choix raisonnable, mais qui écarte 8 à 9% des Internautes ayant un écran 800*600 (et oui, ça existe encore ).

Pour conclure

Le site d’Apple met en scène une stratégie particulièrement claire :

• Mettre en avant les nouveaux produits (Macbook Air, iPhone, iPod) ;
• Vendre les produits en direct (espace marchand accessible depuis la page d’accueil, et lien “acheter” sur les fiches produits).

Mon billet précédent (celui là bien sûr) a eu son petit succès.

On est tous bien d’accord, la question, c’est comment vendre plus, comment utiliser les interfaces riches pour mieux mettre en valeur le produit.

Dans ce nouvel exemple, le produit est mis en valeur avec une interface 3D, sous flash :

Vous trouvez pas qu’ils sont bien présentés les produits ?

En tout cas, on est en plein sur le sujet de RichCommerce.fr.

Bon, je suis sur la mauvaise pente moi, qu’est-ce que je vais vous montrer demain ?