Ainsi il s’étonne de le voir posséder des connaissances en anatomie mais aucune en médecine. Il dresse un tableau des compétences éclectiques et inégale de Sherlock Holmes:

1. Connaissances en littérature : nulles.
2. Connaissance en philosophie : nulles.
3. Connaissances en astronomie : nulles.
4. Connaissance en politique : faible.
5. Connaissance en botanique : inégales. Calé sur la belladone, l’opium, et les poisons en général. Ne connait rien en jardinage.
6. Connaissance en géologie : pratiques, mais limitées. Sait reconnaître en un seul coup d’œil différentes espèces de sols [...].
7. Connaissances en chimie : profondes.
8. connaissance en anatomie: précises, mais sans vision d’ensemble.
9. connaissance en littérature à sensation : immense. Il semble tout savoir dans le moindre détail de toutes les horreurs perpétrées au cours de ce siècle.
10. joue bien du violon.
11. Est expert à la canne, à la boxe et en escrime.
12. A une bonne connaissance pratique du droit anglais.

(in « Les aventures de Sherlock Holmes », Traduction  d’Eric Wittersheim, Omnibus)

Le docteur Watson ignore encore que loin d’être un in indécrottable dilettante, son compagnon est en réalité un expert en criminologie.

Cette science naissante et méconnue doit piocher dans les autres disciplines ce qui fonde sa future axiomatique. En pionnier, il doit adapter les méthodes à sa propre pratique, et ne se penche vraiment que sur ce qui lui sera utile. Aussi doit-il faire seul son enseignement, ce qui notamment en anatomie lui vaudra la mauvaise réputation de battre les cadavres avec une canne. Comment des médecins de l’époque pouvaient-ils imaginer qu’il cherchait à savoir quelles marques forment les coups donnés après la mort ?

Le cabinet de curiosité du XXI^ème siècle

Le design d’expérience utilisateur est une discipline naissante qui vit les mêmes incompréhension et souffre des lacunes de sa jeunesse. Sa définition même est sujette à discussion au sein de la communauté professionnelle, et le corpus de connaissance qui la compose ainsi que son champ d’application sont l’objet de débats sans fin entre les partisans d’écoles concurrentes.

Enfin quand je dis école, je ne parle pas d’établissements scolaires, car il n’existe aujourd’hui qu’un demi-douzaine de formations contenant expressément les termes « UX design » ou « User Experience Design », et bien entendu elles ne se trouvent pas en France. Quelques formations courtes existent ici où là, ou quelques heures sont dispensées dans les universités ou écoles de design, indifféremment à des ergonomes, des graphistes, des archivistes…

Précisément ce sont des personnes issues de ces disciplines qui se tournent vers le UX design et tentent collectivement de l’inventer. Ses ancêtres immédiats, l’architecture de l’information et le design d’interaction, ont fini par être absorbée comme des sous-genre de l’UX design. Ainsi l’éclectisme est-il de mise avec des profils diamétralement opposés. Les graphistes, qui sont des artistes, côtoient des ergonomes, qui sont des scientifiques, des informaticiens, qui sont des techniciens, et enfin des documentalistes et archivistes. Tous parlent pourtant de la même chose.

La boîte à outil du designer

Les parcours sont variés, mais les compétences se doivent d’être communes. Si elles ne sont pas encore entièrement définies ni délimitées, et malgré l’absence de consensus général, je peux au moins donner une liste « watsonienne » des connaissances et compétences que je juge nécessaires.

Voici les disciplines dans lesquelles nous piochons ce qui nous intéresse et ce à quoi nous nous limitons :

Sciences de l’information

Ici on est dans les indispensables. Savoir identifier et organiser l’information est la base de l’architecture de l’information. Il faut être capable d’organiser de grands ensemble aussi bien que des micro interactions, ce qui suppose de savoir manipuler les concepts essentiels de la bibliothéconomie et de certains concepts plus généraux des sciences de l’information.

L’architecture de l’information est une étape clé du design de l’expérience. Les taxonomies qui structurent les contenus et règlent leur trouvabilité reposent sur la maîtrise et la compréhension de ce qu’est l’information, ce qu’est une information, et surtout des stratégies de restitution de l’information. Nous devons par exemple pouvoir choisir entre des indexations basés sur des métadonnées,  des ontologies ou des thésauri.

Epistémologie

S’interroger sur ce que l’homme peut savoir et par quels moyens il acquiert la connaissance plus ou moins immédiate des choses. C’est la moindre des choses quand on prétend travailler sur l’acquisition d’information chez nos utilisateurs. Qu’elle soit au cœur des contenus comme pour un article de Wikipédia ou anecdotique et éphémère comme pour la mémorisation d’entrées à saisir dans un formulaire.

L’épistémologie des sciences retient aussi l’attention d’une discipline qui peine à se définir, même si elle n’est pas une science. Cependant les méthodes validées par les sciences pour découvrir des preuves valides ont toute notre attention !

Bergson, Bachelard, et pourquoi pas Kant et même Spinoza peuvent nous aider à appréhender la connaissance et les systèmes. Encore une fois, on ne fera que piller une petite partie sans s’inquiéter du reste  (mais il n’est pas interdit d’en lire plus !).

Logique

De manière très générale et sans rentrer dans les mathématique, quelques notions ne font pas de mal. La théorie des ensembles est constamment mise en application lors des inventaires de contenus et leur structuration, sans avoir besoin de la connaître, dans le sens ou ontologies, identités et sémantique sont confrontés. Un peu de culture générale ne faisant jamais de mal et améliorant la pratique, j’en fait un indispensable.

Par ailleurs, qui a déjà dessiné un diagramme représentant un cas utilisateur peut deviner que la compréhension des mécanismes de la logique est un plus pour éviter de faire percevoir une interaction comme un paradoxe ou une contradiction.

Psychologie

Des connaissances « Holmesques » sont requises. Avoir une solide compréhension du fonctionnement de la cognition humaine sans avoir à être psychologue. Un peu comme l’anatomie sans la médecine. Nous n’avons pas pour vocation à étudier la psyché humaine, aussi demandons nous simplement aux psychologue ou aux neurologues de nous faire part de leur découvertes afin de nous éclairer sur les mystères du comportement humain face à une interface homme-machine.

Ergonomie

Discipline médicale, l’ergonomie a pour mission de protéger l’homme au travail, et plus généralement de veiller à ce que les outils utilisés par l’homme soient agréables, efficaces et sans danger. Nous sommes concernés par l’ergonomie des interfaces homme-machines (IHM) et devons posséder en la matière des connaissances solides. Il ne nous appartient pas de juger de l’ergonomie de de notre travail, mais de la concevoir en visant l’ergonomie optimale. Pour ce faire, il faut connaitre et pratiquer un certain nombre de méthodes des ergonomes (et non pas appliquer des conseils glanés ça et là sur les blogs d’ergonomes ou de consultants prétendument experts).

La confusion qui règne entre ergonomie et UX design vient peut être de là : les ergonomes ont longtemps, et sont encore souvent, en charge de la création des interfaces, réalisant par là un travail de designer. Certains s’y découvrent une vocation et viennent remplir peu à peu les rangs des designers UX. De la même manière que les graphistes ou le développeurs.

Sociologie

De la même manière que pour la psychologie, seuls les résultats publiés par les sociologues nous concernent, et encore, de manière très ciblée. Dans le même esprit, on aura toute utilité à recevoir de la part du marketing les données sur les clients de l’entreprise commanditaire.

Histoire de l’art

Les écrans ne doivent pas être notre seule perspective. Le design a une histoire ancienne qui s’inscrit dans l’histoire de l’art en général, et bien souvent des solutions à des problèmes fonctionnels ont été abordé bien avant nous, et parfois mieux. A nous de savoir les transposer sur nos supports modernes.

Par exemple, la typographie est un sujet en pleine ébullition du fait des limites des écrans, et surtout des navigateurs web, et de l’évolution soudaine des possibilités en la matière.

Je dirais que des connaissances générales dans les arts appliqués et une un intérêt plus prononcé pour le design graphique sont un plus.

Histoire des sciences et des techniques

C’est une évidence : connaître l’évolution de l’informatique et de ses interfaces permet de savoir d’où l’on vient et de comprendre où l’on va. Il est par contre interdit de sortir de sa neutralité et de clamer la supériorité de tel ou tel fabricant à la mode.

Informatique

Savoir utiliser un ordinateur. Cela semble une évidence, mais apparemment pas tant que ça. Disons le franchement : nous sommes dans une ère de développement du web, et être capable de comprendre un peu de HTML est aussi indispensable au designer UX que bien connaître les propriété des matériaux pour le designer industriel.

Je crois qu’on ne peut pas discuter avec les développeurs d’un projets sans comprendre leur contraintes ni être capable d’argumenter ses choix.

Le métier de designer UX

Cette liste ne représente pas le métier. Le design de l’expérience utilisateur se dessine principalement à travers le travail de prototypage et de la création de l’interface. Vous pouvez voir par exemple un résumé du travail effectué sur ce site. Mais comme Sherlock Holmes, notre mission est d’enquêter avant de tirer des conclusion, de raisonner à partir de présupposés fiables, et de suivre une méthode.

Nous sommes encore à l’heure des pionniers, aussi nous faut il apprendre la théorie d’autres disciplines que la notre. Et il faut bien le reconnaitre, nous n’avons encore que peu à apporter aux autres (à l’exception notable de l’architecture de l’information, déjà établie et enseignée dans quelques universités, et qui tend à se confondre comme une composante de l’expérience utilisateur, comme nous l’avons dit plus haut).

Comment acquérir ces connaissances ?

Premièrement en maintenant une veille permanente. Attention, suivre des douzaines de flux RSS ne sert à rien. La plupart des blogs ou magazine n’abordent ces sujets que de manière superficielle, que ce soit parce qu’ils couvrent des généralité, ou parce qu’ils ne veulent pas dévoiler trop leur méthodes. De toutes façons on a vite la sensation de toujours lire les mêmes articles.

Il faut lire beaucoup. Sur tous les sujets évoqués plus haut. Ça demande de nombreux efforts et une bonne partie de travail en autodidacte, et ça coute un peu cher aussi. On ne trouve pas d’ouvrages sur l’analyse des tâches en ergonomie à la bibliothèque. Lire l’anglais est également indispensable.

Il n’existe aucune formation en France. On pourrait presque dire dans le monde, mais ça ne serait pas exact. Certaines écoles ou université incluent des cours sur l’architecture de l’information, sur l’ergonomie et le design interactif dans leur programmes. Mais rien d’unifié. Et pour cause : On ne sait pas encore quoi enseigner exactement. Le tutorat semble par conséquent se développer.

L’expérience pratique s’acquiert sur le terrain, en équipe. Par essence, le  UX designer travaille sur le projet des autres, avec les autres. Il ne produit rien à lui seul. Son travail est purement intellectuel. Pour s’imprégner des projets, nourrir sa réflexion et se forger une expertise, seul le travail en collaboration  renforce nos connaissances.

Tous webdesigner qui compose ses pages sur un logiciel de traitement d’image (Photoshop, Gimp, Illustrator, Inkscape…) sait que l’attend une étape bien plus longue et pénible : l’intégration. Qu’elle soit en HTML ou en Flash, elle est une étape obligée pour donner vie au graphisme en lui ajoutant juste un détail : l’interactivité.

Et si on pouvait fusionner les deux ? Pourquoi doit-on perdre son temps à coder ce qu’on a déjà construit ? Il faudrait inventer un logiciel qui permettrait de transformer mon graphisme en code et le tour serait joué !

Pas de problème, nos sauveurs sont là : les sites builders (comprenez, les « constructeurs de sites »). Ils se font de plus en plus nombreux, et promettent de laisser une totale liberté créative « sans compétences en programmation ». En voici quelques exemples :

Drupal Garden

Drupal Garden - générateur de site internet pour Drupal

Drupal Garden fait couler beaucoup d’encre et reçoit de nombreuse critiques positives. Pourtant la capture d’écran ci-dessus montre une limitation fondamentale : un sélecteur de thèmes. Est-ce à dire que si l’on ne trouve pas la mise en page « type » que l’on souhaite adapter, il faudra la … coder ?

Wix

Wix - générateur de sites internet statiques en flash

Wix est un des plus populaires, basé sur Flash, il offre une galerie d’effets et de styles aboutis, et il faut bien le dire, le rendu a un coté « pro » pour un peu qu’on ai du goût ou du métier. Mais impossible de créer ses propres effets, à moins de passer par des services professionnels payants… Et un design est-il une succession d’effets ? Et si on veut une fonction en plus, ne serait-ce qu’un blog ou un widget twitter. Vous êtes dépendant des composant inclus.

Flashmoto

flashmoto, éditeur visuel de sites internet en flash

En voici un qui semble plus abouti : Flashmoto. Regardez comme l’interface rappelle Photoshop ou même carrément After Effects. On est dans de la création de transitions animées très fines, et je peux uploader les médias dont j’ai besoin pour les manipuler à ma guise. Mais ici comme pour Wix, pas de vrai publication de contenu dynamique. Il semble que pour ces deux logiciels, une page web soit un rectangle de 1024 su 768 pixels, peu importe les autres configurations ou capacités d’un navigateur.

Webnode

Webnode, création et édition de site internet

Webnode propose une approche très différente. Les contenus dynamiques et leur réutilisation sont possibles, grâce à une barre d’outil rappelant le ruban de la suite bureautique Microsoft Office. En guise de mise en page et de personnalisation, vous avez la possibilité de changer les blocs de place et de modifier les couleurs ou tailles de polices. Le design se réduit-il à ça ?

Pourquoi ça ne marche pas ?

Les sites builders sont des échecs parce qu’ils sont inadapté au web.

Ils n’exploitent pas ses possibilités et se réduisent à des mises en page multimédia

Ils sont rigides car ajouter de nouveaux contenus ou pire, des fonctions, demande un changement en profondeur de l’organisation des pages ou de la mise en page.

Ils offrent des libertés attirantes (superposition et positionnement). Mais s’affranchir des contraintes du document numérique c’est se priver de ses avantages :

• le format continu (faire une composition visuellement pour chaque page, et non pas modèle de page, c’est implicitement limiter la page à sa partie visible au moment ou on la crée. Bien que ce soit valable pour toute méthode de création)
• la sémantique, le flux
• la versatilité des contenus (réutilisation de contenu, génération de contenus etc. : très difficile à gérer sur ce type de plateformes)
• l’homogénéité (modèles de page infini = pas d’efficacité)
• un vision limitée du web, ne produit que des sites vitrines ou agrémentés de gadgets
• le fonctionnalisme (une dépendance à la plateforme pour les technologies)

L’aporie vient de la nécessité de créer en même temps le graphisme, l’architecture de l’information et les interactions.

Ces problématiques sont la définition même du web : un système d’information hypertexte. On ne conçoit pas un site sans redéfinir pour chaque cas des règles pour la classification, la navigation, le comportement de l’interface etc. Elle changent à chaque fois.

Un graphiste « print » doit pour chaque projet décider d’un support (livre, catalogue, brochure), d’un format (portrait, paysage, proportions), d’une qualité de papier (épaisseur, teinte, protection), d’une structure (reliure, pliage). Il ne peut pas juste ouvrir son logiciel et se mettre au travail. Il conçoit.

Réunir sur le même plan conceptuel deux modes de pensées en concurrence est une erreur méthodologique, impossible à traiter dans le même temps. Pouvez vous élaborer le plan d’un immeuble pendant sa construction ?

Nous avons une capacité d’attention limitée, et la focaliser sur des modes voisins en même temps en épuise la « réserve ». Votre mère vous dira sûrement que les femmes peuvent faire plusieurs choses en même temps. Apprenez que c’est faux, sauf si ce sont des automatismes.

Un désir légitime

L’idée de réaliser les sites internet sans code n’est pas en cause, ça serait même un grand pas, à condition de séparer les étapes et les compétences.

C’est ce que tente de réaliser Flash Catalyst : une passerelle entre graphisme > design d’interaction > développement :

Flash -Catalyst, Éditeur d'interactions riches pour Action Script

Flash Catalyst est encore un projet en cours de développement qui offre au designer la possibilité de générer les interactions directement depuis ses fichiers PSD ou AI en se basant sur les calques pour créer des transitions d’état. Le code est ensuite généré en Flex ou Action Script, les développeurs  reçoivent ainsi directement le code de l’interface. Tout y est, c’est déjà plus qu’un prototype.

J’émets de sérieuses réserves pour les nombreuses raisons citées plus haut, mais on est face à un défi qui s’efforce d’être relevé. Inventer la roue n’est pas si simple quand on n’arrive pas à donner une définition valide de la roue. Nous sommes sûrement à la veille de découvrir le bon processus, il semble que cela démange un peu tout le monde.

Moi même, quand j’ai un prototype fonctionnel, j’ai presque envie qu’il y ait un bouton « publier le site », il ne manque « que » les données et leur stockage !  Et de leur coté nombre de développeurs voudraient un bouton « générer l’interface ».

Preuve que c’est une tendance naturelle de penser selon un angle limité, le sien, et que  concevoir pour les utilisateurs, les autres, est indispensable en design.

La guerre des navigateurs a eu raison de cette balise et c’est tant mieux : son usage aurait détruit tout effort d’accessibilité et de référencement sémantique !

Pourtant les calques ont leurs avantages, cependant il ne faut pas les penser comme un superposition de couches, mais comme des versions de blocs pouvant être remplacés. C’est ce que permet l’ajax ((asynchronous JavaScript and XML, voir une définition)), une méthode permettant de modifier le contenu d’une zone de la page sans avoir à la rafraichir complètement ou amener le visiteur sur une nouvelle page.

Pour l’utilisateur, la page n’a toujours que deux dimensions, mais le designer doit la penser en 3 dimensions. Pas de la « vraie 3D », mais une superposition d’états différents d’une page.

Tout naturellement un designer est habitué à travailler avec les calques. Voici comment exploiter cette organisation à la conception d’interfaces :

Exemple : interaction riche et transitions

Imaginons un petit moteur de recherche de vins :

Affichons les résultats sur la même page, sans rafraichissement :

Et affichons un article sélectionné à la place des résultats :

3 états, 3 calques ! La profondeur de la page est la suivante :

Attention, cette démonstration sert uniquement d’exemple, j’ignore si c’est utilisable.

Utiliser la profondeur à son avantage

Sur une surface plane statique comme une page web, l’œil est attiré par le mouvement. Un changement d’état crée une animation sur la page, qui va concentrer l’attention de l’utilisateur sur cette zone.

La vision fovéale est limitée à quelques centimètres sur un écran d’ordinateur positionné en moyenne à 50 cm des yeux. La périphérie de cette zone est floue. C’est comme un appareil photo qui fait le point sur le premier plan, avec une faible profondeur de champ :

C’est la même chose sur une interface web. Ici, sur le site motoccasion.biz, la vision est concentrée sur le bouton « ajouter au panier »

La sélection va s’ajouter automatiquement au panier en haut à droite sans rafraichissement de la page. Une petite animation étend le bloc en longueur quand la liste s’allonge. Cette petite animation focalise la vision sur cette zone de la page.

Éviter le banner-blindness

Le « banner blindness » est un réflexe d’économie cognitive bien connu des publicitaires sur le web : certains formats d’images réservés aux publicité sont ignorés par les utilisateurs parce que ce sont des informations inutiles à sa tâche. Nous devenons tous aveugles aux publicités sur le web, au grand dam des régies!

Les animations que vous déclenchez doivent être liées aux actions de l’utilisateur et lui apporter un information utile, sinon il apprendra à les ignorer. C’est d’ailleurs une piste à creuser pour les publicitaires, qui doivent adapter leur stratégie aux contraintes du media web.

Penser aux employés ou clients qui utiliseront les interfaces que l’on conçoit, certes, mais peut-on y arriver en déshumanisant son propre travail ? Si un travail rigoureux individuellement est obligatoire, il faut savoir être souple et s’adapter aux habitudes et contraintes des autres intervenants d’un projet. Vous êtes un professionnel du design interactif, ils n’ont pas vos compétences et ne comprennent pas votre jargon. Ils ont des impératifs que vous n’avez pas et vous devez le respecter.

Aussi, inévitablement, un projet atteint une phase où tout semble s’être dispersé, chacun attendant sur l’autre. On fait face à un désordre épars de données, de documents, de livrables … En général c’est à ce moment que l’on a tendance à s’imposer encore plus de rigueur pour résoudre le problème, alors qu’il est plus productif d’organiser le désordre.

Quels sont les bons ingrédients d’un désordre organisé ?

Wireframes

Les wireframes (« fil de fer ») sont un excellent outil de conception.  Ce sont des documents esquissant sommairement la future interface.

Son aspect volontairement dénué de toute esthétique, voire volontairement brouillon, permet de se focaliser sur l’utilité et l’utilisabilité des composants d’interface, du parcours utilisateur choisi, de la correspondance de la proposition aux objectifs du commanditaire.

Prototypes

Pour aller plus loin, il est parfois utile d’envisager un prototype interactif.

Le prototype permet à la fois de tester les interactions et la navigation, si possible auprès de vrais utilisateurs, mais aussi d’avoir un livrable compréhensible pour les autres intervenants d’un projet, lesquels ne sont pas tous à même de déchiffrer un wireframe documenté avec des termes tels que « zone extensible », « carrousel », « navigation secondaire »…qui peuvent être mal interprétés.

En cela c’est un outil spectaculaire pour présenter le fruit de son travail, plutôt qu’un rapport indigeste que personne ne lira (conf. mon article « présenter sa documentation« )

Savoir s’arrêter

Il est tentant d’utiliser un prototype (ou les wireframes ayant servi à sa réalisation) comme document de référence, alors que ça n’est qu’un outil de mise à l’épreuve.

La conception d’une interface présente le paradoxe bien connu du serpent qui se mord la queue : il faut concevoir une interface ergonomique, mais on ne peut pas juger de son ergonomie tant qu’elle n’est pas créée. Et il n’existe pas de méthode pour concevoir une ergonomie parfaite dés la première itération. D’ailleurs la première itération est toujours mauvaise.

Une fois le prototype présenté et éprouvé apparaissent des erreurs et des réorientations, qui viennent valider ou invalider certains de vos choix.  Votre prototype est alors une base imparfaite mais aussi un point de référence. Il faut soit en faire une version 2, soit l’abandonner. Si vous travaillez sur des cycles courts comme c’est souvent mon cas, vous n’aurez pas les moyens ni le temps de refaire un prototype.

Mieux vaut produire de nouveaux wireframes ou corriger les premiers, dans le but d’augmenter le niveau de confiance de chaque nouvelle version. Le niveau de confiance, c’est la correspondance entre ce que vous avez conçu et ce que vous savez de sa pertinence. Par exemple vous savez que votre formulaire d’inscription est bien conçu car vous avez tous les champs et que vous connaissez le niveau d’expertise des utilisateurs, le niveau de confiance est élevé. Si, en attendant qu’on vous donne le détail exact, vous avez inventé les champs pour anticiper, le niveau de confiance est faible.

La référence définitive

La référence définitive est l’interface réalisée. Je suis ne suis pas de l’école « processus qualité » qui consiste à découper un projet en phases et postes biens définis avec un rétro-planning arrêté pour chaque jour de la semaine. La force des wireframe est leur rapidité d’exécution, c’est aussi leur limite. Faut-il créer un « wireframe avancé » annoté et plaçant chaque bloc au pixel près ? J’aurais plutôt tendance à croire que cela ralentit le projet et pêche par excès de confiance. Vous travaillez avec des humains, soyons souples. J’aime beaucoup l’illustration du processus organique réalisée par Nishant Kothary, designer chez Microsoft Mix :

Processus organique

Conserver le flottement

Voilà le moment de la conclusion polémique : je pense qu’il faut organiser un moment de flottement dès que vous sentez qu’il faut commencer à juger sur pièces. Quand vos wireframes et prototypes ont fait la plus grosse part du travail qu’ils pouvaient accomplir, vous ne pouvez plus réellement avancer sans voir le produit fini auquel seront confrontés les utilisateurs. Le niveau de confiance de chaque wireframe ne peut plus augmenter.

C’est le moment de passer à une nouvelle phase. Tester auprès d’utilisateurs, commencer le design graphique, voire même le développement, et de commencer une série de cycles  propositions/corrections très courts. C’est un moment clef où l’on pose les fondations et où l’on apprend beaucoup de choses qu’on n’aurait pu apprendre uniquement en interrogeant en amont et en planifiant. Vos collègues/prestataires/clients seront confrontés à des problématiques concrètes et pourront les reformuler dans leur langage pour les éprouver selon leur propre grille. C’est le moment où l’on se construit une image commune du projet, loin des diagrammes et schémas cloisonnés par corps de métiers.

Chaque phase doit être traitée avec sérieux et méthode, cependant c’est le professionnalisme qui impose de savoir s’orienter dans le désordre.

1. des offres packagées « tout en un »
2. des offres sur mesure « au cas par cas »

L’avantage du Pack

Le pack semble promettre un prix réduit et une mise en service sans surprise, tandis que le sur mesure s’adresserait à des budgets plus importants, demandant des efforts plus soutenus puisque tout est à inventer à chaque fois.

Bien sûr, quand on a réalisé un certain nombre de projet, on identifie des méthodes et des solutions et on les reproduits sur les suivant pour gagner du temps. Les petits projets sont ceux qui ont le plus de caractéristiques communes puisque leurs cahiers des charges sont les plus réduits et ne vont exploiter qu’un nombre limité de fonctions.

En interne on constate rapidement le gain de productivité acquis en clonant une base plus ou moins extensible pour chaque type de site, et la rentabilité s’en trouve ainsi augmentée. Pourquoi ne pas baisser alors leur prix ? Mieux vaut plus de projets à moindre marge que peu de projets pour une marge à peine meilleure…

Commercialement l’offre est séduisante puisque moins chère, exécutée rapidement, il ne reste plus qu’à se lancer en proposant le tout comme un produit.

Le pack de base à XXX€ HT, le pack corporate à XXXX€, le pack e-commerce à XXXXX€.

Le pack de base devrait être vendu en gros volumes pour être viable, il vaut mieux donc diriger sur le pack corporate. Pour cela il suffit de limiter les fonctions du pack de base pour le rendre quasi-inutile. Toute fonction supplémentaire est un « module », dont le prix unitaire est rédhibitoire.

Ce qui fait que leur addition fait vite choisir le pack corporate, « tant qu’à faire ».

Ensuite vient le pack e-commerce, ou « VIP », « Performance », appelez le comme vous voulez. On y a mis toutes les fonctions que l’on a pu répertorier en faisant une liste de ce qui existait sur le web. On y met la totale. A peu près.

Les inconvénients

• Quand on passe sur une logique de produit, on sort de la logique de service. Le service devient un corolaire du produit. Plus l’agence vend de pack, plus le client est traité industriellement.
• Aucun inventaire des fonctionnalités des sites web n’est exhaustif, car les variantes d’un outil sont infinies. Il existe des milliers de sortes de couteaux, et des milliers de sortes de formulaires.
• On ne vous conseillera pas. On ne vous proposera pas d’autres solutions que celles qui sont faciles à mettre en place.

Le pack vous mets en danger dés que vous avez un besoin spécifique. Et la plupart du temps, vous avez un besoin spécifique.

Quand un client investit dans un projet web, c’est parce que sa présence sur le web est stratégique. Soit il lui faut communiquer un type d’information particulier, soit il doit rendre un service à sa clientèle, soit il lui faut un outil pour tel objectif…

Le sur mesure n’est pas plus cher

N’importe quel professionnel va mettre en place des méthodes pour travailler plus vite. Mais aussi pour travailler mieux ! Le jeu des marges et de la productivité ne regarde pas le client, et quand on fait de la communication visuelle on doit se sentir investi par le projet. C’est pour ça qu’on a choisi ce métier.

Le sur mesure ne peu s’aligner sur le pack, mais le pack vous fera perdre de l’argent. Un site est un outil, s’il n’est pas calibré sur vos besoins vous vous retrouverez à devoir rattraper ses lacunes sur le terrain et à réinjecter de l’argent au coup par coup.

Alors oui, il y aura toujours des projets qui auront les même cahiers de charges et le même budget, mais non, on ne peut pas cloner un site et juste changer  visuels et textes !

Oui mais si il pleut ? Si la perceuse nous glisse des mains en permanence ? Si les informations ne sont pas lues par leur destinataires ?

Pour éviter le pire, on fais donc appel au designer, dont le travail sera de trouver des idées. Ces idées seront ensuite triées, choisies et évaluées.

Le client va garder le logo mais va mettre le fond dans une autre couleur. L’ingénieur va intégrer l’outil de recherche mais va faire sa propre fenêtre de résultat. Enfin le chargé de communication ou le directeur marketing va conserver votre mise en page mais remplir les « blancs » avec de nouvelles informations (en rouge de préférence).

Pas de panique !

Un mauvais design, ça se rattrape !

Ma stratégie actuelle, en attendant de trouver une réponse plus élaborée, est la suivante :

je laisse faire, parfois même je m’exécute docilement.

D’une part parce que les clients et leur collègues se focalisent toujours sur les mêmes éléments, ce qui détourne leur attention du plan général et des micro-interactions les plus indispensables. Cela me laisse donc de la marge pour proposer un design cohérent dans son ensemble.
D’autre part parce que c’est à se moment que je récolte les informations les plus précieuses sur le fonctionnement interne de l’entreprise : le comportement des protagonistes et leur interaction avec le projet.

Tous ces éléments après lesquels on a couru pendant la phase de conception surgissent à ce moment là. On peut donc récolter de quoi finir son travail.
La fin justifie les moyens
Laisser vos interlocuteurs détruire votre proposition est une étape comme les autres. Mettez les devant le résultat et laissez les s’interroger. En peu de temps, ils conviendront de l’urgence d’unifier l’effort de conception et de choisir un responsable pour cette tâche.

Coup de chance, ils m’ont justement sous la main et m’ont engagé exactement pour ça !

Pour finir, je précise que cette méthode ne donne pas des résultats dans 100% des cas, en tous cas elle est la meilleure que j’ai trouvée pour pouvoir continuer à travailler en milieu anarchique. Quand tout le monde est bêtement borné, je ronge juste mon frein jusqu’au prochain projet.

Mais je trouverais, je commence une grande carrière de manipulateur !

L'interface de l'éditeur Fcke

Le Wysiwyg permet de mettre en forme texte et image sans connaissance technique, et Fcke s’est imposé auprès de nombreux développeurs comme un choix fiable, gratuit (open source) et performant.
Mais le web change et les exigences des développeurs aussi. Les créateurs de Fcke planchent donc depuis deux ans sur un nouvelle mouture entièrement réécrite. Elle vient de sortir et force est de reconnaître qu’elle brille de mille feux !
Voici donc venir CKE !

L'interface de CKE

Plus « flashy » , non ?
Ces boutons ronds, ces ombres portées…très moderne. Et entièrement configurable avec ça ! Les nouveautés sont alléchantes:

• Des options permettant de tout paramétrer : quels boutons, quelle couleur, quelle taille…
• Une architecture de plugin permettant d’alléger ou d’étendre les fonctionnalités
• Des performances accrues à l’affichage et à l’enregistrement
• Une validation XTHML irréprochable
• Une accessibilité améliorée

Pour l’utilisateur final, tous ces changements sont vains.

Le comportement de l’éditeur n’a pas changé ! Mettre en page avec CKE est aussi peu intuitif qu’avec Fcke. J’ai fait immédiatement un essai de ce que j’ai vu faire des dizaines de fois par des utilisateurs : j’ai essayé de déplacer l’image à coté du titre :

J'ai déplacé l'image à l'aide de la souris e haut à gauche.

Voici le code généré :

<p>
<img align="left" height="168" hspace="10" src="http://a.cksource.com/c/1/inc/img/demo-little-red.jpg" width="120" />
</p>
<h1 id="firstHeading">
Little Red Riding Hood</h1>
<p>

Le titre h1 est dans le paragraphe p, l’accessibilité est déjà mise à mal. La validation W3C ne passera pas, en définitive, le flux des informations de la page est brisée.

Ce n’est pas ce que voulait faire l’utilisateur, il n’y connait rien en HTML. Rappelons que c’est tout de même le but du Wysiwyg.

Or, aujourd’hui tous les éditeurs Wysiwyg demandent des connaissances en HTML et en CSS pour faire des mises en forme un peu élaborées. Si j’avais voulu mettre mon image à droite, j’aurais dû changer son alignement. Un concept purement hérité des CSS.

Pire, de nombreuses options demandent carrément de rentrer des données numériques :

option d'images

Qui peut prétendre que je suis face à un éditeur qui ne demande aucune connaissance technique ? Nous sommes en 2009 et ces éditeurs sont moins intuitifs que les premiers traitements de texte informatique visuels :

Word en 1984

J’attendais bien plus de deux ans de travail par l’équipe de CKE. Je vois que l’adoption des nouveaux paradigmes Wysiwyg va se faire longuement attendre et que nos utilisateurs vont encore avoir à se battre avec des comportements erratiques ou à revoir leurs ambitions esthétiques à la baisse.

Un sujet à creuser, j’y reviendrait, avec le défrichage des tentatives pour remédier à cette immense lacune du web !

Un navigateur (browser), « c’est Google » ont répondu en majorité les gens. et quand on leur a demandé la différence entre Google et un navigateur, c’est le règne de la confusion la plus totale !

Une preuve de plus s’il en fallait que l’utilité importe plus que l’outil ! Les utilisateur veulent aller sur internet trouver une information, ils lancent l’application qui leur apportera cette solution. Son nom ? Peu importe. Mais il est sûr que le terme Internet Explorer est plus efficace que Mozilla Firefox. Les gens cliquent sur « Internet ». Et ils vont chez Google.

Ne leur parlez pas d’autre chose, amenez les à découvrir une manière plus efficace et plus simple  de l’utiliser, mais ne promouvez pas la supériorité technique ou la sécurité. Ils ne peuvent que vous croire sur parole, tandis que facile, ça ils peuvent le constater en quelques minutes.

Un service utile, un emploi facile, c’est la clé pour un produit numérique !

Le Modèle qui contient les données, indépendamment de toute présentation,
La Vue qui affiche les données d’après les instructions du Contrôleur,
Le Contrôleur qui va chercher les données à afficher en fonction de ce que fait l’utilisateur sur l’interface.

Wikipedia nous en donne le schéma suivant :

Modèle Vue Contrôleur

Chez les designers, notre paradigme suit une logique similaire, pour des raisons à peine différentes : en séparant forme et contenu, on facilite la maintenance des sites, et on en automatise une partie. Le contenu serait donc le Modèle et la forme la Vue. Le Contrôleur, pour un designer, sera alors le comportement de l’interface.

Par exemple, sur une page de contact, le contenu affiché dans la vue est un formulaire :

formulaire avant envoi

Si un utilisateur le rempli et l’envoie, on peut afficher un message de remerciement pour garantir que le message est bien envoyé. On change donc la Vue, en allant chercher un nouveau Modèle, que le Contrôleur aura chargé lorsque l’utilisateur aura appuyé sur le bouton « envoyer » du formulaire :

message de confirmation

Difficile de dire qui des programmeurs ou des designers ont inventé le principe . MVC est clairement attribué au créateur du langage smalltalk en 79, mais les graphistes utilisent des grilles de composition préformatées depuis l’invention de l’imprimerie.

Il y a dans le design d’interaction un dialogue constant entre ses racines graphique et son origine informatique. Je ne me lasse pas de découvrir les apports de l’un et de l’autre.

Les déficients moteurs n’ont par exemple pas tous les mêmes difficultés selon qu’ils utilisent une souris ou un trackball (boule directionnelle) ou exclusivement le clavier. Ainsi, certains auront plus de facilité à manipuler peu de boutons pour peu de mouvements, tandis que d’autres auront plutôt besoin d’avoir une vue d’ensemble plus générale de l’ensemble des fonctions.

En analysant l’usage quotidien, le logiciel va proposer une disposition basée sur les capacités et les préférences de chacun :

C’est une innovation à rapprocher de celle qui a fait débat l’an dernier, réalisée par le MIT . Cette dernière proposait une version différente d’un site internet basée sur le nombre de clics sur certaines sections des pages, qui permettait de dresser un profil cognitif. Bien que jugée intéressante, cette approche a été critiquée car elle ôte trop de contrôle à l’utilisateur.

Nous arrivons à un stade où on commence à bien connaitre et mesurer les utilisateurs. Les interfaces dites « intelligentes » commencent à être répandues, l’exemple le plus courant étant les recommandations d’articles des sites e-commerce, ou simplement la sélection de la dernière police utilisée dans Word !

Des pistes émergent pour pousser les interfaces au paradigme suivant : les interfaces émotionnelles. Les ordinateurs vont vouloir savoir si vous êtes contents…qui sait si nous n’auront pas à résoudre des bugs de chantage affectif !