CONCEPTION ÉDITORIALE DE SITE WEB EXANE — CFPJ FÉVRIER 2015 @LUCLEGAY

DÉFINIR SON PROJET

PROJET ORGANISÉ

PROJET IMPROVISÉ

TAYLORISME

PLANIFICATION

Gantt

Agile

Agile

XPSCRUMAGILELEAN

XP

PRINCIPES

SIMPLICITÉ

ACCEPTER LE CHANGEMENT

ITÉRATIONS

AMÉLIORATION CONTINUE

ÉCONOMIE

MOBILISER

culture éditoriale

culture métier

culture internet

culture technologique

culture marketing

culture business

cultures ?choc des

ÉVALUER SON PROJET

Technologie & performances temps de chargement, standards web, bugs, portabilité, interopérabilité, scalabilité…

1

Navigation & architecture où-vais-je ? profondeur, nav. horizontale, arborescence, espace-temps, hypertexte…

2

Ergonomie & design graphique 3/10e de secondes, cohérence, lisibilité, multimédia, accessibilité web,identité en phase avec le métier…

3

Contenus & services attractif, pertinent, accessible, réactif, utile, contextualisé, indispensable…

4

Interactivité & fonctionnalités adapté, simple, ludique, social, utile, personnalisable

5

Marketing & visibilité clarté de l’offre, adapté à la cible,mesure de comportement, visibilité, fédérateur, populaire, off-line…

6

LES PHASES D’UN PROJET

1. Etudes 2. Définition 3. Conception

4. Réalisation 5. Lancement 6. Optimisation

1. Etude

Benchmark

Stratégie &

positionnement

Audit existant

Objectifs &

recommandations

1. Etude

Benchmark

Stratégie &

positionnement

Audit existant

Objectifs &

recommandations

Faisabilité

Expression des besoins

AUDIT DE L’EXISTANT

AUDIT ÉDITORIAL

Identification du secteur d'activité

Identification du/des produits

Identité de l'éditeur ou de l’organisation

Adresse et localisation physique

Contenus à jour et datés

Orthographe et grammaire

Mots-clés présents

Contenu hiérarchisés

Ton adapté, en phase avec l’activité

Titres de pages compréhensibles

AUDIT ERGONOMIQUE

Retour accueil / retour haut de page

Menu permanent

Nombre d’entrées

Logique des intitulés navigation

Moteur de recherche

Equilibre éditorial / visuel / publicitaire

Identification des liens

Lisibilité typographique

Contrastes

Usage des couleurs

Cohérence graphique

AUDIT ACCESSIBILITÉ & SEO

Compatibilité navigateurs

Langue indiquée

Adapté aux différents écrans

Balises images "ALT"

Balises "title"

URLs rewriting

Temps de chargement

Appellation des pages

Alternative aux contenus audio et vidéo

http://validator.w3.org/unicorn/

https://reporting.opquast.com/fr/

http://nibbler.silktide.com/

AUDIT D’INTERACTION

Boutons de partage

A lire aussi…

Flux RSS

Inscription Newsletter

CTA (démo, téléchargement…)

Formulaire de contact

Formulaire de feedback

Outils d’interaction (commentaires,

notation, avis, chat intégré…)

Audience

Réputation

Information

Conversations

transactionnel

relationnel

Guy Kawasaki

Êtes-vous leader sur votre marché, ou êtes-vous positionné contre le leader ? ”

“

Indispensable

Différent

0

Indispensable

Différent

0

produit unique,peu utile

Indispensable

Différent

0

produit unique,peu utile

produit commun,trop concurrencé,

faible valeur

Indispensable

Différent

0

produit unique,peu utile

produit commun,trop concurrencé,

faible valeur

Produits ni utiles,

ni différents

Indispensable

Différent

0

produit unique,peu utile

produit commun,trop concurrencé,

faible valeur

Produits ni utiles,

ni différents

Produit de niche adapté

distinctifutile

RÉDUIRE

AUGMENTER

CRÉER

ÉLIMINER

paradigme océan bleu

QUELLE SERA VOTRE RECETTE ?

UN PROJET GLOBAL

IDENTIFIER LES BESOINS

AUDITER L’EXISTANT

QUELS SONT MES OBJECTIFS ?

1. OBJECTIFS 2. CIBLE / VALEUR D’USAGE 3. MODES DE TRAITEMENT 4. DIFFÉRENCIATION 5. PLAN / PÉRIODICITÉ 6. SOURCES & RESSOURCES 7. PROMOTION 8. KPI

CAHIER DES CHARGES

QUELS OBJECTIFS ?

“

”Photo CC : ~ReRod~ http://www.flickr.com/photos/joe_dalton/

LES OBJECTIFSn’ont de sens que si l’on peut les mesurer

Photo CC : ~ReRod~ http://www.flickr.com/photos/joe_dalton/

QUELS SONT LES VOTRES

?

OBJECTIFS A COURT TERME

RESPECT DU BUDGET

RESPECT DU PLANNING

INDICATEURS NON MESURABLES

TAUX DE SATISFACTION

MOTIVATION DES ÉQUIPES

OBJECTIFS A MOYEN TERME

VENDRE NOMBRE RÉSERVATIONS,

NOMBRE DE NUITÉES…

NOTORIÉTÉ NOMBRE DE PAGES VUES,

NOMBRE D’ABONNÉS À LA NEWSLETTER

OU AU FLUX

ELARGIR SA CIBLE NOMBRE DE NOUVEAUX INSCRITS DANS LA CIBLE

INFORMER NOMBRE D’ARTICLES LUS

PARTICIPATION NOMBRE DE COMMENTAIRES,

NOMBRE D’INSCRITS IDENTIFIÉS

• Pages vues, Visiteurs uniques • Temps passé, pages vues par visiteur • Abonnements RSS • Inscrits à la Newsletter • Taux de rebond • Vidéos vues…

Mesure Web

• Nombre de citations, Articles • Commentaires, • Mentions par utilisateurs • Nombre de «Envoyer à un ami» • Liens entrants

Buzz

• Mentions médias hors-ligne • Mentions médias en ligne

Médias

• Nombre de résultats par mot-clé • Nombre de liens référencés, PR • Nombre de «mises à jour»

Moteurs

• Retour utilisateurs • Produits cités ou recommandés

Retours

KPI

Sour

ce :

étu

de

IAB

SRI_

15

_10

_20

10

_Web

.pdf

AFFICHAGE TRANS-FORMATION

TRAFIC

INTER- ACTION

INSCRIP- TION

MEDIAS

DISTRIBU- TION

ROI POST-TESTS

KPI

Sour

ce :

étu

de

IAB

SRI_

15

_10

_20

10

_Web

.pdf

OBJECTIFS A LONG TERME

COMMUNIQUEZ VOS OBJECTIFS

PROJET WEB

AVANT-PROJET

APRÈS-PROJET

DÉFINITION

FAISABILITÉ

CAHIER DES CHARGES

EXPRESSION DES BESOINS

CHOIX DU PRESTATAIRE

SPÉCIFICATIONS

CHOIX DU CMS

DESIGN GRAPHIQUE

DÉVELOPPEMENT

TESTS

RECETTE

DÉPLOIEMENT

PROJET WEB

phasage du projet

définition

réalisation

planification

définition de projet

planification de projet

réalisation

pilotage de projet

CAHIER DES CHARGES

Qui fait quoi, et dans quels délais ?

Un document contractuel

1 – Présentation du projet

Contexte - Historique Objet du projet Organisation du projet - Comité de pilotage - Groupe de projet - Maîtrise d’ouvrage - Maîtrise d’œuvre - Prestataire Environnement du projet - Existant fonctionnel - Existant technique

2 - Description du futur site

Périmètre du projet - Positionnement du futur site - Description générale du projet Description des besoins fonctionnels - Besoins fonctionnels en « front office » - Besoins fonctionnels en « back office » - Points clés fonctionnels Description des besoins techniques - Architecture technique - Configuration logicielle - Configuration matérielle - Sécurité Reprise de l’existant

3 - Prestations attendues

Présentation des prestations attendues Cadre de la réponse - Informations générales - Docs à remettre lors de l’appel d’offre - Bordereau de prix - Critères de choix Contraintes - Contraintes techniques - Contraintes ergonomiques et graphiques

4 - Annexes Planning, protocoles de tests, charte graphique

LES ACTEURS

Comité de pilotage

COMITÉ DE PROJET

CHEF DE PROJET

LES FONCTIONNELS INTERNES

LES PRESTATAIRES

Chef de projet Designer

Développeur

Directeur de projet

Chef de projet

Consultant technique

Consultant fonctionnel

Architecte

Développeurs

Ingénieurs

Créatifs

Directeur de création

Directeur artistique

Graphiste Web designer

Ergonome Directeur éditorial Concepteur-rédacteur

Editeur Monteur vidéo

…

ÉVALUER LES COÛTS

Phase de déploiement

Rédaction appel d’offre

Définition des besoins

Audit des réponses

Choix du prestataire et du framework*

Phase de conception

Phase de développement

Paramétrage et héberg. sur le site de développement

Rédaction du CDCT*

Tests fonctionnels par lot

Ajustements, correctifs, débugg.

Mise en ligne sur le site de production

Période de tests avec le groupe utilisateurs

test et reporting

Analyse du reporting d’évaluation

Ajustements et finalisation avant

version publique

itérations*: Framework : solution modulaire prête à l’emploi. CDCT : cahier des charges technique

Planification Coordination Suivi qualité Tests, validationsPilotage

Phase de déploiement

18 %

18 %

45 %

20 %

22 k€

50 k€

20 k€

20 k€

Phase de conception

Phase de développement

Pilotage

TOTAL 112 k€

Exemple de budget

Fichier : budget_projet-web-exemple.XLS

CONCEVOIR L’ARCHITECTURE DU SITE

besoins utilisateurs

besoins spécifiés

zone de risque

SE METTRE À LA PLACE DU CLIENTPERSONA

http://www.pinterest.com/lucos/personas-template/

http://www.pinterest.com/lucos/personas-template/

http://www.pinterest.com/lucos/personas-template/

CROQUISSKETCH

ZONINGBUILDING BLOCKS

FILAIREWIREFRAME

MAQUETTEMOCKUP

PROTOPROTO- TYPE

ÉTAPES DE CONCEPTION

Design @luclegay

CROQUISSKETCH

CROQUISSKETCH

Wireframe

http://balsamiq.com/assets/video/creativity/creativity.webm

http://balsamiq.com/WIREFRAME

https://www.draw.ioWIREFRAME

http://www.mockflow.com/WIREFRAME

https://cacoo.comWIREFRAME

https://www.gliffy.comWIREFRAME

https://moqups.com/WIREFRAME

https://gomockingbird.comWIREFRAME

WIREFRAME

http://www.designsmix.com/resources/70-free-gui-ui-ux-psd-kits-and-web-elements-for-download/

PATTERN WEB DESIGN

LISTER TOUS LES ÉLÉMENTS1

Numéroter les éléments de la liste

http://www.37signals.com/papers/introtopatterns/

2REGROUPER LES ÉLÉMENTS

EN BRIQUES LOGIQUESEn 5 à 10 ensembles nommés A, B, C…

3HIÉRARCHISER LES BRIQUES

Plus important : C, A, E Nécessaire : B, F, G, I Sûrement utile : H

4DESSINER CHAQUE BRIQUE

A, B, C…En commençant par ordre d’importance

http://designmodo.com/square-free/

ÉLÉMENTS

ÉLÉMENTS

http://designmodo.com/flat-free/

NAVIGATION

http://designmodo.com/square

NAVIGATION

http://designmodo.com/flat-free/

COMPOSANTS

COMPOSANTS

5REGROUPER LES BRIQUES

En disposant chacune des briques

6RÉALISER LE DESIGN RÉEL

Avec Illustrator, Photoshop, ou directement en HTML/CSS

https://vimeo.com/52801258

GRILLE

http://www.pseudosuede.com/gridtest/

http://unsemantic.com/

http://www.problem.se/labs/gridcalc/

dsdsd

3. Conception

fonctionnelle graphique

techniquetests

utilisateurs

spécifications

SPÉCIFICATIONS TECHNIQUES

ftp://lucl.com/Conception/Specifications_techniques.rtf login : ipj PW : formation

SPÉCIFICATIONS FONCTIONNELLES

ftp://lucl.com/Conception/Specifications_fonc.rtf login : ipj PW : formation

VUES UTILISATEURS

interface utilisateur logué

interface visiteur non-logué

interface éditeur

interface administrateur site

interface administration système

interface forum

VUES FONCTIONNELLES

chatter

commenter

site-map

annoter

slide-show

forum RSSLire un article

envoyer à un ami ajouter à mes bookmarks

rechercher votersondage

MODÉLISATION

30 critères pour une notation comparative

30 critères pour une notation comparative

Tests utilisateurs

Tests utilisateurs

Tests utilisateurs

RÉALISATION

dsdsd1. Etudes 2. Définition 3. Conception

4. Réalisation 5. Lancement 6. Optimisation

dsdsd

4. Réalisation

Production

des contenus

Recette

et tests

fonctionnels

Développement

et tests

unitaires

Documentation

Livraison

(version alpha, beta, définitive)

http://schnaps.it/

http://getbootstrap.com

RECETTE

30 critères pour une notation comparative

REPRISE DE L’EXISTANT

LANCEMENT

dsdsd1. Etudes 2. Définition 3. Conception

4. Réalisation 5. Lancement 6. Optimisation

dsdsd

5. Lancement

Hébergement

Formation

Communication

interne

Communication

externe

(on-line/off-line)

Mise en ligne

OPTIMISATION

dsdsd

6. Optimisation

Référencement

Mesure

audience

Feedback

Buzz

marketing

Amélioration

continue