SlideShare une entreprise Scribd logo
*
 Ergonomie des
Applications Web
     CESI • 4 janvier 2011
*
Mais c’est qui, celui-là ?

    1. contact@madsgraphics.com

    2. @madsgraphics

    3. flickr.com/madsgraphics
*
Qu’est-ce qu’il nous raconte ?
    1. Ergo, Késako ?                 6. A fond les ballons


    2. Bien connaître l’ennemi           1. Les prototypes


    3. /** Pause **/                     2. Les trucs de pros


    4. La base, les règles, voire +      3. Le web pour tous


    5. /** Déjeuner **/               7. /** Pause **/


                                      8. Flameware
*
Générateur de Newsletter Online
(aka ‘‘le fil rouge’’)

    1. Utilise un système de templates     5. Multi-utilisateurs


    2. Souple avec l’utilisation de sub-   6. Multi-sessions

        layouts
                                           7. Destiné à être utilisé par des

    3. Autorise l’import de médias             personnes sans compétence

        (images)                               informatique particulière


    4. Facilite la saisie textuelle sans

        code
Pas de panique, tout
va bien se passer ;)
*
 Back to the future :
Histoire de l’ergonomie
         Web
”L’ensemble des connaissances scientifiques relative

à l’Homme nécessaires pour concevoir des outils,

des machines et des dispositifs qui puissent être

utilisés avec le maximum de confort, de sécurité,

                  et d'efficacité”

                                            Alain Wisner
Ergonomie Générale




Interfaces Homme-Machine (IHM)




Ergonomie des applications informatiques




Ergonomie Web
Utilité                        Utilisabilité




Capter l’utilisateur   Efficacité     Efficience    Satisfaction
*   Non mais quel intérêt,
    franchement, je vous
        demande ?!
Méthodes expertes
*             vs

    Méthodes participatives
*
Soyez bon, soyez beau,
mangez un ergonome au petit
         dejeuner



           *
C’est qui, mon
 internaute ?


     *
Vos utilisateurs :

*   méthode des personas
    1. Personas primaire /

       secondaire
                                     4. informations indispensables :


                                        1. Photo

    2. Conception des personas en
                                        2. Devise
       groupe de travail

                                        3. Orientation sur le projet
    3. Définition des personas par

       granularité progressive
*   Bien concevoir vos personas
    1. Priorisez les fonctionnalités


    2. Abordez les problématiques

       complexes
                                       4. Favorisez l'empathie et les

                                          échanges au sein de l'équipe


                                       5. Titre / nom / devise /

                                          photo sont les éléments
    3. Orientez les tâches sur
                                          indispensables
       l'équipe

                                       6. Restez réalistes
N’assassinez jamais
  vos Personas !

        *
Oui, mais c’est sûr ?


        *
*
Méthode du Card-Sorting
    1. Préparer votre matériel

    2. Cibler vos utilisateurs

    3. 2. 1. ... Triez !

    4. Analyser les résultats

    5. Limites de la méthode
*
Tests utilisateurs

    1. Recruter vos testeurs

    2. Quand tester quoi ?

    3. Analyser les résultats
*
Bonus : la méthode Lean IA
               Prototyper




    Analyser                Tester




                              Livrer
/** Pause **/
*
Allez, on s’y colle pour
       de bon !
C’est quoi, un site
  ergonomique ?


       *
*
Principes de la Gestalt

    1. Principe de proximité
*
Principes de la Gestalt

    1. Principe de proximité




    2. Principe de similarité
*
Loi de Fitts

    1. Augmenter la taille des éléments cliquables

    2. Augmenter la surface de clic

    3. Rapprocher les éléments cliquables
*
Principe d’affordance

    1. Soyez explicite dans les interactions

    2. Encouragez visuellement le contact

    3. Ré-utilisez les apparences quotidiennes
*
Méfiez-vous des idées reçues

    1. Les 3 clics                     4. On le fera en Web2.0,

                                          Ajax, #WhatEverYouWant
    2. Les internautes sont tous des

       nazes                           5. Les internautes ne scrollent

                                          pas
    3. Ergonomie et Design, ennemis

       jurés ?                         6. L’ergo, on verra ça à la fin
*
    Mains dans le
cambouis : c’est parti,
  je fais de l’ergo !
Règle #1 :

*
Architecture & Organisation
    1. Regroupements logiques

    2. Mise en avant des contenus clés

    3. Menus intuitifs

    4. Contenus directifs

    5. Hiérarchie optimisée
Règle #2 :

*
Cohérence & Conventions

    1. Localisations intelligentes

    2. Appellations fiables

    3. Formats de référence

    4. Utilisation des chartes
Règle #3 :

*
Information de l’utilisateur


    1. Le site informe et prévient

    2. Le site répond aux actions de l’utilisateur
Règle #4 :

*
Aide & Gestion des erreurs
    1. Dirigez les actions de l’utilisateur

    2. Assistez votre utilisateur

    3. Fournissez de l’aide

    4. Ne laissez pas la place à l’imprévu

    5. Aidez l’utilisateur à comprendre ses erreurs
Règle #5 :

*
Rapidité d’accès a l’outil

    1. Optimisez les actions

    2. Multipliez les points d’entrée

    3. Facilitez les interactions

    4. DRY : Ne vous répétez pas !
Règle #6 :

*
L’internaute aux commandes

    1. Respectez les contrôles conventionnels

    2. Laissez le choix à l’utilisateur

    3. N’allez jamais à l’encontre des habitudes de votre

       visiteur
*
    Ca va ?
Pas trop mal aux
   cheveux ?
/** Pause **/
Si on essayait,
 maintenant ?


     *
Ne tirez pas sur le Graphiste ...



              *
*
Concepts & enjeux


    1. Respect de l’identité de l’entreprise

    2. Respect des contraintes ergonomiques du prototype

    3. Respect de la sémantique du code
*
  Un plan, c’est bien,
une maison, c’est mieux !
*
Objectifs


    1. Concrétiser les éléments ergonomiques

    2. Rendre l’outil agréable à utiliser

    3. Fidéliser / Monétiser le flux
*
     Mes trucs à moi
parce qu’en vrai, je suis vachement
        sympa comme mec
*
Concevez des
Wireframes
Alla Gouraud • Artagence : Wireframe
Alla Gouraud • Artagence : Rendu final
*
Architecture des mock-ups

    1. Respectez la charte graphique imposée

    2. Utilisez des grilles de mise en forme (960gs,

       blueprint ...)

    3. Choisissez correctement votre typo
*
Les PMR*, sur le web
 comme dans la vie !
*
Accessibilité, un enjeu majeur

    1. Faciliter l’accès au plus grand nombre

    2. Maintenir un code de qualité pour les évolutions

       futures

    3. Améliorer l’utilisabilité de l’ensemble pour tous les

       visiteurs
Une seule norme pour les
    gouverner tous :
       WCAG*
/** Pause **/
*
Lâchez-vous :
 Flameware
*
La boîte à Outils
*
Card-Sorting
    1. xSort (Mac)


    2. WebSort


    3. Optimal Workshop


    4. Du papier, des crayons, un

       polaroïd :)
*
Wireframes
    1. Visio (PC)


    2. Omnigraffle (Mac)
                                6. Pencil (*)


                                7. Outils en ligne


    3. Keynote (Mac)


    4. Illustrator (Mac & PC)


    5. Photoshop (Mac & PC)
*
Mock-Ups
    1. Photoshop (Mac & PC)


    2. Illustrator (Mac & PC)


    3. GIMP (*)


    4. Fireworks (Mac & PC)
*
Architecture
    1. Frameworks Grid System

       (960.gs / Blueprint / YUI)
                                    4. Web Frameworks (SproutCore,

                                       Cappuccino)


    2. Frameworks CSS (YUI,

       jQuery-UI)


    3. Guides typographiques
*
Inspiration
    1. Inspiration Time
        http://inspirationti.me


    2. Trends Now
        http://trendsnow.net/
                                    5. Smashing Magazine
                                       http://smashingmagazine.com


                                    6. Wireframes Magazine

                                       http://wireframes.linowski.ca/

    3. Artskills
                                    7. Wireframe Showcase
        http://www.artskills.net/
                                       http://wireframeshowcase.com
    4. 365 PSD
        http://365psd.com/          8. Twitter

                                       @deaxon / @glazou /@wdfr
*
Add-ons
    1. Kuler


    2. VMware / Virtualbox


    3. Editeur CSS
*   Ressources
1. Ergonomie Web • Amélie Boucher • Ed.

    Eyrolles


2. Interaction home-machine pour les SI •
                                              5. iPhone Human Interface Guidelines • Apple

                                                  Developper portal


                                              6. TUTS+ Network • tutsplus.com

    Christophe Kolski • Ed. Eyrolles
                                              7. Le Typographe • typographe.com

3. Ergonomie Web Illustrée • Amélie Boucher
                                              8. Ergolab • ergolab.net
    • Ed. Eyrolles

                                              9. Projet OPQUAST • opquast.com •
4. Mémento Sites Web : les bonnes pratiques
                                                  opquast.org
    • Elie Sloïm • Ed. Eyrolles
slideshare.net/madsgraphics/
ergonomie-des-applications-web



                            Merci ;)

Contenu connexe

Tendances

Taxonomie TICE d'après Bruillard par S.Delhomenede-S.Mareuil-J.Pochit
Taxonomie TICE d'après Bruillard par S.Delhomenede-S.Mareuil-J.PochitTaxonomie TICE d'après Bruillard par S.Delhomenede-S.Mareuil-J.Pochit
Taxonomie TICE d'après Bruillard par S.Delhomenede-S.Mareuil-J.Pochit
StphanieDel
 
BPH et BPP.pdf
BPH et BPP.pdfBPH et BPP.pdf
BPH et BPP.pdf
AbdellahFettouhi
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
El Habib NFAOUI
 
Services web soap-el-habib-nfaoui
Services web soap-el-habib-nfaouiServices web soap-el-habib-nfaoui
Services web soap-el-habib-nfaoui
El Habib NFAOUI
 
Design para a Internet: projetando a experiência perfeita
Design para a Internet: projetando a experiência perfeitaDesign para a Internet: projetando a experiência perfeita
Design para a Internet: projetando a experiência perfeita
fmemoria
 
HTML
HTMLHTML
HTML
Neovov
 
이은상 개발자 포트폴리오
이은상 개발자 포트폴리오이은상 개발자 포트폴리오
이은상 개발자 포트폴리오
EunsangLee9
 
Cookie replay attack unit wise presentation
Cookie replay attack  unit wise presentationCookie replay attack  unit wise presentation
Cookie replay attack unit wise presentation
Nilu Desai
 
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
Paula Azevedo Macedo
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSS
Samuel Robert
 
Développement Web - Module 1 - Introduction
Développement Web - Module 1 - IntroductionDéveloppement Web - Module 1 - Introduction
Développement Web - Module 1 - IntroductionMohammed Amine Mostefai
 
CV Ingénieur développeur JAVA/EE
CV Ingénieur développeur JAVA/EECV Ingénieur développeur JAVA/EE
CV Ingénieur développeur JAVA/EE
Sid Ahmed Benkraoua
 
Tp2 - WS avec JAXRS
Tp2 - WS avec JAXRSTp2 - WS avec JAXRS
Tp2 - WS avec JAXRS
Lilia Sfaxi
 
Introduction au droit informatique
Introduction au droit informatiqueIntroduction au droit informatique
Introduction au droit informatique
Morgan Magnin
 
Secure Code Review 101
Secure Code Review 101Secure Code Review 101
Secure Code Review 101
Narudom Roongsiriwong, CISSP
 
Créer un Scoop.it pour partager une veille
Créer un Scoop.it pour partager une veilleCréer un Scoop.it pour partager une veille
Créer un Scoop.it pour partager une veille
Gilles Le Page
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
Abdoulaye Dieng
 
Formation Zotero avancée pour doctorants - Isidoct mars 2020 ENS Lyon
Formation Zotero avancée pour doctorants - Isidoct mars 2020 ENS LyonFormation Zotero avancée pour doctorants - Isidoct mars 2020 ENS Lyon
Formation Zotero avancée pour doctorants - Isidoct mars 2020 ENS Lyon
Alain Marois
 
Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022
Renato Melo
 

Tendances (20)

Taxonomie TICE d'après Bruillard par S.Delhomenede-S.Mareuil-J.Pochit
Taxonomie TICE d'après Bruillard par S.Delhomenede-S.Mareuil-J.PochitTaxonomie TICE d'après Bruillard par S.Delhomenede-S.Mareuil-J.Pochit
Taxonomie TICE d'après Bruillard par S.Delhomenede-S.Mareuil-J.Pochit
 
BPH et BPP.pdf
BPH et BPP.pdfBPH et BPP.pdf
BPH et BPP.pdf
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Services web soap-el-habib-nfaoui
Services web soap-el-habib-nfaouiServices web soap-el-habib-nfaoui
Services web soap-el-habib-nfaoui
 
Design para a Internet: projetando a experiência perfeita
Design para a Internet: projetando a experiência perfeitaDesign para a Internet: projetando a experiência perfeita
Design para a Internet: projetando a experiência perfeita
 
HTML
HTMLHTML
HTML
 
이은상 개발자 포트폴리오
이은상 개발자 포트폴리오이은상 개발자 포트폴리오
이은상 개발자 포트폴리오
 
Cookie replay attack unit wise presentation
Cookie replay attack  unit wise presentationCookie replay attack  unit wise presentation
Cookie replay attack unit wise presentation
 
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
O que é Arquitetura de Informação e UX Design: visão de uma bibliotecária inf...
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSS
 
Introduction à la Conception et Evaluation des IHM
Introduction à la Conception et Evaluation des IHMIntroduction à la Conception et Evaluation des IHM
Introduction à la Conception et Evaluation des IHM
 
Développement Web - Module 1 - Introduction
Développement Web - Module 1 - IntroductionDéveloppement Web - Module 1 - Introduction
Développement Web - Module 1 - Introduction
 
CV Ingénieur développeur JAVA/EE
CV Ingénieur développeur JAVA/EECV Ingénieur développeur JAVA/EE
CV Ingénieur développeur JAVA/EE
 
Tp2 - WS avec JAXRS
Tp2 - WS avec JAXRSTp2 - WS avec JAXRS
Tp2 - WS avec JAXRS
 
Introduction au droit informatique
Introduction au droit informatiqueIntroduction au droit informatique
Introduction au droit informatique
 
Secure Code Review 101
Secure Code Review 101Secure Code Review 101
Secure Code Review 101
 
Créer un Scoop.it pour partager une veille
Créer un Scoop.it pour partager une veilleCréer un Scoop.it pour partager une veille
Créer un Scoop.it pour partager une veille
 
Prise en main de WordPress
Prise en main de WordPressPrise en main de WordPress
Prise en main de WordPress
 
Formation Zotero avancée pour doctorants - Isidoct mars 2020 ENS Lyon
Formation Zotero avancée pour doctorants - Isidoct mars 2020 ENS LyonFormation Zotero avancée pour doctorants - Isidoct mars 2020 ENS Lyon
Formation Zotero avancée pour doctorants - Isidoct mars 2020 ENS Lyon
 
Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022
 

En vedette

Étudier les usages du web social
Étudier les usages du web social Étudier les usages du web social
Étudier les usages du web social
Alexandre Coutant
 
Pour une approche dynamique des usages numériques : vers un cadre conceptuel
Pour une approche dynamique des usages numériques : vers un cadre conceptuelPour une approche dynamique des usages numériques : vers un cadre conceptuel
Pour une approche dynamique des usages numériques : vers un cadre conceptuel
JCDomenget
 
Presentation presence sur twitter-domenget
Presentation presence sur twitter-domengetPresentation presence sur twitter-domenget
Presentation presence sur twitter-domenget
JCDomenget
 
Presentation domenget-coutant - cnam juin 2012
Presentation domenget-coutant - cnam juin 2012Presentation domenget-coutant - cnam juin 2012
Presentation domenget-coutant - cnam juin 2012
JCDomenget
 
Construire son e reputation sur twitter
Construire son e reputation sur twitterConstruire son e reputation sur twitter
Construire son e reputation sur twitter
JCDomenget
 
Métiers de la communication : vers des identités professionnelles numériques ?
Métiers de la communication : vers des identités professionnelles numériques ?Métiers de la communication : vers des identités professionnelles numériques ?
Métiers de la communication : vers des identités professionnelles numériques ?
JCDomenget
 
Elevator pitch
Elevator pitchElevator pitch
Elevator pitch
Yuet Wing Kwan
 
Pitching Tips: presentation tips from The Pitching Coach
Pitching Tips: presentation tips from The Pitching CoachPitching Tips: presentation tips from The Pitching Coach
Pitching Tips: presentation tips from The Pitching Coach
garr
 
Startup pitch deck template
Startup pitch deck templateStartup pitch deck template
Startup pitch deck template
Daniele Beccari
 
Extreme Pitch - Quick tips for startupers in a rush
Extreme Pitch - Quick tips for startupers in a rushExtreme Pitch - Quick tips for startupers in a rush
Extreme Pitch - Quick tips for startupers in a rush
Emiland
 
Tutorial STARTup Live Pitch
Tutorial STARTup Live PitchTutorial STARTup Live Pitch
Tutorial STARTup Live Pitch
STARTeurope
 
Tips on How to Pitch
Tips on How to PitchTips on How to Pitch
Tips on How to Pitch
Byron Stanford
 
How To Write A Kick-Ass Business Plan
How To Write A Kick-Ass Business PlanHow To Write A Kick-Ass Business Plan
How To Write A Kick-Ass Business Plan
Fit Small Business
 
Comment réussir son pitch bwa mars 2012
Comment réussir son pitch bwa mars 2012Comment réussir son pitch bwa mars 2012
Comment réussir son pitch bwa mars 2012
Bruno M. Wattenbergh
 

En vedette (14)

Étudier les usages du web social
Étudier les usages du web social Étudier les usages du web social
Étudier les usages du web social
 
Pour une approche dynamique des usages numériques : vers un cadre conceptuel
Pour une approche dynamique des usages numériques : vers un cadre conceptuelPour une approche dynamique des usages numériques : vers un cadre conceptuel
Pour une approche dynamique des usages numériques : vers un cadre conceptuel
 
Presentation presence sur twitter-domenget
Presentation presence sur twitter-domengetPresentation presence sur twitter-domenget
Presentation presence sur twitter-domenget
 
Presentation domenget-coutant - cnam juin 2012
Presentation domenget-coutant - cnam juin 2012Presentation domenget-coutant - cnam juin 2012
Presentation domenget-coutant - cnam juin 2012
 
Construire son e reputation sur twitter
Construire son e reputation sur twitterConstruire son e reputation sur twitter
Construire son e reputation sur twitter
 
Métiers de la communication : vers des identités professionnelles numériques ?
Métiers de la communication : vers des identités professionnelles numériques ?Métiers de la communication : vers des identités professionnelles numériques ?
Métiers de la communication : vers des identités professionnelles numériques ?
 
Elevator pitch
Elevator pitchElevator pitch
Elevator pitch
 
Pitching Tips: presentation tips from The Pitching Coach
Pitching Tips: presentation tips from The Pitching CoachPitching Tips: presentation tips from The Pitching Coach
Pitching Tips: presentation tips from The Pitching Coach
 
Startup pitch deck template
Startup pitch deck templateStartup pitch deck template
Startup pitch deck template
 
Extreme Pitch - Quick tips for startupers in a rush
Extreme Pitch - Quick tips for startupers in a rushExtreme Pitch - Quick tips for startupers in a rush
Extreme Pitch - Quick tips for startupers in a rush
 
Tutorial STARTup Live Pitch
Tutorial STARTup Live PitchTutorial STARTup Live Pitch
Tutorial STARTup Live Pitch
 
Tips on How to Pitch
Tips on How to PitchTips on How to Pitch
Tips on How to Pitch
 
How To Write A Kick-Ass Business Plan
How To Write A Kick-Ass Business PlanHow To Write A Kick-Ass Business Plan
How To Write A Kick-Ass Business Plan
 
Comment réussir son pitch bwa mars 2012
Comment réussir son pitch bwa mars 2012Comment réussir son pitch bwa mars 2012
Comment réussir son pitch bwa mars 2012
 

Similaire à Ergonomie des applications web

Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder RubbikUsability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
La FeWeb
 
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartTwitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
La FeWeb
 
FOF Spécial Webinaire.pdf
FOF Spécial Webinaire.pdfFOF Spécial Webinaire.pdf
FOF Spécial Webinaire.pdf
Friends Of Figma, Cotonou
 
Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014
Loic Nunez
 
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Médiathèque de Roubaix - La Grand-Plage
 
présentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdfprésentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdf
ghiz-
 
Ecrire pour le web v3 cfj2012
Ecrire pour le web v3 cfj2012Ecrire pour le web v3 cfj2012
Ecrire pour le web v3 cfj2012Eric Mettout
 
Méthodologie projet, historique et innovation
Méthodologie projet, historique et innovationMéthodologie projet, historique et innovation
Méthodologie projet, historique et innovation
2le
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
jwajsberg
 
#ET11 - A2-Conduite de projet
#ET11 - A2-Conduite de projet#ET11 - A2-Conduite de projet
Utiliser son traitement de texte pour concevoir un document complexe version def
Utiliser son traitement de texte pour concevoir un document complexe version defUtiliser son traitement de texte pour concevoir un document complexe version def
Utiliser son traitement de texte pour concevoir un document complexe version defMoiraud Jean-Paul
 
B2i Lycee - items explicités
B2i Lycee - items explicitésB2i Lycee - items explicités
B2i Lycee - items explicitésElisabeth Buffard
 
jSeduite "Quickies" au Riviera JUG
jSeduite "Quickies" au Riviera JUGjSeduite "Quickies" au Riviera JUG
jSeduite "Quickies" au Riviera JUG
Sébastien Mosser
 
Le marketing digital pour les nuls et les fauchés !
Le marketing digital pour les nuls et les fauchés !Le marketing digital pour les nuls et les fauchés !
Le marketing digital pour les nuls et les fauchés !
Marseille Innovation
 
"5 fausses idées reçues sur l’UX" par Joel Schillio
"5 fausses idées reçues sur l’UX" par Joel Schillio "5 fausses idées reçues sur l’UX" par Joel Schillio
"5 fausses idées reçues sur l’UX" par Joel Schillio
TheFamily
 
Clermont point cyb-pel-tract-atelier-formationa4-janv-avril2014
Clermont point cyb-pel-tract-atelier-formationa4-janv-avril2014Clermont point cyb-pel-tract-atelier-formationa4-janv-avril2014
Clermont point cyb-pel-tract-atelier-formationa4-janv-avril2014Communication Clermont
 
Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009
Jean Claude GROSJEAN
 
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomiqueCours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
ElodieDescharmes
 

Similaire à Ergonomie des applications web (20)

Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder RubbikUsability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
 
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartTwitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
 
FOF Spécial Webinaire.pdf
FOF Spécial Webinaire.pdfFOF Spécial Webinaire.pdf
FOF Spécial Webinaire.pdf
 
Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014
 
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
Créer un site web ? Méthode illustrée par la médiathèque de Roubaix - PARTIE 1
 
présentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdfprésentation sur la gestion des projets.pdf
présentation sur la gestion des projets.pdf
 
Ecrire pour le web v3 cfj2012
Ecrire pour le web v3 cfj2012Ecrire pour le web v3 cfj2012
Ecrire pour le web v3 cfj2012
 
Méthodologie projet, historique et innovation
Méthodologie projet, historique et innovationMéthodologie projet, historique et innovation
Méthodologie projet, historique et innovation
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
 
#ET11 - A2-Conduite de projet
#ET11 - A2-Conduite de projet#ET11 - A2-Conduite de projet
#ET11 - A2-Conduite de projet
 
Utiliser son traitement de texte pour concevoir un document complexe version def
Utiliser son traitement de texte pour concevoir un document complexe version defUtiliser son traitement de texte pour concevoir un document complexe version def
Utiliser son traitement de texte pour concevoir un document complexe version def
 
B2i Lycee - items explicités
B2i Lycee - items explicitésB2i Lycee - items explicités
B2i Lycee - items explicités
 
jSeduite "Quickies" au Riviera JUG
jSeduite "Quickies" au Riviera JUGjSeduite "Quickies" au Riviera JUG
jSeduite "Quickies" au Riviera JUG
 
Le marketing digital pour les nuls et les fauchés !
Le marketing digital pour les nuls et les fauchés !Le marketing digital pour les nuls et les fauchés !
Le marketing digital pour les nuls et les fauchés !
 
"5 fausses idées reçues sur l’UX" par Joel Schillio
"5 fausses idées reçues sur l’UX" par Joel Schillio "5 fausses idées reçues sur l’UX" par Joel Schillio
"5 fausses idées reçues sur l’UX" par Joel Schillio
 
Clermont point cyb-pel-tract-atelier-formationa4-janv-avril2014
Clermont point cyb-pel-tract-atelier-formationa4-janv-avril2014Clermont point cyb-pel-tract-atelier-formationa4-janv-avril2014
Clermont point cyb-pel-tract-atelier-formationa4-janv-avril2014
 
Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009Grosjean Agile User Experience XP DAY France 2009
Grosjean Agile User Experience XP DAY France 2009
 
ESG - Lesson 5
ESG - Lesson 5ESG - Lesson 5
ESG - Lesson 5
 
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomiqueCours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
Cours ergonomie des IHM web - Chapitre 13 - Audit ergonomique
 
Lacantine 2010-fr -v2
Lacantine 2010-fr -v2Lacantine 2010-fr -v2
Lacantine 2010-fr -v2
 

Dernier

De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
Université de Franche-Comté
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
abderrahimbourimi
 
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
Horgix
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Laurent Speyser
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
AlbertSmithTambwe
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
OCTO Technology
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
UNITECBordeaux
 

Dernier (7)

De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'universitéDe l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
De l'IA comme plagiat à la rédaction d'une « charte IA » à l'université
 
Les écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptxLes écrans informatiques au fil du temps.pptx
Les écrans informatiques au fil du temps.pptx
 
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...
 
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)
 
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptxPRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
PRESENTATION DE L'ACTIVE DIRECTORY SOUS WINDOWS SERVEUR.pptx
 
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...
 
Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024Le support de présentation des Signaux 2024
Le support de présentation des Signaux 2024
 

Ergonomie des applications web

  • 1. * Ergonomie des Applications Web CESI • 4 janvier 2011
  • 2. * Mais c’est qui, celui-là ? 1. contact@madsgraphics.com 2. @madsgraphics 3. flickr.com/madsgraphics
  • 3. * Qu’est-ce qu’il nous raconte ? 1. Ergo, Késako ? 6. A fond les ballons 2. Bien connaître l’ennemi 1. Les prototypes 3. /** Pause **/ 2. Les trucs de pros 4. La base, les règles, voire + 3. Le web pour tous 5. /** Déjeuner **/ 7. /** Pause **/ 8. Flameware
  • 4. * Générateur de Newsletter Online (aka ‘‘le fil rouge’’) 1. Utilise un système de templates 5. Multi-utilisateurs 2. Souple avec l’utilisation de sub- 6. Multi-sessions layouts 7. Destiné à être utilisé par des 3. Autorise l’import de médias personnes sans compétence (images) informatique particulière 4. Facilite la saisie textuelle sans code
  • 5. Pas de panique, tout va bien se passer ;)
  • 6. * Back to the future : Histoire de l’ergonomie Web
  • 7. ”L’ensemble des connaissances scientifiques relative à l’Homme nécessaires pour concevoir des outils, des machines et des dispositifs qui puissent être utilisés avec le maximum de confort, de sécurité, et d'efficacité” Alain Wisner
  • 8. Ergonomie Générale Interfaces Homme-Machine (IHM) Ergonomie des applications informatiques Ergonomie Web
  • 9. Utilité Utilisabilité Capter l’utilisateur Efficacité Efficience Satisfaction
  • 10. * Non mais quel intérêt, franchement, je vous demande ?!
  • 11. Méthodes expertes * vs Méthodes participatives *
  • 12. Soyez bon, soyez beau, mangez un ergonome au petit dejeuner *
  • 13. C’est qui, mon internaute ? *
  • 14. Vos utilisateurs : * méthode des personas 1. Personas primaire / secondaire 4. informations indispensables : 1. Photo 2. Conception des personas en 2. Devise groupe de travail 3. Orientation sur le projet 3. Définition des personas par granularité progressive
  • 15. * Bien concevoir vos personas 1. Priorisez les fonctionnalités 2. Abordez les problématiques complexes 4. Favorisez l'empathie et les échanges au sein de l'équipe 5. Titre / nom / devise / photo sont les éléments 3. Orientez les tâches sur indispensables l'équipe 6. Restez réalistes
  • 16.
  • 17. N’assassinez jamais vos Personas ! *
  • 18. Oui, mais c’est sûr ? *
  • 19. * Méthode du Card-Sorting 1. Préparer votre matériel 2. Cibler vos utilisateurs 3. 2. 1. ... Triez ! 4. Analyser les résultats 5. Limites de la méthode
  • 20. * Tests utilisateurs 1. Recruter vos testeurs 2. Quand tester quoi ? 3. Analyser les résultats
  • 21. * Bonus : la méthode Lean IA Prototyper Analyser Tester Livrer
  • 23. * Allez, on s’y colle pour de bon !
  • 24. C’est quoi, un site ergonomique ? *
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32. * Principes de la Gestalt 1. Principe de proximité
  • 33.
  • 34. * Principes de la Gestalt 1. Principe de proximité 2. Principe de similarité
  • 35.
  • 36. * Loi de Fitts 1. Augmenter la taille des éléments cliquables 2. Augmenter la surface de clic 3. Rapprocher les éléments cliquables
  • 37.
  • 38. * Principe d’affordance 1. Soyez explicite dans les interactions 2. Encouragez visuellement le contact 3. Ré-utilisez les apparences quotidiennes
  • 39.
  • 40.
  • 41.
  • 42. * Méfiez-vous des idées reçues 1. Les 3 clics 4. On le fera en Web2.0, Ajax, #WhatEverYouWant 2. Les internautes sont tous des nazes 5. Les internautes ne scrollent pas 3. Ergonomie et Design, ennemis jurés ? 6. L’ergo, on verra ça à la fin
  • 43. * Mains dans le cambouis : c’est parti, je fais de l’ergo !
  • 44. Règle #1 : * Architecture & Organisation 1. Regroupements logiques 2. Mise en avant des contenus clés 3. Menus intuitifs 4. Contenus directifs 5. Hiérarchie optimisée
  • 45. Règle #2 : * Cohérence & Conventions 1. Localisations intelligentes 2. Appellations fiables 3. Formats de référence 4. Utilisation des chartes
  • 46. Règle #3 : * Information de l’utilisateur 1. Le site informe et prévient 2. Le site répond aux actions de l’utilisateur
  • 47. Règle #4 : * Aide & Gestion des erreurs 1. Dirigez les actions de l’utilisateur 2. Assistez votre utilisateur 3. Fournissez de l’aide 4. Ne laissez pas la place à l’imprévu 5. Aidez l’utilisateur à comprendre ses erreurs
  • 48. Règle #5 : * Rapidité d’accès a l’outil 1. Optimisez les actions 2. Multipliez les points d’entrée 3. Facilitez les interactions 4. DRY : Ne vous répétez pas !
  • 49. Règle #6 : * L’internaute aux commandes 1. Respectez les contrôles conventionnels 2. Laissez le choix à l’utilisateur 3. N’allez jamais à l’encontre des habitudes de votre visiteur
  • 50. * Ca va ? Pas trop mal aux cheveux ?
  • 52. Si on essayait, maintenant ? *
  • 53. Ne tirez pas sur le Graphiste ... *
  • 54. * Concepts & enjeux 1. Respect de l’identité de l’entreprise 2. Respect des contraintes ergonomiques du prototype 3. Respect de la sémantique du code
  • 55. * Un plan, c’est bien, une maison, c’est mieux !
  • 56. * Objectifs 1. Concrétiser les éléments ergonomiques 2. Rendre l’outil agréable à utiliser 3. Fidéliser / Monétiser le flux
  • 57. * Mes trucs à moi parce qu’en vrai, je suis vachement sympa comme mec
  • 59. Alla Gouraud • Artagence : Wireframe
  • 60. Alla Gouraud • Artagence : Rendu final
  • 61.
  • 62. * Architecture des mock-ups 1. Respectez la charte graphique imposée 2. Utilisez des grilles de mise en forme (960gs, blueprint ...) 3. Choisissez correctement votre typo
  • 63. * Les PMR*, sur le web comme dans la vie !
  • 64.
  • 65.
  • 66. * Accessibilité, un enjeu majeur 1. Faciliter l’accès au plus grand nombre 2. Maintenir un code de qualité pour les évolutions futures 3. Améliorer l’utilisabilité de l’ensemble pour tous les visiteurs
  • 67. Une seule norme pour les gouverner tous : WCAG*
  • 70. * La boîte à Outils
  • 71. * Card-Sorting 1. xSort (Mac) 2. WebSort 3. Optimal Workshop 4. Du papier, des crayons, un polaroïd :)
  • 72. * Wireframes 1. Visio (PC) 2. Omnigraffle (Mac) 6. Pencil (*) 7. Outils en ligne 3. Keynote (Mac) 4. Illustrator (Mac & PC) 5. Photoshop (Mac & PC)
  • 73. * Mock-Ups 1. Photoshop (Mac & PC) 2. Illustrator (Mac & PC) 3. GIMP (*) 4. Fireworks (Mac & PC)
  • 74. * Architecture 1. Frameworks Grid System (960.gs / Blueprint / YUI) 4. Web Frameworks (SproutCore, Cappuccino) 2. Frameworks CSS (YUI, jQuery-UI) 3. Guides typographiques
  • 75. * Inspiration 1. Inspiration Time http://inspirationti.me 2. Trends Now http://trendsnow.net/ 5. Smashing Magazine http://smashingmagazine.com 6. Wireframes Magazine http://wireframes.linowski.ca/ 3. Artskills 7. Wireframe Showcase http://www.artskills.net/ http://wireframeshowcase.com 4. 365 PSD http://365psd.com/ 8. Twitter @deaxon / @glazou /@wdfr
  • 76. * Add-ons 1. Kuler 2. VMware / Virtualbox 3. Editeur CSS
  • 77. * Ressources 1. Ergonomie Web • Amélie Boucher • Ed. Eyrolles 2. Interaction home-machine pour les SI • 5. iPhone Human Interface Guidelines • Apple Developper portal 6. TUTS+ Network • tutsplus.com Christophe Kolski • Ed. Eyrolles 7. Le Typographe • typographe.com 3. Ergonomie Web Illustrée • Amélie Boucher 8. Ergolab • ergolab.net • Ed. Eyrolles 9. Projet OPQUAST • opquast.com • 4. Mémento Sites Web : les bonnes pratiques opquast.org • Elie Sloïm • Ed. Eyrolles

Notes de l'éditeur

  1. \n
  2. \n\n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. - Utilité : offrir au visiteur ce qu’il attend\n- Efficacité : l’utilisateur doit réussir à faire ce qu’il veut faire\n- Efficience : l’utilisateur doit pouvoir agir rapidement, sans se tromper\n- Satisfaction : l’utilisateur doit prendre plaisir à venir sur le site\n
  10. - Augmenter le trafic / taux de conversion\n- Faciliter l’accès à l’information\n- Améliorer l’image de marque\n
  11. - Méthode expertes : ergonome expert seul\n- Méthode participative : inclusion de panel d’utilisateur / développement en groupe de travail\n
  12. L’ergonomie est le souci de chacun, tout au long de la durée de vie d’un projet\n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. - Observer pour déceler les grandes tendances\n- Utiliser l’analyse de clusters\n\n+ Rapide, peu coûteuse, retour d’expérience presque immédiat\n- attention bottom-up (données -> mental) vs top-down (mental -> données), très abstrait, base de travail non-générale\n
  20. - tester prototypes (même papier), maquettes, interfaces fonctionnelles, moteur de recherche\n- établir des scenariis => jeu de rôle, objectifs d’utilisabilité\n- Analyser en masse pour déduire une tendance générique\n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. «Une cible est d’autant plus rapide à atteindre qu’elle est proche et grande»\n\n
  37. \n
  38. Affordance : possibilités d’actions suggérées par les caractéristiques de l’objet\n
  39. \n
  40. - champ de recherche peu affordant\n
  41. - champ de recherche peu affordant\n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. Deuteranopia\n
  66. \n
  67. Web Content Accessibility Guidelines\n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n