Mthodologie de conception dun site web

Concevoir un site web Privilgier la phase de conception(avant la technique ou la prsentation graphique du site) Slectionner, organiser, prsenter les informations dans un site web
Rflchir la communication par le web : le web nest pas un mdia comme les autres, mais le web est un mdia : quel est le public vis ? Quel message veut-on faire passer ?

Problme : le public peut tre multiple

Etape 1 : Dfinir le contenu

Dfinir l ide gnrale, la dominante du site :
Quelle sera la fonction essentielle du site : distribuer de l information ? assurer de la formation ? grer des interactions avec l utilisateur ? Quelle sera la forme dominante : texte avec image (classique) ou multimdia (son/vido) ?

Etape 1 : Dfinir le contenu

Dfinir les contours du site en quelques questions :
Quels objectifs pour le site ? A qui sadresse-t-il ? Quel service rend-il ? Quelle interactivit (niveau et type)?

Etape 1 : Dfinir le contenu

Recenser l information existante, lister tous les matriaux disponibles :
Des documents sources existent dj sous de nombreux formats (images, textes, sons, vidos, format lectronique) Exemples : catalogues, annuaires, plaquettes, dpliants, imprims, fichiers manuels ou informatiss, cd-roms, sites web dj existants (ou voisins)

Etape 1 : Dfinir le contenu

Lister les contenus : Faire linventaire des Informations prvoir Au cours d une sance de brainstorming, noter sur une grande feuille blanche tout ce qui vous passe par la tte :
sans chercher structurer sans penser la ralisation technique ou la prsentation graphique

Etape 1 : Dfinir le contenu

Dans cette tape de recherche et de collecte d informations, on peut saider d un aidemmoire (rubriques incontournables d un site web) :
la prsentation : qui sommes-nous ? le message proprement dit : essentiel les informations de service les informations caractre pdagogique les liens hypertexte les informations diverses

Etape 2 : Classer les Informations

Passer du contenu son organisation logique : cest le plan du site
On va ordonner, regrouper les informations : le rsultat est de dgager des rubriques et des sous-rubriques Il y a toujours plusieurs solutions possibles : privilgier le plan qui correspond la logique probable du visiteur (et non celle du concepteur)

Etape 2 : Classer les Informations

Site profond ou large ? - si le site est trop large ( plus de 7 rubriques principales ) il est difficile de faire un choix dans l'information - si le site est profond ( des sous-rubriques sur plus de 3 niveaux ) on ne peut accder rapidement l'information

Etape 2 : Classer les Informations

Au cours de cette organisation :
De nouvelles ides peuvent apparatre On peut tre conduit reformuler les ides formules l tape prcdente
NB : Le processus de conception d un site est itratif, avec de frquents retours en arrire pour affiner les solutions dveloppes, et met en uvre des phases continuelles de prototypage : cration de maquettes qui peuvent tre testes sur des groupes d utilisateurs

Etape 3 : Dfinir la structure

Structurer les Informations. La structure du site : Son organisation pratique et matrielle Dcoupage du site en pages , et organisation des pages entre elles Une page ici : une page-atome = une page-cran(pas une feuille A4)=un fichier HTML

Etape 3 : Dfinir la structure

Une page ne doit tre ni trop longue, ni trop courte :
Si les pages sont trop courtes, l information est reue un rythme trop hach (une page web nest pas limite verticalement) Si les pages sont trop longues, leur temps de chargement devient prohibitif, et elles sont malaises lire (on perd aussi en interactivit)

Etape 4 : la Navigation
Un site Web est interactif. Le principe de base de l hypertexte : la libert du parcours La contrepartie de cette libert, c est le risque de la dsorientation

Etape 4 : la Navigation
La navigation est un problme difficile rsoudre :
On ne parcourt pas un site web comme on feuillette un produit imprim Surtout, la navigation cest la mise disposition du contenu pour le visiteur, cest dfinir les parcours et les actions des lecteurs sur les diffrentes pages du site

Etape 4 : la Navigation
Des exigences contradictoires dun visiteur qui peut avoir deux types de comportements
Il veut se faire une ide gnrale du site ==> entre par la page d accueil Il recherche une information prcise ; il a besoin de savoir si elle existe, et la localiser rapidement ==> entre par une page particulire

Etape 4 : la Navigation
Une navigation efficace doit (devrait) :
fournir de linformation un niveau assez gnral, pour donner une ide densemble du site fournir de l information un niveau trs dtaill, pour permettre de localiser une information prcise permettre au visiteur, o quil se trouve, datteindre la page d accueil et la carte du site faire en sorte que le visiteur ne se sente jamais perdu

Etape 4 : la Navigation
Diffrents types de liens : liens inter-pages liens intrapages(signets) liens externes (URL) vers autres fichiers

Etape 4 : la Navigation
La matrialisation de la navigation :
liens de type texte : mot, groupe de mots boutons barres de navigation menus droulants images interactives ...

La Navigation : exemples
Bandeau gauche de l cran

La Navigation : exemples
Barre de navigation en haut de l cran

La Navigation : exemples
Sommaire dans un cadre

La Navigation : exemples
Plan/Carte du site

Etape 5 : Prototypage papier

Commencer construire des prototypespapiers Dfinir le style gnral, la charte graphique du site

Etape 6 : Prototypage HTML

Dvelopper des prototypes HTML partir des prototypes papier Dmarrage de la production