Pause vacances

Bonjour à tous !

Au bout de deux ans sans vacances, je m’octroie 15 jours au cœur de ma Bretagne natale.

Ne le prenez pas mal, chers clients, amis ou lecteurs, ça n’est pas vous qui m’avez fatigué au point que je veuille me soustraire à vos sollicitations. Non, je me suis fatigué tout seul d’avoir monté mon activité, laquelle croît au point de m’offrir le luxe de congés annuels !

Que ceux qui se lamentent du manque d’articles neufs se rassurent, j’en ai sous le coude, et il ne me manque qu’un peu de temps pour les rendre lisible et digestes.

Les projets se suivent à un rythme fou actuellement, et sans vouloir faire d’effet d’annonce, un changement de structure s’impose pour suivre le rythme (et s’offrir une vie privée le soir, aussi !). Donc, des nouvelles fracassantes salueront la fin de l’été, avec tambours et trompettes.

Voici pour ceux qui ont souhaités de mes nouvelles. Et pour que les veilleurs ne m’archivent pas trop vite de leur agrégateurs…je ne suis pas encore un lien mort !

Peut on construire un site internet graphiquement ?

Le fantasme des graphistes

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 profondeur de champ de l’écran

Le vétéran du web que je suis a connu la lointaine époque du navigateur Netscape et de sa balise <layer>, qui permettait de créer des calques superposés et imbriqués. Le travail par calque est indispensable aux graphistes dans leur logiciels de création, et il pouvait sembler évident alors de porter cette habitude dans le HTML.

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.

Concevoir une interface : la part du désordre

« Conception centrée sur l’utilisateur », « Facteurs humains » ! Je souscris à ces paradigmes  et à l’esprit qui les anime. Mettre l’utilisateur au centre de la conception, une grande et belle idée, prendre en compte l’humain, une obligation éthique pour tout professionnel qui se respecte.

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.

Il n’y a pas de « ebook »

Je vais critiquer ici l’Ipad et les ebook readers de manière très présomptueuse. Je reste conscient que les industries du livre et de l’informatique ont des impératifs économiques et qu’elles avancent sur un territoire très instable. Néanmoins, je m’autorise à avancer ce qui suit :

Les ebooks ne sont pas des livres

L’Ipad a semblé donner un coup de semonce à l’édition papier en présentant l’application Ibooks. Le Kindle d’Amazon avait également affolé tout le monde. Ces deux instrument ont peu en commun à l’intérieur, mais beaucoup à l’extérieur, dés qu’il s’agit de lire dessus.

Deux tablettes plates, possédant un écran et affichant des documents textuels ou iconographiques, dotés de contrôles pour manipuler et naviguer. L’Ipad a l’avantage de la couleur, le Kindle celui de l’encre électronique. L’Ipad a un écran tactile, mais jusqu’à preuve du contraire ça n’est pas nécessairement un avantage.

J’ai déjà pu manipuler le Kindle et ses concurrents, mais je n’ai jamais touché à l’Ipad. Ce qui ne me manquera pas pour expliquer mon propos puisque pour une fois il ne concerne pas les interactions, ni même l’expérience utilisateur, mais l’invention elle même.

Ce que n’est pas un livre :

• Un livre n’est pas la photographie d’un livre.

L’Ipad avec son mimétisme des pages en papier, sa réplique du format de la page, sa présentation d’étagère, se comporte comme un archiviste numérisant des contenus pour les préserver du temps.

• Un livre n’est pas un rectangle.

Le Kindle  et l’Ipad proposent une lecture horizontale des pages, que l’on tourne comme sur un « vrai livre ». L’ipad a même une charmante petite imitation du papier qui se courbe, comme on peut le voir depuis longtemps sur les catalogues en Flash comme chez Issuu

En mimant la « finitude » du format rectangulaire des pages d’un livre , les readers actuels font une opération naïve et contre productive : c’est comme si Gutenberg avait cherché à reproduire la sensation de lecture de rouleaux de parchemin. Les rouleaux et les pages web peuvent accueillir des livres, ils peuvent décider de la fin de la page selon d’autres critères ou contraintes.

Notons que les premiers livres imprimés (les incunables) gardaient eux aussi des caractéristiques des manuscrits et étaient des objets richement décorés. Nous sommes encore à ces hésitations sur le concept.

Un livre qu’est ce que c’est ?

• Un objet

Ça au moins tous les constructeurs l’ont compris et mettent tous leurs efforts dans le matériel physique.

• Un contenu

Textes, iconographie, et pourquoi pas interactivité, média, avant tout un sujet. C’est un outil pour communiquer du sens. Transmettre une idée, une histoire, divertir ou informer. On l’a inventé pour ceux qui n’étaient pas là pour entendre, pour diffuser.

On ne peut pas remplacer le papier

Le livre a connu plusieurs formes : les tablettes, les rouleaux, les feuillets reliés, et aujourd’hui le document numérique. Le livre est libre de définition physique depuis son invention. Il n’est pas rectangulaire, il n’a pas que du texte ou que des images, il  se lit debout ou assis, certains ont des images, d’autres non.

Les inventeurs de « lecteurs de livres électroniques » font fausse route en cherchant à importer le papier dans leur machine. Ils ne sont pas posés la question de l’outil, mais uniquement de l’utilisation. Nous lisons déjà des documents numériques pensés et mis en page pour le support numérique. Ce sont des pdf, des mails, des pages web. Consulter la restitution d’un livre papier est une autre démarche. Certains livres ne pourront jamais être numérisé autrement que comme témoignages de ce qu’ils sont, c’est inévitable.

Tous ces objets suivant SONT des livres, et ils ne peuvent exister numériquement que comme témoignage de ce qu’ils sont réellement :

Flip book

livre pop up

livre expérimental

Le papier est du papier, le numérique du numérique

L’ergonome Jakob Nielsen avait en 1998 expliqué les échecs répétés des interfaces en 3D en affirmant : 3D is for 3D (« La 3D c’est pour la 3D »). C’est à dire que pour manipuler des informations textuelles ou iconographiques en 2D, comme un document Word ou une page web, la 3D n’était qu’un filtre compliquant les innombrables usages qui en sont fait, tandis qu’un environnement 3D s’avère très efficace pour travailler sur de l’image de synthèse ou des objets réels (un simulateur de vol par exemple, ou une opération chirurgicale).

Le document numérique a toutes les qualités requises pour accéder au rang de « livre », il ne manque plus aux éditeurs qu’à comprendre qu’ils doivent faire une mise en page papier et un mise en page numérique. Le document numérique n’a pas les limites physiques du papier, il n’est pas nécessaires de les reproduire, il a déjà assez de limitations et de défis à l’accessibilité comme ça !

Conclusion : les ebooks n’existent pas

J’affirme donc : il n’y a pas de ebook, il y a des livres, qui sont fait pour le format dans lequel ou lesquels on les publie.

J’emprunte cette insolente affirmation au sceptique Sextus Empiricus, lequel explique dans son « Contre les professeurs » pourquoi les professeurs, les enseignants, sont une illusion, et donc n’existent pas ! C’était plus une insulte qu’une véritable exposition sceptique, en tous cas quel humour ! (au passage, oui, je lis ce genre de livres, on a tous nos tares).

Le ebook n’est pas une invention. C’est l’utilisation de plusieurs autres invention (l’ordinateur, l’encodage des caractères, …) dont les applications sont vieilles de plusieurs décennies. Les e-reader sont un dispositif inutiles pour qui est déjà équipé. Un téléphone suffit amplement à lire un livre, comme au japon ou 85% des étudiants lisent des romans sur leur mobile.

Un peu de recherche sur les usages et les besoins, hors d’une démarche purement marketing sur les désirs, fournirait à coup sûr un outil plus convaincant.

crédits photos : Kyle Bean, emmealcubo, topekalibrary, crystiancruz