Le document présente des stratégies pour la conception et la mise en œuvre de projets web, reliant les besoins des utilisateurs aux objectifs stratégiques d'une organisation. Il aborde des aspects tels que le benchmarking, le positionnement, l'ergonomie et la structure du contenu pour optimiser l'expérience utilisateur. Enfin, il souligne l'importance d'une planification rigoureuse, d'une documentation adéquate et de l'actualisation continue du site pour maintenir sa pertinence.

1. Stratégies de projet web18/10/2011Sabrina ECHAPPE1

2. Le projet Web18/10/2011Outil qui concourt à l'atteinte d'objectifs stratégiques. permet la compétitivité de la structure répond efficacement aux besoins des utilisateurs.Complexité des projets Web = périmètre fonctionnel et technique en constante évolution.De la simple page HTML, au progiciel ou système d’information passerelleSabrina ECHAPPE2

3. La conception d’un site WebC’est une démarche participative, « brainstorming » Centrée sur l'utilisateur Gros projets = avis d’un panel représentatif d'usagers, Imaginer les besoins, puis les contextes d'utilisation. Les besoins de l'organisation, correspondant à une stratégie d'objectifs ; Les besoins des utilisateurs, correspondant à une stratégie de cible. 18/10/20113

4. Stratégie d'objectifsRécapituler les objectifs du site webVoir en quoi le site web va permettre à l'organisation de remplir ses propres objectifs stratégiques. Les objectifs doivent être quantifiables, faisables et opérationnels.Exemples d’objectifs ?Quels impacts déjà lors de la conceptualisation du site ?18/10/20114

5. Stratégie de ciblesCibler des profils types Adapter l'informationAdapter les ambiances graphiquesPrioriser certains messagesDéterminer leurs principales questions et le type de réponse attendue. Interview des clientsSondageQuestion ouverte à commentaire (blog, facebook, twitter) 18/10/20115

6. BenchmarkingBenchquoi ?En français référenciation, ou étalonnageTechnique de marketing (mercatique) qui consiste à analyser les techniques de gestion, les modes d'organisation des autres entreprises afin de s'en inspirer et d'en retirer le meilleur.Veille, recherche, analyse comparative, adaptation pour améliorer la performance.18/10/20116

7. La veille concurrentielleet le benchmarkingConsiste à déterminer les principaux concurrents du site web analysez comment ils répondent à leur clientèle Quelles sont éventuellement leurs lacunes afin de proposer un service qui les combledresser un panorama de l'offre existante et du besoin à satisfaireProposer une plus-value aux visiteurs, pour atteindre un objectif de positionnement18/10/20117

8. Positionnement (marketing)Choix d'attributs procurant à des offres une position:crédible, différente attrayante …au sein d’un marché et dans l’esprit des clients.Dans le cadre de la stratégie marketing, les attributs sont de l'ordre de la communication,L'image de marque d'une offre ou d'une entreprise n'est pas toujours associée au positionnement voulu par la stratégie.18/10/20118

9. FaisabilitéRéflexion préalable en terme de budget et de temps. Être pensé sur le long termemoyens prévisionnés pour créer le site mais aussi pour le maintenir et l'actualiser. Un site non mis à jour est un site mort (Google)Image de marque ternie (Internaute)Prioriser les ambitions initiales pour être dans le budget et les délais. 18/10/20119

10. Le cahier des chargesDocument contractuel synthétique permettant au maître d'ouvrage (client) de définir ses besoins auprès du maître d'œuvre (prestataire). Même si la réalisation du site se fait en interne, il est toujours utile de rédiger un cahier des charges, même court, afin de formaliser ses idées.18/10/201110

11. La planificationRépertorier les personnes travaillant sur le projet de site web, répartir les tâches selon les compétences établir un planning pour chacune d'entre elles. On peut utiliser un diagramme de Ganttchiffrer globalement le projet en calculant le temps passé par chaque personne et en le multipliant par leur coût horaire (ou journalier). 18/10/201111

12. Les métiers du WebDirecteur de projetChef de projet techniqueRédacteur ou responsable de publication Web journalisteDéveloppeur (programmeur)Directeur artistiqueInfographisteWebdesigner (parfois maquettiste)Intégrateur HTMLErgonomeAdministrateur réseauAnimateur web (= community manager)18/10/201112

13. L’arborescence : étape clé d’un projet Web18/10/201113Sabrina ECHAPPE

14. Un peu de rangement…"Je ne trouve rien sur ce site", "je suis perdu", « Où est-ce que je peux trouver cela ? »aucune structuration sérieuse des contenus n'a été faiteInfo mal rangée = info supposée inexistanterisque important d’abandon et de surf sur un site concurrent !!!18/10/201114

15. Rechercher et rassembler les contenusIl faut penser à tout, ne rien oublierIl faut se mettre à la place du client (empathie)« est-ce intéressant pour les internautes ? »« mes visiteurs ont-ils besoin de savoir ça ? » Lister les informations pour soi est une erreur : c'est le meilleur moyen de présenter des contenus inintéressants pour l'utilisateur. La fameuse page « mon histoire »18/10/201115

16. Classer les contenus par catégoriesClasser les éléments dans des catégories : ranger ensemble ce qui se ressemble, séparer ce qui est différent. Cette organisation est faite pour simplifier les choses.Prévoir les actions et cerner le comportement des internautes, Comprendre comment ils vont aller chercher l'information en fonction de leurs besoins.18/10/201116

17. Critères de regroupementAlphabétiqueChronologiqueGéographiqueThématiquePar tâches utilisateurPar cible utilisateur18/10/201117

18. L’arborescence (ou plan de site)18/10/201118

19. Navigation vs arborescenceL'arborescence traite théoriquement de la manière dont les pages sont organiséesLa première page étant toujours la page d’accueilLa problématique de navigation intervient après l'arborescence La navigation désigne la façon dont on accède aux rubriques.Elle est étroitement liée à l’ergonomie de l’interfaceElle est facilitée par les mises en valeur visuelles du designPar exemple, la page d'accueil peut accueillir un gros diaporama qui met en avant certaines parties, également accessibles par le menu principal.18/10/201119

20. 4 rôles de la navigationse faire immédiatement une idée du contenu du site, de la fraîcheur des informations contenuesparvenir le plus rapidement possible au contenu recherchéSe souvenir de ce qui a été déjà vuConnaître sa position et savoir que certaines pages n’ont pas encore été explorées.18/10/201120

21. Eléments de navigationLes éléments de navigation permettent à l’internaute de naviguer, se repérer, revenir en arrière. Différents types : Le menu déroulantLa liste à puce (en ?)Le fil d'ariane (en ?)La navigation par onglets La carte du site. (en ?)18/10/201121

22. ErgonomieL'ergonomie est l'utilisation de connaissances scientifiques relatives à l'homme (psychologie, physiologie, médecine) dans le but d'améliorer son environnement de travail. L'utilisabilité marque l'adéquation aux capacités de l'utilisateur.confort d'utilisation, consistant à réduire au maximum la fatigue physique et nerveuse. sécurité, consistant à choisir des solutions adéquates pour protéger l'utilisateur ;18/10/201122

23. Ergonomie WebCapacité d'un site web à répondre efficacement aux attentes des utilisateurs et à leur fournir un confort de navigation.Principale difficulté = diversité des profils des visiteurs. attentes de l'utilisateurhabitudes de l'utilisateurâge de l'utilisateuréquipementsniveau de connaissances18/10/201123

24. Ergonomie : les habitudes acquiseslogo situé en haut à gauche : souvent cliquable et qui mène à la page d'accueil ; une zone de navigation (menu), située à gauche et/ou en haut ; Le bouton « accueil » est le premier boutonUn en-tête (header) contenant le nom du site, un menu de navigation et une zone prévue pour un bandeau (graphique) ; un corps de page, contenant l'essentiel de l'information ; Une colonne à droite (sidebar) pour les focus, agendas, liens utiles …un pied de page (footer) regroupant des informations utiles :la date de mise à jour, un lien vers un formulaire de contact, un plan d'accès, coordonnées, plan de site, mentions légales, etc.18/10/201124

25. Elements de WebdesignReprise d’une charte graphique (logo)Choix de couleurs dominantes,Choix d’ambiances, d’une image de marque, Choix de polices d’écrituresImages, photosStyle graphiqueSymboles graphiques, symboles de navigation18/10/201125

26. Hébergement et serveurs

27. MutualizedI – L’hébergementplusieurs sites internet sur un seul et même serveurconfiguration déjà faite offre logicielle intégréeAvantages :Le coûtFiabilité et responsabilité juridiqueDisponibilité techniqueInconvénients :L’espace de stockage défini Les ressources limitéesInstallation de certains composants ou logiciels impossibleUtilisation de SSL difficile.Une même adresse IP est partagée par des centaines ou milliers de sites web.

28. Serveur dédiéI – L’hébergementUn serveur pour un seul clientpeut être administré à distance via le réseau Internet ou administré par l'hébergeur. on parle de serveur dédié infogéré.machine entièrement dédiée si le client peut gérer les fichiers sur le serveur, les applications et leurs configurations serveur semi-dédié si le client a uniquement accès aux fichiers du serveur.

29. Serveur virtuelI – L’hébergementServeur physique partitionné en plusieurs serveurs virtuels indépendants : Ils ont chacun les caractéristiques d'un serveur dédiéChaque serveur peut fonctionner avec un système d'exploitation différent et redémarrer indépendamment. Les acronymes VPS (Virtual Private Server) et VDS (Virtual Dedicated Server) désignent le même conceptbon compromis qualité / prix

30. Le nom de domaineI – L’hébergement

31. Comment choisir ?I – L’hébergementChoisir un nom de domaine comportant les mots clefs importants.référencementChoisir un nom de domaine représentant votre marque.L’internaute tappe directement dans la barre d’adresse

32. Comment choisir ?I – L’hébergementLe « .com » est le plus répandu et est devenu presque incontournable. Le « .fr » est à privilégier, notamment pour des structures institutionnelles. Le dépôt d'extensions des pays étrangers (co.uk, .de, .es, .it, etc.) Si le site bénéficie d'une traduction correcte, voire d'un portail dédié selon les langues. Pour pouvoir bénéficier d'un «.fr», être identifiable sur une base de données nationale et publique

33. Mentions légales (1)Pour un site Internet édité par une personne morale (entreprise, association, …), la page « mentions légales » doit contenir au moins :La raison socialeLe siège socialUn numéro de téléphoneIl faut également préciser le nom du directeur de la publication et/ou du responsable de la rédaction (généralement le représentant légal de la structure)Et s’il y a lieu : Le capital social et le numéro d’inscription au registre du commerce et des sociétés (RCS ).18/10/201133

34. Mentions légales (2)blog ou site édité à titre personnel, vous êtes également soumis à la publication de « mentions légales » :NomPrénomsAdresse du domicileNuméro de téléphonePour les personnes physiques - uniquement - il est possible de garder son anonymat, si les coordonnées de l’éditeur ont été transmises à l’hébergeur. C’est alors lui qui sera tenu de communiquer l’information sur l’éditeur (procédure judiciaire).18/10/201134

35. Mentions légales (3)Il faut ajouter à la page des mentions légales, pour les personnes morales et physiques, les informations relatives à l’hébergement du site (même si le site est hébergé à titre gratuit) :Nom de l’hébergeurRaison socialeAdresseNuméro de téléphoneSi l’hébergement se fait sur un serveur personnel, il faudra le préciser.18/10/201135

36. Documents propres au projet WebCompte-rendu du 1er contact Ou cahier des charges fonctionnel (consultation AO)Devis chiffréOu réponse à la consultation : note synthétique + note d’honorairesDiagramme de Gantt (Gantt Project)Etude du BenchmarkEtude de positionnement (stratégie de com’)Arborescence (Xmind ou Freemind)Zoning (Illustrator)Wireframe (Illustrator)18/10/201136

37. Documents propres au projet WebAudit graphiqueCompte-rendu de brief créatifMaquette PSD : accueil et rubrique intérieureIntégration : fichiers HTML, CSS et javascriptCMS : fichiers PHP, XML, et base de donnéesCharte éditorialeCharte SEOGuide d’utilisation de l’admin18/10/201137