IHM : les 7 clefs de la conception des maquettes d’écran

Alors oui je sais vous allez me dire tout de suite : “Les IHM ne sont pas à mettre dans le cahier des charges”. Alors je vais vite vous répondre 😀

  1. oui tout à fait c’est à éviter car c’est l’un des niveaux le plus fin du besoin et il serait sans doute mieux en spécifications fonctionnelles.
  2. maintenant qu’on est d’accord, sans doute pouvons nous évoquer le cas de demandes d’évolution, où il se pourrait fortement que vous n’ayez qu’un seul livrable à envoyer à votre fournisseur / Moe / développeur. Et devinez quoi ? il y aura de grande chance qu’il contienne une maquette ;-).

IHM : Par quoi commencer ?

hé bien il y a plusieurs cas, forcément, mais sur un nouvelle application, une refonte ou un processus nouveau voilà ce qui fonctionne :

  1. regardons les concepts métier. Nous allons pouvoir en déduire la liste des attributs et donc des champs à afficher
  2. regardons la cartographie fonctionnelle. Cela nous donne un moyen de regrouper les fonctions et d’y voir des regroupements possibles par écran
  3. comptons le nombre d’écrans nécessaires par bloc fonctionnel
  4. classons les écrans par difficulté : informatif, simple, moyen, complexe pour organiser notre travail et faire un reporting régulier
  5. passons à l’action 😀

Pour des évolutions sur les écrans, c’est un peu plus simple car les écrans existent. Vous allez devoir focaliser votre attention sur les utilisateurs et leurs enjeux puis recouper avec le modèle métier de l’application pour bien intégrer tous les attributs nécessaires.

Je vais donc plus m’attarder sur la première situation.

Quelles sont 7 clefs de la conception IHM ?

1) Estimez le volume et la charge des IHM

On ne peut prétendre faire quoi que ce soit dans notre métier sans estimer la charge d’une demande. Je le répète, même si c’est difficile, il faut absolument avoir une idée globale, que l’on affinera avec le temps.

En partant sur des choses simples vous arriverez à des résultats déjà très satisfaisants et vous saurez garantir un bon suivi de votre charge, ainsi qu’une bonne capacité à ne pas partir trop tard le soir…Donc comme évoqué au début de l’article :

  1. comptez le nombre d’écrans nécessaires par bloc fonctionnel
  2. classez les écrans par difficulté : informatif, simple, moyen, complexe
  3. Estimez le temps nécessaire par type d’écran et mettez tout cela sous excel

Exemple : un écran moyen me prends 0,5j, un écran complexe 5 jours etc…

Vous pouvez maintenant partir sur cette base de chiffrage que vous aurez pris soin de faire relire par un collègue, un chef ou un coach externe si vous avez de la chance.

 

2) Concevez sans la partie design

ex IHM sans design
IHM sans design

Bon, alors là on y est.  Et le véritable piège c’est que la conception n’est pas du design au sens français du mot, c’est à dire agréable pour les yeux. Si vous faîtes quelques chose qui est plus joli que fonctionnel vous êtes perdu. Attention, je n’ai pas dit de ne pas faire propre! Alignez vos éléments, mettez des références uniques à vos maquettes, définissez clairement la cinématiques et vos IHM seront pro. Delà, la validation :

  • se fera uniquement sur le fonctionnel;
  • ne sera pas polluée par des discussion interminables sur la couleur, la courbure, ou la police à employer.

3) Utilisez les contrôles à propos

Par pitié, il ne faut pas confondre les cases à cocher et les boutons radios !! C’est la plaie des applications web, mobiles et autre…

  • cases à cocher = choix cumulatif : je peux en prendre plusieurs à la fois

  • bouton radio = choix exclusif non cumulatif :  un seul possible par bloc/regroupement

Ce qui au final est équivalent à une “Liste de choix”. Faites attention tout de même  à la longueur pour les listes interminables !

4) Décrivez formellement

Utilisez des exigences ou des users stories qui seront validées  par les métiers. Cela vous donne des indicateurs de production et d’avancement.

Décrivez les de manière formelle !

Passez par des puces numérotées qui sont positionnées sur les zones à décrire et auxquelles les exigences ou user stories font références entre parenthèses.

Exemple  :

ex IHM
IHM avec puces numérotées et pointées

Exemple d’exigence avec les puces entre parenthèses :

Exg1.1/Toutes les cases suivantes doivent être cochées pour pouvoir souscrire à un contrat :
     * « Je certifie souscrire en qualité de personne physique » (1.6),
     * « J’atteste sur l’honneur ne pas faire l’objet d’une mesure de tutelle ou de curatelle » (1.15), 
     * « J’atteste être résident fiscal français » (4.1)
      [03029]

Attention à ne pas mettre des puces plein la maquette ! Une puce ne doit être présente que si vous avez quelques chose à dire en plus de ce qui est visible sur la maquette.

5) Pensez à la cinématique

Hé oui l’IHM ne se résume pas à des écrans isolés. Il faut bien mentionner d’où va venir l’utilisateur et comment s’enchainent les écrans. D’où l’utilité de les avoir numérotés de avec une référence unique! Vous allez pouvoir sortir une sorte d’organigramme afin de partager avec toutes les parties prenantes les enchainements. Une bonne pratique pour la lisibilité étant de marquer sur la flèche de transition la condition majeure pour basculer d’un écran à l’autre.

6) Reportez régulièrement (hebdo minimum)

Bon, vos maquettes avancent, mais vous n’avez pas tout fait ?

La seule vraies réponse à apporter à votre commanditaire c’est “combien” !

Dans combien de temps vous finissez, combien il vous reste de maquettes, combien cela vous a couté en jours x homme.. à l’occasion je pourrais vous donner des indicateurs de production.

Si vous avez suivi la première clef de cet article,  avec le tableau excel, vous pouvez encore plus investir dessus.Consignez chaque jour combien de temps vous passez par écran – en vrai – et ce par type d’écran, et ré-évaluer l’ensemble chaque semaine.

Ainsi vous allez trouvez une cadence étalonnage suivant la complexité d’écran de plus en plus réaliste.

Le résultat de votre ré-estimation fait partie intégrante de votre pilotage à reporter à votre supérieur.

 

7) Validez… pour de vrai !

Chaque maquette et chaque exigence ou user story liée doit être validée. Il faut également considérer qu’une maquette est une exigence et qu’à ce titre non seulement:

  • tout ce que vous mettez dessus devra être développé (indépendamment du design)
  • vous devrez la vérifier point par point en recette.

Alors vous me direz, “De toute façon j’envoie un mail et si j’ai pas de réponse sous 10 jours, je les préviens que c’est validé”. ..  C’est exactement ce que vous devriez faire…pour planter le projet ! 😀

La validation IHM doit absolument se faire au fur et à mesure que vous produisez les maquettes, avec les métiers bien présents pour sentir leurs éventuels réticences, et ce jusqu’au 100% de validation.

Partager l'article:
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *