conception de site web : introduction à l'analyse fonctionnelle
DESCRIPTION
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.TRANSCRIPT
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...)
http://www.songza.com/http://www.infosthetics.com/siderean
Exemple breadcrumbcoverflow et lightbox
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
+ présentation du contenu et des interactions
Les étapes
=> template de page
Wireframe
Template graphique
Gabarit des contenus
Les étapes
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