1. Petit Dej’ FLUPA
Interfaces tactiles :
Nouveaux usages, nouvelles interactions ?
ConcevoirPetit déjeuner FLUPA qui change vraiment
pour le tactile, ce
Klee Group Corinne Leulier corinne.leulier@kleegroup.com 1
2. Sommaire
• Introduction
• Un service tactile ergonomique, ce n’est pas automatique…
– Vous avez dit « interactions plus simples et plus ludiques » ?
• Repenser l’interaction – bonnes pratiques & recommandations : les
critères ergonomiques sont toujours d’actualité ?
– Prendre en compte les recommandations pour les interfaces tactiles en général
• Et les adapter aux nouveaux devices
– Optimiser la valeur perçue des services
• Ce doit être beau, fluide, simple, focalisé…
– Améliorer leur adéquation aux nouveaux usages
• Ce doit être pragmatique
– Zones à éviter, à privilégier à l’écran
– Nomade, une seule main, usages allongé, gaucher / droitier
• Focus méthodologie : Analyser la situation d’usage
– Ou la petite histoire de la roue des usages & des 5 Dobeulious
Klee Group 2
3. Qui sommes-nous ?
Klee Interactive
1987 l’agence nouvelle génération
Création de Klee Group depuis 2000 45 personnes dont
Secteurs d’activité : 10 en ergonomie/design
Services publics / privé, Industrie, distribution, culture,
banque / assurances, +300 clients Ergonomie
Design d’information
+ 300 personnes
Expérience utilisateur
Interfaces Homme Machine
Savoir faire technologique
Klee Group 3
4. Klee Interactive
Types de projets | Notre différence
Projets « métier »
Applications professionnelles
Projets e-commerce ou
corporate Applications à destination du
Projets sur de nouveaux grand public
supports web, mobiles
Méthodologie des acteurs
industriels du monde numérique
UCD
Conception Centrée Utilisateurs
Klee Group 4
5. Expérience utilisateur dans le
Traitement des
Interactions technologiques et des
Conduites humaines et sociales
http://www.univ-metz.fr/ufr/sha/2lp-etic/accueil.html
ETIC : la rencontre des Sciences de l’ingénieur Un groupe de chercheurs multidisciplinaires :
et des Sciences humaines psychologues, ergonomes, spécialistes des facteurs
humains, informaticiens et ingénieurs de l’utilisabilité
La notion d’expérience utilisateur (user PERGOLAB : Notre laboratoire d'utilisabilité
experience) est centrale dans les recherches
menées par notre équipe.
Klee Group 5
7. Contexte
• Tactile :
– Bornes interactives, kiosques
– Smartphones
– Tablettes
– Desktop
• Type de service :
– B to B
– B to C
Klee Group 7
8. Recommandations ?
Recommandations
Critères Ergonomiques
Normes…
Interfaces « traditionnelles »
Interfaces Web
Interfaces immersives
Interfaces tactiles
Klee Group 8
9. Les Critères Ergonomiques
1. Guidage 4. Adaptabilité
1.1 Incitation* 4.1 Flexibilité*
1.2 Gr./Dist. entre items 4.2 Prise en compte de
1.2.1 ... par la localisation* l’expérience utilisateur*
1.2.2 ... par le format* 5. Gestion des erreurs
1.3 Feedback immédiat* 5.1 Protection contre les erreurs*
1.4 Lisibilité* 5.2 Qualité des messages d’erreur*
2. Charge de travail 5.3 Correction des erreurs*
2.1 Brièveté 6. Homogénéité/Cohérence*
2.1.1 Concision* 7. Signifiance des codes et
2.1.2 Actions minimales* dénominations*
2.2 Densité informationnelle* 8. Compatibilité*
3. Contrôle explicite
3.1 Actions explicites*
3.2 Contrôle utilisateur*
* Critère élémentaire
Klee Group
10. Les recommandations parfois vieillissent…
Avant
• « Le tactile est inapproprié pour les applications…
– Qui requièrent une formation
– Dont l’usage est fréquent
– Qui requièrent de la précision
– Qui requièrent beaucoup de saisie »
Qu’en est-il maintenant, avec les nouveaux dispositifs ?
Klee Group
12. Interactions plus simples ?
• Problèmes d’incitation et de guidage ? Mais quid de la
“discoverability”
– L’interface est obscur sans “affordance” suffisamment perceptible… Où
taper pour continuer ? L’utilisateur apprend en utilisant…
• Problèmes de facilité de mémorisation
– Les interactions gestuelles sont éphémères et difficiles à apprendre,
surtout lorsqu’elles ne sont pas utilisées de manière cohérente à
travers toutes les applications.
• Problème de protection contre les erreurs
– Ce qui arrive lorsque l’utilisateur touche un item par erreur ou se
trompe de geste, ou encore réalise un geste qui ne déclenche pas ce à
quoi il s’attendait.
• Et il n’y a pas de bouton « undo » ou « back » comme sur les
navigateurs…
Klee Group
13. Interactions plus simples ?
Modèle de navigation hypertextuel
“Card sharks vs. holy scrollers” Jef Raskin
• Cards
– Modèles de présentation à taille fixe.
Les utilisateurs doivent aller de “carte
en carte” pour avoir plus d’informations
(modèle HyperCard)
• Scrolls
– Permet de présenter de manière
extensible en longueur. Les utilisateurs
ont moins besoin de naviguer, ils vont
faire défiler les pages.
• On ne conçoit pas de la même manière
ces deux types de présentation
• Un mix intéressant : l’application Wired
sur iPad
Klee Group
14. Interactions plus simples ?
Une « même » fonctionnalité :
la liste de contacts
Des choix d’interaction
différents
Des grammaires d’interaction
différentes
Naviguer par nom ou par photo pour trouver un contact ?
Klee Group
15. Interactions plus simples ?
Une « même » fonctionnalité :
la fiche d’un contact
Qu’est-ce qui est le plus important ? Le numéro ou l’action ?
Klee Group
16. Interactions plus simples ?
Une « même » fonctionnalité :
le balladeur
Présentation de l’étendue de l’offre ou sélection nécessaire pour voir l’offre ?
Klee Group
17. Spécificités du tactile : 2000 – 2010
• Les interfaces tactiles étaient déjà utilisées sur des points de vente, dans
les musées, pour servir de guides touristiques ou de bornes interactives…
Mais c’était AVANT, avant l’avènement des smartphones et des tablettes
qui ont beaucoup amélioré l’IHM.
• Les utilisateurs ne connaissent pas l’interface. Par conséquent, les
techniques d’interaction doivent être simples et rapides. Cela reste
d’actualité.
• Ces situations nécessitent un écran et des techniques d’interaction qui
diffèrent des techniques habituelles. Toujours vrai.
• L’interaction se fait à l’aide des doigts ou d’un stylet. L’interaction est donc
« directe ». Toujours vrai.
• L’interaction tactile peut être très rapide pour certaines opérations et ne
requiert que peu d’apprentissage si les applications sont correctement
conçues. Toujours vrai.
Klee Group 17
18. Limites du tactile 1/2
• La taille
– La taille des éléments doit être adaptée à la taille des doigts pour éviter les
erreurs de pointage. Même si l’usage du stylet permet de réduire la taille des
éléments interactifs, des limites sont à considérer. Toujours vrai, mais devrait
forcer les concepteurs à se focaliser sur le plus important pour simplifier au
maximum l’interface. Attention au masquage : parades avec effets loupes et
infos déportées.
• Saisie séquentielle
– La saisie sur interface tactile est séquentielle : un doigt à la fois. Cet état de fait
réduit la vitesse de saisie comparativement au clavier. Le multitouch est
maintenant possible, bien que cela dépende des dispositifs et systèmes
d’exploitation utilisés…
• Fatigue
– La saisie de chiffres ou de lettres par pointage peut être « fatigante ».
L’interface tactile n’est donc pas appropriée aux contextes dans lesquels la
saisie de texte est importante. Toujours vrai même si des systèmes de type
thesaurus peuvent aider (ex. pour CR médicaux)
Klee Group 18
19. Limites du tactile 2/2
• Feedback
– Pas d’équivalent au déplacement du curseur ou survol des éléments de
l’interface. Le pointage entraîne la sélection et la validation d’une commande.
Toujours vrai mais d’autres moyens de mettre en avant le feedback utilisateur
sont possibles.
– Pas de possibilité de « undo »
• Opérations de déplacement
– Avant, l’interface tactile ne permettait pas le « dragging »… L’interaction
privilégiée était le pointage. Maintenant, c’est possible. Exemple solitaire (avec
fantôme ou pas) mais double « tap »
Klee Group 19
21. Le tactile : les types d’applications les plus
fréquentes…
• Informations
• Divertissement
– Magazine / vidéo / TV en ligne…
• Productivité
– Personnelle et professionnelle
• E-commerce
Klee Group 21
23. Les Critères Ergonomiques
1. Guidage 4. Adaptabilité
1.1 Incitation* 4.1 Flexibilité*
1.2 Gr./Dist. entre items 4.2 Prise en compte de
1.2.1 ... par la localisation* l’expérience utilisateur*
1.2.2 ... par le format* 5. Gestion des erreurs
1.3 Feedback immédiat* 5.1 Protection contre les erreurs*
1.4 Lisibilité* 5.2 Qualité des messages d’erreur*
2. Charge de travail 5.3 Correction des erreurs*
2.1 Brièveté 6. Homogénéité/Cohérence*
2.1.1 Concision* 7. Signifiance des codes et
2.1.2 Actions minimales* dénominations*
2.2 Densité informationnelle* 8. Compatibilité*
3. Contrôle explicite
3.1 Actions explicites*
3.2 Contrôle utilisateur*
* Critère élémentaire
Klee Group
26. Incitation
• Utilisation des indicateurs sur les pages
• Repères du chemin de fer
• Navigation entre les pages
– Repères des articles au sein de la navigation
• Scrolling ? Taping ? Interaction ?... Guider l’utilisateur quant au
geste attendu pour interagir
– Suggérer (iPhone – « déverrouiller »)
– Respecter les habitudes (carrousel)
– …
Klee Group 26
27. Incitation
Quitter une application
Supprimer une application
Klee Group 27
28. Incitation
• Manque d’affordance : où est-ce que
je dois appuyer ?
• Les zones cibles doivent ressembler
à des items actifs
• Le contexte de la zone cible peut
influencer l’affordance de la cible
Klee Group
29. Incitation
• Des contrôles peu visibles… pour
gagner de la place
• Pour éviter que les utilisateurs
passent à coté des contrôles (qui
n’apparaissent que lorsque
l’utilisateur « tape » sur l’écran),
toujours présenter les contrôles
puis les estomper (incitation /
guidage)
Klee Group Marvel Comics
30. Incitation
L’affordance
La notion d' « affordance » est issue des travaux de James J. Gibson (1977 – The
theory of affordances) : le fonctionnement d’un objet doit être visible par l'utilisateur.
Son apparence physique doit suggérer les actions possibles.
Le terme provient du verbe anglais « to afford ». En français, on le traduit par suggérer
et on parle alorsd'interface suggestive
ou « capacité d’un objet à suggérer sa propre utilisation »
L' « affordance » est une caractéristique de l'objet qui suggère ou
déclenche une action.
Klee Group
32. Groupement
/ Distinction
Klee Group
http://www.flickr.com/photos/alight/104983988/
33. Gr. Dist. Par la localisation / le format
• Les attributs suivants devraient être utilisés pour
grouper/distinguer les éléments de l’interface
– Agencement (lois de la Gestalt (proximité, similarité, ...), l’utilisation
des espaces blancs)
– Cadres
– Formes
– Couleur de premier plan, couleur de fond
– Taille et caractéristiques du texte
• L’utilisation des attributs doit se faire de façon cohérente pour
faciliter la compréhension
• Ne pas utiliser que la couleur pour réaliser des groupements.
Utiliser les « bons » contrastes afin de ne pas gêner les
utilisateurs présentant des problèmes de discrimination des
couleurs.
Klee Group 33
34. Gr. Dist. Par la localisation / le format
• On sait grâce à la psychologie cognitive que les éléments se
trouvant loin du focus d’attention tendent à être ignorés.
• L’iPad étant beaucoup plus grand que l’iPhone, il y a
d’autant plus de probabilité que le focus de l’attention de
l’utilisateur soit attiré bien loin des onglets du haut de
page.
Klee Group
35. Gr. Dist. Par la localisation
• « + » permettant de créer un nouvel élément est en bas
à droite
Klee Group
36. Gr. Dist. Par la localisation
Zones d’activité de la tablette
Zones d’activités de Mobiles
Dan Saffer. Posted on Friday, January 14, 2011 http://www.kickerstudio.com/blog/2011/01/activity-zones-for-
touchscreen-tablets-and-phones/
Klee Group 36
39. Feedback immédiat
• Les éléments interactifs devraient fournir un feedback et des
indications sur leur état (actif/non actif, etc.)
– Feedback immédiat: important pour indiquer aux utilisateurs que leur
action a été pris en compte.
– Feedback Visuel (surbrillance, effets 3D) suite à une sélection.
– Feedback auditif (click, ...) : peut être approprié.
Klee Group 39
40. Klee Group http://www.flickr.com/photos/studiogaro/4963166667/
41. Lisibilité
• Taille minimale des polices
– La taille du texte courant devrait être d’au moins de 12 pixels.
– Aucun texte courant ne devrait avoir une taille inférieure à 10 pixels.
41
Klee Group
42. Lisibilité - Taille des caractères
• Préférer un affichage par défaut des contenus de l’application
avec des caractères de taille suffisamment grande.
• Permettre de rétrécir ou grandir la police de caractères si
l’utilisateur le souhaite.
Klee Group
45. Flexibilité dans la navigation - Footer
• Accessibilité du footer des sites Web sur iPad
– Il est très facile de faire défiler les page sur iPad (plus encore que
d’utiliser une souris sur son ordinateur).
– Le footer des sites est très utilisé sur iPad.
Klee Group
46. Flexibilité – Ex. de l’orientation de l’iPad
• Faire en sorte de présenter les mêmes fonctions
• Possibilité de changer le design visuel
– Ex. de Wired
Klee Group
48. Protection contre les erreurs - Zone actives
• Attention à bien espacer les
champs dans des formulaires
• Prévention des erreurs :
permettre à l’utilisateur de
taper n’importe où du coté droit
d’une page par exemple pour
feuilleter un magazine (pas de
flèche à viser)
• À l’inverse, pour télécharger un
exemplaire, cliquer sur une
zone bien définie permet de
limiter les erreurs
Klee Group
49. Protection contre les erreurs
• L’iPad ayant un écran tactile plus important, il est plus
probable de faire des appuis accidentels sur l’écran.
• Pour palier ce problème, certaines applications proposent de
faux bouton « back » qui permettent de « remonter » à la
catégorie juste au dessus de l’item.
• Confirmation après sélection : À utiliser lorsque les
conséquences peuvent entraîner la perte de données ou
difficiles à récupérer. Minimiser les possibilités de sélection
par inadvertance.
Klee Group
51. Contrôle utilisateur
• L’utilisateur doit pouvoir contrôler le rythme des entrées
• Ne pas passer d'une page écran à une autre sans contrôle utilisateur
• Autoriser l'utilisateur à interrompre un traitement à tout moment
• Fournir la possibilité de revenir en arrière
53
Klee Group
52. Homogénéité
Cohérence
Klee Group
http://www.flickr.com/photos/maurice_flower/2606243067/
53. Homogénéité / cohérence
• Supprimer un élément : même fonctionnement sur iBooks que
sur l’interface de l’iPhone/iPad
Klee Group
54. Cohérence des gestes
• La mémorisation des gestes n’est pas formidable chez
l’humain.
• Si l’application nécessite des gestes qui ne sont pas utilisés par
les autres applications, les chances pour les utilisateurs de se
rappeler de ces gestes est très 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
fréquentes.
Klee Group
55. Cohérence globale
• Positionnement des éléments
• Appliquer l’organisation des éléments de façon cohérente
– Conserver les mêmes zones fonctionnelles (zones d’affichage, zones de
saisie, positionnement des boutons de navigation, zones d’état, etc.)
– Utiliser les éléments graphiques de façon cohérente
Klee Group 57
58. Compatibilité avec le matériel
• Pour limiter la complexité de l’usage de l’application et
pour limiter les activations accidentelles, on peut éviter
l’utilisation des hyperliens au sein des applications
• Ou bien les utiliser de manière intelligente
Klee Group
59. Compatibilité avec les caractéristiques de
l’utilisateur
• Pour accommoder les gauchers, l’affichage doit pouvoir être
adapté (il doit exister pour les droitiers et les gauchers…)
Klee Group 61
60. « Best practices »
Résister à la tentation : + de
place à l’écran ne veut pas dire plus Utiliser des techniques d’interaction
d’objets sur l’interface cohérentes et permettre à l’utilisateur de se
focaliser plus sur le contenu proposé
que sur la manière d’y accéder.
Même si la manipulation à deux
mains est possible, rendre
l’application utilisable à une
Mieux définir les zones
interactives du design pour optimiser
main leur visibilité (discoverability) en utilisant le
plus possible des affordances et des
Tester auprès d’utilisateurs cibles pour identifier “call to action”
les problèmes d’interaction.
Utiliser les gestes les plus familiers pour les actions
les plus fréquentes. Permettre la navigation habituelle, incluant le
undo (back), la recherche et des
Klee Group titres cliquables
61. Mais des principes toujours valables
Regroupement par le similarité ou
par la proximité
Homogénéité / Cohérence
Flexibilité d’usage
Lisibilité Choix des libellés
Fluidité de la présentation
Guidage boutons call-to-action
Faire respirer
Simplifier l’interface et
les fonctionnalités
Importance du contexte
Klee Group
63. Interface / interaction TACTILE
En plus de la navigation et des informations présentées Repenser
l’interaction
Pinball HD
Caractère éphémère et difficile à apprendre des gestes : cohérence globale requise
Klee Group
64. Méthodologie de conception
• Comment trouver les bons leviers d’appropriation d’un futur
service ?
Analyser le contexte d’usage
Klee Group 66
65. À propos du
produit
Qui Comment Quoi
Qui l’utilise ou va Dans quel Quelles fonctions /
l’utiliser ? contexte ? services ?
Cible(s) Situation(s) Activité(s)
Klee Group Quand Pourquoi 67
66. Interface / interaction TACTILE
Quoi présenter ?
cœur de l’application ?
Quel est le
Sélectionner les informations présentées à
chaque étape Pour qui ?
Choisir les fonctionnalités proposées avec Seniors ? Experts ?
Jeunes ? Sportifs ?
soin …
connexion
Comment créer une
émotionnelle avec l’interface ?
Pour quel usage ?
Assis ? Assis-debout ?
Lumière ? Reflets ?
Sons ?
Effet choc ? Didactique ?
Comment ?
« Finger-friendly » (read-tap asymmetry)
What feels good vs. What looks good
Klee Group
67. Gains de
productivité
Optimisation de la
performance & efficacité
Création
Quel besoin ? de valeur
Quel utilisateur ?
Quelle valeur ajoutée ?
Attente
Simulation Avant un
RDV
Pré-renseignement
Bureau Renseignements
Informations
de formulaires
Hall d’entrée
Rue
Domicile
Klee Group | octobre 2010 Où ?
68. Rappel : Expérience utilisateur / Ergonomie
Cible(s)
produit adapté
Situation(s) Activité(s)
Klee Group 70
71. Conception
Alternative
Démonstration
Alternative
Communication
Alternative Alternative
Accompagnement
du changement
Alternative
« Sketch » / esquisse Wireframe / fil de fer Prototype
Maquette + détaillée
Trouver des idées et les challenger
Concevoir les fondations
Maquette dynamique
Conception de bas niveau Conception de haut niveau
Klee Group 73
81. Bibliographie
Scapin, D.L. & Bastien, J.M.C. (1997). Ergonomic criteria for evaluating the ergonomic quality of interactive systems. Behaviour and
Information Technology, 6 (4-5), 220-231.
Bastien, J. M. C., & Scapin, D. L. (2001). Évaluation des systèmes d'information et Critères Ergonomiques. In C. Kolski (Ed.), Systèmes
d'information et interactions homme-machine. Environnement évolués et évaluation de l'IHM. Interaction homme-machine pour les SI (Vol.
2, pp. 53-79). Paris : Hermes.
“Usability of iPad Apps and Websites” by Raluca Budiu and Jakob Nielsen http://www.nngroup.com/reports/mobile/ipad/
Brown, C. M. (1988). Human-computer interface design guidelines. Norwood, NJ: Able (from Mayhew, 1992).
Mayhew, D. J. (1992). Principles and guidelines in software user interface design. Englewood Cliffs: Prentice Hall.
Shneiderman, B. (1987). Designing the user interface: Strategies for effective human-computer interaction. Reading, MA: Addison-Wesley.
Gerd Waloszek (2000). Guidelines for finger-operated touchscreen applications.
http://www.sapdesignguild.org/resources/tsdesigngl/index.htm
Apple iOS Human Interface Guidelines available for download as 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 pdf from :
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
Klee Group 83
