Klee GroupKlee Group

Petit Dej’ FLUPA

Interfaces tactiles : Nouveaux usages, nouvelles interactions ?

Petit déjeuner FLUPA

1Corinne Leulier corinne.leulier@kleegroup.com

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