conception de site web : introduction à l'analyse fonctionnelle

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