ERGONOMIE ET NAVIGABILITÉ D'UN SITE - open21.fr · conçu pour initier les TPE dans ces domaines....

20
CONSEILS & INFOS POUR VOTRE SITE INTERNET septembre 2010 VALORISER SON SITE PAR LES CONTENUS comment tirer le meilleur de votre site web RÉDIGER POUR LE WEB conseils et explications pour concevoir vos textes FLASH pourquoi il ne faut pas en abuser ! ERGONOMIE ET NAVIGABILITÉ D'UN SITE

Transcript of ERGONOMIE ET NAVIGABILITÉ D'UN SITE - open21.fr · conçu pour initier les TPE dans ces domaines....

CONSEILS & INFOS POURVOTRE SITE INTERNET

septembre 2010

VALORISER SON SITEPAR LES CONTENUScomment tirer le meilleurde votre site web

RÉDIGER POUR LE WEBconseils et explicationspour concevoir vos textes

FLASHpourquoi il ne faut pasen abuser !

ERGONOMIE ETNAVIGABILITÉ D'UN SITE

sommaire

ZOOM SUR...La Charte e-TIC18

ON EN PARLEDRAC Bourgogne16

ERGONOMIE ETNAVIGABILITÉquelques notions clés

12

FLASHl'art de ne pas en abuser10

RÉDIGER POUR LEWEBles bonnes techniques

8

CONTENUS WEBvalorizez votre site !6

NEWSquoi de neuf dans lawebsphère ?

4

page 2

edito

Directrice depublication :Agathe Bonnin

OPEN21Rédaction :

Crédit photo :www.photo-libre.frwww.sharkdesign.frwww.fotolia.fr

OPEN2134 rue Alix de Vergy21000 Dijon03 80 74 84 79

RCS Dijon497 537 712

Toujours plus de conseils !Après le succès du premier numéro de votre magazineOPEN21mag, ce deuxième numéro inaugure unerentrée chargée en actualité côté web. Vous en aurez unaperçu dans les pages News et Tendances...

Vous allez retrouver également des conseils et desexplications pour tirer le meilleur parti possible de votresite internet, que ce soit par les contenus, la rédactionou l'ergonomie, par exemple.

Et enfin, la rubrique "Portrait", fait encore une fois lapart belle à une personnalité locale qui dynamise la vienumérique de la cité !

Bonne lecture !

Agathe Bonnin, directrice OPEN21

page 3

    

NEWS ECO & TECHEN BOURGOGNE

Passeport pour l'économienumérique

Perdu  sur Internet ? L'informatique vouspanique ? Des modules de formation sontconçu pour initier les TPE dans cesdomaines. Ils sont dispensés par desprofessionnels, notamment au sein de laCCI Dijon. Pour les créateursd'entreprises rendez-vous tous les 1ermercredi du mois, 9h-11hwww.dijon.cci.fr

Forum de la fibre optiqueEntreprises, artisans, collectivités, veneztout apprendre de la fibre optique, le 9septembre, à Chalon sur Saone, lors de cepremier salon.www.legrandchalon.fr

FoodCamp de DijonLe 1er FoodCamp de Dijon aura lieu le 7novembre, dans les studios de Images &Associés. La rencontre de passionnés degastronomie et de fans des universnumériques, en toute convivialité.Pour vous inscrire gratuitement :www.foodcamp-dijon.fr

page 4

    

DU 9 SUR LE WEBLES TENDANCES

Réalité augmentéeImmersion, tourisme augmenté, 3D... lesapplications sont nombreuses en réalitéaugmentée ! Pour tout savoir de cestechnologies, les comprendre et suivrel'actualité, une adresse s'impose sur leweb : le blog www.augmented-reality.fr.Articles, vidéos, interviews... tout y est.

Tablettes tactilesAvec plus de 3 millions d'exemplaires deson Ipad écoulés, Apple a résolumentlancé cet outil, entre le mobile et lenetbook ! Asus, Dell, Samsung, Google,et autres, ne sont pas en reste, et paufinentleurs modèles !

3DCinéma, sports, jeux... tout le monde semet à la 3D ! Cette tendance qui vise àrendre l'expérience plus riche ensensations est en train de prendre unvéritable essor. Plus de 42 millions detéléviseurs 3D devraient être vendus dansle monde d'ici 2014 !

page 5

    

LES CONTENUS WEBpour valoriser votre site

Une fois votre site web professionnel en ligne, vous pensez que tout estfini ? Il serait plus exact de dire que tout commence... En effet, unefois l'arborescence définie, le graphisme validé, les contenusreprésentent un aspect conséquent de votre site. Et c'est certainementle point le plus important, celui à ne surtout pas négliger.Il ne suffit pas d'avoir une jolie vitrine sur Internet, encore faut-ilavoir quelque chose à dire. C'est de cette manière que vous réussirez à

capter l'attention de vos visiteurs et clients potentiels.

Posez-vous la question face aux sites web que vous consultez fréquemment :« pourquoi est-ce que je reviens régulièrement sur ce site ? » Il est fort probableque la réponse s'oriente vers « parce que les informations que je trouve sur ce sitesont intéressantes et renouvelées ».Voilà donc l'axe principal à travailler : les contenus de votre site et la manière deles rendre pertinents par rapport à votre activité.Pour cela, il vous faut d'abord identifier votre cible principale de clientèle, ce quevous avez déjà sûrement fait en amont de la création de votre société et/ou de votresite web. Si votre cible est plutôt vaste, segmentez si besoin vos contenus(adultes/enfants, particuliers/professionnels, etc.). Cela permet à vos visiteurs de sesentir plus concerné par vos propos.

Faites ensuite le point sur les différents aspects de votre entreprise que vouspourrez mettre en avant régulièrement : nouveaux services, renouvellement degamme, participation à des conférences ou salons professionnels, actualité de votremétier, conseils pratiques sur l'utilisation de vos produits... Cela vous servira debase pour élaborer les actualités à diffuser sur votre site. Regroupez-les alors dansune rubrique spécifique, ou pourquoi pas directement sur votre page d'accueil. Cesactualités montrent le caractère dynamique de votre société.

Si vos produits nécessitent une documentation technique ou un descriptif détaillé,n'hésitez pas à proposer des fiches à télécharger en PDF, accessibles facilement.Vos visiteurs vous sauront gré de leur rendre la vie plus simple...

page 6

 

Ce qui rend un journal intéressant, cesont ses articles. Même chose pourvotre site.

Ne regardez pas toujours ce que fontvos concurrents en matière de site webavec envie. Démarquez-vous ! Essayezde trouver un angle éditorial original,qui apporte une vraie valeur à vosvisiteurs.

Par exemple, faites intervenir un expertdont le domaine est complémentaire devotre métier, et mettez en ligne sesanalyses ou conseils professionnels.

page 7

    

RÉDIGER POUR LEWEBles bonnes techniques...

Rédiger les textes de son site Internet, c'est souvent la tâche qui rebutele plus. Si celle-ci n'est pas des plus faciles, elle n'en reste pas moinscapitale, évidemment.A chaque support ses particularités. Vous ne rédigez pas un panneaupublicitaire de la même manière qu'une plaquette commerciale. Aussi,vous ne rédigerez pas votre site web de la même façon qu'un autresupport.

D'abord parce qu'on lit moins vite sur le web que sur du papier, et ensuite parce queles internautes ont pris l'habitude de lire en diagonale la plupart des textes.

Privilégiez donc les phrases courtes et simples, sans tournures grammaticalescomplexes. Regroupez les différents éléments de votre texte dans des paragraphes,dont le contenu sera facilement identifiable par un titre. Cela permettra au visiteurde retrouver plus rapidement l'information qu'il cherche.Si des mots ou des expressions sont particulièrement importants, n'hésitez pas à lesmettre en gras, mais sans en abuser, au risque de voir l'effet inverse de celuirecherché se produire. Aérez votre texte pour en faciliter la lisibilité.

Rédiger c'est, bien entendu, s'exprimer dans un français correct, et si possible sansfaute d'orthographe. Vous y gagnerez en sérieux et en crédibilité aux yeux de vosvisiteurs. Mais rédiger pour le web c'est aussi penser au référencement de votresite.En effet, plus vous soignez vos textes en respectant certaines règles, mieux votresite sera perçu par les moteurs de recherche.Commencez par identifier les mots-clés les plus pertinents pour votre domained'activité, et placez ensuite ces mêmes mots-clés dans vos textes. Placez égalementles mots-clés importants dans vos titres.

La qualité éditoriale et organisationnelle d'un texte est primordiale sur un site web.Il s'agit de savoir  comment délivrer le bon message pour capter l'attention desvisiteurs, tant sur le contenu que sur la forme. C'est la clé d'un support efficace.

page 8

 

Aujourd'hui, rédacteur web estdevenu un vrai métier à part entière.

Si vous ne pouvez pas investir dansune rédaction réalisée par unprofessionnel, formez-vous !

Il existe des livres, des diaporamas etdes sites dédiés sur le sujet.

page 9

    

FLASHl'art de ne pas en abuser

Vous avez peut-être entendu parlé du Flash, qui désigne familièrementune technologie développée par la firme Macromedia (propriétéd'Adobe), mais vous n'avez en tous cas pas pu passer à côté surInternet. Sur les bannières de publicités animées, mais aussi sur lessites web, le Flash est présent presque partout, de manière discrète ouplus affirmée.

Si cette technologie permet aux designers de laisser libre court à leurs talents et deproposer des contenus visuellement originaux, elle recèle cependant quelquesdéfauts propres à son format. Avant de demander à votre webmaster ou votreagence web un site « full flash », c'est à dire entièrement réalisé avec la technologieFlash, prenez un moment pour analyser les effets de bord.

Tout d'abord, et même si on ne vous le dira pas toujours, un site en Flash seréférence moins bien que les autres, malgré les efforts conjugués d'Adobe et deGoogle. Il est en effet difficile pour les moteurs de recherche de comprendre lecontenu de votre site lorsque celui-ci est en Flash.Ensuite, pour les mêmes raisons, votre site sera peu accessible aux personneshandicapées, notamment les personnes aveugles, même si certaines fonctionsd'accessibilités sont désormais incluses dans le lecteur Flash. 

Du côté de l'ergonomie, ce n'est pas forcément la panacée. Perdre vos visiteurs dansun dédale de couleurs mouvantes n'est pas précisément la meilleure manière decapter leur attention sur l'essentiel... Privilégiez l'intérêt des contenus plutôt que detout miser sur l'aspect graphique, au risque que le visiteur ne retienne quel'impression visuelle procurée par votre site et non votre message.Si votre site est régulièrement consulté via des téléphones mobiles, sachez qu'enétant conçu en Flash il ne s'affichera pas sur certains appareils, comme l'Iphone.C'est un point à ne pas négliger.

Pensez également à la mise à jour de votre site.

page 10

    

Si vous n'êtes pas vous-même unexpert en création Flash, vous devrezla plupart du temps repasser par votreagence web pour modifier votre site.Cette solution n'est pas forcément trèséconomique...

Si votre principal conccurent disposed'un site tout en flash, résistez à latentation de l'imiter.  Encore une fois,démarquez-vous ! S'inspirer, ou pirecopier, le site d'un concurrent n'est pastrès valorisant.

Flash : le mot et sa définition

Le terme Flash désigne aussi bien latechnologie que le lecteur permettantde visualiser les éléments réalisés aveccette technologie. Le lecteur estégalement appelé Flash Player.La plupart des navigateurs webpermettent aujourd'hui de lire deséléments et des sites en Flash.

Flash sert aussi bien à créer deséléments de sites web qu'à réaliser desjeux vidéos ou diffuser des vidéos etdiaporamas sur Internet

“le Flash est présent presque partout, demanière discrète ou plus affirmée”

Votre entreprise ne sera pas vuecomme innovante. On retient souventl'original et rarement la copie.

Alors faut-il bannir définitivement leflash des sites web ? Non, bien sûr.Mais utilisez-le à bon escient. Vouspouvez tout à fait créer un logo ou unbandeau en flash, mais évitez-le pourdu contenu signifiant tel que des textesou des menus.

page 11

    

ERGONOMIE ETNAVIGABILITÉ D'UNSITE

L'ergonomie d'un site est la manière de répondre le mieux possible auxattentes des visiteurs, tout en leur proposant une navigation aisée.

Bien sûr, il n'est pas toujours facile de cerner les éléments déterminantsde cette ergonomie, car ils varient en fonction de plusieurs critères.Sans entrer dans des détails trop complexes (ergonome est d'ailleurs unmétier à part entière...), quelques aspects se dégagent néanmoins.

 : tous les visiteurs ne cherchent pas forcément la même chose surLes attentesvotre site. Il vous faut donc proposer à chacun la possibilité d'accéder rapidement àune information précise et essentielle, mais aussi offrir à ceux qui le souhaite uneinformation plus détaillée. Pour résoudre ce casse-tête, présentez les élémentsessentiels de votre produit ou service dans quelques courtes lignes, et proposez unedeuxième partie plus fournie, accessible via un lien de type « en savoir plus ».

 : les internautes ont acquis avec la pratique des habitudes qui leursLes habitudessont propres, mais dont les grandes tendances comportementales ont été établiespar différentes expériences.Par exemple, les internautes deviennent de plus en plus « aveugles » aux bannières.En effet, l'abondance de bannières publicitaires a conditionné les visiteurs à éviterau maximum de les regarder. Ne placez donc pas d'informations importantes devotre site sous forme de bannière ressemblant de près ou de loin à une publicité.Les internautes sont habitués à rechercher les zones qui leurs sont utiles (les menusaccédant aux pages de votre site) sur le côté gauche et en haut. Si vous placez lesmenus n'importe où, le visiteur risque de se sentir perdu (et il n'aime vraiment pasça !).

 : selon leur âge, les visiteurs s'adaptent et naviguent plus ou moinsL'âgerapidement sur un site. Pensez donc à votre cible lorsque vous envisagez certainséléments de votre site (est-ce qu'un texte défilant est trop rapide,

page 13

    

par exemple.)

: selon le navigateurL'équipement (Chrome, Firefox, Internet Explorer,Opera, Safari...) et le systèmed'exploitation (Linux, Mac, Windows)utilisé par l'internaute, le rendu d'unmême site peut être différent. Ilimporte de vérifier le bon rendu dansla plupart des cas. Vous pouvezégalement utiliser vos statistiques devisite pour connaître les systèmesd'exploitation, les navigateurs et lesdéfinitions d'écran les plus utilisées survotre site.

Aérez vos textes, simplifiez le design,cela concourt à renforcer votrecrédibilité et facilite la navigation.

En matière de navigabilité, la règle des« 3 clics » est toujours intéressante.Elle permet aux visiteurs d'accéder àn'importe quel contenu du site en 3clics maximum. Attention toutefois àce que l'application de cette règle ne sefasse pas au détriment de la clarté devotre site. Le visiteur doit comprendrefacilement où chercher l'informationdont il a besoin.

“Le visiteur doit comprendre facilement oùchercher l'information dont il a besoin.”

Le niveau : tous les internautes n'ontévidemment pas les mêmesconnaissances en informatique. Il vousfaudra alors penser l'ergonomie du sitepour les moins expérimentés.

Enfin pensez à la clarté et à la lisibilitéde votre site : le contraste entre le fondet la couleur du texte est-il suffisant ?Le site est-il trop chargé d'éléments quiempêchent la bonne compréhension dupropos ? En général, ne cherchez pas àépater la galerie avec une surenchèregraphique. L'effet produit seraitl'inverse. 

Faites un test : dans les sites web quevous connaissez dressez la liste deceux dans lequels vous avez du mal ànaviguer et à vous repérer.Puis notez les raisons pour lesquellesvous éprouvez ces difficultés.Vous aurez ainsi  sûrement identifiéquelques poinst à éviter sur votrepropre site !

page 14

    

La DRAC Bourgogne s'est dotée il y aquelques mois d'un nouveau site.Pourquoi ce choix ?

Quand je suis arrivée en 2007, le sitede la DRAC était un simple site enhtml, avec des frames, et pas ou peumis à jour. Si les sites du ministère dela culture et de la communicationétaient innovants en... 2000, ce n'étaitplus le cas. Devant l'urgence, nousavons commencé à faire une versionsimplifiée en html, respectant la charte,mais le résultat ne nous convenait pas.Cette étape a eu l'avantage de nousfaire préparer le contenu et étudierl'arborescence nécessaire pour mettreen avant les missions de la DRAC.Entre temps, j'ai approfondi mesconnaissances en web 2,0, notammentpar le biais du réseau barcamp, et j'aicommencé à pratiquer les cms

comme wordpress et dotclear, puis onm'a parlé d'autres solutions. Nousavons découvert, sur les conseilsd'Open21, les avantages de diversCMS, pour finir par porter notre choixsur Joomla. Open21 nous a ensuiteaidés à parfaire l'arborescence, enprofitant des moindres avantages del'outil. Nous avons conçu le siteensemble, dans un esprit d'écoute etd'équipe, et une grande fluidité.

Nous avions la possibilité de nousdémarquer du site national duministère de la culture, mais c'est unchantier sur le long terme. On nousencourage également à utiliser lesréseaux sociaux pour nos actions, maiscela avance tout doucement.

Quelles sont les aspects que la DRACBourgogne a souhaité mettre en avantsur ce site ?

Notre mission étant le service public, ilfallait mettre à la disposition desstructures culturelles comme du grandpublic toutes les informationsnécessaires sur le rôle de l'Etat dans ledomaine de la culture en Bourgogne.Par exemple : les démarches pourobtenir la licence d'entrepreneur despectacles, se faire subventionner,obtenir un label, ou encore participeraux manifestations comme lesJournées du Patrimoine et autres Nuitsdes Musées, semaine de la languefrançaise, etc. Nous mettons égalementdes chiffres en ligne, 

page 16

   

DRAC Bourgogneun site à l'avant-garde

“A ce jour le site de la DRAC Bourgogne estle plus innovant et le plus ergonomique.”

valorisons des actions réalisées par despartenaires ou structuressubventionnées, expliquons les arcanesdu classement et de l'inscription desmonuments historiques, l'archéologiepréventive.... Nous voulions aussivaloriser les missions des agents de laDRAC en expliquant leur métiers etsurtout, valorisant leurs actions, par lebiais d'informations et d'articles mis enavant sur la page d'accueil du site.Open21 nous a conseillé, en fonctionde nos desideratas de contenu, sur lesdifférentes possibilités offertes parJoomla, et nous en découvrons chaquejour de nouvelles. Nous apprécionsnotamment la possibilité de réaliserdes formulaires, ce qui a été précieuxpour l'organisation des Journées duPatrimoine.Le grand avantage du site est depouvoir structurer facilement le

contenu, de l'archiver, mettre desdocuments en téléchargement... un vraibonheur !

Quel a été l'accueil réservé au site lorsde son lancement ?

Nous avons été un peu discret au débutde l'année car nous voulions en testerl'usage. Le contenu a été mis à jour aufur et à mesure (c'est toujours le pluslong : les validations !.). Maintenant, lepublic et nos partenaires culturelsconnaissent son existence. Notreobjectif est continuer à l'optimiser auniveau du contenu et du référencement,et d'augmenter les échanges de liensavec nos partenaires. A ce jour le sitede la DRAC Bourgogne est le plusinnovant et ergonomique des 22DRAC. bourgogne.culture.gouv.fr

photo : Maryelys Lorthios

page 17

   

ZOOM SUR...La Charte eTIC

La Charte eTIC est née d'abord en Belgique avant d'arriver jusqu'enFrance. Il s'agit d'une charte qui engage les professionnels dunumérique envers leurs clients. En effet, trop souvent il arrive quedes entreprises soient insuffisamment informées par leur agenceweb ou leur SSII des coûts réels engagées, des caractéristiquesprécises des contrats. D'autres se retrouvent liées à un fournisseurou une solution, ou encore prisonniers de contrats de très longue

durée.

Face à ce phénomène, des professionnels se sont regroupés pour élaborer desprincipes de bon sens qui valorisent les relations commerciales entre lesagences web et leurs clients. C'est pour les entreprises un gage de confianceface aux professionnels signataires de la charte.

“La charte valorise les relations entre lesagences web et leurs clients.”Déclinée aujourd'hui en Bourgogne, cette Charte eTIC  a déjà été signée parplusieurs professionnels des TIC et agences web. Depuis le 15 janvier 2010,l'Agence NTIC Bourgogne a en effet donné l'impusion à cette charte sur toutela région. Mais la Bourgogne n'est pas la seule à agir dans cette direction,puisque d'autres ont également engagé la même démarche, comme à Lille ouValencienne, par exemple.

Les 6 points sur lequels la Charte eTIC engage ses signataires :- adéquation du service par rapport au client- ampleur du projet- maîtrise des coûts et des délais- responsabilités- ressources disponibles- pérennité ou portabilité de la solution ou du service

page 18

 

Sur le site www.labeletic.fr, vouspouvez consulter la liste dessignataires, lire le texte intégral de lacharte et vous informer de l'actualité etdes développements de la charte.

Ci-contre le logo officiel que lesprestataires signataires doivent signalersur leurs documents de communicationafin d'en informer leur clientèle.

page 19