1 / 75

GTI 350 – Conception et évaluation des interfaces utilisateurs

GTI 350 – Conception et évaluation des interfaces utilisateurs. Prof. Michael McGuffin. Quelles sont les tendences chez les interfaces utilisateurs ?. Dans un taxi à Montréal en 2013: iPhone, appareil GPS, et tablette Android. Stylets pour le iPad. Adonit Jot Script

yagil
Download Presentation

GTI 350 – Conception et évaluation des interfaces utilisateurs

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. GTI 350 – Conception et évaluation des interfaces utilisateurs Prof. Michael McGuffin

  2. Quelles sont les tendenceschez les interfaces utilisateurs ?

  3. Dans un taxi à Montréal en 2013: iPhone, appareil GPS, et tablette Android.

  4. Stylets pour le iPad • Adonit Jot Script • Adobe Project Mighty stylus + Napoleon ruler • Pinceaux “Sensu”et “Nomad” Voir aussi le “nota” http://hex3.co/products/nota http://www.theverge.com/2013/5/6/4305712/adobe-announces-first-hardware-the-project-mighty-smart-stylus

  5. Samsung Galaxy Note Galaxy Note 3 Galaxy Note 10.1 2014 Edition(écran 10.1 pouces, 2560×1600 pixels)

  6. MicrosoftSurface Pro 2

  7. Microsoft Surface Pro 3(écran 12 pouces, 2160×1440)

  8. Tablette “Cintiq Companion” de WacomÉcran 13 pouces; Windows 8 ou Android

  9. Wacom Cintiq 24HD touchmultitactile (10 doigts) + stylet (pression, angles, distance de survol)≈3700$ en 2013

  10. Leap Motion http://i.i.cbsi.com/cnwk.1d/i/tim2/2013/07/18/LeapMotionController_35823002_09_620x433.jpg Iris Classon http://i2.cdn.turner.com/cnn/dam/assets/130722023535-leap-motion-controller-setup-story-top.jpg

  11. zSpaceAffichage stéréoscopique, suivi de la tête, et localisation d’un stylet avec 6 DoF; ≈4500$ en 2013

  12. Oculus Rift http://www.oculusvr.com/

  13. PadFone de ASUS

  14. PadFone 2

  15. Neptune PineEntreprise à Montréal

  16. Ubuntu Edge12 M$ “crowdsourcés” en 1 mois http://www.indiegogo.com/projects/ubuntu-edge

  17. Ubuntu Edge12 M$ “crowdsourcés” en 1 mois http://www.indiegogo.com/projects/ubuntu-edge

  18. Ubuntu Edge Leann Ogasawara Ubuntu Kernel Engineering Manager chez Canonical http://www.youtube.com/watch?v=EtNhlVn3ETQ

  19. Écrans courbés Samsung Galaxy Round LG Flex http://arstechnica.com/gadgets/2013/10/bending-it-the-right-way-how-lg-and-samsung-curved-their-phones-differently/

  20. PaperTab : écrans flexibles http://www.youtube.com/watch?v=81iiGWdsJgg

  21. Google Glass

  22. Meta SpaceGlassesLunettes à réalité augmentée; ≈700$ en 2014

  23. Lunettes MetaPro: réalitéaugmentée http://www.youtube.com/watch?v=LuMv29nKo2k https://www.spaceglasses.com/

  24. SpaceTop (Jinha Lee)http://leejinha.com/SpaceTop ; http://vimeo.com/59231624

  25. Quelles sont les tendenceschez les interfaces utilisateurs ?

  26. Tendences • Entrée enrichie (multitactile, stylet, main, corps…), de plus en plus de capteurs (GPS, accéléromètres, caméras de profondeur, …) • Multitactile + stylet: Microsoft Surface Pro, Wacom Cintiq touch et Cintiq Companion, Samsung Galaxy Note, Samsung Series 7, Panasonic Toughpad, Fujitsu Lifebook, ASUS Taichi 21 • Caméras de profondeur: Kinect, Leap Motion • Sortie 3D enrichie (stéréoscopie, suivi de la tête, réalité virtuelle / augmentée): zSpace, Oculus Rift • Mobilité et données synchronisées via le “cloud” • Écrans courbés, flexibles • Résolution d’écrans qui augmente sans cesse

  27. Exemples de résolutions (2014)

  28. Desktop, 2014 Microsoft Windows: 91% Mac OS X: 5% Linux: ~1.5% http://www.netmarketshare.com/operating-system-market-share.aspx?qprid=10&qpct=6&qpcustomb=&qpcustomd=0&qptimeframe=Y

  29. Mobile + Tablettes, 2014 iOS: 52% Android: 33% http://www.netmarketshare.com/operating-system-market-share.aspx?qprid=10&qptimeframe=Y&qpct=6&qpcustomb=&qpcustomd=1

  30. Smartphoneshttp://sourcedigit.com/1913-smartphone-os-global-market-share-data-2014/Smartphoneshttp://sourcedigit.com/1913-smartphone-os-global-market-share-data-2014/

  31. http://www.businessinsider.com/iphone-v-android-market-share-2014-5http://www.businessinsider.com/iphone-v-android-market-share-2014-5

  32. Microsoft Surface http://www.benzinga.com/news/13/09/3937902/microsoft-surface-may-achieve-1-market-share-in-2014-msft (September 24, 2013) http://www.dailyfinance.com/on/microsoft-surface-sales-double-irrelevant-tablet-market/ (January 31, 2014)

  33. 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), …

  34. 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. • NB: 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.

  35. Sujets à l’intérieur de l’IHM 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 • 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

  36. 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, … • MGL 835 • Couvrent l’ensemble de GTI 350 + GTI 745,mais avec plus d’accent sur la recherche

  37. 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ôte 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

  38. D’autres domaines reliés à l’IHM (2) • Informatique • Psychologie • Génie • Infographie • Conception graphique (« Graphic Design ») • Intelligence Artificielle • Linguistique • Sociologie • Etc. • L’IHM est un domaine interdisciplinaire!

  39. Pourquoi apprendre àconcevoir les interfaces? Ne sont-t-ils pas déjà amplementconviviales et intuitives?

  40. Je n’ai pas de choix!

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

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

  43. Vu en 2012 Vu en 2013

  44. Vu en 2014

  45. 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 ?

  46. 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 ?)

  47. Le développement del’ordinateur personnel Source: Michel Beaudouin-Lafon, Designing Interaction, not Interfaces, Proceedings of AVI 2004, http://doi.acm.org/10.1145/989863.989865

  48. 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 de périphériques

More Related