Universit Abdelmalek Essadi cole Normale Suprieure Ttouan Dpartement dInformatique et de Gestion

Filire : Master IPM

Module IHM
8 Interfaces tactiles
M. AAMMOU Souhaib

Tom MIETTE

Plan
Bref historique Composantes dun dispositif tactile

Hardware

Software

03/02/2009

Tom MIETTE technologies tactiles 3

Du synthtiseur lectronique liPhone dApple

Lorigine des temps

1953 :
Hugh Le Caine dveloppe les premiers capteurs

capacitifs pour son synthtiseur lectronique

1960s 1972 :
PLATO IV (Universit de lIllinois, commercialis

par IBM), premier cran infrarouges

1971 :
Sam Hurst, chercheur lORNL, imagine le

premier cran tactile rsistif

1973 :
Sam Hurst fonde Elo TouchSystems
5

Les temps modernes

1982 :
Nimish Mehta, chercheur lUniversit de Toronto,

conoit le premier priphrique multi-touch (touch pad)

1984 :
Bell Labs dveloppe le premier cran multi-touch

1986 :
Apparition du premier terminal bi-manual

1991 :
laboration de la technologie bidirectionnelle
6

Les prmices du futur

2001 :
Diamond Touch (Mitsubishi Research Labs), introduction

des gestes complexes

2003 :
Premier cran multi-utilisateurs

2006 :
Jeff Han, Universit de New York, fonde Perceptive Pixel

2007 :
Apple iPhone Microsoft Surface Computing

2008 :
N-Trig

2054 :
Minority Report de Steven Spielberg
7

Pourquoi les technologies tactiles tardent-elles apparatre ?

Raisons techniques
Capacits graphiques des terminaux trop faibles OS inadapts ( single-point ) Peu adaptes aux interfaces homme / machine

existantes

Raisons humaines
Le public nest pas encore prt La souris a mis 30 ans se dmocratiser Trop chres et encore trop fragiles
8

Terminologie et architecture logicielle

Single ou Multi-touch ?

Single-touch
Un seul point de contact Un seul utilisateur

Multi-touch
Plusieurs points de contact en mme temps

Plusieurs utilisateurs en mme temps

10

Multi-touch ou multi-point ?

Multi-point
Plusieurs point de contacts indpendants plusieurs clics de souris

Multi-touch
Dtection de zones de contact

Pression, angle dapproche, type dobjets,

etc. Interprtation de gestes

11

Architecture 3 couches (1)

Dispositif de pointage (hardware)

Reoit et dtermine

Couche logicielle
Traduit, calibre et interprte

Dispositif daffichage
Affiche

12

Technologie capacitive
Un courant uniforme parcourt la surface de lcran Lutilisateur soutire une partie du courant Le point de contact est calcul en fonction de la valeur du courant aux 4 coins de lcran

Exemples dapplication
Bornes extrieures,

stations services, touch pad, etc. iPhone (Apple)

13

Technologie rsistive
Deux couches conductrices sont spares par un isolant Lutilisateur applique une pression et cre un contact

Exemples dapplication
Baladeurs Archos Nintendo DS

PDA, GPS
14

Technologie infrarouges
Des diodes infrarouges crent un faisceau lumineux sur la surface de lcran Lutilisateur coupe le faisceau en X et en Y

Exemples dapplication
TouchSmart (HP)

Albatron Touch
15

Technologie ondes de surface

Des ondes ultrasoniques (inaudibles) parcourent la surface de lcran Des rcepteurs calculent le temps de propagation des ondes et dterminent le point de contact

Exemples dapplication
iTouch Touch-on-Tube (Elo

TouchSytems)
16

Technologie FTIR

Un faisceau infrarouge se propage dans un matriau rflchissant (fibre optique) Lutilisateur perturbe la propagation Le faisceau dvi est capt par une camra

Exemples dapplication
Perspective Pixel (Jeff Han) Magic Wall (CNN)
17

Comparatif
Technologie Capacitive Avantages Luminosit Temps de rponse Prix Tous types de pointeurs Temps de rponse Luminosit Longvit Tous types de pointeurs Luminosit Longvit Prix Mise en uvre simple Inconvnients Fragilit Longvit Pointeur conducteur Peu lumineux Fragilit Longvit Dtecte le contact avant le toucher Temps de rponse Trs sensible aux rayures, poussires, etc. Trs peu rpandue

Rsistive

Infrarouges

Ondes de surface FTIR

Architecture 3 couches (2)

Dispositif de pointage (hardware)

Reoit et dtermine

Couche logicielle
Traduit, calibre et interprte

Dispositif daffichage
Affiche

19

Architecture gnrale

User Dispositif de pointage (couche hardware)

Contrleur Driver

OS compatible

Core API

API

Applications compatibles

User Dispositif daffichage (couche hardware)

20

Architecture logicielle dtaille

Applications Core API / Multi-touch API

vnements multi-touch / gestes

points / zones calibrs points / zones de contacts donnes brutes
21

Interprtation driver + OS Transformation Abstraction hardware

Hardware (multi-touch, souris, touch pad, etc.)

vnements multi-touch

Les vnements multi-touch (ou gestes) sont une liste dinformations permettant dinterprter le mouvement

position initiale direction position finale vitesse angle dapproche pression etc
22

Cas pratique : rotation dune photo

La couche dinterprtation identifie le mouvement grce la position initiale, la direction et la position finale Lapplication de gestion des photos reoit lvnement multi-touch rotation avec ses caractristiques Lapplication effectue le traitement et renvoie le rsultat graphique correspondant
23

Architecture 3 couches (3)

Dispositif de pointage (hardware)

Reoit et dtermine

Couche logicielle
Traduit, calibre et interprte

Dispositif daffichage
Affiche

24

Plan

DES INTERACTIONS PLUS SIMPLES?

BONNES PRATIQUES &

RECOMMANDATIONS

DES INTERACTIONS PLUS SIMPLES ?

Problmes dincitation et de guidage? Mais quid de la discoverability

Linterface est obscur sans affordance

suffisamment perceptible O taper pour continuer ? Lutilisateur apprend en utilisant

Problmes de facilit de mmorisation

Les interactions gestuelles sont phmres

et difficiles apprendre, surtout lorsquelles ne sont pas utilises de manire cohrente travers toutes les applications.

DES INTERACTIONS PLUS SIMPLES ?

Problme de protection contre les erreurs

Ce qui arrive lorsque lutilisateur touche un

item par erreur ou se trompe de geste, ou encore ralise un geste qui ne dclenche pas ce quoi il sattendait.

Et il ny a pas de bouton undo ou back comme sur les navigateurs

DES INTERACTIONS PLUS SIMPLES ?

Modle de navigation hypertextuel Card sharks vs. holy scrollers Jef Raskin Cards

Modles de prsentation taille fixe. Les

utilisateurs doivent aller de carte en carte pour avoir plus dinformations(modle HyperCard)

Scrolls
Permet de prsenter de manire extensible

en longueur. Les utilisateurs ont moins besoin de naviguer, ils vont faire dfiler les pages.

DES INTERACTIONS PLUS SIMPLES ?

On ne conoit pas de la mme manire ces deux types de prsentation Un mix intressant : lapplication Wired sur iPad

DES INTERACTIONS PLUS SIMPLES ?

Une mme fonctionnalit : la liste de contacts

Des choix dinteraction diffrents

Des grammaires dinteraction diffrentes

Naviguer par nom ou par photo pour trouver un contact ?

DES INTERACTIONS PLUS SIMPLES ?

Une mme fonctionnalit : la fiche dun contact

Quest-ce qui est le plus important ? Le numro ou laction ?

DES INTERACTIONS PLUS SIMPLES ?

Une mme fonctionnalit : le balladeur

Prsentation de ltendue de loffre ou slection ncessaire pour voir loffre ?

Spcificits du tactile : 2000 2010

Les interfaces tactiles taient dj utilises sur des points de vente, dans les muses, pour servir de guides touristiques ou de bornes interactives Mais ctait AVANT, avant lavnement des smartphones et des tablettes qui ont beaucoup amlior lIHM. Les utilisateurs ne connaissent pas linterface. Par consquent, les techniques dinteraction doivent tre simples et rapides. Cela reste dactualit. Ces situations ncessitent un cran et des techniques dinteraction qui diffrent des techniques habituelles. Toujours vrai.

Spcificits du tactile : 2000 2010

Linteraction se fait laide des doigts ou dun stylet. Linteraction est donc directe. Toujours vrai. Linteraction tactile peut tre trs rapide pour certaines oprations et ne requiert que peu dapprentissage si les applications sont correctement conues. Toujours vrai.

Limites du tactile

La taille
La taille des lments doit tre adapte la

taille des doigts pour viter les erreurs de pointage. Mme si lusage du stylet permet de rduire la taille des lments interactifs, des limites sont considrer. Toujours vrai, mais devrait forcer les concepteurs se focaliser sur le plus important pour simplifier au maximum linterface. Attention au masquage : parades avec effets loupes et infos dportes.

Limites du tactile

Saisie squentielle
La

saisie sur interface tactile est squentielle : un doigt la fois. Cet tat de fait rduit la vitesse de saisie comparativement au clavier. Le multitouch est maintenant possible, bien que cela dpende des dispositifs et systmes dexploitation utiliss

Limites du tactile

Fatigue
La saisie de chiffres ou de lettres par

pointage peut tre fatigante. Linterface tactile nest donc pas approprie aux contextes dans lesquels la saisie de texte est importante. Toujours vrai mme si des systmes de type thesaurus peuvent aider (ex. pour CR mdicaux)

Limites du tactile

Feedback
Pas dquivalent au dplacement du curseur

ou survol des lments de linterface. Le pointage entrane la slection et la validation dune commande. Toujours vrai mais dautres moyens de mettre en avant le feedback utilisateur sont possibles. Pas de possibilit de undo

Limites du tactile

Oprations de dplacement
Avant, linterface tactile ne permettait pas le

dragging Linteraction privilgie tait le pointage. Maintenant, cest possible. Exemple solitaire (avec fantme ou pas) mais double tap

Tactile

Le tactile : les types dapplications les plus frquentes

Informations Divertissement

Magazine / vido / TV en ligne

Productivit
Personnelle et professionnelle

E-commerce

Recommandations ?

Les Critres Ergonomiques

1.Guidage
1.1Incitation* 1.2Gr./Dist. entre items 1.2.1... par la localisation* 1.2.2... par le format* 1.3Feedback immdiat* 1.4Lisibilit*

4.Adaptabilit
4.1Flexibilit* 4.2Prise en compte de lexprience utilisateur*

5.Gestion des erreurs

5.1Protection contre les erreurs* 5.2Qualit des messages derreur* 5.3Correction des erreurs*

2.Charge de travail
2.1Brivet 2.1.1Concision* 2.1.2Actions minimales* 2.2Densit informationnelle*

6.Homognit/Cohrence* 7.Signifiance des codes et dnominations* 8.Compatibilit*

3.Contrle explicite
3.1Actions explicites* 3.2Contrle utilisateur*

* Critre lmentaire

Incitation

Incitation
Utilisation des indicateurs sur les pages Repres du chemin de fer Navigation entre les pages

Repres des articles au sein de la navigation

Scrolling ? Taping? Interaction ?... Guider lutilisateur quant au geste attendu pour interagir
Suggrer (iPhone dverrouiller) Respecter les habitudes (carrousel)

Incitation

Quitter une application

Supprimer une application

Incitation
Manque daffordance : o est-ce que je dois appuyer ? Les zones cibles doivent ressembler des items actifs Le contexte de la zone cible peut influencer laffordance de la cible

Incitation

Des contrles peu visibles pour gagner de la place Pour viter que les utilisateurs passent cot des contrles (qui napparaissent que lorsque lutilisateur tape sur lcran), toujours prsenter les contrles puis les estomper (incitation / guidage)

Incitation

Laffordance
La notion d' affordance est issue des travaux

de James J. Gibson (1977 The theory of affordances) : le fonctionnement dun objet doit tre visible par l'utilisateur. Son apparence physique doit suggrer les actions possibles. Le terme provient du verbe anglais to afford. En franais, on le traduit par suggrer et on parle alors d'interface suggestive ou capacit dun objet suggrer sa propre utilisation L' affordance est une caractristique de l'objet qui suggre ou dclenche une action.

Groupement / Distinction

Les attributs suivants devraient tre utiliss pour grouper/distinguer les lments de linterface
Agencement (lois de la Gestalt (proximit,

similarit, ...), lutilisation des espaces blancs) Cadres Formes Couleur de premier plan, couleur de fond Taille et caractristiques du texte

Groupement / Distinction
Lutilisation des attributs doit se faire de faon cohrente pour faciliter la comprhension Ne pas utiliser que la couleur pour raliser des groupements. Utiliser les bons contrastes afin de ne pas gner les utilisateurs prsentant des problmes de discrimination des couleurs. On sait grce la psychologie cognitive que les lments se trouvant loin du focus dattention tendent tre ignors. LiPadtant beaucoup plus grand que liPhone, il y a dautant plus de probabilit que le focus de lattention de lutilisateur soit attir bien loin des onglets du haut de page.

Groupement / Distinction

+ permettant de crer un nouvel lment est en bas droite

Groupement / Distinction
Zones dactivit de la tablette

Zones dactivits de Mobiles

Dan Saffer. Posted on Friday, January 14, 2011 http://www.kickerstudio.com/blog/2011/01/activityzones-for-touchscreen-tablets-and-phones/

Feedback immdiat

Feedback immdiat

Les lments interactifs devraient fournir un feedback et des indications sur leur tat (actif/non actif, etc.)
Feedback immdiat: important pour indiquer aux

utilisateurs que leur action a t pris en compte. Feedback Visuel (surbrillance, effets 3D) suite une slection. Feedback auditif (click, ...) : peut tre appropri.

Lisibilit

Taille minimale des polices

La taille du texte courant devrait tre dau moins

de 12 pixels. Aucun texte courant ne devrait avoir une taille infrieure 10 pixels.

Lisibilit - Taille des caractres

Prfrer un affichage par dfaut des contenus de lapplication avec des caractres de taille suffisamment grande. Permettre de rtrcir ou grandir la police de caractres si lutilisateur le souhaite.

Flexibilit

Accessibilit du footer des sites Web sur iPad

Il est trs facile de faire dfiler les page sur iPad (plus

encore que dutiliser une souris sur son ordinateur). Le footer des sites est trs utilis sur iPad.

Flexibilit Ex. de lorientation de liPad

Faire en sorte de prsenter les mmes fonctions Possibilit de changer le design visuel
Ex. de Wired

Gestion des erreurs

Protection contre les erreurs -Zone actives

Attention bien espacer les

champs dans des formulaires Prvention des erreurs : permettre lutilisateur de taper nimporte o du cot droit dune page par exemple pour feuilleter un magazine (pas de flche viser) linverse, pour tlcharger un exemplaire, cliquer sur une zone bien dfinie permet de limiter les erreurs

Gestion des erreurs

Protection contre les erreurs:

LiPad ayant un cran tactile plus important, il

est plus probable de faire des appuis accidentels sur lcran. Pour palier ce problme, certaines applications proposent de faux bouton back qui permettent de remonter la catgorie juste au dessus de litem. Confirmation aprs slection : utiliser lorsque les consquences peuvent entraner la perte de donnes ou difficiles rcuprer. Minimiser les possibilits de slection par inadvertance.

Contrle utilisateur
Lutilisateur doit pouvoir contrler le rythme des entres Ne pas passer d'une page cran une autre sans contrle utilisateur Autoriser l'utilisateur interrompre un traitement tout moment Fournir la possibilit de revenir en arrire

Homognit /Cohrence

Supprimer un lment : mme fonctionnement sur iBooks que sur linterface de liPhone/iPad

Cohrence des gestes

La mmorisation des gestes nest pas formidable chez lhumain. Si lapplication ncessite des gestes qui ne sont pas utiliss par les autres applications, les chances pour les utilisateurs de se rappeler de ces gestes est trs restreinte. Les gestes traditionnels faits naturellement sur un iPad sont le tapping et le dragging. Utiliser les gestes les plus familiers pour les actions les plus frquentes.

Cohrence globale
Positionnement des lments Appliquer lorganisation des lments de faon cohrente

Conserver les mmes zones fonctionnelles

(zones daffichage, zones de saisie, positionnement des boutons de navigation, zones dtat, etc.) Utiliser les lments graphiques de faon cohrente

Compatibilit - avec la tche

Utilisation de mtaphore

Compatibilit - avec le matriel

Pour limiter la complexit de lusage de lapplication et pour limiter les activations accidentelles, on peut viter lutilisation des hyperliens au sein des applications Ou bien les utiliser de manire intelligente

Compatibilit - avec les caractristiques de lutilisateur

Pour accommoder les gauchers, laffichage doit pouvoir tre adapt (il doit exister pour les droitiers et les gauchers)

Best practices
Rsister la tentation : + de place lcran ne veut pas dire plus dobjets sur linterface Mme si la manipulation deux mains est possible, rendre lapplication utilisable une main Tester auprs dutilisateurs cibles pour identifier les problmes dinteraction. Utiliser des techniques dinteraction cohrentes et permettre lutilisateur de se focaliser plus sur le contenu propos que sur la manire dy accder.

Best practices
Mieux dfinir les zones interactives du design pour optimiser leur visibilit (discoverability) en utilisant le plus possible des affordances et des call to action Utiliser les gestes les plus familiers pour les actions les plus frquentes. Permettre la navigation habituelle, incluant le undo (back), la recherche et des titres cliquables

Mais des principes toujours valables

Regroupement par le similarit ou par la proximit Homognit/Cohrence Flexibilit dusage Lisibilit Choix des libells Fluidit de la prsentation Guidage boutons call-to-action Faire respirer Simplifier linterface et les fonctionnalits Importance du contexte

BIBLIOGRAPHIE / WEBOGRAPHIE

Usability of iPad Apps and Websites by Raluca Budiu and Jakob Nielsen http://www.nngroup.com/reports/mobile/ipad/ GerdWaloszek(2000). Guidelines forfinger-operated touchscreen applications. http://www.sapdesignguild.org/resources/tsdesigngl/index.htm Apple iOS Human Interface Guidelines available for downloadas a pdf from: http://developer.apple.com/library/ios/#documentation/UserExperience/ Conceptual/MobileHIG/Introduction/Introduction.html Windows Phone 7 Series UI Design and Interaction Guide available for download as a pdffrom : http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03 /18/windows-phone-7-series-ui-design-amp-interaction-guide.aspx Android User interface guidelines : http://developer.android.com/guide/practices/ui_guidelines/index.html UI Guidelines for Blackberry smartphones: http://developer.android.com/guide/practices/ui_guidelines/index.html UI Guidelines for mobile and tablet web app design http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design