Web design
Upcoming SlideShare
Loading in...5
×
 

Web design

on

  • 887 views

La présence en ligne de l'entreprise passe par son site Web. Quelles sont les bonnes pratiques et standards à respecter lors de sa réalisation?

La présence en ligne de l'entreprise passe par son site Web. Quelles sont les bonnes pratiques et standards à respecter lors de sa réalisation?

Statistics

Views

Total Views
887
Views on SlideShare
707
Embed Views
180

Actions

Likes
1
Downloads
23
Comments
0

5 Embeds 180

http://www.fracart.fr 138
http://mastertic.blogspot.com 37
http://www.slideshare.net 2
http://mastertic.blogspot.fr 2
http://mastertic.blogspot.be 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web design Web design Presentation Transcript

  • Web design
  • 20 règles pour un site (1)
    Identifier les objectifs et chercher la cohérence
    Qui fait quoi ? Priorités ? Coûts ? Revenus ? Concurrents ?
    Calendrier -> ça marche toujours moins bien que prévu
    Bien choisir sa plateforme technique et son partenaire
    Privilégier la vitesse (pensez à Google)
    Pas de pari sur les « capacités » techniques du visiteur
    Vérifier la navigation et la recherche
    Trouver l’équilibre entre « visuel » et « fonctionnel »
    Eviter la page d’accueil « de la mort » et le « Flash qui tue »
    Eliminer les erreurs … notamment « 404 »
  • 20 règles pour un site (2)
    Tester sur des êtres vivants ;-)
    Référencement // publicité // mesurer sa popularité // stats
    Maîtriser l’e-mail et la newsletter
    Ne jamais décevoir le client et ne pas perdre ses données
    Respecter l’utilisateur et utiliser correctement ses infos
    Intégrer le contenu généré par les utilisateurs
    Ecouter, connaître et segmenter les utilisateurs
    Rester dans le coup (réputation et concurrence) -> veille
    Faire vivre le site et fournir une « expérience » utilisateur
    Si vous oubliez 1 à 19 … pensez à la vie de tous les jours !
  • 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!
  • 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 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 meta« title », etc.).
    • Grouper les informations sur l’entreprise
    • Hiérarchie 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 ».
  • 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.
  • Wouaaa ... Pas mal !... Et pourtant !
  • C’est quoi ?
    Pub Carrefour ;-)
    Lien très peu intuitif
    Aucun lien, alors qu’on s’y attend
    Qui a vu le ministre ?
    On s’en fout !
    Hiérarchisationdu texte
    Aucun lien, alors qu’on s’y attend
  • Screenshot le ... 18/02/2009 !!!
  • 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 (texte = noir).
    • Blocs cohérents.
    • « horttograffe » !!!
    • Standards Web: XHTML/CSS.
  • 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.
  • 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.
  • 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 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).
  • 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.
  • 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, soulignés ! … on peut parfois déroger, mais réserver ces règles aux liens !
    • Rédaction claire indiquant de manière synthétique vers où on va et ce que l’on va trouver comme information.
  • Ecrire pour le Web
    • 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 ».
  • iPhone : l’an 0 de l’Internet mobile
  • 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.
  • Spécifités du terminal mobile >< PC
    Quelles sont les différences majeures ?
    • beaucoup plus “personnel” qu’unordinateur,
    • toujoursallumé et connecté,
    • toujoursdisponiblequand on en a besoin,
    • nouvellesformesd’input (photo, video, touchscreen),
    • géolocalisation,
    • meilleurmarché et beaucoup plus répandu (exemple en Régionwallonne: GSM = jusqu’à 97% chez les jeunes, PC = à peine 60% des ménages).
    Le développement “mobile” ne peutêtreignoré !D’autant plus que les terminaux se perfectionnentconstamment et que le browsing Web sur mobile finira par êtredisponiblesurtous les terminaux.
  • Pour en savoir plus
    http://delicious.com/unpeudeblabla/webdesign
    http://delicious.com/unpeudeblabla/css
    http://unpeudeblabla.tumblr.com/tagged/webdesign
    ab@awt.be
    andre.blavier@gmail.com