GTI 350 Conception et évaluation des interfaces utilisateurs

Prof. Michael McGuffin http://www.michaelmcguffin.com/ets/gti350/

Quelques définitions

L’IHM

• Interaction humain-machine• Synonymes (ou presque):

interaction homme-machine,interfaces usagers-machine,{interaction, interfaces} {humain,homme}-{machine,ordinateur}, …

• En anglais: «Human-Computer Interaction» (HCI), «Computer-Human Interaction» (CHI), «Man-Machine Interaction» (MMI), …

L’IHM• L’étude de la conception, la réalisation, et l’évaluation

des systèmes interactifs (et surtout informatisés) destinés à l’usage humain, et l’étude des phénomènes associés.– La conception ("design") est préoccupé par les compromis

("tradeoffs")– "Réalisation" peut vouloir dire programmation, ou bien

création avec papier / carton, ou fabrication, etc.• Le mot interface signifie la surface de contact,

ou la frontière, entre deux corps ou deux régions d’espace. L’interaction a lieu à l’interface,ou à travers l’interface.

Sujets à l’intérieur de l’IHM• Méthodologies de conception

– Étant donné une tâche et une classe d’utilisateurs, concevoir la meilleure interface, en respectant les contraintes, qui optimise un aspect de l’utilisabilité (l’efficience, la facilité d’apprentissage, etc.)

• Comment réaliser des interfaces– Algorithmes, outils de programmation,

boîtes à outils, libraries, …• Techniques d’évaluation d’interfaces

– Trouver les faiblesses d’une interface,comparer deux interfaces, mesurer la performance, …

• Développer des interfaces et destechniques d’interaction novatrices

• Développer des modèles et desthéories descriptifs et prédictifs

GTI 350: L’application de ces aspects dans des contextes pratiques

GTI 745: Ces aspects, avec un accent sur les questions de recherche et d’innovation

D’autres cours reliés• GTI 745 «Interfaces utilisateurs avancées»

– Version avancée de GTI 350– Programmation d’interfaces pour le 3D (OpenGL),

visualisation d’informations, interfaces utilisateurs pour la musique, algorithmes de reconnaissance de gestes, interfaces multitactiles …

– Exemples d’interfaces expérimentales et novatrices

• MGL 835– Couvrent l’ensemble de GTI 350 + GTI 745,

mais avec plus d’accent sur la recherche

D’autres domaines reliés à l’IHM• Facteurs humains, ergonomie

– Ne se limite pas juste aux interactions avec les ordinateurs ou les machines. Met parfois plus d’accent sur le côté humain, et/ou sur le travail (et des tâches répétitives, en particulier), que dans l’IHM.

– S’intéresse à comprendre les capacités humaines, et à appliquer ce savoir à la conception d’objets, d’outils, de systèmes, de machines, de tâches, de services, et d’environnements destinés à l’usage humain

– Des sous-branches: ergonomie physique, ergonomie cognitive (« engineering psychology »)

– Quelques concepts clés: stress, perception, attention, contrôle moteur, mémoire, charge mental, faire des décisions, les erreurs, …

– A été beaucoup développé, par exemple, pendant la deuxième guerre mondiale pour améliorer les contrôles d’avions et d’autres machines, et aussi pour améliorer la performance des ouvriers dans les usines qui effectuent des tâches répétitives

À retenir!

D’autres domaines reliés à l’IHM (2)• L’informatique• La psychologie• Le génie• L’infographie• Le graphisme (« graphic design »)• L’intelligence artificielle• La linguistique• La sociologie• etc.

• L’IHM est un domaine multidisciplinaire!

Les dimensions de l’utilisabilité ("usability") selon Jakob Nielsen

• L’efficience (« efficiency »): vitesse avec laquelle on peut effectuer les tâches, ou temps moyen pour compléter une tâche.

• La facilité d’apprentissage (« learnability »).• La memorabilité: est-ce qu’on se rappelle facilement comment fonctionne l’interface?• Le taux d’erreurs; et l’impossibilité d’erreurs catastrophiques.• La satisfaction subjective.Il y a souvent des compromis ("tradeoffs") entre ces dimensions. Par exemple, pour rendre une interface

plus efficiente, on a parfois besoin de sacrifier la facilité d'apprentissage (exemple: racourcis clavier vs boutons virtuels) et d'accepter plus d'erreurs (exemple: éliminer des boîtes dialogues pour confirmer des actions). (Dans l'exemple, on pourrait toutefois avoir des boutons virtuels et des racourcis clavier, laissant le choix à l'utilisateur, et ne pas avoir de dialogues pour confirmer mais toujours permettre de faire un "Undo". Autre exemple: un guichet bancaire est optimisé pour lesquels des dimensions ci-dessus?)

À retenir!

D'autres termes à distinguer (ou à peut-être éviter)Convivial•Utilisable / "usable".Efficace•Vitesse avec laquelle on peut effectuer les tâches? Ou bien, permettre de compléter des tâches avec succès?Intuitive•Évident / facile à apprendre. Attention: ce terme est beaucoup abusé.Intuitif ≠ convivial.Flexible•Personalisable / "customizable"? Ou bien, permet d'effectuer plusieurs tâches de plusieurs manières?Fluide•Permet de travailler sans interruptions, en se concentrant sur l'objet de notre tâche? https://fr.wikipedia.org/wiki/Flow_(psychologie) Puissante•?Utile•Permet d'effectuer des tâches pertinentes à l'utilisateur.

Mauvaise nouvelle: la conception et le développement d'interfaces

utilisateurs est difficile

Je n’ai pas de choix!

Qu’est-ce que ça veut dire d’annulerune opération déjà annulée?

Plusieurs autres exemples se retrouvent au“Interface Hall of Shame” http://hallofshame.gp.co.at/

Vu en 2012

Vu en 2013

Vu en 2014

Vu en 2015

Vu en 2015: Windows 10 (la dernière version de Microsoft), sur une Surface Pro 3 (la dernière plateforme matérielle de Microsoft), suite à un update automatique, pris dans une

boucle infinie de redémarrage

Vu en 2015:

“Bulk Rename Utility” (2014) http://www.bulkrenameutility.co.uk

Clippy de Microsoft Office 97-2003

D’autres exemples

• Fonctionnalitées cachées– iPod touch / iPhone: comment faire undo dans

l’application de bloc notes ?• Il faut secouer le dispositif !

• D’autres exemples ?

• Il est facile de mal-concevoir une interface• Même lorsqu’une interface est bien conçue,

les interfaces graphiques modernes laissent encore beaucoup à désirer– La souris et le clavier sont des instruments

d’expression très limités– L’organisation hiérarchique des fichiers n’est pas

nécessairement idéale– Etc… (autres problèmes / défis ?)

Source: Michel Beaudouin-Lafon, Designing Interaction, not Interfaces, Proceedings of AVI 2004, http://doi.acm.org/10.1145/989863.989865

Le manque de progrès dans l'interface utilisateur del’ordinateur personnel

30 ans de Photoshop: pourquoi n'y a t'il pas eu plus de changements ?

https://twitter.com/lukew/status/837008859831009280

Les parties d'un humain nécessaires pour la plupart des interfaces utilisateurs (illustration de Bill Buxton)

C'est même pire que montre cette illustration: la plupart des écrans sont monoscopiques, demandant juste un oeil !

Pourquoi est-il difficile de bien concevoir des interfaces?

• L’IHM est une « science douce »• L’humain est difficile à modéliser• L’inertie des utilisateurs/du marché: les gens sont déjà

« satisfaits » et habitués avec leurs interfaces actuelles• Problèmes de compatibilité entre différents plateformes• Brevets• Il y a une grande variété d’utilisateurs, de tâches,

d’applications, et plusieurs dispositifs et systèmes d'exploitation

Les utilisateurs atypiquesLes interfaces supposent souvent que leur utilisateur• a deux mains• peut voir et entendre• n'est pas daltonien• et a un bon contrôle moteur de ses mains• est intelligent et débrouillard• n'a pas peur des ordinateurs• peut lire et comprendre l’anglais• est familier avec les conventions des « GUIs » typiques• a la motivation d’apprendre à utiliser l’interface• a le temps nécessaire de résoudre des problèmes lorsqu’ils arriventQuel pourcentage de la population a toutes ces caractéristiques?

Bonne nouvelle: il existe des processus de conception

systématiques

Principes de base• Ne supposez pas que vous savez ce qui est de

mieux pour l’utilisateur• Ne supposez pas que vous savez ce que sont les

buts, les tâches, et les habitudes de l’utilisateur• Il faut rencontrer, discuter avec, et observer de

vrais utilisateurs pour comprendre leurs besoins

• Le temps de l’utilisateur est plus précieux que le temps du programmeur ou de l’ordinateur

Jef Raskin (décédé 2005)du projet Macintosh chez Apple

• "As far as the customer is concerned, the interface is the product."

• "Users do not care about what is inside the box, as long as the box does what they need done."

• "The system should treat all user input as sacred."• "A computer shall not harm your work or, through inaction,

allow your work to come to harm."

• "A computer shall not waste your time or require you to do more work than is strictly necessary."

• "An interface is humane if it is responsive to human needs and considerate of human frailties."

Le coût de changer laspécification d’une interface

temps

coût

Analyse des tâches, analyse des besoins des

utilisateurs.Entrevues et

observations des utilisateurs.

Analyse concurrentielle des

autres produits.

Recherche de directives

("guidelines", conseils) publiées pour le domaine

ciblé.

Évaluation

Prototypes crées avec des outils

logiciels (Balsamiq, Axure, JustInMind,

Proto.io, etc.) Programmation

Prototypes en papier, avec

participation des utilisateurs, et

plusieurs prototypes en

parallèle.

Croquis pour générer plusieurs

idées en parallèle. Solicitation de réactions des collègues + utilisateurs.

Évaluation Évaluation

Processus de conception d'interfaces (selon McGuffin)

Bonne nouvelle: il y a des tendances technologiques

intéressantes(voir diapos sur les tendances)

Bonne nouvelle: on peut prendre un recul, essayer d'oublier nos

utilisations habituelles de l'informatique, et repenser au

potential énorme des interfaces utilisateurs ...

• “The power of the unaided mind is highly overrated. Without external aids, memory, thought, and reasoning are all constrained. But human intelligence is highly flexible and adaptive, superb at inventing procedures and objects that overcome its own limits. The real powers come from devising external aids that enhance cognitive abilities. How have we increased memory, thought, and reasoning? By the invention of external aids: It is things that make us smart.” - Donald Norman, Things that Make Us Smart

• "What a computer is to me is, it's the most remarkable tool that we've ever come up with, and it's the equivalent of a bicycle for our minds."-- Steve Jobs

• "I think it's fair to say that personal computers have become the most empowering tool we've ever created. They're tools of communication, they're tools of creativity, and they can be shaped by their user." -- Bill Gates

• "Computing is not about computers anymore. It is about living." -- Nicholas Negroponte, 1980

• "The protean nature of the computer is such that it can act like a machine or like a language to be shaped and exploited. It is a medium that can dynamically simulate the details of any other medium, including media that cannot exist physically. It is not a tool, although it can act like many tools. It is the first metamedium, and as such it has degrees of freedom for representation and expression never before encountered and as yet barely investigated." -- Alan Kay, 1984

• "Computation [...] is the only medium where the material and the process for shaping the material coexist [...] The only other medium where a similar phenomenon exists is pure thought." -- John Maeda, 1999

• "The real challenge is to discover the intrinsic properties of the new medium and to find out how the [brush] stroke you 'draw' via computation is one you could never draw, or even imagine, without computation." -- John Maeda, 1999

Bonne nouvelle: il existe des façons de s'inspirer et d'identifier

des nouvelles opportunités

Rôles d'une interface utilisateur

Bill Verplank utilise les croquis pour expliquer et explorer des concepts autour des interfaces utilisateurs. On peut s'inspirer en voyant une interface comme ...•Outil•Medium•Assistant intelligent•Véhicule•Vêtement•Écologie (?)http://ciid.dk/open-lecture-bill-verplank-nicolas-zambetti/ http://www.designinginteractions.com/interviews/BillVerplank

Conseils tirés du document “Be A Star: Finding Important Problems” du prof. Larry Smith de l’U de Waterloo

https://uwaterloo.ca/economics/sites/ca.economics/files/uploads/files/larry_smith_-_be_a_star_february_2014.pdf ;https://www.ted.com/talks/larry_smith_why_you_will_fail_to_have_a_great_career

• "Competitive pressures continue to rise [...] and technology is rapidly changing job requirements"

• "Exceptional employees have more control over the type of work they do, the conditions under which they do it and the reward they earn for it."

• "A great career or venture usually is more difficult to develop. [...] It involves a large up-front investment of your time, focus and energy. The pay-off is a rewarding career with autonomy, or a venture of scale and significance."

• "Today’s entrepreneurs need to: 1. Find important problems 2. Find or develop solutions to important problems"

• "Exceptional employees find and solve important problems."• "Find MANY important problems so you can choose the one

best suited to you."• "A killer problem offers a must-have solution, not an OK-to-

have solution. A killer problem is mission critical, where a failure severely affects or imperils the organization or individual customer or user. You are not looking for a pain point; you are looking for an excruciating pain point. The customer should think the problem needs to be solved urgently."

• "How do you find a large number of important problems? Develop an information strategy to conduct ... searches"; notez à quelque part les problèmes que vous observez ou que vous rencontrez

Conseils tirés du document “Be A Star: Finding Important Problems” du prof. Larry Smith de l’U de Waterloo

Rob

ert W

. Luc

ky, "

Engi

neer

ing

Achi

evem

ents

: The

Two

Lis

ts",

IEEE

Spe

ctru

m, 2

009,

ht

tp://

spec

trum

.ieee

.org

/at-w

ork/

inno

vatio

n/en

gine

erin

g-ac

hiev

emen

ts-th

e-tw

o-lis

ts

• “The best way to predict the future is to invent it” – Alan Kay, 1971, pionnier de la programmation orientée objet et des fenêtres chevauchantes

Sites à peut-être surveiller

• https://www.kickstarter.com/• https://www.indiegogo.com/ • engadget.com, theverge.com, cnet.com,

motherboard.vice.com, wired.com, popular science, popular mechanics, gawker.com, gizmodo, pinterest, …

• http://www.japantrendshop.com/• D’autres … ?

GTI 350 Conception et évaluation des interfaces utilisateurs

Prof. Michael McGuffin http://www.michaelmcguffin.com/ets/gti350/

Parenthèse: l'érgonomie physique

Quelques remarques concernant l’ergonomie physique et les postes de travail

http://www.versatables.com/discover/wp-content/uploads/2011/09/ergonomics-keyboard-hands.jpg

Quelques remarques concernant l’ergonomie physique et les postes de travail

http://www.microsoft.com/hardware/en-us/support/healthy-computing-guide

http://i.ytimg.com/vi/kLohCGBsMLg/0.jpg

Non !Oui !

Non, non, non !

http://www.3m.com/product/images/Wrist-Rest-300.jpg

http://lidertronica.com/catalog/images/40213.jpg

http://www.cclonline.com/images/MediaPool/99LoxxSGxwyRqZlC6JngNw-3d-3d_BigProductImage.jpg

Conseils• Les mains devraient flotter au dessus du clavier comme les mains d’un pianiste• Ne pas s’appuyer sur les poignets ni sur les avant-bras• Avoir les avant-bras horizontaux et les poignets droits• Ne pas s'accroupir vers l’avant; essayez d’avoir le dos droit• Avoir l’écran devant nous (ne pas avoir la tête tournée à droit ni à gauche),

au même niveau (ne pas avoir la tête penchée vers le bas ni vers le haut)• Prendre des pauses régulièrement pour s’étirer et pour boire de l’eau• Faire des exercises (au moins du cardio, mais de la musculation serait encore mieux)

du haut du corps pour renforcer son ventre, épaules, bras, dos, et poitrine• Apprendre à utiliser votre clavier sans le regarder, pour éviter de la fatique. Peut-être

utiliser un clavier bépo, Dvorak, et/ou un clavier mécanique comme Das (http://www.daskeyboard.com/ ) ou WASD ( http://www.wasdkeyboards.com/ ) ou un clavier ergonomique qui est courbé ou brisé en deux morceux. Si vous devez utiliser plusieurs claviers, essayer d’avoir le même layout partout pour éviter de la confusion.

• Achetez un plateau de clavier et un ou des bras de support pour votre / vos écrans• Faites l’investissement pour avoir des bons outils qui sont faciles d’accès, que ce soit votre

laptop, clavier, souris, écran, papier, crayons, etc. Tout ce qui vous nuit dans votre travail peut perturber votre confiance en vous même. Un violon professionnel haut de gamme peut coûter des dizaines de milliers de dollars. Vous êtes des artistes !

• Das Keyboard http://www.daskeyboard.com/

• WASD Keyboards http://www.wasdkeyboards.com/ (permet de personnaliser les couleurs et les images sur les “keycaps”)

• Claviers mécaniques avecinterrupteurs “Cherry MX” bleus, bruns, noirs ou rouges

Pour les passionnés de claviers …

http

://w

ww

.key

boar

dco.

com

/blo

g/in

dex.

php/

2012

/12/

an-in

trodu

ctio

n-to

-che

rry-

mx-

mec

hani

cal-s

witc

hes/

Dispositifs ergonomiques

Clavier Ergodoxhttp://img-2013.tapatalk.com/d/13/06/08/qajuju8a.jpg

Clavier Kinesishttp://www.darkcoding.net/files/2013/12/kb_adv-blk720x471.jpg

3M ergonomic mousehttp://www.fentek-ind.com/images/l3m_mouse.jpg

Souris “minicute”

Plateau de clavier (“keyboard tray”)

http://www.ergonomicssimplified.com/products/images/keyboard-trays/budget-keyboard-tray1.jpg

Les meilleurs modèles ont 3 degrés de liberté (translation avant-arrière, translation haut-bas, rotation “tangage”)

Quelques remarques concernant l’ergonomie physique et les postes de travail

Bras “LX Dual” de http://www.ergotron.com

Avec bras “inversés” (bureau du Prof. McGuffin)

Quelques remarques concernant l’ergonomie physique et les postes de travail

http://upload.wikimedia.org/wikipedia/commons/f/f2/Donald_H._Rumsfeld_works_at_a_stand-up_desk.jpg

Donald Rumsfeld, ancien secrétaire à la Défense des États-Unis

Dans un mémorandum se référant à la technique du maintien en position debout prolongé (maximum 4 heures) comme technique d’interrogatoire des prisonniers à Guantanamo, Rumsfeld a écrit dans une marge :« Je reste debout entre huit et dix heures par jour. Pourquoi le maintien en position debout est-il limité à quatre heures ? »

Quelques remarques concernant l’ergonomie physique et les postes de travail

http://www.wired.com/images_blogs/wiredscience/2012/09/mf-standing-deskb_f.jpg

https://s3.amazonaws.com/pix-media/forrest+standing+desk.JPG

Varidesk.com : bureau convertible

• Modèle à ≈450$ (2015)

Quelques remarques concernant l’ergonomie physique et les postes de travail

http://thehumansolutionblog.com/wp-content/uploads/2012/10/TreadDesk.jpg

Quelques remarques concernant l’ergonomie physique et les postes de travail

http://cloud.rebeldesk.com/images/opt/home-standing-desk.jpg http://photos.pcpro.co.uk/images/front_picture_library_PC_Pro/dir_384/it_photo_192409_52.jpg

Non ! Non !

Quelques remarques concernant l’ergonomie physique et les postes de travail

Configuration temporaire du bureau du Prof. McGuffin, avant une grosse date limite

Poubelle inversée

Boîtes de cartonPlanche de bois

Comment vivre plus longtemps• Faire de l’exercise vigoureux (assez pour suer)

au moins 30 minutes × 3 fois par semaine. Le meilleur âge pour prendre de la masse musculaire est autour de 18-25 ans (pour les hommes).

• Dormir suffisamment• Manger beaucoup de fruits et de légumes• Ne pas gagner trop de poids. Astuce: boire beaucoup d’eau. Conseils: Calculer votre

“indice de masse corporelle” (en anglais: BMI) et surveillez votre poids régulièrement. Il est très difficile de perdre un excès de poids une fois qu’on l’a pris. Calculez votre budget calorique quotidien, et passez une journée à chercher le nombre de calories de tout ce que vous mangez cette journée là. Exemples: une tomate ≈ 20 calories;un gros sac de chips ≈ 1000 calories; un livre de gras ≈ 3500 calories;un jeune adulte consomme ≈ 2000-2500 calories par jour

• Ne pas fumer. Il est très, très difficile d’arrêter une foisqu’on a commencé.

• Porter votre ceinture de sécurité et votre casque de protection• Avoir des bonnes relations avec votre famille et vos amis.

Sinon, évitez les et changer d’amis