Archives par mot-clé : Ergonomie

Le petit plus des produits d’Apple

Quel est le secret de la réusite des produits d’Apple ?

Pour simplifier ce billet, je ne parle que des produits, et pas du marketing.

Ont ils une recette magique pour faire des produits parfait ?

Non. Si on prend l’exemple des iPod : ils sont fragiles, n’ont pas de radio FM, ni d’enregistreur, et on ne peut pas facilemement changer la batterie. Ils n’intègrent pas le Bluetooth ni le Wifi.

Ce ne sont donc pas les produits les plus puissants.

iPodPour moi, ce qui caractérise les produits d’Apple, c’est :

  • Un design très travaillé, très épuré ;
  • Une ergonomie là également très travaillée ;
  • Des fonctions choisies avec soin. Il ne s’agit pas de vouloir tout mettre, mais de mettre juste ce qu’il faut ;
  • Une gamme de produit très travaillée, et très réduite, là encore, juste les produits qu’il faut ;
  • Un soupson d’innovation, là ou il faut, bien souvent au service de l’ergonomie.

Dans un livre que j’avais lu sur Steve Jobs dans les années 90, l’auteur racontait que Steve Jobs était un maniaque de « l’esthétique par le vide », « zen ». On voyait par exemple des photos de sa maison de l’époque, avec une très grande pièce de 400 m2, complètement vide.

Ce qui marque quand on compare un iPod avec un concurrent, c’est bien cette recherche de simplicité, poussée très loin.

C’est évidement ce qui saute aux yeux quand on regarde l’iPhone :

iPhone

Il ne sera pas le plus puissant (a priori pas de 3G, un appareil photo plutôt moyen, pas de clavier intégré…).

Mais ce sera clairement le plus travaillé au niveau design et ergonomie.

Et ce produit reste dans la tradition d’Apple : de l’innovation au service du design et de l’ergonomie avec l’écran multi-touch.

Le lien avec le e-commerce me semble très intéressant. Par exemple :

  • Ne pas chercher à vendre trop de produits, mais choisir les bons produits ;
  • Faire un site simple et dépouillé ;
  • Proposer les bonnes fonctions au bon moment.

La stratégie d’Amazon pour les formulaires

J’en parlais déjà dans ce billet, la taille des formulaires est un élément clé.

C’est tout simplement du taux de transformation dont on parle : un formulaire trop long ou mal fait, et les utilisateurs qui abandonnent une commande en cours sont plus nombreux.

Pour répondre à ce problème, le site Amazon a mis en place une tactique simple : réduire au maximum la taille des formulaires et retarder le plus possible la demande d’informations.

Ainsi, sur le site d’Amazon, il n’y a presque pas d’informations facultatives demandées, et à la différence de la plupart des sites, dans les formulaires d’Amazon, par défaut, les champs sont obligatoires (les champs facultatifs sont indiqués comme tels  :

Exemple de formulaire de création de compte sur Amazon

Le formulaire ci dessus contient l’ensemble des champs pour la création d’un compte ! Trois champs obligatoires et un champ facultafif : qui dit mieux ?

Bien sur, pour finaliser une commande, il faudra demander d’autres informations (l’adresse, le n° de carte bleue, …) mais la stratégie d’Amazon est claire : demander à l’utilisateur de rentrer les informations le plus tard possible.

Cela permet :

  • De bien expliquer à l’utilisateur pourquoi on lui demande une information ;
  • D’avoir des formulaires plus petits et donc moins rébarbatifs.

Amazon ou Amazon ?

Bon, en premier, une copie d’écran du site Amazon :

Page d'accueil du site d'Amazon France

Et maintenant, la même page d’accueil d’Amazon :

Page d'accueil du site d'Amazon Us

Bon, bien sur, la première image, c’est le site français, et la deuxième, c’est la version US du site.

Vous aviez remarqué, vous, à quel point les sites Français et US sont différents ?

D’abord, dans la version US, les boutons, les onglets ont un joli effet 3D.

La barre du haut de page a été considérablement aplatie, ce qui permet de gagner beaucoup de place… pour présenter plus d’informations dynamique à l’utilisateur : la barre française fait 220 pixels de haut, contre 118 pour la barre US : plus de 100 pixels économisés !

La colonne de gauche a également été fortement réduite : on est passé de 156 pixels à 109 pixels, soit une cure amincissante de 30% !

Qui en profite :  la zone centrale évidemment, qui a donc beaucoup plus de place pour afficher des promotions bien centrées, et les produits mieux mis en valeurs.

Ensuite, les catégories ont disparues dans la version US, et quand on passe la souris sur la zone Onglet : Voir toutes les catégories, une fenêtre popup s’affiche automatiquement (Merci Javascript) :

Poup des catégories sur le site Amazon US

Depuis ce popup,  on peut directement sélectionner la catégorie (parmi 40), alors qu’avec l’ancienne ergonomie (la version française), il faut d’abord sélectionner le premier niveau de catégorie puis le deuxième. On gagne donc un clic avec cette nouvelle interface !

Bon, il y a pleins d’autres petites différences …

Ce qui me marque, c’est l’introduction très subtile de ces nouvelles interfaces :

  • Un utilisateur peu habitué à ces nouvelles interfaces ne sera pas dérouté : il y a des boutons bien identifiés, sur lesquels on clique comme sur les bons vieux sites « 1.0 ».
  • Si un utilisateur à un navigateur trop ancien pour interpréter les scripts, pas de problème, l’ergonomie du site reste très acceptable.

Sqoops : nouvelles interfaces et Intershop

Pour développer sur site marchand, on peut choisir un environnement de type Intershop Enfinity (je vous en avais déjà parlé dans ce billet) et vouloir une interface innovante.

C’est ce qu’à fait le site de jeux allemand sqoops :

Page d'accueil de sqoops, en flash + html

Le résultat me semble intéressant.

La structure de l’interface d’accueil est réalisé avec la partie haute en Flash et le bas en HTML. C’est je crois l’une des meilleure solution pour faire une interface un peu innovante tout en ayant un bon niveau de réléfencement naturel.

La partie Flash permet de voir très rapidement les produits, en fonctions de critères sélectionnés graphiquement : Console, âge, type de jeux, …

Quand on clique sur un produit, la fiche produit est toujours avec la structure Flash + HTML.

Quand on clique sur « Acheter », on bascule dans une interface plus classique, 100% HTML.

Des produits en « pleine page »

Vous avez vu, sur la plupart des e-marchands US, la page produit est « pleine page » :

Page produit sur le site Amazon France

Plus de bandeau à gauche ou à droite : l’attention de l’utilisateur est complètement centrée sur le produit et sur l’acte d’achat (on ne peut pas louper le bouton « Ajouter au panier » !).

(Merci Jérémie pour le tuyau !) 

CrispyShop : un moteur de recherche de produits avec une interface innovante

CrispyShop est un service fourni par Yahoo dans la ligné des Kelkoo : c’est un outil pour chercher, comparer des produits, et chercher un marchand pour acheter le produit.

Comparateur de produits CirspyShop

La hauteur du point, c’est le prix du produit. Quand on déplace la souris, le long de la courbe, on voit apparaitre les différents produits.

Le système permet d’affiner la recherche avec tout un tas de filtres :

Options pour filtrer

quand on clique sur un produit, ça permet de voir une fiche produit. Si on clique sur plusieurs produits, ils apparaissent chacun dans un onglet (comparaison plus facile donc). Et puis naturellement (parce que c’est bien le but de ces moteurs), en dessous de la fiche produit, il y a les marchands qui proposent le produit :

Comparateur de produits sélectionnés

Comme vous le voyez, on peut trier par prix (mais c’est pas l’option par défaut !).

Tout ça est réalisé avec un savant mélange de Flash et d’Ajax/Javascript.

(plus d’infos ici)

Un monde en 3D plat, ou un monde plat en 3D, ou un monde 3D en 3D…

(un peu « prise de tête » mon titre !)

Ecran 3D

Surement comme vous, je lis tous les jours des news sur la 3D :

Jeux 3D   Jeux 3D   Jeux 3D

  • Des nouveaux écrans, qui affichent de la « vraie 3D en relief » ;
  • Des jeux ou des univers 3D, partagés par des communautés mondiales (Exemples : World Of WarCraft pour les jeux, SecondLife pour les univers);
  • Les interfaces de nouveaux logiciels, type Windows Vista, qui font la part belle à la 3D ;
  • Des services de type Google Earth…

Que penser de tout ça ?

Est-ce que demain, nos écrans 2D, avec une sourie 2D, affichant des pages « plates »… Est-ce que tout ça, ça va aller à la poubelle, pour entrer dans le monde merveilleux de l’espace et du volume ?

Peut-on / va-t-on tout faire en 3D ?

Mon avis, c’est qu’il y a de la place pour les 2 mondes, celui de la 2D et celui de la 3D (et je ne dit pas ça par goût du consensus… Ceux qui me connaissent bien savent que c’est pas le genre de la maison !).

Il y a des activités où la 3D apporte un réel gain. Par exemple, pour jouer, la qualité de l’immersion, c’est un facteur clé. C’est donc pas par hasard si l’une des plus grosse utilisation de la 3D, c’est les jeux.

D’ailleur, pour les activités de type jeux, ou « aventure virtuelle immersive » (je pense à SecondLife bien sur), on peut imaginer que les interfaces vont effectivement complètement changer, avec des écrans 3D ou surtout des casques, qui permettent, de plus, de détecter les mouvements de la tête, et de changer le point de vue à partir de ces mouvements.

Mais il y a également tout un tas d’activités ou la 3D n’apporte rien. C’est bête à dire, mais l’écriture reste une activité 2D. Je n’ai donc pas besoin d’un bon de commande en 3D !

Pour le e-commerce, la 3D, ça peut permettre de mieux apréhender un produit, en permettant au future client de « manipuler virtuellement » le produit. Exemple : un téléphone, un lecteur mp3, un appareil photo, … Tous ces appareils ou le look & feel est l’un des éléments clés dans l’acte d’achat.

Le New York Times lance une application WPF

WPF, c’est le nouveau format de Microsoft, concurrent d’Apollo d’Adobe, qui permet de réaliser des applications, hors du navigateur Internet.

J’ai déjà parlé de cette technologie, par exemple dans ce billet sur l’application de la Fnac.

Ces nouvelles technologies sont importantes pour le e-commerce, car elles promettent de nouvelles façons d’interagir avec les clients.

Le New York Times vient de lancer sa propre application, et j’ai un peu joué avec.

Comme toujours avec ces technologies, il faut commencer par télécharger une application. Le processus est assez rapide, pour peu qu’on ait déjà Windows Vista, ou bien alors il faut installer le dernier framework .NET de Microsoft (plus de 80 Mo !).

Une fois cette étape franchie, on peut lancer l’application du New York Times depuis le menu démarrer de Windows. Au lancement, l’application est « vide » : il faut synchroniser les données. C’est cette synchronisation qui permettra par la suite un usage mixte On-line / Off-line, c’est à dire pouvoir lancer l’application, naviguer dans les contenus même quand l’ordinateur n’est pas connecté.

Page d'accueil de l'application du New York Times, avec téléchargement progressif

Première bonne surprise, le contenu s’affiche au fur et à mesure que les contenus sont synchronisés (pas la peine donc d’attendre que la synchronisation soit finie).

Page d'accueil de l'application du New York Times, avec téléchargement terminé

La page d’accueil, c’est la une du quotidien. On peut cliquer sur chaque grand titre, pour voir l’article en détail.

On peut également cliquer sur les boutons du haut, soit pour afficher une page d’accueil sur un thème particulier (monde, éco, sport, …), soit pour afficher un menu qui permet d’accéder directement à un article du thème chois. Exemple  :
Menu pour accéder à un article

Une fois sur un article, l’utilisateur a la possibilité de choisir la taille de la police. La pagination des articles est automatiquement recalculée, en fonction de la taille de la fenêtre, de la taille de la police, et évidement de la taille de l’article. Dans cette application, pas d’ascenseur : on navigue de page en page.

L’option d’impression est également très propre avec une mise en page très soignée, bien loin des impressions de pages Web :

Impression d'un article

Certaines pages contiennent des publicités :

Publicité dans un article

Au final, j’ai trouvé l’ergonomie du service vraiment très bonne, très claire, très intuitive. J’ai en particulier apprécié l’idée d’une navigation « plate » sans effet 3D inutile.

Un exemple à suivre donc…

Flex et le navigateur Internet

Flex permet de réaliser de véritables applications qui, incidemment, tournent dans la fenêtre du navigateur Internet.

Mais avec Flex, on est bien loin du mode pour lequel le navigateur avait été fait : consulter des pages, avec des liens.

Résultat, des fonctions fondamentales du Web et du navigateur sont un peu bousculées :

  • Les moteurs de recherches sont largués : un peu comme si on voulait chercher dans une application (ça veut dire quoi chercher dans l’application Word par exemple ?) ;
  • Les liens (bookmarks) ne marchent plus : Et oui, une application n’est pas faite de pages. Un lien n’a donc pas de sens.
  • Le bouton back ne marche pas : effectivement, si le bouton back a tout son sens quand on navique dans des pages, cela perd tout son sens quand on utilise une véritable application.

Alors, pourquoi utiliser le navigateur pour exécuter des applications de type Flex ?

D’abord, cela reste une question ouverte, puisque plusieurs acteurs majeurs (Adobe, Microsoft) travaillent sur la question (ex : Apollo pour Adobe), et qu’on peut déjà tester quelques résultats (ex : l’application de la Fnac).

Ensuite, le navigateur apporte pas mal d’avantages :

  • Règles de sécurité : le navigateur garantit, peu ou prou, que ce qui est exécuté dans le navigateur n’ira pas « polluer » le reste de l’ordinateur (accéder aux fichiers locaux, …). Concrètement, pour les utilisateurs, c’est une garantie contre les virus ;
  • Simplicité d’accès à l’application : l’utilisateur n’a pas besoin d’installer l’application. Elle se lance automatiquement dans la fenêtre du navigateur ;
  • L’application sera toujours à jour puisqu’elle est chargée à chaque exécution ;
  • Pour beaucoup d’utilisateurs, devoir installer une application est un frein (risque de virus, de déstabiliser le fragile équilibre du PC, …). Avoir une application qui s’exécute dans le navigateur, sans rien avoir à installer permet donc d’atteindre beaucoup plus d’utilisateurs.

Alors, dans le navigateur ou hors de celui-ci ?

Je pense que :

  • Les deux modes vont vivre en parallèle un bon bout de temps.
  • Cela fait pas mal de temps que divers acteurs essayent de sortir de ce sacré navigateur, et le mode ‘dedans’ survit bien.
  • Un environnement pour lancer des applications directement depuis le bureau de l’ordinateur, c’était bien l’une des promesses de Java, non ?
  • Flex (ou équivalent) peut être utilisé pour faire des « micro applications » à l’intérieur de pages Web (CF les services financiers de Yahoo). Dans ce cas, on est clairement dans le mode ‘dedans’ ;
  • Flex peut également être utilisé pour réaliser des applications plus complètes. Dans ce cas, la question du « dedans ou dehors » prend tout son sens ;

(j’ai écrit ce billet suite à la lecture de ce billet de Ryan Stewart)

La vision du e-commerce 2.0 d’IBM

Philippe Bournhonesque du Software Group d’IBM, nous a présenté, lors du Forum e-marketing, la vision d’IBM pour le commerce 2.0.

Moteur de recherche en langage naturel

On le sait bien, la fonction de recherche est vraiment l’une des fonctions clé d’un site marchand.

IBM a racheté une technologie, intégrée dans la suite logicielle Websphere : Omnifind Content Discovery.

Exemple de mise en oeuvre dans la boutique NeimanMarcus, quand on tape « white prada handbag », même si on fait des fautes de frappe, on obtient le résultat suivant :

Exemple de résultat de recherche, sur le site Neiman Marcus

Le moteur de recherche analyse la requête, essaye de corriger les éventuelles fautes, classifie les mots (« white » pour la couleur, « handbag » pour la catégorie, « prada » pour la marque).

Un autre site pour jouer avec ce moteur : campmor.

Nouvelles interfaces

IBM nous a également montré des nouvelles interfaces de sites marchands.

En ligne avec les tendances actuelles, IBM a présenté des sites marchands en Flash ou Ajax.

Un élément intéressant : Philippe nous a montré un site marchand, où l’ensemble du processus achat se fait sans quitter la page produit : on ne va donc pas sur le classique enchaînement Identification, Panier, Paiement.

Ici, tout ce fait sur une colonne, à droite de la fenêtre. Donc, sans sortir de la fiche produit, le client peut s’identifier, choisir son mode de paiement, et terminer sa commande.