Construiriez-vous votre cuisine sans en avoir fait des plans ?

arthurdata.github.io/rencontresR2023

Arthur Bréant x ThinkR

2023-06-22

Bonjour

Rencontrons Pierrot…

Pierrot

Son profil (Pro)

Développeur R

Monte régulièrement des applications Shiny

Aime partager ses connaissances

Pierrot

Son profil (Perso)

Très curieux

Sportif

A le projet de renouveller sa cuisine

Pierrot

Actuellement

Doit faire des travaux dans sa cuisine.

Doit monter une application Shiny, pour son client, pour aider la création de signature(s) d’email :

• Standardisation,

• Homogénéité,

• Facilité de maintenance.

Pierrot

Problème (avec la cuisine)

Pierrot n’est pas vraiment un bricoleur et il ne sait pas par où commencer les travaux :

• Quelles sont les mesures entre les meubles ?

• Quels meubles utiliser pour une cuisine esthétique ?

• Comment disposer la cuisine
  pour la rendre ergonomique ?

Pierrot

Problème (avec l’app Shiny)

Enchaine les allers-retours avec son client sur le contenu de la future application Shiny :

• Quid de la forme de cette application ?

• Quid de la forme de la signature ?

• Quid des variables à utiliser pour
  remplir la signature ?

Pierrot

Globalement les projets de Pierrot piétinent

Petit syndrome de la page blanche / imposteur

Génère de la frustration

Ne peut pas réaliser ses plats préférés

Pierrot

Jusqu’au jour où …

Pierrot se rend dans une grande enseigne suédoise

(non sponsorisé :) ).

Il rencontre un vendeur qui lui propose de faire un plan de conception de sa cuisine.

Pierrot

Pour Pierrot, c’est la révélation

Cette maquette répond à toutes ses questions à propos de sa cuisine.

En s’appuyant sur la maquette,
la discussion avec le vendeur est fluide.

Surtout, Pierrot peut tester, expérimenter et réessayer
sans avoir peur de se tromper.

Pierrot

Et si …

Et si Pierrot réutilisait cette conception de maquette
pour son application Shiny ?

Pierrot

Pierrot est décidé

Il va concevoir une maquette pour son client.

Mais que peut-il attendre de cette maquette ?

Avant de commencer

Pierrot est convaincu

Cette étape de conception
n’est pas seulement esthétique.

Elle doit être le support d’une discussion commune,
avec son client.

Les étapes de conception

Les prototypes

À partir du cahier des charges initial, Pierrot va itérer des prototypes.

Les prototypes sont des modèles
préliminaires (maquettes) d’un produit futur.

Pour Pierrot, l’itération portera sur la
fidélité du prototype vis-à-vis du produit final.

Les étapes de conception

La fidélité du prototype

La fidélité fait référence à la proximité
avec le produit final.

Plus le prototype est fidèle,
plus le travail à engager sera important.

Les étapes de conception

Low-Fi (Low fidelity)

Rapide et facile à créer.

Pierrot peut réaliser cette maquette, en réunion,
directement avec son client.

Mettre à plat tous les éléments que doit posséder
la future application.

Low-Fi (Low fidelity)

Les étapes de conception

Mid-Fi (Medium fidelity)

Plus détaillée et commence visuellement à
ressembler au futur produit.

Pierrot pourra utiliser des outils tels que
Excalidraw ou encore Figma.

Valider la présence et la disposition des
différents éléments dans l’interface.

On reconnait un actionButton et des textinput On pourrait presque s’arrêter ici mais est-ce vraiment satisfaisant si c’était pour notre cuisine ?

Mid-Fi (Medium fidelity)

Les étapes de conception

Hi-Fi (High fidelity)

Très détaillée, ressemble et fonctionne presque
comme le produit final.

Pierrot pourra utiliser des outils tels que
Figma, Sketch, Framer ou encore Adobe XD.

Valider le produit final avant son développement.

Hi-Fi (High fidelity)

Quelques étapes supplémentaires…

Pour orienter les discussions

Expérience utilisateur (UX):

Pierrot peut présenter ces maquettes en noir et blanc.

Interface utilisateur (UI):

Pierrot peut créer un Design System.

Quelques étapes supplémentaires…

Ajouter de l’interactivité

Pierrot peut ajouter du dynamisme dans ses maquettes.

Simule les interactions
entre les futures pages de l’application.

Interactivité

Interactivité

Quelques étapes supplémentaires…

Collaboratif

Engage son client à ajouter des commentaires
directement sur la maquette.

Facilite le travail en asynchrone et
fluidifie les discussions.

Partage la maquette à des personnes
représentant le public cible.

Quelques étapes supplémentaires…

Correction(s)

Pour Pierrot, il est plus rapide d’effectuer
des corrections dans la maquette
que dans le code.

Gain financier.

Le développement

Efficacité

Pierrot sait exactement ce qu’il doit développer.

“Penser son code” avant le développement.

Meilleure structure et organisation du projet.

Exploration créative – Une maquette offre une opportunité d’explorer différentes idées créatives, de tester différentes approches et de prendre des décisions éclairées avant de se lancer dans le développement. Cela favorise l’innovation et l’amélioration du produit final.

Penser son code

Le développement

Tester son code

Rédaction des tests unitaires pour tester le front
de l’application.

Tester les différentes interactions validées
par son client.

La validation

Des avantages aussi pour le client

Pierrot démarre le développement
avec une vision claire et commune.

Réduction des risques de retards ou
de modifications majeures en cours de projet.

Des validations intermédiaires plus
rapides et plus faciles.

Le futur

Outil pour l’avenir

Outil précieux pour les futures
réflexions et itérations.

Référence visuelle pour les
futures mises à jour et
modifications de l’application.

La livraison

Une nouvelle cuisine

{signature}

Pierrot a terminé le développement
de son application pour son client :

connect.thinkr.fr/signature

Merci

limites et inconvénients: Temps supplémentaire Coût supplémentaire Limitations de visualisation Contraintes techniques Évolution des besoins Difficulté à représenter tous les détails

Simplicité excessive : Lors de la conception d’une maquette, il peut être tentant de se limiter à des fonctionnalités simples et basiques. Cependant, cela peut conduire à une sous-estimation des besoins réels du projet et à une maquette qui ne représente pas fidèlement l’application finale. Il est important de trouver un équilibre entre la simplicité et la représentation adéquate des fonctionnalités clés.

Absence de limites : D’un autre côté, lors de la conception d’une maquette, il est possible de se laisser emporter par l’imagination et d’ajouter des fonctionnalités ou des éléments complexes qui peuvent être difficiles à implémenter ou qui ne correspondent pas aux ressources disponibles. Il est important de garder à l’esprit les contraintes techniques et les ressources disponibles lors de la création de la maquette, afin de rester réaliste et de s’assurer que le développement futur sera réalisable.