UX Design

Comment faire un design rapide et efficace quand on est développeur?

Je me souviens de mes premières interfaces utilisateurs, une véritable catastrophe! Si vous êtes comme moi, développeur et que vos interfaces sont aussi catastrophiques ergonomiquement qu’esthétiquement, vous lisez le bon article.

Nous allons voir ensemble comment faire un design rapide et efficace quand on est développeur sans y passer 15 ans (parce qu’on veut coder :D).

Qu’est qu’une bonne interface?

Commençons ensemble par le plus simple. Qu’est ce qu’une bonne interface? 

Selon Magnus Revang, une bonne interface peut se résumer en six critères : 

  • La trouvabilité : Est-ce que l’utilisateur parvient-il rapidement à trouver le contenu qu’il cherche?
  • L’accessibilité: Est-ce que tous les types d’utilisateurs peuvent accéder facilement au contenu?
  • L’attirance: L’information est-elle présentée de façon à attirer l’utilisateur vers le système?
  • La crédibilité: l’utilisateur peut-il avoir une confiance aveugle au contenu qui lui est proposé?
  • L’utilité: le système a-t-il pu répondre aux besoins de l’utilisateur?

C’est bien beau cette définition mais j’ai envie d’avoir un plan efficace pour rentrer dans ces critères

Ça tombe bien c’est l’objet du prochain chapitre.

Les cinq étapes 

Prenons l’exemple d’un utilisateur achetant un produit sur internet. L’expérience utilisateur devrait ressembler à quelque chose comme cela : 

  1. L’utilisateur se rend sur le site
  2. Il recherche l’article qu’il veut en naviguant sur le site
  3. Il rentre ses coordonnées bancaires et son adresse
  4. Le site confirme l’achat et expédie l’article.

Tout au long de l’expérience, l’utilisateur va devoir prendre des décisions sur plusieurs critères. Est-ce que l’apparence du site est agréable? Est-ce que je trouve mon article facilement? Qu’est ce que ce site me permet de faire d’autre? Pour ne pas passer à côté de cela, il est nécessaire de bien structurer son expérience utilisateur. Tout cela en 5 étapes : 

La stratégie 

La stratégie incorpore ce que les utilisateurs attendent du site ou de l’application web mais également ce que les concepteurs du site veulent faire ressortir. Si l’on prend l’exemple d’un site e-commerce, les utilisateurs veulent acheter des produits et les concepteurs veulent vendre leurs produits.

Le périmètre

Définir le périmètre permet de se centrer sur les fonctionnalités essentielles du site ou de l’application web. Si on garde notre exemple du site e-commerce, l’une des fonctionnalités peut être de sauvegarder un panier d’article ou encore de permettre à l’utilisateur d’acheter les articles de son panier.

La structure

La structure permet de définir quelles sont les informations nécessaires dans le site ou l’application et comment ces informations sont organisées. Il s’agit en quelque sorte de nos metadatas 

L’ossature

L’ossature permet de définir le placement des éléments graphiques pour avoir la meilleure efficacité possible.

La surface

La surface permet tout simplement de gérer l’aspect esthétique du site web et de l’application, de choisir les images, de choisir le bon design, …

Comment ces couches s’organisent?

Ces cinq couches (stratégique, périmètre, structure, ossature et surface) créent un cadre conceptuel idéal pour parler des problèmes liés à l’expérience utilisateur. 

En allant de couche en couche, nous posons des questions de moins en moins abstraites et de plus en plus concrètes. Si nous prenons la couche la plus abstraite, la couche stratégie, nous ne sommes pas concernés par la forme finale de notre application. Dans cette couche, nous nous soucions uniquement des besoins utilisateurs afin de les incorporer dans notre stratégie. A l’inverse dans notre couche la plus concrète, la couche surface, nous nous occupons uniquement des détails les plus concrets quant à l’apparence de notre application.

Couche après couche, nous nous occupons de plus en plus des détails de notre application afin de la rendre la plus spécifique possible aux yeux des utilisateurs.

Quels outils utilisés?

C’est bien tout ça, mais comment mettre en application tout cela?

La couche Stratégie

Il n’y a pas d’outils en particulier pour établir les besoins utilisateurs ou les objectifs du produit. 

Une étude des besoins des utilisateurs et particulièrement de vos clients sont le meilleur moyen de ne pas tomber complètement à côté.

Une étude de nos propres objectifs permet de ne pas dériver lors de la conception de notre produit.

La couche Périmètre

Le périmètre peut être défini par les spécifications fonctionnelles en corrélation avec les besoins utilisateurs et l’objectif du produit.

En cycle en V, on avait l’habitude de définir les spécifications fonctionnelles dans un cahier des charges en tout début de projet. La tendance est maintenant de définir ces spécifications fonctionnelles dans des users stories .

Je ne détaillerai pas dans cet article, la rédaction d’une user story mais en voici quelques exemples pour un site e-commerce : 

  • En tant qu’acheteur, je souhaite ajouter un article à mon panier
  • En tant qu’acheteur, je souhaite confirmer l’achat de mon panier
  • En tant qu’administrateur, je souhaite enlever un article de ma boutique e-commerce

La couche Structure

La couche structure va permettre l’organisation des informations et comment les interactions sont faites entre l’utilisateur et l’application. Les outils utilisés sont également les users stories. On va pouvoir étoffer un peu plus les users story en leur ajoutant des business rules.

Une structure des données va également pouvoir être faite à ce niveau là (ce qui vous facilitera grandement la tâche au niveau technique et architecture lors du développement).

La couche Ossature

La couche ossature va permettre principalement deux choses : 

  • Permettre d’organiser sa navigation
  • Permettre d’utiliser les bons composants au bon endroit

Pour organiser la navigation dans son application, on peut utiliser un schéma de navigation.

Pour utiliser les bons composants au bon endroit, on peut utiliser des wireframes.

A noter qu’ils existent déjà des règles ergonomiques simples et étudiées. Donc s’il vous plaît, simplifiez vous la vie et ne réinventez pas la roue.

La couche Surface

La fameuse couche surface, j’aime pas cette couleur, j’aime pas ce style de bouton, j’aime pas l’input, j’aime pas le menu, etc.. Combien de fois j’ai entendu ça.

La face visible de l’iceberg… Nous développeurs, nous ne voulons pas parfois nous occuper de l’aspect esthétique (quasiment tout le temps en faites :)). Heureusement pour nous, les plus grosses boites  ont fait des études et des études sur les composants, le design, l’esthétique, etc etc… Nous n’avons plus qu’à nous servir : 

Bien sûr, si vous avez la chance d’avoir un designer dans votre équipe, mettez son talent à contribution. Je pars du principe que si vous lisez cet article, c’est que vous n’en avez pas.

Le mot de la fin

Et voilà, tadamm, c’est déjà la fin. J’espère que cet article vous a plu.

 Un petit résumé : 

  • Définir les besoins clients
  • Définir les objectifs de votre application
  • Définir l’aspect fonctionnel à l’aide de users stories
  • Étoffer vos users stories
  • Faire un schéma de navigation
  • Faire des wireframes
  • Faire 152 réunions pour savoir quel framework utilisé (Material, Bootstrap, AntDesign,…)

 Ah oui j’allais oublier, une mauvaise conception de produit implique des allers-retours sans fin car ça n’allait pas, alors allez vous chercher un petit café pour fêter toutes les heures de développement sauvées!

Partagez, si vous aimez

Laisser un commentaire

Specify Facebook App ID and Secret in Super Socializer > Social Login section in admin panel for Facebook Login to work

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