IFT2905 - Introduction

Plan de la démo

1. Présentation générale
2. Nous contacter, dispos
3. Pourquoi le cours?
4. Révision du matériel à date
• Intro a l'IHM
• Design of Everyday Things
5. Intro FigJam
6. Intro Figma
7. Fun Facts! (si nous avons le temps)

1. Présentation générale + précisions

À propos de nous

Cassandre Gabriel
Je suis en maîtrise dans les laboratoires de HCI et génie logiciel à l'UdeM, et c'est ma troisième fois en tant qu'auxiliaire de ce cours. En dehors de l'école, j'adore faire de l'escalade/bloc (vous pouvez me trouver à Bloc Shop les vendredis si vous avez des questions sur le cours), jouer (et écouter) de la musique, faire du bateau-dragon, juger des cafés, et courir. Quand j'ai suivi ce cours, je l'ai vraiment apprécié (je fais ma maîtrise dans ce domaine), alors j'espère créer la même expérience pour vous tous. N'hésitez pas à me faire part de vos commentaires :)
Je suis en première année de maîtrise en intelligence artificielle. Je viens tout juste de rejoindre le laboratoire de Damien en HCI, où je me concentre sur l’interaction humain–IA, notamment sur la façon de mieux intégrer l’IA dans les logiciels. J’espère que vous allez aimer ce cours : c’est vraiment un cours où vous pourrez être créatifs et vous amuser.

À propos de nos démos pour le cours

• Un lien vers le site où se trouvent les démos, liens supplémentaires et autres informations est disponible sur Studium.

2. Important: Contacter les démos + disponibilités

Utiliser le forum sur Studium pour les questions générales pour éviter la répétition!

• - C'est quand vos dispos ?
• - Sur le site des démos !

3. TLDR: Le cours, pourquoi?

Ce cours vous est pertinent pour:

• UI: User Interface Design (Design d'interface utilisateur)

• UX: User Experience Design (Design d'expérience utilisateur)

Comprendre comment les humains interagissent avec la technologie et comment concevoir des systèmes qui facilitent cette interaction.

Ceci inclut:

• Le software (le logiciel) - comment les humains interagissent avec les applications, les sites web, les systèmes d'exploitation, les outils de développeurs etc.
• Le hardware (la robotique, les interfaces avec plusieurs boutons, les machines manipulables par l'humain comme les autos (ou meme les "self-driving cars"), etc.) - comment les humains interagissent avec les machines physiques, et comment concevoir des interfaces physiques intuitives.
• L'IA, comment creer des systemes intelligents pour les humains - ChatGPT, DALL-E, systèmes de recommandation, assistants vocaux, integration de RAG, memoires augmentées, search engines intelligents, etc...
• Les choses non-tech qui impliquent une interaction avec les humains. Ex: Norman Doors!

• USS Vincennes (3 juillet 1988) : Un navire de guerre américain a abattu par erreur un avion civil iranien, tuant les 290 passagers à bord. L'incident a été causé par une mauvaise interprétation des informations radar et des erreurs de communication.

• Three Mile Island (Pennsylvanie, 1973) : Fusion partielle du cœur dans une centrale nucléaire. Défaillances mécaniques, défauts de conception et erreurs d'opérateurs.

• Gimli Glider (Air Canada, 1983) : Avion manquant de carburant en vol. Erreur de calcul due au changement du système Impérial au système Métrique pour la mesure du carburant.

• Vol Air France 447 (2009) : Crash dans l'océan Atlantique. Incapacité des pilotes à interpréter correctement la situation après le désengagement du pilote automatique.

• Submarine Taegeuk (Corée du Sud, 2010) : L'interface utilisateur de sonar mal conçue était un facteur contributif. L'opérateur du sonar a manqué des informations cruciales sur l'affichage, ce qui a empêché l'équipage de détecter un sous-marin nord-coréen.

• etc...

Avoir un aperçu du rôle, des objectifs et des points de vue de certains non-programmeurs dans votre équipe/votre compagnie, en industrie.

Être capable de créer un bon prototype, comprendre comment valider et invalider des choix de conception et comprendre les processus avant l'implementation du code.

Vous rendre un meilleur développeur (oui, vraiment)

4. Révision du matériel à date

Intro a l'IHM

Temps pour un premier petit quiz !

• Qu’est-ce qu’une interface ?
• L'acronym IHM signifie quoi ?
• C’est quoi l’IHM ?
• Quels sont les 3 piliers de l’IHM ?
• C'est quoi L’UTILISABILITÉ ?
• Efficacité vs. Efficience vs. Satisfaction, C’est quoi la difference ?
• Quels sont les autres attributs de l’utilisabilité ?

Réponses:

Design of Everyday Things

1. La DÉCOUVRABILITÉ et L’UTILISABILITÉ
2. Quiz conceptions
3. Vidéo Mario: Comment créer une bonne interface
4. User Inyerface challenge
5. Critiquer une interface

LA DÉCOUVRABILITÉ:

1. Capacites d'action / Affordances:
Capacité d’action qu'un utilisateur peut effectuer avec un objet.
Plus précisément : relation entre les propriétés (fonctionalités) de l’interface et les capacités de l’utilisateur de reconnaitre comment l’objet peut être utilisé.

2. Signifiants:
Les signifiants sont les propriétés utilisées pour rendre visibles les affordances.
- Ils indiquent souvent où sont les actions possibles et comment les appliquer.
- Si une fonctionalité est inatteignable, cela brise le lien d'affordance.
- Plus de signifiant ne signifie pas toujours une meilleure interface.
- Trop de signifiants peuvent causer de la confusion ou impliquer une faute au niveau de l'interface.



3. Retroaction / Feedback:
Une manière de donner une confirmation à l’utilisateur que sa requête a fonctionné.

Peut être visuelle, auditive, tactile, etc...
Exemple: Animation de chargement, son de notification, vibration, etc...



4. Anticipation / Feedforward:
Une manière de donner à l’utilisateur une indication de ce qui va se passer avant qu’il n’effectue une action.

Ou comment guider l’utilisateur avant qu’il n’effectue une action.

Exemple: Preview d’un lien avant de cliquer dessus, tooltip, barre de recherche avec suggestions, etc...



5. Correspondance (mapping):
Une relation logique entre la dynamique de contrôle d'une interface et l'action ou résultat de ce contrôle.
Correspondance naturelle: prendre avantage des analogies au monde physique ou aux standards culturels.
Exemple: Menu d'un cellulaire, glisser son doigt dans un sens applique un glissement du menu dans la même direction.



6. Contraintes:
Contrainte sur la relation physique entre les éléments
- L’utilisation de contraintes physiques, logiques et sémantiques guide les actions et peut faciliter l'interprétation.


7. Modèle conceptuel:
Une explication, souvent très simplifiée, de la façon dont quelque chose fonctionne.
- Un modèle conceptuel n’a pas besoin d’être complet ou même précis tant qu’il est utile.
- Combinaisons des connaissances existantes de l'utilisateur, de l'interaction avec l'objet et des explications
- Déductible en observant l'objet/l'interface et en se basant sur son intuition

Exemple: Modèle conceptuel d'un ordinateur (bureau, dossiers, corbeille, etc...)



L’UTILISABILITÉ:

1. Efficacité (effectiveness)： L'interface permet à ses utilisateurs d’atteindre le résultat prévu.
Exemple: Je veux envoyer un message à mon ami à travers une messagerie et mon ami a reçu le message avec succès.

2. Efficience (efficiency)： L’utilisateur atteint le résultat avec un effort et un temps minimal
Exemple: Je veux envoyer un message à mon ami à travers une messagerie et j'ai pris moins de une minute pour le réussir.

3. Satisfaction： Comfort de l'utilisateur lors de son interaction.
Exemple: Je veux envoyer un message à mon ami à travers une messagerie et j'ai trouvé l'expérience satisfaisante.

4. Simplicité d’apprentissage： La facilité avec laquelle les utilisateurs s'habituent à l'interface.
Exemple: Je viens de télécharger une application sur mon téléphone et j'ai pris 5 minutes pour savoir comment l'utiliser.

5. Mémorabilité： La facilité avec laquelle les utilisateurs se souviennent du fonctionnement de l'interface.
Exemple: Je n'ai pas utilisé cet application depuis des mois, mais par contre, je me souviens encore comment manipuler les fonctions.

6. Visibilité (feedback)： La clarté et la facilité à percevoir et comprendre l'état du système.
Exemple: Je veux envoyer un message à mon ami à travers un messagerie et il y a un √ à côté de mon message pour m'indiquer que le message a été envoyé avec succès

7. Erreur (tolérance et prévention)： Mesure de la quantités et de l’impact des erreurs du l’utilisateur.
Exemple: Je veux envoyer un message à mon ami, mais j'ai fait une faute d'orthographe. L'interface me permet de retirer le message et faire une modification.

Quiz (un autre yay!)

Vidéo Mario: Comment créer une bonne interface

Feedback:
-Les bruits du jeu
-Les blocs qui s'activent quand on les frappe correctement
-Les goomba applatis quand arrive à les tuer
-Les blocs "vides" qui font un petit bruit sec pour indiquer qu'il n'y a rien qui s'active là
Visibilité du système:
- L'état de mario
- Le nombre de vies
- Où se trouve mario dans le monde, ainsi que ses enemis
- Le temps restant
- Le score

Segment sur l'utilisabilité: 1:10 - 3:33
Efficience & Efficacité: 2:57
"Once the player realizes what they need to do, it becomes their game"
Memorabilité: 1:15
"We didn't need to have a specific tutorial"
Simplicité d'apprentissage: 0:46
"We kept simulating what the player would do"
Satisfaction : 0:26, 1:02
"When they see a coin, it'll make them happy and they'll want to try again."
Erreurs: 2:28
"We made sure that there were some parts that even if the player fell, it would be safe."

Retour sur les modèles conceptuels

Modèle conceptuel ⚙️ vs Modèle mental 🧠

Modèle conceptuel: ce que le designer crée

• Ce que les utilisateurs pourront faire

• De quels concepts les utilisateurs auront besoin pour interagir avec le système?

• Comment vont-ils interagir avec le système?

 

Modèle mental: Ce que l'utilisateur a à sa disposition / apprend

• S'imaginer et comprendre le fonctionnement du système

• Peut aider ou entraver l'interaction avec le système

 

Les deux fossés de l'interaction 🕳️

Fossé de l'exécution : comprendre comment faire quelque chose

⬆️ Cassandre qui essaye de faire ses taxes

Fossé de l'évaluation : comprendre qu'est-ce qui vient de se passer

⬆️ Cassandre en 1ère année qui vient d'overwrite son code local après avoir fait une commande sur git qu'elle comprenait pas

Les sept étapes de l'action 🕳️

Permettent de créer et ajuster le modèle mental!

Légende:

- Fossé de l'exécution : 🟥
- Fossé de l'évaluation: 🟦

1. Objectif: que veux-je accomplir et pourquoi?

2. Intention: comment puis-je le faire?

3. Spécification : quelles sont mes options?

4. Exécution : que puis-je faire maintenant?

5. Perception : que vient-il de se passer?

6. Interprétation : qu'est-ce que ça signifie?

7. Évaluation : est-ce acceptable? Ai-je atteint mon objectif?

 

Exemple:

Utiliser une machine pour payer des tickets de stationnement:

1. Objectif: utiliser la machine à tickets pour payer votre place de stationnement

2. Intention: comprendre comment fonctionne la machine à tickets

3. Spécification: sélectionner les actions pour entrer le numéro d'immatriculation de la voiture, insérer le montant requis d'argent et imprimer le ticket

4. Exécution: exécuter physiquement la séquence d'actions spécifiée

5. Perception: observer l'affichage numérique et le ticket imprimé

6. Interprétation: le système a accepté les détails de la voiture et de l'argent... le paiement est réussi.

7. Évaluation: le ticket imprimé vous a bien mené à votre objectif! yay!

    

Critiquer une interface

Temps de mettre en pratique vos connaissances en critiquant une interface web.

---

5. Intro FigJam

Pourquoi FigJam?

Outil de collaboration en équipe, vraiment bien fait. Comme un tableau géant intéractif. Utile pour une premiere conception

Team Board démo FigJam:

Lien pour le FigJam: FigJam Demo

Concept important à retenir:

Wireframing

---

6. Intro Figma

Concepts importants:

• Figma vs. FigJam
• Les plugins, les librairies
• Interface de Figma
• Niveau de détail attendu dans le cours (!)

---

Figma vs. FigJam

C’est quoi Figma?

Figma est un outil de conception UI/UX qui facilite la création collaborative de prototypes et d'interfaces utilisateur.

• Figma == Outil de conception d'interfaces et de prototypage (Prototype Magicien d’Oz)
• FigJam == Outil de tableau blanc pour le brainstorming et la planification de projet (Prototype en « papier »)

Exemple de l’année dernière avec Figma

Board démo figma vu en cours cette année (l'année dernière dispo apres le cours):

Figma Demo

Plugins recommandés (même nécessaires pour les devoirs)

Concepts vraiments importants à retenir:

• Découvrabilité / Discoverability
• Capacité d'action / Affordance
• Signifiants / Signifiers
• Rétroaction / Feedback
• Anticipation / Feedforward
• Modèle conceptuel / Conceptual Model
• Correspondances / Mapping
• Contraintes / Constraints

7. Fun Stuff

User Inyerface challenge

Site web du User Inyerface

---