Processus de développement du site Web

Introduction au commerce électronique
Rayport, Jaworski
Séance 9
Processus de développement de
sites Web
Copyright © 2003 by Marketspace LLC
CONFIDENTIAL
Objectifs
Ils sont :

Revoir les considérations majeurs en matière de planification et
développement du site Web

Tracer les grandes lignes du processus de mise en oeuvre du site Web

Tracer les grandes lignes de la phase (test/correction/lancement) du cycle
de développement du site
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Processus de développement du site Web

Questions à l’étude avant d’entreprendre le projet

Processus de développement du site

Une définition de l’expérience client

Processus de développement de l’architecture

Implentation

Processus de test/correction

Lancement
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Questions à l’étude avant d’entreprendre le projet
Temps
 Quel est l’échéancier, est-I flexible ?
 Pouvons-nous étaller l’échéancier et les livrables et si oui, quelles sont les priorités et
pourquoi ?
Budget
 Quel est le budget ? Quelles sont les hypothèses derrière ce budget ?
 Avons-nous assez d’argent pour embaucher des ressources externes ?
 Pouvons-nous impartir (totallement et/ou partiellement)?




Ressources
Avons-nous le bon mix de compétences à l’interne pour livrer le projet ?
Avons-nous le bon mix de compétences compte tenu de l’échéancier ?
Les ressources sont-elles disponibles?
Quelle est l’importance relative du projet vs d’autres projets qui nécessitent les mêmes
ressources?
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Processus de développement du site Web

Questions à l’étude avant d’entreprendre le projet

Processus de développement du site

Une définition de l’expérience client

Processus de développement de l’architecture

Implentation

Processus de test/correction

Lancement
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Processus de développement du site
Stratégie
Définition de l’expérience client
Design de l’architecture
Implentation
Test/corrections
Lancement
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Plan de projet
Mar 31, '02
13
2
ID
Task Name
Duration
1
Acm e.com Version 1.0
145 days?
2
3
User Experience Definition
Audience Definition
5 days
5
Brainstorm user intentions
5 days
6
Brainstorm features / functions to satisfy intentions
5 days
7
Test assumptions on intentions
5 days
8
Test assumptions on f eatures / functions
9
Build user personea guides
10 days
10
Develop Functional Matrix
10 days
11
Develop Audience Definition Findings Document
15
Site Architecture
16
Nav Model
2 days
17
Directory Structure
2 days
18
Page inventory
2 days
19
Content Matrix
20
Page Schematics
5 days?
24
Develop Visual Identity System
25
Develop Style Guide
80 days
Existing Technology Discovery
10 days
29
Gather Technical Development Requirements
10 days
1wk
1wk
45 days
1wk
33
Findings Validation
34
Visual Design Development
2 w ks
35
Interface Development
4 w ks
36
Application Development
8 w ks
65 days
8 w ks
38
Unit Testing
39
Component Integration Testing
5 days
40
UI Integration Testing
5 days
41
Integration Testing
5 days
42
Systems Testing
5 days
43
Performance and Stress Testing
5 days
44
Go Live
26
2 w ks
Technical Discovery and Definition
Testing
Feb 2, '03
15
4
85 days
28
37
24
2 w ks
27
Im plem entation
Jan 5, '03
13
2
30 days?
15 days
32
Dec 8, '02
22
11
5 days
Develop Interface Findings Document
Live Environment Setup
30
10 days
23
31
Nov 10, '02
19
8
5 days
Gather Interface Development Requirements
Development Environment Setup
Oct 13, '02
28
17
10 days
22
30
6
10 days
Process Flow s
Architecture Design Process
Sep 15, '02
25
14
10 days
Create Functional Matrix
26
Aug 18, '02
3
23
12
25 days
14
Visual Definition
Jul 21, '02
1
21
5 days
13
21
Jun 23, '02
10
29
18
45 days
ID initial audience groups
Functional Definition
May 26, '02
7
27
70 days?
4
12
Apr 28, '02
16
5
24
5 days
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Processus de développement du site Web

Questions à l’étude avant d’entreprendre le projet

Processus de développement du site

Une définition de l’expérience client

Processus de développement de l’architecture

Implentation

Processus de test/correction

Lancement
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Profil du client type
User Profile: Cindy the College Student
Personal Profile
Age:
Education:
Car:
Shops at:
20
4 years of high school
Saturn SC1
Old Navy, Starbucks, Abercrombie and Fitch,
Gap, Newbury Comics, Tower Records
Occupation
Job:
Company Size
Company Industry:
Typical Task on Acme.com:
Familiarity with Acme:
Usage Scenario Description:
Full-Time Student
N/A
N/A
Product Research and Purchase
Somewhat familiar: Cindy has seen Acme's ads and a few
of her friends have computers from Acme
Cindy needs a computer, but is uncertain as to
what her options are—she is a bit afraid of the
whole process, to be honest. Her parents have
agreed to buy her a computer, but have told her
that she needs to do the research.
Reason for choosing to work with
Acme:
Recommendations from her friends, cool-looking
computers, good price, and Acme appears to be
an easy, no-pressure company to buy from—a
company that will take care of her.
Desired Experience:
Cindy wants to be able to research her computer
options, understand the pros and cons, and buy
a computer.
But, she wants to buy a computer that is at least
as cool as her friends‘ computers, so she would like
to be able to make a case to her parents for a
slightly better computer than what she might
actually need.
When she decides what to buy, she would like to
understand the financing options available to
her.
Key Points:
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Matrice d’intentions
Intentions
Needs
(Features and Functions)
Actions
(user objectives)
Acme's business objectives
Research and Buy a Computer
Cindy needs a computer, but is uncertain as to Lookup Products
what her options are. She needs to be able to
show her parents the options that she has, and - General Product Information
ideally let them purchase the computer for her. - Quick comparison of products
Get Product Information
Increase customer base
Learn the differences between products and product options
Educate customer to better understand benefits of the technology
Upsell / Crosssell customers into new products / peripherals
- Upgrade and Accessory information
Leverage user's circle of community to advertise Acme
Research the Technology
- System to explain what the system pieces are
and how they compare to each other
- Have products suggested based on needs
Have a product suggested to her based on her needs
Pick the System
Show friends what system she is getting
- Pick a solution's)
Show parent's 2-3 systems and have them buy one - pursuade them to
buy the better machine
- configure / customize the system
- Store picked solutions for viewing later / sharing
to parents / friends
- Allow friends/parents to vote on system if she
can't make up her mind
Buy the System
Buy the best system she can get
- Send Parents to her customized computer to
have them buy it on her behalf
Check Purchase Status
tech support - knowledge base, documentation, troubleshooting wizard, live car
contact information
customer service - ram, swap parts
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Matrice fonctionelle vs spécifications fonctionelles
Buts de la matrice fonctionnelle :
 Définir l’envergure du projet et construire le plan de projet
 Communiquer avec : l’équipe de direction, l’équipe projet (incluant les
ressources externes
 Enregistrer les améliorations potentielles, au fur et à mesure qu’on les
découvre au fil du développement
 Planifier les versions subséquentes, incluant les fonctionalités futures et fixer
les priorités
Buts des spécifications fonctionnelles :
 Fournir un design détaillé des processus du system et des pages Web
 Provide details of the life cycle of different objects (search, payments, etc.)
 Définir les détails de chaque page (les champs, leur validation, les sources
de données… )
 Définir les actions de chaque page (save shopping cart, send e-mail, update
account, checkout)
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Processus de développement du site Web

Questions à l’étude avant d’entreprendre le projet

Processus de développement du site

Une définition de l’expérience client

Processus de développement de l’architecture

Implentation

Processus de test/correction

Lancement
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Exemple d’une carte de site
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Schéma d’une page
LOG OUT | ABOUT ACME | FAQ’S | FEEDBACK | SITE MAP | HELP | REGISTER
ACME LOGO
PRODUCT
SELECTOR
LOG IN:
USER NAME:
PASSWORD:
GO
SITE SEARCH
Select Product Type
GO
Select Product Use
GO
Select Search Filter
MY PRODUCTS
PRODUCT INFO
MY ACCOUNT
FEATURED PRODUCTS
SALE PRODUCTS
NEWS ALERTS
1.
2.
3.
4.
5.
6.
ACER(BENQ) 3210 32XR/10X-RW/40X-RD EIDE
AOPEN 17" LCD TFT
MONITOR WITH SPEAKER
ASUS A7V333 VIA KT333
CHIPSET ULTRA ATA133
CANON S900 COLOR
BUBBLEJET PHOTO
PRINTER
D-LINK DI-704P
BROADBAND GATEWAY
DSL/CABLE ROUTER
INTEL BOXD845GBVL
INTEL 845G CHIPSET
ULTRA ATA100
1.
2.
3.
4.
5.
AMD ATHLON 1100MHZ
1.1GHZ (A1100AMS3B)
200MHZ OEM W/O
COOLING FAN (1 YEAR
WARRANTY)
EZCAM EZ PHONE CAM
EZ-389 640X480 USB
DIGITAL CAMERA
EZCAM EZDUAL EZ-308
640X480 USB DIGITAL
CAMERA
INTEL PLAY ME2CAM
VIRTUAL GAME SYSTEM
INTEL/XIRCOM
CWE1130NA WIRELESS
MOBILE ADAPTER
TITLE HEADER
Lorem ipsum dolit sum torim
del gotto colli elum podin del
accum sum to dolit tel gorum
elum at podin accum sum
ipsum dolit sum tutorim del
gotto podin accum sum. Uto
lorem ipsum dolit sum torim
del gotto colli elum podin
MORE >.
Site Map | Terms Of Use | Privacy Policy
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Découvertes techniques
L’équipe de développement doit considérer les facteurs suivants pendant la phase de
découvertes techniques :
 Discussions avec l’équipe technique (interne et ses partenaires externes)
 Les objectifs d’affaires du site
 Le ‘’User persona’’
 Technologies existantes
 Compétences internes
 Intentions des utilisateurs
 Temps et budgets
 Traffic
 Exigences en matière de disponibilité du système
 Exigences en matière de sécurité
Ces facteurs mènent à …..
L’élaboration d’un document sommaire décrivant :




Les systèmes corporatifs existants
Différence entre le site proposé et celui des concurrents
Concept de l’architecture technique pour supporter le site Web
Une analyse et des recommandations à l’égard des composantes logiciel à utiliser
pendant le processus de développement
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Pour ou contre le design rapide
Les sites qui méritent un design
rapide partagent les
caractéristiques suivantes :




Ils sont relativement petits
Le design visuel se fait
rapidement avec un minimum de
contraintes
Le contenu est relativement
statique
Le nombre de visiteurs sera
relativement limité
Les sites qui méritent un design
structuré, plus long et laborieux
partagent les caractéristiques
suivantes :





Ils sont dynamiques font un usage
intensif de bases de données
Ils ont une forte composante
commerce électronique
Le design visuel est sophistiqué
Le site fait un usage considérable
du contenu
On attend un nombre important de
visiteurs
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Processus de développement du site Web

Questions à l’étude avant d’entreprendre le projet

Processus de développement du site

Une définition de l’expérience client

Processus de développement de l’architecture

Implentation

Processus de test/correction

Lancement
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Étapes d’implantation
Validation

Finaliser le design visuel, tester le systéme de design et la navigation grâce à un
prototype opérationel
Phase de construction

En préparatin de la construction, l’équipe doit décider:
– Du ou des langages de programmation à utiliser
– De l’architecture du matériel et du logiciel
Design de la page

Le design visuel est appliqué à chaque pages

Les pages sont uniques et/ou on utilise des gabarits
Développement de l’interface

L’interface doit s’intégrer au développement de l’application et au design visuel
Dévelopment des applications

Créez une liste des capacités requises et établir les priorités pour chaque
fonctionalités

Développez les modules

Test
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Processus de développement du site Web

Questions à l’étude avant d’entreprendre le projet

Processus de développement du site

Une définition de l’expérience client

Processus de développement de l’architecture

Implentation

Processus de test/correction

Lancement
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Processus de test/correction
Un script de test est développé
The tester is guided through a use case and the test
script describes how the module, page, or process must
be tested.
Le code passe le test
Le code ne passe pas le test
The test spans to integration testing, where the
functionality of multiple code modules is tested
Le code passe le test
Le code ne passe pas le test
Bug est identifié
Bug est corrigé
Test complété pour cette partie
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Nombre de ‘’bug’’ pendant la période de test
Bugs
160
140
120
Bugs
100
Bugs
80
60
40
20
0
1
3
5
7
9 11 13 15 17 19 21 23 25 27 29 31 33 35 37 39 41 43 45 47 49 51 53 55 57 59
Days
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Processus de développement du site Web

Questions à l’étude avant d’entreprendre le projet

Processus de développement du site

Une définition de l’expérience client

Processus de développement de l’architecture

Implentation

Processus de test/correction

Lancement
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC
Lancement
Travail pré lancement :




Selection de la maison d’hébergement
Mise en route et test des serveurs
Test de connectivité
Audit de sécurité du site
Last Updated: 08/19/03
Copyright  2003 by Marketspace LLC