Petit Dej’ FLUPA                                  Interfaces tactiles :             Nouveaux usages, nouvelles interaction...
Sommaire   • Introduction   • Un service tactile ergonomique, ce n’est pas automatique…             – Vous avez dit « inte...
Qui sommes-nous ?                                                                   Klee Interactive                 1987 ...
Klee Interactive                   Types de projets | Notre différence                  Projets « métier »                ...
Expérience utilisateur dans le                                                                               Traitement de...
INTRODUCTIONKlee Group              6
Contexte   • Tactile :             –   Bornes interactives, kiosques             –   Smartphones             –   Tablettes...
Recommandations ?                                   Recommandations                                 Critères Ergonomiques ...
Les Critères Ergonomiques             1. Guidage                             4. Adaptabilité               1.1 Incitation*...
Les recommandations parfois vieillissent…   Avant   • « Le tactile est inapproprié pour les applications…             –   ...
DES INTERACTIONS PLUS SIMPLES ?Klee Group                                 11
Interactions plus simples ?   • Problèmes d’incitation et de guidage ? Mais quid de la     “discoverability”             –...
Interactions plus simples ?   Modèle de navigation hypertextuel   “Card sharks vs. holy scrollers” Jef Raskin   • Cards   ...
Interactions plus simples ?                                                                  Une « même » fonctionnalité :...
Interactions plus simples ?                                                                         Une « même » fonctionn...
Interactions plus simples ?                                                                       Une « même » fonctionnal...
Spécificités du tactile : 2000 – 2010   • Les interfaces tactiles étaient déjà utilisées sur des points de vente, dans    ...
Limites du tactile 1/2   • La taille             – La taille des éléments doit être adaptée à la taille des doigts pour év...
Limites du tactile 2/2   • Feedback             – Pas d’équivalent au déplacement du curseur ou survol des éléments de    ...
TactileKlee Group
Le tactile : les types d’applications les plus                  fréquentes…   • Informations   • Divertissement           ...
BONNES PRATIQUES &         RECOMMANDATIONSKlee Group                    22
Les Critères Ergonomiques             1. Guidage                             4. Adaptabilité               1.1 Incitation*...
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      ...
Incitation                 Quitter une application                                           Supprimer une applicationKlee...
Incitation   • Manque d’affordance : où est-ce que     je dois appuyer ?   • Les zones cibles doivent ressembler     à des...
Incitation    • Des contrôles peu visibles… pour      gagner de la place    • Pour éviter que les utilisateurs      passen...
Incitation                                       L’affordance             La notion d « affordance » est issue des travaux...
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 l...
Gr. Dist. Par la localisation / le format    •        On sait grâce à la psychologie cognitive que les éléments se        ...
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                                                        ...
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/n...
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. ...
Lisibilité - Taille des caractères   • Préférer un affichage par défaut des contenus de l’application     avec des caractè...
PauseKlee Group
FlexibilitéKlee Group
Flexibilité dans la navigation - Footer   • Accessibilité du footer des sites Web sur iPad             – Il est très facil...
Flexibilité – Ex. de l’orientation de l’iPad   • Faire en sorte de présenter les mêmes fonctions   • Possibilité de change...
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éventi...
Protection contre les erreurs   • L’iPad ayant un écran tactile plus important, il est plus     probable de faire des appu...
Contrôle utilisateurKlee Group              52
Contrôle utilisateur   •     L’utilisateur doit pouvoir contrôler le rythme des entrées   •     Ne pas passer dune page éc...
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/iPad...
Cohérence des gestes   • La mémorisation des gestes n’est pas formidable chez     l’humain.   • Si l’application nécessite...
Cohérence globale   • Positionnement des éléments   • Appliquer l’organisation des éléments de façon cohérente            ...
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 limi...
Compatibilité avec les caractéristiques de             l’utilisateur   • Pour accommoder les gauchers, l’affichage doit po...
« Best practices »  Résister à la tentation : + de  place à l’écran ne veut pas dire plus                   Utiliser des t...
Mais des principes toujours valables        Regroupement par le similarité ou        par la proximité        Homogénéité /...
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...
Méthodologie de conception   • Comment trouver les bons leviers d’appropriation d’un futur     service ?             Analy...
À propos du                        produit             Qui                Comment                  Quoi       Qui l’utilis...
Interface / interaction TACTILE             Quoi présenter ?                       cœur de l’application ?             Que...
Gains de                                          productivité                                             Optimisation de...
Rappel : Expérience utilisateur / Ergonomie                         Cible(s)               produit    adaptéSituation(s)  ...
Klee Group   71
Contexte                Idées                        Expérience                         Expertise             Maquettage &...
Conception              Alternative                                                                                  Démon...
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 interac...
Merci de votre attentionKlee Group
Prochain SlideShare
Chargement dans…5
×

Interfaces tactiles : nouveaux usages, nouvelles interactions ?

18 210 vues

Publié le

1 commentaire
17 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
18 210
Sur SlideShare
0
Issues des intégrations
0
Intégrations
7 838
Actions
Partages
0
Téléchargements
528
Commentaires
1
J’aime
17
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Interfaces tactiles : nouveaux usages, nouvelles interactions ?

  1. 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. 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. 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. 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. 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. 6. INTRODUCTIONKlee Group 6
  7. 7. Contexte • Tactile : – Bornes interactives, kiosques – Smartphones – Tablettes – Desktop • Type de service : – B to B – B to CKlee Group 7
  8. 8. Recommandations ? Recommandations Critères Ergonomiques Normes… Interfaces « traditionnelles » Interfaces Web Interfaces immersives Interfaces tactilesKlee Group 8
  9. 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. 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. 11. DES INTERACTIONS PLUS SIMPLES ?Klee Group 11
  12. 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. 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. 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. 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. 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. 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. 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. 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. 20. TactileKlee Group
  21. 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. 22. BONNES PRATIQUES & RECOMMANDATIONSKlee Group 22
  23. 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. 24. http://www.flickr.com/photos/erwan/32004282/in/photostreamKlee Group
  25. 25. IncitationKlee Group 25
  26. 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. 27. Incitation Quitter une application Supprimer une applicationKlee Group 27
  28. 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. 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. 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. 31. Incitation Incitation L’affordanceKlee Group
  32. 32. Groupement / DistinctionKlee Group http://www.flickr.com/photos/alight/104983988/
  33. 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. 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. 35. Gr. Dist. Par la localisation • « + » permettant de créer un nouvel élément est en bas à droiteKlee Group
  36. 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. 37. Feedback immédiatKlee Group
  38. 38. Feedback immédiatKlee Group 38
  39. 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. 40. Klee Group http://www.flickr.com/photos/studiogaro/4963166667/
  41. 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. 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. 43. PauseKlee Group
  44. 44. FlexibilitéKlee Group
  45. 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. 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. 47. Gestion des erreursKlee Group http://www.flickr.com/photos/erwan/43095175/in/photostream/
  48. 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. 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. 50. Contrôle utilisateurKlee Group 52
  51. 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. 52. Homogénéité CohérenceKlee Group http://www.flickr.com/photos/maurice_flower/2606243067/
  53. 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. 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. 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. 56. http://www.flickr.com/photos/erwan/182333545/in/set-148381/ CompatibilitéKlee Group
  57. 57. Compatibilité avec la tâche • Utilisation de métaphore 59Klee Group
  58. 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. 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. 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. 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. 62. FOCUS MÉTHODOLOGIE : LE CONTEXTE D’USAGEKlee Group 64
  63. 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. 64. Méthodologie de conception • Comment trouver les bons leviers d’appropriation d’un futur service ? Analyser le contexte d’usageKlee Group 66
  65. 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. 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. 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. 68. Rappel : Expérience utilisateur / Ergonomie Cible(s) produit adaptéSituation(s) Activité(s)Klee Group 70
  69. 69. Klee Group 71
  70. 70. Contexte Idées Expérience Expertise Maquettage & itération(s)Klee Group 72
  71. 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. 72. Klee Group 74
  73. 73. Remue méningesKlee Group 75
  74. 74. Maquette papier / crayonKlee Group 76
  75. 75. Maquette papier / crayonKlee Group 77
  76. 76. WireframeKlee Group http://www.flickr.com/photos/35468151759@N01/184032078/ 78
  77. 77. Klee Group 79
  78. 78. Klee Group 80
  79. 79. Klee Group 81
  80. 80. BIBLIOGRAPHIE / WEBOGRAPHIEKlee Group 82
  81. 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. 82. Merci de votre attentionKlee Group

×