1 / 58

Développement d’applications interactives III

Développement d’applications interactives III. Semaine 03 – Interface utilisateur. Plan de leçon. Interface utilisateur : définitions Utilité des interfaces utilisateurs L’histoire des interfaces utilisateurs Les concepts Les lignes directrices Tablette. Qu’est-ce qu’une interface?.

isha
Download Presentation

Développement d’applications interactives III

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

  26. 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.

  27. 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

  28. 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)

  29. 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.

  30. Concepts

  31. 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

  32. 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)

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

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

  35. 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

  36. 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

  37. 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  

  38. 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

  39. 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

  40. 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!

  41. 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

  42. 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…

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

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

  45. Publicité

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

  47. Les lignes directrices

  48. 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

  49. 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

More Related