Fondamentaux du  design d’interaction Antoine Visonneau   [email_address]
Pour tordre le cou aux idées reçues
Utilisabilité ? <ul><li>L’utilisabilité (ou plus récemment--et facilement--usabilité[1]) est une notion proche de celle  d...
Axes d’amélioration de l’interaction Système perceptif Système cognitif Système moteur Clarté visuelle Clarté du mode opér...
Principes de conception <ul><li>Simplicité </li></ul><ul><li>Standardiser </li></ul><ul><li>Découverte progressive </li></...
 
‘ Less is more’ Mies van der rohe
Simplicité <ul><li>&quot;La simplicité est la sophistication suprême&quot; </li></ul><ul><li>Leonardo da Vinci </li></ul><...
Standardiser <ul><li>La charte graphique et ergonomique permet de standardiser l’interface. </li></ul><ul><li>Elle défini ...
Standardiser <ul><li>Typographies </li></ul><ul><ul><li>Optimal :  </li></ul></ul><ul><ul><ul><li>corps 9-12 </li></ul></u...
Standardiser <ul><li>Couleurs </li></ul><ul><ul><li>Environ 8-12% des hommes et 0.5% des femmes souffrent d’un handicap da...
Standardiser :  les icônes
iPhone Human Interface Guidelines
Standardiser : Icônes <ul><li>Les icônes bénéficient du ‘picture superiority effect’ : ils sont identifiés et mémorisés pl...
Découverte progressive <ul><li>Construire une entrée progressive dans la complexité. </li></ul><ul><li>Une méthode de conc...
Découverte progressive
Loi de Hicks <ul><li>« Le temps nécessaire à la prise de décision augmente en fonction du nombre d’alternatives » </li></u...
Loi des 80/20 (Principe de Pareto) <ul><li>« 80% de l’utilisation d’un produit repose sur l’utilisation de 20% des fonctio...
Loi des 80/20 (Principe de Pareto)
Loi de Fitts <ul><li>« Le temps nécessaire pour atteindre une cible est fonction de la taille de la cible et la distance à...
Affordance et mapping <ul><li>La présence de la poignée sur la porte de gauche rend nécessaire la présence du label « PUSH...
Guidage « Don’t make me think » Steve Krugg
Solutions de guidage <ul><li>Donner une vue d’ensemble sur le processus (fac.) </li></ul><ul><li>Instruction </li></ul><ul...
Feedback Action    réaction rollover popup Changement de curseur Message de confirmation L’écran a changé beep sablier Ba...
Plaisir et fun <ul><li>Une interface a pour objectif de donner satisfaction à l’utilisateur (et non le punir !!!) </li></u...
Boucle (video games)
But there is more…
Erreur technique <ul><li>Un message d’erreur intervient a posteriori </li></ul><ul><li>Proposer une solution opérationnell...
Google's non-error Messages   <ul><li>For years I have been trying to convince people not to use error messages but rather...
Error no results !!! www.flickr.com
Upcoming SlideShare
Loading in...5
×

030 fondamentaux di

486

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
486
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "030 fondamentaux di"

  1. 1. Fondamentaux du design d’interaction Antoine Visonneau [email_address]
  2. 2. Pour tordre le cou aux idées reçues
  3. 3. Utilisabilité ? <ul><li>L’utilisabilité (ou plus récemment--et facilement--usabilité[1]) est une notion proche de celle d’ergonomie . La norme ISO 9241 la définit comme « le degré selon lequel un produit peut être utilisé , par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité , efficience et satisfaction , dans un contexte d’utilisation spécifié ». Les trois critères de l’utilisabilité soulignés par cette définition sont l’efficacité, l’efficience et la satisfaction. </li></ul><ul><li>L’efficacité désigne le fait que le produit permet à ses utilisateurs d’atteindre le résultat prévu. </li></ul><ul><li>L’efficience ajoute la notion de moindre effort ou de temps minimal requis pour atteindre ce résultat. </li></ul><ul><li>La satisfaction finalement a trait au confort et à l’évaluation subjective de l’interaction pour l’utilisateur. </li></ul>
  4. 4. Axes d’amélioration de l’interaction Système perceptif Système cognitif Système moteur Clarté visuelle Clarté du mode opératoire Facilité d’utilisation Groupement, association, hiérarchie visuelle etc. Économie d’efforts visuels Fait appel à un système connu ou simple à comprendre Économie de neurones  Ne nécessite pas d’être particulièrement adroit. Économie de mouvements
  5. 5. Principes de conception <ul><li>Simplicité </li></ul><ul><li>Standardiser </li></ul><ul><li>Découverte progressive </li></ul><ul><li>Loi de Hicks </li></ul><ul><li>Principe de Pareto </li></ul><ul><li>Loi de Fitts </li></ul><ul><li>Affordance et Mapping </li></ul><ul><li>Plaisir et fun </li></ul>7 8 6 5 4 3 2 1
  6. 7. ‘ Less is more’ Mies van der rohe
  7. 8. Simplicité <ul><li>&quot;La simplicité est la sophistication suprême&quot; </li></ul><ul><li>Leonardo da Vinci </li></ul><ul><li>&quot;La perfection est atteinte, non pas lorsqu'il n'y a plus rien à ajouter, mais lorsqu'il n'y a plus rien à retirer &quot; </li></ul><ul><li>Antoine de Saint-Exupery </li></ul><ul><li>&quot;Simple things should be simple. Complex things should be possible&quot; </li></ul><ul><li>Alan Kay </li></ul><ul><li>&quot;Everything should be made as simple as possible, but not simpler.“ </li></ul><ul><li>Albert Einstein </li></ul><ul><li>We believe that simplicity is crucial to an effective, desirable user experience—but it is always possible to take a good thing too far. </li></ul><ul><li>The essence of simplicity is the reduction or elimination of the unessential. </li></ul><ul><li>Removal of the essential just produces a poor design. </li></ul>
  8. 9. Standardiser <ul><li>La charte graphique et ergonomique permet de standardiser l’interface. </li></ul><ul><li>Elle défini le zoning : l’organisation de l’écran </li></ul><ul><ul><li>Zone de navigation </li></ul></ul><ul><ul><li>Zone de commande (imprimer etc.) </li></ul></ul><ul><ul><li>Zones de contenu… </li></ul></ul><ul><li>Elle défini les codes couleurs et l’apparence. </li></ul><ul><li>L’important est de </li></ul><ul><ul><li>Respecter les règles que vous avez établi. </li></ul></ul><ul><ul><li>Faire en sorte que l’équipe de production les respecte </li></ul></ul>
  9. 10. Standardiser <ul><li>Typographies </li></ul><ul><ul><li>Optimal : </li></ul></ul><ul><ul><ul><li>corps 9-12 </li></ul></ul></ul><ul><ul><ul><li>10-12 mots par ligne (35-55 caractères) >>> (80 caractère) </li></ul></ul></ul><ul><ul><li>Contraste > 70% entre le fond et la texte. </li></ul></ul><ul><ul><li>Pas de différence « ergonomique » entre serif et sans serif </li></ul></ul><ul><ul><li>L’italique est moins lisible </li></ul></ul><ul><ul><li>Les lettres capitales sont moins rapides à lire </li></ul></ul><ul><ul><li>Ne pas surligner (Gras, couleur, etc) plus de 10% du texte. </li></ul></ul>
  10. 11. Standardiser <ul><li>Couleurs </li></ul><ul><ul><li>Environ 8-12% des hommes et 0.5% des femmes souffrent d’un handicap dans la perception des couleurs. La communication d’une information ne doit jamais reposer uniquement sur l’utilisation de la couleur (ex : différence de forme ou position) </li></ul></ul><ul><ul><li>Jamais utiliser rouge sur bleu </li></ul></ul><ul><ul><li>Utilisez un nombre limité de couleur « symboliques » pour parvenir à définir un langage visuel intuitif (ex : dans votre site, les boutons sont orange…) </li></ul></ul><ul><ul><li>Attention à la signification des couleurs et les risques d’interférence </li></ul></ul>
  11. 12. Standardiser : les icônes
  12. 13. iPhone Human Interface Guidelines
  13. 14. Standardiser : Icônes <ul><li>Les icônes bénéficient du ‘picture superiority effect’ : ils sont identifiés et mémorisés plus rapidement. </li></ul><ul><li>Néanmoins, ils peuvent être difficiles à interpréter. </li></ul><ul><li>L’idéal est donc </li></ul><ul><ul><li>d’utiliser un label </li></ul></ul><ul><ul><li>d’accompagner le label d’une icône. </li></ul></ul><ul><li>Remarque : dans les logiciels Microsoft Office, les icônes sont les raccourcis des fonctions rangées dans les menus. (exemple de la fonction imprimer) </li></ul>
  14. 15. Découverte progressive <ul><li>Construire une entrée progressive dans la complexité. </li></ul><ul><li>Une méthode de conception consiste en : </li></ul><ul><ul><li>organiser l’ensemble du contenu et sa mécanique de navigation </li></ul></ul><ul><ul><li>Proposer des remontées d’information sur la page d’accueil. </li></ul></ul><ul><li>Exemple d’application : </li></ul><ul><ul><li>Formulaires de Contact sur Renault.fr </li></ul></ul>Progressive disclosure Lidwell, Holden, Butler Universal Principles of Design, Rockport press
  15. 16. Découverte progressive
  16. 17. Loi de Hicks <ul><li>« Le temps nécessaire à la prise de décision augmente en fonction du nombre d’alternatives » </li></ul><ul><li>Pour augmenter la productivité du système, il faut réduire le nombre d’options présentées. </li></ul><ul><ul><li>Sacrifier des fonctionnalités </li></ul></ul><ul><ul><li>Regrouper des fonctionnalités secondaire dans un sous menu </li></ul></ul>
  17. 18. Loi des 80/20 (Principe de Pareto) <ul><li>« 80% de l’utilisation d’un produit repose sur l’utilisation de 20% des fonctionnalités » </li></ul><ul><li>Assurez vous de bien répartir votre effort. </li></ul><ul><li>Il faut mieux exceller dans les 20% les plus utiles que faire du moyen partout. </li></ul><ul><li>Cela conduit à un meilleur retour sur investissement. </li></ul><ul><li>A la source, cela doit influencer le choix des scénario utilisateurs </li></ul>
  18. 19. Loi des 80/20 (Principe de Pareto)
  19. 20. Loi de Fitts <ul><li>« Le temps nécessaire pour atteindre une cible est fonction de la taille de la cible et la distance à la cible » </li></ul><ul><li>Faites de gros boutons « Fisher Price » </li></ul><ul><li>Si c’est approprié, faite apparaître les menu là ou se trouve la souris (distance à parcourir nulle): </li></ul><ul><ul><li>Menu click droit </li></ul></ul><ul><ul><li>Menu circulaires </li></ul></ul><ul><li>Si c’est approprié, utilisez les angles et les coins (pas besoin de viser) </li></ul><ul><ul><li>Exemple : Ginerativ </li></ul></ul>
  20. 21. Affordance et mapping <ul><li>La présence de la poignée sur la porte de gauche rend nécessaire la présence du label « PUSH » </li></ul><ul><li>À droite, l’absence de poigné enlève l’ambiguité. Le label n’est donc plus nécéssaire. </li></ul><ul><li>Le design est plus épuré. </li></ul><ul><li>Je tourne le volant vers la droite, > la voiture tourne à droite. </li></ul><ul><li>Dans les exemples, quelle organisation produit le meilleur mapping ? </li></ul>affordance Mapping Universal Principles of Design, Rockport press
  21. 22. Guidage « Don’t make me think » Steve Krugg
  22. 23. Solutions de guidage <ul><li>Donner une vue d’ensemble sur le processus (fac.) </li></ul><ul><li>Instruction </li></ul><ul><li>Réduction des actions possibles </li></ul><ul><li>Mise en avant de l’action clés </li></ul>
  23. 24. Feedback Action  réaction rollover popup Changement de curseur Message de confirmation L’écran a changé beep sablier Barre de progression
  24. 25. Plaisir et fun <ul><li>Une interface a pour objectif de donner satisfaction à l’utilisateur (et non le punir !!!) </li></ul><ul><li>La satisfaction vient de </li></ul><ul><ul><li>l’efficacité, (le service rendu) </li></ul></ul><ul><ul><li>l’interaction en elle-même (sensation…ex fluidité). </li></ul></ul><ul><li>l’interaction peut se rapprocher du jeu (ex : Mac OS X) </li></ul><ul><ul><li>limiter au maximum la friction entre la pensée et le résultat </li></ul></ul><ul><ul><li>ne pas imposer de réfléchir/décoder des logiques internes au système </li></ul></ul><ul><ul><li>s’appuyer au maximum sur des schémas connus issus du monde réel (métaphores) ou d’autres logiciels (culture info) </li></ul></ul><ul><ul><li>Ainsi l’utilisateur reconnaît un modèle (pattern) et perfectionne sa maîtrise. </li></ul></ul>  
  25. 26. Boucle (video games)
  26. 27. But there is more…
  27. 28. Erreur technique <ul><li>Un message d’erreur intervient a posteriori </li></ul><ul><li>Proposer une solution opérationnelle </li></ul><ul><li>Pas de bouton ok,mais fermer </li></ul>
  28. 29. Google's non-error Messages <ul><li>For years I have been trying to convince people not to use error messages but rather to interact and explain the problems. Turns an error into a good feeling about Google. What a powerful idea! --- the same philosophy can be applied lots of places, by almost everyone. Eliminate error messages from your system. Always turn an error into an opportunity to help. Norman </li></ul>
  29. 30. Error no results !!! www.flickr.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×