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.

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

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

26. Les étapes
+ présentation du contenu et des interactions

27. Les étapes
=> template de page
Wireframe
Template graphique
Gabarit des contenus

28. Pour une animation hypermédia

29. Les étapes
Scénario général
 Objectifs utilisateur
 Description des séquences Sn1

30. 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.)

31. 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..

32. 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

33. Annexes

34. Nathan SHEDROFF

35. Peter MORVILLE

36. Nathan SHEDROFF

37. Luke WREBLOWSKI