Webdesign Friday (#wdfr) - La communauté des webdesigners francophones

Les vendredis Webdesign !Chaque semaine, un nouvel article par un professionnel du Web.

Un design collaboratif d’interface

Un design collaboratif d’interface

De plus en plus de designers Web prônent une pratique du design décloisonnée : à l’heure où on parle d’agile, comment concevoir une page sans être coincé par Photoshop, en tirant parti du fait que les navigateurs permettent de faire des interfaces « qui bougent » ?

C’est ce que nous avons tenté de faire lors de la conception d’un didacticiel expliquant le portail Orange.fr.

Le besoin

À l’occasion de la refonte du portail Orange.fr en juillet 2012, il nous a semblé opportun de concevoir une page didacticielle, et ce pour plusieurs raisons :

  1. La conduite du changement : souvent le changement se heurte à une certaine résistance liée à l’habitude. Il faut réduire la friction, en simplifiant la transition.
  2. L’accompagnement de l’utilisateur : tout le monde préfère s’entendre expliquer à quoi servent les choses plutôt que de devoir tâtonner (et puis tout le monde n’est pas un digital native ou ne travaille pas dans le web).
  3. Enfin, c’était l’occasion de proposer un point d’atterrissage plus intéressant/utilisable/profitable que de simples blocs de texte expliquant les fonctionnalités de cette page d’accueil : comme on dit, un bon dessin vaut mieux qu’un long discours. Nous voulions expérimenter une présentation simple et la plus intuitive possible, sans recourir à des vidéos ou aux blocs de texte habituels.

Nous avons donc décidé de travailler en parallèle :

  • Pour le design : des soumissions aux parties prenantes de maquettes basées sur Photoshop pour les couleurs, la typographie, l’équilibre des masses, le facteur de zoom le plus adapté à la prévisualisation complète du portail, etc.
  • Pour le développement : des petites itérations permettant de tester le comportement de la page et de voir si elle est en accord avec ce que nous espérons (prendre l’utilisateur par la main et rendre l’expérience la plus confortable possible).

Je vais détailler ci-dessous la partie développement en accompagnement du design. Imaginez qu’en parallèle, des maquettes Photoshop ont été réalisées, là aussi en accord avec le cahier des charges. Tâchons de détailler, au fil de l’eau, l’intégration du design graphique dans la page.

Les étapes

En parallèle des tests d’ergonomie de la page, vous verrez le design se raffiner. Lors de cette première étape rien n’était finalisé : ni les couleurs, ni les équilibres de typos, ni les contenus. Le design graphique était encore en phase de validation.

Étape 1 : comportements de base

Dans un premier temps il fallait arriver à maquetter le comportement des éléments que nous voulions montrer. Ce qui fonctionne bien dans un design statique peut ainsi être mis à l’épreuve en survolant plusieurs items et en regardant l’effet produit.

Nous avons donc tenté de faire un zoom incarné par un effet de loupe décentrée :

Un effet de loupe décentrée

Effet de loupe décentrée

Une fois mis en musique dans le navigateur, nous découvrons en montrant cette page autour de nous que ça ne fonctionne pas : la partie zoomée est trop éloignée de l’emplacement réel de l’élément mis en évidence. La maquette graphique était prometteuse, le rendu dans le navigateur ne donne pas le résultat escompté.

Nous tentons alors un zoom positionné sur l’élément lui-même :

Un effet de loupe sur place

Zoom positionné sur l’élément

C’est mieux, et ça nous permet de comprendre que le zoom ne pourra pas se faire sur tous les éléments que nous mettrons en évidence en fin de course : les plus gros blocs cacheraient toute la page — et ce n’est d’ailleurs pas forcément pertinent de les zoomer.

Nous décidons alors de ne zoomer que deux fonctionnalités : mail et espace client. C’est par ailleurs cohérent avec notre cahier des charges, qui indique que nous devons insister sur le changement important dans la zone supérieure du portail : ces deux fonctionnalités sont très utilisées, il convient de ne pas perdre l’utilisateur.

Par acquit de conscience nous tentons une mise en surbrillance sans zoom sur ces deux items, ce qui ne fonctionne pas, comme vous pouvez le constater :

Une surbrillance sans zoom

Surbrillance sans zoom

Également, l’idée de désaturer les éléments flottants autour de la capture d’écran quand un élément est sélectionné commence à se profiler : elle est reprise dans une maquette graphique du « mode survol » et soumise à validation en parallèle.

On valide ensuite que ce principe de ne pas zoomer les plus gros blocs n’est pas perturbant :

Pas de zoom sur les gros blocs mis en surbrillance

Un gros bloc n’a pas besoin d’être zoomé

Effectivement, ça fonctionne bien : comme c’est un gros bloc il n’a pas besoin d’être zoomé pour qu’on le repère facilement.

Ici, le fond devient gris, ce qui permet de mieux mettre en évidence l’image et les pavés flottants. C’est ce qu’il y a dans les maquettes Photoshop, que j’intègre au fur et à mesure, en même temps que les tests fonctionnels.

De même, sur cette itération, il n’y a pas de coins arrondis alors que la maquette graphique en comportait : on en déduit que c’est plus confortable, qu’il faut les garder, mais ce n’est pas stratégique au point de devoir intégrer des bidouilles laborieuses pour les vieux navigateurs. Ils auront des coins carrés, nous l’actons à cette étape.

Étape 2 : intégration graphique

Dans les maquettes Photoshop, les points spécifiquement graphiques ont pu être validés entre temps. On peut alors intégrer définitivement la charte retenue.

D’abord, donner des formes de boutons aux liens « voir en détail », arrondir les angles, associer les bulles aux éléments qu’elles montrent par des petites flèches discrètes, aligner les titres, affiner la typographie, etc.

Intégration de la charte

Intégration de la charte

Enfin, intégrer les textes définitifs et les éléments de navigation, communs à tout le portail :

Intégration des textes définitifs et éléments de navigation

Intégration des textes définitifs et éléments de navigation

En résumé

Je ne vous ai parlé ici que du haut de la page pour faire simple, mais dans ce processus nous avons également validé d’autres aspects qui n’étaient pas modélisables dans un design statique, comme l’ouverture douce des blocs (slideUp/slideDown en jQuery), le défilement lent (soft scroll, cf. HTML Zen Garden), etc.

Nous avons pu faire avancer le projet sur trois fronts en même temps : le design graphique via des maquettes traditionnelles sous Photoshop, le design comportemental via des prototypes intégrés dans le navigateur, et les contenus textuels.

Ne pas avoir eu une organisation traditionnelle en « waterfall » — organisation séquentielle traditionnelle où le développement vient après le design — nous a permis d’obtenir un résultat qui nous semble plus riche à moindre effort. On connaît tous ces situations où un design validé ne sera pas intégrable tel quel, ce qui peut frustrer autant le donneur d’ordre que le designer, sans compter le développeur qui fera ce qu’il peut, mais aurait aimé un meilleur karma.

En conclusion, faire des itérations plus simples en croisant les idées issues du design graphique et celles de la conception dans le navigateur par des allers-retours continus, nous a permis de prouver — s’il en était besoin — que c’est une façon très positive et productive de travailler. En tout cas, cette méthode nous semble un bon moyen de conjuguer design traditionnel et la conception dans le navigateur (voir l’article de Francis Chouquet sur le sujet).

Vous pourrez voir le résultat final sur didacticiel.orange.fr.

Qu’en pensez-vous ? Concevez-vous le design seul ou en équipe ? Quels sont selon vous les points qui pourraient bloquer cette démarche, ou au contraire y contribuer ? À quel moment basculez-vous vers le navigateur ?

A propos de l'auteur : Stéphane Deschamps

Je travaille dans le Web depuis 1999 (si, si). J'ai fait du front, du back, un peu de design (mais chut) et surtout j'aime mettre de l'huile dans les rouages en me mettant à la place des utilisateurs et en servant d'interface entre les corps de métier, en tant qu'expert technique chez Orange. J'ai aussi un site perso, comme on disait avant.

  • http://twitter.com/pjbdes Anthony JR Destenay

    Bonjour Stéphane, et merci pour votre article.

    Connaissez-vous et que pensez-vous des solutions proposées par Zurb qui permettent la mise en place de ce type de travail collaboratif ? http://an-d.me/TXQzdZ

    Bien cordialement.

  • http://www.nota-bene.org/ Stephane Deschamps

    Bonjour Anthony,

    Non, je ne connais pas ces solutions.

    Mais j’ai souvent tendance à penser que moins on met d’outils entre les gens mieux c’est (nous sommes ce que les outils font de nous, pour paraphraser McLuhan). Là nous étions dans le même open-space, ce qui a fait beaucoup pour la spontanéité de l’expérience.

  • Pingback: Des modèles pour vos articles » Webdesign Friday (#wdfr)

Live Tweet

Dans le Blog

Newsletter

Vous souhaitez être tenu au courant des dernières nouvelles concernant le WDfriday, événements, conférences, barcamps, etc… ?

N'hésitez pas à vous inscrire à notre newsletter !