La 2cv dans tous ses états - IESA > Network · 2cv DinGo L'histoire mythique de la 2cv-". Le titre...

Didier MAHON

La 2cv dans tous ses états

2cv Dingo - La 2cv dans tous ses états Didier MAHON

1

DÉFINITION

PRÉSENTATION

Le Pitch

2cv DinGo est un site web entièrement dédié à la 2CV, voiture commercialisée par Citroën en 1948 et toujours présente sur nos routes 65 ans plus tard. Il permet à ses visiteurs de comprendre pourquoi la “Deudeuche” est devenue mythique en présentant notamment les côtés populaires et déjantés qui lui ont été donnés durant toutes ces années et qui ont contribué à son exceptionnelle longévité. Le site offre aussi quelques services pratiques dédiés aux possesseurs de 2cv, les “deuchistes”. Motivations et bénéfices attendus

par le visiteur • Se renseigner sur l’histoire de la Citroën 2CV • Trouver des photos de 2CV • Trouver des renseignements pratiques relatifs à l’utilisation de la 2CV • Passer un bon moment

par l'éditeur • Partager de l’information sur la 2CV • Faire comprendre pourquoi la 2CV est un véhicule mythique • Devenir une référence du monde “deuchiste” sur le web • Gagner de l’argent grâce à des partenariats et à la publicité

Evolutions éventuelles

o Devenir un véritable portail 2CV sans perdre son identité de site “fun”. o Ouverture d’une boutique en ligne de goodies. o Création d'une véritable communauté avec l'ouverture d'un forum.


2

PERSONA N°1

Jean-Louis PATREAU - 48 ans Marié depuis 25 ans 2 enfants adultes Niveau technologique Matériel PC : ●●●○○ PC Bureau DELL Web : ●●○○○ Ecran 4/3 19" Windows Vista Internet Explorer 9 Traits de caractère Curieux, Bon vivant

Relation à la 2cv Découverte

Ses objectifs Comprendre pourquoi la 2CV est un véhicule mythique. Contexte

Sous l’impulsion d’un de ses amis, Jean-Louis est allé à un rassemblement de 2CV près de chez lui ce week-end. Ayant particulièrement apprécié ce dimanche après-midi et l’ambiance du monde de la 2 Chevaux, il y a redécouvert un véhicule qu’il connaissait comme tout un chacun mais sur lequel il ne s’était jamais véritablement attardé. Ce lundi matin, il est au bureau et n’a pas très envie de travailler, il repense à son week-end et, de nature curieuse, il recherche un site qui pourrait lui en dire plus sur ce qu’il a vu la veille. Il souhaite aussi aller plus loin en cherchant tout ce que les « deuchistes » ont pu faire avec leurs engins.

Scénario

En tapant " historique 2cv" dans son moteur de recherche, il trouve sur la première page de résultats la page nommée "2cv DinGo - L'histoire mythique de la 2cv". Le titre semble correspondre à ce qu'il recherche. Il clique et découvre un texte agrémenté de photos d'époque qu'il lira rapidement avant de visionner les photos des Séries Spéciales de 2cv puis de s'intéresser à la section "Cinema" du site web. Après quelques minutes, il décide de se remettre au travail mais avant de fermer son navigateur, il fait une petite visite sur la page Facebook de 2cv Dingo puis il clique sur « J’aime ». Il continuera sa visite le soir même et en parlera à sa femme lors du dîner.

“ Qu’est-ce qui rend la 2CV aussi mythique ? ”


3

PERSONA N°2

Christelle DENIS Séverine LESINSKI 34ans 32ans En couple depuis 7 ans Célibataire 2 enfants 1 enfant Professeur des écoles Hôtesse d'accueil Niveau technologique Matériel : iPad 2 Christelle Séverine PC : ●●●●○ PC : ●●○○○ Web : ●●●●○ Web : ●○○○○ Particularité Aiment se retrouver pour délirer et faire la fête.

Relation à la 2cv Aucune Leurs objectifs Principal : Voir la "Nouvelle 2cv" Secondaire : Passer un bon moment Contexte

Lors d'une soirée entre filles Christelle et Séverine, toutes deux dégagées pour l'occasion de leur rôle de mères de famille, discutent de la voiture que va bientôt s'acheter Séverine. Pour le moment elle hésite entre la Nouvelle Mini et la Nouvelle Fiat 500. Le sujet dévie peu à peu vers les voitures "Revival" : New Beetle, DS... c'est à ce moment-là que Christelle se souvient avoir lu dans le train qu'une nouvelle 2cv était en projet chez Citroën. Elle sort alors l'iPad qu'elle vient d'acheter afin de vérifier son information et montrer à son amie à quoi pourrait ressembler une nouvelle 2cv .

Scénario

En tapant "photos nouvelle 2cv" dans son moteur de recherche préféré, elle tombe sur la page du site 2cv DinGo traitant de la Cactus, futur véhicule de la gamme Citroën conçu dans le même esprit que celui qui avait donné naissance à la 2cv dans les années 30. Alors que les deux amies découvrent le look de la Cactus qui ne sortira qu'en 2014, elles sont attirées par la photo d'une 2cv très spéciale et cliquent dessus. Elles découvrent alors une série de photos de 2cv plus loufoques les unes que les autres et passent 20 minutes à rigoler ensemble en découvrant les pages du site. La visite continue jusqu'à ce qu'une publicité pour la Nouvelle Mini apparaisse. Elles quittent le site ravies de ce petit moment sympathique en cliquant sur un lien publicitaire qui permettra à Séverine, nulle en informatique, de réserver son essai pour la Nouvelle Mini avec l'aide de Christelle.

“ Trop fort la Deudeuche ! ”


4

PERSONA N°3

24Alexis BLANDIN - 24 ans Célibataire Sans enfant Technicien Support Informatique Niveau technologique Matériel PC : ●●●●● Samsung Galaxy Note II Web : ●●●●○ Traits de caractère Passionné, aventurier, aime la high-tech

Relation à la 2cv Deuchiste depuis peu. Son objectif Trouver au plus vite un garage spécialiste 2cv avant de tomber en panne pour de bon. Contexte

Heureux possesseur d'une 2cv Charleston de 1986 depuis 3 mois, Alexis qui habite la Région Parisienne a décidé d'aller en Alsace afin de montrer sa nouvelle acquisition à sa grand-mère. Après un peu plus de 300 km, sa 2cv commence à avoir des ratés. Il est certain que sa belle deuche n'ira pas au bout du voyage s'il ne trouve pas rapidement un garage.

Scénario

Il recherche "garage 2cv" sur son smartphone. Google lui fournit alors plusieurs résultats dont un qui lui semble convenir : "2cv DinGo - Localiser le garage 2cv le plus proche" qui se trouve sur la première page de résultats. Il se rend sur la page, autorise la géolocalisation de sa position et trouve en quelques instants le garage SOS 2CV de Jarville-la-Malgrange (54) qui se trouve à 40 km de sa position. Il utilise alors l'application de navigation de son Samsung Galaxy Note pour s'y rendre directement en espérant que la panne puisse être réparée très rapidement.

“ Vite, faut que je trouve un garage ! ”


5

BENCHMARK N°1 : http://citroen2cv.fr

Titre ●●●●○ On peut difficilement faire mieux pour un site relatif à la 2cv Citroën, mais on le verra plus loin, cette page n’est pas dédiée qu’à la 2cv. SEO ●●●○○ Google PageRank : 2 « 2cv » sur Google : 1ère page / 9e position

Ergonomie ●○○○○

Positif • Le menu principal (à gauche) est relativement contrasté sur le

retro-zoning ci-contre • Les « pseudo call-to-action » au centre de la page ressortent un

petit peu au retro-zoning.

Négatif • Site non responsive • Cette page d’accueil est en fait un pré-accueil qui n’est pas exclusivement dédié à la 2cv. Le nom de domaine

est pourtant très explicite. Il faut un nouveau clic pour entrer sur la page d’accueil réellement dédiée à la 2cv (http://citroen2cv.fr/2cv_citroen/acceuil_2cv.html), ce qui du point de vue de l’architecture informationnelle est absolument incompréhensible.

• Ce sont les images décoratives de droite qui ressortent le mieux au retro-zoning. Noter qu’elles sont cachées sur les écrans de largeurs égales ou inférieures à 1024px. Le site étant en largeur fixe.

• Le menu principal rappelle une bannière publicitaire. • Aucun effet de hover n’est présent sur le menu principal, seule la transformation du curseur indique que les

photos de véhicules sont des liens. Pire, l’image de la 2cv qui pourrait nous emmener ver la page d’accueil dédiée n’est même pas cliquable.

Accessibilité ○○○○○ Rien n’a été fait sur ce site pour le rendre accessible. Le code source est d’ailleurs calamiteux : pas de DocType ; balises H1, H2, H3 définies en CSS dans le HTML mais utilisées nulle part ; beaucoup de balises <img> ne sont pas pourvues de l’attribut « alt » ; rôles ARIA inexistants. Conclusion : Cette page est la homepage d’un site de 2cv qui n’est pas exclusivement dédiée à la 2cv. Une arborescence qui est donc dès le début mal pensée avec un titre et une URL ambigües. Le visiteur peut facilement s’y perdre. Un zoning qui n’a vraisemblablement pas été travaillé, un menu principal qui ressemble plus à une bannière qu’à un menu et enfin du code HTML sans queue ni tête. Par ailleurs, la ligne n°15 du code source indique que le codage a été réalisé par NamoWebEditor 6, logiciel datant de 2005 et donc obsolète alors que la dernière mise à jour du site date de décembre 2012. 15. <meta name='generator' content="NamoWebEditor v6.0"> Probablement créé avant l’apparition des smartphones et des tablettes, ce site n’est absolument pas responsive. Cela indique que l’auteur, loin d’être un professionnel de la création web est probablement un passionné de ces véhicules n’ayant que peu de connaissances en HTML et CSS.

http://citroen2cv.fr/

http://citroen2cv.fr/2cv_citroen/acceuil_2cv.html


6

BENCHMARK N°2 : http://www.la2cvmania.be

Titre ●●●○○ C’est un titre assez passe-partout, il permet d’indiquer clairement au visiteur qu’ils vont sur un site relatif à la 2cv. Personnellement, j’aurais retiré le « la » mais peut-être y a-t-il eu une indisponibilité de nom de domaine lors de sa création en 2003. SEO ●●○○○ Google PageRank : 3 « 2cv » sur Google : 2epage / 7e position

Ergonomie ●○○○○

Positif • Le menu principal est relativement contrasté sur le négatif ci-contre. Sur le

positif, les call-to-action de ce menu sont bien marqués, avec des couleurs qui ressortent par rapport à l’apparente monotonie globale de la page. Remarquez le pictogramme en forme de flèche en guise de puce.

• Les titres du menu sont clairs, le visiteur s’attend déjà à ce qu’il va pouvoir trouver en cliquant sur l’un d’entre eux.

Négatif • Site non responsive, optimisé pour un affichage d’une largeur de 1024px. • C’est le logo du site ainsi que le texte de bienvenue qui ressortent le plus au retro-zoning, ce qui est un non-

sens puisque ce n’est sans doute pas pour ces deux éléments que le visiteur est arrivé sur cette page. • Le texte de bienvenue est énorme comparé au sous-titre ridiculement petit informant pourtant de l’objet

même du site. • Aucun effet de hover sur les boutons du menu.

Accessibilité ○○○○○ Rien n’a semble-t-il été fait sur ce site pour le rendre accessible. Mis à part le footer, le site est en Flash alors qu’il ne comporte aucune animation… Incompréhensible, d’autant qu’en utilisant la WayBackMachine d’Internet Archive, on s’aperçoit que la refonte du site date de février 2010, alors que tous les navigateurs de l’époque étaient largement capables d’afficher la même chose en XHTML et CSS. Design ●●○○○ Il est sobre et relativement moderne avec son aspect flat. On a l’impression d’une volonté d’aller à contre-courant de l’ensemble de la communauté 2cv du web qui s’est toujours inspirée de l’image arrondie et pimpante de la 2cv pour la construction de ses sites. Le logo est d’ailleurs dans la même lignée puisque la 2cv est tournée vers la gauche, soit à contre-sens de la marche en avant. D’un point de vue plus personnel, je trouve ce design trop sobre, trop sombre et presque trop flat pour un site de 2cv. À vouloir se démarquer, l’auteur a perdu de vue ce qui fait aujourd’hui l’identité de la 2cv : une voiturette rigolote et rondouillarde. Le design d’un site web devant toujours véhiculer une certaine idée que l’on peut se faire de son sujet, c’est selon moi une importante erreur. Conclusion : Une page d’accueil dont la mise en page parait plutôt efficace pour l’unique fonction que semble avoir voulu lui donner son créateur : diriger le visiteur sur les différentes rubriques. Mais cela aurait été bien plus parlant en y incluant quelques contenus ainsi qu’un minimum d’effets tels que des « hover » sur les liens.

http://www.la2cvmania.be/

http://archive.org/web/


7

BENCHMARK N°3 : http://2cv-legende.com

Titre ●●●●○ C’est un titre court et qui donne une idée des contenus du site. Le visiteur ne sera d’ailleurs pas déçu car les contenus relatifs à l’histoire de la 2cv sont bien là. SEO ●●●○○ Google PageRank : 4 « 2cv » sur Google : 6e page / 8e position Page du même site :http://2cv-legende.com/histoire-de-la-2cv Google PageRank : 3 « histoire 2cv » sur Google : 1ère page / 3e position

La stratégie SEO semble mettre l’accent sur les pages internes du site et sur des mots clés pluriels. Ergonomie ●●●○○

Positif • L’élément qui saute aux yeux par sa position et son contraste est

l’encart d’organisation d’évènement. • Les icônes Facebook et Twitter sont elles aussi bien contrastées au

retro-zoning, elles changent de couleur lors du survol de la souris. • L’encart dédié à la boutique est lui aussi bien contrasté et l’effet du

diaporama capte bien l’attention. • Le menu principal déroulant est clair même si chaque rubrique

comporte peut-être trop de sous-rubriques. • Les zones cliquables du menu sont larges et un utilisateur de tablette n’aura aucun mal à l’utiliser. • Des effets de hover sont présents sur tous les liens textes, ceux-ci sont même différenciés par leur couleur

dans le texte de contenu à défaut du soulignement qui aurait nuit à la lisibilité du texte tant les liens sont nombreux.

Négatif • Site non responsive, optimisé pour un affichage d’une largeur de 1024px. • Le logo du site ressort trop au retro-zoning • Le texte de bienvenue est trop gros et est répété. Pour quoi faire ? • Aucun effet de hover sur l’encart d’organisation d’évènement, ni de call-to-action. • Le texte trop petit est difficilement lisible notamment à cause de la police Georgia à empattement. • Les liens du texte sont difficiles à cibler sur un périphérique tactile. • Aucun véritable call-to-action sous forme de bouton même sur l’encart « Boutique ».

Accessibilité ●○○○○ Les Balises H1, H2 et H3 sont définies en CSS et utilisées dans le code XHTML 1.0 Strict de façon correcte. Ce dernier est pourtant loin d’être parfait avec 28 erreurs au validateur W3C.Les tailles de polices sont toutes définies en px, ce qui est fortement déconseillé pour l’accessibilité. La grande majorité des balises <img> ne possèdent pas l’attribut « alt » ou celui-ci est vide. Enfin, les rôles ARIA sont inexistants. Conclusion : Une page WordPress très moyenne sur laquelle vraisemblablement aucun effort n’a été consenti pour l’accessibilité aux personnes non-voyantes ou malvoyantes. Une ergonomie plutôt satisfaisante pour les utilisateurs de desktops mais qui reste largement perfectible. Les utilisateurs de tablettes eux, devront se résigner à n’utiliser que le menu pour naviguer dans le site. Quant aux utilisateurs de smartphones, à moins d’être très motivés, ils peuvent passer leur chemin, le site n’étant absolument pas adapté à la lecture sur petits écrans.

http://2cv-legende.com/

http://2cv-legende.com/histoire-de-la-2cv


8

BENCHMARK : LES CONCLUSIONS Souvent imaginés, conçus et développés par des passionnés de 2cv sans réelles compétences en intégration ou en webdesign, les sites concurrents ne sont généralement pas de grande qualité aux niveaux du référencement naturel et de l’ergonomie. Par ailleurs, l’architecture de l’information laisse souvent à désirer, ce qui pose problème car les contenus sont généralement assez nombreux et dans beaucoup de cas, le visiteur s’y perd assez rapidement. De plus, il ne semble pour l’instant exister aucun site sur le sujet qui soit responsive. Pour finir, au vu de cette étude concurrentielle, il devrait être relativement aisé, en proposant un site de qualité, de prendre rapidement quelques parts de marché et de devenir à plus ou moins long terme l’une des références francophones sur le sujet de la 2cv. Cela ne pourra se faire qu’à plusieurs conditions :

• Un site web ergonomique, accessible et valide W3C.

• Des contenus originaux, variés et nombreux.

• Un effort constant sur la SEO par l’optimisation de la sémantique éditoriale et une véritable stratégie de backlinking au sein de la communauté « deuchiste » et même au-delà.

• Faire évoluer le site au cours du temps par l’ajout régulier de contenus de qualité et élargir progressivement

son périmètre de thématiques autour de la 2cv sans pour autant perdre son identité de site « fun ».

• Proposer des services originaux et pratiques, notamment pour les utilisateurs nomades.

“ Y a plus qu’à ! ”


9

CONCEPTION

ARCHITECTURE DE L'INFORMATION Tri par carte

Architecture du site


10

6-TO-1 MOBILE


11

WIREFRAMES

Zoning 320 Zoning 768 Zoning 960


12

BRIEFING CREATIF – MOODBOARD


13

PAGE D’ACCUEIL – MAQUETTE MOBILE (320)


14

PAGE D’ACCUEIL – MAQUETTE TABLETTE (768)


15

PAGE D’ACCUEIL – MAQUETTE PC (960)


16

RÉALISATION

TECHNOLOGIES UTILISEES HTML/CSS Le site 2cv DinGO est développé en HTML5 avec des feuilles de style CSS3 conformément au cahier des charges. Toutes les pages ont passé avec succès le validateur HTML5 du W3C. APIs La page d’accueil est en lien avec les pages Facebook et Google+ de 2cv DinGO via les badges de leurs APIs respectives. La page histoire.html inclut une vidéo incorporée sous forme d’une iFrame grâce la fonction « Insérer » de YouTube. JQUERY & Plugins La version de Jquery utilisée est la version 1.10.2 minifiée et récupérée en local sur le serveur web du site. La page d’accueil comporte un diaporama avec vignettes. Celui-ci est réalisé à l’aide du plugin JQuery bxSlider. La feuille de style fournie avec le composant n’a pas été utilisée. C’est une feuille de style entièrement personnalisée qui met en forme le diaporama qui a pour avantage de permettre l’utilisation de listes d’images et donc d’optimiser la sémantique du site. Ce diaporama a cependant un inconvénient, celui de ne pas implémenter une fonction de slide au doigt qui pourrait être utile aux utilisateurs de tablettes et de smartphones. Cette même page d’accueil inclut un second plugin, Breakpoint, permettant un choix entre 2 images en fonction de la taille de la fenêtre. Le code Jquery de celui-ci a été légèrement modifié afin de corriger un bug lié à la largeur supplémentaire de la barre de scrolling. Ce qui avait pour effet de décaler légèrement les points de rupture lorsque celle-ci s’affichait. Les pages histoire.html et tuning.html utilisent toutes deux le plugin JQuery Magnific Popup, permettant d’afficher une galerie photos, là aussi réalisable via une liste de vignettes cliquables. Les images originales s’affichent alors sous forme d’une LightBox offrant la possibilité de naviguer entre les images. Seul inconvénient le slide au doigt n’est là non-plus pas implémenté. Enfin, la page histoire.html comporte en plus le plugin FitVids.js permettant la responsivité des vidéos provenant de plateformes telles que YouTube.


17

PAGE D’ACCUEIL – SCREENSHOT MOBILE (320)


18

PAGE D’ACCUEIL – SCREENSHOT TABLETTE (768)


19

PAGE D’ACCUEIL – SCREENSHOT PC (960)


20

PLANNING PREVISIONNEL Réalisé à l’aide du logiciel en ligne Gantter

Ce planning prévisionnel prévoit un total d’environ 114 heures de travail. Ce qui correspond à un coût total de 5700 € net pour une main d’oeuvre moyenne à 50€/heure.

FIN

La 2cv dans tous ses états - IESA > Network · 2cv DinGo L'histoire mythique de la 2cv-". Le titre...

Documents

Transcript of La 2cv dans tous ses états - IESA > Network · 2cv DinGo L'histoire mythique de la 2cv-". Le titre...