580 likes | 682 Views
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?.
E N D
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? • 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)
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.
Les types d’interfaces API : Application programminginterface IHM : Interface homme-machine
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).
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.
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.
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.
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, …
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
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
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.
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.
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.
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.
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
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.
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.
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…
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.
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.
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.
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
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)
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.
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
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)
Prise en compte de l’utilisateur • Familiarité : Similarité avec les objets de tous les jours • Métaphore : Machine à écrire, corbeille, …
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?
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
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
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
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
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
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!
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
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…
Styles d’interactions : Exemples Windows, Icons, Mouse, Pointers
Niveau d’expertise occasionnel novice expert Langages de commande Sélectiondemenus Manipulationdirecte(WIMP) Formulaires
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
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
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