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 ;)