1

Atelier projet Web

2

Objectifs de l’atelier

Compétences pilotage d'un projet Web Etude des besoins Stratégie des contenus et des services Navigation et ergonomie Planification et budget Pilotage des métiers

3

Le chef de projet

Le chef de projet en entreprise:- Il intervient en amont du projet dans la phase de création, sur la

faisabilité du projet, les aspects stratégiques, éditoriaux, financiers et juridique.

- Il coordonne la réalisation du projet et en assure ensuite l’animation.

- Il ne dispose pas de connaissances techniques approfondies mais doit suivre « l’état de l’art » en matière de technologies web.

Qualités nécessaires: sens de l'organisation, rigueur, méthode, management, goût du contact et réactivité.

4

Letimotivs du chef de projet Respect de l’objectif qualité Respect de l’objectif temps Respect de l’objectif argent Communication Vision utilisateur Bon sens Fiabilité Clarté Exhaustivité

5

Musts d’un site Web

Vocation Liberté Facilité Rapidité Espace Ciblage Harmonisation Actualisation Compatibilité Esthétique

6

Un site, pour quoi faire ?

7

vendre promouvoir l'image servir une communauté (échanges) diffuser des connaissances (médias et

encyclopédies) partager des connaissances recruter (salariés ou prospects) augmenter la mobilité assurer le SAV réduire les coûts internes gérer ou anticiper une crise

Un site peut servir à :

8

Un site d’identité ?70% image de marque, 15% offre, 15%

ergonomie

Un site de e-commerce ?60% produits, 30% ergonomie, 10% image

Un site communautaire ?70% services, 20% ergonomie, 10% image

X personnalités de site, x démarches

9

Processus changement

Ce à quoi on veut arriver

Situationactuelle

Changements nécessaires

10

Graphisme

Besoins

Cahier de conception

Objectifs

Publics

Analyse technique

Services

Contenus

Scénarios

Développements

Gabarits

Intégration

Mise en production

Planification

Mesure résultats

Benchmark

11

Contenu du cahier des chargesCe qu’on voudrait et à quelles conditions

Objet du cahier Présentation générale de

la problématique Enoncé du besoin Environnement Fonctions de service

principales et complémentaires

Contraintes

Critères d’appréciation Cadre de réponse Budget escompté ? Planning escompté ?

12

Contenu du cahier de conceptionCe que le client veut et comment on va le faire

Descriptif et objectifs du projet

Contexte Publics cibles et besoins Expression fonctionnelle

des besoins

Structure du site Structure des pages Ressources matérielles Ressources humaines Budget Planning

13

Organisation des contenus Plan du site Services Consultations types Rôles Navigation Zoning des pages essentielles Définition des noms et intitulés Contenus

Ce dont informaticiens et graphistes ont besoin de notre part…

14

• Qui sont les utilisateurs ?• De quoi ont-ils besoin ?• Quelle expérience doivent-ils connaître ?• En quelle durée ?• A quel prix ?• Avec quelles priorités ?

Etude des besoins

15

Se mettre dans la peau de l’utilisateur »

J’ai besoin de… Je cherche la réponse à… Chez « qui » suis-je ? (arrivée

Google) Où suis-je dans le site ? Je peux faire quoi ? Ce lien…, ça fait quoi ? Je peux aller où ? Comment retourner à …? Ai-je tout vu - tout compris ?

16

Vos publics / leurs besoins

… … … … … …

17

Contenus et services

18

• Examiner les contenus disponibles• Site web• Brochures• Rapports• …

• Distinguer leurs fonctions• Découvrir• S’informer• Soutenir un produit ou service• …

Contenus

19

A quels besoins peuvent-ils répondre ?• Obtenir une réponse• Obtenir un service• Obtenir un produit• Réserver, s’inscrire• Acheter• Contacter• …

• Avec quelles priorités ?• Associés à quels contenus ?• Gérés par quelles fonctionnalités ?

Services

20

Evaluation des services

Service Faisabilité Importance Urgence

21

Architecture

22

Création d’une arborescence

A partir des contenus existants et à créer, Découpez-les et disposez-les sur une table, Cherchez à créer des ensemble en fonction

de dénominateurs communs, Répétez l’exercice avec divers groupes, Concluez en gardant ce qui fait le plus sens

et respecte le confort de visite.

Attention: un plan de site est une vision du monde, pas la réalité…

23

Outils arborescence

Logiciel « Inspiration » « Word » (permet la participation du client) Mind mapping (ex: « Freemind ») En ligne: www.bubbl.us

24

Navigation

25

Mission navigation

« Il s’agit de développerdes systèmes de navigationcohérents et efficacesen matière de navigation,de présentation graphique,d’organisation des pageset d’intitulésafin que l’utilisateursache à tout moment où il se trouve, où aller,et qu’il soit encouragé à revenir… »

Peter Morville, Web Review

26

Faciliter l’accès à l’information Offrir une vue d’ensemble de la proposition, Donner une idée des volumes d’information, Permettre le choix entre l’essentiel et

approfondir, Offrir divers langages (textes, photos,

diagrammes, vidéos, sons, …), Offrir des sources complémentaires, Distinguer entre le site, les documents et

l’extérieur, Donner les moyens de se situer en permanence, Fournir une information facile à lire et

compréhensible

27

Chek-list navigation

Compréhension instantanée ? Nommage ? Consultations essentielles? Nombre de clics ? Taille des titres et menus ? Accueil des pages stratégiques ? Maîtrise permanente de la navigation ?

28

Nommage des pages et menus

De la lecture à la reconnaissance Distinguer le menu de la vitrine Des menus qui envoient vers des pages

uniquement

29

Structure des pages

30

Objet: donner sa place, à l’écran, à la navigation, à l’information (contenus) et aux services.

Un réflexion qui doit mêler finement les priorités définies au lancement du projet et la vision “utilisateur”

Structure des pages

31

Gabarits

Permet de placer les éléments de la page dans l’espace.

Permet de dimensionner les textes et photos avant de passer au montage réel.

Permet de premiers tests avec de futurs utilisateurs.

Cadre la mission du graphiste

32

Zones ou blocs pour les gabarits Zone identité Zone navigation primaire Zone navigation secondaire ? Zones « promotionnelle-s » ? Zones de flux actualisés? Zones d’outils ou services Zone administrative ? Zone participative ‘

33

Outils pour les gabarits Word Excel Logiciel Balsamiq Logiciels Photoshop ou Indesign Logiciel Dreamweaver

Lire nos tests : http://www.vocables.com/drupal/content/de-lusage-des-gabarits

34

35

QuickTime™ et undécompresseur

sont requis pour visionner cette image.

36

Scénarios

37

ScénariosExercice ultime pour vérifier l’expérience client à l’aide des gabarits

prévus… Exemples: je veux m’inscrire à une formation1. Home page : découverte école2. Visite du catalogue des formations3. Choix et lecture d’une formation4. Demande de prise de contact pour info, ou5. Inscription directe via formulaire6. Confirmation

Quelles étapes, quelle expériences, quel temps ?

38

Scénario découverte de service

39

Synthèse scénarios / gabarits

Les scénarios sont-ils pertinents ? Que nous apprennent-ils sur nos

gabarits et notre arborescence ? Quelles modifications imposent-ils ?

40

Graphisme

41

Brief graphique

Graphistes « web » de préférence Respect du cahier de conception Contexte, cible, histoire,… Objectifs en terme d’identité Objectifs en terme de discours Mots-clés représentatifs Ton Contraintes (ex.: type de contenus) Inspirer

42

Brief graphique: mots clés

43

Chronologie graphisme

1. Définition objectifs à l’interne2. Brief du graphiste3. Présentation de 2 à 3 voies (ambiance

générale ou carrément pages complètes)4. Affinage après présentations client5. Déclinaison sur 7 à 15 pages modèles6. Validation7. Préparation pour l’informatique

44

qui médiatise le lancement du site? qui assure la maintenance? qui gère les contenus? comment sont archivés les contenus? qui pratique la modération? comment sera modernisé le site? accompagnement du changement ? ….

Lancement du site

45

augmentation des visites Web augmentation des échanges augmentation des ventes (en général ou du

site) augmentation de la présence dans les moteurs réduction des demandes par le téléphone et la

Poste réduction des coûts logistiques

Mesure des résultats

46

Comment poursuivre votre projet ? Quelle première action ? Quelles connaissances réunir ? Quel soutien est nécessaire ?

Nous vous souhaitons une pleine réussite !

Xavier de Stoppani xds@vocables.com

Et maintenant ?

47

Quelques fourchettes pour des sitesallant de l’associatif aux communes et ONG

Analyse, concept, architecture: 2-6000 frs Design graphique: 2-6000 frs Fonctionnalités : 25 à 60 h Mise en page: 30 à 50 h Finalisation, mise en ligne, formation: 7 à 15 h Conduite du chantier: 15 % Rédaction et illustration: en sus

Budget: attention aux généralités

48Planning: attention au temps interne

49

50

étudier le mode de recherche des internautes cibles

soumettre l'url aux moteurs "gratuits" payer voila, yahoo, nomade etc, selon mon

marché acheter des mots clés optimiser les pages: mots clés dans les

textes, url rewriting, nommer les images, utiliser les balises i, b, h1 \ h6, balise title, balise description, balise keywords, plan site.

obtenir des liens externes : lobbying

Référencement