Comment travaille-t-on une application mobile ou destop ?

Guillem COTCHA
May 13 · 6 min read

Dans cet article, nous parlerons à la fois de la conception d’une interface (enchaînement des écrans, les applications pour permettre aux développeurs de connaître toutes les spécifications du design, détailler la méthodologie atomique pour le design, voir les stades de validation pour le client, etc.

Cette méthodologie peut tout à fait se mettre au service d’une application mobile, d’une web app ou d’un software destop.

Avant de partir directement dans le design et la charte graphique, il est essentiel de réfléchir à la chose la plus importante de l’application : son utilisateur. En effet, vous pourrez avoir l’app la plus jolie, si elle est inutilisable, personne ne la téléchargera. Donc avant de réfléchir à quoi ce que ce soit, il faut que vous définissiez la cible et le futur utilisateur que vous souhaitez attirer. Cela peut vous sembler inutile de prime abord, mais ça vous fera gagner un temps considérable plus tard dans le processus de création.

Le persona

Grâce au persona et l’expérience map, nous allons prendre de la hauteur sur tout le projet. Il va nous permettre de prendre du recul et de mieux réfléchir et appréhender toutes étapes qui vont venir.

Pour se faire, il faut avoir un grande empathie car on va essayer de se mettre au maximum dans la peau du futur utilisateur et voir ainsi tous les points de contact (moments de la journée pendant lesquels vous serez susceptibles d’être en contact avec l’application) que ce dernier aura avec l’application.

Grâce à cette empathie, on va réussir à déterminer la carte d’identité de ou des utilisateurs, son appétence par rapport à l’utilisation du futur produit ou de l’application, son approche du digital, son background professionnel, intellectuel et culturel. On va essayer de dresser le portrait le plus réaliste possible du futur utilisateur, notamment à l’aide de recherches sociologiques, afin d’adapter tout le parcours utilisateur et ainsi retirer tous les points de frictions qu’il pourrait avoir avec l’application.

Prenons un exemple simple, si vous faites une application de comptabilité sans offrir la possibilité d’exporter les données au format xls ou csv, il y aura un point de friction important avec l’utilisateur car c’est un besoin fondamental dans le parcours utilisateur d’une application de comptabilité. Vous n’aurez pas réussi à anticiper ce besoin essentiel du fait d’un manque d’empathie.

Ainsi, à partir du moment où l’on sait à qui on s’adresse, on va pouvoir commencer à déterminer toutes les fonctionnalités et le contenu dont l’utilisateur aura besoin grâce à une arborescence et donc une hiérarchisation de l’application.

Arborescence et parcours utilisateurs

Au même titre que le persona, l’arborescence est l’une des choses à bâtir ex-nihilo. Non, là encore ce n’est pas du temps perdu. Je rencontre encore beaucoup trop de projets qui débutent sur une charte graphique sans même avoir les plans de l’application qui va arriver.

Prenons d’abord le temps de définir une arborescence claire, et détaillée qui va permettre à l’utilisateur de naviguer sereinement, pour trouver toute l’information dont il a besoin le plus facilement possible.

Et donc à l’issu de cette arborescence, on va construire tout le parcours utilisateurs en faisant une cartographie (de façon schématique) de tous les écrans dont disposera l’application.

Attention, on ne parle pas encore de fonctionnalités. Ici, on aura simplement l’enchaînement des écrans les uns après les autres à l’aide de flèches et d’info-bulles si nécessaire.

Les fonctionnalités arrivent avec les wireframes, juste après.

Une feuille et un crayon et c’est parti !

Wireframe

C’est le travail fondamental dans la construction d’une application mobile. L’idée est de conceptualiser rapidement toute les écrans de la façon la plus sommaire possible. Cela signifie que tous les éléments graphiques (image, texte, icône, vidéo, graphiques, etc.) sont réduits à de simple lignes ou formes géométriques comme on le voit sur l’image ci-dessus.

Ainsi, on va pouvoir itérer un grande nombre de fois sur une très courte période afin d’explorer le plus profondément possible les fonctionnalités et ainsi optimiser au maximum le parcours utilisateurs.

Pour cela, il existe un grand nombre d’applications. Mais la façon la plus rapide et la simple reste le papier, le crayon et une gomme.

Place au design avec l’Atomic design

L’Atomic Design par Brad Frost

Finalement, le travail réel du design d’interface n’arrive que bien tard dans le processus de création d’une application.

Il y a d’abord tout un travail de recherche et de définition du parcours utilisateurs afin d’affiner au mieux l’expérience que l’on va pouvoir apporter à l’utilisateur de l’application ou du logiciel.

Une fois que tout cet écosystème a été définit, je commence à travailler le design des éléments graphiques. Alors généralement, afin de gagner du temps sur le projet, je travaille tout ce qui concerne la charte graphique en même temps que la définition de l’expérience utilisateur. C’est à dire que je vais travailler le logo, les couleurs, les typographie, l’iconographie et potentiellement une bibliothèque d’images si cela est nécessaire.

Image result for atomic design
Image par Audrey Hacq

Ensuite, comme on peut le voir sur l’image ci-contre, on va chercher à optimiser au maximum notre flux de production design.

C’est à dire que l’on va créer toute une bibliothèque d’éléments qui va constituer les premiers atomes de la future application. Ces atomes, vont correspondre aux icônes, aux boutons (avec une déclinaison des différents états du bouton : survol, clic, valide, invalide, etc.), les champs de formulaires (état : contenu manquant, contenu erroné, champ verrouillé, etc), les titres, sous-titres, etc. Ce sera finalement une multitudes d’éléments issus de la charte graphique, qui pris indépendamment l’un de l’autre de signifient rien.

Puis progressivement, je vais les réunir afin de créer les premiers organismes qui vont constituer le contenu des écrans. Ces organismes vont correspondre à un formulaire, une image avec un titre, un menu ou un paragraphe.

Finalement, la dernière étape va permettre de réunir ces éléments pour former les écrans. Donc nous aurons là, une image avec le titre + le formulaire avec le bouton et on aura le premier écran “Contact” par exemple.

In fine, je suis beaucoup plus productif puisque je n’ai qu’à modifier l’atome pour qu’au global, ce soient tous les écrans, disposant de cet atome, qui seront modifier directement.

Prototype contextuel et animation

Afin de mieux contextualiser mon travail de designer, je préfère reprendre tout le prototypage réaliser en amont afin d’y intégrer les écrans fraîchement designer. Ainsi, le développeur peut avoir une vision globale et surtout réelle du parcours utilisateur.

Par ailleurs, si l’écran nécessite plus d’explication ou carrément une animation propre, je n’hésite pas à rajouter un GIF animé ou une rapide vidéo de quelques secondes qui viendra illustrer le point atypique de l’écran.

Exportation vers Zeplin

Une fois que le design des écrans a été validé par le chef de projet ou le product owner, j’exporte les écrans via Zeplin de façon à ce que les développeurs puissent avoir toutes les côtes et spécifications de chaque écrans, boutons, typographie, couleurs, taille de caractères, etc.

L’intérêt pour un développeur de Zeplin réside surtout dans le fait de pouvoir télécharger via l’application tous les éléments graphiques au format .png ou .svg. Ainsi, les navette entre le designer et le développeur sur le format du document qui ne s’adapte pas au format de l’écran n’ont plus lieux d’être.

Si nous prenons l’exemple ci dessus, on remarque que le développeur peut récupérer tout le code CSS de cet écran en faisant rapidement un simple copier/coller du code sur la droite de l’écran.

Guillem Cotcha | UI designer

Holà ! 👋 Je suis UX/UI Designer. Ce compte Medium, ce sera un peu un carnet de bord pour connaître ma vie de freelance et en apprendre plus sur l’UI, l’UX, etc.

Guillem COTCHA

Written by

Holà ! Je suis UX/UI Designer 👋 Ce compte Medium, ce sera un peu un carnet de bord pour connaître ma vie de freelance et en apprendre plus sur l’UI, l’UX, etc.

Guillem Cotcha | UI designer

Holà ! 👋 Je suis UX/UI Designer. Ce compte Medium, ce sera un peu un carnet de bord pour connaître ma vie de freelance et en apprendre plus sur l’UI, l’UX, etc.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade