of 36 /36
Vitrine virtuelle CEFQ, 19 janvier 2012

Vitrine virtuelle

  • Upload
    mrogerp

  • View
    1.633

  • Download
    1

Embed Size (px)

DESCRIPTION

Qu'est-ce qu'une vitrine virtuelle? C'est un outil pour faire vivre, partager, communiquer, évoluer son projet ou produit sur le web; pour ultimement le VENDRE.

Citation preview

Page 1: Vitrine virtuelle

Vitrine virtuelleCEFQ, 19 janvier 2012

Page 2: Vitrine virtuelle

Vitrine virtuelle• Qui suis-je?

Marie-Andrée Roger• Co-proprio de Overture Project• Projet Kobolaa• Pour plus de détails:

http://www.linkedin.com/in/marieandreeroger

Page 3: Vitrine virtuelle

Vitrine virtuelle• Qu’est-ce qu’une vitrine virtuelle?• Faire vivre, partager, communiquer, évoluer son projet/

son produit sur le web; ultimement le VENDRE.

Un site web n’est qu’UNE partie d’une stratégie web; elle n’est pas l’unique avenue.Et il y a plusieurs manières de le faire…

Page 4: Vitrine virtuelle

Vitrine virtuelle• À quoi ça sert?• Partager l’information• Faire découvrir son projet/produit• Attirer l’attention• Établir sa crédibilité• Supporter votre service à la clientèle 24h/24, 7 jours/7• Réduire les coûts d’opérations : marketing, ventes, service,

production, etc.• Augmenter ses revenus, si bien fait!• Peut contenir des outils pour soutenir vos opérations :

e-Boutique, questionnaire, inscription évènements, etc.

Page 5: Vitrine virtuelle

Vitrine virtuelle• Pourquoi j’en ai besoin?• Parce que vos clients estiment que vous DEVEZ en avoir un!• Ne pas avoir de site = pas sérieux, aucune crédibilité• La plupart des gens visitent un site web pour résoudre un

problème qu’ils ont :• Ils ont besoin d’information• Ils veulent faire un achat ou un don• Ils veulent être divertis• Ils veulent faire partie d’une communauté

Si vous pouvez les aider efficacement → SUCCÈS

Page 6: Vitrine virtuelle

Vitrine virtuelle• Activité de réflexion

Page 7: Vitrine virtuelle

Vitrine virtuelle• Présentation d’aujourd’hui

1. Création de sa propre vitrine virtuelle• Processus itératif en 4 temps

2. Les règles de l’art• Comment faire un excellent site web qui génèrera des revenus

3. Atelier• Plan de création de la vitrine virtuelle d’un participant

Page 8: Vitrine virtuelle

1. Processus itératif de création de sa propre vitrine virtuelle

Page 9: Vitrine virtuelle

Créer sa propre vitrine virtuelle

• Les premiers pas : informer un client potentiel, avoir une présence sur le web• Médias Sociaux

• GRATUITS : Facebook, (Twitter), LinkedIn, Google+, YouTube• PAYANTS : ning

• Répertoires• GRATUITS : Yelp.com, Associations professionnelles, répertoires

spécialisés (icriq.com, artisans-quebec.com, etc.)• PAYANTS : Page Jaunes, répertoires spécialisés (restoMTL, weblocal,

bonjourquébec.com etc.)• Sites de vos collaborateurs (ex : boutique, agents, vendeurs,

clients, etc.)

Page 10: Vitrine virtuelle

Créer sa propre vitrine virtuelle

• Le deuxième pas : vendre rapidement• Vendre un produit :

• eBay, Amazon, Shopify, etc.• Vendre un service :

• Agentsolo.com, freelancer.com, freelance.com, etc.• Coupons en ligne … mais il faut faire attention!!

• Groupon, Tuango, TeamBuy…• Un mot sur Paypal

Page 11: Vitrine virtuelle

Créer sa propre vitrine virtuelle

• Le troisième pas : avoir son propre site / blogue• Les 4 possibilités

• DIY gratuits• Tumblr, Wix, WordPress, Blogger, etc.

• DIY payants / CMS $• Joomla!, SquareSpace, Drupal, etc.

• Sous-contractant, avec CMS $$• Sous-contractant, sur mesure (HTML-CSS, Flash, etc.) $$$+

Page 12: Vitrine virtuelle

Créer sa propre vitrine virtuelle

• Do-It-Yourself (DIY) gratuit (Tumblr, Wix, WordPress, etc.)• AVANTAGES

• Gratuit!• Donne rapidement des résultats simples• Bon terrain de jeu pour apprendre à avoir un petit site web

• DÉSAVANTAGES• Demande beaucoup d’apprentissage, donc de temps• Possibilités limitées, peut être ardu (voir impossible) d’atteindre un

résultat précis

Page 13: Vitrine virtuelle

Créer sa propre vitrine virtuelle

• Do-It-Yourself (DIY) payants / Content Management Systems (CMS) (Joomla!, SquareSpace, Drupal, etc.) $• AVANTAGES

• Contrôle complet sur l’ensemble des aspects du site• Avoir des connaissances techniques ouvre bien des possibilités

• DÉSAVANTAGES• Demande ÉNORMÉMENT d’apprentissage, donc de temps et

d’énergie• Comme ce sont des outils puissants, il est possible (et même facile)

de faire des erreurs qui vont briser / détruire le site

Page 14: Vitrine virtuelle

Créer sa propre vitrine virtuelle

• Sous-contractant, avec CMS $$• AVANTAGES

• Habituellement pas de dépassement de coûts• Moins de surprises, souvent le sous-contractant présente un

« catalogue » des modules offerts• DÉSAVANTAGES

• Le sous-contractant n’est qu’un intermédiaire et n’a pas de contrôle sur les modules du CMS et leurs modifications

• Si les modules sont insuffisant, faire du sur-mesure avec un CMS c’est s’engager sur un terrain glissant

• La plupart des sites faits avec un CMS finissent par se ressembler

Page 15: Vitrine virtuelle

Créer sa propre vitrine virtuelle

• Sous-contractant, sur mesure (HTML-CSS, Flash, etc.) $$$+• AVANTAGES

• Possibilités illimitées• Le client est souvent mieux encadré, donc passe plus de temps à

développer son contenu et sa stratégie• Si le travail est de qualité (W3C), il est facile de le prendre comme

base pour faire évoluer le site par la suite• DÉSAVANTAGES

• Possibilités illimitées!• Demande une vision très claire des besoins et objectifs

Page 16: Vitrine virtuelle

Créer sa propre vitrine virtuelle

• Ensuite…• Faire vivre sa vitrine virtuelle!

• Entretient - Maintient• Aller plus loin encore…

Page 17: Vitrine virtuelle

Questions?

Page 18: Vitrine virtuelle

2. Les règles de l’art – Comment faire un excellent site web qui génèrera des revenus?

Page 19: Vitrine virtuelle

Bases techniques• Les bases techniques d’un site web - comment ça marche?• Architecture d’une requête web1. Un utilisateur ouvre son navigateur (browser)2. Il entre l’adresse (domaine) d’un site web3. Le browser trouve le serveur associé au domaine4. Le browser demande une page au serveur5. Le serveur prépare la page demandée6. Le serveur envoie le code de la page au browser7. Le browser interprète le code et affiche la page

Page 20: Vitrine virtuelle

Bases techniques• Nom de domaine• Compagnies: Godaddy.com, domain.com, domainname.ca, etc.• Favoriser le nom de l’entreprise plutôt que ce qu’elle fait• Prioriser un nom simple plutôt qu’élaboré (.com vs .ca)• Pas besoin d’acheter plusieurs versions• Éviter les ponctuations (-, _, ~, etc.), les accents et les articles (le,

et, à, etc.)• NOTE : utilisez votre adresse email …@votredomaine.com pour

toutes vos activités commerciales

Page 21: Vitrine virtuelle

Bases techniques• Hébergement• À discuter avec votre programmeur (Linux, Windows)• Habituellement entre 7$ et 10$ par mois• Frais récurrent à chaque année, séparément de la programmation

de votre site

Page 22: Vitrine virtuelle

Bases techniques• Browsers • Les gens utilisent différents browsers (Internet Explorer, Firefox,

Chrome, Safari, Opera)• Problèmes d’affichage entre les browsers• Problèmes avec les anciennes versions

• Les gens ne font pas leurs mises à jour!!• Tous les browsers ne supportent pas toutes les technologies (ex.:

HTML5)

Page 23: Vitrine virtuelle

Bases techniques• Mobile • Chaque téléphone et chaque tablette est différent• La plupart des browsers de téléphones ont des capacités réduites

• Pas de support pour des technologies riches comme Flash et Silverlight

• 3 solutions possibles :• 1. Site régulier accessible par browser mobile• 2. Site fait spécifiquement pour browser mobile• 3. Application fait sur mesure

Page 24: Vitrine virtuelle

Les règles de l’art• Qu’est-ce qu’un site parfait?

• Un site épuré• Un site balancé où chaque chose est à sa place et est placée de façon

constante sur chaque page• Un site où une attention est portée au détail• Un site où les espaces blancs (white spaces) sont utilisés de façon

intelligente et stratégique• Un site avec un design moderne mais modéré • Un site qui utilise des schémas de couleurs intuitifs et des contrastes

forts pour une meilleure lisibilité des textes et une perception visuelle des éléments

• Un site qui est descriptif, qui présente le projet/produit en soutenant sa crédibilité (ex: photo du produit)

• Un site qui est entretenu, qui est vivant (qui marque le passage du temps)

• Un site qui n’émet pas de son

Page 25: Vitrine virtuelle

Les règles de l’art• Contenu, contenu, contenu

• L’élément LE PLUS IMPORTANT d’un site web• “Less is more”, percutant, efficace• Toujours prendre en compte : l’auditoire, le message, le moyen de

communication• Technique de création de contenu• Message principal• Messages secondaires• Appels à l’action

• La répétition est nécessaire mais de la bonne façon

Page 26: Vitrine virtuelle

Les règles de l’art• Design/Layout

• Stratégie: informer ou attirer l’attention?• Ne jamais oublier : un usager peut arriver n’importe où, n’importe

quand sur le site…. On ne lit pas un site web comme un livre.• Connecter avec ses usagers: photos/images, choix de couleurs,

ambiances, polices, artwork – jouer sur le subconscient• Templates, stock photos, polices – utilisation et droits d’auteurs

Quelqu’un devrait être en mesure de deviner le sujet de votre site en 4 secondes

Page 27: Vitrine virtuelle

Les règles de l’art• Search Engine Optimization (SEO) de base

• Contenu écrit, mots-clés, tags HTML : comment ça marche? • Flash, Silverlight

• Google Analytics• Accessibilité

• Site en HTML• Photos, videos, contenu riche (Flash, Silverlight)• http://www.w3.org/WAI/

• Vous payez pour quoi? – Qu’est-ce qui vous appartient?• Le code, le design, les images faites sur mesure, les textes originaux,

les entrées de blogue, etc.• Exigez d’avoir tout cela en votre possession à la fin de votre contrat

Page 28: Vitrine virtuelle

Questions?

Page 29: Vitrine virtuelle

Les règles de l’art – mauvais exemples

• Xeros: Reproduire la “réalité” sur un sitehttp://www.realbusiness.com/#/ready-for-business/select• Temps de téléchargement trop long• Site entièrement en Flash• Aucun outil de recherche à portée de la main• Très confus, aucun focus, n’atteint aucun but• N’aide personne, inutile dans le partage d’information (première

raison d’avoir un site!!!)• Pourrait très bien avoir coûté des millions!

Page 30: Vitrine virtuelle

Les règles de l’art – mauvais exemples

• Serene Naturist : quand les contrastes n’existent pas • Aucun contraste de couleur, police ou utilisation d’espace blanc

pour aider à la lecture• Trop d’images, trop de mouvements, trop de tout…• Explications sur le site, quand cela devrait être intuitif• Aucune suite dans les idées, aucun guide pour aider à trouver

l’information recherchée• Aucune structure, aucune consistence• Échouent à établir la crédibilité de leur entreprise

Page 31: Vitrine virtuelle

Les règles de l’art – mauvais exemples

• P&M Computers, Groupe CLE : quand le mouvement nous donne mal au coeur

http://www.pandminc.com/http://groupecle.com/#/splash/• Mauvais nom de domaine (P&M)• Mauvaise utilisation de Flash• Temps de téléchargement trop long• Aucun focus• Consistence mise à l’épreuve• Nous font réfléchir trop longtemps…

Page 32: Vitrine virtuelle

Mot de la fin• À quoi vous attendre… Ce qu’il faut faire pour être prêt?

• Focus, avoir travaillé une stratégie préalablement• Temps et énergie• Être prêt à prendre des décisions• Patience, être prêt à faire un effort et apprendre, même si c’est

quelqu’un d’autre qui le fait à votre place• « Vous achetez une voiture, il faut savoir la conduire. »

• SURTOUT, allez y une étape à la fois• Retour sur l’exercice de réflexion, période de questions

Page 33: Vitrine virtuelle

Sources• Mashable.com• Smashingmagasine.com• Wikipedia.com• Kobolaa.com/blog

Page 34: Vitrine virtuelle

Liens

http://www.facebook.com/http://twitter.com/http://www.linkedin.com/https://plus.google.com/http://www.youtube.com/http://www.ning.com/http://www.yelp.com/http://www.icriq.comhttp://www.artisans-quebec.comhttp://www.pagesjaunes.ca/http://www.restomontreal.ca/http://www.weblocal.ca/http://www.bonjourquebec.com/http://www.ebay.ca/http://www.amazon.ca/http://www.shopify.com/

http://www.agentsolo.com/http://www.freelancer.com/http://www.freelance.com/http://www.groupon.ca/http://www.tuango.ca/http://www.teambuy.ca/http://www.paypal.com/https://www.tumblr.com/http://www.wix.com/http://www.wordpress.com/http://www.blogger.com/http://www.joomla.org/http://www.squarespace.com/http://drupal.org/http://www.w3c.org/

http://www.godaddy.com/http://www.domain.com/http://www.domainname.ca/http://www.microsoft.com/windows/internet-explorer/http://www.mozilla.org/http://www.google.com/chrome/http://www.apple.com/safari/http://www.opera.com/http://www.shutterstock.com/http://www.istockphoto.com/http://www.depositphoto.com/http://www.google.com/analytics/http://www.w3.org/WAI/

Page 35: Vitrine virtuelle

Atelier• Plan de création de la vitrine virtuelle d’un participant

Page 36: Vitrine virtuelle

Merci!N’hésitez pas à m’écrire pour toutes [email protected]

Overture ProjectAgence de développement logiciel et webhttp://overtureproject.com