Développement d’applications interactives III

1. Développement d’applications interactives III Semaine 03 – Interface utilisateur

2. Plan de leçon • Interface utilisateur : définitions • Utilité des interfaces utilisateurs • L’histoire des interfaces utilisateurs • Les concepts • Les lignes directrices • Tablette

3. Qu’est-ce qu’une interface? • Généralité : • Intermédiaire qui échange des informations entre deux domaines différents. • Informatique : • Ensemble des règles et conventions qui permettent l’échange d’informations entre deux systèmes de données. (Larousse)

4. Exemple d’interface • Voiture : Tous les contrôles nécessaires à la conduites du véhicule. • Souris, clavier, écran. • Manuel d’instructions, fichier XML, etc. • Questions : • Donnez quelques exemples d’interfaces. • Donnez quelques exemples d’interfaces utilisateur graphique.

5. Les types d’interfaces API : Application programminginterface IHM : Interface homme-machine

6. Qu’est-ce qu’un interface utilisateur? • Selon les définitions de l’interface, nous pourrions décrire l’interface utilisateur comme suit • Ensemble de moyens avec lesquels une personne (utilisateur) interagit avec une machine, un périphérique, un logiciel ou tout autre outil complexe (système).

7. L’interface utilisateur • L’interface utilisateur fournit des moyens pour : • Entrer des données permettant à l’utilisateur de manipuler un système. • Afficher des données, permettant au système de produire des effets suite à la manipulation de l’utilisateur.

8. Utilité des interfaces utilisateur • L’interface utilisateur permet d’échanger des données entre les humains et les machines. • L'un des buts de la discipline est ainsi de donner des outils et des éléments pour mettre en forme au mieux cet environnement, et ainsi permettre à l'homme d'interagir plus agréablement ou plus efficacement avec la machine.

9. Outils d’une interface utilisateur • Pour facilité la communication, on utilise différents éléments : • Souris, clavier, etc. • Écran, imprimante, etc. • Question : Nommez d’autres éléments de communication.

10. Histoire des interfaces utilisateurs

11. Histoire de l’interface utilisateur • L’histoire de l’interface utilisateur peut être divisé en plusieurs parties : • Interface en lot (Batch interface), 1945-1968 • Interface utilisateur en commande de ligne (Command line interface), 1969-1980 • Interface utilisateur graphique (GUI), 1980 - présent • Tangible interfaces / Ubicomp (français?) • Interface utilisateur tactile (TUI) • Téléphone intelligent, tablette, … • Interface utilisateur auditif, gestuel, …

12. Interface en lot • Jadis, les ordinateurs étaient très rare et dispendieux • Les plus grosses machines traitaient moins d’information que les micro-ondes d’aujourd’hui • L’interfaçage était considéré comme du surplus, on devait utiliser la puissance du processeur de façon optimale • Les interfaces étaient rudimentaire

13. Interface en lot • Les utilisateurs devaient s’accommoder à la machine au lieu du contraire • Ils se programmaient à l’aide de cartes perforées • C’était un des seuls moyens de communication entre l’utilisateur et l’ordinateur

14. Interface en lot La méthode de fonctionnement était assez complexe. • Le programmeur devait coder sur des cartes vierges à l’aide d’une perforeuse spécialisée (Style machine à écrire). La programmation était extrêmement stricte. • Ensuite, il devait placer son lot de cartes dans une file d’attente et attendre que l’opérateur place les cartes dans une machine spécialisée qui traitait les cartes une à la fois. • L’attente pouvait durer des jours et si le programmeur était chanceux quelques heures.

15. Interface en lot

16. Interface en ligne de commande (CLI) • La ligne de commande fut une très grande évolution dans le domaine de l’informatique. • En plus d’économiser du temps, on économisait de l’argent, car le papier était moins nécessaire. • Au lieu de prendre des jours à compiler un programme, il ne fallait que quelques secondes. • De plus, la programmation était modifiable au fil du développement.

17. Interface en ligne de commande (CLI) • Le CLI permit d’interagir directement avec la machine. • Ces interfaces avaient encore une lacune pour les utilisateurs, c’était l’apprentissage de syntaxes spécialisés complexes pour ce dernier.

18. Interface en ligne de commande

19. Interface utilisateur graphique • L’interface utilisateur graphique fit son apparition lors d’une démonstration en décembre 1968, mais dû au coût prohibitif des machines à cette époque, les GUI n’emmenait pas de réels intérêts pour les clients. • En 1972, Pong fit son apparition dans les arcades et en 1975, une version maison fut introduite. Ce fut un des premiers interfaces utilisateurs grand public.

20. Interface utilisateur graphique • La production des premiers interfaces graphiques « grand public » a dû attendre que le prix des circuits imprimés diminue. • Un autre problème des premiers interfaces était l’absence d’un dispositif adapté pour utiliser ces nouveaux interfaces. • Question: Quel était ce dispositif? La souris: Inventé par un certain Engelbart en 1968.PS: Il est décédé en 2013

21. Interface utilisateur graphique • En 1973, les chercheurs chez PARC se sont inspirés d’une présentation de « Enghelbart » pour développer une machine (Alto) qui avait un affichage graphique et une souris.

22. Interface utilisateur graphique • L’Alto possédait la plupart des contrôles utilisés aujourd’hui : Icônes, fenêtres, barres de défilement, boutons, etc. • Le principal élément visuel absent était la liste déroulante qui a été introduite par Apple avec son Lisa en 1979. • Un autre aspect visuel manquant était la couleur.

23. Interface utilisateur graphique • L’interface ressemblait plus à un dessin « etch-a-sketch » d’une interface moderne. • Après réflexion, c’est un peu désolant de voir que les seules choses que l’on a développé pour les interfaces utilisateur graphique depuis 1973, ne sont que des bonbons pour les yeux…

24. Interface utilisateur graphique • Les ordinateurs personnels possédant un GUI fit leur début en 1981 • 1981 : Xerox sort le Star qui fut un échec commercial, car il était beaucoup trop lent, trop faible et trop cher • 1982, Steve Job « patente » sont Apple lle • IBM lance son PC avec un processeur 8088.

25. Interface utilisateur graphique • Le grand gagnant de l’époque fut Apple, car sa machine possédait une interface utilisateur convivial et était « abordable » pour le commun des mortels.

27. Interfaces du futur • Informatique ubiquitaire (omniprésente) • Vision de ce qui est petit, peu coûteux, dispositifs de traitement réseau, intégrés et distribués dans toute l’étendue de la vie quotidienne. • Exemple domestique : Lorsque l’on entre dans la maison les capteurs biométriques indiquent au serveur qui est entré et ce dernier ajuste l’environnement ambiante selon la personne qui est entrée.

28. Interfaces tactiles • Interface utilisateur tactile : • Déjà implanté depuis plusieurs années, mais qui, depuis l’avènement iPhone, connaît une certaine explosion en terme de développement. • Interface multi-tactile à 2$. Ici

29. Interfaces du futur • Gestuel • Interface déjà existant avec l’avènement de la Wii™ et Kinect™. • Porté à augmenter en popularité • Sonore • Siri (Apple) • S Voice (Samsung)

30. Conclusion sur l’historiques • Les interfaces utilisateurs modernes se basent sur l’histoire, i.e. ce que les utilisateurs aiment ou n’aiment pas. • Le meilleur des logiciels est voué à l’échec si son IHM est mal conçu.

31. Concepts

32. Prise en compte de l’utilisateur • Utilisabilité d’un logiciel interactif • Apprenabilité(learnability) : Facilité qu’un utilisateur a pour prendre en main un logiciel • Flexibilité : Capacité du système à offrir plusieurs modes d’utilisation et à s’adapter • Robustesse : Niveau de satisfaction des tâches permises par le système • Fiabilité + Satifaction • Expérience : L’émotion qu’un utilisateur a lors de l’utilisation d’un produit, système ou service

33. Prise en compte de l’utilisateur • Causalité : Facilité de prédire le comportement d’une action à l’aide de l’historique (Interpolation des acquis) • Observabilité : Facilité de visualiser les effets d’un action (Feedback visuel)

34. Prise en compte de l’utilisateur • Familiarité : Similarité avec les objets de tous les jours • Métaphore : Machine à écrire, corbeille, …

35. Facteur de qualité essentiel • Consistance du logiciel • Toujours avoir un comportement homogène et cohérent lors de l’utilisation du système • Quel est le meilleur cas?

36. Consistance • Généricité : Facilité de généralisation d’expériences particulières avec le système à d’autres fonctionnalités ou d’autres logiciels • Renforce le sentiment de consistance

37. Standardisation et consistance • Certaines interfaces sont devenus des standards de facto pour l’utilisateur et participe à la généricité d’une application • Intégrer ces standard dans la conception du logiciel • Assurer la consistance entre les versions du logiciel • Conception attentive des fonctionnalités différentes

38. Prendre en compte la diversité des utilisateurs • C’est un facteur essentiel • Un logiciel s’adresse souvent à plusieurs communautés d’utilisateurs différentes • Différence entre les différentes cultures  

39. Niveau d’expertise • Novice et première utilisation • Anxieux, à rassurer pour facilité l’apprentissage et éviter les rejets • Limiter le nombre d’actions et de concepts • Feedback d’information • Messages d’erreur informatifs • Manuel d’utilisateur intuitif, didacticiel • Aide contextuelle

40. Niveau d’expertise • Utilisateur occasionnel • Connaissance globale du système mais a de la difficulté à se rappeler la position des différentes fonctionnalités • Consistance de l’interface • Prévention des erreurs • Utilisateur-explorateur • Aide en ligne

41. Expert • Excellente connaissance du domaine de la tâche, du système et de son interface • Recherche avant tout l’efficacité et la rapidité • Raccourcis clavier • Commande en ligne • Création de macros Office 2013… N’affiche plusles raccourcis!

42. Qualité d’un logiciel : flexibilité • Adaptation • Adaptabilité : Paramétrisation par l’utilisateur • Adaptativité : Modification initiée par le système Le système s’adapteavec l’utilisation

43. Style d’interaction • Plusieurs styles d’interaction envisageable pour une tâche donnée • Langage de commande • Langages de requête et questions / réponses • Menus • Manipulation directe: interfaces WIMP • Formulaires de saisie • Interfaces tactiles • Langage naturel (écrit, parole) • Interfaces 3D, gestuelles, réalité augmentée…

44. Styles d’interactions : Exemples Windows, Icons, Mouse, Pointers

45. Niveau d’expertise occasionnel novice expert Langages de commande Sélectiondemenus Manipulationdirecte(WIMP) Formulaires

46. Publicité

47. La publicité sur le web • Avec la démocratisation de l’internet, plusieurs d’études ont été effectuées pour trouver le meilleur emplacement pour de la publicité. Exemple • D’ordre général, nous plaçons la publicité dans une zone qui ne dérangera pas le parcours du contenu • À droite d’une page ou encore en bas • Certain site sans scrupule place de la publicité directement dans la zone de lecture • Voir ce lien

48. Les lignes directrices

49. Lignes directrices (guidelines) • Les lignes directrices sont les normes établies par les organismes fournisseurs de système • Ex : Microsoft, Android, Apple • Ces guides permettent aux utilisateurs d’identifier un style d’interface au système • Lien vers plusieurs compagnies qui ont établies leur propre ligne

50. Lignes directrices • Chaque organisme possède son image • De plus en plus, nous croisons le terme User Experience (UX) • Ainsi l’ergonomie d’une application est de plus en plus axée sur le retour et le sentiment des utilisateurs • Les grosses firmes possèdent pour la majorité une équipe d’ergonomes et qui étudie cet aspect des applications