Analyse fonctionnelle
Objectifs

   Garantir l'utilisabilité du site (usability)
   Anticiper les attentes (ou frustrations) des
    utilisate...
Références
   Functioning Form : Luke Wreblowski
   AskTog
   UXmatters
   UXnet
   Interaction-design.org
   User I...
Pour un site web ...
Les étapes
Définir le « chemin de fer » de la page d'accueil

     Donner une idée du type de contenu que
      l'utilisa...
Les étapes
Arborescence simplifiée du site

     Liens top-down : homepage => rubriques => ...
     Liens transversaux i...
Les étapes
Arborescence simplifiée du site

     Signalétique :
  => le noeud considéré dans l'arbo correspond-il à une p...
Les étapes
Composants de navigation

     Inter-rubriques (menu, breadcrumb, pager, etc)
     Inter-média (coverflow, li...
Les étapes
Composants de navigation




     D'où-je viens ? Qu'est-ce que je peux faire ici ? Où est-ce que je
     peux ...
Les étapes
Scénarisation d'un parcours 1 (HP => R => F)

     L'utilisateur consulte la page d'accueil
     Il décide d'...
Les étapes
Wireframe « enrichi » des pages du parcours

     Enrichissement progressif des wireframes
     Schéma (papie...
Les étapes
Wireframe « enrichi » des pages du parcours

     En collaboration avec le graphiste
     En pensant aux impl...
Les étapes
Wireframe « enrichi » des pages du parcours
Les étapes
Wireframe « habillé » des pages du parcours




usability.about.com    totheweb.com
Premières étapes
Wireframe « enrichi » des pages du parcours




                         barrettcommunication
Premières étapes
Aparté : organisation visuelle de l'info




                            Luke Wroblewski
Premières étapes
Aparté : organisation visuelle de l'info




                            Luke Wroblewski
Premières étapes
Aparté : organisation visuelle de l'info




                            Luke Wroblewski
Les étapes
+ présentation du contenu et des interactions

     Approche « poupée russe »
     Page > composants principa...
Les étapes
Les étapes
+ présentation du contenu et des interactions

     Présentation générale de la page
       => Objectif
      ...
Les étapes
+ présentation du contenu et des interactions

     Présentation d'un composant de niveau N1
      => descript...
Les étapes
+ présentation du contenu et des interactions

     Présentation d'un composant de niveau N2
      => cf N1
Les étapes
+ présentation du contenu et des interactions
Les étapes
=> template de page


Wireframe
Template graphique
Gabarit des contenus
Pour une animation hypermédia
Les étapes
Scénario général

     Objectifs utilisateur
     Description des séquences Sn1
Les étapes
Pour chaque séquence

     Objectifs utilisateur
     Découpage en scènes Sn2 : description :
        Le pla...
Les étapes
Pour chaque séquence

     Objectifs utilisateur
     Découpage en scènes Sn2 : description :
        Conten...
Les étapes
Pour chaque séquence

     Objectifs utilisateur
     Découpage en scènes Sn2 : description :
        Des in...
Annexes
Nathan SHEDROFF
Peter MORVILLE
Nathan SHEDROFF
Luke WREBLOWSKI
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
Prochain SlideShare
Chargement dans…5
×

conception de site web : introduction à l'analyse fonctionnelle

15 969 vues

Publié le

L'analyse fonctionnelle d'un site vise à vérifier que le site sera facilement utilisable et doit permettre d'anticiper les attentes des différents utilisateurs.

Publié dans : Business
1 commentaire
8 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
15 969
Sur SlideShare
0
Issues des intégrations
0
Intégrations
505
Actions
Partages
0
Téléchargements
473
Commentaires
1
J’aime
8
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

conception de site web : introduction à l'analyse fonctionnelle

  1. 1. Analyse fonctionnelle
  2. 2. Objectifs  Garantir l'utilisabilité du site (usability)  Anticiper les attentes (ou frustrations) des utilisateurs  Faciliter la navigation et la réalisation d'activités sur le site
  3. 3. Références  Functioning Form : Luke Wreblowski  AskTog  UXmatters  UXnet  Interaction-design.org  User Interface Engineering  Design patterns  designersinteractifs
  4. 4. Pour un site web ...
  5. 5. Les étapes Définir le « chemin de fer » de la page d'accueil  Donner une idée du type de contenu que l'utilisateur va pouvoir trouver sur le site  « fiche d'identité » visuelle  Y-a-t-il des zooms sur le contenu de certaines rubriques ? Page « événementielle » / « vitrine » / « intro application », etc... :Exemple de wireframe
  6. 6. Les étapes Arborescence simplifiée du site  Liens top-down : homepage => rubriques => ...  Liens transversaux inter-rubriques
  7. 7. Les étapes Arborescence simplifiée du site  Signalétique : => le noeud considéré dans l'arbo correspond-il à une page réelle ou est-ce simplement un noeud pour accéder à des sous rubriques ? => accessibilité : accessible sur tout le site ? uniquement à partir de la page d'accueil ?
  8. 8. Les étapes Composants de navigation  Inter-rubriques (menu, breadcrumb, pager, etc)  Inter-média (coverflow, lightbox, créa perso !! etc...) Exemple breadcrumb coverflow et lightbox http://www.songza.com/ http://www.infosthetics.com/ siderean
  9. 9. Les étapes Composants de navigation D'où-je viens ? Qu'est-ce que je peux faire ici ? Où est-ce que je peux aller ? Comment est-ce que je peux faire marche arrière ?
  10. 10. Les étapes Scénarisation d'un parcours 1 (HP => R => F)  L'utilisateur consulte la page d'accueil  Il décide d'aller voir la rubrique R..  Une fois dans cette rubrique, il consulte la fiche de contenu F...
  11. 11. Les étapes Wireframe « enrichi » des pages du parcours  Enrichissement progressif des wireframes  Schéma (papier) avec nom des blocs > wireframe taille réelle > définitiondu type de composants utilisés > définition des interactions > test avec ajout du contenu mis en forme
  12. 12. Les étapes Wireframe « enrichi » des pages du parcours  En collaboration avec le graphiste  En pensant aux implications techniques
  13. 13. Les étapes Wireframe « enrichi » des pages du parcours
  14. 14. Les étapes Wireframe « habillé » des pages du parcours usability.about.com totheweb.com
  15. 15. Premières étapes Wireframe « enrichi » des pages du parcours barrettcommunication
  16. 16. Premières étapes Aparté : organisation visuelle de l'info Luke Wroblewski
  17. 17. Premières étapes Aparté : organisation visuelle de l'info Luke Wroblewski
  18. 18. Premières étapes Aparté : organisation visuelle de l'info Luke Wroblewski
  19. 19. Les étapes + présentation du contenu et des interactions  Approche « poupée russe »  Page > composants principaux > composants internes aux composants principaux  Un des objectifs : hiérarchiser les interactions
  20. 20. Les étapes
  21. 21. Les étapes + présentation du contenu et des interactions  Présentation générale de la page => Objectif => Liste des composants principaux
  22. 22. Les étapes + présentation du contenu et des interactions  Présentation d'un composant de niveau N1 => description du contenu => description des interactions (rollover, click, drag and drop, etc...) => description de l'état par défaut + séquences
  23. 23. Les étapes + présentation du contenu et des interactions  Présentation d'un composant de niveau N2 => cf N1
  24. 24. Les étapes + présentation du contenu et des interactions
  25. 25. Les étapes => template de page Wireframe Template graphique Gabarit des contenus
  26. 26. Pour une animation hypermédia
  27. 27. Les étapes Scénario général  Objectifs utilisateur  Description des séquences Sn1
  28. 28. Les étapes Pour chaque séquence  Objectifs utilisateur  Découpage en scènes Sn2 : description :  Le plan => cadrage (d'ensemble, moyen, zoom) => angle de vue (aérien, contre-plongé, etc.) => mouvement (panoramique, travelling, etc.)
  29. 29. Les étapes Pour chaque séquence  Objectifs utilisateur  Découpage en scènes Sn2 : description :  Contenu média => accompagnement sonore => inclusion de séquence vidéo, etc..
  30. 30. Les étapes Pour chaque séquence  Objectifs utilisateur  Découpage en scènes Sn2 : description :  Des interactions => type d'interaction => résultat de l'interaction
  31. 31. Annexes
  32. 32. Nathan SHEDROFF
  33. 33. Peter MORVILLE
  34. 34. Nathan SHEDROFF
  35. 35. Luke WREBLOWSKI

×