Numabilis Mettre l'informatique au service de ses utilisateurs

Aller au contenu | Aller au menu | Aller à la recherche

Les lois de la simplicité 2 : Organisation

Photo d'illustration de Martin Burns

La seconde loi de la simplicité énoncée par John Maeda, dans son livre The laws of simplicity est l'organisation. En organisant les éléments d'une interface, celle-ci parait plus simple, plus claire, plus intuitive. John Maeda propose une méthode pour organiser les éléments, qu'il nomme CLAP et qui est celle du tri de cartes bien connu en ergonomie web :

  • CHOISIR : inscrire le nom des éléments sur des cartes et les regrouper en ensembles logiques.
  • LABELLISER : nommer chaque ensemble à l'aide d'un nom représentatif.
  • AGRÉGER : regrouper les ensembles qui peuvent l'être afin de réduire leur nombre.
  • DÉFINIR DES PRIORITÉS : définir les ensembles prioritaires, c'est à dire ceux qui sont le plus utiles.

Les différents éléments, regroupés en ensembles, doivent ensuite être présentés de manière à mettre en évidence l'organisation définie. La présentation n'est pas toujours évidente à trouver comme nous le montre l'étude des différentes versions du iPod :

iPod_evolution.pngUn outil pertinent est l'école psychologie de la Gestalt.

Les lois de la simplicité 1 : Réduction

Photo d'illustration de Themis Chapsis

La première loi de la simplicité énoncée par John Maeda, dans son livre The laws of simplicity est la réduction. Pour simplifier l'interface d'un objet il faut commencer par retirer toutes les fonctionnalités dont on peut se passer. L'ergonomie est l'art de trouver l'équilibre entre simplicité et complexité en procédant d'abord par réduction méthodique, (i.e. supprimer tout ce qui peut l'être). La simplification peut être prolonger en réalisant trois actions (AMI) :

Atténuer : donner une apparence délicate et fragile contrastant avec l'utilité de l'objet dont l'aspect et la petite taille ne laisse pas imaginé sa puissance.

Masquer : cacher la complexité, comme des boutons d'une télécommande derrière un clapet, ne laissant visible que les bouton des fonctions principales.

Insuffler : augmenter la qualité réelle, en utilisant des matériaux de luxe par exemple, ou perçue, via un marketing ingénieux ou grâce à des astuces trompant nos sens (alourdir une télécommande par exemple pour donner l'impression de solidité).

La simplification d'une interface est une recherche d'équilibre faisant intervenir plusieurs disciplines (ingénierie, design, marketing) nécessitant un travail en équipe dans laquelle chacun doit respecter le travail des autres dans l'unique but de réaliser un produit exceptionnel.

Ergonomie : l'art de l'évidence

Photo d'illustration de larou

L'ergonomie a cette particularité frustrante, quand elle est bien pratiquée de passer totalement inaperçue, parce qu'alors tout devient simple et évident. Sa mise en oeuvre au sein de petites structures est d'autant plus difficile qu'elle est à la croisée de plusieurs disciplines dont les experts maisons ont tous un avis bien tranché (programmeurs et graphistes en particulier). Il n'existe pas de recette toute faite, au grand désespoir des décideurs qui ne savent plus à qui confier cette responsabilité pourtant importante puisque les clients se plaignent de la difficulté d'utilisation du produit ! Et c'est vrai que la technologie rend notre vie moins confortable. Les utilisateurs demandent avant tout qu'un logiciel ou un appareil technologique soit simple à utiliser. John Maeda, dans son livre The laws of simplicity (traduction française : De la simplicité) propose dix « lois » et trois principes pour simplifier une interface homme machine que nous détaillerons prochainement dans de nouveaux billets.

Dix lois :

  • RÉDUCTION. Pour atteindre la simplicité, le mieux est la réduction méthodique.
  • ORGANISATION. Avec de l'organisation, un ensemble composé de nombreux éléments semble plus réduit.
  • TEMPS. En économisant son temps, on a le sentiment que tout est plus simple.
  • APPRENTISSAGE. La connaissance simplifie tout.
  • DIFFÉRENCES. La simplicité et la complexité ont besoin l'une de l'autre.
  • CONTEXTE. Ce qui se trouve à la périphérie de la simplicité n'est absolument pas périphérique.
  • ÉMOTION. Mieux vaut plus d'émotion que moins.
  • CONFIANCE. Dans la simplicité, nous avons confiance.
  • ÉCHEC. Certaines choses ne peuvent jamais être simplifiées.
  • LOI CARDINALE. La simplicité consiste à soustraire ce qui est évident et à ajouter ce qui a du sens.

Trois principes :

  • AU LOIN. Plus semble moins si l'on s'en tient éloigné, très éloigné.
  • OUVERTURE. L'ouverture simplifie la complexité.
  • PUISSANCE. Se servir de moins, en tirer plus.

Numabilis reloaded

Photo d'illustration de Laure Wayaffe

J'ai créé Numabilis en 2006 alors que j'étais indépendant, avec comme leitmotiv « Mettre l'informatique au service de ses utilisateurs ». Je suis salarié depuis octobre 2007 chez Omnikles où j'occupe le poste de directeur des services et chef du produit OK-OFFRE. Je gère les équipes support et projets, interfaces entre les utilisateurs de nos applications web et la société.

Je réactive ce blog pour partager mes expériences qui sont maintenant plus managériales que techniques et entrepreneuriales (avant que cela ne me reprenne), mais je ne m'en tiendrai pas à une ligne éditoriale rigoureuse et de nombreux sujets pourront être abordés ici, à un rythme... tranquille.

Le syndrome facebook [deuxième édition]

Billet initialement publié le 25 octobre 2007 et supprimé à la demande du client. Depuis la société qui créait des questionnaires ludiques et des gadgets autour de l’information n'existe plus ou quasiment : Newzwag a été un échec complet...

Le 17 septembre dernier, l'AFP m'a annoncé que le projet de site de news social (web 2.0) sur lequel notre équipe travaillait depuis novembre 2006 était abandonné au profit d'une application facebook ! À supposer qu'il ne s'agisse pas d'une simple excuse pour mettre brutalement fin à nos contrats, je crois que cette réorientation stratégique est une erreur monumentale.

Le prototype du site newzwag (finalisé dès février 2007) est à mon avis le site que beaucoup attendent :

  • Il permet aux utilisateurs de réagir, commenter, tagguer, noter une actualité de grande qualité (AFP) livrée de manière factuelle brute, répondant ainsi à la question de Francis Pisani A quoi ça sert l’actu ?
  • Les différents modes de présentation/navigation permettent à chacun de trouver la façon de consommer l'actualité selon ses besoins : live (affichage en temps réel des infos quand elle arrivent), selon la vue éditoriale (à la façon d'un journal), selon la vue communautaire (ordre donné par les votes des utilisateurs), par nuage de tags (éditeurs et communautaire). Il répond à la demande de Francis Pisani L’actu comme rivière et autres représentations : « Je rêve d’un site qui me permettrait de lire l’info qu’il me propose en passant par la Une traditionnelle, ou en rivière, ou en suivant la hiérarchisation des usagers, ou sous forme de nuages de tags ou de carte... ».
  • Les plus ardents utilisateurs peuvent participer à des débats et s'organiser en groupes d'intérêt via des fonctionnalités de réseau social. Le réseau n'est pas une fin mais un moyen pour les utilisateurs les plus mordus et les plus impliqués d'assouvir leur soifs de débattre, échanger, communiquer autour d'une actualité thématique.

De l'autre côté, une application facebook a toute les chances de faire une flop, à l'image des applications lancées par le Washington Post (The Compass) ou par le New York Times (The New York Times News Quiz) ayant moins de 3 000 et 1 500 utilisateurs respectivement ! Ces applications ne drainent pas de visiteurs vers leur sites comme cela est signalé dans le billet New York Times Launches Facebook App, et ne génèrent aucun revenus. Il est encore plus dur de prendre des parts d'audience dans le domaine de l'actualité sur facebook depuis que Google y est présent.

Je suis persuadé que le buzz facebook a atteint le pic de la courbe de l'esbroufe (Gartner Hype Cycle) avec la prise de participation de Microsoft. L'avenir est à l'intégration de fonctionnalités de réseau social au sein de sites axés sur les centres d'intérêts de ses utilisateurs. Quel va être l'actualité de Newzwag dans les mois qui viennent : application facebook sans utilisateur ou site web communautaire ? Wait and see ? Quoiqu'il en soit : bonne chance.

Google Maps API : gestionnaire automatique de marqueurs

Comme nous l'avons vu dans le billet précédent sur le gestionnaire de marqueurs, l'API Google Maps ne gère pas automatiquement le remplacement d'un groupe de marqueurs proches par un marqueur unique à faible facteur de zoom. Heureusement, Jef Poskanzer a écrit une librairie implémentant cette fonctionnalité : Clusterer.

Partons de l'exemple 9 qui est identique à l'exemple 4 d'un précédent billet auquel j'ai ajouter une concentration importante de marqueurs à l'est de Paris. Déclarons la librairie dans l'en-tête HTML :

<script src="http://www.acme.com/javascript/Clusterer2.jsm" type="text/javascript"></script>
La gestion automatique se fait en déclarant une variable clusterer, instanciée dans la fonction load :
var clusterer; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(46.85, 1.75), 6); clusterer = new Clusterer(map); clusterer.SetMaxVisibleMarkers(10); clusterer.SetMinMarkersPerCluster(5); GDownloadUrl("exemple10.json", setup_json); } else { alert("Desole, l'API Google Maps n'est pas compatible avec votre navigateur."); } }

Un objet Clusterer possède 4 méthodes :

  • SetMaxVisibleMarkers(n) : définie le nombre de marqueurs au delà duquel le clustering est mis en place (150 par défaut).
  • SetMinMarkersPerCluster(n) : définie le nombre minimum de marqueurs constituant un cluster (5 par défaut).
  • SetMaxLinesPerInfoBox(n) : définie le nombre de ligne s'affichant dans la fenêtre d'information du marqueur correspondant au cluster (10 par défaut).
  • SetIcon(icon) : définie l'icône du marqueur correspondant au cluster si celui par défaut ne convient pas.

Il suffit ensuite de remplacer chaque appel à map.addOverlay(marker) par un appel à clusterer.AddMarker(marker, title) (où title est la ligne du marqueur réel qui s'affichera dans la fenêtre d'information du marqueur correspondant au cluster) et chaque appel à map.removeOverlay(marker) par un appel à clusterer.RemoveMarker(marker). Exemple dans la fonction setup_json :

setup_json = function(json, status) { var data = eval('(' + json + ')'); for (var i=0; i<data.markers.length; i++) { var point = new GLatLng(data.markers[i].lat, data.markers[i].lng); var marker = createMarker(point, data.markers[i].html); clusterer.AddMarker(marker, data.markers[i].html); } }

Le résultat est visible sur l'exemple 10.

Cette solution permet de rendre de bons services, mais n'est toute fois pas idéale. En effet, le clustering est lié au nombre de marqueurs plutôt qu'à leur densité. Ainsi, deux marqueurs supperposés ne seront vus que comme un seul marqueur à fort grossissement (en l'absence de clustering). D'autre part, l'algorithme n'est pas très précis : sur l'exemple 10, le marqueur placé sur Le Havre a été intégré au cluster bien qu'il en soit assez éloigné !

Les autres billets de cette série sur l'API Google Maps :

Google Maps API : gestionnaire de marqueurs

Reprenons notre exploration de l'API Google Maps pour résoudre le problème suivant : comment afficher un unique marqueur regroupant plusieurs marqueurs lorsque le niveau de zoom est faible ? En effet, lorsque le nombre de marqueurs est très important sur une petite région, la carte est difficile à lire et lente à s'afficher. La réponse semble être le gestionnaire de marqueurs GMarkerManager.

Partons de l'exemple 4 d'un précédent billet dans lequel nous déléguons l'affichage des marqueurs à un gestionnaire de marqueurs. Pour cela, on déclare une variable mgr, que l'on instancie dans la fonction load :

var mgr; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(46.85, 1.75), 6); mgr = new MarkerManager(map); GDownloadUrl("exemple04.json", setup_json); } else { alert("Desole, l'API Google Maps n'est pas compatible avec votre navigateur."); } }

L'ajout des marqueurs se fait dans la fonctions setup_json en créant d'abord un tableau de marqueurs, markers, ajouter en une fois à la carte via la fonction addMarkers prenant comme second paramètre le niveau de zoom minimum en deçà duquel les marqueurs ne sont pas affichés, et un troisième argument optionnel, le niveau de zoom maximum au delà duquel les marqueurs ne sont pas affichés :

setup_json = function(json, status) { var data = eval('(' + json + ')'); var markers = new Array(); for (var i=0; i<data.markers.length; i++) { var point = new GLatLng(data.markers[i].lat, data.markers[i].lng); var marker = createMarker(point, data.markers[i].html); markers.push(marker); } mgr.addMarkers(markers, 5); mgr.refresh(); }

Le résultat est visible sur l'exemple 8.

On peut appeler plusieurs fois la méthode addMarkers avec différents tableaux de marqueurs pour différents niveau de zoom et gérer ainsi, à la mano, les regroupements de marqueurs. Cela implique donc de calculer, sur le serveur, l'emplacement des marqueurs qui prendront la place d'un ensemble de marqueurs et du niveau de zoom auquel on affiche chacun... Pas simple ! Heureusement il existe une solution toute faite via une librairie JavaScript... Suite au prochain épisode !

Les autres billets de cette série sur l'API Google Maps :

Le syndrome facebook

Billet supprimé à la demande de mon ancien client car il divulguait des « sensitive information ».

Mise à jour 21/06/2010 : Billet remis en ligne.

Principes de base pour des applications facebook réussies

Pourquoi certaine applications facebook sont de véritables succès tandis que d'autres sont des flops certains ? Selon Jesse farmer, de 20bits, il y aurait six principes de base :

  1. Simplicité. Comme toujours, plus votre application est simple à utiliser, plus ses chances de succès sont élevées.
  2. Socialisation. Facebook étant avant tout un réseau social, ses utilisateurs l'utilisent pour cela. Les fonctionnalités de votre application doivent être sociales avant tout, c'est à dire, présenter certaines facettes (goûts, activités, caractéristiques, etc) d'un utilisateur à d'autres utilisateurs.
  3. Viralité. Plus votre application est intrinsèquement virale, plus elle aura de succès. Certaines ne sont même que des idées virales : Vampires, WereWolves et... Vampires vs. Werewolves
  4. Cohérence. Votre application doit être cohérente avec la philosophie et les fonctionnalités du réseau social. Beaucoup d'applications réussies ne font qu'étendre les fonctionnalité de base de facebook.
  5. Originalité. Certains types d'applications sont déjà sur-représentés, comme les applications de citations (52 à ce jour depuis Dr. Martin Luther King Jr. quotes jusqu'à The Simpsons Quotes). Ne faites pas une n-ième application de ce genre sous peine de faire un flop.
  6. Qualité. Votre application doit être de grande qualité, en particulier, sans bug, rapide et robuste. Les utilisateurs n'hésitent pas à désinstaller une application boguée, lente ou inaccessible, quelqu'en soi l'origine.
Rien de nouveau ici : simplicité, cohérence, originalité et qualité sont des principes universels. S'y ajoutent socialisation et viralité qui sont deux principes extrêmement efficaces sur un réseau social, mais beaucoup plus complexes à mettre en œuvre. L'application doit en effet porter en elle-même ces deux principes, sans pour autant n'être que purement artificielle (comme Vampires par exemple) au risque d'avoir un succès... très éphémère.
Enfin, l'application doit être rentable, c'est à dire générer des revenus, car la popularité à un coût.

Les digg-like : une fausse bonne idée

La recherche d'information intéressante est un problème récurrent sur le web auquel les digg-like ont cru apporté une solution. J'expose, dans ce billet, ma théorie pour expliquer cet échec et aborde les solutions qui, à mon avis, vont émerger.

Dans Blogasty et les limites du web 2.0, j'avais abordé le problème de l'intelligence collective et la qualité car blogasty promettait de « promouvoir les blogs selon la qualité de leurs billets ». Mais il est évident que d'une part la qualité est subjective et d'autre part l'information qui m'intéresse n'est pas toujours de qualité. J'aime assez le site Je galère au taff bien que je ne le considère pas comme un site de qualité. Les digg-like s'appuient sur la courbe popularisée par Chris Anderson dans son article La Longue Traîne traduisant le fait qu'une minorité d'articles est plébiscité par un majorité de personne.

Dessin de la courbe longue traine
La La longue traîne est représentée en jaune (image Wikipédia)

Mais cette image est trompeuse pour deux raisons :

  • Un contenu populaire n'est plébiscité que par un petit nombre d'utilisateur.
  • Ma courbe d'intérêt ne se superpose pas à celle-ci.

Ne disposant pas de données chiffrées, j'expose ma théorie avec des données purement fictives, qu'il serait très intéressant de confronté à la réalité pour confirmer ou infirmer ce modèle.Prenons l'exemple d'un site de social news (mais ce pourrait être un [site de e-]commerce) comportant 1 000 000 articles et ayant 10 000 utilisateurs actifs. La courbe ressemblerait à quelque chose comme ça :

Courbe
Distribution des articles en fonction de leur popularité décroissante

La popularité d'un article est le rapport, exprimé en pourcentage, entre le nombre de personne ayant voté pour un article et le nombre d'utilisateur du site. Ici l'article le plus populaire, le blockbuster a un score de Pmax = 1 % : il a obtenu 100 votes (je pense que dans la réalité, ce score est inférieur). Un article populaire n'intéresse qu'un faible pourcentage de lecteur.

Plaçons-nous, maintenant du point de vue d'un lecteur ayant lu 100 articles qu'il a classé du moins intéressant (score = 1) au plus intéressant (score = 100). Si l'on ne conserve, sur la courbe précédente, que ces 100 articles et que l'on superpose la courbe des scores de notre lecteur, je pense que nopus obtiendrons une courbe ressemblant à la suivante :

Courbes représentant la distribution des articles lus en fonction de leur popularité décroissante et de leur score
Distribution des articles en fonction de leur popularité décroissante superposée au score obtenu

Les articles qui m'intéressent le plus sont les moins populaires ! Dans ce cas comment un digg-like peut-il m'aider à trouver des articles intéressants ?

Il est assez amusant de constater que les algorithmes de recommandation soient très populaires dans le monde du e-commerce, ainsi que pour la musique et les DVD, mais pas du tout dans le monde l'information textuelle (journalisme, blogosphère, etc.) geekomatik est le seul exemple dans ce domaine, à ma connaissance. Malheureusement, le système de recommandation est, à mon avis, perdu au milieu de fonctionnalités peu ergonomiques et sans valeur ajouté, ce qui limite l'attrait du site, limite la taille de la communauté et limite donc la pertinence des recommandations. (Alexis, je suis prêts à reprendre nos échanges si tu le souhaites.)

Que pensez-vous de cette théorie ?

- page 1 de 5