View
41
Download
4
Category
Preview:
DESCRIPTION
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?. - PowerPoint PPT Presentation
Citation preview
Développement d’applications interactives IIISemaine 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
IHM : Interface homme-machineAPI : Application programminginterface
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 des interfaces utilisateurs
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 lotLa 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 lot
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 en ligne de commande
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 graphiqueEn 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 graphiqueLe 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.
Concepts
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)Temps d’attente prévu
Affichage
2 à 6 secondes Icônes d’attente (Sablier, roue, …)
6 à 30 secondes Progress bar
> 30 secondes Progress bar + texte indiquant les tâches
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?
Incohérent Cohérent
Ouvrir / Sauvegarder Ouvrir / Fermer
Précédant / Suite Haut / Bas
Oui / Annule Ok / Annuler
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
Langages de commande complexitéflexibilitérichesse d’expression
complexitéapprentissageerreurs
Sélection de menus structurationapprentissage aiségestion erreurs
lenteurmasquage infopeu flexible
Manipulation directe (WIMP) visuelapprentissage aisérétention apprentissageflexibilitéWYSIWYG
lenteur (relative)pointageambiguïté icônescoûteux en espace
Formulaires saisie donnéesapprentissage aiséprévention erreurs
usage spécifique
Langage naturel Naturalité Imprécisionambiguïté
Windows, Icons, Mouse, Pointers
Niveau d’expertise
Langages de commande
Sélection de menus
Manipulation directe (WIMP)
Formulaires
novice
occasionnel
expert
Publicité
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
Les lignes directrices
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
Lignes directrices : Exemple Android mets l’emphase sur trois points
Flamboyance Beauté de l’application
Simplicité Utilisation simple
Impressionne moi! Beaucoup de caractéristiques
Flamboyance Il faut que cela ait l’air facile Animation bien placée Utilisation de métaphores d’interface Personnalisation Apprentissage des coutumes de
l’utilisateur
Simplicité Garde ça court! Une image vos milles mots Prend l’initiative, mais laisse-moi décider Montre-moi seulement ce que j’ai de besoin
lorsque j’en ai de besoin Je devrais toujours savoir où je suis Ne perds pas mes choses! Interrompes-moi seulement si c’est
important
Impressionne-moi Donne-moi des trucs qui sont pareils
partout Ce n’est pas de ma faute Simplifie les tâches en plusieurs petites Fait les choses complexes pour moi Rend les choses importantes rapides
d’accès
Interface pour tablette Créer une interface intuitive sans
encombre pour le sujet principal Rendre les outils disponibles sans être
totalement visibles Exemple : Barre latérale dans la liste des
contacts d’un système Android Ajouter la possibilité pour l’utilisateur de
masquer ou d’afficher les outils en permanence
Lignes directrices Pour pratiquer l’interface utilisateur,
nous allons développer sous Android Notre plateforme (ou émulateur) sera la
tablette Asus TF300T L’environnement de travail sera Eclipse
Références Interaction Homme-Machine
Jean-Yves Antoine http://www.info.univ-tours.fr/~antoine/IHM
.html
Un peu d’humour ;)
Recommended