Processus de conception

← Les principes · 25 diapositives · flèches ou clic pour avancer

PROCESSUS DE CONCEPTION
ÉTAPES GÉNÉRALES DE CONCEPTION - Comment: entrevue, analyse concurrentielle, tests - Quel besoins: sujet, fonction, public-cible, standards, etc. - 1 - Identification des besoins - Conception fonctionnelle - Conception ergonomique et graphique - 2 – Spécification du logiciel - Architecture: diagramme, librairies réutilisables, formats et base de données - Programmation - 3 - Réalisation
ÉTAPES DANS LA CONCEPTION WEB - http://www.jktech.com
http://www.uxmatters.com/mt/archives/2013/06/tools-for-mobile-ux-design.php - ÉTAPES DANS LA CONCEPTION MOBILE
http://www.ibm.com/developerworks/rational/library/05/1129_donatelli/ - ÉTAPES SELON IBM
Spécification - NOTRE OBJECTIF
ACTIVITÉS DE CONCEPTION - Identification des besoins - Identification du type de site web et de la clientèle cible - Poursuite d’une analyse concurrentielle - Détermination des catégories avec le tri par carte - Storyboard ou diagramme de navigation => fil de fer - Spécification du logiciel - Décision sur l’architecture du site: URL et menus - Déterminer le tracé régulateur - Design web…
IDENTIFICATION DES BESOINS - COMMENT DES IDENTIFIERS - Ce que les utilisateurs veulent…
ANALYSE CONCURRENTIELLE - C’est tout simplement l’analyse des sites ou logiciels concurrents AVANT la conception ou la refonte de notre site ou logiciel - La planification - La planification - Déterminer le contexte - Déterminer la liste des concurrents - Déterminer la liste des questions à poser - La conduite de l’analyse - La conduite de l’analyse - On peut imaginer et concevoir des…
SPÉCIFICATION DU LOGICIEL - OUTILS POUR ANALYSER AVANT - Comment les utilisateurs le veulent…
PROTOTYPAGE - Aussi appelé prototypage horizontal - Met en oeuvre le test de perception - http://www.usabilis.com/methode/test-perception.htm - Prototypage graphique - 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 - Prototypage expérience -…
TRI PAR CARTES - http://fr.wikipedia.org/wiki/Tri_par_cartes - http://www.usabilis.com/methode/tri-par-carte.htm - http://www.ergolab.net/articles/tri-cartes-ergonomie-web.php
DES VUES D’UN MÊME PROJET ! - La vue générale de tous les noms d’écran avec les flèches - L a vue détaillée d’un écran, avec parfois le graphisme initial - Diagramme de navigation - Maquette (mock-up) - Une vue du déroulement d’ une utilisation ou navigation avec plus de détails (aussi scénarimage) - L a vue détaillée de tous les écrans avec la navigation qui marche - Bande dessinée (storyboard)…
DIFFÉRENCES ENTRE LES VISUELS - Fil de fer - Wireframe - Storyboard - Storyboard - Storyboard - Diagramme denavigation - Fil de fer (wireframe) - Scénario (Storyboard) - Maquette (Mock-up) - Un diagramme de navigation est moins détaillé qu’un fil de fer - Le diagramme de navigation et le fil de fer comprennent plusieurs scénarios ou storyboard - Tous ces diagrammes comprennent des maquettes…
FIL DE FER (WIREFRAME) - Prototype cliquable avec les dispositions des éléments dans chaque écran - Présente parfois une vue globale de type diagramme de navigation - Logiciels: Axure, Visio, Creately, Balsamiq, DesignerVista, LucidChart, ProtoShare, Justinmind Prototyper, Adobe Fireworks, OmniGraffle, Mockingbird, HotGloo, Pidoco, Antetype - http://en.wikipedia.org/wiki/Website_wireframe
BANDE DESSINÉE (STORYBOARD) - 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, requirements…
DIAGRAMME DE NAVIGATION - Il résulte de plusieurs storyboard assemblés de manière cohérente. - Vue haut niveau des liens de navigations entre tous les écrans d’un site. - Les écrans ne sont généralement pas dessinés mais ils sont nommés. Les noms sont consistants avec la documentation. - http://technet.microsoft.com/fr-fr/library/cc197676%28office.12%29.aspx -…
PROTOTYPAGE - Storyboard - C’est un scénario d’une seule utilisation du logiciel comme une bande dessinée des écrans - Fil de fer - C’est un vrai prototype cliquable avec les schémas détaillés de tous les écrans (nom, éléments ui, disposition) - Diagramme de navigation - C’est une vue générale des liens entre tous les écrans, on doit seulement les nommer mais on ne les dessine généralement pas -…
CORRESPONDANCES UML - Diagramme d’activité - Aucune - Diagramme de navigation - Maquette (mock-up) - Diagramme de séquence d’un cas d’utilisation - Diagramme d’activité - Bande dessinée (storyboard) - Fil de fer (wireframe)
DES ARTICLES INTÉRESSANTS - Book Excerpt: the User Experience Team of One - http://uxmag.com/articles/book-excerpt-the-user-experience-team-of-one - Requirements Envisioning: An agile Best Practice - http://www.agilemodeling.com/essays/initialRequirementsModeling.htm - (Un)Visual Specifications - http://www.targetprocess.com/articles/visual-specifications.html - Creating Mock-up -…
APRÈS LA RÉALISATION - OUTILS POUR ANALYSER APRÈS - Ce que les utilisateurs aiment…
FLUX DE VISITEURS - http://analytics.blogspot.ca/2011/10/introducing-flow-visualization.html
TEST DE CHEMINS - Avec Selenium - http://pivotallabs.com/happy-path-testing-with-selenium-rc-fu/
EYE-TRACKING - http://www.ergologique.com/actualites/actus.php?id_actu=313 - http://www.ergologique.com/conseils/conseils.php?id_tip=24
Vos utilisateurs vous remercient…