PENSER ET CONCEVOIR SON SITEWEB EN 2015
Claudia Mercier, SADC d’Abitibi-Ouest
Présenté dans le cadre du colloque régional ...
Plan de la présentation
1. Éléments à considérer pour avoir un site Web efficace
en 2015
2. Sept étapes pour la création d...
Éléments à considérer pour avoir une site
Web efficace en 2015
Tendances des consommateurs
 Huit personnes sur 10 naviguent sur le Web avant de faire un achat
(en magasin ou en ligne)
...
Importance du design
 Site Web doit à la fois :
 Être facile à utiliser
 Maintenir l’attention
 Sur Internet, c’est le...
Utilisabilité (ergonomie)
 Principes :
 7 +/- 2
 Capacité de la mémoire à court terme
 Implication pour le Web : le me...
Mobilité
 50 % de tout le trafic Internet est
maintenant mobile
 80 % des adultes ont un téléphone
intelligent et passen...
Référencement (SEO)
Améliore le ranking
 Contenu de qualité
 Notoriété (plusieurs
sites/blogues/commentaires
pointent ve...
Nom de domaine - URL
 Multitudes de domaines Internet de premier niveau
 Les classiques : .com .ca .org .info
 Les nouv...
Écrire pour le web
 Le public sur le Web n’est pas en mode « lecture »,
mais en mode « survol » (environ 50-60 % page)
 ...

Étapes d’un projet
1. Objectifs
 Définir clairement les objectifs de l’organisation
 Quel est le but du site Web? Comment allez-vous vous e...
2. Clientèle
Concevoir un site Web en fonction des caractéristiques et besoins des futurs
utilisateurs = Étape la plus cru...
Création de personas
 http://ludismedia.com/segmenter-clientele-
cible-grace-personas/
 http://tonyarchambeau.com/blog/6...
3. Organisation du contenu
1. Recherches
 Qu’est-ce que la compétition fait (vous ne voulez pas un site identique)
 Note...
4. Élaboration du design
 Concevoir une maquette en fonction de :
 Vos objectifs
 Le contenu à déposer
 Votre image co...
Outils gratuits pour la
création de maquettes
 Pencil project
 Lumzy
 Mockflow
 Cacoo
5. Rédaction du texte et du contenu
 Rédigez le contenu de toutes les pages fixes du site
 Préparez d’avance des article...
6. Développement et mise en ligne
 Aspect davantage “technique”
 Plusieurs solutions existent (voir section suivante)
 ...
7. Exploitation et maintenance
 Mesurez vos résultats
 Testez les sites Web avec vos clients
 Utilisez des outils d’ana...

Différentes solutions
3 solutions d’hébergement
1. Utilisez un outil de création de sites Web en ligne
(WordPress.com, Google sites, Wix, etc.)
...
Comparaison des solutions
Outils de création de site
web en ligne
S’héberger soi-même Fournisseur de services /
développeu...
Quelques solutions pour vous
permettre de faire votre
propre site!
 Gratuit* :
 WordPress.com
 Googles Sites – sites.go...
Conclusion
 Site Web = prolongement de votre entreprise en ligne
 Les clients et vos contacts d’affaires vont vous juger...
Ressources
 BDC
 Articles : Créer ou optimiser votre site Web
 http://www.bdc.ca/FR/articles-outils/technologie/creer-o...
Prochain SlideShare
Chargement dans…5
×

Penser et concevoir son site web en 2015

1 121 vues

Publié le

Par Claudia Mercier, SADC d’Abitibi-Ouest
Présenté dans le cadre du colloque régional sur les Affaires électroniques à La Sarre, 14 avril 2015

1. Éléments à considérer pour avoir un site Web efficace en 2015
2. Sept étapes pour la création d’un site Web
3. Exemples de solutions pour la conception et l’hébergement

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 121
Sur SlideShare
0
Issues des intégrations
0
Intégrations
334
Actions
Partages
0
Téléchargements
28
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Call to action!!
    Ne pas agacer avec des trucs flash qui bouge et qui dérangent
  • Pour l’aide : numéro de téléphone à appeler, chat en ligne, Table du contenu pour voir l’arborescence du site

    Pas vrai pour le 3, ce qui est important, c’est la possibilité de se rendre facilement et rapidement au contenu. La bonne arborescence est essentiel.
  • https://www.google.ca/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0CAUQjhw&url=http%3A%2F%2Fattractiveweb.net%2Fresponsive-web-design-solutions%2F&ei=dS4pVe7RBYGFgwTfjITADQ&bvm=bv.90491159,d.cWc&psig=AFQjCNFiUO1GzaAMG17oAEmYW8CIfWB7VQ&ust=1428848620045141
  • http://uxmyths.com/post/647473628/myth-people-read-on-the-web
  • http://www.bdc.ca/FR/blogue/Pages/plateformes-web-bonne-base-votre-site.aspx?caId=tabs-1
  • http://www.bdc.ca/FR/blogue/Pages/plateformes-web-bonne-base-votre-site.aspx?caId=tabs-1
  • Penser et concevoir son site web en 2015

    1. 1. PENSER ET CONCEVOIR SON SITEWEB EN 2015 Claudia Mercier, SADC d’Abitibi-Ouest Présenté dans le cadre du colloque régional sur les Affaires électroniques La Sarre, 14 avril 2015
    2. 2. Plan de la présentation 1. Éléments à considérer pour avoir un site Web efficace en 2015 2. Sept étapes pour la création d’un site Web 3. Exemples de solutions pour la conception et l’hébergement
    3. 3. Éléments à considérer pour avoir une site Web efficace en 2015
    4. 4. Tendances des consommateurs  Huit personnes sur 10 naviguent sur le Web avant de faire un achat (en magasin ou en ligne)  55 % des visiteurs passent moins de 15 secondes sur votre site Web  Il faut attirer et maintenir l’attention  Avoir des éléments d’appel à l’action efficace qui maximise la conversion vers les objectifs  On ne contrôle rien des utilisateurs :  Petit écran 10 po de 800 px au gros moniteur 2000 px  Niveau d’habileté très variable  Connexion Internet par modem téléphonique, réseau cellulaire ou haute vitesse
    5. 5. Importance du design  Site Web doit à la fois :  Être facile à utiliser  Maintenir l’attention  Sur Internet, c’est le « survival of the easiest », le coût de sortie est faible, pas de tolérance envers les mauvais design et les sites lents  15 secondes pour maintenir l’attention : importance d’être bien structuré, d’avoir des titres accrochant et du visuel intéressant  Conclusion : équilibre entre le design et l’utilisabilité
    6. 6. Utilisabilité (ergonomie)  Principes :  7 +/- 2  Capacité de la mémoire à court terme  Implication pour le Web : le menu doit contenir entre 5 et 7 éléments maximum  3 clics  En 3 clics, l’utilisateur devrait être capable de trouver l’information qu’il recherche  S’assurer d’avoir une navigation instinctive et une arborescence efficace  2 secondes  Temps maximum de chargement de la page  Faire attention aux éléments graphiques ou vidéos qui risquent de ralentir la page  Règles :  Constance et standards  Visibilité/contrôle  Où suis-je?  Esthétique et minimalisme  Pas d’information superflue  Aide, support
    7. 7. Mobilité  50 % de tout le trafic Internet est maintenant mobile  80 % des adultes ont un téléphone intelligent et passent en moyenne 1.85 h/jour sur un appareil mobile  Recommandé d’avoir un « responsive web design » plutôt qu’un site mobile  Éviter l’usage du « Flash » qui n’est pas supporté par les appareils mobiles
    8. 8. Référencement (SEO) Améliore le ranking  Contenu de qualité  Notoriété (plusieurs sites/blogues/commentaires pointent vers le site)  Présence sur les médias sociaux  Site mobile  Description des éléments du contenu et images grâce aux XML et balises méta Diminue le ranking  Erreurs de syntaxes et non- respect des standards du Web  Site Web statique  Surutilisation de mots-clés cachés dans le code  Générer en masse des liens depuis des sites ou des commentaires de blogues (black hat SEO) Guide de démarrage relatif à l'optimisation pour les moteurs de recherche http://www.google.com/intl/fr/webmasters/docs/search-engine-optimization-starter-guide-fr.pdf
    9. 9. Nom de domaine - URL  Multitudes de domaines Internet de premier niveau  Les classiques : .com .ca .org .info  Les nouveaux : .quebec .coffee .bike .clothing  Coût environ 20-30 $/année pour chaque nom de domaine  Accents et caractères spéciaux acceptés depuis 2012 – vigilance nécessaire  Ex. : bonjourquebec.com vs. bonjourquébec.com  Comment choisir?  Comprend généralement le nom de l’entreprise, mais ne doit toutefois pas être trop long  Très important pour le référencement, donc penser à ce que les internautes risquent de chercher
    10. 10. Écrire pour le web  Le public sur le Web n’est pas en mode « lecture », mais en mode « survol » (environ 50-60 % page)  Il faut donc que le texte soit facile à scanner :  Faire plusieurs en-têtes et sous-titres  Garder les paragraphes courts (1 idée par paragraphe)  Rende visible les mots-clés, mettre des hyperliens  Utiliser les listes, tableaux, etc. Ex. : alistapart.com
    11. 11.  Étapes d’un projet
    12. 12. 1. Objectifs  Définir clairement les objectifs de l’organisation  Quel est le but du site Web? Comment allez-vous vous en servir?  Étapes à faire avant d’aller en appel d’offres pour aider à se définir un budget et de réaliser les étapes suivantes avec son fournisseur de services (s’il y a lieu)  Quel est votre modèle d’affaires, quels sont vos stratégies?  Qu’est-ce qui vous distingue de vos compétiteurs?  Votre site web doit correspondre à votre entreprise  Exemples d’objectifs :  Livrer de l’information  Promouvoir et faire connaître l’organisation  Interagir avec les clients (ex. : demandes de soumission)  Faciliter l’accès aux services de l’organisation  Vendre des produits et services (générer des revenus)
    13. 13. 2. Clientèle Concevoir un site Web en fonction des caractéristiques et besoins des futurs utilisateurs = Étape la plus cruciale de l’élaboration d’un site Web  Définir son public  Âge, genre, profession  Degré d’expertise avec le Web et les technologies  Environnement technologique (ordinateur, téléphone, type de connexion à Internet)  Besoins des utilisateurs  Qu’est-ce que vos futurs clients vont chercher sur votre site?  Qu’est que les clients vont vouloir faire/voir sur le site une fois terminé?  Création de personas  Personnage fictif représentant un utilisateur type  Utile pour créer des scénarios d’utilisation
    14. 14. Création de personas  http://ludismedia.com/segmenter-clientele- cible-grace-personas/  http://tonyarchambeau.com/blog/621-fiche- persona/  http://blog.flyconseils.com/creer-persona- marketing-web-etapes  http://www.insidedaweb.com/creation-site- internet/experience-utilisateur-internet/7- conseils-creer-personas-efficaces/  http://fr.wikipedia.org/wiki/Persona_%28mar keting%29 Source : http://www.linkedmediagroup.com/create-brand-persona/
    15. 15. 3. Organisation du contenu 1. Recherches  Qu’est-ce que la compétition fait (vous ne voulez pas un site identique)  Notez ce que vous préférez et ce que vous n’aimez pas  Faire l’analyse du contenu et pensez à ce que vous voulez mettre sur le vôtre  Faire l’inventaire du contenu que vous voulez mettre sur votre site  Porte-folio? Blogue/articles? Produits?  Pensez à long terme, au contenu que vous allez vouloir ajouter avec le temps  Définir l’arborescence  Organisez la liste du contenu en 4-5 catégories différentes  Demandez à vos collègues de faire la même chose, pour s’assurer que la navigation soit efficace et instinctive
    16. 16. 4. Élaboration du design  Concevoir une maquette en fonction de :  Vos objectifs  Le contenu à déposer  Votre image corporative  Besoins des utilisateurs  Utilisez des « wireframe » pour montrer la navigation et l’architecture d’un site Web  Ajoutez les éléments visuels, propres à l’image corporative  Pensez à mettre des éléments d’appels à l’action pour faciliter la conversion vers vos objectifs
    17. 17. Outils gratuits pour la création de maquettes  Pencil project  Lumzy  Mockflow  Cacoo
    18. 18. 5. Rédaction du texte et du contenu  Rédigez le contenu de toutes les pages fixes du site  Préparez d’avance des articles pour la partie « actualité » ou « blogue » de votre site  Respectez les recommandations « Écrire pour le Web »  Pensez à ajouter des images et des éléments visuels  Respectez les droits d’auteur  Source pratique et gratuite pour les images libres de droits : pixabay.com N.B. Il est possible de faire cette étape après la conception du site Web et/ou mise en ligne du site Web (travail local et/ou non-indexation du site)
    19. 19. 6. Développement et mise en ligne  Aspect davantage “technique”  Plusieurs solutions existent (voir section suivante)  À cette étape, il faut penser à :  Si ce n’est pas déjà fait, vérifiez la disponibilité du nom de domaine et le réserver*  https://fr.funio.com/domaines  Choisir l’hébergement (où les données seront stockées) *Même si votre entreprise n’a pas l’intention d’être sur le Web à court terme, il est conseillé de réserver le plus tôt possible son nom de domaine (ex. : nomdemoncommerce.ca).
    20. 20. 7. Exploitation et maintenance  Mesurez vos résultats  Testez les sites Web avec vos clients  Utilisez des outils d’analyses (ex : Google Analytics)  You can’t control what you can’t measure – Tom DeMarco 1982  Apportez les correctifs nécessaires  Maintenez à jour votre site  Si vous avez un blogue, assurez-vous d’ajouter du contenu régulièrement  Mettez à jour les pages du site, ajoutez du contenu de qualité  Vous n’avez pas le temps! Il est possible de confier à l’externe la gestion de vos médias sociaux et sites Web.  Faire les mises à jour de sécurité = très important pour éviter le piratage
    21. 21.  Différentes solutions
    22. 22. 3 solutions d’hébergement 1. Utilisez un outil de création de sites Web en ligne (WordPress.com, Google sites, Wix, etc.) 2. S’héberger soi-même 1. S’abonner à un hébergement en ligne (Funio, GoDaddy, etc.) 2. Utilisez une plateforme (WordPress, Joomla, Drupal, etc.) pour gérer le contenu du Site 3. Programmez soi-même ou le confier à un programmeur 3. Utilisez les services clé en main d’un développeur/fournisseur de service Web
    23. 23. Comparaison des solutions Outils de création de site web en ligne S’héberger soi-même Fournisseur de services / développeur Web + • Facile à utiliser • Peu de connaissances requises • Mises à jour automatique • Plusieurs thèmes disponible et adaptable pour les mobiles • Gratuit (dans certains cas) • Plus flexible • Relativement économique • Choix de plusieurs plateformes (WordPress, Jooma, Drupal, etc.) • Communauté en ligne qui développe des thèmes et outils pour ces plateformes • Qualité et fiabilité • Services après vente • Les fournisseurs se chargent normalement de faire les mises à jour de sécurité du site - • Peu de personnalisation possible • Qualité du code peut être variable selon l’option choisi • Nécessite des compétences en programmation Web (CSS, php, HTML etc.) • Il faut faire soi-même ses mises à jour de logiciels et les backup de la base de données • Nécessite un plus grand budget • Bonne communication nécessaire • Le service est variable d’un fournisseur à l’autre, il est important de demander et comparer les soumissions
    24. 24. Quelques solutions pour vous permettre de faire votre propre site!  Gratuit* :  WordPress.com  Googles Sites – sites.google.com  Wix.com  e-monsite.com  Weebly *Il faut payer pour un nom de domaine personnalisé et les fonctions avancées et/ou pour enlever la publicité.  Payant :  GoDaddy  Web.com (anglais seulement)
    25. 25. Conclusion  Site Web = prolongement de votre entreprise en ligne  Les clients et vos contacts d’affaires vont vous juger selon votre site  Doit respecter votre image corporative, refléter la réalité de votre entreprise  S’inscrit dans la planification stratégique de votre entreprise  Important de se questionner sur la manière dont votre site Web va vous aider à atteindre vos objectifs d’affaires  Toujours garder en tête sa clientèle cible  Assurez-vous que le site Web répond à ses besoins  N’hésitez pas à valider et à faire des « tests d’utilisabilité », en particulier pour un site marchant (avec ventes ou non)
    26. 26. Ressources  BDC  Articles : Créer ou optimiser votre site Web  http://www.bdc.ca/FR/articles-outils/technologie/creer-optimiser-site- web/Pages/default.aspx  Outil diagnostic de Site Web  BDC  http://www.bdc.ca/FR/consultation/consultation-internet/Pages/diagnostic-site- web.aspx  Outils pour les webmasters de Google  https://www.google.com/webmasters/

    ×