Upload
others
View
7
Download
0
Embed Size (px)
Citation preview
Benoît JANVIER,ergothérapeute,
conseiller technique
Appréhender lesinterfaces utilisateur (UI)
UE 4.6 S1 - Aides humaines, techniques animalières et mobilité
Utiliser l’outil informatique :
Benoît JANVIER,ergothérapeute,
conseiller technique
« De nos jours, c’est l’individu qui se conformeaux besoins de la technologie.
Il est temps que la technologie se conformeaux besoins de l’individu. »
Par cette déclaration de 1988, Donald Norman cristallise des concepts déjà au cœur des préoccupations d’une poignée de chercheurs en interaction homme-machine et dont les premiers travaux remontent
aux années soixante-dix.
Dès lors, la recherche en interaction homme-machine n’a eu de cesse d’emprunter et de croiser les champs de la psychologie, des sciences cognitives, de l’anthropologie et des arts, pour améliorer l’efficacité et
l’usabilité des systèmes informatiques.
Benoît JANVIER,ergothérapeute,
conseiller technique
Qu’est-ce qu’un système d’exploitation ?
En informatique, un système d'exploitation (souvent appelé OS pour Operating System) est ensemble de programmes qui dirige l'utilisation des capacités d'un
ordinateur par des logiciels applicatifs. Il existe, àce jour, 3 principaux systèmes d’exploitation :
Mac OS 10, Ubuntu (Linux) et Windows
Qu’est-ce qu’une interface utilisateur ?
Un ensemble de programmes du système d'exploitation reçoit les informations envoyées par les logiciels applicatifs, et les place sur une image numérique
qui sera envoyée au matériel par l'intermédiaire d'un pilote. En complément un autre ensemble de
programmes reçoit les manipulations effectuées par l'usager par l'intermédiaire de pilotes puis
les transmettent au logiciel concerné.
Ces deux ensembles créent l'interface homme-machine dite Interface Utilisateur (UI) qui permet à un
usager de dialoguer avec la machine.
Benoît JANVIER,ergothérapeute,
conseiller technique
L’évolution des interfaces utilisateurLa première Interface en Ligne de Commande (CLI) apparaît en 1969.
Un nouveau concept apparaît en 1973 dans les laboratoires de recherches Xerox Parc, combinant une interface graphique avec
l’utilisation d’une souris. C’est Apple qui fera triompher cette interface de nouvelle génération, en 1984, avec le Macintosh :
l’Interface Graphique Utilisateur (GUI)
L’apparition en 2007 de l’iphone d’Apple et la table interactive de MicroSoft vont favoriser l’émergence d’un nouveau concept :
l’Interface Utilisateur Naturelle (NUI)
Benoît JANVIER,ergothérapeute,
conseiller technique
Les Interfaces Graphiques
Utilisateur (GUI)
Benoît JANVIER,ergothérapeute,
conseiller technique
Principes généraux et fondements cognitifs des interfaces graphiques
Les interfaces graphiques sont des opérateurs de sensconçues actuellement autour d’un paradigme WIMP :
Ses concepts fondamentaux :
• Montrer et organiser • Suggérer • Exprimer • Désigner
Organisation du dialogue
Windows
aspect spatial
Icons
aspect symbolique
Menusaspect organisation
des commandes
Action
Pointing device
aspect désignation
Benoît JANVIER,ergothérapeute,
conseiller technique
L’aspect spatial : les fenêtres
Elles organisent géométriquement l'information sur l'écranpour que l'usager puisse la visualiser, la désigner.
Elles ont une valeur temporelle. Concept d’arborescence, de hiérarchie.
> Métaphore de la pile de feuilles impliquant à la fois :• une interaction de sélection (comment faire passer la feuille en surface),
• une stratégie de rangement (ou revient une feuille lorsqu’elle est en surface)
Elles peuvent être fermées, réduites, agrandies (forme iconique).Selon leur taille, un système de défilement apparaît (ascenseur).
Il existe trois types de fenêtres :• fenêtres de navigation• fenêtres applicatives
• fenêtres informelles dites “ boites de dialogue”
Elles ont une valeur nominative (importance du titre de la fenêtre).
Benoît JANVIER,ergothérapeute,
conseiller technique
L’aspect symbolique : l’iconographie
Une icône est une représentation graphique d'une informationqui prend valeur de symbole du fait de son usage conventionnel.
En concentrant l'information sur une surface réduite,l'ensemble de l'icône apparaît sur la fovéa de l'œil
et peut être reconnu plus vite qu'un messagequi imposerait une saccade des yeux.
Par son caractère symbolique une icône est interprétableindépendamment de la langue naturelle.
> iconographie du système> iconographie des fonctions (boutons applicatifs)
Benoît JANVIER,ergothérapeute,
conseiller technique
L’aspect organisation des commandes : les menus
Les menus permettent à l'usager dedesigner les commandes qu'il veut adresser au système.
• Rôle structurant sur le plan cognitif en rapprochantdes commandes voisines.
• Affichage déclenché par une action de l'usager.
• Affichage temporaire, disparaissant dès que l'usager a choisi un item.
• Ils sont regroupés dans une barre en haut de l'écran sur le Macou en haut de la fenêtre principale de l'application sur le PC.
• Ils peuvent apparaître (surgir = pop-up) en n'importe quel endroit
par activation d'un bouton représentant le menu a l'état ferméou d'une interaction, par exemple un clic.
• Nécessité de savoir lire ou d’une bonne mémoire photographique.
Benoît JANVIER,ergothérapeute,
conseiller technique
L’aspect désignation : Pointer
Toutes les interfaces à désignation directe, en particulier WIMP,demandent à l'usager d'indiquer ce qu'il souhaite en le "montrant”.
Pour pointer il faut que soit défini :
• Ce vers quoi l'on pointe, l'entité désignée, sa localisation spatiale
• le moyen de le désigner,le dispositif physique utilisé pour le niveau physique de l'interaction,
• la façon dont s'effectue le retour sémantique :
> avant l’interaction : aspect du pointeur,des interacteurs (case à cocher, slider)
> pendant l’interaction : changement de pointeur,temps de réponse
Benoît JANVIER,ergothérapeute,
conseiller technique
L’aspect désignation : La loi de Fitts (1954)
C’est un modèle du mouvement humain.
Elle prédit le temps mis pour se déplacer rapidement d’un point à une zone cible, en fonction de la distance, de la cible et de sa taille.
Elle permet de modéliser l’acte de pointer à la foisdans le monde réel et virtuel.
Selon la loi, le temps mis pour atteindre une cible est proportionnelà sa distance et inversement proportionnel à sa taille.
Autrement dit, on met plus de temps à cliquer sur un élémentsi celui-ci est loin et petit (compromis “vitesse - précision”).
Benoît JANVIER,ergothérapeute,
conseiller technique
Le paradigme de la métaphore
• matrice disciplinaire, modèle théorique ou courant de pensée• l’image mentale, la symbolique
La métaphore des interfaces à désignation directe est aussi souvent appelée de façon générale la " métaphore du monde réel "
en raison des métaphores qu'elle permet de mettre en œuvre,par exemple :
• la métaphore du bureau,• les métaphores des documents, classeurs, formulaires,
• la métaphore de la poubelle,• la métaphore du copier-coller
• la métaphore du glisser-déposeret bien d’autres...
Ce qui permet de mimer le comportement de l'interfaceinformatique sur celui d'un objet de la vie courante
et donc déjà maîtrisé par l'utilisateur.
Benoît JANVIER,ergothérapeute,
conseiller technique
Métaphore du monde réelet notion d’environnement virtuel
L’ordinateur est un environnement virtuel(à prédominance visuelle)
dans un environnement physique réel (terrestre)
Il est donc lié, directement ou indirectement,aux caractéristiques de tout environnement terrestre
dans sa composante fixe (gravitation) et variable (espace-temps).
Il agit sur ces caractéristiques mais également les faussetant sur le plan fonctionnel (feedback sensori-moteur incohérent)
que psychique (environnement psychotisant).
L’utilisation de l’outil informatique laisse une empreintesur les modes de pensée de ses utilisateurs.
Benoît JANVIER,ergothérapeute,
conseiller technique
Le concept d’arborescence...
Il se structure autour de la métaphore de l’arbre (et de ses ramifications).
Benoît JANVIER,ergothérapeute,
conseiller technique
Les actions répertoriéesdes interfaces graphiques
Benoît JANVIER,ergothérapeute,
conseiller technique
Les actions répertoriées
se divisent en 3 groupes :
Séquences d’actions
Actions en rapport avec les fonctions du clavier
Actions en rapport avec les fonctions du pointeur
Benoît JANVIER,ergothérapeute,
conseiller technique
• Actionner toutes les touches du clavier
• Maintenir une touche enfoncée pendantque l’on actionne une autre touche
(Par exemple, pour écrire les majuscules)
• Faire une triple touche (en même temps)
• Répéter une touche (contrôle successif d’un appui)
• Maintenir une touche enfoncée pendant un délais précis(Par exemple, pour les déplacements du curseur
en utilisant les touches flèches)
Actions en rapport avec les fonctions du clavier
Benoît JANVIER,ergothérapeute,
conseiller technique
• Faire le clic à gauche
• Faire le clic à droite (si pertinent)
• Faire un double-clic à gauche
• Maintenir le clic enfoncé pendant un délai précis
• Couvrir l’étendue de l’écran avec le pointeur
• Suivre un trajet précis avec le pointeur
• Arrêter le pointeur en un endroit précis
• Arrêter le pointeur sur un icône ou la barre supérieure, faire un clic en maintenant le clic enfoncé et déplacer l’icône ou la fenêtre
Actions en rapport avec les fonctions du pointeur
Benoît JANVIER,ergothérapeute,
conseiller technique
• Arrêter le pointeur en un endroit précis et faire un clic
• Arrêter le pointeur en un endroit précis et faire un double-clic
• Glisser et déposer (relâcher le clic) à un endroit précis
• Placer le pointeur à un endroit précis, faire un clic (gauche ou droit),déplacer le pointeur sur un trajet précis, l’arrêter à un endroit précis
et faire à nouveau un clic (gauche ou droit)
• Placer le pointeur à un endroit précis, faire un clic gauche,maintenir le clic enfoncé en suivant un trajet précis
et relâcher le clic à un endroit précis(Par exemple, sélectionner une partie de texte, modifier la taille d’une fenêtre)
• Actions combinant pointeur et touche(s) du clavier(Par exemple, maintenir une touche enfoncée pendant l’action de glisser)
Séquences d’actions
Benoît JANVIER,ergothérapeute,
conseiller technique
• Maîtrise du clic élémentaire (Validation au bon moment)Unité de contrôle élémentaire (Oui Non)
• Maîtrise des déplacements élémentaires du pointeur(axe vertical et horizontal)
• Reconnaissance du clavier simplifié, frappe monodigitale hésitante
• Maîtrise du double-clic,• Maîtrise des déplacements du pointeur
dans les diagonales et les déplacements cursifs,• Contrôle de la totalité de l’espace écran,
• Identification de toutes les touches du clavier,frappe enchaînée avec un ou deux doigts,
• Contrôle de 2 touches combinées,
• Gestion des séquences d’actions combinées (glisser-déposer, maîtrise du clic droit et gauche avec déplacements, menus contextuels...)
• Frappe clavier avec plusieurs doigts,• Contrôle de 3 touches combinées,
• Gestion des objets présents à l’écran,• Maîtrise des menus et de l’iconographie,
• Organisation des documents et applications,
Niveau 1
Niveau 2
Niveau 3
Niveau 4
Les niveaux d’action
L’observation des actions répertoriées permetde préciser le niveau d’action des personnes :
Benoît JANVIER,ergothérapeute,
conseiller technique
Les options d’accessibilité des interfaces graphiques
Benoît JANVIER,ergothérapeute,
conseiller technique
Les systèmes d’exploitation actuels proposent tous des configurationsou paramétrages complémentaires de leur interface utilisateur
afin de répondre à des besoins plus spécifiques.
Ce concept, appelé «options handicapés» dans la première interface graphique utilisateur, a considérablement évolué en intégrant au fur et à
mesure des versions successives de nouvelles fonctionnalités.
Ces outils permettent d’affiner les réglages propres à :
• la perception et la lisibilité de l’interface graphique,
• les actions de pointage et d’accès au clavier.
Ils sont regroupés dans le panneau de configuration pour Windowset dans les préférences système pour Mac OS 10 ou Ubuntu.
Options d’ergonomie(Windows)
Accessibilité(Mac OS 10)
Accessibilité(Ubuntu)
Benoît JANVIER,ergothérapeute,
conseiller technique
Les inconvénientsdes interfaces graphiques WIMP
Les interfaces actuelles sont le résultat d’une standardisationqui, au départ, a joué un rôle positif.
Malheureusement,
• une nouvelle version tous les 6 à 12 mois environ,d’où des problèmes de compatibilité, de coût
• elles favorisent la manipulation indirecte,de plus en plus de menus, de palettes, de barres d’outils
et de boites de dialogue... d’où une charge mentale importante
• elles reposent essentiellement sur :un clavier et une souris pour l’entrée,
et sur un écran pour la sortie.
Benoît JANVIER,ergothérapeute,
conseiller technique
Les Interfaces Utilisateur
Naturelles (NUI)
Benoît JANVIER,ergothérapeute,
conseiller technique
Ces «nouvelles» interfaces sont apparues dans ledomaine public en 2007 sous l’impulsion
de Microsoft (table interactive) et d’Apple (iphone).
Elles reposent sur :
• l’utilisation d’un écran multi-tactile,
• un accéléromètre
• une accessibilité par des gestes et outils du quotidien
• une dimension organisationnelle spatio-temporelle intuitive.
smartphones, tablettes,nintendo wii, sony move, microsoft kinect
Benoît JANVIER,ergothérapeute,
conseiller technique
Le modèle conceptuel des NUI
Le déplacement conceptuel de la notion d’instrument d’interactioncausé par l’abstraction du périphérique d’entrée et sa « ré-in-carnation »
dans le geste inscrivent les interfaces tactiles dans les concepts de l’informatique ubiquitaire, en ce sens où la disparition physique
du périphérique d’entrée contribue à l’ « intégration invisible » des technologies informatiques dans notre environnement.
En s’affranchissant de la contrainte mécanique des périphériquesde saisie, par le glissement de la partie physique de l’instrument
vers la main, les interfaces tactiles multi-points créent des conditions propices à l’émergence de nouvelles interactions.
• L’utilisateur est libre d’interagir directement avec l’outil informatiqueutilisant son corps (toucher, gestes, voix) comme un contrôleur.
• L’utilisateur explore une approche intuitive des fonctionnalitésde la machine, sans aucune connaissance préalable.
• L’utilisateur intègre l’outil dans son/ses environnement(s) usuel(s)en termes d’échange, de partage, de participation sociale
et de rendement d’action (notion d’outils immédiats).
Benoît JANVIER,ergothérapeute,
conseiller technique
La dimension organisationnelle
Ses fondements reposent sur la notion d’espace et de temps.Elles sont indissociables. Dans notre environnement terrestre,
l’une n’existe pas sans l’autre.
Leur perception donne un champ de présence au sens largequi s'étend selon deux dimensions :
la dimension ici - là-bas, et la dimension passé - présent - futur.
La seconde fait comprendre la première,et permet de différencier le temps-action du temps-chronologique.
Benoît JANVIER,ergothérapeute,
conseiller technique
La visibilité (lisibilité) du faire
Il n’est plus obligatoire d’ouvrir un programme (application-programme)pour visualiser (lire) un document.
Le contenu du document, quel qu’il soit, devient son icône.
Les inputs tels que le clavier, l’image gestuelle s’affichent à l’écran.
Benoît JANVIER,ergothérapeute,
conseiller technique
Les principales gestures
Pincer (rétrécir)
Toucher la surface avec 2 doigts puis les rapprocher
Presser
Garder le doigt en contact avec la surface
Diffuser (agrandir)
Toucher la surface avec 2 doigts puis les éloigner
Presser et Tap
Garder le contact avec la surface avec un doigt et toucher brièvement la surface avec le second
Tap Double tap Drag Flick
Pinch Spread Press Press and tap
Press and drag Rotate
OR OR OR
Touch Gesture R E F E R E N C E G U I D EBy Craig Villamor, Dan Willis, and Luke Wroblewski
Last updated April 15, 2010
CORE GESTURES Basic gestures for most touch commands
Press surface with one finger and move second finger over surface without losing contact
Press surface with one finger and briefly touch surface with second finger
Touch surface for extended period of time
Briefly touch surface with fingertip
Rapidly touch surface twice with fingertip
Move fingertip over surface without losing contact
Quickly brush surface with fingertip
Touch surface with two fingers and bring them closer together
Touch surface with two fingers and move them apart
Touch surface with two fingers and move them in a clockwise or counterclockwise direction
Supporting materials for this guide can be found online at: http://www.lukew.com/touch/
This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/
Tap
Toucher brièvement la surface avec le bout du doigt
Double Tap
Toucher rapidement 2 fois la surface avec le bout du doigt
Déplacer
Bouger le bout du doigt sur la surface sans perdre le contact
Glisser (chiquenaude)
Brosser rapidement la surface avec le bout du doigt
Tap Double tap Drag Flick
Pinch Spread Press Press and tap
Press and drag Rotate
OR OR OR
Touch Gesture R E F E R E N C E G U I D EBy Craig Villamor, Dan Willis, and Luke Wroblewski
Last updated April 15, 2010
CORE GESTURES Basic gestures for most touch commands
Press surface with one finger and move second finger over surface without losing contact
Press surface with one finger and briefly touch surface with second finger
Touch surface for extended period of time
Briefly touch surface with fingertip
Rapidly touch surface twice with fingertip
Move fingertip over surface without losing contact
Quickly brush surface with fingertip
Touch surface with two fingers and bring them closer together
Touch surface with two fingers and move them apart
Touch surface with two fingers and move them in a clockwise or counterclockwise direction
Supporting materials for this guide can be found online at: http://www.lukew.com/touch/
This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/
Presser et Déplacer
Garder le contact avec la surface avec un doigt et bouger le second doigt sur la surface sans perdre le contact
Tourner
Toucher la surface avec 2 doigts et les déplacer dans le sens des aiguilles d'une montre ou direction inverse
Tap Double tap Drag Flick
Pinch Spread Press Press and tap
Press and drag Rotate
OR OR OR
Touch Gesture R E F E R E N C E G U I D EBy Craig Villamor, Dan Willis, and Luke Wroblewski
Last updated April 15, 2010
CORE GESTURES Basic gestures for most touch commands
Press surface with one finger and move second finger over surface without losing contact
Press surface with one finger and briefly touch surface with second finger
Touch surface for extended period of time
Briefly touch surface with fingertip
Rapidly touch surface twice with fingertip
Move fingertip over surface without losing contact
Quickly brush surface with fingertip
Touch surface with two fingers and bring them closer together
Touch surface with two fingers and move them apart
Touch surface with two fingers and move them in a clockwise or counterclockwise direction
Supporting materials for this guide can be found online at: http://www.lukew.com/touch/
This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/
Tap Double tap Drag Flick
Pinch Spread Press Press and tap
Press and drag Rotate
OR OR OR
Touch Gesture R E F E R E N C E G U I D EBy Craig Villamor, Dan Willis, and Luke Wroblewski
Last updated April 15, 2010
CORE GESTURES Basic gestures for most touch commands
Press surface with one finger and move second finger over surface without losing contact
Press surface with one finger and briefly touch surface with second finger
Touch surface for extended period of time
Briefly touch surface with fingertip
Rapidly touch surface twice with fingertip
Move fingertip over surface without losing contact
Quickly brush surface with fingertip
Touch surface with two fingers and bring them closer together
Touch surface with two fingers and move them apart
Touch surface with two fingers and move them in a clockwise or counterclockwise direction
Supporting materials for this guide can be found online at: http://www.lukew.com/touch/
This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/
Tap Double tap Drag Flick
Pinch Spread Press Press and tap
Press and drag Rotate
OR OR OR
Touch Gesture R E F E R E N C E G U I D EBy Craig Villamor, Dan Willis, and Luke Wroblewski
Last updated April 15, 2010
CORE GESTURES Basic gestures for most touch commands
Press surface with one finger and move second finger over surface without losing contact
Press surface with one finger and briefly touch surface with second finger
Touch surface for extended period of time
Briefly touch surface with fingertip
Rapidly touch surface twice with fingertip
Move fingertip over surface without losing contact
Quickly brush surface with fingertip
Touch surface with two fingers and bring them closer together
Touch surface with two fingers and move them apart
Touch surface with two fingers and move them in a clockwise or counterclockwise direction
Supporting materials for this guide can be found online at: http://www.lukew.com/touch/
This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/
Tap Double tap Drag Flick
Pinch Spread Press Press and tap
Press and drag Rotate
OR OR OR
Touch Gesture R E F E R E N C E G U I D EBy Craig Villamor, Dan Willis, and Luke Wroblewski
Last updated April 15, 2010
CORE GESTURES Basic gestures for most touch commands
Press surface with one finger and move second finger over surface without losing contact
Press surface with one finger and briefly touch surface with second finger
Touch surface for extended period of time
Briefly touch surface with fingertip
Rapidly touch surface twice with fingertip
Move fingertip over surface without losing contact
Quickly brush surface with fingertip
Touch surface with two fingers and bring them closer together
Touch surface with two fingers and move them apart
Touch surface with two fingers and move them in a clockwise or counterclockwise direction
Supporting materials for this guide can be found online at: http://www.lukew.com/touch/
This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/
Tap Double tap Drag Flick
Pinch Spread Press Press and tap
Press and drag Rotate
OR OR OR
Touch Gesture R E F E R E N C E G U I D EBy Craig Villamor, Dan Willis, and Luke Wroblewski
Last updated April 15, 2010
CORE GESTURES Basic gestures for most touch commands
Press surface with one finger and move second finger over surface without losing contact
Press surface with one finger and briefly touch surface with second finger
Touch surface for extended period of time
Briefly touch surface with fingertip
Rapidly touch surface twice with fingertip
Move fingertip over surface without losing contact
Quickly brush surface with fingertip
Touch surface with two fingers and bring them closer together
Touch surface with two fingers and move them apart
Touch surface with two fingers and move them in a clockwise or counterclockwise direction
Supporting materials for this guide can be found online at: http://www.lukew.com/touch/
This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/
ou ou ou
Benoît JANVIER,ergothérapeute,
conseiller technique
En conclusion, le modèle conceptuelplace l’utilisateur dans une démarche
d’action(s) concrète(s).
• La compréhension s’en trouve considérablement facilitée comparativement aux interfaces graphiques utilisateurs et à ses
mécanismes de métaphores nécessitant une capacité d’abstraction.
• L’exécution et la planification motrice sont facilitéesnotamment pour les personnes présentant une difficulté
d’interprétation des données somatosensorielles.
• L’intégration de l’outil, dans l’environnement etsur le plan psychosocial, est facilité.
Benoît JANVIER,ergothérapeute,
conseiller technique
Les questionnements actuels
autour des Interfaces Utilisateurs Naturelles
• En quoi les gestes déterminent-ils les modalitésde couplage avec un système ?
• Dans quelle mesure les gestures peuvent êtrequalifiées de «naturelles» ?
• Quelles sont les limites de l’imitation du réel etdu réalisme des interactions de manipulation ?
• Dans quelle mesure les caractères de visibilité et de feedback améliorent-ils la simplicité de ces interfaces ?
autour de l’implantation dans l’environnement
• Dans quelle mesure peut-on travailler avec une NUI ?• Sommes-nous prêt à accepter sa transparence technologique ?