Les articles de l'année 2012

La semaine dernière, j’ai eu la chance d’assister aux conférences de Paris Web. Je vais essayer de revenir cette semaine sur les conférences qui m’ont le plus marqué. L’une des principales têtes d’affiche était Mike Monteiro, avec sa conférence intitulée How Designers Destroyed the World.

J’avais découvert Mike Monteiro via sa conférence « Fuck you, pay me« , puis via ses podcasts sur Mule Radio Syndicate, ou encore son travail via sa société Mule Design Studio sur AllThingsD ou Evening Edition, et en avril dernier son livre « Design Is a Job » (horriblement traduit en français en « Métier web designer« ).

Comme le nom de sa conférence l’indique, Mike Monteiro nous raconte comment les designers ont détruit le monde. Comment les designers ont détruit le monde en se préoccupant de projets futiles plutôt que de s’attarder sur des choses qui comptent vraiment. A-t-on vraiment besoin de plus de 60 projets de pochettes pour iPad sur Kickstarter ? A-t-on vraiment besoin de cette veste imaginée par des étudiants du MIT qui se gonfle quand on reçoit un J’aime sur Facebook ?

Mike tourne ensuite toute sa conférence autour d’un exemple concret de mauvais design qui a ruiné la vie d’un être humain. A cause des préférences incompréhensibles sur la vie privée de Facebook, Bobbi Taylor a révélé malgré elle son homosexualité, jusqu’alors tenue secrète, à son père. Problème : son père est un trou du cul et l’a menacée de la renier et s’est mis à insulter les gens de sa chorale gaie sur Facebook. Comme le dit Mike, « Je suis père d’un garçon, et ceci n’est pas une façon de traiter vos enfants ». Vous pouvez lire l’article original du Wall Street Journal ou en français sur les blogs du Monde.

Mike enchaîne alors les conseils pour éviter de se retrouver dans une telle situation. « Décide d’être le connard qui va faire bouger les choses. Personne ne te donnera la permission. » (piqué chez Les Intégristes). Et surtout : si vous n’êtes pas d’accord avec ce qu’on vous demande de faire, dites non. Quittez votre boulot. Mais arrêtez de faire du mauvais travail.

« You are responsible for the work you put into the world » est à mon avis la phrase qui résume le mieux sa conférence (thème qu’on retrouve largement dans son livre).

Ce que j’ai particulièrement aimé, c’est que cela ne concerne vraiment pas que les designers au sens graphique du terme. Cela concerne tous les créateurs. Les développeurs, les intégrateurs, les entrepreneurs, les chefs de projet. Si vous créez quelque chose, que ce soit une affiche, un site web, un article sur votre blog, une vidéo sur Youtube, vous êtes responsable de l’impact que cela aura sur les gens.

Reste que certains conseils de Mike sont vraiment propres à la culture américaine, et ça s’est senti pendant les questions-réponses. Aux États-Unis, vous pouvez quitter votre boulot un lundi soir et trouver un autre travail le mardi matin, comme si de rien n’était. En France, on préfère vous garder deux mois en préavis au cas où, même si vous avez manifestement montré votre désintérêt dans votre boîte en démissionnant.

Ça n’en reste pas moins une très bonne conférence, et un très bon moment. L’ambiance dans la salle était électrique, presque religieuse. Alors oui Mike Monteiro lisait son texte sur son écran. Oui, il utilise l’effet de fumée de Keynote dans ses slides. Ça n’en reste pas moins un très bon spectacle avec quelques bonnes idées à retenir et à mettre en pratique.

En attendant que la vidéo de la conférence ne soit en ligne (si on en croit les années précédentes, ce ne sera pas avant avril prochain), je vous recommande vraiment le livre « Design is a job« . Je vous invite également à voir sa conférence « What Clients Don’t Know (… And Why It’s Your Fault) » donnée au TYPO Talks en mai dernier, où Mike raconte comment il s’est acheté un vélo, et comment éduquer les clients en leur expliquant notre travail.

J’adore les petites erreurs du quotidien, celles qui résultent d’une petite incompréhension ou d’un manque d’interrogation. Je suis retombé sur ma petite collection d’exemples d’erreurs glanées sur le web, issues de demandes prises un peu trop… littéralement.

Comme par exemple, quand vous demandez à un votre collègue d’écrire sur votre camion citerne « Diesel fuel » et « No smoking » en arabe.

Ou quand vous demandez à votre boulanger un gateau avec écrit dessus « Meilleurs voeux Suzanne » et en-dessous de ça « Tu vas nous manquer ».

Ou quand votre collègue devait traduire un panneau anglais en gallois, et qu’il a traduit votre première réponse à son mail de demande du texte à traduire (qui manque de bol était « Je ne suis pas au bureau pour le moment. Envoyez tout message à traduire. »).

Ou quand vos ouvriers ont creusé un trou dans votre plafond de la forme des nuages de révision d’AutoCAD.

Ou quand vos ouvriers ont pris la flèche vers l’info-bulle de votre plan pour une découpe dans vos escaliers.

Ou quand l’acteur principal de votre série hurle à voix haute la didascalie censée lui indiquer son intonation (en l’occurrence, « disappointed« ).

Des erreurs, ça arrive à tout le monde. Mais celles-là, je prie pour les éviter.

Dans iOS6, Safari intègre une nouvelle fonctionnalité assez discrète : les smart banners. Une smart banner (ou « bannière intelligente », en opposition à toutes ces bannières stupides), c’est une bannière qui vient s’ajouter en haut de votre site dans Safari pour mettre en avant votre application iOS.

Pour ce faire, il vous suffit d’ajouter la balise meta suivante avec l’identifiant de votre application, n’importe où dans votre code HTML. Pour obtenir l’identifiant de votre application, vous pouvez utiliser l’iTunes Link Maker d’Apple.
<meta name="apple-itunes-app" content="app-id=562772514" />

La bannière affiche alors l’icône, le nom, le développeur, la note et le prix de l’application, ainsi qu’un lien pour y accéder depuis l’App Store et une croix pour faire disparaître définitivement la bannière. Voici le rendu final sur une page web (avec ici l’excellentissime Devil’s Attorney).

Si vous faites parti du programme d’affiliation d’Apple, vous pouvez également ajouter votre identifiant d’affilié comme suit :

<meta name="apple-itunes-app" content="app-id=562772514, affiliate-data=partnerId=42&siteID=darkmaul" />

Sur son blog, David Smith détaille également l’existence d’un paramètre supplémentaire permettant de passer une URL à votre application dès son premier lancement, pour afficher par exemple un contenu spécifique.

Je ne suis en général pas friand de ce genre de gadget purement marketing, mais c’est clairement beaucoup moins intrusif que des alertes JavaScript ou des lightbox maison. Et ça vous évite un peu de tomber dans les pratiques mobiles du Mal.

S’il y a bien une spécification qui m’excite plus que tout parmi les nouveautés de HTML5 et CSS,  c’est bien celle des filtres CSS. Cette spécification regroupe deux notions importantes : les filtres par défaut, et les filtres personnalisés. En voici un rapide aperçu.

La propriété filter permet d’appliquer des effets à n’importe quel élément d’une page web. Par défaut, la spécification prévoit plusieurs fonctions de filtres qui vont jouer sur le rendu de l’élément. On retrouve des filtres de couleurs (grayscale, sepia, saturate, invert, brightness, contrast, opacity) ou des filtres de transformation (blur, drop-shadow). Prenons l’exemple simple du filtre de niveau de gris (grayscale). Ce qui nécessitait un rendu côté serveur ou via un plugin il y a 5-6 ans, puis quelques lignes de JavaScript en Canvas il y a 2-3 ans, est désormais devenu un one-liner.

filter:grayscale(1);

La cerise sur le gateau, c’est que comme il s’agit de propriétés CSS à valeur numérique, vous pouvez les animer grâce à la propriété transition ou aux déclarations d’animation CSS.

Parmi ces filtres natifs, la fonction drop-shadow est particulièrement intéressante. Contrairement à la propriété box-shadow (qui se contente de faire une ombre rectangulaire autour d’un élément), le filtre CSS drop-shadow s’adapte aux formes. Cette démo issue de cet article chez Bricss illustre très bien la différence entre les deux propriétés.

Mais là où ça devient vraiment intéressant, c’est avec les filtres personnalisés, connus aussi sous le nom de shaders CSS. Un shader, dixit Wikipédia, est « une suite d’instructions donnée à un ordinateur, utilisé en image de synthèse, pour paramétrer une partie du processus de rendu réalisé par une carte graphique ou un moteur de rendu logiciel ». Présentés pour la première fois par Adobe en octobre 2011 et décrits comme « des effets cinématiques pour le web« , les shaders CSS ont rejoint la spécification des filtres en août dernier.

Pour créer un shader CSS, pas de JavaScript, mais du GLSL (langage proche du C déjà utilisé en 3D avec OpenGL, WebGL ou DirectX). AlteredQualia a récemment écrit un article très complet pour débuter avec les shaders CSS. Concrètement, il existe deux types de shaders :

• Les vertex shaders, qui permettent de déplacer et déformer les sommets d’un polygone
• Les fragment shaders, qui permettent de modifier le rendu des pixels d’un objet

J’ai récemment commencé à lire Switch : how to change things when change is hard de Chip et Dan Heath. Comme son titre l’indique, le livre explique comment parvenir à changer des choses quand le changement semble impossible. Et pour ça, tout le livre tourne autour d’une analogie sur notre cerveau : l’éléphant et son cavalier. Voici un extrait du premier chapitre.

Le savoir conventionnel en psychologie est que le cerveau a deux parties indépendantes qui travaillent en permanence. Premièrement, il y a ce qu’on appelle le côté émotionnel. C’est la part de vous qui est instinctive, qui ressent de la douleur et du plaisir. Deuxièmement, il y a le côté rationnel, aussi connu comme le système réflectif ou la conscience. C’est la part de vous qui délibère et analyse et se penche vers l’avenir.

Ces dernières décennies, les psychologues ont beaucoup appris sur ces deux systèmes, mais bien sûr l’Homme a toujours été conscient de la tension. Platon disait que dans nos têtes nous avons un cocher rationnel qui doit maîtriser un cheval indiscipliné qui « répond à peine à la cravache et l’aiguillon combinés ». Freud écrivait à propos de l’identifiant égoïste et du superégo consciencieux (et aussi l’égo, qui sert d’intermédiaire entre les deux). Plus récemment, des économistes comportementaux ont surnommé les deux systèmes le Planificateur et le Faiseur.

Mais, pour nous, la tension du duo est mieux capturée par une analogie utilisée par le psychologue de l’Université de Virginie Jonathan Haidt dans son fantastique livre The Happiness Hypothesis. Haidt dit que notre côté émotionnel est un Éléphant et notre côté rationnel son Cavalier. Perché en haut de l’éléphant, le cavalier tient les rênes et semble être le chef. Mais le contrôle du cavalier est précaire car le cavalier est tout petit à côté de l’éléphant. A chaque fois que l’éléphant de six tonnes et le cavalier sont en désaccord sur la direction à prendre, le cavalier va perdre. Il est totalement soumis.

La plupart d’entre nous sont bien trop familiers avec des situations dans lesquelles notre éléphant domine notre cavalier. Vous avez déjà vécu cela si vous vous êtes déjà reveillé en retard malgré votre réveil, si vous avez déjà trop mangé, rappelé votre ex à minuit, procrastiné, essayé d’arrêter de fumer et échoué, laissé tomber le sport, si vous vous êtes déjà mis en colère et avez dit quelque chose que vous regrettiez, abandonné vos cours d’espagnol ou vos leçons de piano, refusé de parler lors d’une réunion parce que vous aviez peur, et ainsi de suite. La bonne nouvelle c’est que personne ne compte les points.

La faiblesse de l’éléphant, notre côté émotionnel et instinctif, est claire : il est fainéant et capricieux, recherchant souvent la récompense à court terme (un cornet de glace) plutôt qu’à long terme (perdre du poids). Quand les efforts pour changer échouent, c’est habituellement la faute de l’éléphant, puisque les types de changements que nous voulons impliquent généralement des sacrifices à court terme pour une récompense à long terme. (On réduit les dépenses aujourd’hui pour obtenir un meilleur bilan l’année prochaine. On évite le cornet de glace aujourd’hui pour une meilleure silhouette l’année prochaine.) Les changements échouent souvent car le cavalier ne peut simplement pas tenir l’éléphant sur la route suffisamment longtemps pour atteindre la destination.

La faim de l’éléphant pour une gratification instantanée est l’opposée de la force du cavalier, qui a habilité de penser à long terme, de planifier, de penser au delà du moment (toutes ces choses que votre animal de compagnie ne peut pas faire).

Mais ce qui peut vous surprendre est que l’éléphant a aussi d’énormes forces et que le cavalier a des faiblesses handicapantes. L’éléphant n’est pas toujours le mauvais garçon. L’émotion est le truc de l’éléphant : l’amour et la compassion et la sympathie et la loyauté. Cet instinct féroce que vous avez pour protéger vos enfants du mal, ça c’est l’éléphant. Ce raidissement de la colonne vertébrale que vous ressentez quand vous devez vous défendre, ça c’est l’éléphant.

Et encore plus important si vous regardez un changement en cours : c’est l’éléphant qui fait avancer les choses. Progresser vers un but, qu’il soit noble ou grossier, demande l’énergie et la conduite de l’éléphant. Et cette force est le miroir de la plus grande faiblesse du cavalier : faire du surplace. Le cavalier a tendance à suranalyser les choses et à surréfléchir. Il y a des chances pour que vous connaissiez des gens qui ont le problème du cavalier : votre ami qui peut agoniser pendant 20 minutes avant de choisir ce qu’il va manger pour dîner; votre collègue qui peut se remuer les méninges pour trouver de nouvelles idées pendant des heures mais ne semble jamais pouvoir prendre la moindre décision.

Si vous voulez changer les choses, vous devez attirer les deux. Le cavalier fournit le planning et la direction, et l’éléphant fournit l’énergie. Donc si vous atteignez les cavaliers de votre équipe mais pas les éléphants, les membres de votre équipe auront la compréhension sans la motivation. Si vous atteignez leurs éléphants mais pas leurs cavaliers, ils auront la passion mais sans direction. Dans les deux cas, les défauts peuvent être paralysants. Un éléphant réticent et un cavalier qui fait du surplace peuvent tous deux faire en sorte que rien ne change. Mais quand les éléphants et les cavaliers bougent ensemble, le changement peut arriver facilement.

C’est ma nouvelle analogie préférée.