Your SlideShare is downloading. ×
Interfaces tactiles : nouveaux usages, nouvelles interactions ?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Interfaces tactiles : nouveaux usages, nouvelles interactions ?

15,704
views

Published on


1 Comment
16 Likes
Statistics
Notes
No Downloads
Views
Total Views
15,704
On Slideshare
0
From Embeds
0
Number of Embeds
35
Actions
Shares
0
Downloads
499
Comments
1
Likes
16
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Petit Dej’ FLUPA Interfaces tactiles : Nouveaux usages, nouvelles interactions ? ConcevoirPetit déjeuner FLUPA qui change vraiment pour le tactile, ceKlee 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 DobeuliousKlee 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 technologiqueKlee 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 UtilisateursKlee 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 dutilisabilité experience) est centrale dans les recherches menées par notre équipe.Klee Group 5
  • 6. INTRODUCTIONKlee Group 6
  • 7. Contexte • Tactile : – Bornes interactives, kiosques – Smartphones – Tablettes – Desktop • Type de service : – B to B – B to CKlee Group 7
  • 8. Recommandations ? Recommandations Critères Ergonomiques Normes… Interfaces « traditionnelles » Interfaces Web Interfaces immersives Interfaces tactilesKlee 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émentaireKlee 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
  • 11. DES INTERACTIONS PLUS SIMPLES ?Klee Group 11
  • 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 iPadKlee 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
  • 20. TactileKlee Group
  • 21. Le tactile : les types d’applications les plus fréquentes… • Informations • Divertissement – Magazine / vidéo / TV en ligne… • Productivité – Personnelle et professionnelle • E-commerceKlee Group 21
  • 22. BONNES PRATIQUES & RECOMMANDATIONSKlee Group 22
  • 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émentaireKlee Group
  • 24. http://www.flickr.com/photos/erwan/32004282/in/photostreamKlee Group
  • 25. IncitationKlee Group 25
  • 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 applicationKlee 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 cibleKlee 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 lutilisateur. 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 alorsdinterface suggestive ou « capacité d’un objet à suggérer sa propre utilisation » L « affordance » est une caractéristique de lobjet qui suggère ou déclenche une action.Klee Group
  • 31. Incitation Incitation L’affordanceKlee Group
  • 32. Groupement / DistinctionKlee 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 à droiteKlee 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
  • 37. Feedback immédiatKlee Group
  • 38. Feedback immédiatKlee Group 38
  • 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. 41Klee 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
  • 43. PauseKlee Group
  • 44. Flexibilité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 WiredKlee Group
  • 47. Gestion des erreursKlee Group http://www.flickr.com/photos/erwan/43095175/in/photostream/
  • 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 erreursKlee 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
  • 50. Contrôle utilisateurKlee Group 52
  • 51. Contrôle utilisateur • L’utilisateur doit pouvoir contrôler le rythme des entrées • Ne pas passer dune page écran à une autre sans contrôle utilisateur • Autoriser lutilisateur à interrompre un traitement à tout moment • Fournir la possibilité de revenir en arrière 53Klee Group
  • 52. Homogénéité CohérenceKlee 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/iPadKlee 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érenteKlee Group 57
  • 56. http://www.flickr.com/photos/erwan/182333545/in/set-148381/ CompatibilitéKlee Group
  • 57. Compatibilité avec la tâche • Utilisation de métaphore 59Klee Group
  • 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 intelligenteKlee 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 desKlee 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 contexteKlee Group
  • 62. FOCUS MÉTHODOLOGIE : LE CONTEXTE D’USAGEKlee Group 64
  • 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 requiseKlee Group
  • 64. Méthodologie de conception • Comment trouver les bons leviers d’appropriation d’un futur service ? Analyser le contexte d’usageKlee 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 goodKlee 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 DomicileKlee Group | octobre 2010 Où ?
  • 68. Rappel : Expérience utilisateur / Ergonomie Cible(s) produit adaptéSituation(s) Activité(s)Klee Group 70
  • 69. Klee Group 71
  • 70. Contexte Idées Expérience Expertise Maquettage & itération(s)Klee Group 72
  • 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 dynamiqueConception de bas niveau Conception de haut niveau Klee Group 73
  • 72. Klee Group 74
  • 73. Remue méningesKlee Group 75
  • 74. Maquette papier / crayonKlee Group 76
  • 75. Maquette papier / crayonKlee Group 77
  • 76. WireframeKlee Group http://www.flickr.com/photos/35468151759@N01/184032078/ 78
  • 77. Klee Group 79
  • 78. Klee Group 80
  • 79. Klee Group 81
  • 80. BIBLIOGRAPHIE / WEBOGRAPHIEKlee Group 82
  • 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 dinformation et Critères Ergonomiques. In C. Kolski (Ed.), Systèmes dinformation et interactions homme-machine. Environnement évolués et évaluation de lIHM. 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-designKlee Group 83
  • 82. Merci de votre attentionKlee Group