advertisement

conception de site web : introduction à l'analyse fonctionnelle

67 %
33 %
advertisement
Information about conception de site web : introduction à l'analyse fonctionnelle

Published on February 4, 2008

Author: laureno

Source: slideshare.net

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

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

Add a comment

Related pages

Analyse fonctionnelle externe - Jackadit

Analyse fonctionnelle externe Introduction. ... éco-conception. Les outils de l’analyse ... généralement dans l’analyse fonctionnelle. ...
Read more

Cours d'analyse fonctionnelle 1/5 - YouTube

Cours d'analyse fonctionnelle : introduction et ... voir mon site http://goo ... Formation à l'analyse fonctionnelle par l'exemple ...
Read more

Maîtrise (professionnelle ou recherche) en GÉNIE CIVIL ...

... d'oxydation et de traitements avancés à la conception fonctionnelle d'une installation ... Site Web : http://moodle ... Introduction à l'analyse d ...
Read more

PPT – OUTILS PROJETS : Analyse Fonctionnelle PowerPoint ...

Introduction à l'analyse ... Conception et mise en њuvre d’un outil de suivi ... "OUTILS PROJETS : Analyse Fonctionnelle" is the property of ...
Read more

Exercices Corriges De Sadt : en pdf : 20 Sources

... Le Segway Individu Déplacements de l'individu en ville Segway ®®®® Permettre à ... Bienvenue Sur Le Site Web ... de l?analyse fonctionnelle ...
Read more

Modélisation fonctionnelle adaptée à l’analyse des ...

Modélisation fonctionnelle adaptée à l’analyse des risques en radiothérapie ... Introduction Afin de limiter les ... activités de spécification ...
Read more

Conception de nouvelles molécules à activité ...

... steric interactions and lipophilic settings concerned within the active site of the receiver. ... Conception de nouvelles molécules à activité sérot...
Read more

Jackadit

L’analyse fonctionnelle dans l’éco-conception; ... Règles pour l'accessibilité des contenus Web ... Éco-conception; Introduction à la métrologie;
Read more