25
; - Web Connecter l’information Moteurs de recherche Sites Web Portails d’entreprise Serveurs de fichiers Peer to Peer E-mail E- marketin g Voice & SMS E- business Bases de données

Web : connecter l'information

Embed Size (px)

DESCRIPTION

Comment mettre en oeuvre un site Web de qualité. Le Web mobile. Du site Web au portail d'entreprise

Citation preview

Page 1: Web : connecter l'information

;-)Web

Connecter l’informationMoteurs de recherche

Sites WebPortails d’entreprise

Serveursde fichiers

Peer to Peer

E-mail

E-marketing Voice & SMS

E-businessBases de données

Page 2: Web : connecter l'information

;-)1. Identifier les objectifs et chercher la cohérence.2. Qui fait quoi ? Priorités ? Coûts ? Revenus ? Concurrents ?3. Calendrier -> ça marche toujours moins bien que prévu.4. Bien choisir sa plateforme technique et son partenaire.5. Privilégier la vitesse (pensez à Google).6. Pas de pari sur les « capacités » techniques du visiteur.7. Vérifier la navigation et la recherche.8. Trouver l’équilibre entre « visuel » et « fonctionnel ».9. Eviter la page d’accueil « de la mort » et le « Flash qui tue ».10. Eliminer les erreurs … notamment « 404 ».

20 règles pour un site (1)

Page 3: Web : connecter l'information

;-)11. Tester sur des êtres vivants ;-)12. Référencement // publicité // mesurer sa popularité.13. Maîtriser l’e-mail et la newsletter.14. Ne jamais décevoir le client et ne pas perdre ses données.15. Respecter l’utilisateur et utiliser correctement ses infos.16. Intégrer le contenu généré par les utilisateurs.17. Ecouter, connaître et segmenter les utilisateurs.18. Rester dans le coup (réputation et concurrence) -> veille.19. Faire vivre le site et fournir une « expérience » utilisateur.20. Si vous oubliez 1 à 19 … pensez à la vie de tous les jours !

20 règles pour un site (2)

Page 4: Web : connecter l'information

;-)L’importance de l’ergonomie

• Site = utile et utilisable.• Centrer le site sur l’utilisateur :• public cible et attentes de ce public?• services offerts par l’entreprise?• -> faire correspondre les 2 !

• Sur Internet, c’est l’utilisateur qui est aux commandes !• Plusieurs millions de sites disponibles ! L’utilisateur ne perdra

pas son temps sur un site dont l’ergonomie est défaillante.• Ne pas faire de pari sur la configuration de l’ordinateur du

client, ni sur la connaissance technique du client.

Penser au commerce classique et à la vie de tous les jours!

Page 5: Web : connecter l'information

;-)La page d’accueil

Homepage : on n’a qu’une occasion de séduire -> l’image de l’entreprise devant le monde !

Objectifs :• identifier clairement l’entreprise,• identifier clairement les services proposés,• montrer la valeur ajoutée pour l’utilisateur,• fournir des liens pour encourager la visite.

Métaphore : couverture de magazine ou dos de couverture d’un livre (quels contenu, quel public).

Privilégier les structures « portail » ... Sauf par exemple pour des sites spécifiques (événements, etc.).

Page 6: Web : connecter l'information

;-)Page d’accueil utile et utilisable

• Charte graphique adaptée au profil de l’entreprise.• Design spécifique, classique/original unité/variété.• Centrée sur le point de vue de l’utilisateur.• Phrase de sous-titre (baseline) présentant ce que fait l’entreprise et

le site.• Méta-tags (nom de l’entreprise dans la balise méta « title », etc.).• Grouper les informations sur l’entreprise• Hiérachie correcte -> éléments récents, promos, plus-values du site

(ce que les visiteurs y font).• Zone de recherche (en haut).• Exemples de ce qu’il y a à l’intérieur du site -> valoriser le meilleur

et le plus récent.• Mots clés dans les liens -> premiers mots.• Utiliser des illustrations et graphiques utiles (vraies photos par

exemple).• Penser « référencement ».

Page 7: Web : connecter l'information

;-)Bien rater sa page d’accueil

• Absence du nom de l’entreprise.• Trop peu de contenu -> mauvais référencement.• Trop lourde à charger ou vraiment trop longue (critère

en retrait avec la bande passante qui augmente).• Frames (cadres).• Trop de publicités (confusion avec le contenu).• Page tunnel (sauf obligation légale) : flash sans valeur,

mot de bienvenue, etc.• Pages graphiques « sapin de Noël ».• Informations parasites (browser, stats, etc.).• Textes trop longs, liens ambigus ou mal rédigés, etc.

Page 8: Web : connecter l'information

;-)Screenshot le ... 18/02/2009 !!!

Page 9: Web : connecter l'information

;-)Pages intérieures : règles de base

• Créer un standard et s’y tenir -> charte graphique cohérente et systématique.

• Longueur: ni trop long (trop d’infos), ni trop court. Le poids a moins d’importance qu’avant !

• Réserver l’espace au contenu.• Séparer le contenu de la forme.• Pas de frame (cadres).• Affichage correct pour tous les browsers standards (Explorer,

Firefox, Safari, etc.).• Images et animations -> réfléchir en terme de convivialité et de

plus-value !!• Couleur de fond -> le mieux reste le blanc (couleur du texte = noir).• Blocs cohérents.• « horttograffe » !!!• Standards Web: XHTML/CSS.

Page 10: Web : connecter l'information

;-)Navigation

L’utilisateur doit toujours savoir :• où il est,• d’où il vient,• où il peut aller.

Afficher un chemin de navigation.

Textes non-ambigus et utilisant toujours le même vocabulaire.

Ne pas « débrayer » les fonctionnalités du browser.

Page 11: Web : connecter l'information

;-)Faire vivre le contenu

La création du site est la phase la plus simple … ensuite il faut le faire vivre :• contenu mis à jour,• animations, interactivité, • impliquer le personnel et désigner des responsables,• service 24 heures sur 24,• intégration avec le back-office (exemple : une

promotion, mais plus de stock !),• le site n’est pas « un truc » à côté de l’entreprise,• gestion des liens,• etc.

Page 12: Web : connecter l'information

;-)Prévoir un outil de recherche

• Moteur de recherche : indispensable.• … mais à la limite, mieux vaut rien qu’un mauvais

moteur de recherche.• Faciliter la vie de l’internaute : il entre instinctivement

des mots clés en rapport avec son sujet d’intérêt et attend que le système lui donne les résultats adéquats.

• Complément logique d’un catalogue.• Regarder Google.• Tester, tester ... et tester.• Modèle ASP (Application Service Provider) payant ou

gratuit (avec pub ou non, par exemple Google).

Page 13: Web : connecter l'information

;-)Page de recherche

Page d’accueil et pages intérieures :• facilement accessible (coin supérieur droit),• simple, large, bien indiquée, bouton clair,• lien vers une page de recherche plus avancée,• éviter la confusion avec d’autres zones.

Page de recherche spécifique :• liaison entre les mots clés,• sélection de certaines rubriques spécifiques, • critères (date de mise en ligne, etc.),• Surtout utile pour des catalogues de produits afin de réduire le

volume de résultats (par exemple des télévisions).

Page 14: Web : connecter l'information

;-)Résultats de recherche

• Nombre de résultats trouvés et de pages.• Rappel des mots recherchés.• Liste de suggestions vers des raccourcis.• Accès direct à chaque page de résultats (liste

numérotée, page actuelle mise en évidence).• Titre de la page trouvée + lien.• Description de la page trouvée.• Adresse directe de la page.• Date de dernière mise à jour.• Etc.

Page 15: Web : connecter l'information

;-)Les liens hypertextes

• Le lien hypertexte est l’essence du Web.• 3 types principaux de liens :• vers une autre page du site,• vers l’intérieur de la même page,• vers un autre site.

• Lien auto-descriptif (éviter le « cliquez ici »). Le lien permet de structurer la page.

• Texte plus efficace que l’image.• Pas de lien vers la page courante.• Respecter les règles standards des liens : en bleu et

soulignés. On peut parfois déroger à cette règle, mais il faut la réserver aux liens !

• Rédaction claire indiquant de manière synthétique vers où on va et ce que l’on va trouver comme information.

Page 16: Web : connecter l'information

;-)Ecrire pour le Web (1)

• Page = structure de base du Web.• Titre : élément fondamental -> doit être signifiant.• Hiérarchiser et structurer le contenu :• 2 à 3 niveaux de titre (lecture rapide),• liens hypertextes,• listes à puces et numérotées,• mises en évidence (gras, italique, souligné),• utiliser les ressources XHTML (blocs, tableaux, etc.).

• Etre bref et commencer par la conclusion.• On ne lit pas un site comme un livre (l’internaute perd 25% de ses

capacités de lecture -> lecture par balayage).• L’internaute s’intéresse d’abord au texte, et notamment aux titres,

pour voir si la page l’intéresse.• Mots clés.• Attention aux nouveaux utilisateurs « peu éduqués ».

Page 17: Web : connecter l'information

;-)iPhone : l’an 0 de l’Internet mobile

Page 18: Web : connecter l'information

;-)Développement mobile >< Web

Quelles sont les différences majeures avec le Web ?• écran de petite taille (Smartphone) … ou de très petite taille

(GSM) + grande variété de tailles,• capacité d’input et d’interaction de l’utilisateur limitée

(Smartphone) … ou très limitée (GSM),• cauchemar de la diversité des plateformes, browsers et

terminaux,• auto-détection des terminaux = difficile et implique des sites

dynamiques,• pas de standardisation des browsers,• technologies très évolutives et utilisateurs ne faisant pas

nécessairement toutes les mises à jour,• réseaux encore parfois limités et/ou chers,• manque d’expérience des utilisateurs ... Mais attente forte.

Page 19: Web : connecter l'information

;-)Spécificités du terminal mobile >< PC

Quelles sont les différences majeures ?• beaucoup plus “personnel” qu’un ordinateur,• toujours allumé et connecté,• toujours disponible quand on en a besoin,• nouvelles formes d’input (photo, video, touchscreen),• géolocalisation,• meilleur marché et beaucoup plus répandu (exemple en

Région wallonne : GSM = jusqu’à 97% chez les jeunes, PC = à peine 60% des ménages).

Le développement “mobile” ne peut être ignoré ! D’autant plus que les terminaux se perfectionnent constamment et que le browsing Web sur mobile finira par être disponible sur tous les terminaux.

Page 20: Web : connecter l'information

;-)Portail d’entreprise : pourquoi?

• Multiplication des PC et autres terminaux.• Importance toujours plus grande des intranets, ceux-

ci faisant de plus en plus appel aux technologies et à la navigation Web.

• Faire évoluer le site Web de l’entreprise.• Assurer l’interopérabilité des différentes applications

de l’entreprise, de plus en plus nombreuses et de plus en plus électroniques.

• Intégrer, automatiser et personnaliser les services et relations de l’entreprise avec l’ensemble des acteurs concernés.

Page 21: Web : connecter l'information

;-)Portail

d’entreprise : pourquoi?

entreprise sans portail

Page 22: Web : connecter l'information

;-)Portail

d’entreprise : schéma global

Page 23: Web : connecter l'information

;-)Fonctionnalités du portail

• Agrégation de contenu et intégration d’applications (ERP, bases de données, etc.), entre elles, mais aussi avec des applications extérieures.

• Personnalisation en fonction de l’utilisateur.• Travail collaboratif.• Recherche et catégorisation de l’information.• gestion de contenu

documents structurés >< documents non structurés.• Automatisation des tâches et la gestion du workflow.• Gestion de la sécurité.• Administration, analyse, …• Vente en ligne et suivi des commandes.• Etc.

Page 24: Web : connecter l'information

;-)Portail d’entreprise

Web services et cloud computing

Page 25: Web : connecter l'information

;-)Pour en savoir plus

http://delicious.com/unpeudeblabla/webdesignhttp://delicious.com/unpeudeblabla/csshttp://delicious.com/unpeudeblabla/mobilehttp://delicious.com/unpeudeblabla/referencement

http://unpeudeblabla.tumblr.com/tagged/webdesign

[email protected]@gmail.com