june 2014

Le design derrière gov.uk ou le design au-delà du visuel

C’est un exemple à suivre, et il fait parler de lui depuis plus d’un an maintenant. En 2013, le site institutionnel britannique Gov.uk remportait le prestigieux Design Museum Design award, un prix décerné depuis 2003 par cette institution londonienne consacrée au design contemporain. Ce “mini-événement” a pu être reçu avec surprise et quelque amusement dans la mesure où le site récompensé n’est pas particulièrement beau ou esthétique. Comme le rappelle le blogger Tin Kadoic dans un article sur le sujet, certains l’appellent même boring.com. Chacun pourra donc se faire un avis sur la question.

Gov.uk La page d’accueil de gov.uk : une police, 3 couleurs et des liens

Utilisateur, contexte, contenu

Simplicité, sobriété, efficacité : c’est le leitmotiv flagrant de ce site dont l’ambition aurait pu vite tourner en labyrinthe digital. L’idée était en effet de simplifier la prise de contact et les démarches avec le gouvernement, c’est-à-dire avec pas moins de 24 ministères et des centaines d’agences gouvernementales, en les regroupant autour d’une unique voie d’accès : gov.uk.

Une efficacité et une économie que l’on retrouve dans les 10 principes au fondement de ce design :

1 - ”Start with needs” : un design uniquement fondé sur les besoins - identifiés - des utilisateurs ;

2 - ”Do less” : un service qui se concentre essentiellement sur l‘“irreducible core”, c’est-à-dire les ressources appropriées à une place appropriée, et jamais ailleurs, quitte à renvoyer sur des sites externes plus pertinents pour l’accès à ces ressources ;

3- ”Design with data” : un design ancré dans la réalité et basé sur les statistiques concrètes et les données de comportements des utilisateurs des anciens sites réunis par le projet ;

4 - ”Do the hard work to make it simple” : l’utilisateur doit en faire le moins possible afin de faciliter sa tâche ;

Gov.uk Les pages “smart answers” présentent des informations complexes de manière simple et rapide. L’utilisateur n’a pas à chercher dans les réponses s’il fait partie d’une exception ou non. Une série de petites questions le guide directement à la réponse qui lui correspond, sans que celui-ci ne soit bombardé de réponses qui ne le concernent pas. Le tri de l’information (le “hard work”) est donc fait pour lui.

5 - ”Iterate. Then iterate again” : le design commence avec le minimum fonctionnel, puis est constamment testé afin d’être co-conçu avec les utilisateurs effectifs ;

6 - ”Build for inclusion” : le design donne plus d’importance à l’accessibilité et à l’évidence qu’à l’élégance ;

7 - ”Understand context” : le design n’est pas destiné à un écran, il est destiné à des utilisateurs dans des contextes technologiques, cognitifs, sociaux et économiques variés, tous pris en compte ;

8 - ”Build digital services, not websites” : le design concerne l’intégralité d’un processus dont le site web n’est qu’une étape ;

9 - ”Be consistent, not uniform” : face à de nombreux scénarios et d’innombrables contextes aussi imprévisibles que variés, le design n’apporte pas de réponses uniformes, il apporte des réponses cohérentes ;

10 - ”Make things open: it makes things better” : le design est partagé et ouvert aux améliorations et suggestions extérieures.

sobriété et simplicité Les 10 principes mis en oeuvre : un exemple de sobriété, de simplicité et d’efficacité

Avec ces principes, Ben Terett, le responsable du design, et son équipe font de leur projet un exemple à suivre pour toutes les démarches centrées utilisateur et centrées sur l’expérience utilisateur. Ici, les piliers de l’UX design sont martelés : il s’agit avant tout de concevoir un service d’accès à des contenus précis, pour des utilisateurs précis et dans des contextes particuliers. Surtout, ces trois piliers priment sur l’élégance et l’esthétisme du service, comme le précisent les ”design principles” :

Remember we are designing information, not pushing pixels around a screen.

What’s so special ?

Pas de strass ni de paillettes : le site répond de manière pertinente aux utilisateurs et aux contextes d’usage en apportant des accès simples aux contenus attendus. Résultat : le projet doit son succès à l’expérience utilisateur quasi-parfaite qu’il propose. Une expérience tellement parfaite que l’utilisateur en oublie qu’il est sur un site institutionnel confronté à une somme d’informations habituellement lourde et complexe à gérer. Mieux, la simplicité d’utilisation du site fait que l’utilisateur lambda trouve ce site presque banal, normal. Comme le remarque le blogger Michael Reed, c’est le manque de spectaculaire qui fait toute la réussite du projet :

A lot of people see and go : ‘What’s so special ?’ But the reason they say ‘what’s so special ?’ is what makes it brilliant“.

Avec ce genre de projet, le design reprend toutes ses lettres de noblesse : habituellement réduit à sa seule dimension visuelle et esthétique, il rappelle içi qu’il est surtout une démarche de compréhension, d’empathie et d’analyse, qu’il ne s’agit pas de designer l’élégance, mais avant tout l’information, et que designer, c’est avant tout prendre en compte l’utilisateur, le contenu et les contextes d’usage.

Le design est un iceberg Le design est un iceberg dont le visuel n’est que la surface (image de JChevry)

Le véritable design est ainsi plus complexe qu’il n’y paraît. Une des métaphores les plus utilisées pour saisir cette complexité est celle de l’iceberg. La partie visible de l’iceberg est effectivement le design visuel, le design tel qu’on le perçoit : c’est le design le plus palpable, le plus concret. Mais il n’en est qu’une partie, et sans doute — gov.uk en est d’ailleurs un excellent exemple — la moins importante : derrière le visuel se cache un processus d’analyse bien plus long à partir duquel est conçue l’expérience utilisateur.

Le designer Jesse James Garrett propose ainsi d’en penser l’architecture en cinq plans superposés, du plus concret au plus abstrait :

  • la surface est donc l’interface visuelle ;
  • l’ossature (“skeleton”) organise l’emplacement optimisé de la navigation, des boutons et des contenus ;
  • la structure définit les chemins, les interactions possibles et les différentes catégories du site web ;
  • l’envergure (“scope”) précise les fonctionnalités du site ;
  • la stratégie est le plan de rencontre entre les attentes des utilisateurs et les objectifs du site.

La conceptualisation peut paraître abstraite, voire simpliste, mais à y voir de plus près chaque plan propose son lot de difficultés, de questionnements et de décisions. Besoins utilisateurs identifiés, architecture de l’information pertinente, fonctionnalités intelligentes, catégorisation judicieuse, nommage approprié, zoning réfléchi : dans le cas de gov.uk, chaque plan trouve une réponse dans les principes de design énoncés par Ben Terett et son équipe — y compris “la surface”.

Ainsi, si le design virtuel n’a pas pour autant été entièrement mis de côté, il est à noté qu’il sert avant tout l’accessibilité plutôt que l’élégance, ce qui fait d’ailleurs toute l’identité du site que l’utilisateur perçoit plus fonctionnel qu’esthétique. Les couleurs utilisées sont très contrastées (blanc, noir, bleu) afin de mieux distinguer les éléments qu’elles “habillent”, de nombreux espaces blancs améliorent la clarté de l’interface, tandis que la police elle-même, une version revisitée d’une police classique designée par Jock Kinneir et Margaret Calvert dans les années 60, testée dans des conditions extrêmes “in the rain, at night, at speed” et améliorée pour les besoins de la lecture sur écran, a fait l’objet d’un soin particulier.

C’est sans doute pour cette attention portée à chaque détail de chacun des plans de l’architecture du site, au-delà de la seule attention portée à l’esthétisme, que l’équipe de gov.uk a été récompensé par le Design Museum : parce qu’elle a su surtout se focaliser sur l’utilisateur et l’usage, parce qu’ils ont su aller au-delà du design visuel. Parce que l’essentiel du design se trouve au-delà du design visuel, dans l’expérience utilisateur.