Analyse fonctionnelle

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

Références
 Functioning Form : Luke Wreblowski
 AskTog
 UXmatters
 UXnet
 Interaction-design.org
 User Interface Engineering
 Design patterns
 designersinteractifs

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'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

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

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 ?

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

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 ?

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

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

Les étapes
Wireframe « enrichi » des pages du parcours
 En collaboration avec le graphiste
 En pensant aux implications techniques

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 principaux > composants
internes aux composants principaux
 Un des objectifs : hiérarchiser les interactions

Les étapes

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

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

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 plan
=> cadrage (d'ensemble, moyen, zoom)
=> angle de vue (aérien, contre-plongé, etc.)
=> mouvement (panoramique, travelling, etc.)

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

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

Annexes

Nathan SHEDROFF

Peter MORVILLE

Nathan SHEDROFF

Luke WREBLOWSKI