Conception des Sites Web Marchands et Mobiles

Chapitre I : Méthodologie de conduite d’un projet

Conception des Sites Web Marchands et Mobiles

@Nassim BAHRI

École Supérieure d'Économie Numérique - Université de la Manouba

Méthodologie de conduite d’un projet

Introduction

Introduction

Projet informatique

Un projet est un ensemble d’actions à entreprendre afin de répondre à un besoins défini dans des délais fixés, mobilisant des ressources humaines et matérielles et possédant un coût.

Étapes de réalisation d'un projet

Phase 1Analyse des besoins et Spécification
Phase 2Conception
Phase 3Implémentation
Validation et Vérification
Livraison et Maintenance

Phase 1 : La définition du projet

La définition est la phase la plus importante d'un projet. Cette phase permet d'identifier le périmètre initial du projet et d'établir l'organisation et les moyens nécessaires à sa mise en œuvre.

Phase 1 : La définition du projet

Étude préalable

L'étude préalable est l'étude du quoi, du quand et du pourquoi? Cela consiste essentiellement à collecter et à analyser les informations relatives au lancement du projet. Ces dernières doivent permettre d'analyser la nature du marché et d'identifier les besoins existants. Des entretiens réguliers avec le client sont indispensables.

Phase 1 : La définition du projet

Étude préalable

L'étude doit répondre principalement aux questions suivantes :

Phase 1 : La définition du projet

Étude préalable

Mais aussi :

Phase 1 : La définition du projet

TypesDescription
Les sites marchandsIls permettent l'achat et la vente de produits et services en ligne. On peut également accéder au catalogue d’une entreprise.
Les sites InstitutionnelsIls permettent d’accéder à des informations sur les entreprises, les collectivités locales, les organisations Internationales ou les organisations gouvernementales.

Phase 1 : La définition du projet

TypesDescription
Les sites thématiquesIl s’agit de sites Internet traitant de sujets bien précis comme la sécurité informatique, la cuisine italienne ou l’art numérique.
Les portails généralistesLes portails généralistes traitent de tous types d’information : actualité, dossiers et autres.
Les sites de streamingPermettent d’écouter de la musique ou de voir des films en ligne.

Phase 1 : La définition du projet

TypesDescription
Les sites d’associationsLes sites d’associations s’adressent le plus souvent à un grand nombre de personnes qui s’intéressent à des activités spécifiques, comme le tourisme, la randonnée et autres.
Les sites promotionnels ou événementielsIls font la promotion d’un événement particulier, leur durée de vie peut être en fonction de la durée de l’événement.

Phase 1 : La définition du projet

TypesDescription
Les Blog ou les pages persoLes blog permettent aux internautes de s’exprimer librement sur la toile. Ils peuvent donner leur avis sur des questions politiques, des événements, et autres. C’est une sorte de journal intime, plus ou moins ouvert. Il existe également des blog très sérieux qui permettent de suivre l’information. Le but est de faire réagir les lecteurs aux publications grâce à un système de commentaires.

Phase 1 : La définition du projet

TypesDescription
Les books ou les portfoliosLes books et les portfolios permettent aux artistes de se faire connaître. Le book est souvent utilisé par les mannequins tandis que les portfolios sont utilisés par les artistes ou par des étudiants souvent à la recherche d’emploi. Le but est de mettre en avant leurs réalisations ou travaux.
Les réseaux sociauxIls donnent la possibilité aux Internautes de se réunir autour de la toile et d’échanger sur des sujets particuliers.

Phase 1 : La définition du projet

Le plan projet

Les informations recueillies doivent donc être synthétisées dans un document qu'on nomme généralement plan projet. Ce document prend naissance à partir de l'expression du besoin pour être ensuite complété par l'analyse de ce besoin. Il est destiné à rendre explicite le projet à l'ensemble des acteurs concernés y compris et surtout l'équipe de réalisation.
Il contient :

Phase 1 : La définition du projet

Le plan projet

Phase 1 : La définition du projet

Le plan projet

Phase 1 : La définition du projet

FonctionRôle
Chef de projetIl coordonne l’ensemble des activités et assure la liaison entre le client et les équipes travaillant sur le projet.
DéveloppeurIl programme les applications, il peut y avoir plusieurs développeurs sur un projet car les langages de programmation peuvent être différents en fonction des projets.
WebdesignerIl est spécialisé dans le dessin numérique et s’occupe du design des sites Internet.

Phase 1 : La définition du projet

FonctionRôle
IntégrateurIl fait la liaison entre le développeur et le designer. Son rôle est de découper le design fabriqué par le webdesigner pour l’intégrer au programme.
ErgonomeIl s’occupe de l’ergonomie des applications et met l’accent sur les questions d’accessibilité très en vogue depuis quelques années maintenant.
Chargé de contenuIl s’occupe de la rédaction du contenu du site Internet.

Phase 1 : La définition du projet

FonctionRôle
Chargé de référencementIl s’occupe du référencement du site Internet, définit les mots clés et travaille en étroite collaboration avec le chargé de contenu. Il est chargé de mettre en place les différentes techniques de référencement pour assurer une meilleur position du site Internet sur les moteurs de recherches.
Community managerIl intervient généralement sur les sites communautaires, son rôle est d’assurer la gestion de ces sites en dirigeant l’ensemble de la communauté.

Phase 1 : La définition du projet

Le plan projet

Phase 1 : La définition du projet

Fig. Planning du projet (Exemple 1)

Phase 1 : La définition du projet

Fig. Planning du projet (Exemple 2)

Phase 1 : La définition du projet

Fig. Planning du projet (Exemple 3)

Phase 1 : La définition du projet

Le plan projet

Phase 2 : Conception site web

Conception fonctionnelle
Conception technique
Conception graphique ou visuelle

Phase 2 : Conception site web

Conception fonctionnelle

Les spécifications fonctionnelles ont pour objectif de décrire le plus précisément possible la future application (ou site web).

Le but est de se donner les moyens d'appréhender rapidement le fonctionnement général et de comprendre chaque détail de chaque fonctionnalité. Le tableau suivant résume les différentes parties constitutives des spécifications fonctionnelles.

Phase 2 : Conception site web

PartieDescriptif
ContextePrésentation de l'idée du projet. Le but est d'expliquer la raison d'être du projet.
Contraintes fonctionnellesContenu des spécifications fonctionnelles.
Principe généralPour être efficace, il est important de garder à l'esprit que le prestataire ne connaît pas le projet. Un effort de synthèse doit donc être réalisé de manière à ne pas noyer sous un dialogue de détails, inutile à ce stade.

Phase 2 : Conception site web

PartieDescriptif
Détails de chaque fonctionnalitésCette partie doit être le plus détaillée possible. Elle constitue le cœur des spécifications fonctionnelles.
Contraintes techniquesCette dernière partie constitue un mini cahier des charges techniques qui permet au prestataire réalisant les développements de respecter les choix opérés lors de l'étude de faisabilité.

Phase 2 : Conception site web

Conception technique

La conception technique est l'une des étapes fondamentales du projet. Elle se déroule en trois étapes : la formalisation de l'architecture, la modélisation puis la rédaction des spécifications techniques détaillées.

L'architecture d'une solution web (idem pour les solutions mobiles) est décrite à travers son architecture applicative, technique et matérielles. Ces différentes vues vont de la plus conceptuelle à la plus concrète.

Phase 2 : Conception site web

Conception technique : L'architecture applicative

L'architecture applicative répond à un double enjeu : aider les concepteurs d'un logiciel à en maîtriser sa complexité et garantir la maintenance et l'évolutivité de la solution. Le modèle le plus connu est l'architecture 3-tiers :

Phase 2 : Conception site web

Conception technique : L'architecture applicative

Fig. Architecture 2-Tiers

Phase 2 : Conception site web

Conception technique : L'architecture applicative

Fig. Architecture 3-Tiers

Phase 2 : Conception site web

Conception technique : L'architecture applicative

Fig. Architecture n-Tiers

Phase 2 : Conception site web

Conception technique : L'architecture logicielle

L'architecture logicielle décrit les différentes applications, leurs indépendances et les règles associés. Pour le projet web, elle comprend en général :

Phase 2 : Conception site web

Conception technique : L'architecture logicielle

Fig. Architecture logicielle

Phase 2 : Conception site web

Conception technique : L'architecture matérielle

L'architecture matérielle matérielle décrit les ordinateurs (poste client, serveur,...) et les réseaux sollicités par la solution. Elle permet de dimensionner précisément le budget et d'effectuer des choix stratégiques tels que l'hébergement.

Phase 2 : Conception site web

Conception technique : L'architecture matérielle

Fig. Architecture matérielle

Phase 2 : Conception site web

Conception visuelle

Il s'agit de définir en premier lieu un plan du site. Ensuite, les trames des pages sont élaborées. Ces dernières doivent représenter conceptuellement l'agencement des informations et le positionnement des objets (images, bouton,...).

Phase 2 : Conception site web

Conception visuelle

Fig. Prototypage d'un site web

Phase 2 : Conception site web

Conception visuelle

Fig. Prototypage d'une application mobile

Phase 2 : Conception site web

Conception visuelle

Exemples des outils de prototypage :

Phase 3 : La réalisation technique

Développement

En première étape, le maquette du site est réalisée en fonction des spécifications rédigées au cours de la conception. Grâce à un outil spécifique, les trames des pages seront découpées en HTML, les images converties au format png ou jpeg.

Vient ensuite le développement de l'application finale. Le système est développé par morceaux dépendant les uns des autres. L'éqyupe de développement devra aussi optimiser les ressources selon leurs expertises.

Phase 3 : La réalisation technique

Tests

Il comporte trois types de tests qui doivent être choisi selon la nature du projet :

Phase 3 : La réalisation technique

Tests : Le test du concept

Il a pour utilité de valider les grandes options de la conception avant de passe à la conception technique. Dans la plupart des cas, des ajustement seront nécessaires. Selon l'ampleur de ces ajustements, il pourra être utile de tester à nouveau le concept.
En fonction de la nature du projet, les objectifs seront bien sûr affinés : validation de l'accès aux services dans le cas d'un portail, validation de la mise en œuvre des rubriques , validation de la composition des fiches produits et du processus d'achat dans le cas d'un site marchand...

Phase 3 : La réalisation technique

Tests : Le test de la maquette ou du prototype

Ce test est à mener avant de valider définitivement la maquette HTML ou le prototype. Il a pour objectif de valider l'organisation et l'ergonomie générales. Le verdict final doit être l'acceptation ou un rejet motivé.

Phase 3 : La réalisation technique

Tests : Le test d'utilisation

Ce test est à réaliser en complément du test de la maquette ou du prototype soit parce que le projet est complexe ou stratégique soir parce que les premiers tests ont révélé des faiblesse ergonomiques.

L'objectif du test d'utilisation est de déterminer les frictions qui apparaissent lors de l'utilisation du site et si possible d'en comprendre les causes.

Phase 4 : La mise en ligne du site

Une fois les tests finalisés, il s'agit maintenant de mettre le site à la disposition des utilisateurs sur internet ainsi que dans l'entreprise.
Le processus d'exploitation du site et ses données est établi. Il concernera aussi la répartition des tâches de maintenance et de leur périodicité.

Pour chaque aspect, le comité devra sauter sur le fait de confier ces tâches à une entité interne (webmaster, service informatique, service de marketing,...) ou externe (entreprise spécialisée dans l'infogérance, agence de communication,...) dans le but de garantir la continuité du site web.

Phase 4 : La mise en ligne du site

Une documentation associée à la formation sur l'outil back office doit être mise en disponibilité.

Questions?