Pour un web facilement utilisable
Upcoming SlideShare
Loading in...5
×
 
  • 913 views

Cette présentation, donnée par Salim Gomri et Guillaume Gronier, membres de l'association France-Luxembourg Usability Professionals' Association (FLUPA) a pour objectif de décrire les principales ...

Cette présentation, donnée par Salim Gomri et Guillaume Gronier, membres de l'association France-Luxembourg Usability Professionals' Association (FLUPA) a pour objectif de décrire les principales étapes d'une conception centrée sur l'utilisateur dans le cadre du développement d'un site Web. En 5 méthodes et 45 minutes, découvrez comment mettre en oeuvre un site web facilement utilisable !

Statistics

Views

Total Views
913
Views on SlideShare
913
Embed Views
0

Actions

Likes
0
Downloads
30
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Pour un web facilement utilisable Pour un web facilement utilisable Presentation Transcript

  • Pour un Web facilement utilisableSalim Gomri Guillaume Gronier www.flupa.eu 1
  • Un mot sur FLUPA... www.flupa.eu 2
  • FLUPA : France & Luxembourg (60 membres) Luxembourg Paris Grenoble www.flupa.eu 3
  • Les objectifs de FLUPA• Promouvoir l’Ergonomie des Interfaces Homme-Machine (utilité et utilisabilité) et l’Expérience Utilisateur• Sensibiliser à la démarche ergonomique - conception centrée sur l’utilisateur• Animer un réseau de professionnels www.flupa.eu 4
  • Les activités de FLUPA• Organisation de Petits Déj’ : • Maquettage • Interfaces Tactiles • Persuasive design • Eye tracking •…• Organisation d’Ateliers • Définir ses utilisateurs • Réaliser un tri de cartes• World Usability Day• Barbecue www.flupa.eu 5
  • Nous contacter...• Site Web www.flupa.eu• Forum forum.flupa.eu/phpbb/• Twitter twitter.com/assoFlupa• Newsletter• Devenir membre : www.flupa.eu/contenu/adhesion www.flupa.eu 6
  • Introduction Utilisabilitéet conception centrée utilisateur www.flupa.eu 7
  • Pourquoi concevoir pour l’utilisateur ?• Améliorer la satisfaction www.flupa.eu 8
  • Pourquoi concevoir pour l’utilisateur ?• Améliorer la satisfaction• Renforcer l’efficacité www.flupa.eu 9
  • Pourquoi concevoir pour l’utilisateur ?• Améliorer la satisfaction• Renforcer l’efficacité• Renforcer la sécurité www.flupa.eu 10
  • Pourquoi concevoir pour l’utilisateur ?• Améliorer la satisfaction• Renforcer l’efficacité• Renforcer la sécurité• Garantir sa compétitivité (ROI) www.flupa.eu 11
  • Qu’est-ce que l’utilisabilité ? (ISO 9241-11)• « un système est utilisable lorsquil permet à lutilisateur de réaliser sa tâche avec efficacité, efficience et satisfaction dans un contexte dutilisation spécifié » www.flupa.eu 12
  • Conception Centrée Utilisateur (CCU) : une démarche itérative (ISO 13407) Planifier le processus de conception centrée utilisateur FIN 1 Comprendre et spécifier le contexte d’utilisation les exigences sont atteintes les exigences ne sont pas atteintes 4 2 Evaluer les solutions au Comprendre et spécifier regard des exigences les exigences utilisateurs prédéfinies et organisationnelles 3 Produire des solutions de conception www.flupa.eu 13
  • Les 5 méthodes incontournables !en 30 minutes montre en main www.flupa.eu 14
  • Choisir sa cible Organiser l’information Concevoir l’interface Evaluer a priori Evaluer a posteriori www.flupa.eu 15
  • Choisir sa cible Organiser l’information Concevoir l’interface Evaluer a priori Evaluer a posteriori www.flupa.eu 16
  • Bien choisir sa cible définir le profilde ses (futurs)utilisateurs www.flupa.eu 17
  • Bien choisir sa cible• Qui sont les utilisateurs ? • Motivations • Expériences : Connaissances des tâches à réaliser • Compétences • Préférences www.flupa.eu 18
  • Bien choisir sa cible• Ses goûts, ses préférences • Proposer des choix d’interfaces différents• Ex: pour le web, laissez le choix d’un thème, css... openweb www.flupa.eu 19
  • Bien choisir sa cible• Contraintes matérielles • Ecran • Tactile? Web? www.flupa.eu 20
  • Bien choisir sa cible• Résolution d’écran > 1024 1024 800 640 Date Autres... * 768 * 768 * 600 * 480 Janvier 85,1 % 13,8 % 0,6 % 0,0 % 0,5 % 2011 source : w3school www.flupa.eu 21
  • Bien choisir sa cible : comment faire ?• Méthode des Personas • Fiche d’identité d’une catégorie d’utilisateurs• Entretien ou questionnaire www.flupa.eu 22
  • Choisir sa cible Organiser l’information Concevoir l’interface Evaluer a priori Evaluer a posteriori www.flupa.eu 23
  • Organiser l’information Le tri de cartes www.flupa.eu 24
  • Le tri de cartes• Cette méthode permet de comprendre comment l’individu organisent mentalement les informations• Idéal pour définir la structure d’un site ! www.flupa.eu 25
  • Le tri de cartes• Il consiste à donner un ensemble de cartes comportant des morceaux de contenu à un participant• Celui-ci va avoir pour tâche de regrouper par piles les cartes dont les contenus lui semblent proches• Une fois les piles établies, il peut-être demandé de les nommer www.flupa.eu 26
  • Le tri de cartes• Chaque élément de la liste est reporté sur une carte• Une description textuelle ou imagée peut être ajoutée• Noter un numéro ou une lettre au dos ou dans un coin de chaque carte pour faciliter l’analyse des données• Faire passer le tri de carte à au moins 5 participants www.flupa.eu 27
  • Tri de cartes : créer • De façon simple, papier/crayonPanier Archive Chercher Payer News Mail Contact Adresse Accueil www.flupa.eu 28
  • Tri de cartes : participer • De façon simple, papier/crayonPanier Contact Accueil ArchivePayer Mail Chercher Adresse News www.flupa.eu 29
  • Tri de cartes : catégoriser • De façon simple, papier/crayonAchat Contact Home ArchivePanier Contact Accueil ArchivePayer Mail Chercher Adresse News www.flupa.eu 30
  • Tri de cartes : analyser www.flupa.eu 31
  • Tri de cartes• Via un outil en ligne• Exemple: websort.net • Créer • Participer • Analyser www.flupa.eu 32
  • Choisir sa cible Organiser l’information Concevoir l’interface Evaluer a priori Evaluer a posteriori www.flupa.eu 33
  • Concevoir l’interface Le maquettage www.flupa.eu 34
  • Concevoir l’interface Ergonomie de conception Ergonomie de correctionDegré d’intervention Analyse ergonomique Conception et développement Déroulement du projet www.flupa.eu 35
  • Concevoir l’interface• Maquette basse fidélité • papier crayon www.flupa.eu 36
  • Concevoir l’interface• Maquette basse fidélité • Ex.: Balsamiq Mockup www.flupa.eu 37
  • Concevoir l’interface• Maquette haute fidélité • Ex.: Axure www.flupa.eu 38
  • Concevoir l’interface• Maquette haute fidélité • Ex.: Photoshop www.flupa.eu 39
  • Choisir sa cible Organiser l’information Concevoir l’interface Evaluer a priori Evaluer a posteriori www.flupa.eu 40
  • Evaluer l’interface a priori L’application de critères ergonomiques www.flupa.eu 41
  • Les 10 recommandations de Nielsen1. La visibilité de l’état du système2. Lien entre le système et le monde réel3. Contrôle et liberté de l’utilisateur4. Homogénéité et standards5. Prévenir l’erreur www.flupa.eu 42
  • Les 10 recommandations de Nielsen6. Reconnaître plutôt que se rappeler7. Flexibilité et efficacité d’utilisation8. Esthétique et design minimal9. Aider l’utilisateur à reconnaître, diagnostiquer et comprendre ses erreurs10. Aide et documentation www.flupa.eu 43
  • Les critères ergonomiques de Bastien & ScapinGuidage Gestion des erreursCharge de travail Homogénéité et cohérenceContrôle explicite Signifiance des codes et dénominationAdaptabilité Compatibilité http://www.ergoweb.ca/criteres.html icones : http://salimgomri.free.fr www.flupa.eu 44
  • Les critères ergonomiques• Appel à un ami expert Menu à la verticale pas très lisible www.flupa.eu 45
  • Les critères ergonomiques Comment couper le son et laissez jouer l’introduction? www.flupa.eu 46
  • Les critères ergonomiques www.flupa.eu 47
  • Choisir sa cible Organiser l’information Concevoir l’interface Evaluer a priori Evaluer a posteriori www.flupa.eu 48
  • Evaluer l’interface à posteriori Les tests utilisateurs www.flupa.eu 49
  • Le prototype• Confronter les choix de conception à la réalité du terrain• Ne pas mettre l’utilisateur devant le fait accompli• Sensibiliser le concepteur à la logique de l’utilisateur• Détecter précocement les problèmes• Mettre en évidence des besoins en matière d’aides logicielles www.flupa.eu 50
  • Le prototype Utilisation Enregistrement Analyse et Aménagementd’un prototype des données interprétation de l’interface • population • performances • difficultés • solutions possibles • tâche • opinions • défauts • solutions choisies www.flupa.eu 51
  • Le test utilisateur : définition• Il est une mise en situation, qui vise à étudier les comportements des utilisateurs face à l’interface• Il est la base même de l’intervention ergonomique !• Il va permettre de mesurer la performance de l’utilisateur face à l’interface www.flupa.eu 52
  • Le test utilisateur : définition• Il est souvent compléter par : • un entretien semi-directif (debriefing) • un questionnaire de satisfaction (SUS, QUIS, WAMI, CSUQ) www.flupa.eu 53
  • Le SUS : System Usability Scale www.flupa.eu 54
  • Les tests utilisateurs• Ce qu’il vous faut au moins : • papier/crayon www.flupa.eu 55
  • Les tests utilisateurs• Ce qu’il vous faut au moins : • papier/crayon• Amateur aguerri : • camera • ordinateur www.flupa.eu 56
  • Les tests utilisateurs• Ce qu’il vous faut au moins : • papier/crayon• Amateur aguerri : • camera • ordinateur• Devenir un pro autonome : • Screenflow www.flupa.eu 57
  • Les tests utilisateurs• Ce qu’il vous faut au moins : • papier/crayon• Amateur aguerri : • camera • ordinateur• Devenir un pro autonome : • Screenflow• Devenir un pro : • le laboratoire d’utilisabilité www.flupa.eu 58
  • Conclusion Quelques ouvrageset ce que vous avez retenu ! www.flupa.eu 59
  • Mesure de l’utilisabilité des interfaces Thierry Baccino Catherine Bellino Teresa Colombi 70 € www.flupa.eu 60
  • Concevoir un produit facile à utiliser Eric Brangier Javier Barcenilla 32 € www.flupa.eu 61
  • Ergonomie du logiciel et design web Jean-François Nogier +- 40 € www.flupa.eu 62
  • QUIZ ! Question 1• Prendre en compte les utilisateurs dans la conception de son site web... A. je le fais si j’ai le temps B. ça ne sert à rien ! C. utile, mais pas indispensable D. indispensable si je veux que mon site soit utilisé par quelqu’un d’autre que moi ! www.flupa.eu 63
  • QUIZ ! Question 1• Prendre en compte les utilisateurs dans la conception de son site web... A. je le fais si j’ai le temps B. ça ne sert à rien ! C. utile, mais pas indispensable D. indispensable si je veux que mon site soit utilisé par quelqu’un d’autre que moi ! www.flupa.eu 64
  • QUIZ ! Question 2• Le tri de cartes sert à... A. jouer à la belote B. organiser les informations de mon site web C. s’amuser si j’ai du temps D. rien www.flupa.eu 65
  • QUIZ ! Question 2• Le tri de cartes sert à... A. jouer à la belote B. organiser les informations de mon site web C. s’amuser si j’ai du temps D. rien www.flupa.eu 66
  • QUIZ ! Question 3• Le maquettage peut servir... A. à créer de jolis bateaux B. à créer de beaux avions C. à réaliser une première ébauche d’un site web D. réponse D www.flupa.eu 67
  • QUIZ ! Question 3• Le maquettage peut servir... A. à créer de jolis bateaux B. à créer de beaux avions C. à réaliser une première ébauche d’un site web D. réponse D www.flupa.eu 68
  • QUIZ ! Question 4• On peut évaluer l’ergonomie d’un site à partir... A. du bon sens B. de la direction du vent C. des recommandations du manager D. de critères ergonomiques www.flupa.eu 69
  • QUIZ ! Question 4• On peut évaluer l’ergonomie d’un site à partir... A. du bon sens B. de la direction du vent C. des recommandations du manager D. de critères ergonomiques www.flupa.eu 70
  • QUIZ ! Question 5• Les tests utilisateurs servent à... A. tester l’ergonomie d’un site web B. à regarder les autres travailler C. plein de choses, et plus encore ! D. évaluer les connaissances des utilisateurs www.flupa.eu 71
  • QUIZ ! Question 5• Les tests utilisateurs servent à... A. tester l’ergonomie d’un site web B. à regarder les autres travailler C. plein de choses, et plus encore ! D. évaluer les connaissances des utilisateurs www.flupa.eu 72
  • Merci de votre attention ! www.flupa.eu 73