Conception de site Web d’entreprise

Présentation au sujet: "Conception de site Web d’entreprise"— Transcription de la présentation:

1 Conception de site Web d’entreprise

2 Sommaire Un site, pourquoi faire ? Charte de navigation
Charte graphique Conception technique d’un site Nettiquette

3 Un site Web, pourquoi faire ?
site Web = outil de communication «faire savoir son savoir-faire» site Web : en perpétuelle évolution ==> définir avant tout : cible contenu charte de navigation charte graphique promotion du site administration/animation du site ==> démarche de conception d’une action médiatique intégrant certains aspects techniques

4 Définir la cible à qui s’adresse le message ?
public visé le définir le plus précisément, en compréhension qui aura accès au message ? sur Internet, on diffuse à tous vents ==> qui accédera réellement, avec quels moyens, quelles protections instaurer éventuellement ? sur le Web, l’utilisateur accède à l’information si : il connaît l’URL de page le site est référencé en moteurs de recherche d’autres pages pointent vers le site sur intranet : identifier les profils-types et les droits d’accès nécessité d’accrocher le visiteur-cible qu’il est facile de quitter un site Web !

5 Définir la cible (suite)
nécessité d’honnêteté vis-à-vis du visiteur conforme à la «culture Internet» si on vend sur Internet, le dire clairement d’où accédera-t-on au message ? Internet : depuis n’importe où sur la planète (Pb de langue !) mais avec quels moyens de connexion, de restitution des médias, d’impression...

6 Définir le contenu s’agit-il d’un site de simple information ?
site classique de première génération pages statiques enchaînées simple à mettre en œuvre (rien d’informatique) y aura-t-il accès à des bases de données ? site plus élaboré nécessite des interactions (formulaires HTML) et la génération dynamique de pages s’agit-il de faire des transactions, du commerce électronique ? site complexe haut niveau de sécurité (des transactions, des paiements) problèmes de droit (cryptage)

7 Définir le contenu (suite)
le niveau de détail des informations publiées les étapes de la progression dans l’information (minimiser les clics de pure navigation sans surcharger les pages) paradoxe du Web : outil de communication planétaire sans précédent mais incapacité à retenir le visiteur incapacité à contrôler la présentation sur le poste client

8 Sommaire Un site, pourquoi faire ? Charte de navigation
Charte graphique Conception technique d’un site Nettiquette

9 Définir la charte de navigation
l’ensemble du site doit être homogène charte de navigation définit méthode et éléments de navigation, éléments de repérage, liens entre pages placer éventuellement une page d’aide à la navigation toute page peut être un point d’entrée pour l’utilisateur placer le logo entreprise sur chaque page renvoi depuis chaque page à la homepage (ou au niveau supérieur ?) la navigation doit être simple, «naturelle», «intuitive» pour la cible visée boutons magnétoscope : tout le monde comprend boutons Minitel : transposition d’applications, grand public non familiarisé avec la micro reproduire la GUI Windows : utilisateur de PC...

10 Charte de navigation (suite)
avancée progressive dans l’information définir les modalités jamais plus de 3 liens pour atteindre l’information essentielle présence d’un glossaire interactif ? formulaire (ou ) pour interaction avec le visiteur ? moteur de recherche interne au site ?

11 Les 6 directions en page Web
vers l’avant, vers l’arrière suivant l’enchaînement conçu par le développeur précédent, suivant dans la suite linéaire des pages visitées implémenté directement dans les browsers confusion fréquente entre ces 2 types previous, next, forward, back plus haut, plus bas (up, down) se réfèrent aux niveaux d’informations (rubriques) éventuellement début (top)

12 Navigations-type (suite)
linéaire enchaînement séquentiel des pages (esprit Minitel) à déconseiller sur Internet maintenance aisée variante avec navigation arrière

13 Navigations-type (suite)
rayonnante ensemble de structures linéaires bouclage sur un menu

14 Navigations-type (suite)
hiérarchisée menus hiérarchiques descente progressive en profondeur dans l’information (principe fort à respecter sur Internet)

15 Navigations-type (suite)
complexe structure de navigation maillée renvois multiples facilitée par menus ou frames ou métaphore difficile à maintenir manuellement

16 3 générations de sites Web
structure linéaire suite de textes/images de haut en bas colle aux capacités d’HTML monotone dans le meilleur des cas : diaporama ex :

17 3 générations de sites Web (suite)
structure rayonnante en général soin apporté à la présentation les icônes remplacent les mots menus graphiques fonds de page, bandeaux... ex : ou

18 3 générations de sites Web (suite)
née pour le commerce électronique basé sur la «métaphore» l’objet de la métaphore est d’immerger le visiteur dans un monde qui lui est familier, dans lequel il se sent bien et qu’il prend du plaisir à explorer. séduire le visiteur susciter la curiosité (tunnel) le site se parcourt comme on visite une boutique ex : ou ou

19 Tunnel Le site est découvert au fur et à mesure, comme une boutique où votre intérêt se déplace de rayon en rayon pour vous faire avancer jusqu’au fond de la boutique Tout est bon pour rendre attirant le site aux yeux du public, sauf... le mauvais goût ex :

20 Les liens liens textuels ou graphiques
lien textuel : dit lui-même de quoi il s’agit et où il renvoie jamais : pour en savoir plus sur la culture du coton, cliquez ici plutôt : culture du coton lien graphique doit se justifier (icône, carte...) uniforme ou image réactive (carte et plan, menu et options)

21 Les liens (suite) liens internes à la page
nécessaires pour les grandes pages (> 4 images-écran) pourquoi pas éclater la page ? ex-types : lexiques, répertoires... toujours tester les principes de navigation : sur un prototype auprès de la population cible (au moins)

22 Sommaire Un site, pourquoi faire ? Charte de navigation
Charte graphique Conception technique d’un site Netiquette

23 Définir la charte graphique
l’ensemble des pages du site doit être homogène image de marque de l’entreprise charte graphique définit règles de mise en page, graphisme, icônes, typographie toute page peut être un point d’entrée éléments visuels de repérage dans le site sur chaque page définir le niveau de graphisme en fonction de la cible et des moyens de connexion présumés sérieux ou attractif ? graphismes et animations ? attention aux temps de téléchargement des pages graphiques sur Internet !

24 Charte graphique (suite)
le graphisme doit simplifier la navigation (et non la compliquer) toujours éviter l’effet gratuit et la prouesse technique

25 Présentations-types textuelle par menu par métaphore
contenu essentiellement rédigé liens sur des mots menus textuels (en base de page) par menu menu graphique pour accéder aux fonctions rappel du menu dans chaque page par boutons (en bas) ou frames (à gauche et/ou en bas) par métaphore présentation graphique restituant l’univers naturel de l’utilisateur très peu de texte pour la navigation attention aux temps de téléchargement sur Internet

26 Typographie définir police, style et taille
pour titres, corps du texte formatage logique ou physique des caractères ? logique : le browser décide physique : risque d’incompatibilité passer par des titres/textes graphiques utilisation des styles HTML ? définir l’usage des titres et menus graphiques définir la mise en page générale du texte (alinéa, marges...) ==> maquette papier/crayon puis prototype(s) ==> feuilles de style CSS

27 Iconographie en cohérence avec : boutons de navigation
l’image de l’entreprise (esprit, logo) les autres documents de communication externe la métaphore utilisée, le cas échéant boutons de navigation lignes de séparation icônes «naturelles» ou «standardisées» naturelles : boutons magnétoscope standardisées : attention aux surcharges : pas plus de 10 fois la même icône par page

28 Images doivent être soignées doivent être justifiées :
qualité, esthétique effet d’ombre, estompage contours ==> effet de relief bénéfique doivent être justifiées : apporter une information faciliter la navigation pas plus de 3 images par page fond de page : attention aux surcharges !

29 Images (suite) doivent être minimisées en volume
résolution, profondeur de couleurs format GIF ou JPEG < 20 KO si grosse image, prévenir sur la taille et laisser le choix à l’utilisateur système de «vignette» pointant vers l’image grand format

30 Emploi d’animation animer une image est toujours bénéfique si cela a un sens logo courrier, téléphone, invitation à poursuivre… toujours préférer le GIF animé compact, efficace, bien supporté par les browsers vidéo : toujours à la demande (vignette) préciser taille et format attention aux formats, mal standardisés peuvent souvent se transposer en GIF animé

31 Emploi de sons fond sonore de page autres : justifier l’intérêt
toujours court, jamais répété à l’infini doit créer une ambiance conforme à l’image de marque autres : justifier l’intérêt extrait discours, clip de pub... toujours prévenir sur la taille et laisser le choix à l’utilisateur attention aux formats, mal standardisés NB : temps d’attente maxi d’un utilisateur : 10 s

32 qu’il est difficile de transposer en ligne des documents texte !
Mise en page doit être cohérente d’une page à l’autre toujours favoriser les pages courtes maxi 5 images-écrans décomposer proposer une avancée progressive textes paragraphes courts (12 lignes maxi) sans faute d’ortografe ni d’expression soigner la relecture 1 rubrique = 1 page 1 idée = 1 paragraphe qu’il est difficile de transposer en ligne des documents texte !

33 Mise en page (suite) bas de page, après ligne de séparation horizontale toujours dater les pages dernière modification toujours signer les pages nom précis ou générique lien avec formulaire ou pour recevoir avis un site n’est jamais fini un site doit vivre ==> rester honnête, accepter la critique

34 Sommaire Un site, pourquoi faire ? Charte de navigation
Charte graphique Conception technique d’un site Nettiquette

35 Conception technique d’un site
site Web = un ensemble de fichiers répartis sur des répertoires de disque du (des) serveur(s) Web un ensemble de serveurs qui coopèrent (Web, Mail, News, ftp…) concevoir au plus tôt l’architecture technique du site et organiser le stockage des fichiers ==> dès la conception, avant toute réalisation de pages ==> structurer l’arborescence des sites Web 1 répertoire par thème ou choix de menu structure du site = reflet de la structure de navigation 1 répertoire commun pour les images et médias des répertoires (ou serveurs) distincts pour les accès aux données, les modules de programme, les mail, les news...

36 Sommaire Un site, pourquoi faire ? Charte de navigation
Charte graphique Conception technique d’un site Nettiquette

37 Nettiquette contraction de «net» et «étiquette»
ensemble des règles de bonne conduite sur Internet il en existe différentes versions sur le site w3c ou traduits par des particuliers adaptés aux différents services d’Internet (Web, News)

38 Les 10 commandements du Web
Tu auras quelque chose à dire dans ta page Web. Tu ne feras pas de liste de listes. Tu n’oublieras pas de tester ta page avec différents navigateurs. Tu te rappelleras que tous tes visiteurs ne sont pas équipés d’un modem ultra-rapide... Tu n’utiliseras pas les graphiques d’un autre sans sa permission. Tu reconnaîtras le travail des autres. Tu dateras ta dernière mise à jour et tu indiqueras tes nouveaux ajouts.

39 10 commandements (suite)
Tu vérifieras tes liens pour éliminer les culs de sac. Tu permettras les commentaires par courrier électronique sur ta page. Tu t’amélioreras constamment dans l’art de construire les HTML.