La conception d’un site web sans interactions efficaces peut nuire à l’expérience utilisateur.
Cela peut entraîner des frustrations et une perte d’engagement de la part des utilisateurs.
Cet article explore comment intégrer des éléments interactifs essentiels pour un prototype de site web attrayant et fonctionnel.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
Jusqu’ici, nous avons toujours alterné entre le site web et la version. Logiquement, nous devrions passer au design de notre version mobile, mais pour pouvoir garder le rythme du chapitre précédent, nous allons d’abord passer au prototype de notre site web avant de designer notre application mobile. Et c’est ce que nous allons faire dans ce chapitre.
Scénario d’utilisation pour prototype web
Pour pouvoir constater les différents prototypes que nous allons ajouter, il faudra faire un scénario d’utilisation. C’est-à-dire que nous allons nous mettre dans la peau d’un utilisateur et voir toutes les interactions que nous pourrons effectuer.
Les éléments interactifs
C’est ici, sur la page d’accueil, que le visiteur atterrira quand il sera redirigé vers notre site. Et parmi les composants à l’écran, il pourra interagir avec le bouton JE TENTE MA CHANCE.
Puis avec la chaussure sur la page d’accueil, on va pouvoir interagir avec les bandes des chaussures pour montrer ce que le client peut recevoir. Nous allons designer cela par la suite, mais pour le moment passons à la page suivante.
Comme vous le constatez, le bouton EMAIL va changer quand on cliquera dessus.
Par la suite, avec la page vote, le client va pouvoir cliquer sur les boutons LIKE qui s’y trouvent.
Maintenant avec la page Gold Stripe Edition, on va juste scroller dessus.
On descend et on atteint la page Adiclub, où l’utilisateur pourra cliquer sur le bouton REJOINDRE afin d’adhérer à ce système de fidélisation.
Enfin, on arrive au pied de page où le footer, où l’on va pouvoir interagir avec les boutons des mentions légales en survolant ces derniers.
Les bandes dorées
Je vous ai parlé un peu plus top de designer les bandes dorées du produit de la Gold Stripe Edition sur la page d’accueil. L’objectif ici est d’ajouter une interaction avec les bandes où ils seront affichés en or quand on survolera dessus. Pour commencer, diriger vous vers les Ressources et copier les éléments graphiques des trois bandes dorées vers la page d’accueil.
Vous pouvez voir les différentes numérotations des bandes pour voir leurs emplacements, maintenant il faut mettre l’opacité des bandes à 50% pour que l’on puisse les placer sur la chaussure en jouant sur la rotation de la bande ainsi que sa dimension avec l’outil scale .
Remettez ensuite l’opacité sur 100% et faites la manipulation suivante avec la première bande pour pouvoir obtenir un composant sur lequel on pourra interagir :
- D’abord renommer la première bande comme ceci :
- Ensuite, dupliquez la bande en question, mais mettez l’opacité de la deuxième sur0%et renommez-le tel que vous voyez à l’écran :
- Sélectionnez les deux états de la bande On et Off puis créez un composant avec Create component>Create component set .
Faites-en pareil avec les deux autres bandes, puis déplacer les composants dans le Design system web et placer les instances sur la page d’accueil avec les états On, puis de les mettre toutes sur Off .
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 scénario d'utilisation pour un site web?
Quels sont les éléments interactifs à intégrer dans un prototype?
Comment intégrer des bandes dorées interactives dans un site web?
Pourquoi est-il important de tester les interactions utilisateur lors de la création d'un prototype?
Comment les prototypes de sites web facilitent-ils le développement d'applications mobiles?
Conclusion
En créant des prototypes web interactifs, vous posez les bases d’une expérience utilisateur réussie. Quelles autres stratégies pourriez-vous explorer pour améliorer l’engagement des utilisateurs?