Command line interface

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 programming
interface
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
pour :


utilisateur fournit des moyens
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 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 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
La souris:
adapté pour
utiliser ces nouveaux
interfaces. Inventé par un certain Engelbart en 1968.
PS: Il est décédé en 2013
 Question: Quel était ce dispositif?
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.
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
Qualité d’un logiciel : flexibilité
 Adaptation


Adaptabilité : Paramétrisation par
l’utilisateur
Adaptativité : Modification initiée par le
système
Le système s’adapte
avec 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é
apprentissage
erreurs
Sélection de menus
structuration
apprentissage aisé
gestion erreurs
lenteur
masquage info
peu flexible
Manipulation directe (WIMP)
visuel
apprentissage aisé
rétention apprentissage
flexibilité
WYSIWYG
lenteur (relative)
pointage
ambiguïté icônes
coûteux en espace
Formulaires
saisie données
apprentissage aisé
prévention erreurs
usage spécifique
Langage naturel
Naturalité
Imprécision
ambiguïté
Windows, Icons, Mouse, Pointers
Niveau d’expertise
Langages de
commande
Sélection de menus
Manipulation directe
(WIMP)
Formulaires
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.univtours.fr/~antoine/IHM.html
Un peu d’humour ;)