Les articles de la catégorie « Conception »

La sécurité passe aussi par la qualité

Ce soir, j’ai voulu consulter l’état de mon compte en banque personnel au Crédit Agricole. Je ne sais pas si c’est comme ça dans toutes les banques, mais le Crédit Agricole a cette bizarrerie d’être segmenté selon votre département, où chaque département est considéré comme une entité différente. Quand j’habitais en Picardie et que j’étais au Crédit Agricole Nord Est, je me rendais sur www.ca-nord-est.fr pour consulter mes comptes. Maintenant que j’habite dans le Nord, je suis au Crédit Agricole Nord de France, et je dois me rendre sur le site www.ca-norddefrance.fr (on remarquera que « norddefrance » n’est pas séparé par des tirets, contrairement à « nord-est »). Je trouverais ça plus simple de pouvoir me connecter directement sur le site www.credit-agricole.fr, mais ce site ne sert qu’à faire une redirection sur les sites annexes.

Or donc, en voulant aller consulter l’état de mon compte ce soir, je me suis rendu sur www.ca-norddefrance.fr. Et j’ai tout de suite été interpellé par un message bien mis en avant sur la page d’accueil.

Menace de sécurité

Menace de sécurité
Un virus particulièrement agressif est actuellement actif sur internet. Il s’attaque aux ordinateurs personnels et aux téléphones mobiles. Il permet à des escrocs d’effectuer des virements à partir de vos comptes.

Malgré le titre de l’onglet pas vraiment bien rédigé (« Alerte sécurité virus »), le vocabulaire utilisé est particulièrement effrayant ! « Menace », « virus », « agressif », « escrocs » ! Je ne suis pas sûr que la police utilisée corresponde à la gravité du message. Mais je décide quand même de découvrir de quoi il s’agit en cliquant sur le très peu explicite « En savoir + ».

Fenêtre pop-up bloquée

Pas de chance pour moi, la page a voulu ouvrir la fenêtre en pop-up, qui s’est retrouvée automatiquement bloquée par mon navigateur (Chrome, dans sa configuration par défaut vis-à-vis des pop-ups). La gravité annoncée de la situation ne vaut pas la pénibilité d’ouvrir une fenêtre en pop-up. Je décide alors de passer mon chemin pour le moment.

En cliquant sur le bouton « Accédez à vos comptes » sur la page d’accueil, je suis redirigé vers le domaine www.cr867-comete-g2-enligne.credit-agricole.fr, qui me permet de m’authentifier.

AUTH

L’URL utilisée n’est franchement pas rassurante, et j’ai un peu de mal à repérer le domaine « credit-agricole.fr » pour m’assurer que je suis bien sur le site de ma banque. Le titre de la page HTML (« AUTH ») et l’absence de favicon dans l’onglet du navigateur n’aident pas à me rassurer. Mais avec l’habitude, je sais que je suis bien sur le site de ma banque. Je vais donc pouvoir me connecter pour consulter mes comptes. Sauf qu’un message rappelant l’alerte sécurité attire à nouveau mon attention.

Alerte sécurité

Le Crédit Agricole accorde une grande attention à la sécurité de ses sites Internet. En tant qu’utilisateur, vous avez également un rôle important et actif à jouer pour assurer la sécurité des informations qui vous concernent. Consultez ci-dessous les RECOMMANDATIONS de SECURITE à respect :

« En tant qu’utilisateur », j’ai un rôle important à jouer pour assurer ma propre sécurité ? Je suis tout ouïe ! Je clique donc sur Nos recommandations. Là, j’ai droit à une fenêtre qui s’ouvre en pop-up (qui n’a cette fois-ci pas été bloquée par mon navigateur), sur cette page. C’est « l’espace sécurité » du site du Crédit Agricole Nord de France, qui vise à m’éduquer sur de bonnes pratiques pour assurer ma sécurité. Sauf que je ne retrouve aucune mention sur cette page de l’alerte sécurité qui m’a fait si peur. Je décide donc de fermer la fenêtre.

En revenant sur la page pour m’identifier à mon compte, je décide de cliquer sur le premier bandeau jaune tout en haut de la page. Là, je suis redirigé vers une page du « Guide sécurité » sur le domaine www.credit-agricole.fr, à l’adresse www.credit-agricole.fr/guidesecurite/Attention-malware-s-installant-sur.html. Le nom de la page HTML attise particulièrement ma curiosité : « Attention-malware-s-installant-sur ». Sur quoi ? Vite ! Dites, moi ! Je commence donc la lecture de la page, et je souris en voyant le titre de la page.

Titre mal intégré

Le design du site n’a clairement pas été prévu pour un titre aussi long. Résultat, le titre passe sur deux lignes, pour un rendu plus qu’amateur. Pour une page censée me rassurer sur la sécurité de mon compte, c’est raté. Je poursuis quand même la lecture des explications sur l’origine de la menace.

Et je commence à comprendre de quoi il s’agit en lisant les explications suivantes.

Android wins

Les « escrocs » envoient de faux SMS invitant à installer une application au format « .apk », l’extension des applications sur Android. Cela signifie qu’en tant qu’utilisateur d’iOS, je n’ai pas du tout à me soucier de cette alerte. [Insérez ici une blague sur Android et la sécurité]. Le choix d’une capture d’écran du SMS sous iOS me semble alors particulièrement malvenu. Et surtout, nulle part dans l’article il n’est fait mention d’Android ou d’iOS. Le Crédit Agricole parle uniquement et vaguement de « smartphone », ne cherchant pas du tout à rassurer les clients non concernés.

J’ai donc finalement pu oublier tout ça pour consulter tranquillement mes comptes. Mais un message lu dans mes pérégrinations me trotte à l’esprit.

En tant qu’utilisateur, vous avez également un rôle important et actif à jouer pour assurer la sécurité des informations qui vous concernent.

C’est vrai. Et c’est très important d’éduquer ses clients sur la sécurité des informations transmises en ligne et hors ligne.

Mais je pense que l’éducation sur la sécurité, ça passe aussi par une conception de qualité. En ne montrant que peu d’attention pour le choix de ses textes sur le web (comme le « En savoir + » ou le « AUTH » en titre de page), des URL farfelues, des pratiques du web d’un autre siècle (comme l’ouverture de fenêtre en pop-ups), le Crédit Agricole éduque ses clients à s’attendre à un service médiocre. (Ne me lancez même pas sur l’application iOS du Crédit Agricole). Les clients du Crédit Agricole ne sont donc pas surpris de recevoir une demande d’installation d’application sur leur smartphone par SMS. Ils ne seront pas non plus surpris ni méfiants de voir que la dite application est mal fichue, et que sa charte graphique est clairement falsifiée. Parce que c’est ce que le Crédit Agricole conditionne ses utilisateurs à accepter.

Peut-être qu’en ayant des services de qualité irréprochable, ce que j’estime être en droit d’attendre d’un établissement bancaire, les utilisateurs seraient plus méfiants face à des applications d’escroquerie médiocres.

Rappeler les bases

Le mois dernier j’ai eu la chance de séjourner à New York City. Au hasard de mes trajets en métro, je suis resté bloqué sur cette publicité :

You've got to hug and kiss your kids. Words aren't enough.

 

Vous devez serrer dans vos bras et embrasser vos enfants.
Les mots ne suffisent pas. 

Ça m’a semblé bizarre. Je n’ai pas d’enfants, mais cela m’a semblé être une évidence, un comportement des plus basiques à adopter. Bien sûr que vous devez faire des câlins et embrasser vos enfants. Il se trouve que cette publicité fait partie d’une campagne de 2008, « 10 façons d’être un super papa« , incitant d’autres comportements « basiques », comme écouter son enfant, manger ensemble, passer du temps ensemble… Cependant, je conçois que la vie de parent ne doit pas être toujours facile, et que ces rappels peuvent être utiles.

En parlant de rappel utile, je suis retombé ce week-end sur cet excellent article de Dustin Curtis sur les crash aériens, « Pilotez l’avion« . Il revient notamment sur les explications du crash du vol Air France 447 en plein océan atlantique en 2009 :

Peu après que le problème initial de capteur de vitesse ait été résolu par les systèmes anti-gel inclus dans l’avion, l’AF447 était un avion parfaitement opérationnel. Chaque instrument fonctionnait parfaitement. Il volait à une altitude sans danger. Si les pilotes avaient appuyé sur quelques boutons pour ré-activer le pilote automatique, tout le monde à bord aurait survécu. Mais ils ne l’ont pas fait. L’un des co-pilotes a fait une seule erreur absurde, pendant quatre minutes et vingt-trois secondes, qui a fait chuter l’avion.

Ce genre de défaillance humaine est plutôt courante; ce genre d’en apparence stupides décisions impossibles sont faites tout le temps dans des situations catastrophiques. J’ai déjà vu la panique s’installer quand les serveurs d’une startup sont tombés, par exemple, amenant les ingénieurs à passer à côté de choses simples dans leur confusion. J’ai déjà senti cette force écrasante quand j’ai fait de grosses erreurs.

À chaque fois que je lis ou vis l’une de ces situations, je me souviens d’une histoire que j’ai lue dans The Checklist Manifesto sur les listes de vérification en cas de panne moteur sur un avion Cessna à un seul moteur. La liste comporte six étapes cruciales, comme par exemple s’assurer que les vannes de carburant sont ouvertes et que la pompe du réservoir de secours est activée. Mais la première est fascinante. C’est simplement pilotez l’avion.  Dans la confusion causée par la perte d’un moteur, les pilotent paniquent souvent et oublient les choses les plus évidentes qu’ils devraient faire. Ça semble totalement inutile, mais cette étape assure la meilleure chance de survivre.

Je suis parfois surpris de certains commentaires sur des articles rappelant des bases, évoquant parfois la tristesse d’avoir à rappeler ces bases, parfois une pointe de condescendance, mais parfois tournant limite au lynchage public.

Plus je travaille en tant qu’intégrateur ou plus généralement en temps que concepteur web, et plus je réalise à quel point il est indispensable de rappeler les bases, que ce soit avec des clients néophytes ou des collègues avertis, et que ce soit dans des moments calmes en pré-conception ou dans des moments d’urgence une fois un site en production.

Le feriez-vous dans la vraie vie ?

Hier, j’ai vu chez Badsender cet exemple édifiant de newsletter :

Un titre de presse avec la même « Une » chaque jour ! Ok ou Ko ?

Chaque jour, l’objet de la newsletter envoyée par Libération est invariablement le même : « Le point de l’actualité du + DATE + au matin ».

Pourquoi ce qui est impensable avec la version papier du quotidien devient possible avec l’email ? Pourtant, la newsletter de Libération génère probablement un traffic considérable sur son site internet. Un traffic indispensable à la monétisation digitale du quotidien. Alors pourquoi ne pas optimiser ? Pourquoi cette paresse ?

C’est complètement fou. Le premier contact que n’importe quel abonné aura avec cette newsletter, la première information qui sera lue, chaque matin, sera totalement dénuée d’intérêt. (C’est aussi utile qu’un fichier appelé « style.css« .) Jamais un grand quotidien national n’irait occuper la plus grande partie de sa une avec la date du jour dans « la vraie vie ».

C’est le genre de pratique qui me rend fou, un peu comme les popups bloquantes à l’arrivée sur un site vous demandant vos coordonnées, un like ou un ticket restaurant, à votre bon coeur. Jamais un commerçant dans « la vraie vie » n’irait vous demander vos coordonnées dès votre entrée dans sa boutique. Il y a un temps pour tout.

Cela me rappelle certains exemples donnés par Charles de UXUI dans son article sur 24 jours de web, « Les concepteurs de sites internet ne sont pas (tous) des utilisateurs comme les autres » :

Une bannière publicitaire pour la gendarmerie sur le site de La Redoute ? Le concepteur salue un placement ambitieux, l’utilisateur se demande s’il existe un rapport entre le manteau qu’il venait chercher et ce gendarme qui lui sourit (et qui ne porte même pas de manteau.)

Les gendarmes à St Tropez... Ah non, La Redoute.

Vous imaginez rentrer dans une boutique de prêt à porter dans « la vraie vie » et être accueilli par une escouade de gendarmerie, présente pour recruter ? Ce serait fou.

Et je ne parle même pas des sites qui bloquent activement leurs utilisateurs sur des critères purement physiques, brillamment recensés sur WTF Mobile Web :

WTF Mobile Web

Feeling emasculated.
Come back when you have a bigger screen.

Vous imaginez rentrer quelque part dans « la vraie vie » et vous faire gentiment éjecter parce que vous êtes trop petit, trop grand, pas « bien comme il faut » ? Non merci.

Google avait magnifiquement illustré tout ça dans cette vidéo il y a deux ans :

Google Analytics In Real Life - Online Checkout

En plus de respecter la loi des titres de Betteridge, « Le feriez-vous dans la vraie vie ? » est une bonne question à se poser lors de la conception d’un site web. Parce qu’au cas où il serait nécessaire de le rappeler : le web, c’est aussi « la vraie vie ».

« Arrêtez de dessiner des poissons morts »

Je regarde beaucoup de conférences, et il y a des tas de gens que j’admire vraiment. Et puis il y a Bret Victor. Comme le disait Irene Ros à TakeOffConf à Lille en janvier dernier, « aucune conférence ne devrait se passer sans citer Bret Victor ». J’avais été bluffé par sa conférence « Inventing on principle » l’année dernière. Cette semaine, une nouvelle vidéo d’une de ses conférences au SIGGRAPH de San Francisco en mai 2012 a été mise en ligne : « Arrêtez de dessiner des poissons morts ».

This is not a fish

Ceci est ce que Magritte appelle « la trahison des images ». Ceci n’est pas un poisson. C’est une image d’un poisson. C’est une représentation visuelle d’un poisson. Si j’avais dessiné ça sur papier, ce serait une plutôt bonne représentation d’un poisson. Si vous ouvriez un livre que vous tombiez sur ce dessin, vous vous diriez « oui, il y a une image d’un poisson dans mon livre ». Ça capture toute la « poissonitude » que l’on peut capturer à travers un media papier. Mais ceci n’est pas du papier, c’est un nouveau média. Et dans ce média, c’est une très mauvaise représentation d’un poisson. Ça ne ressemble pas du tout à un poisson.

Les poissons sont tout le temps en train de bouger. Si vous regardez un poisson, il fera surement des aller-retour, il bougera son corps d’avant en arrière, remuant sa queue. Les poissons sont tout le temps en mouvement. Dans un média où nous nous attendons à voir du mouvement là où il y a du mouvement, ceci ne ressemble pas du tout à un poisson vivant. C’est une bonne image pour un poisson mort. Et si vous voulez dessiner un poisson mort, Photoshop est un super outil. Tout ce que vous allez dessiner dans Photoshop sera complètement mort, totalement statique, pas du tout en mouvement.

Mais je ne veux pas dessiner un poisson mort, je veux dessiner un poisson vivant.

Le parallèle avec le web n’est pas trop difficile à faire. Et c’est ainsi qu’il commence à animer son poisson sur son interface faite-maison avec deux iPad reliés en Bluetooth. Les différents concepts d’interface qu’il présente font vraiment toujours autant envie. Surtout, il argumente avec précision pourquoi, d’après lui, taper du code n’est pas adapté pour faire de l’animation.

La deuxième raison pour laquelle je pense que coder est inapproprié pour créer des arts graphiques vient de la relation entre un langage et la compréhension visuelle. Du code, c’est du langage. Nous codons dans des langages de programmation. Nous pensons de manière linguistique lorsque nous codons.

Dans une large mesure, la seule raison pour laquelle des artistes créent des arts graphiques est pour exprimer quelque chose qu’ils ne peuvent pas exprimer avec un langage. Les artistes dessinent parce qu’ils veulent transmettre quelque chose qu’ils ne peuvent pas décrire. Les mots « nuit étoilée » ne décrivent pas « La nuit étoilée« .

Si je suis un fervent défenseur de la conception web la plus proche possible d’un navigateur, je suis tout à fait d’accord que du code n’est pas le bon outil pour de la création graphique. Nous sommes dans un état d’esprit différent lorsque nous codons et lorsque nous sommes devant une toile vide sous Photoshop.

Sa conclusion est précise et ambitieuse :

La principale chose que je veux que vous retiriez de cette conférence, c’est de l’insatisfaction.

Je veux que vous rentriez chez vous, que vous ouvriez Photoshop et que vous ressentiez que vous dessinez des poissons morts. Je veux que vous ressentiez à quel point tout ce que vous dessinez est plat, statique et sans vie. Quand vous créez des animations, je veux que vous ressentiez à quel point c’est froid et mort, comment vous ne pouvez pas jouer avec. Je veux que vous ressentiez tout ce qui nous manque, en utilisant ce média pour simuler d’autres médias. En définitive, je veux que vous ayez des standards plus élevés pour ce média.

Je ne peux qu’acquiescer.

La théorie du McDonald’s

Je viens de le poster sur Twitter, mais je le reposte ici parce que j’aime vraiment beaucoup cette Théorie du McDonald’s de Jon Bell.

J’utilise un truc avec mes collègues quand on essaye de décider où manger le midi et quand personne n’a d’idée. Je suggère d’aller au McDonald’s.

Quelque chose d’intéressant se produit alors. Tout le monde tombe d’accord sur le fait qu’on ne peut pas aller au McDonald’s, et de meilleures suggestions de déjeuners émergent. Magie !

C’est comme si nous avions brisé la glace avec la pire idée possible, et maintenant que la discussion a commencé, les gens deviennent soudainement créatifs. J’appelle ça la théorie du McDonald’s : les gens sont inspirés à trouver de bonnes idées pour écarter les mauvaises.

C’est une technique que j’utilise beaucoup au travail. Les projets démarrent de différentes façons. Parfois on vous donne un brief formel. Parfois vous entendez une rumeur de quelque chose qui pourrait arriver et vous commencez à y réfléchir à l’avance. D’autres fois vous avez muri une idée pendant des mois ou des années avant de la partager avec votre équipe. Il n’y a aucun processus défini pour du travail créatif, mais j’en viens à croire que tous les comportements créatifs partagent une chose : le deuxième pas est plus facile que le premier. Toujours.

C’est tout ce que j’aime.