Processus de conception web

Présentation au sujet: "Processus de conception web"— Transcription de la présentation:

1 Processus de conception web
Identification du type de site web et de la clientèle cible Faire une analyse concurrentielle Détermination des catégories avec le tri par carte Storyboard ou diagramme de navigation => fil de fer Décision sur l’architecture du site, les URL et aussi la position des menus. l’ordre des sous-menus, déterminer le tracé régulateur Design web en tenant compte de nos notions d’ergonomie Prototypage:tests de perception et d’utilisabilité Peut-être une analyse eye-tracking ? pour évaluer le résultat

2 Étapes générales Comment: entrevue, analyse concurrentielle, tests
Quel besoins: sujet, fonction, public-cible, standards, etc. Identifier les besoins Conception fonctionnelle Conception ergonomique et graphique Conception Architecture: diagramme, librairies réutilisables, formats et base de données Programmation Réalisation

3 Étapes dans la conception web

4 Analyse concurrentielle
L’analyse concurrentielle, c’est tout simplement l’analyse des sites ou logiciels concurrents AVANT la conception ou la refonte de notre site ou logiciel. Les conclusions de cette analyse sont supposées nous aider dans la conception de notre ergonomie ergonomie.php y/us-analysis.html

5 L’analyse concurrentielle
La planification Déterminer le contexte Déterminer la liste des concurrents Déterminer la liste des questions à poser La conduite de l’analyse On peut imaginer et concevoir des ‘personnages virtuels’ Recherche des points communs Points positifs et/ou points négatifs Navigation, terminologie, rétroaction utilisateur, etc.

6 Tri par cartes

7 Wireframe (fil de fer) Logiciel a la mode: Axure
Autres logiciels: Visio, Creately, Balsamiq, DesignerVista, LucidChart, ProtoShare, Justinmind Prototyper, Adobe Fireworks, OmniGraffle, Mockingbird, HotGloo, Pidoco, Antetype iki/Website_wireframe

8 Storyboard (bande dessinée)
Ressemble au diagramme de navigation mais représente seulement un seul scénario d’utilisation de l’application au lieu de présenter toutes les navigations possibles. Contrairement au diagramme de navigation il présente un schéma esquissé de l’interface. Très utile pour déclencher les spécifications fonctionnelles (requirements elicitation) ou (requirements triggering). krebs/index.html

9 Diagramme de navigation
Il résulte de plusieurs storyboard assemblés de manièere cohérente. fr/library/cc197676%28office.12%29.aspx

10 Prototypage http://www.usabilis.com/methode/test-utilisateur.htm
Prototypage graphique Aussi appelé prototypage horizontal Met en oeuvre le test de perception Prototypage expérience Aussi appelé prototypage vertical Réalisation complète d’un scénario typique d’utilisation du logiciel C’est le test d’utilisabilité

11 Eye-tracking ogique.com/actual ites/actus.php?id_ actu=313 ogique.com/conse ils/conseils.php?id _tip=24