;-)Web design

;-)1. Identifier les objectifs et chercher la cohérence2. Qui fait quoi ? Priorités ? Coûts ? Revenus ? Concurrents ?3. Calendrier -> ça marche toujours moins bien que prévu4. Bien choisir sa plateforme technique et son partenaire5. Privilégier la vitesse (pensez à Google)6. Pas de pari sur les « capacités » techniques du visiteur7. Vérifier la navigation et la recherche8. 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)

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

20 règles pour un site (2)

;-)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 !

;-)Aucun lien, alors qu’on s’y attend

Lien très peu intuitif

Aucun lien, alors qu’on s’y attend

Hiérarchisationdu texte

On s’en fout !

Pub Carrefour ;-)

C’est quoi ?

Qui a vu le ministre ?

;-)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’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.

;-)Pour en savoir plus

http://delicious.com/unpeudeblabla/webdesignhttp://delicious.com/unpeudeblabla/css

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

ab@awt.beandre.blavier@gmail.com