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.
Vous pouvez rencontrer des problèmes sur Firefox. Il est conseillé d’utiliser Chrome.

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. Il est fort probable que l’email de Figma parte dans le spam, donc vérifiez le répertoire correspondant dans votre boîte mail.
3. Cliquez sur le lien de vérification dans l’email.
4. What type of institution do you attend? "Higher Ed"
5. Why are you applying for the free Figma Education plan? "I’m applying for the HCI course"
6. What is your school name? "Université de Lille" ou "Université des Sciences et technologies de Lille (Lille I)"
7. What is your primary field of study? "Computer Science"
8. Please upload a copy of your class schedule. Utiliser ce fichier
9. Expected graduation date : 09/2026
10. 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’exemple qui s’appelle "Confuso" (de Ben Adelt) 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É (faire une interface desktop et non mobile).

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