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

É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

Étapes dans la conception web http://www.jktech.com/

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 http://www.ergolab.net/articles/analyse-concurrentielle- ergonomie.php http://www.ibm.com/developerworks/webservices/librar y/us-analysis.html

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.

Tri par cartes

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 http://en.wikipedia.org/w iki/Website_wireframe

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). http://www.ibm.com/developerworks/rational/library/dec05/ krebs/index.html

Diagramme de navigation Il résulte de plusieurs storyboard assemblés de manièere cohérente. http://technet.microsoft.com/fr- fr/library/cc197676%28office.12%29.aspx

Prototypage http://www.usabilis.com/methode/test-utilisateur.htm Prototypage graphique Aussi appelé prototypage horizontal Met en oeuvre le test de perception http://www.usabilis.com/methode/test-perception.htm 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é http://www.usabilis.com/methode/test-utilisateur.htm http://www.usabilis.com/methode/test-utilisateur.htm

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