Concevoir un prototype mobile peut être complexe en raison des limitations d’interactions par rapport au web.
Les erreurs dans les animations ou les interactions peuvent frustrer les utilisateurs et nuire à l’expérience générale.
Cet article vous guidera à travers les étapes essentielles pour créer et tester un prototype mobile interactif efficace.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
Dans ce nouveau chapitre, nous allons à présent créer le prototype du design mobile que nous venons de créer en ajoutant des interactions.
Scénario d'utilisation interactif mobile
On commence tout de suite avec un scénario d’utilisation comme nous l’avons fait avec la partie web. Pour voir ce que l’utilisateur verra à partir de son portable, je vous propose de regarder le tableau suivant :
Pour la page d’accueil : Vu qu’on ne peut pas survoler les éléments sur un mobile, on va ajouter une animation sur les bandes dorées qui va les permettre de s’afficher l’un après l’autre automatiquement.
Puis d’un autre côté, on a le bouton JE TENTE MA CHANCE mobile que nous devons animer.
Pour la page concept : comme avec la version web, on va ajouter une interaction avec le bouton EMAIL mobile.
Pour la page vote : on a les boutons LIKE évidemment.
Pour la page Gold Stripe Edition : Ici, on a zéro interaction, on va juste afficher des informations.
Pour la page Adiclub : Il y a le bouton REJOINDRE mobile où nous allons interagir avec.
Pour la page footer : On termine avec les boutons du footer qui changera d’état lorsque l’on survolera dessus.
Ça sera la liste des éléments que nous allons pouvoir interagir avec pour la version mobile, comme vous vous en doutez c’est le même qu’avec la version web. On passe tout de suite à la réalisation du prototype dans la partie que va suivre.
Créer un prototype mobile animé
Pour faire l’animation avec le premier bouton de la page d’accueil, nous n’allons pas faire la même erreur qu’avec la version web, car on va directement ajouter les interactions dans le Design system mobile :
- Le bouton JE TENTE MA CHANCE mobile :
Il vous faut juste ajouter deux interactions qui va de l’état Off vers On quand on clique dessus pour la première et de l’état On vers Off après un certain délai pour la deuxième.
- Pour les boutons EMAIL et REJOINDRE mobile :
Vous allez exactement faire la même chose qu’avec le bouton JE TENTE MA CHANCE mobile.
- Avec le bouton LIKE, au lieu de mettre After delay pour passe de l’état On vers Off , changez cela en On click (quand on va recliquer dessus).
- Pour les boutons du footer :
On n’a pas de mode While hovering (quand on survole dessus) sur les portables donc nous allons simplement mettre sur One click (quand on appuiera dessus) et ajouter un After delay pou revenir à l’état initial.
- Pour les bandes dorées :
J’ai décidé de les mettre à la fin, car il y a pas mal de choses à faire dessus donc vaut mieux commencer par le plus facile. Ce que nous allons faire c’est d’abord de copier les composants dans le Design system web vers le Design system mobile.
Puis créer des instances dans la page d’accueil et redimensionner la bande afin que ça coïncide avec la chaussure tout en prenant note de ses dimensions.
Maintenant, appliquer ces dimensions au composant principal dans le Design system.
Faites de même avec le reste des bandes puis mettez toutes les bandes sur l’état Off .
Pour faire notre petite animation maintenant, nous allons juste changer d’état avec un After delay sur chacune des bandes.
À présent que toutes les interactions sont mises en place, nous allons tester tout cela dans la prochaine partie.
Tester le prototype mobile interactif
Afin de pouvoir tester notre prototype depuis le frame contenant les éléments mobiles, nous allons en premier lieu faire quelques configurations :
- Il faut ajouter un flow sur notre frame pour que nous puissions démarrer directement sur la page d’accueil.
- Après, il faut sélectionner le frame et dans la partie prototype vous devriez appuyer sur Show prototype settings > Device et choisissez le type d’appareil qui correspond à la taille du frame déjà choisi précédemment.
Mettez-vous à présent en mode présentation, et sélectionnez le flow mobile. Vous constatez qu’avec les bandes dorées, on n’a pas l’effet attendu, ne vous inquiétez pas, on va régler ça par la suite.
Si vous testez les boutons, tout devrait fonctionner à merveille.
Essayez aussi le bouton LIKE :
Et pour terminer, vérifier aussi les interactions avec les boutons du footer.
Ajustements de transitions d'animation
Pour cette partie nous allons tout juste faire une petite modification sur les bandes dorées pour que les bandes passent de l’état Off à On une à une.
Voici le principe que l’on va suivre pour pouvoir faire cette animation.
Donc pour la première bande on a mis un délai de 800 ms .
Puis ajouter une animation de retour vers l’état Off avec 1600 ms .
Ensuite, selon le principe, on doit donc attendre que la première animation soit terminée pour passer à la suivante. Mettons donc un After delay de 2000 ms sur la deuxième bande ( 400 ms de petite transition).
Sans oublier d’ajouter une animation de retour avec 2800 ms .
Pour terminer avec la dernière bande, on met un After delay de 3500 ms et 4300 ms sur l’animation de retour.
Re-test du prototype pour UX optimale
On revient maintenant en mode présentation et voyons voir ce que ça donne. On remarque que nos bandes se mettent à clignoter automatiquement pour avoir l’animation qu’on a voulu créer.
Donc voilà, c’est ici qu’on termine notre projet sur le prototype de la version mobile. On a ajouté les mêmes interactions que celles de la version web avec quelques changements pour la version mobile. Pour le reste du travail, on passe cela aux développeurs afin de concrétiser le projet et de le lancer.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment créer un prototype mobile interactif?
Quelles animations utiliser pour un design mobile?
Comment tester un prototype mobile?
Comment ajuster les transitions d'animation?
Pourquoi intégrer des interactions dans un prototype web pour mobile?
Conclusion
La conception de prototypes mobiles interactifs est essentielle pour créer des expériences utilisateur engageantes. Quels autres éléments aimeriez-vous explorer pour améliorer vos designs mobiles?
