Interfaces utilisateur
Personas utilisateurs
L’analyse fonctionnelle détaillée précédemment m’a permis d’identifier deux profils utilisateurs distincts que je synthétise ici sous forme de personas pour guider mes choix d’interface :
Le coach utilise principalement l’interface web depuis son bureau ou à domicile pour :
- Créer et gérer le catalogue d’exercices personnalisé
- Composer des programmes d’entraînement
- Planifier les séances
L’athlète utilise exclusivement l’application mobile en salle de sport pour :
- Consulter son programme du jour
- Enregistrer ses records personnels
- Communiquer avec son coach via des notes sur les sessions d’entrainement
Conception des wireframes
Pour la conception des interfaces, j’ai choisi de commencer par des wireframes qui se concentrent sur la structure informationnelle et les flux utilisateurs. Cette phase me permet de valider l’organisation de l’information et les flux utilisateurs avant de passer aux aspects visuels.
L’architecture de DropIt se décline en deux interfaces distinctes : une application web pour les coachs (back office) et une application mobile pour les athlètes (front office), chacune adaptée à son contexte d’usage spécifique.
Wireframe web coach (Back office)
Page de bibliothèque d’entrainement
La vue générale présente l’interface globale avec une navigation latérale permanente donnant accès aux trois catalogues : exercices, complexes et programmes d’entraînement. Cette organisation facilite la navigation entre les différents types de contenus que le coach manipule quotidiennement.
Page de formulaire de création d’un entrainement
Le wireframe révèle les éléments structurants :
- Etape du formulaire dans lequel on peut composer l’entrainement avec un des exercices et/ou des complexes
- Sidebar gauche pour le catalogue d’exercices et complexes avec recherche
- Zone centrale qui permet la construction du programme d’entrainement
Contraintes responsive
Dans le MVP, j’ai fait le choix de ne pas optimiser l’interface web pour les mobiles. Les coachs utilisent principalement des ordinateurs de bureau ou tablettes pour créer leurs programmes. Cette décision me permet de concentrer l’effort sur une expérience optimale desktop plutôt que de multiplier les compromis.
Wireframe mobile athlète (Front office)
Wireframes application mobile
L’interface mobile privilégie la simplicité avec trois écrans principaux optimisés pour l’usage en salle de sport :
Page d’accueil
Visualisation d’un entrainement
Visualisation du détail d’un exercice
La page d’accueil présente un carousel central pour l’entraînement du jour, l’actualité du club et l’historique, avec un menu en bas pour la navigation (compte, accueil, records). La visualisation d’entraînement affiche les exercices de manière séquentielle avec accès aux détails par clic. L’interface détaillée permet de visualiser les paramètres spécifiques et d’enregistrer les performances réalisées.
Design system
Pour le design system, j’ai choisi Shadcn/ui (pour l’interface web) après avoir analysé les enjeux d’accessibilité et de maintenabilité que présentait DropIt. Cette décision s’appuie sur plusieurs arguments techniques détaillés dans la partie présentations.