Apprehender interfaces utilisateur (UI)mapage.noos.fr/janvier.benoit/Site/Infos_files/Apprehender...

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 :



« 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.



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.



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)



Les Interfaces Graphiques

Utilisateur (GUI)



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



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



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)



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.



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



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”).



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.



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.



Le concept d’arborescence...

Il se structure autour de la métaphore de l’arbre (et de ses ramifications).



Les actions répertoriéesdes interfaces graphiques



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



• 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



• 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



• 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



• 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 :



Les options d’accessibilité des interfaces graphiques



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)



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.



Les Interfaces Utilisateur

Naturelles (NUI)



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



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



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.



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.



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




OR OR OR
















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




OR OR OR



















OR OR OR



















OR OR OR



















OR OR OR



















OR OR OR
















ou ou ou



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é.



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 ?

Apprehender interfaces utilisateur (UI)mapage.noos.fr/janvier.benoit/Site/Infos_files/Apprehender...

Documents

Transcript of Apprehender interfaces utilisateur (UI)mapage.noos.fr/janvier.benoit/Site/Infos_files/Apprehender...