JOURNEE SEMINAIRES

CONCEPTION D’UN SITE CONCEPTION D’UN SITE WEB ATTRACTIFWEB ATTRACTIF

18 OCTOBRE 2008

Patricia Demoulin

INTERNET Tour de toile – rappel historique Communication et protocolesBATISSEZ VOTRE SITE Etapes Charte graphique et structure du contenu Ergonomie et conseils d’experts Rédaction et navigation : comment, pourquoi Le web 2.0 : une révolution !LIENS ET OUTILS Outils - ‘logiciels libres’ - Quelques sites à tagger Les solutions d’hébergement – Mine et Hostbasket CONCLUSION & MOT DE LA FIN

1

LA TOILELA TOILEInternet, WWW, W3, World Wide Web, Web ...Internet, WWW, W3, World Wide Web, Web ...

Internet est un média Internet est un média particulierparticulier

Qui a son « langage » et son Qui a son « langage » et son ‘vocabulaire’‘vocabulaire’

On parle de “ PROTOCOLES “ de On parle de “ PROTOCOLES “ de communicationcommunication

2

HISTOIRE DU WEB

1972 : Première démonstration d'Arpanet – réseau lancé par le pentagone en 1967

1979 : Compuserve et le courrier électronique

1989 : Tim Berners-Lee du CERN invente le terme World Wide Web

1994 : Yahoo et les premières images

1996 : Netscape et les premières animations

1998 : Apparition du XML et de Google

1999 : Apparition du format rss version 0.90

2000 : XHTML

2001 : Wikipédia et le début du participatif

2004 : Firefox et le retour de l'alternative à Microsoft

2006 : Explosion du haut débit, de la vidéo et du Web 2.0

2007 : Explosion des réseaux sociaux

3

SERVEUR D’HEBERGEMENT

POSTE CLIENT(PC de l’internaute)

Lecture de la pagepar le

navigateur

SCHEMA DE COMMUNICATION SCHEMA DE COMMUNICATION 4

Quelques notions de Quelques notions de protocolesprotocoles

Internet utilise un ensemble de protocoles regroupés sous le terme "TCP-IP" (Transmission Control Protocol/Internet Protocol)

Voici une liste partielle des protocoles qui sont utilisés :

HTTP (Hyper Texte Transfert Protocol) : c'est celui qu'on utilise pour consulter les pages web

FTP (File Transfert Protocol) : protocole utilisé pour transférer des fichiers d’un ordinateur à un autre (par exemple, pour ‘charger’ un site sur Internet)

SMTP (Simple Mail Transfert Protocol) : protocole utilisé pour envoyer des mails

POP : C'est le protocole utilisé pour recevoir des mails

IP (internet Protocol) : L'adresse IP identifie un périphérique réseau ou un ordinateur distant de manière unique (exemple : 192.168.2.1 ou 127.0.0.0). Lorsque vous surfez sur Internet, votre FAI attribue dynamiquement une adresse particulière à votre ordinateurà partir d’une liste d’adresses IP lui appartenant

5

BATISSEZ VOTRE SITECRITERES DE BASE

« La conception d'un site utile et performant demande non seulement que les contenus et services répondent aux besoins des visiteurs, mais surtout que l'ergonomie et la navigation soient pensées afin de les rendre facilement accessibles aux visiteurs finaux. » 

Les trois critères de base sont :

• L’efficacité : permettre aux utilisateurs d’atteindre le résultat prévu.• L’efficience : temps minimal requis pour atteindre ce résultat.• La satisfaction : confort et évaluation positive de l’interaction pour et par l’utilisateur.

Un site web est un produit évolutif. Il faut donc :Un site web est un produit évolutif. Il faut donc :démarrer le site modestement ;démarrer le site modestement ;

le faire évoluer progressivement ;le faire évoluer progressivement ;le maintenir en permanencele maintenir en permanence

6

Ne brûlez pas les étapes !

Créer un site web nécessite un minimum d'organisation. Faites un plan ! Décrivez méthodiquement, sur papier, l’objectif, le contenu et l’apparence de votre site.

Analysez les sites “concurrents”

Établissez une charte graphique : identité visuelle, logo, gabarit(s), positionnement des textes et des images

Définissez votre public cible et ses attentes

Structurez la présentation et le contenu de votre futur site : arborescence du site (navigation), pages, thèmes et catégories d’informations

La navigation est un élément majeur de structuration : menus, enchaînement des pages, retour à l’accueil, liens internes

Ecrivez le « story-board » : cette étape consiste à définir quel contenu va sur quelle page

Planifiez des mises à jour régulières, votre site doit être ‘vivant’ !

7

La charte graphique

• Votre logo

• Vos couleurs : une bonne charte comporte 3 à 4 couleurs de base avec une seule couleur dominante. Votre site sera décliné dans les nuances de ces couleurs

• les polices de caractères utilisées afin de créer différents niveaux de textes et d'apporter un bon confort de lecture. La typographie est l'une des composantes essentielles de l'univers graphique représentatif d’une entreprise

• L’apparence générale et la position des différents éléments sur les différentes pages du site. Le but est de choisir un gabarit commun par page ou groupe de pages (principales, secondaires …etc)

Pour se démarquer, votre site doit avoir une identité et cette identité doit être reconnue rapidement par les visiteurs sur base d'éléments clefs définis dans une CHARTE GRAPHIQUE :

8

La charte graphique

Lors de l’établissement de votre charte graphique, tenez compte des points suivants :

Examinez les couleurs et les standards utilisés par les entreprises actives dans le même secteur que le vôtre

Préférez un fond de page clair

Utilisez des polices dites « standard » (Arial, Helvetica, Times new roman …) afin que vos textes s’affichent normalement sur la majorité des ordinateurs et limitez le nombre de polices utilisées à 3 !

Limitez les photos et autres illustrations à ce qui est "utile"

9

Le gabarit (template en anglais)

Le principe consiste à découper une page en grandes zones qui vont accueillir du contenu. Dans l’exemple qui suit, 4 zones sont identifiées : en-tête (a), colonne de gauche (b), corps de page (c) et colonne de droite (d) :

10

Selon Jakob Nielsen, expert en ergonomie de sites Web, les facteurs de succès d'un site sont :

• La facilité d'apprentissage et de compréhension: tout nouveau visiteur doit comprendre rapidement le fonctionnement du site. (présence d’un menu générique)

• L'efficacité d'utilisation: le visiteur doit trouver rapidement l'information qu'il cherche (règle des 3 clics)

• L'utilisation sans erreur: le visiteur doit atteindre l'objectif visé sans effectuer de « fausses manœuvres ». (présence d’éléments de navigation sur toutes les pages , rubriques d’aide)

• La satisfaction: l'appréciation subjective du site par le visiteur est conditionnée par les aspects esthétiques ainsi que par les attributs précédents

CONSEILS D’EXPERT11

Synthèse du contenu

Quels sont les buts poursuivis au travers de votre site web ?

Etre présent sur Internet ?

Créer et valoriser votre image de marque ?

Générer des contacts ? Des ventes ?

Montrer vos produits ?

Informer vos actionnaires ?

12

Le public cible Quel(s) public(s) visez-vous ? Définissez les attentes de chacun

d'eux. (exemple : actionnaires => chiffre d’affaires, graphiques financiers, valeur de l’action …)

Pourquoi vient-il visiter le site ? Que cherche-t-il ?

Quelles actions aimerait-il pouvoir effectuer sur le site, et pour obtenir quoi ?

Pourquoi reviendra-t-il ? A quelle fréquence ?

13

REDACTION.BE

le site des spécialistes de l’information en ligne

14

Un peu d’ergonomie

Les conclusions des recherches effectuées sur la lecture à l’écran permettent de déterminer où placer les éléments de contenu les plus importants (suivez les flèches)

Sur Internet, on ne lit pas de la même manière que sur un support papier, et l’attention des internautes est difficile à capter.

15

Plan des pages

Quelles informations faire figurer sur chaque page ? contenu [plan, idées, liens…] mais aussi formats [textes, images…]

Organiser les rubriques en fonction des contenus

Prévoir les rubriques à venir, même si le contenu n’est pas encore disponible

Construire un organigramme du site

Que mettre sur la page d’accueil ? (logo, nom du site, infos de contact, sommaire, dernières nouvelles…)

16

Agencement de page

Une page ne doit être ni trop longue, ni trop courte.

Si les pages sont trop courtes : l'internaute reçoit l’ information de façon hachée.

Si les pages sont trop longues : leur temps de chargement devient prohibitif.

La largeur des pages doit être adaptée à la taille d’affichage de l’écran. Le défilement horizontal doit être proscrit, nous ne sommes pas habitués à lire des textes larges.

17

Conseils de navigationhttp://www.navigation-web.com

18

Le contenu du site dépend de son but, il ne sera pas le même sur un site « plaquette » (dans lequel on va parler de l’activité de l’entreprise, de ses produits et/ou services et qui contiendra une fiche contact) que sur un site « catalogue » (où l’accent sera mis sur les produits et sur la vente).

L’arborescence doit être pensée en fonction du type de site et organisée par thème (la société, le produit, les chiffres, les événements …etc.)

Arborescence du site

Structure trop profondeStructure trop linéaire

Les str

uctures

à évite

r

19

Une arborescence bien pensée et organisée clarifie le contenu et rend le site plus agréable à visiter

Exemple d’arborescence par thème

Accueil

Produits Chiffres MarketingMiniFAQ / divers

20

La mise en page

La mise en page doit être conçue comme une pyramide.

Cette pyramide va fonctionner comme un entonnoir qui va "aspirer" les lecteurs dans vos pages.

Le titre : Court, explicatif, accrocheur. 50% des lecteurs quitteront votre page si le titre est absent ou peu intéressant.

Le chapeau : Situé sous le titre, ce texte court (en caractère gras ou de taille moyenne) permet aux lecteurs de vérifier que la page correspond bien à leurs attentes. Il doit résumer l'essentiel de votre page en 2 à 5 lignes. Ce texte doit donner envie à vos visiteurs de lire le reste du texte !

Les paragraphes : Vous devez développer une seule idée par paragraphe. Une fois votre texte terminé, demandez-vous si les paragraphes ne pourraient pas être réordonnés de façon plus logique. N'hésitez pas à supprimer les paragraphes qui n'apportent rien à votre propos.

Les sous-titres : Capter l'attention, c'est bien. La conserver, c'est mieux. Le sous-titre vous permet de rattraper un lecteur qui allait quitter la page.

21

Respectez les standards

Vos visiteurs sont habitués à certains mécanismes, ne les perturbez pas. Ils doivent se sentir comme chez eux !

Pas de textes soulignés : sur le web, un mot ou une expression soulignée est un lien. N'utilisez jamais le soulignement dans un autre but. Jouez plutôt sur la couleur, sur la taille ou sur le gras et l'italique.

Du texte lisible : ce conseil à l'air stupide. On voit malheureusement beaucoup de sites qui proposent du texte jaune sur fond gris, par exemple. Le texte le plus lisible et le moins fatigant est le texte noir sur fond blanc. Vous pouvez vous éloigner légèrement de ce standard à condition de toujours garder un bon contraste entre le fond et le texte.

Une taille de texte confortable : beaucoup d'internautes ont une vue basse ou moyenne. Les sites utilisant des caractères microscopiques sont fatiguants.

Des titres de page : Où suis-je ? D'où viens-je ? Où vais-je ? Evitez à vos visiteurs de se perdre dans ces questions philosophiques ! Donnez leur des repères !

Des sous-titres, une mise en page aérée : Segmentez vos informations en chapitres clairement identifiés. Vos visiteurs doivent pouvoir choisir ce qu'ils veulent lire ou zapper.

22

Quelques JokersCes « attrape-lecteurs » vous permettent de gagner quelques points d'audimat :

Les images : Illustratives, explicatives, humoristiques, surprenantes : tous les coups sont permis !!! Vous devez intégrer au moins une image par page pour reposer l'oeil de vos lecteurs et capter leur intérêt. Attention au poids !!! Vous devrez trouver des images de petites dimensions parfaitement lisibles. Plus une image est simple, moins elle "pèsera" lourd et mieux elle jouera son rôle d'illustration.

Les légendes d'images : Si votre image est illustrative, il faut absolument lui attribuer une légende ! Les légendes des belles images sont lues même par les visiteurs pressés !

Les encadrés : Un petit texte amusant ou anecdotique, ou un complément d'information peuvent être ajoutés à votre page sous la forme d'un encadré. L'encadré peut éventuellement avoir un fond légèrement plus foncé que le reste de la page. Cela permet de "casser" les mises en page trop rigides et apporte un côté un peu "fun" aux pages sérieuses.

23

LES 10 ERREURS A EVITER !

Les images et/ou les animations en nombre excessif Les fautes d'orthographe et de syntaxe(utilisez les correcteurs !) La musique (sauf si vous permettez au visiteur de couper le son) Les compteurs de visites (visibles) Les popup's et la pub intempestive Les phrases à rallonge, les pages trop grandes, un site surchargé Les pages “en construction” Les liens ‘morts’ Les entrées en flash (sauf si vous permettez au visiteur de les ‘passer’) La copie ou la reproduction d’images, d’articles ou de sources de données qui

ne sont pas ‘libres de droit’ (respect des droits d’auteurs et des lois sur la ‘propriété intellectuelle’)

24

Le WEB 2.0 : une révolution !

Un concept « simple » synonyme de participatif et de collaboratif.

Les contenus sont coproduits par les utilisateurs qui peuvent également enrichir le contenu des autres.

Une technologie révolutionnaire !

RIA – Rich Internet Application

Les RIA favorisent la fusion des logiciels traditionnels et des logiciels client-serveur de type Internet. La dimension interactive et la vitesse d'exécution sont particulièrement soignées dans ces applications web.

Des évolutions techniques:

Permettant d'augmenter de manière très sensible l'ergonomie des sites web.

Augmentant la participation des usagers à la construction des contenus.

25

Les véritables apports du Web 2.0

Une meilleure ergonomie des interfaces Un accroissement des possibilités de publication, de partage et de

collaboration Le développement de plateformes de services en ligne Le mixage de différentes plateformes ...

Partage de contenus (vidéos, photographies, signets, documents bureautiques...)

Participation active à des contenus: blogosphère, wikis (wikipédia), réseaux (Facebook, Del.icio.us), groupes (Google, Yahoo), vidéothèques (YouTube), albums photos (Picasa, Flickr) ...

Des outils de veille partagée (fil RSS)

Travail collaboratif (mutualisation de documents de travail)

26

Comment utiliser le WEB 2.0

De plus en plus de sociétés profitent des apports du Web 2.0 pour faire du Marketing par le biais de la publication et du partage de contenu sur des réseaux et des sites d’hébergement de vidéos ou d’albums photos.

Ces plateformes Web, conviviales et ludiques, attirent beaucoup de public. N’hésitez pas à les utiliser pour vous faire connaître !

27

Plateforme blog sans pub

http://www.zeblog.com

http://wordpress.com

http://www.over-blog.com

Plateforme de création de site

http://www.weebly.com

http://www.webzinemaker.com

CMS (Content Management System)

http://www.freeguppy.org/

http://www.spip.net/fr_rubrique91.html

LIENS ET OUTILS UTILES28

Les générateurs automatiques de sites

Aussi simple à utiliser que Google Page Creator, il se paye le luxe d'offrir d'avantage de possibilités de mise en page mais n'a pas la souplesse de son rival pour ce qui est des réglages de tailles et de couleurs des textes.

Un système très simple à utiliser, gratuit et sans publicité. L'offre de Google inclut l'hébergement avec un espace disque de 100 Mo, ce qui est largement suffisant pour la plupart des sites « perso »  mais il faut disposer d'un compte GMail

29

Les outils ‘WYSIWYG’What You See Is What You

Get

Compétence Micro a publié un très bon manuel intitulé ‘Votre site web facile et gratuit avec NVU’. (En vente en grande surface et dans plusieurs magasins spécialisés en micro-informatique. Prix : 6,00 €)

Un outil WYSIWYG vous permet de créer un site web personnalisé sans connaissance du langage XHTML ni des feuilles de style.

Vous dessinez et remplissez vos pages comme dans un traitement de texte et l’outil génère les pages web.

Dreamweaver (ADOBE) et NVU (Open Source) sont les deux outils les plus connus.NVU est un outil gratuit et relativement facile à utiliser.

Pour le charger et l’installer sur votre ordinateur :

www.geckozone.org/telechargement

30

MINE.BE et hostbasketL’offre gratuite LJE

Grâce à Mine, la marque jeune de Fortis, et Hostbasket, fournisseur d'hébergements, les jeunes entrepreneurs peuvent bénéficier d'un site Web gratuit pour leur mini-entreprise, pendant un an !

Les informations concernant la procédure d’inscription sont disponibles sur le site des Jeunes Entreprises de Belgique (www.lesjeunesentreprises.be)

Pour en bénéficier, prenez contact avec Alain en lui envoyant un courriel à l'adresse :mini.web@lesjeunesentreprises.be

Vous devez obligatoirement passer par les services de l’a.s.b.l.Les Jeunes Entreprises. Dans le cas contraire, le service vous sera

facturé !

31

Pour créer un site attrayant, il vous faut juste : Des idées, de la passion et du temps De la curiosité : recherche et consultation de sites spécialisés Des notions de base en XHTML et en CSS. Un logiciel pour créer votre site. Un logiciel de transfert ftp. Un espace pour héberger votre site.

Il existe dans le monde du ‘LIBRE’ quantité de logiciels, de ‘scripts’ et de sites consacrés à la conception, à la création et à la

maintenance de site Web.

Utilisez les moteurs de recherche web pour les trouver et vous informer.

CONCLUSION32

MOT DE LA FIN

Il est bon de connaître les conventions et les normes,

non pas pour les appliquer systématiquement,

mais pour être conscient de leur intérêt et

de ce qu'on risque à ne pas les respecter !

33