Cours Webmaster

Trucs et astuces pour un site pour un site beau pratique et efficace


Télécharger Trucs et astuces pour un site pour un site beau pratique et efficace

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Trucs et astuces pour un site pour un site beau pratique et efficace

Internet en 2008

34 millions d’internautes, soit 63,5% des français (2009)

65% d’internautes achètent en ligne

186,7 millions de sites Web dans le monde

97% des cyber-acheteurs sont satisfaits de leur achat

56% ont consulté un site avant d’acheter en magasin

33% se sont rendu en magasin avant d’acheter sur Internet

Internet : ce qui a changé…

  • Il y a encore 10 ans, l’Internet était élitiste.
  • Aujourd'hui, Internet fait partie de la vie de tous les jours. C'est devenu un outil fonctionnel.
  • Pratique, il sera utilisé ;
  • Mal aisé, il n'aura aucun succès.
  • Avec la multiplication des sites, les utilisateurs sont de moins en moins tolérants envers ceux difficiles à utiliser.
  • Chaque erreur de conception peut se traduire par une perte d'activité.
  • L'utilisabilité est donc plus importante que jamais.

Ce qu’en pensent les internautes

« Les fondamentaux de l’ergonomie sont encore trop souvent négligés »

  • 75% des internautes rencontrent des difficultés pour trouver ce qu’ils cherchent sur les sites qu’ils consultent

Ce qu’en pensent les internautes

  • 58% sont confrontés à des problèmes de navigation
  • 66% trouvent les contenus des sites souvent mal présentés
  • 47% jugent l’allure de la page d’accueil peu engageante

Un site peut perdre en moins d’une minute près de la moitié de ses nouveaux visiteurs ! Et pas de seconde chance : plus de 7 internautes sur 10 ne reviennent pas sur un site où ils ont rencontré des problèmes de navigation ou d des problèmes de navigation ou d orientation ’orientation.

L’internaute aujourd’hui

  • Un surfeur averti

… exigeant

  • Un zappeur fou

… pressé

… pressé

… intransigeant

  • Il vient chercher de l‘info.

… précise

…opérationnelle

…exhaustive (tarif, horaires, accès...)

…fiable (à jour)

  • L j ité éfè l ti à l’ théti La majorité préfère le pratique à l’esthétique

Sites Web : les enjeux

10 secondes, c’est le temps moyen dont un site dispose pour convaincre les visiteurs de rester.

Dans ce laps de temps, l'internaute doit comprendre :

  • À qui il a à faire
  • De quoi ça parle
  • Comment naviguer

Avant de se lancer

Définissez bien vos objectifs, vos cibles

  • Quel est votre public ?
  • Qu'attendez-vous de votre site ?

Les réponses supposent : une étude de marché, de faisabilité, la mise en place d’un cahier des charges, d’avoir rassemblé toutes les sources de contenu …

NB L i it d it t é i t d d NB : Les visiteurs du site ne sont pas nécessairement des as de l'informatique. Le site doit être pensé pour l'utilisateur le moins expérimenté

1 Grands préceptes

Ton objectif, tu définiras

La première question à se poser est :

A quoi va servir mon site ?

L t d it é d à b i d l'i t t Le contenu doit répondre à un besoin de l'internaute

  • utilité globale
  • micro-utilités

Rassemblez toutes les sources de contenu

  • le site existant
  • les acteurs du projet
  • les concurrents
  • les besoins (supposés ou exprimés) de vos clients/internautes

Ta cible, tu convoiteras

Le site doit être construit en fonction de sa cible :

  • Sur internet c Sur internet, c est ' l utilisateur 'utilisateur qui contrôle l qui contrôle l usage ' du logiciel du logiciel
  • Il n'existe pas de solution "prêt à porter", chaque solution doit être construite "sur mesure"
  • Il faut déterminer le couple utilisateur-utilisation
  • Le site doit être structuré selon le point de vue des utilisateurs visés (tri de cartes)
  • La réalisation de mesures ou de tests utilisateurs fournira des appréciations obj p gq ectives pour évaluer les choix ergonomiques

La main, tu tendras



  • Il est important de guider l’internaute
  • Explicitement (légendes, textes explicatifs…)
  • Implicitement (organisation visuelle, format…)
  • Repérage

9 à tout moment le visiteur doit pouvoir de se repérer

9 logo présent sur toutes les pages, au même emplacement

9 charte graphique uniforme sur l'ensemble des pages

9 plan du site présent

9 mentions lég p alesrésentes

9moteur de recherche

Ton “persona”, tu créeras

  • Un persona est un faux utilisateur créé de toutes pièces pour des besoins méthodologiques : il a toutes les caractéristiques de votre cible
  • Intérêt des personas

o vous force à vous pencher réellement sur votre cible

o humanise votre cible

o donne des objectifs à votre cible

  • Persona primaire (cœur de cible), secondaire (utilisateurs moins fréquents) et tertiaire (complémentaires, prescripteurs...)
  • Décrivez vos personas comme des personnes réelles (nom, travail, vie Décrivez vos personas comme des personnes réelles (nom, travail, vie familiale, habitudes, envies, etc.) et faites-les vivre tout au long du projet

Tes concurrents, tu utiliseras

L'analyse concurrentielle consiste à aller voir chez les autres ce qu'il y a de bien pour soi...

  • Sél ti d' l d t é t tif d d i Sélection d'un panel de concurrents représentatif du domaine :

o on prend les bonnes idées

o on évite les erreurs

  • Pensez à réutiliser des idées :

o fonctionnelles,

o mais aussi terminologiques !

>> Utilisez les conventions et trouvez les moyens de faire la différence !

Organisé, tu seras

  • Le site doit être bien rangé, on doit s’y repérer aisément
  • Il faut limiter la surcharge visuelle : tout ne sera pas perçu
  • Tous les endroits de la page n’ont pas la même valeur

...

Des standards, tu respecteras

  • Vous n’êtes pas le premier sur Internet
  • L ergonomie ’ergonomie ne sert pas à être original ne sert pas à être original
  • Il existe des standards et les internautes ont des habitudes

Tes outils, tu adapteras

L'ergonomie ne s'apprécie pas en fonction du nombre de fonctionnalités :

  • Le site doit répondre aux attentes de ses utilisateurs.

Exemple : Google.

Site ultra-simplistissime (si, si) qui fait ce qu'on attend de lui très efficacement. Ce qui lui a valu une grande part de son succès.

  • Les outils présentés dans cet atelier seront choisis en fonction de leur pertinence dans le projet

Une maquette, tu prépareras

Préparer une maquette du site aide à construire un habillage graphique adapté au contenu.

La démarche créative est souvent inverse : on essay p e delacer des contenus a posteriori dans un habillage finalement trop restrictif.

Cheminement idéal :

  1. Construction du zoning
  2. Réalisation d'une maquette conceptuelle
  3. Création graphique

Un TRUC, tu construiras

Pour Jakob Nielsen, grand gourou de la conception web, les bons sites ont tous un TRUC :

Téléchargement rapide

Régularité et fréquence des mises à jour

Utilisation facile du site

Contenu de qualité (et utile aux visiteurs)

2 Aspects techniques et fonctionnels

A tous, tu seras accessible

Les pages épousent-elles bien les écrans ?

L’affichage

La conception de page sur une largeur de 760 pixels est préférable (760x400). On peut conseiller aussi de prévoir une interface extensible. Si ce n’est pas le cas, il faut réfléchir sur la gestion de l’espace lors de résolutions supérieures à 800x600.

A tous, tu seras accessible

Et côté navigateur ?

Un site web pourra se comporter différemment sur IE ou Firefox, sur PC ou sur Mac. Cela va de petites variations visuelles à de réels dysfonctionnements.

Il faut donc tester et corriger toutes les pages sur différentes combinaisons de navigateurs et de plate-formes.



A connaître tes visiteurs, tu t’appliqueras

Utiliser les systèmes de mesures des visiteurs d'un site fournit une multitude d'informations précieuses pour améliorer l'ergonomie d'un site. Exemple Google Analytics :

D’animations folles, tu n’abuseras pas

Les introductions FLASH provoquent l’irritation des utilisateurs dans leur grosse majorité (à utiliser avec parcimonie !).

  • Le recours au multimédia est loin d’être nécessaire dans tous les cas et peut conduire à une impression d'agitation qui donne envie d'aller se reposer ailleurs.
  • Cela pose une série de problèmes (la compatibilité, l’ergonomie, le temps de chargement, les coûts de production et le référencement).
  • Il est également déconseillé de proposer une animation importante à côté d'un contenu textuel développé.

...

Une horloge, tu avaleras

Proposez un accès rapide à l’information

9 L’internaute ne doit pas perdre son temps

9 Appliquez la règle des 3 clics

9 P è id ( i ) Pensez aux accès rapides (raccourcis)

Veillez au temps de chargement

9 Une page chargée en plus de 10 secondes conduit à un abandon fréquent

9 Mieux vaut proposer un chargement progressif ou afficher le temps de chargement…

9 Il faut savoir que cela dépend de la connexion du visiteur, de la taille de la page et de ses images, des capacités du serveur web…

Des normes d’accessibilité, tu respecteras

Le respect de standards (W3C) permet de garantir la consultation du site par différents navigateurs.

  • Transparence des formats

9 Les formats utilisés doivent plutôt être en mode texte.

Ainsi le HTML sera préférable au Flash.

9 Les images ou animation ne doivent pas se soustraire aux informations textuelles (complément visuel).

  • Légende

9 Une légende ou un texte de remplacement doivent être prévus en lieu et place des images (attribut (attribut alt), pour permettre permettre aux déficients déficients visuels visuels de comprendre le sens de l'image

Des normes d’accessibilité, tu respecteras

Usage sain des feuilles de style

L'information doit être accessible sans feuille de style

Construction des pages

On n'utilise pas de frame pour construire le site (problème de lecture sans feuille de style)

Choix des couleurs

Les couleurs doivent laisser l'information lisible aux personnes ne les identifiant pas correctement (les personnes âgées par exemple, distinguent mal les nuances de bleu) distinguent mal les nuances de bleu)

Des normes d’accessibilité, tu respecteras

Contraste adapté

- Contraste entre couleur de fond et texte

- Outils de vérification sur Outils de vérification sur

Internet

Taille des polices modifiable

Taille des polices adaptable par l’utilisateur

Les hyperliens sont différenciés du reste du texte du site

Le soulignement est réservé aux hyperliens

Le site s'affiche dans la langue du navigateur

Choix d'une autre langue dans le site

Ignorer les lois, nul n'est sensé

Lois de la Gestalt

  • Loi de proximité
  • Loi de similarité

Loi de Fitts

  • Une cible est d'autant plus rapide à atteindre qu'elle est proche et grande...

Le nombre magique de Miller et la loi de Hick

  • Miller : au delà de 7 objets dans notre tête, tout s'embrouille !
  • Hi k i d' ti l l h i t f il Hick : moins on a d'options, plus le choix est facile

L'affordance, tu maîtriseras

Définition (Wikipedia)

L'affordance est la capacité d’un objet à suggérer sa propre utilisation.

Concept majeur en ergonomie web

  • C est ' par l affordance 'affordance des éléments des des éléments des pages web que les internautes pages web que les internautes savent s'ils peuvent cliquer ou non !
  • Optimisation des affordances = augmentation de l'utilisabilité (quel jargon !)
  • L'internaute doit savoir très vite si l'objet est cliquable ou non par son apparence
  • Des comportements renforcent l'affordance des éléments d'une page : changement d'état au survol de la souris

Attention aux fausses affordances



Texte souligné sans lien...

3 La navigation

La navigation, tu faciliteras

D'où-je viens ? Qu'est-ce que je peux faire ici ? Où est-ce que je peux aller ? Comment est-ce que je peux faire marche arrière ?

L’arborescence doit être simple, avec des liens transversaux inter-rubriques et, si nécessaire, un plan du site.

Certains utiliseront un lien rapide pour suivre une idée alors que d'autres préfèreront une logique plus lente et plus structurante d'un menu permanent.

Prop ( g) osez un fil d’Ariane (ou chemin de navigation).

Les éléments de navigation doivent être situés au même endroit sur toutes les pages.

Ta page d'accueil, tu ne louperas pas

Une bonne page d’accueil se doit de révéler d’un coup d’œil toute la richesse du site.

Elle répond aux questions :

  • Où je suis ?
  • Qu’est-ce que ce site peut m’offrir ?
  • Quels chemins puis-je emprunter ?
  • Qu’y a-t-il de neuf ?

On n’a qu’une occasion de séduire.

...

Si néanmoins rater ta page d’accueil, tu voulais

Appliquez le top des erreurs :

– Absence du nom de l’entreprise

– P t l dàh t l Page trop lourde à charger ou trop longue /large ( lli ) (scrolling)

– Frames (cadres)

– Trop de publicités (confusion avec le contenu)

– Page tunnel (sauf obligation légale) : flash sans valeur, mot de bienvenue, etc.

– Page graphique « sapin de Noël »

– Informations parasites (browser, stats, etc.)

– Textes trop longs Textes trop longs, liens ambigus ou mal rédigés etc liens ambigus ou mal rédigés, etc.

– Pages accrocheuses vers des pages en travaux

...

4 Le graphisme

L’esthétique, tu soigneras

Adaptez le ton et l’interface en fonction de votre cible

Prenez en considération: le sexe l’âge le niveau d’instruction l’origine

L’esthétique, tu soigneras

Prenez en considération: le sexe, l âge, le niveau d instruction, l origine géographique et culturelle, l’expérience du média, le degré de fidélisation, l'équipement informatique, etc.

Testez le site auprès des véritables utilisateurs types.

Restez cohérent avec votre plan marketing général (logo, charte graphique, code couleurs) code couleurs)

...

Aux standards typographiques, tu te plieras

Optimisez la lisibilité de vos pages :

™ Limiter les polices de caractères

™ Choisir des polices « rondes »: Verdana , Arial, Arial Black, Courrier New,…

™ Corps de polices minimum de 11px

™ Limiter les majuscules

™ Aérer le texte et rester concis

Il est plus facile de lire un texte écrit en minuscules

IL EST PLUS DIFFICILE DE LIRE UN TEXTE ECRIT EN MAJUSCULES

Aérer le texte et rester concis

A l’œil humain, tu t’adapteras

On distingue deux stratégies d'exploration visuelle :

™ Un nouvel utilisateur explore l'écran et adopte une stratégie en Z.

™ Un utilisateur fidèle connaît l'image et effectue une recherche sélective. Il cherche une information qu'il pense être à une certaine place : il adopte une stratégie de fixation sélective sur les points qui lui semblent pertinents.

™ Le positionnement des éléments est un des moyens les plus efficaces pour des éléments est un des moyens les plus efficaces pour mettre en évidence une information.



549