Interfaces tactiles : nouveaux usages, nouvelles interactions ?
-
Upload
france-luxembourg-user-experience-professionals-association-flupa -
Category
Documents
-
view
15.950 -
download
6
Transcript of Interfaces tactiles : nouveaux usages, nouvelles interactions ?
Klee GroupKlee Group
Petit Dej’ FLUPA
Interfaces tactiles : Nouveaux usages, nouvelles interactions ?
Petit déjeuner FLUPA
1Corinne Leulier [email protected]
Concevoir pour le tactile, ce qui change vraiment
Klee Group
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
2
Klee GroupKlee Group
Qui sommes-nous ?
1987Création de Klee Group
+ 300personnes
Secteurs d’activité :Services publics / privé, Industrie, distribution, culture, banque / assurances, +300 clients Ergonomie
Expérience utilisateur
Interfaces Homme Machine
Design d’information
Savoir faire technologique
depuis 2000
Klee Interactivel’agence nouvelle génération
45 personnes dont 10 en ergonomie/design
3
Klee GroupKlee Group
Klee Interactive
Klee Group 4
Projets « métier »
Projets e-commerce oucorporate
Projets sur de nouveaux supports web, mobiles
Types de projets | Notre différence
Applications professionnelles
Applications à destination du
grand public
Méthodologie des acteurs
industriels du monde numérique
UCDConception Centrée Utilisateurs
Klee Group 5
Un groupe de chercheurs multidisciplinaires :
psychologues, ergonomes, spécialistes des facteurs
humains, informaticiens et ingénieurs de l’utilisabilité
ETIC : la rencontre des Sciences de l’ingénieur
et des Sciences humaines
La notion d’expérience utilisateur (user experience) est centrale dans les recherches
menées par notre équipe.
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
PERGOLAB : Notre laboratoire d'utilisabilité
Klee Group
INTRODUCTION
6
Klee Group
Contexte
• Tactile :– Bornes interactives, kiosques
– Smartphones
– Tablettes
– Desktop
• Type de service :– B to B
– B to C
7
Klee Group
Recommandations ?
8
Recommandations
Critères Ergonomiques
Normes…
Interfaces Web
Interfaces tactiles
Interfaces « traditionnelles »
Interfaces immersives
Klee Group
Les Critères Ergonomiques
1. Guidage
1.1 Incitation*
1.2 Gr./Dist. entre items
1.2.1 ... par la localisation*
1.2.2 ... par le format*
1.3 Feedback immédiat*
1.4 Lisibilité*
2. Charge de travail
2.1 Brièveté
2.1.1 Concision*
2.1.2 Actions minimales*
2.2 Densité informationnelle*
3. Contrôle explicite
3.1 Actions explicites*
3.2 Contrôle utilisateur*
4. Adaptabilité
4.1 Flexibilité*
4.2 Prise en compte de l’expérience utilisateur*
5. Gestion des erreurs
5.1 Protection contre les erreurs*
5.2 Qualité des messages d’erreur*
5.3 Correction des erreurs*
6. Homogénéité/Cohérence*
7. Signifiance des codes et dénominations*
8. Compatibilité*
* Critère élémentaire
Klee Group
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
DES INTERACTIONS PLUS SIMPLES ?
11
Klee Group
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
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èreextensible en longueur. Les utilisateursont moins besoin de naviguer, ils vontfaire 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 Wiredsur iPad
Klee Group
Interactions plus simples ?
Naviguer par nom ou par photo pour trouver un contact ?
Une « même » fonctionnalité : la liste de contacts
Des choix d’interaction différents
Des grammaires d’interaction différentes
Klee Group
Qu’est-ce qui est le plus important ? Le numéro ou l’action ?
Interactions plus simples ?
Une « même » fonctionnalité : la fiche d’un contact
Klee Group
Présentation de l’étendue de l’offre ou sélection nécessaire pour voir l’offre ?
Interactions plus simples ?
Une « même » fonctionnalité : le balladeur
Klee Group
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.
17
Klee Group
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)
18
Klee Group
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 »
19
Klee Group
Tactile
Klee Group
Le tactile : les types d’applications les plus fréquentes…
• Informations
• Divertissement– Magazine / vidéo / TV en ligne…
• Productivité– Personnelle et professionnelle
• E-commerce
21
Klee Group
BONNES PRATIQUES & RECOMMANDATIONS
22
Klee Group
Les Critères Ergonomiques
1. Guidage
1.1 Incitation*
1.2 Gr./Dist. entre items
1.2.1 ... par la localisation*
1.2.2 ... par le format*
1.3 Feedback immédiat*
1.4 Lisibilité*
2. Charge de travail
2.1 Brièveté
2.1.1 Concision*
2.1.2 Actions minimales*
2.2 Densité informationnelle*
3. Contrôle explicite
3.1 Actions explicites*
3.2 Contrôle utilisateur*
4. Adaptabilité
4.1 Flexibilité*
4.2 Prise en compte de l’expérience utilisateur*
5. Gestion des erreurs
5.1 Protection contre les erreurs*
5.2 Qualité des messages d’erreur*
5.3 Correction des erreurs*
6. Homogénéité/Cohérence*
7. Signifiance des codes et dénominations*
8. Compatibilité*
* Critère élémentaire
Klee Group
http://www.flickr.com/photos/erwan/32004282/in/photostream
Klee Group
Incitation
25
Klee Group
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)
– …
26
Klee Group
Incitation
27
Quitter une application
Supprimer une application
Klee Group
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 peutinfluencer l’affordance de la cible
Klee Group
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)
Marvel Comics
Klee Group
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 alors d'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.
L’affordance
Incitation
Klee Group
L’affordance
IncitationIncitation
Klee Grouphttp://www.flickr.com/photos/alight/104983988/
Groupement/ Distinction
Klee Group
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.
33
Klee Group
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
Gr. Dist. Par la localisation
• « + » permettant de créer un nouvel élément est en bas à droite
Klee Group
Gr. Dist. Par la localisation
36
Dan Saffer. Posted on Friday, January 14, 2011 http://www.kickerstudio.com/blog/2011/01/activity-zones-for-
touchscreen-tablets-and-phones/
Zones d’activité de la tablette
Zones d’activités de Mobiles
Klee Group
Feedback immédiat
Klee Group
Feedback immédiat
38
Klee Group
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é.
39
Klee Group http://www.flickr.com/photos/studiogaro/4963166667/
Klee Group
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
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
Pause
Klee Group
Flexibilité
Klee Group
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
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 http://www.flickr.com/photos/erwan/43095175/in/photostream/
Gestion des erreurs
Klee Group
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
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 52
Contrôle utilisateur
Klee Group
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 Grouphttp://www.flickr.com/photos/maurice_flower/2606243067/
Homogénéité Cohérence
Klee Group
Homogénéité / cohérence
• Supprimer un élément : même fonctionnement sur iBooks que sur l’interface de l’iPhone/iPad
Klee Group
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 iPadsont le « tapping » et le « dragging ».
• Utiliser les gestes les plus familiers pour les actions les plus fréquentes.
Klee Group
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
57
Klee Group
http://www.flickr.com/photos/erwan/182333545/in/set-148381/
Compatibilité
Klee Group
Compatibilité avec la tâche
• Utilisation de métaphore
59
Klee Group
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
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…)
61
Klee Group
« Best practices »Résister à la tentation : + de
place à l’écran ne veut pas dire plus
d’objets sur l’interface
Mieux définir les zones
interactives du design pour optimiser
leur visibilité (discoverability) en utilisant le
plus possible des affordances et des
“call to action”
Même si la manipulation à deux
mains est possible, rendre
l’application utilisable à une
main
Utiliser les gestes les plus familiers pour les actions
les plus fréquentes.
Utiliser des techniques d’interaction
cohérentes et permettre à l’utilisateur de se
focaliser plus sur le contenu proposé
que sur la manière d’y accéder.
Permettre la navigation habituelle, incluant le
undo (back), la recherche et des
titres cliquables
Tester auprès d’utilisateurs cibles pour identifier
les problèmes d’interaction.
Klee Group
Mais des principes toujours valables
Regroupement par le similarité ou
par la proximité
Homogénéité / CohérenceFlexibilité 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
FOCUS MÉTHODOLOGIE :LE CONTEXTE D’USAGE
64
Klee Group
Interface / interaction TACTILEEn 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
Méthodologie de conception
• Comment trouver les bons leviers d’appropriation d’un futur service ?
66
Analyser le contexte d’usage
Klee Group 67
Qui Qui l’utilise ou va
l’utiliser ?
Cible(s)
Comment Dans quel contexte ?
Situation(s)
Quoi Quelles fonctions /
services ?
Activité(s)
À propos du
produit
Quand Pourquoi
Klee Group
« Finger-friendly » (read-tap asymmetry)
What feels good vs. What looks good
Comment ?
Quoi présenter ?
Quel est le cœur de l’application ?
Sélectionner les informations présentées à
chaque étape
Choisir les fonctionnalités proposées avec
soin
Comment créer une connexion
émotionnelle avec l’interface ?
Pour qui ?Seniors ? Experts ?
Jeunes ? Sportifs ?
…
Pour quel usage ?Assis ? Assis-debout ?
Lumière ? Reflets ?
Sons ?
Effet choc ? Didactique ?
Interface / interaction TACTILE
Klee GroupKlee Group | octobre 2010 Où ?
Domicile
Rue
Bureau
Attente
Informations
Renseignements
Avant un RDV
Simulation
Pré-renseignement de formulaires
Quel besoin ?Quel utilisateur ?
Quelle valeur ajoutée ?
Création de valeur
Optimisation de la performance & efficacité
Gains de productivité
Hall d’entrée
Klee Group
Rappel : Expérience utilisateur / Ergonomie
70
Cible(s)
Activité(s)Situation(s)
produit adapté
Klee Group 71
Klee Group 72
Maquettage & itération(s)
Expérience Expertise
Idées
Contexte
Klee Group
Wireframe / fil de ferMaquette + détaillée
Concevoir les fondations
PrototypeMaquette dynamique
Alternative Alternative
Alternative
Alternative
Alternative
Démonstration
Communication
Accompagnement du changement
« Sketch » / esquisseTrouver des idées et les challenger
Conception
73
Conception de haut niveauConception de bas niveau
Klee Group 74
Klee Group 75
Remue méninges
Klee Group 76
Maquette papier / crayon
Klee Group 77
Maquette papier / crayon
Klee Group
Wireframe
78http://www.flickr.com/photos/35468151759@N01/184032078/
Klee Group 79
Klee Group 80
Klee Group 81
Klee Group
BIBLIOGRAPHIE / WEBOGRAPHIE
82
Klee Group
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èmesd'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
83
Klee Group
Merci de votre attention