Création et gestion des interactions dans les prototypes

Apprenez à définir des objets cliquables pour naviguer d'une page à l'autre, réaliser des rollovers et des rollouts, et donner vie à votre prototype.

Détails de la leçon

Description de la leçon

Cette leçon vous montre comment créer des interactions dans un prototype, telles que cliquer sur des boutons pour naviguer entre différentes pages, effectuer des rollovers et rollouts. Vous apprendrez à configurer des éléments interactifs

Les spécifications d'interaction sont principalement gérées dans la partie en haut à droite de l'interface. Après avoir sélectionné un objet, plusieurs actions sont disponibles comme Unclick, Unmouse Enter et Unmouse Out. Il est aussi possible d'ajouter des événements clavier comme K-Down et K-Up, ainsi que les événements de focus.

Pour illustrer, en ajoutant un bouton ‘En savoir plus’ et en assignant l'événement Unclick vers une page souhaitée, il est possible de vérifier et prévisualiser ces interactions. D'autres options, comme revenir en arrière, peuvent être ajoutées à l'aide de boutons retour et de Quicklinks. Le but est d'assurer la fonctionnalité des interactions et de vérifier leur opérationnalité dans un aperçu prototype.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

  • Comprendre comment ajouter et configurer des interactions cliquables.
  • Savoir utiliser les Quicklinks pour naviguer entre les pages.
  • Apprendre à tester et valider les interactions dans un prototype.

Prérequis pour cette leçon

Les prérequis pour cette leçon incluent :

  • Connaissance de base des interfaces et prototypes.
  • Familiarité avec des outils de design UX/UI.

Métiers concernés

Les métiers utilisant cette compétence incluent :

  • Développeur web
  • Designer UX/UI
  • Chef de projet digital

Alternatives et ressources

Les alternatives pour ce processus incluent divers outils de prototypage tels que :

  • Adobe XD
  • Figma
  • Marvel App

Questions & Réponses

Pour ajouter une interaction de clic, sélectionnez votre bouton, allez dans les options d'interaction en haut à droite, et choisissez 'Unclick'. Ensuite, déterminez la page de destination à l’aide du Quicklink.
Les événements disponibles incluent Unclick, Unmouse Enter, Unmouse Out, K-Down, K-Up, Focus, et Unlose Focus.
Pour vérifier les interactions, sauvegardez votre travail et prévisualisez le prototype. Naviguez à travers les éléments interactifs pour vérifier leur opérationnalité.