GTI 350 Conception et valuation des interfaces utilisateurs

GTI 350 Conception et évaluation des interfaces utilisateurs Prof. Michael Mc. Guffin http: //www. michaelmcguffin. com/ets/gti 350/

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. ) GTI 350: • Comment réaliser des interfaces L’application de ces aspects dans des – Algorithmes, outils de programmation, contextes pratiques 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 des GTI 745: Ces aspects, techniques d’interaction novatrices avec un accent sur les • Développer des modèles et des questions de recherche théories descriptifs et prédictifs 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 3 D (Unity), visualisation d’informations, 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 À retenir! • 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

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 À retenir! • 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? )

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’annuler une 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 2017: le "autocorrect" sur Mac OS change un nom de médicament pour un autre https: //twitter. com/moyix/status/944740355559317504 enter

Fausse alarme à Hawaï (2018) "In light of the escalating tensions between the U. S. and North Korea, Hawaii has been testing [. . . ] missile-threat preparations since December, conducting monthly tests [. . . ] During a routine test of the state’s emergency and wireless-emergency alert systems, a state employee selected 'missile alert' instead of 'test missile alert' from a drop -down menu in the agency’s alert-system software, then confirmed his incorrect selection with another click. " http: //nymag. com/daily/intelligencer/2018/01/ the-frightening-lessons-from-hawaiis-falsemissile-alert. html "sending [a] second 'false alarm' alert required extraordinary permission, delaying it for 38 minutes. " https: //www. theguardian. com/technology/2018/jan/15/hawaii-missile-false-alarmdesign-user-interface "HI-EMA has already instituted a two-person activation/verification rule for tests as well as actual missile launch notifications. [. . . ] A cancellation command that [. . . ] can be triggered within seconds of an error, has been put in place. " https: //dod. hawaii. gov/hiema/files/2018/01/20180113 -NR-HI-EMA-statement-on-missile-launchfalse-alarm. pdf

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 – i. Pod touch / i. Phone: 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 ? )

Le manque de progrès dans l'interface utilisateur de l’ordinateur personnel Source: Michel Beaudouin. Lafon, Designing Interaction, not Interfaces, Proceedings of AVI 2004, http: //doi. acm. org/10. 1145/ 989863. 989865

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 atypiques Les 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 arrivent Quel pourcentage de la population a toutes 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 la spécification d’une interface coût temps

Processus de conception d'interfaces (selon Mc. Guffin) Analyse des tâches, analyse des besoins des utilisateurs. Entrevues et observations des utilisateurs. Prototypes en papier, avec participation des utilisateurs, et plusieurs prototypes en parallèle. Évaluation Analyse concurrentielle des autres produits. Recherche de directives ("guidelines", conseils) publiées pour le domaine ciblé. Prototypes crées avec des outils logiciels (Balsamiq, Axure, Just. In. Mind, Proto. io, etc. ) Évaluation Croquis pour générer plusieurs idées en parallèle. Solicitation de réactions des collègues + utilisateurs. Programmation Évaluation

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/Bill. Verplank

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"

Conseils tirés du document “Be A Star: Finding Important Problems” du prof. Larry Smith de l’U de Waterloo • "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-tohave 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

Robert W. Lucky, "Engineering Achievements: The Two Lists", IEEE Spectrum, 2009, http: //spectrum. ieee. org/atwork/innovation/engineering-achievements-the-two-lists

• “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 Mc. Guffin http: //www. michaelmcguffin. com/ets/gti 350/

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 Oui ! http: //www. microsoft. com/hardware/enus/support/healthy-computing-guide Non ! http: //i. ytimg. com/vi/k. Loh. CGBs. MLg/0. jpg

http: //www. cclonline. com/images/Media. Pool/99 Loxx. SGxwy. Rq. Zl C 6 Jng. Nw-3 d-3 d_Big. Product. Image. jpg Non, non ! http: //lidertronica. com/catalog/images/40213. jpg http: //www. 3 m. com/product/images/Wrist-Rest-300. 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 avec interrupteurs “Cherry MX” bleus, bruns, noirs ou rouges http: //www. keyboardco. com/blog/index. php/2012/12/an-introduction-to-cherry-mx-mechanical-switches/ Pour les passionnés de claviers …

Dispositifs ergonomiques Clavier Ergodox http: //img-2013. tapatalk. com/d/13/06/08/qajuju 8 a. jpg Clavier Kinesis http: //www. darkcoding. net/files/2013/12/kb_adv-blk 720 x 471. jpg 3 M ergonomic mouse http: //www. fentek-ind. com/images/l 3 m_mouse. jpg

Souris “minicute”

Plateau de clavier (“keyboard tray”) Les meilleurs modèles ont 3 degrés de liberté (translation avant-arrière, translation haut-bas, rotation “tangage”) http: //www. ergonomicssimplified. com/products/images/ keyboard-trays/budget-keyboard-tray 1. jpg

Quelques remarques concernant l’ergonomie physique et les postes de travail Avec bras “inversés” (bureau du Prof. Mc. Guffin) Bras “LX Dual” de http: //www. ergotron. com

Quelques remarques concernant l’ergonomie physique et les postes de travail 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 ? » http: //upload. wikimedia. org/wikipedia/commons/f/f 2/Donald_H. _Rumsf eld_works_at_a_stand-up_desk. jpg

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: //s 3. 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/Tread. Desk. jpg

Quelques remarques concernant l’ergonomie physique et les postes de travail Non ! http: //cloud. rebeldesk. com/images/opt/home-standing-desk. jpg Non ! http: //photos. pcpro. co. uk/images/front_picture_library_ PC_Pro/dir_384/it_photo_192409_52. jpg

Quelques remarques concernant l’ergonomie physique et les postes de travail Poubelle inversée Planche de bois Boîtes de carton Configuration temporaire du bureau du Prof. Mc. Guffin, avant une grosse date limite

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 surtout des 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 à cher 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. ▶ Il est mieux d'être actif en exercise avec un excès de poids, que d'être inactif et maigre. Ne pas fumer. Il est très, très difficile d’arrêter une fois qu’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.

• http: //www. toutpourledos. com