Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

conception de site web : introduction à l'analyse fonctionnelle

17,497 views

Published on

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.

Published in: Business
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • thanks for this nice presentation, good tips!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×