Mais je suis également par ailleurs un citoyen sensible à la vie de la cité et à la chose publique. Donc lorsque j’ai vu passé un twitt de Geoffrey Dorne annonçant la mise en ligne du nouveau site du musée Georges Pompidou je me suis empressé d’aller voir cet enfant digital du chantre de la culture française.

… Maintenant j’aimerais comprendre comment ce site a coûté 12 millions d’euros, dont huit consacrés à la création du système (dixit Geoffrey) alors qu’il n’offre à peine plus de fonctionnalités qu’une plaquette de PME et l’expérience utilisateur d’un bulot mort.

Je vous laisse en juger par vous-même: www.centrepompidou.fr

Dans le milieu, on appelle ça « une Madoff ».

Disclaimer

En fait ce site n’est pas récent, il me semble qu’il est en ligne depuis presque un an il me semble. Par ailleurs il faut que je vous fasse un aveu : j’ai été contacté en 2010 par les responsables du projet au sein du Centre Pompidou trois jours avant la clôture de l’appel d’offres pour y participer. Je n’ai pas d’explication quant à cette prise de contact si spontanée et si tardive et je n’en tire aucune conclusion.

Toujours est-il que j’ai répondu sans trop y croire par une proposition commerciale aussi succincte que leur cahier des charges. Si mes souvenirs sont bons ma proposition commerciale pour la conception ergonomique de ce site très simple s’élevait à moins de 20 000 € pour une prestation d’environ 35 jours ouvrés. Apparemment j’aurai pu mettre un ou deux zéros de plus pour la même prestation.

J’ai reçu la semaine suivante un mail m’indiquant que ma proposition n’avait pas été retenue. Étonnant non ?

Certains lecteurs remettront peut-être en cause mon indépendance quant à l’évaluation de ce site, d’autres me considéreront comme aigri et jaloux. J’essaierai (ou pas) de répondre intelligemment (ou pas) à toutes ces critiques si elles se présentent.

Bla bla bla

Le site se veut être un « centre de ressources, une plateforme de diffusion de contenus, un nouvel espace de partage et de connaissance, intuitif, participatif et résolument nouveau [… bla bla...] grand bond en avant dans l’ère du numérique et des musées [...] »

C’est si bien dit… et c’est en ces termes que le président du centre a présenté le nouveau site du Centre Pompidou à la presse ce mois-ci aux côtés d’Aurélie Filippetti.

Un centre de ressources?

Ok… dont le contenu est fourni par le public ? Le choix du modèle basé sur le crowdsourcing me semble inadapté au positionnement du centre. Ainsi l’un des plus grands représentants de la culture française constitue son fond d’informations grâce aux contributions du public. J’attends avec impatience les analyses éclairées de KillBoobadu93: « Trotro bien pein!! Dlaballe ! je surkiffe !! »

Il faut que les agences arrêtent de vendre des fonctionnalités pseudo sociales à leurs clients sans considérer les conséquences que cela implique en termes de positionnement, de modèle économique, de perception de la marque, de modération de contenus, et en termes de qualité de contenu. Une stratégie marketing ça se travaille, un positionnement aussi, et idéalement il faut en mesurer la portée et les conséquences.

Et l’ergonomie ?

L’architecture de l’information

L’architecture de l’information a été bâclée. Le visiteur ressort forcement frustré de cette expérience utilisateur. Je serais curieux de voir les résultats des tests utilisateurs et la confrontation des testeurs à cette architecture bancale.

Notez la simplicité du premier niveau de la navigation principale et la complexité des niveaux inférieurs agencés comme un fatras d’informations mal catégorisé et mal hiérarchisé.

La seule chose qui sauve cette architecture c’est que le contenu est pauvre, ça limite le temps de recherche.

Le système de navigation

Si vous espérez accéder à une visite virtuelle du fond ne cliquez pas sur l’item « la visite » de la navigation principale. Ça n’est pas là que ça se passe.

Le point d’entrée principale pour accéder au fond du musée et à toutes les ressources promises c’est l’agenda. Or, cet agenda ne propose pas d’archives. Donc, toutes les expositions et les œuvres présentées antérieurement ne sont plus accessibles publiquement. On a vu mieux en termes de partage de connaissances et d’ouverture de fond.

Le deuxième point d’entrée c’est la recherche. Celle-ci comporte un système de filtres à facettes non cumulatifs et fastidieux. Même avec une idée précise de ce que vous cherchez, la page de résultats de recherche ne vous satisfera pas.

… et le meilleur : La totalité du système de navigation ainsi que la totalité du contenu éditorial informatif du site est encapsulé sur une page dans un système d’accordéon. C’est un choix ergonomique incompréhensible.

Le zoning

Le quoi ?

L’agenda

Quelle belle création conceptuelle. C’est dommage qu’ils ne comprenne pas le quart des fonctionnalités nécessaires à un petit agenda ni aux besoins du public.

Bravo aussi pour ce système de filtre qui mélange toutes les typologies de taxonomies sans cohérence, et bravo aussi pour cette navigation « jour par jour » qui ne permet d’afficher que les événements d’une journée. Quelle belle trouvaille. La plupart des plug-ins d’agenda pour Wordpress et Drupal sont beaucoup plus fonctionnels que celui-ci.

Le système de réservation

L’accès au système de réservation et à la billetterie renvoie vers une interface antique sans aucun système de filtre, et aucune approche orientée utilisateurs. C’est juste le vestige d’une solution de réservation propriétaire obsolète qui a été greffé sur le projet comme on aurait greffé une troisième patte dans le dos d’une créature monstrueuse. Il a coûté combien de millions (pas en anciens francs, en euros)?

La notion de qualité

En conception digitale, la qualité s’évalue de manière empirique, grâce à toute une batterie d’outils (tests utilisateurs, A/B testing, eye tracking, etc) qui permettent de valider des choix fonctionnels et ergonomiques d’une interface.

Je serais curieux de savoir quelles ont été les procédures d’assurance qualité mise en place sur ce projet (les référentiels Opquast ? Bastien et Scapin ?…), et éventuellement d’en lire les analyses et les conclusions.

Conclusion

La stratégie de ce site en matière de positionnement et malhabile. Certains auront même du mal à comprendre sa fonction. Par ailleurs les fonctionnalités proposées par le site sont inadaptées au contexte, mal pensé et il manque les trois quarts de ce qu’on peut attendre d’un ensemble muséale. L’ergonomie du site est désastreuse et son système de navigation impossible.

Tout cela me fait dire que le centre Pompidou est totalement passé à côté de ses enjeux digitaux, et n’a pas su exploiter le potentiel du média Internet.

En tant que citoyen conscient de l’importance de la culture, je suis déçu. En tant que contribuable j’ai les boules. En tant que professionnels du Web je suis en colère.

Bon allez, j’arrête là. Tout cela est très mauvais pour ma tension.

Related posts:

1. Secteur du Design interactif : mes prévisions pour 2011 (1)
2. Secteur du Design interactif : mes prévisions pour 2011 (2)

La deuxième édition des Rencontres Interactives de Caen aura donc lieu le vendredi 21 septembre 2012 de 17h00 à 20h00 au Forum Digital du Campus EffiScience. Évidemment cet événement est toujours gratuit et ouvert à tous ceux qui se sentent concernés par la conception web (agences, graphistes, intégrateurs, développeurs, étudiants, éditeurs de services en ligne, e-commerçants…).

Le programme de cette 2em édition

17h : Présentation et bienvenue

17h15 / 17h35 : « Gagnez en productivité avec les pré-processeurs CSS ». Atelier présenté par Pierre-Emmanuel FRINGANT

17h45 / 18h05: « Le processus de validation du Design ». Atelier présenté par Laurent DEMONTIERS

18h05 / 18h30: Pause goûter et réseautage.

18h30 / 18h50: « Optimiser les performances de son site pour un affichage confortable sur mobile ». Atelier présenté par Willy LELOUTRE

19h / 19h30: Table ronde: « Où en est le web Normand? »

- – - – - – - – - – - – - – - – - – - – - – - – - – - – - – -

Les Rencontres Interactives de Caen ont lieux chaque trimestre au Forum Digital. Nous nous réunissons dans un esprit de collaboration conviviale pour :

• promouvoir et transmettre les bonnes pratiques de conception,
• favoriser l’émergence de projets interactifs locaux (privés ou publics, commerciaux ou associatifs),
• favoriser le réseautage, les synergies et les échanges de compétences entre les participants.

Informations pratiques :

Lieux : Le Forum Digital, Bat Erable sur le Campus EffiScience – 8 rue Léopold Sedar Senghor – 14460 Colombelles – tel : 02 31 46 74 54
Plan d’accès: Lien vers Google Map
Prix : Entrée libre

Plus d’informations / Contact presse:

C/o Laurent DEMONTIERS
Consultant Web // AMAO, Ergonomie et Design d’interfaces
Portable: 06 61 32 63 35
Mail: laurent(arobase)demontiers.com

Related posts:

1. Ne manquez pas les 1eres Rencontres Interactives de Caen
2. Bilan des premières Rencontres Interactives de Caen
3. Un graphiste peut-il concevoir plusieurs propositions graphiques d’un même sujet ?

C’est aujourd’hui chose possible grâce au Forum Digital de Colombelles qui met l’une de ses salles à notre disposition.

Je vous annonce donc la première édition des « Rencontres Interactives de Caen« , un événement gratuit organisé par des professionnels du Web pour les professionnels du Web.

La première édition aura lieu le vendredi 1er Juin 2012 de 17h30 à 20h30 au Forum Digital du Campus EffiScience.

Au programme :

3 ateliers

• « Le Responsive Design, impact sur les processus de conception web ». Atelier de 20 min présenté par Laurent Demontiers.
• « Outils pour faire du Responsive Design avec Drupal ». Atelier de 20 min présenté par Nicolas Viot.
• « Bootstrap pour les nuls », une présentation du Framework CSS conçu par les développeurs de Twitter». Atelier de 20 min présenté par Clément Alexandre.

Des tables rondes

• Comment « Vendre le Responsive Design » à nos clients ?
• Saas et Less, stylus, susy… Les préprocesseurs CSS : état des lieux et usages.

Les Rencontres Interactives de Caen ont lieu chaque trimestre au Forum Digital. Nous nous réunissons dans un esprit de collaboration conviviale pour :

• promouvoir et transmettre les bonnes pratiques de conception,
• favoriser l’émergence de projets interactifs locaux (privés ou publics, commerciaux ou associatifs),
• favoriser le réseautage, les synergies et les échanges de compétences entre les participants.

Informations pratiques :

Lieu : Le Forum Digital, Bat Erable sur le Campus EffiScience – 8 rue Léopold Sedar Senghor – 14460 Colombelles – tel : 02 31 46 74 54
Plan d’accès: Lien vers Google Map
Entrée libre

Plus d’informations / Contact presse:

C/o Laurent DEMONTIERS
Consultant Web // AMAO, Ergonomie et Design d’interfaces
Tel fixe: 09 53 30 06 50

Related posts:

1. Seconde édition des Rencontres Interactives de Caen
2. Bilan des premières Rencontres Interactives de Caen

Point de départ de la conversation : Je twitte un lien vers l’article « Un prototype vaut 1000 mots » (en anglais dans le texte) de Leigh Howells consultable ici .
L’article sonne un peu comme une lapalissade et traite pêle-mêle des enjeux du prototypage et du choix parmi les outils de prototypage disponibles. Ces sujets ont déjà été traités de nombreuses fois par de nombreux personnes. Je ne m’étends pas dessus et vous laisser le lire.

Ce qui motive mon propos du jour c’est le désir de répondre à @ElieSl lorsqu’il parle de l’importance de produire des prototypes pour améliorer la qualité du Cahier des Charges.

Ça sert à quoi un cahier des charges ?

De mon point de vue, le cahier des charges est un référentiel dont l’objectif premier est de préciser le cadre et les contraintes de la mission. Il n’a pas pour objectif d’apporter des solutions de conception (c’est justement ce qu’on demande au maitre d’œuvre). Si un Maître d’ouvrage souhaitait produire le cahier des charges le plus exhaustif possible et amener des solutions de conception il devrait les présenter sous forme de recommandations ou de propositions, et pas comme des contraintes obligeantes pour les prestataires.

Un cahier des charges permet aussi et surtout d’évaluer les propositions commerciales de prestataires sur des bases communes.

Se faire assister ?

Pour rédiger le cahier des charges le plus exhaustif possible, le Maître d’ouvrage peut se faire assister. Maintenant pour ce que j’observe en conception d’applications onscreen ou de systèmes d’information : Le recours à l’Assistance à la Maîtrise d’Ouvrage (AMOA) est encore minoritaire chez les donneurs d’ordres. Les cahiers des charges sont rarement exhaustifs (peuvent-ils l’être ?) et rarement rédigés par ou conjointement avec des professionnels de la conception ergonomique IHM. Ca on peut effectivement le regretter.

S’il y a eu consultance AMOA en avant-vente, elle a généralement été faite par un consultant orienté « direction technique ».

On peut aussi se demander s’il est souhaitable pour un donneur d’ordres d’inviter son prestataire AMOA à travailler sur la maîtrise d’œuvre. J’ai tout de même dans l’idée que ça lui poserait des problèmes d’indépendance, car l’un des objectifs du cahier des charges c’est justement de permettre de comparer des devis des postulants à la maîtrise d’œuvre.

On ne peut pas être juge et partie à la fois, alors le donneur d’ordre n’a aucun intérêt à refiler une part de la MOE à son AMOA.

Alors c’est quoi un CDC pour une prestation d’ergo ou d’architecture de l’information ou de prototypage /wireframing ?

Certainement un document qui listera :

• Le contexte technique de l’application existant ou non (architecture technique, liste des bases de données ou des applis qui interagiront avec le système, etc) .
• Un inventaire des fonctionnalités.
• Un inventaire des contenus.
• La liste des applis et framework de développement s’ils sont définis.
• La stratégie éditoriale de l’application ou du système.
• Les profils des utilisateurs.
• Les attentes en matière d’usage utilisateur (accessibilité, résolutions de référence, contraintes des terminaux et navigateurs à prendre en compte, etc).
• Les statistiques de visite de l’appli actuelle si elles existent.
• Etc…

Mais mais… ça veut dire que le consultant AMOA idéal pour une prestation de conception ergo… c’est une ressources UX ?

Related posts:

1. Un graphiste peut-il concevoir plusieurs propositions graphiques d’un même sujet ?
2. Le gérant, le presta, et le pot au lait
3. Consultations non rémunérées: appliquez la méthode du roseau

LD : – « Qu’est-ce que je peux faire pour vous ? »
SSII : – « La refonte graphique de notre appli. Le client pour qui on l’a conçu veut qu’on l’améliore »
LD : – « En amont de la phase de redesign, il faut valider l’architecture de l’application, son système de navigation, les interactions entre l’interface et des utilisateurs. Il faut aussi valider et formaliser votre contenu éditorial et fonctionnel. Est-ce que toutes ces phases de conception UX et ergo ont été faites pour la future version de l’appli ?
SSII : – « Notre application n’a aucun problème d’ergo »
LD : – « Là, pour créer un nouveau planning, on ne doit pas cliquer sur l’onglet « Plannings » (ça n’est pas là que ça se passe), mais sur l’onglet « Gestion des modèles » pour choisir un modèle de planning parmi ceux prédéfinis. Une fois que le modèle est choisi il faut commencer par effacer une à une toutes les taches pré-remplies dans le planning. Ensuite il faut se rendre dans la rubrique «  Modèles d’entités » ( ?) pour créer un ensemble de taches et enregistrer. Puis il faut se rendre sur l’intranet de votre client, rubrique « RH » > « Associations » pour attribuer le planning à la ressource. Enfin il faut retourner dans l’appli, rubrique « Plannings » pour associer le modèle de taches au planning. C’est ça j’ai bien compris ? »
SSII : – « Oui ».
LD : – « Et votre client, il a compris ? »
SSII : – « Oui. On leur a vendu 5 jours de formation ».
LD : – « Et il ne vous appelle jamais ? »
SSII : – « Si régulièrement. Mais c’est parce qu’ils n’ont pas été assez attentifs pendant la formation ».
LD : – Sinon vous aviez « Planning » / « Nouveau planning ». Deux clics. Vous voulez qu’on y réfléchisse posément?

Dans un film de Disney, là normalement le prospect réalise la voie nouvelle qui lui est offerte. Lui et les animaux de la forêt entament une chanson pour marquer le début d’une nouvelle ère dans la conception de son application.

Dans la réalité, Le prospect ne donne pas suite parce qu’il avait uniquement prévu un budget de 750 € pour la refonte graphique de son appli. Et en plus ce n’est pas facile tous les jours avec ses beaux parents les Tenardiers, surtout depuis la mort de ses parents dans l’effondrement de sa maison.

Moralité : Les designers ne sont pas des magiciens et Pierre Bellemare ne gagnera jamais la finale du 100m au JO de Londres même avec un super costume. De votre coté, validez l’ergonomie de votre appli vous permettra de partir sur les bases saines d’un redesign efficace.

Cette conversation est complètement fictive, je le précise. Toute ressemblance avec une situation réelle ne serait que fortuite. Évidemment.

Related posts:

1. Prototyper une interface dès le Cahier des Charges ?
2. Un graphiste peut-il concevoir plusieurs propositions graphiques d’un même sujet ?
3. Valorisez vos processus de création !

C’est une grande fierté pour moi d’être reconnu comme un prestataire compétent par un institutionnel local. Je ne fais absolument aucune prospection dans ma région et tous mes clients se trouvent en région parisienne, alors je vis cette reconnaissance locale inattendue comme un signe très positif. Je suis aussi très enthousiaste à l’idée de participer activement à l’amélioration du paysage numérique local. Il y a beaucoup à faire… alors ok, on va le faire !

Travailler pour une municipalité ?

Travailler avec le public n’est jamais simple. Le code des marchés est assez dirigiste et les procédures (même adaptées) qu’il impose vous empêchent généralement d’utiliser vos canevas de propales habituelles. Je ne parle pas non plus des contraintes juridiques, procédurales, des pénalités de retard, et de toutes ces joyeusetés qui font qu’on gagne en général peu d’argent en travaillant pour le public. Ça tombe bien, les municipalités ont rarement suffisamment de budget pour répondre à la réalité de leurs besoins. Voyez comme la nature est bien faite !

Comment expliquer à ceux qui n’ont jamais conçu de sites publics ce que ça implique ? J’ai presque envie de dire que de concevoir des sites pour le public et pour le privé sont deux métiers différents. Du reste, la plupart des prestataires qui travaillent régulièrement pour le public sont obligés de développer une offre de services adaptée à ce secteur. Je ne m’étends pas là-dessus ça n’est pas le propos de l’article. Pour moi il y a surtout le plaisir de travailler au service du citoyen. Honnêtement, rien que ça, ça justifie les efforts et l’engagement.

Particularités des sites publics

Ne demandez jamais à un graphiste ce qu’il pense du site de votre ville, il vous dégoûtera d’y vivre. Oui, les sites des municipalités sont généralement perçus comme des bouses graphiques conçues au XIXe siècle. Soyons pragmatiques : si ce cliché est tenace, c’est qu’il traduit une réalité certaine. Ça passe toujours mieux quand c’est dit avec diplomatie non ?

Maintenant il faut aussi considérer les choses dans leur contexte : les municipalités couvrent un spectre d’actions beaucoup plus large et diversifié que les entreprises. Elles doivent aussi jongler avec des objectifs aussi nombreux qu’antagonistes. Les sites municipaux présentent aussi des contenus nombreux et de natures multiples. C’est bien simple, la schizophrénie est une qualité indispensable pour réussir sa carrière de dircom dans le public.

Autre particularité, et pas des moindres : la loi impose aux sites publics le respect de normes d’accessibilité encore trop considérées comme peu rentables par la majorité des agences. Ça n’est sûrement plus le cas aujourd’hui, mais il y a encore six ou sept ans les prestataires réellement capables de produire des sites accessibles et positionnées sur cette niche de conception se comptaient sur les doigts de la main. Même si les choses ont évolué c’est encore difficile pour les établissements publics de trouver des prestataires réellement compétents dans ce domaine. Encore aujourd’hui, tous les prestataires ne peuvent produire des sites accessibles au niveau AAA, et peu de villes peuvent s’offrir ce type de prestations.

Principales caractéristiques des sites municipaux

Les sites municipaux ont généralement énormément de contenus à présenter, et des contenus de natures variées. Tous sont confrontés à la même problématique : il faut présenter les 70 rubriques du site (je n’exagère pas) tout en limitant le nombre de niveaux dans la navigation. Ça demande un gros travail architectural, il faut hiérarchiser les contenus et équilibrés le « poids » de chaque rubrique. Il y a aussi un gros travail sémiotique et de wording à abattre pour concevoir le système de navigation le plus utilisable possible.

Soyons clairs, le véritable enjeu de conception des sites municipaux est ergonomique. C’est généralement le soin apporté à la conception de l’architecture de l’information qui fera la vraie plus-value du site, pas son design. N’en déplaise à la communauté des graphistes.

Des référentiels

Rapidement, on peut d’abord citer l’incontournable « Référentiel Général d’Accessibilité pour les Administrations » (RGAA) introduit par la loi pour l’égalité des droits et des chances de 2005. Une véritable avancée démocratique. Sa lecture est un passage obligé pour tous ceux qui veulent travailler avec le public et pour tous les responsables de sites publics.

L’état publie aussi une « charte ergonomique des sites internet publics ». Elle a pour objet de définir un ensemble de règles ergonomiques communes aux interfaces des sites Internet publics et s’inscrit dans le respect des standards du W3C et des principes des référentiels généraux d’interopérabilité (RGI), d’accessibilité (RGAA) et de sécurité (RGS).

Il existe aussi un guide d’auto-évaluation pour les responsables publics qui souhaiteraient évaluer la conformité de leur site avec la charte.

Je citerai aussi le référentiel Opquast réalisé par la société Temesis, et son outil de reporting. Ce sont des initiatives évidemment privées, mais qui restent des références en la matière.

Dans un domaine connexe, l’accessibilité, le référentiel incontournable en France reste AccessiWeb.

Notez aussi que Google annonçait sur son blog en février 2011 la prochaine mise en place d’un « site clinic » pour améliorer la visibilité des sites publics français :

Je cite : « dans le cadre de la démarche initiée par la Direction générale de la modernisation de l’Etat pour améliorer la relation numérique à l’usager, Google va réaliser un site clinic de plusieurs sites de l’administration française afin de fournir une série de conseils d’optimisation permettant d’enrichir l’information accessible aux citoyens et d’en améliorer la visibilité dans les moteurs de recherche. Cet exercice à but pédagogique donnera lieu à un ensemble de recommandations techniques et éditoriales, disponibles dans leur intégralité pour le public. (…) Depuis les conseils aux créateurs d’entreprises jusqu’aux formalités d’obtention d’un permis de conduire, l’objectif est d’aider le public à découvrir plus facilement les informations fournies par l’administration française. »

Heureusement que Google et là pour sauver l’État français (ironie inside). Je n’ai pas suivi cette histoire. Si quelqu’un a des nouvelles de ce projet je l’invite à les partager dans les commentaires de cet article.

Moins anecdotique, on peut aussi parler d’initiatives locales intéressantes comme la charte qualité et accessibilité de la région Aquitaine. Il me semble que cette charte a d’ailleurs été conçue avec l’aide de Temesis.

J’attends toujours le moment où ma région s’engagera dans des démarches de ce genre pour améliorer la qualité du parc numérique local. Puisse une oreille attentive entendre ce message.

Pour finir, il y a aussi le « Label villes-internet » dont le référentiel qualité, sans avoir trop creusé la question, me semble peut-être un peu moins crédible que ceux précédemment cités, mais il a au moins le mérite d’exister.

Liste des villes à auditer

La liste des sites de villes que je vais auditer n’est pas définitive. Je compte en choisir une petite dizaine. J’ai visité le site d’une centaine de villes françaises, et je décide de ne m’arrêter sur des  sites que j’estime d’une qualité suffisante. Il faut que ça me serve aussi dans mon travail.

Parmi les sites municipaux qui ont retenu mon attention parce que plutôt au-dessus du lot, et que j’ai donc contacté, il y a :

• http://www.paris.fr
• http://www.charleville-mezieres.fr
• http://www.blois.fr
• http://www.chartres.fr
• http://www.dijon.fr
• http://www.ville-limoges.fr
• http://www.grenoble.fr
• http://www.valence.fr
• http://www.nimes.fr
• http://www.montdemarsan.fr
• http://www.mairie-perpignan.fr
• http://ville-saint-denis.fr

Voyez, je me concentre sur les villes françaises. Saint-Denis, Grenoble et Dijon ont répondu immédiatement. Elles seront probablement les trois premières auditées.

Sinon pour ceux qui voudraient voir plus loin, aller faire un tour sur :

• Le site de la Ville de Luxembourg qui présente une navigation soignée.
• Le site de Toronto, attention c’est une opération de comm’ territoriale qui ne convient pas à tous les Cahiers des charges.
• Le site de la ville de Philadelphie réalisé par Happy Cog la boite de Jeffrey Zeldman.

Si de votre côté vous avait en tête des sites de municipalités auxquelles vous reconnaissait des qualités ergonomiques et graphique, n’hésitez pas à les lister dans les commentaires.

Related posts:

1. Présenter un visuel en cours de réalisation (1)
2. Web design : Comment présenter un visuel au client final?
3. Valorisez vos processus de création !

La première partie mes prévisions était plutôt consacrées aux évolutions du secteur et des rapports entre les professionnels et leurs commanditaires. Voyons maintenant ce que l’on peut dire de l’évolution des pratiques du métier :

Développement des services ergonomiques

Oui, je mets la conception ergonomique fonctionnelle dans le giron du Design interactif. L’ergonomie est encore souvent le parent pauvre de la conception web. Les budgets qui lui sont consacrés ne sont en général jamais à la hauteur de ce qu’ils devraient être. Ces budgets ne peuvent que progresser, c’est très encouragement pour l’avenir des productions du web français.

Si l’on ajoute à cela :

• la consécration de la conception from scrach basée sur les frameworks MVC favorisant l’intervention de concepteurs en ergonomie fonctionnelle.
• le recul des solutions CMS qui induisent parfois des architectures et une ergonomie fonctionnelle
• l’attrait grandissant des designers pour l’ergonomie (pour ce que j’entends ils s’y forment de plus en plus)
• l’intégration de modules d’ergonomie dans les formations supérieures.
• la prise de conscience des annonceurs sur la plus-value de l’ergonomie sur leurs taux de transfert ou de conversion.

… 2011 devrait être une bonne année pour l’ergonomie fonctionnelle des interfaces.

Les designers se dédient à la création pour un terminal

Il y a 6 ans les webdesigners se mettaient au Design d’applications Iphone, puis Android, puis Ipad…

La nature et le nombre des terminaux disponibles explosent aujourd’hui et chaque terminal impose son contexte technique, ses méthodes de conception, et ses particularités ergonomiques. Ces considérations, les designers ne peuvent les ignorer parce qu’elles conditionnent le cadre de leur travail. Plus il y aura de terminaux, plus il y aura de compétences à acquérir. Plus il y aura de compétences à acquérir, plus il faudra se spécialiser.

Je prédis donc que de plus en plus les graphistes se spécialiseront dans le design dédié à un terminal en particulier.

Bon d’accord, je ne me mouille pas beaucoup puisse que c’est une tendance lourde dans les pays Anglo-Saxons et en Scandinavie depuis 6 mois. On trouve de plus en plus de Designers freelances spécialisés dans le design pour Iphone, Android, Ipad, Blackberry, etc…  Ca devrait arriver chez nous rapidement.

Vers une meilleure reconnaissance du Droit des auteurs

Ca fait maintenant 5 ou 6 ans qu’avec quelques autres je rabâche mon couplet sur la défense la reconnaissance du Droit des auteurs d’œuvres graphiques, en particulier via les forums. Je ne sais pas si notre prêche y est pour quelque chose mais je trouve que l’existence du Droit d’auteur est aujourd’hui bien assimilée par les graphistes. Beaucoup d’entre eux « tentent » maintenant de revendiquer leurs droits ou juste de faire respecter la loi. Ils la connaissent donc, c’est une belle avancée.

Par contre on part de très loin. Dans le secteur du Design interactif les droits des auteurs sont majoritairement niés depuis toujours et la situation n’est pas encore acceptée par la plupart des commanditaires. Le reflexe de certains devant les revendications des graphistes a été de leur imposer leurs propres contrats de cession avec des clauses abusives (donc assurément nulles en cas de jugement). Ces commanditaires ne sont pas plus protégés avec des clauses abusives que sans clause, mais la cupidité est pour l’instant toujours plus forte que le respect de la loi et des sous-traitants. Tout cela devrait évoluer vers quelque chose de plus sain.

Quelque chose me dit qu’en 2011, les graphistes et les commanditaires devraient adopter des méthodes de négociation plus rationnelles pour intégrer l’existence des dispositions légales liées à la propriété intellectuelle. Les graphistes revendiquent les rémunérations qui leur sont dues, les agences ont pour la plupart le souci de travailler dans la légalité et de se garantir la jouissance paisible de l’exploitation des œuvres. Il n’y a donc plus aucune raison pour que le sujet du Droit d’auteur ne soit dorénavant pas abordé dans la sérénité.

La reconnaissance du Droit d’auteur reste taboue et c’est à mon avis le plus gros chantier des années à venir dans le secteur du Design interactif. Rien ne se solutionnera en 2011 mais les choses devraient progresser vers un mieux.

Voilà, je pense que ça va être tout pour cette année. J’arrête là mes prédictions. Et vous, vous en pensez quoi ? Quelles sont vos prévisions pour 2011 ?

Related posts:

1. Secteur du Design interactif : mes prévisions pour 2011 (1)
2. Web design : Comment présenter un visuel au client final?
3. Quelle rémunération pour les web designers?

Naviguer dans une base de données

Oui je parle bien de systèmes de navigation. Les concepteurs disposent de 4 grandes typologies de systèmes.

1. Les systèmes de recherche
2. La catégorisation
3. Le tri ou le filtrage.
4. Les systèmes hybrides ou imbriqués

Avec l’avènement depuis 7 ou 8 ans d’Ajax et de JavaScript la conception de formulaires complexes, synchrones ou asynchrones, a été grandement facilitée. Il n’est pas rare que les systèmes de navigation dans les bases de données proposent plusieurs procédures d’actions séquentielles, d’autres transverses, et parfois des systèmes hybrides.

Les Systèmes de recherche simples et avancées

La procédure de recherche est séquentielle : L’utilisateur sait (souvent partiellement) ce qu’il cherche, il remplit un champ libre (text input), éventuellement émet des choix par catégorisation pour préciser dans quel segment de la base la recherche doit s’effectuer. La validation de sa recherche affiche un gabarit ou une zone de résultat. La précision du résultat dépend de la précision de la requête, et de la taille de la base bien sûr.

Dans ce genre de système il est difficile pour l’utilisateur d’estimer le nombre d’occurrences qui s’afficheront dans la zone de résultats. Contrairement aux autres systèmes de navigation, ici l’utilisateur engage son action sans pouvoir visualiser les données de la base.

Sur le plan cognitif, la recherche est souvent perçue comme une navigation aveugle dont la réussite dépend de l’efficacité du système. Ici l’utilisateur se repose sur la performance du système pour l’éclairer dans sa recherche. Il y a là un rapport de confiance qu’il ne faut pas trahir.

Les systèmes de catégorisation

Très utilisé en E-commerce, la recherche d’un objet passe par la navigation dans des univers, des catégories et des sous catégories. Ici les choix sémiotiques sont primordiaux. L’utilisateur doit connaître l’univers des données présentées pour savoir comment naviguer. Ca peut être un inconvénient sémantique, mais ce genre de système permet aussi de développer des univers visuels distincts les uns des autres.

L’approche est très différente sur le plan cognitif : On remplace l’efficacité du système navigationnel de recherche ou de tri par une immersion dans un univers. Ce sont les émotions qui gèrent la navigation. Plus l’univers est immersif, plus l’utilisateur acceptera de passer du temps à le parcourir. Comme toutes les approches émotionnelles, le confort et le plaisir de la recherche sont ici privilégiés sur l’optimisation du délai impartit à la recherche.

Les systèmes de tri ou de filtrage

On revient dans le rationnel. Ces systèmes permettent d’affiner une recherche ou la navigation dans une base grâce généralement à des éléments de formulaires. Ainsi, on peut choisir d’associer une recherche à des critères de prix, couleurs, tailles, temps, marques, notation…etc. Parfois cette phase de tri/affinage peut aussi se faire sur les résultats de la recherche.

Recommandations de conception

Finalement, je crois que ce qui fait la qualité d’un système de recherche ou de navigation dans une base, c’est

1. La simplicité du système : Il doit traiter un maximum de besoins utilisateurs en un minimum d’actions.
2. La pertinence du système de navigation au regard de la nature des données.
3. L’adaptabilité du système à ses utilisateurs : Il doit proposer différents moyens navigationnels pour arriver à ses fins. Ce point me semble important dans la mesure où le système doit se mettre à la disposition du mode de fonctionnement de chacun, et pas l’inverse.
4. La correspondance des cognitions induites par le système de navigation avec la stratégie de communication du site et le profil-type de l’utilisateur : Dans une stratégie de communication qui privilégie l’émotionnel, les cognitions engendrées par l’utilisation du système de navigation doivent respecter ce positionnement et on privilégiera un système de navigation immersif ou ludique par exemple. Inversement, dans un cadre rationnel, le système privilégiera la logique, la rapidité de la recherche, ainsi que la pertinence et l’affinage des résultats.

Notez aussi que la réussite d’une recherche est aussi assurée par la précision de la requête utilisateur d’une part, mais aussi par son niveau de connaissance de l’univers de la recherche.

Ici plus qu’ailleurs c’est le profil de l’utilisateur qui va guider la conception. Lorsqu’on travaille sur un système de recherche/navigation dans une base de données, le meilleur moyen d’être efficace, c’est de pratiquer la conception centrée utilisateur.

Études de cas

Amazon.fr

Recherche avancée sur Amazon

Il y a une dizaine d’année, je râlais contre les ténors du e-commerce dont je trouvais les sites graphiquement pauvres, Amazon et Ebay en tête. Il m’a fallut du temps et de la pratique pour me rendre compte qu’au delà de l’esthétique visuelle, ces interfaces étaient des exemples d’efficacité à suivre. Ces sites ont des stocks énormes et c’est un vrai enseignement que d’observer les outils mis en place pour y naviguer. J’irai même jusqu’à dire que les systèmes de navigation imaginés pour parcourir ce genre de bases de données sont pour leurs éditeurs un enjeu stratégique et de réussite crucial.

Amazon par exemple complémente sa navigation principale par un formulaire de recherche simple (1), et secondairement d’un moteur de recherche avancée (présenté ici). L’utilisateur dispose de trois systèmes de navigation pour trouver son bonheur. Ce triptyque est un schéma très traditionnel.

Sur ce gabarit, la recherche avancée se déroule en deux temps : Il faut d’abord choisir un univers dans la colonne de gauche (2 : sélection catégorielle), puis choisir d’affiner sa recherche en sélectionnant des critères transverses (3) avant de lancer la recherche.

Amazon privilégie d’abord la navigation dans son stock par le rubriquage, ce qu’ils appellent « les boutiques ». Comme ils présentent un stock énorme et des catégories de produits très variées, il leur est difficile de présenter l’intégralité de leurs produits sans les segmenter par un système de catégorisation ou d’univers (souvenez-vous, mon point 2) ci dessus : « ce qui fait la qualité d’un système de recherche ou de navigation dans une base, c’est 2) la pertinence du système de navigation au regard de la nature des données. »). L’objectif est d’inviter l’utilisateur à parcourir le stock avant de faire, peut être une recherche simple, puis une recherche avancée.

Blue Nile

Recherche par filtrage dans la base blue Nile

J’adore cette interface, c’est un vrai bijou (ok, je sors). Blue Nile est un courtier en diamants, l’interface présentée ici permet de choisir son bonheur dans le stock du diamantaire.

En dehors des rubriques informatives du site, toute son architecture tourne autour de cette page de recherche. C’est le cœur du site. Ici, la recherche de diamants se fait par filtrage et tout se passe sur cette seule et même page. Ici la liste complète des diamants est visible. Pour affiner sa recherche l’utilisateur commence par filtrer le stock en fonction de critères aussi variés que précis. Notez au passage l’utilisation de sliders que je trouve très efficaces dans ce contexte (zone 1).

Ici tout est lisible, logique, fonctionnel, affordant. Il y a beaucoup d’éléments de filtrage, mais leur agencement logiquement conçu dans le sens de lecture les rend utilisables sans efforts de compréhension. J’aime beaucoup le zoning du gabarit qui divise la page en deux : Le cœur de page ou l’utilisateur agit pour affiner ses choix, et la partie droite (ici la zone 6) qui affiche le détail de sa recherche. On retrouve ici les conventions ergonomiques des configurateurs que j’affectionne tant.

Notez la zone de critères de filtrage avancée (2), non visible en ouverture de la page. On y trouve les critères de filtrages secondaires, c’est à dire ceux qui ne sont généralement pas prioritaires dans les choix des utilisateurs. Il est donc logique de les faire passer au second plan. Notez aussi la possibilité de trier le stock par priorité (3), c’est une fonctionnalité classique mais extrêmement pratique. Dans ce contexte là, elle se justifie totalement.  Je relève aussi le systeme de comparaison (4) présent dans beaucoup de boutiques en ligne. Cette boutique ne segmente pas son stock en univers, s’en est presque déroutant pour du commerce en ligne. Ici le processus d’achat se fait via le filtrage de la liste, on ne se perd pas dans la découverte d’univers ou de catégorie de produits. De toutes façons il y a un seul type de produit, un stock énorme, et la recherche est un système bien moins adapté que le filtrage pour trouver son bonheur dans ce type de stock. Ici, vu l’ampleur du stock et la similarité des produits, l’acheteur doit s’attacher à des critères rationnels de filtrage ou de tri. Vous aurez d’ailleurs remarqué que le système de recherche simple (5) est ici relégué en bas de page. Son (in)utilité toute relative a été clairement conscientisée.

Au premier abords on pourrait se dire que le choix de hyper-rationalité est surprenant pour une boutique en ligne, d’autant plus que dans le secteur du diamant, on aurait pu imaginer un design proche des codes du luxe (prédominance de larges visuels, et mise en valeur de la marque et ses valeurs plutôt que du produit). Non, ici, c’est la nature du stock qui à dicté les choix de conception, et au final le site est totalement construit autour des besoins de ses utilisateurs.

Retournons à nos moutons

Voilà, vous vous en doutez surement je ne me penche pas sur ce sujet par hasard. Je travaille cette semaine sur une interface qui présente plusieurs bases de données (ce ne sont pas des catalogues produits ni une boutique en ligne), et je vais pouvoir retourner à ma mission en cours avec un peu plus de certitudes sur mes choix navigationnels. Si vous avez des remarques à formuler sur le sujet n’hésitez pas.

Related posts:

1. La « vision » dans le processus de conception

Imaginons que chaque ville (ou pays) soit responsable de son système de signalisation routière. Que chaque panneau soit défini selon les décisions et la logique inhérente aux différents services d’urbanisme. Prendre sa voiture et visiter une nouvelle ville serait alors une excursion plutôt risquée, et peu de personnes à se déplacerait de manière spontanée.

Afin d’éviter des situations de ce type, les panneaux de signalisation ont été codifiés et sont (dans la très grande majorité) identiques dans tous les pays. C’est ainsi que les interdictions sont en rouge et d’aspects ronds, que le triangle inversé du céder le passage est unique dans sa forme afin qu’il soit reconnaissable de dos, et ainsi de suite.

Sur le web, la situation n’est pas très différente, sauf que c’est le bon sens et la logique qui ont fini par codifier les différents éléments composant les pages web ainsi que les fonctions proposées dans les boutiques en ligne.

Au début du Web commercial, il y a eu beaucoup d’expérimentations en partant du principe qu’il fallait se démarquer et offrir une expérience unique aux visiteurs. Depuis, on s’est finalement rendu compte que les sites les plus efficaces sont souvent ceux qui sont privilégient la simplicité de navigation et qui soigne les détails ergonomiques.

Gardez bien à l’esprit que pour vos visiteurs, la vraie plus-value de votre site, c’est son contenu. Il faut donc privilégier l’accès à ce contenu, et la recherche d’un contenu précis. La construction d’un système de navigation simple, conventionnel, en un mot, « ergonomique », y contribuera. Une bonne ergonomie repose sur deux facteurs essentiels : Le respect des conventions, et la cohérence ergonomique des différents gabarits d’un site.

On peut dresser une liste non exhaustive de ces conventions :

• Le respect des conventions en matière de zoning
• Sans la rendre visuellement prépondérante dans l’interface, il faut que la première zone lue par les navigateurs relate les indications liées à l’accessibilité du site. Les mal ou non-voyants pourront alors consulter le site dès leur arrivée.
• Présenter une zone d’identification du site en début de lecture.
• Garder la navigation complète et visible sur toutes les pages
• Le choix de la langue en haut à droite
• Une fonction de recherche positionnée vers le haut de la page

Le respect des conventions ergonomiques

• Utiliser les termes habituels dans les boutons d’action
• Placer un pied de page qui reprend les utilitaires (impression, plan du site, etc.)
• Présenter différemment les boutons des liens internes ou externes
• Indiquer une différence entre les images qui sont cliquables ou pas
• Utiliser les mêmes icônes dans toutes les pages
• Placer les liens contextuels aux mêmes endroits sur tous les pages
• Etc.

Casser les conventions va interrompre le processus qui vient de s’initier. Comme la majorité des consommateurs ne persistent pas très longtemps avant d’abandonner, la question à se poser lors de l’évaluation d’un projet Internet consiste à définir la valeur qu’on accorde à l’innovation face au respect des conventions. L’image que l’on souhaite transmettre rentre naturellement aussi dans ces considérations, mais mettre les visiteurs à l’aise dès le premier click aide tout autant à promouvoir la marque qu’un graphisme bien réalisé.

Des fonctionnalités qui simplifient un processus de commande en ligne sont toujours les bienvenues, mais remplacer l’image du caddie par le symbole d’un sachet en plastique n’a certainement aucun intérêt…

Un frein à la créativité ?

Cela ne veut pas dire que tous les sites doivent tous proposer la même interface. Si on part du principe qu’un panneau de stop est toujours rouge, la créativité permet de définir un style et un traitement qui lui est propre, tant que le symbole reste identifiable du premier coup d’oeil. La vraie créativité consiste à réaliser une unité graphique cohérente et agréable autour des éléments auxquels les visiteurs sont habitués.

Conclusion

Un consommateur qui ne peut pas se repérer correctement risque de ne pas seulement quitter le site avec une connotation négative des pages web, mais aussi de l’entreprise qui est derrière. L’expérience utilisateur est donc un facteur essentiel dans le succès d’une présence web. Donc, avant de vouloir remettre en question les standards habituels, il est important de bien connaître leur utilité et savoir comment les consommateurs les utilisent. Il est plus facile d’innover sur le Web en sachant pourquoi on se permet de modifier certains acquis.

No related posts.