Your SlideShare is downloading. ×
0
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
conception de site web : introduction à l'analyse fonctionnelle
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

conception de site web : introduction à l'analyse fonctionnelle

14,788

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.

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
1 Comment
7 Likes
Statistics
Notes
  • thanks for this nice presentation, good tips!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
14,788
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
441
Comments
1
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Analyse fonctionnelle
  • 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. Références  Functioning Form : Luke Wreblowski  AskTog  UXmatters  UXnet  Interaction-design.org  User Interface Engineering  Design patterns  designersinteractifs
  • 4. Pour un site web ...
  • 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. Les étapes Arborescence simplifiée du site  Liens top-down : homepage => rubriques => ...  Liens transversaux inter-rubriques
  • 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. 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. 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. 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. 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. Les étapes Wireframe « enrichi » des pages du parcours  En collaboration avec le graphiste  En pensant aux implications techniques
  • 13. Les étapes Wireframe « enrichi » des pages du parcours
  • 14. Les étapes Wireframe « habillé » des pages du parcours usability.about.com totheweb.com
  • 15. Premières étapes Wireframe « enrichi » des pages du parcours barrettcommunication
  • 16. Premières étapes Aparté : organisation visuelle de l'info Luke Wroblewski
  • 17. Premières étapes Aparté : organisation visuelle de l'info Luke Wroblewski
  • 18. Premières étapes Aparté : organisation visuelle de l'info Luke Wroblewski
  • 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. Les étapes
  • 21. Les étapes + présentation du contenu et des interactions  Présentation générale de la page => Objectif => Liste des composants principaux
  • 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. Les étapes + présentation du contenu et des interactions  Présentation d'un composant de niveau N2 => cf N1
  • 24. Les étapes + présentation du contenu et des interactions
  • 25. Les étapes => template de page Wireframe Template graphique Gabarit des contenus
  • 26. Pour une animation hypermédia
  • 27. Les étapes Scénario général  Objectifs utilisateur  Description des séquences Sn1
  • 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. 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. 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. Annexes
  • 32. Nathan SHEDROFF
  • 33. Peter MORVILLE
  • 34. Nathan SHEDROFF
  • 35. Luke WREBLOWSKI

×