Création d'un Storyboard pour un Site de Vente en Ligne

Exemples de storyboards
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre l'UX Design
Revoir le teaser Je m'abonne
5,0
Transcription

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
5,0
59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de comprendre la structure d'un storyboard, apprendre à intégrer des éléments visuels et narratifs pour améliorer l'UX d'un site de vente en ligne, et maîtriser les techniques de mise en valeur des produits.

Découvrez comment Marie, cherchant un haut pour un mariage, interagit avec un site de vente en ligne grâce à un storyboard structuré.

Cette leçon explore les différentes étapes de création d'un storyboard pour un site de vente en ligne, en se concentrant sur l'expérience de l'utilisateur. Nous suivons Marie, une utilisatrice, alors qu'elle navigue sur le site pour trouver un haut. Le storyboard présente deux zones principales : l'une pour les dessins et l'autre pour la description narrative. Chaque composant de la page est examiné, y compris le header, les visuels, les zones de push promotionnel et le footer. Nous détaillons aussi les interactions, les éléments graphiques et les call to actions qui facilitent l'expérience utilisateur. Le concept de mise en valeur des produits est abordé, ainsi que les fonctionnalités sociales et les zones de réassurance qui encouragent l'acte d'achat. Nous concluons avec la navigation sur la fiche produit et les options de visualisation en situation.

Voir plus
Questions réponses
Quel est l'objectif principal d'un storyboard?
L'objectif principal d'un storyboard est de structurer visuellement et narrativement les différentes étapes de l'interaction utilisateur pour améliorer l'UX d'un site web.
Comment le site met-il en valeur certains produits?
Le site utilise des zones de visuels de différentes tailles, avec des sections plus grandes pour mettre en avant certains produits, répliquant ainsi l'effet tête de gondole.
Quelles fonctionnalités sociales sont intégrées sur la fiche produit?
Les fonctionnalités sociales incluent des options comme le 'j'aime' et le partage sur les réseaux sociaux, regroupées dans une zone dédiée.
Alors donc on rentre dans le vif du sujet, on a donc toujours Marie qui a son objectif trouver un haut pour le mariage de Peggy et dans l'étape précédente on a établi les quatre pages par lesquelles Marie va passer. On passe donc en phase de réalisation du storyboard. Le storyboard se présente, il y a deux zones, il y a l'endroit où on dessine et ici une zone pour la description narrative avec ici une photo du personnage. On a donc ici une zone de header, une zone pour un grand visuel, c'est la page d'accueil, des zones de push pour pouvoir faire remonter des contenus et ici un footer. On raconte l'interaction qui va se passer, Marie arrive sur la page d'accueil du site, elle regarde les photographies grand format, prend connaissance de l'actualité commerciale, pour trouver son haut elle clique directement sur femme dans la navigation supérieure. Donc ici elle va cliquer sur femme. Elle arrive sur la collection femmes au rayon manteau et blouson, elle clique sur top. Plusieurs visuels présentent les articles disponibles, elle clique sur le top de son choix. Donc on voit là on est dans une page catalogue, on a donc la navigation qui s'est allumée ici pour indiquer qu'elle est dans la rubrique femmes. Elle clique sur la rubrique qui correspond. On voit ici le fil d'Ariane qui indique où elle se trouve dans la navigation. On a ici une zone de push promotionnel qui permet d'informer de l'actualité commerciale et ici la liste des produits. Comme on est donc sur un site qui vend des éléments qui sont très visuels, des vêtements, l'idée c'est d'avoir une approche très graphique de l'interaction, donc qu'on voit vraiment les visuels comme on verrait dans un magasin. De même ce serait assez monotone si tous les visuels étaient de la même taille, donc on prévoit une zone qui est plus grande que les autres pour permettre de mettre en avant un produit par rapport aux autres. En ce sens on reproduit un petit peu l'effet tête de gondole, c'est à dire que tous les emplacements ne sont pas équivalents à l'intérieur du magasin et il y a des emplacements qui permettent de mettre en valeur les produits. Donc vous voyez là on voit quatre produits et il y a 1, 2, 3, 4 zones de mise en valeur. Donc dans le storyboard, Marie clique sur le top de son choix, celui qui l'intéresse. Ce haut lui plaît, le prix correspond à son budget et existe à sa taille. Elle remarque les autres tops en dessous, elle consulte plusieurs photos du vêtement puis clique sur voir en situation. Donc là je vais décrire la page, on a toujours le header, zone de navigation n-1, l'idée derrière cette page donc c'est d'entrer par le visuel produit. Donc on va voir, la première chose qu'on va voir c'est le visuel du produit ici au centre de l'écran. Sur le côté j'ai toutes les fonctionnalités de l'affiche produit. Donc je commence par un titre, ici on a groupé toutes les fonctions sociales en même temps pour créer une zone de fonctionnalité sociale, donc c'est le j'aime, cher, etc. On arrive ensuite dans la description détaillée du produit, le prix, le choix de la couleur, de la taille, de la quantité. À côté du choix de la taille, on a un accès vers le guide détail et enfin j'ai mes deux call to action, c'est à dire ajouter au panier et ajouter à la wish list. En dessous j'ai une zone de réassurance, c'est à dire auprès de l'acte d'achat des éléments qui vont rassurer le consommateur sur le fait qu'il va être livré sous cinq jours, il est satisfait ou remboursé et il peut échanger en boutique. Donc tout ça c'est pour lui dire même si vous vous trompez c'est pas grave et donc ça permet de pousser vers l'acte d'achat. De même, associé au produit, on peut avoir un visuel de réassurance sur la qualité qui va donc rassurer le consommateur sur le fait qu'il s'agit d'un produit de bonne qualité. Ici on a mis une zone qui correspond réellement à des onglets en fait, c'est une zone de navigation dans la fiche produit, donc si on clique on reste dans la fiche produit, qui permet de voir en situation, de voir les différents médias associés à ce produit, donc on a quatre visuels et une vidéo et ici voir en couple qui était une fonctionnalité du site. Ici on a le apporter avec, donc on est dans des pouches d'autres produits, des produits qui vont bien avec ce produit là, donc l'idée c'est d'augmenter le panier de consommation. Et enfin ici, mise en avant des autres tops pour faire en sorte que je n'ai pas besoin de remonter dans la page gamme pour voir l'ensemble des tops disponibles et aussi un historique de navigation, les tops consultés récemment. Donc on reprend le fil du scénario, ce haut lui plaît, le prix correspond à son budget et existe à sa taille, elle remarque les autres tops en dessous, elle consulte plusieurs photos du vêtement, puis clique sur voir en situation. La vue en situation présente le mannequin dans un contexte urbain, la composition générale la conforte dans son choix, elle clique sur ajouter au panier et c'est donc la fin du scénario. Remarquez au passage, il y avait la possibilité d'ici d'aller vers d'autres produits, c'est à dire de consulter tous les articles de ce look, qui est une sorte de mini catalogue qui va montrer les différents produits qui composent cette composition.

Programme détaillé de la formation

5 commentaires
5,0
5 votes
5
4
3
2
1
elephorm-1351405@addviseo.com
Il y a 9 months
Commentaire
Je suis en train de me reconvertir dans les métiers de l'UI/UX design. Cette formation va à l'essentiel, évite tous les superflus barbants ! C'est une bonne introduction et ça me donne envie d'en savoir plus !
pioupiou06
Il y a 2 years
Commentaire
Très intéressant et très bien expliqué.
bertrand.deloffre
Il y a 2 years
Commentaire
Très bonne formation pour débuter dans l'UX.
contact_2672
Il y a 3 years
Commentaire
Un terme qui me paraissait totalement barbare mais on ne peut plus familier maintenant. Merci
paul_25
Il y a 3 years
Commentaire
Très bonne introduction synthétique à l'UX Design.
Nos dernières formations WebDesign UX / UI