Vous trouverez une version de ce document au format PDF ici.

Objectifs

• Brainstorming
• Séquences d’interaction
• Prototypage papier
• Prise en main de Figma

Travail à réaliser :

1 Tâches et séquences d’interaction, à faire en trinôme

Commencez par réaliser une première analyse du sujet de SAÉ afin de dégager une liste de tâches et sous-tâches que l’utilisateur est susceptible de réaliser. Commencez par définir des séquences d’interaction.

2 Prototypage papier

Réalisez un prototypage papier des parties incontournables de votre interface. Évaluez vos prototypes avec votre enseignant et itérez. Dès que vous obtenez une solution satisfaisante, passez à l’étape suivante.

3 Figma

Figma est un outil en ligne dédié à la création de maquettes d’interfaces graphiques. C’est un outil payant mais vous pouvez disposer d’une licence académique. Il facilite également l’édition collaborative.

3.1 Création d’un compte Figma et activation de la version académique

1. Aller à l’adresse https://www.figma.com/education/ > Get verified > Create one > Créez un compte en utilisant votre adresse mail @univ-lille.fr
2. Sélectionner "Student"
3. Enter the reason you’re applying for education status: I create an account to participate in the HCI class R2.02 https://www.iut-info.univ-lille.fr/ gery.casiez/R2.02/
4. Sélectionnez "Université de Lille"
5. Primary field of study: Computer Science
6. Soumettre la demande

3.2 Création de maquettes basse fidélité avec un style fil de fer

3.2.1 Découverte des exemples

1. Ouvrez "Paper Wireframe Kit" dans Figma.
2. Allez en haut à gauche dans la partie "Examples" pour voir différents exemples d’interfaces.
3. Sélectionnez le premier écran de l’avant-dernier exemple qui s’appelle "Confuso" puis cliquez sur le bouton en haut à droite "Present". Remarquez que vous pouvez cliquer sur le bouton "Come on in" pour passer à l’écran suivant. Attention : il peut-être nécessaire dégrouper les frames de l’exemple pour pouvoir le lire. Faire un clic droit et choisir "ungroup".

3.2.2 Création d’une première maquette

1. Créez une nouvelle page dans "Pages".
2. Faites des copier-coller d’éléments d’interfaces présents dans les autres pages pour constituer votre propre interface, par exemple pour reproduire l’interface de la Figure 1.
3. Création de séquences d’interaction : pour passer d’un écran à un autre quand vous cliquez sur un élément, allez sur la droite dans "Prototype". Vous devez maintenant voir apparaître un bouton + quand vous survolez des éléments avec la souris. Reliez un des éléments à un autre écran.
4. Passez maintenant en mode "Present" pour vérifier que vous passez à un autre écran quand vous cliquez sur l’élément.

---

Figure 1: Figma.

---

Q 1. Réalisez maintenant une maquette basse fidélité de votre SAÉ.

Q 2. Pour le rendu de la SAÉ sur la partie prototypage basse fidélité, vous devrez cliquer sur le bouton "Share" et copier le lien de partage en lecture pour le mettre à disposition de votre enseignant.

Ce document a été traduit de L^AT_EX par H^EV^EA