Pascal, notre webdesigner en chef, a utilisé l’affiche du festival réalisée par le célèbre Michel Bouvet, pour créer un design sobre et cohérent avec tous les autres supports de communication papier du festival (affiches, programme, dossier de presse etc.). Au niveau technique, nous avons capitalisé le travail réalisé l’an dernier en apportant quelques modifications (formulaire d’inscription à la newsletter du festival, catégories du blog etc.) afin de se concentrer sur le design et de proposer un outil simple et complet qui convient à la cible toujours plus large du festival (de 7 à 77 ans ). Fort de notre savoir-faire qui touche à tous les domaines de la communication sur le web, nous mettons aussi en œuvre d’autres opérations pour assurer une présence efficace du Festival de Saint-Riquier sur la toile. Ainsi en complément de la création de site web, nous  effectuons :

• Une prestation de webmastering (ajout et modification d’éléments à la demande).
• La gestion des contenus du site (articles hebdomadaires sur le blog, puis 2 articles par jour pendant toute la durée du festival).
• Un travail de référencement et de positionnement complet.
• La présence test du festival de Saint-Riquier sur Facebook avec la création de la page du festival de Saint-Riquier.

Awelty édite aussi le site AgendaCulturel.fr, que vous connaissez bien si vous recherchez des évènements culturels près de chez vous (concert, théâtre, festival, art du spectacle etc.), ou si en tant qu’artiste ou organisateur, vous souhaitez annoncer des spectacles sur le web gratuitement et efficacement. Dans le cadre d’un partenariat de longue date avec le festival, c’est tous les portails de la Somme, de la Seine-Maritime et du Pas de Calais qui se mettront aux couleurs du festival de musique classique de Saint-Riquier. L’équipe d’Agenda Culturel a aussi réalisé des interviews audio du directeur du festival et des artistes associés à la programmation des journées Frédéric Chopin que vous retrouverez prochainement sous forme de podcasts sur le site de Saint-Riquier et sur la fiche du festival sur Agenda Culturel.

Alors si vous souhaitez (re)découvrir un festival de musique classique ouvert à tous les publics avec une programmation éclectique, rendez-vous sur : http://www.festival-de-saint-riquier.fr/

Le site intègre toutes les informations nécessaires pour que les internautes puissent (re)découvrir le festival et prévoir leurs sorties culturelles en famille: programmation, infos pratiques, mise en avant des partenaires, galeries photos….

AgendaCulturel.fr est toujours partenaire du festival et mettra en place différentes opérations de communication pour promouvoir cet évènement que ce soit la rédaction d’un article sur Le Mag’, un webzine dédié à l’actualité culturelle, l’envoi de mailing aux abonnés de la région ou encore la mise en avant du festival sur les réseaux sociaux d’Agenda Culturel. Nul doute que cette 4ème édition de Marionnettes en Chemins rencontrera encore un franc succès !

Jolie Rue est donc un site de référencement de loisirs créatifs. On y retrouve les articles de loisirs créatifs classés par catégories (et sous-catégories) ainsi que les ateliers classés par catégories et par villes et départements. Ces articles et ateliers sont ajoutés par les exposants, c’est-à-dire par les professionnels inscrits sur le site. Les fiches articles et ateliers présentent, en plus d’un visuel, une description, les tarifs, le commentaire de Jolie Rue, des suggestions ainsi que le lien vers l’article ou l’atelier sur le site de l’exposant. Nous avons également procédé à l’installation d’un blog (avec la plateforme WordPress) et Pascal a ensuite personnalisé graphiquement ce blog pour rester cohérent avec le site de Jolie Rue.

Je vais maintenant essayer de parler un peu du design du site, tout en sachant que cela reste une analyse de développeur… Donc, le site est très coloré et on retrouve des couleurs en rapport avec les loisirs créatifs. Le violet « aubergine » de la page est une couleur à la mode (à ce qu’on m’a dit). Toutes les couleurs du site changent selon la catégorie dans laquelle on se trouve, violet pour l’accueil et les pages générales, rose pour les boutiques et les articles, bleu pour les ateliers et vert anis pour le blog. Le tout est fait à base d’aplats de couleur, histoire de bien mettre en avant les visuels des articles et des ateliers. Pascal a donc fait tout un travail sur les nuances des couleurs du site.

Les différentes couleurs utilisées sur Jolie Rue

Pour parler également de développement, je peux notamment citer l’espace exposant, où chaque exposant peut ajouter et gérer ses articles et ateliers, voir les statistiques détaillées pour chaque élément qu’il a ajouté sur le site, télécharger ses factures au format PDF (générées en PHP), ajouter simplement ses vidéos Youtube ou Dailymotion sur les ateliers… Nous avons également travaillé sur la gestion du site, où l’administratrice a tous les pouvoirs pour gérer le site (pèle-mêle : gestion des exposants, gestion des articles/ateliers, gestion du livre d’or, gestion des factures, gestion du support par ticket…).

Avec la mise en ligne effectuée aujourd’hui, nous souhaitons donc le meilleur au site Jolie Rue !

Les tests utilisateurs permettent à l’équipe qui gère le développement d’un site internet d’avoir des retours réels et objectifs sur « l’utilisabilité » de son projet. On peut définir l’utilisabilité comme la capacité d’une personne lambda à trouver simplement l’information qu’elle recherche en identifiant et en utilisant les fonctionnalités du site prévues à cet effet.

Les retours utilisateurs sont très intéressants car ils permettent de confronter le plan d’utilisation « normal » (prévu par les concepteurs) avec l’utilisation réelle par des utilisateurs aux profils différents. Et croyez moi les surprises sont nombreuses !

Vous avez beau imaginer que tel lien est bien visible ou que l’intitulé de tel bouton est clair… la mise en place de tests utilisateurs permet de rectifier certaines erreurs de jugement et d’être sûr que les fonctionnalités que vous proposez soient comprises et utilisées.

Comment réaliser des tests utilisateurs ?

A moins d’avoir beaucoup de temps et d’argent à dépenser, il est inutile de prévoir de tester l’ensemble d’un site et d’utiliser toute la batterie de moyens proposés par certaines entreprises (miroirs sans tains, système d’eye tracking, recrutement de dizaines de testeurs…).

Il est  primordial de cerner les points à tester (fonctionnalités clés, zones ou vous avez identifié des risques de confusions…) et de réaliser des scénarios assez courts qui permettent de mettre l’utilisateur en situation. Pour ne pas abuser de la patience des testeurs ne prévoyez pas des tests qui dureront plus d’une heure.

Exemple pour AgendaCulturel.fr : Nous avons réalisé une quinzaine de petits scénarios à difficultés variables. Selon la rapidité des testeurs et leur aisance nous pouvions réaliser tous les scénarios ou n’en utiliser que la moitié mais en testant précisément certains éléments.

La seule règle à respecter est de commencer par un scénario facile, afin de mettre l’utilisateur en confiance, puis d’augmenter progressivement la complexité avant de finir sur un autre scénario facile, le test se termine ainsi sur une bonne note !

Enfin il est important de vous entrainer et de faire tester les scénarios que vous avez établis afin d’éviter les surprises les jours de tests. En effectuant les tests avec un membre de l’équipe qui ne travaille pas directement sur le projet, vous vérifiez que vos scénarios sont clairs et vous testez votre protocole (mise en confiance du testeur, système de prise de notes, attitude,  etc…).

Pour Agenda Culturel, un modérateur interagissait avec le testeur tandis qu’un observateur notait les différents éléments. Cela permet d’être sûr de ne rien manquer et évite que le testeur  soit stressé par la personne qui épie le moindre de ses clics.

Nombre idéal de participants ?

De nombreux spécialistes de l’ergonomie se basent sur une étude de Nielsen & Landauer pour affirmer que 5 testeurs permettent déjà de repérer 85 % des problèmes d’utilisabilité. A partir de 15 testeurs ce taux approche les 100%, c’est a dire que vous arrivez au niveau de saturation. Si vous conduisez d’autres tests, vous avez peu de chance de déceler de nouveaux éléments. Si vous lisez l’anglais je vous conseille ce résumé des recherches de Nielsen.

D’autres recherches vont à l’encontre de ces résultats, mais cela dépend surtout de l’homogénéité de votre cible et du degré de liberté laissé au participant. Si vos scénarios évoluent beaucoup en fonction des testeurs et que vous limitez peu leurs actions, il vous faudra plus d’utilisateurs pour pouvoir comparer les résultats obtenus.

Il faut savoir que pour maximiser les retours, de nombreux spécialistes préfèrent la méthode Itérative à la procédure linéaire. Au lieu de réaliser un test avec 15 utilisateurs en même temps, ils conseillent de diviser les tests en plusieurs sessions. 5 utilisateurs testent d’abord le site et les problèmes repérés sont traités dans la foulée. 5 autres utilisateurs viendront tester la version corrigée du site et ainsi de suite. Cela permet de s’assurer que la solution apportée à un problème permet vraiment de le régler ou qu’elle ne vient pas en créer de nouveaux (spécialité des développeurs s’il en est une).

Pour réaliser les test utilisateurs d’AgendaCulturel.fr nous nous sommes basés sur le Livre d’Amelie Boucher : Ergonomie Web et sur quelques articles intéressant dont voici une liste non exhaustive :

Articles d’Eve Demaziere, un exemple concret sur GouBlog ou encore une recette en deux parties sur le site ergolab.

Après ce pavé peut être un peu rébarbatif, je vous promet un billet plus court et dédié principalement à la manière dont nous avons conduits ces tests pour Agenda Culturel avec quelques résultats.

À partir de l’affiche originale, traditionnellement conçue par Alain Bullot, il nous a été demandé de concevoir un site Internet offrant diverses fonctionnalités parmi lesquelles un blog des actualités du festival, un flux RSS et divers diaporamas présentant les photographies associées au programme. J’ai pour ma part été chargé de la conception du design du site et de l’intégration HTML/CSS dans le respect des standards du W3C tandis que mon collègue Arnaud à, quant à lui, développé toutes les parties dynamiques du site (blog, programme…) ainsi que l’espace d’administration permettant notamment aux organisateurs d’interagir avec le contenu du site et d’ajouter notamment de nouveaux billets sur le blog.

En ligne depuis le 16 mars, le site est visible à l’adresse suivante : http://www.festival-de-saint-riquier.fr/

J’ai souvent lu ou entendu que tous les 2 ou 3 ans un site devait être refondu. C’est une erreur ! Il n’y a absolument aucune règle en la matière puisque chaque site à des spécificités propres, des objectifs différents.

Par exemple, un site qui parle de mode devra sans doute plus régulièrement revoir sa charte graphique qu’un site de présentation d’une collectivité locale.

Les raisons de la refonte d’un site peuvent être très diverses :

- La charte graphique
Les couleurs utilisées lors de la création du site étaient très « mode » à l’époque, elles ne le sont plus. Un site reflète l’image de votre activité, de votre entreprise, vous ne pouvez pas passer pour un ringard.

- Faire évoluer votre site
Les attentes des internautes évoluent sans cesse, un site doit toujours proposer plus d’informations, plus de fonctionnalités. Votre site ne répond plus à leurs attentes, il faut donc le repenser. Sans cette refonte c’est un site concurrent qui prendra votre place dans les habitudes de surf des internautes.

- L’ergonomie
Comparé à des sites plus récents votre site n’est pas simple d’utilisation. Un internaute qui ne comprend pas directement comment fonctionne votre site, le quitte immédiatement. Vous devez rendre la navigation simple et agréable pour les internautes. Ce qui aura pour effet non seulement de conserver plus longtemps l’internaute sur le site et ainsi l’amener aux actions souhaitées (ventes, inscriptions, etc.), mais aussi de donner une image positive de votre activité, de votre société.

- Le référencement
Les moteurs de recherche comme Google sont en perpétuelle évolution et avec eux les techniques d’optimisation pour le référencement de sites (SEO). Un site créé il y a quelques années, ne peut plus répondre de façon optimale aux exigences des moteurs de recherche aujourd’hui.

- Les standards Web : W3C
Pour permettre à votre site d’être compatible avec l’ensemble des navigateurs internet « classiques » comme  Firefox, Chrome, Internet Explorer, Safari, mais aussi avec les navigateurs pour téléphones portables, ou encore les navigateurs dédiés aux malvoyants, etc., votre site doit respecter les standards du W3C (World Wide Web Consortium). De plus, le respect de ces standards permettra une meilleure lecture de votre site par les moteurs de recherche.

Comment imaginer cette refonte ?

Comme pour une création d’un site, une refonte nécessite l’élaboration d’un cahier des charges.
L’expérience acquise avec la version précédente doit être le gage de la réussite de la nouvelle version :- vous avez une meilleure connaissance des attentes des internautes.

- vos objectifs en matière de référencement sont clarifiés, vous connaissez mieux les mots clefs recherchés par les internautes.
- vous avez redéfini les objectifs de votre site, ainsi le site sera développé techniquement et graphiquement dans se sens.

La charte graphique sera refondue, elle sera le symbole de la nouvelle version, elle doit être réussie et ainsi refléter vos ambitions online.
La programmation utilisera les dernières technologies pour rendre votre site plus rapide (en optimisant par exemple les requêtes sur la base de données, sur les fichiers, etc.), plus simple d’utilisation  (notamment grâce à des technologies comme l’AJAX), et surtout plus complet dans ses fonctionnalités.

Enfin sachez, qu’avant une refonte totale de votre site, vous pouvez réfléchir à de simples évolutions (changer uniquement la charte graphique, ajouter de nouvelles rubriques, etc.), mais par expérience les technologies progressant tellement vite, la conclusion des réflexions techniques amène souvent à une refonte totale.

Pour finir, n’oubliez pas de profiter de la nouvelle version de votre site pour communiquer, en diffusant un communiqué de presse, en débutant une campagne pub en ligne, en distribuant des flyers, etc.

Il est possible en CSS de cacher celle-ci très facilement :

a:focus{
outline: none;
}

Grâce à cette simple déclaration dans votre feuille de style, cette bordure disgracieuse n’apparaîtra plus lors du clic sur tous les liens de votre page Web.

J’insiste néanmoins sur l’importance de cette bordure en terme d’accessibilité. En effet, celle-ci est bien utile pour toutes les personnes parcourant une page Internet à l’aide de la touche Tab de leur clavier car elle leur permet de savoir quel lien à l’attention (un appui sur la touche Entrée étant l’équivalent d’un clic de souris sur le lien).

Aussi, si vous souhaitez supprimer cette bordure sur les liens tout en ayant un contenu accessible, je vous conseille de définir la pseudo-classe : focus sur vos liens afin de toujours indiquer à l’internaute quel est celui qui reçoit le focus. On pourrait par exemple souhaiter en contrepartie de la disparition de la bordure, un simple changement de couleur, à définir selon le design de vos pages :

a:focus{
outline: none;
color: green;
}

Dernière précision : attention à placer cette déclaration dans votre feuille de style CSS après toutes celles concernant la mise en forme de vos liens. L’ordre suivant devrait toujours être respecté : a:link, a:visited, a:hover, a:active, a:focus