Interfaces tactiles : nouveaux usages, nouvelles interactions ?

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

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

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

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

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

INTRODUCTIONKlee Group 6

Contexte • Tactile : – Bornes interactives, kiosques – Smartphones – Tablettes – Desktop • Type de service : – B to B – B to CKlee Group 7

Recommandations ? Recommandations Critères Ergonomiques Normes… Interfaces « traditionnelles » Interfaces Web Interfaces immersives Interfaces tactilesKlee Group 8

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

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 ?Klee Group 11

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è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

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

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

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

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

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

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

TactileKlee Group

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

BONNES PRATIQUES & RECOMMANDATIONSKlee Group 22

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

http://www.flickr.com/photos/erwan/32004282/in/photostreamKlee Group

IncitationKlee Group 25

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

Incitation Quitter une application Supprimer une applicationKlee Group 27

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

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

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

Incitation Incitation L’affordanceKlee Group

Groupement / DistinctionKlee Group http://www.flickr.com/photos/alight/104983988/

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

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 à droiteKlee Group

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

Feedback immédiatKlee Group

Feedback immédiatKlee Group 38

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

Klee Group http://www.flickr.com/photos/studiogaro/4963166667/

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

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

PauseKlee 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 WiredKlee Group

Gestion des erreursKlee Group http://www.flickr.com/photos/erwan/43095175/in/photostream/

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

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

Contrôle utilisateurKlee Group 52

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

Homogénéité CohérenceKlee Group http://www.flickr.com/photos/maurice_flower/2606243067/

Homogénéité / cohérence • Supprimer un élément : même fonctionnement sur iBooks que sur l’interface de l’iPhone/iPadKlee 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 iPad sont 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érenteKlee Group 57

http://www.flickr.com/photos/erwan/182333545/in/set-148381/ CompatibilitéKlee Group

Compatibilité avec la tâche • Utilisation de métaphore 59Klee 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 intelligenteKlee 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…)Klee Group 61

« 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

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

FOCUS MÉTHODOLOGIE : LE CONTEXTE D’USAGEKlee Group 64

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

Méthodologie de conception • Comment trouver les bons leviers d’appropriation d’un futur service ? Analyser le contexte d’usageKlee Group 66

À 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

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

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ù ?

Rappel : Expérience utilisateur / Ergonomie Cible(s) produit adaptéSituation(s) Activité(s)Klee Group 70

Klee Group 71

Contexte Idées Expérience Expertise Maquettage & itération(s)Klee Group 72

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

Klee Group 74

Remue méningesKlee Group 75

Maquette papier / crayonKlee Group 76

Maquette papier / crayonKlee Group 77

WireframeKlee Group http://www.flickr.com/photos/35468151759@N01/184032078/ 78

Klee Group 79

Klee Group 80

Klee Group 81

BIBLIOGRAPHIE / WEBOGRAPHIEKlee Group 82

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

Merci de votre attentionKlee Group

http://culturecommunication-nantes.blogspot.fr	2190
http://culturecommunication-nantes.blogspot.com	859
http://www.scoop.it	61
http://culturecommunication-nantes.blogspot.be	57
http://jean-perriault.com	45
http://storify.com	30
http://alchemy.atosworldline.com	24
http://culturecommunication-nantes.blogspot.kr	22
http://localhost	21
http://culturecommunication-nantes.blogspot.jp	21
http://culturecommunication-nantes.blogspot.com.es	20
http://culturecommunication-nantes.blogspot.ca	19
http://www.culturecommunication-nantes.blogspot.com	19
http://culturecommunication-nantes.blogspot.ch	13
http://culturecommunication-nantes.blogspot.co.uk	12
http://culturecommunication-nantes.blogspot.tw	11
http://culturecommunication-nantes.blogspot.nl	10
http://www.culturecommunication-nantes.blogspot.fr	9
http://culturecommunication-nantes.blogspot.it	9
http://culturecommunication-nantes.blogspot.com.br	8
https://alchemy.atosworldline.com	8
http://elms.113.beatles.epistema.local	7
http://culturecommunication-nantes.blogspot.in	6
http://culturecommunication-nantes.blogspot.de	6
http://culturecommunication-nantes.blogspot.ru	6
http://culturecommunication-nantes.blogspot.com.au	4
http://culturecommunication-nantes.blogspot.sk	4
http://culturecommunication-nantes.blogspot.mx	4
http://paper.li	4
http://culturecommunication-nantes.blogspot.com.ar	3
http://tactileetmobile.tumblr.com	3
http://v2.flupa.eu	3
http://www.kleeinteractive.com	3
http://culturecommunication-nantes.blogspot.pt	2
http://culturecommunication-nantes.blogspot.no	1
http://tweetedtimes.com	1
http://culturecommunication-nantes.blogspot.sg	1
http://culturecommunication-nantes.blogspot.hu	1
https://twitter.com	1
http://twitter.com	1
http://culturecommunication-nantes.blogspot.se	1

Interfaces tactiles : nouveaux usages, nouvelles interactions ?

by France Luxembourg User Experience Professional's Association (FLUPA)

Accessibility

Upload Details

Usage Rights

41 Embeds 3,530

Statistics

Interfaces tactiles : nouveaux usages, nouvelles interactions ? Presentation Transcript