2016
Rapport Synthétique
AMELIORATION DE L'ERGONOMIE DE MINES-SAINT-ETIENNE.ORG
NICOLAS GIRARD
Nicolas Girard 1
Sommaire
I. Introduction ... 3
1. Présentation ... 3
2. Benchmarking ... 3
3. Questionnaire aux utilisateurs ... 8
II. Organisation... 11
1. Catégorisation ... 11
2. Structure hiérarchique ... 11
3. Classification ... 12
4. Organisation par sujet ... 12
5. Organisation par tâche ... 13
6. Organisation par public ... 13
7. Séparation de ces différentes organisations ... 14
III. Nommage ... 16
1. Pertinence ... 16
2. Présentation, style et syntaxe ... 16
3. Granularité ... 16
4. Public ... 16
IV. Navigation ... 18
1. Navigation globale ... 18
2. Navigation locale ... 18
3. Navigation contextuelle ... 19
4. Sitemap ... 19
5. Repérage ... 20
6. Flexibilité ... 21
V. Recherche ... 22
1. Contenu indexé ... 22
2. Champs de recherche pertinents ... 22
3. Liste d'options ... 22
4. Sélection de l'information à afficher ... 23
5. Nombre de résultats ... 23
6. Navigation ... 23
7. Ordre ... 24
8. Groupement ... 24
9. Autocomplétion ... 24
10. Le formulaire de recherche disponible sur la page des résultats ... 24
11. Autres techniques d’amélioration de la recherche ... 24
VI. Responsive web design ... 25
1. Police de caractère lisible ... 25
Nicolas Girard 2
2. Taille du contenu adapté ... 25
3. Dimensionnement des éléments tactiles ... 25
4. Configuration de la fenêtre d'affichage ... 26
VII. Récapitulatif des préconisations ... 27
VIII. Plan d’action ... 30
1. Première étape de changement rapide par Mines Saint-Etienne Alumni ... 30
2. Seconde étape avec Intermines ... 31
3. Troisième étape avec NetAnswer ... 31
IX. Annexes ... 32
Nicolas Girard 3
I. Introduction
1. Présentation
Mines Saint-Étienne Alumni possède un site wedb mines-saint-etienne.org qui présente l’association, permet de publier ses actualités, sa newsletter ainsi que l’annuaire des anciens de l’École. Actuellement le site web présente certains problèmes notamment au niveau de l’ergonomie et n’est pas très fréquenté. C’est dans ce cadre que l’association a fait appel à MEP afin d’étudier les éventuelles solutions pouvant être mises en place pour remédier à ces problèmes.
Les objectifs de cette étude sont alors : un benchmarking pour analyser le site et le comparer avec d’autres sites utilisant le même progiciel réalisé par NetAnwser, une étude quantitative auprès des Ingénieurs Civils des Mines et une proposition de solution pour améliorer le site web.
L'étude de l'amélioration de l'ergonomie de mines-saint-etienne.org est basée sur les méthodes présentées dans le livre « Information Architecture, For the Web and Beyond » par O'Reilly Media. Les auteurs sont des experts en architecture de l'information, qui permet d'avoir un site web ergonomique. Plusieurs critères d'évaluation universellement reconnus ont été dégagés de la lecture de ce livre et forment la base de l’analyse du site web et de la comparaison avec d'autres sites web. Le but de ce rapport est d'expliquer chaque critère et de voir comment mines-saint-etienne.org peut les remplir.
2. Benchmarking
L’étude de benchmarking a été effectuée pour analyser mines-saint-etienne.org. Le site internet est créé par un progiciel réalisé par NetAnswer. Une analyse d'autres sites internet créée par l’outil NetAnswer a été effectuée pour situer mines-saint-etienne.org par rapport à des sites similaires et dégager des améliorations réalisables avec l'outil NetAnswer.
Le site de l’école a aussi été intégré dans le benchmarking pour avoir une référence supplémentaire.
Ce benchmarking est une évaluation des sites internet selon un certain nombre de critères qui seront détaillés plus tard dans le corps du rapport. Ces critères se regroupent selon 5 axes : organisation, nommage, navigation, recherche et responsive web design.
L'organisation du contenu d'un site internet est la base de l'ergonomie. C'est en organisant correctement l'information en catégories que celle-ci pourra être trouvée facilement par les utilisateurs.
Le nommage est tout ce qui est en rapport avec les noms des catégories et du contenu. Le titre d'une page, le nom d'une section, un lien hypertexte etc. sont tous décidés par le nommage. Toutes les catégories et tous les contenus doivent être nommés.
La navigation ne se résume pas seulement à un menu principal. Il peut y avoir une navigation locale propre à certaines sections du site. Une page peut aussi contenir des éléments de navigation.
La recherche est un autre moyen de navigation. Elle est suffisamment complexe pour lui dédier un axe d’ergonomie à elle seule. Pour mines-saint-etienne.org, elle comprend la recherche globale du site ainsi que la recherche dans l’annuaire.
Responsive web design ou un site web adaptatif est un site qui est conçu pour être visionné sur tout type d’appareil, que ce soit un ordinateur, une tablette ou un smartphone. Il ne faut pas négliger les appareils plus petits, qui se font de plus en plus nombreux.
Chaque site a été noté de 0 à 2 sur chaque critère : 0 si le critère n’est pas du tout rempli, 1 si le critère est partiellement rempli et 2 si il est totalement rempli. Tout d’abord la figure 1 est une capture image de mines-saint-etienne.org sur ordinateur et smartphone.
Nicolas Girard 4
Figure 1. Captures images de mines-saint-etienne.org sur ordinateur à gauche et smartphone à droite Ensuite la figure 2 est la notation du site selon tous les critères.
Axe Critère mines-saint-etienne.org
Organisation
Catégorisation 1
Organisation par sujet 2
Organisation par tâche 0
Organisation par public 0
Séparation de ces différentes organisations 0
Structure hiérarchique 0
Classification 1
Moyenne organisation 0,57
Nommage
Pertinence 1
Style 0
Présentation 0
Syntaxe 1
Granularité 0
Intégralité 2
Public 1
Moyenne nommage 0,71
Navigation
Globale 1
Locale N/A
Contextuelle 1
Sitemap 0
Index N/A
Repérage 1
Flexibilité 0
Moyenne navigation 0,60
Recherche
Contenu indexé 1
Champs de recherche pertinents 1
Correction orthographique N/A
Algorithme phonétique N/A
Racinisation N/A
Vocabulaire contrôlé et Thésaurus N/A
Liste d'options 1
Sélection de l'information à afficher 1
Nombre de résultats 1
Navigation 1
Ordre 1
Nicolas Girard 5
Groupement 1
Autocomplétion 0
Le formulaire de recherche est disponible sur la page des résultats 2
Moyenne recherche 1,00
Responsive web design
Tailles de police lisibles 0
Taille du contenu adapté 0
Dimensionnement des éléments tactiles 0
Configuration de la fenêtre d'affichage 0
Moyenne responsive web design 0,00
Figure 2. Notation du site mines-saint-etienne.org
Enfin la figure 3 est le graphique associé à la notation du site.
Figure 3. Évaluation de mines-saint-etienne.org
Mines-saint-etienne.org est très peu performant sur les 5 axes. La figure 4 permet de comparer mines-saint-etienne.org aux autres sites internet évalués de la même manière. Le tableau complet de ce benchmarking se trouve en annexe de ce document.
0,00 0,50 1,00 1,50 2,00
Moyenne organisation
Moyenne nommage
Moyenne navigation Moyenne recherche
Moyenne responsive web design
mines-saint-etienne.org
Nicolas Girard 6
Figure 4. Évaluation de mines-saint-etienne.org comparé à plusieurs sites internet
Les fonctions de recherche sont similaires sur tous les sites c'est pourquoi mines-saint-etienne.org est proche des autres sites pour les fonctions de recherche. Le graphique montre bien qu'aucun site n’est performant sur tous les axes, bien que beaucoup le sont sur la navigation et le nommage. Nous pouvons cependant observer que sur chaque axe, au moins un site est proche du maximum. La figure 5 compare mines-saint-etienne.org avec un site fictif regroupant le minimum des notes des sites analysés sur chaque axe ainsi qu’un autre site fictif regroupant le maximum des notes sur chaque axe.
Figure 5. Évaluation de mines-saint-etienne.org comparé au minimum et maximum de chaque axe
Mines-saint-etienne.org est loin du maximum. Cependant ce graphique montre à travers le maximum qu’il est possible de construire avec l’outil NetAnswer un site avec une ergonomie performante sur tous les axes. Les meilleurs sites sur chaque axe pourront nous aider à construire un site des alumni le plus ergonomique possible.
Par exemple la figure 6 montre l’évaluation de psluniversity-alumni.org qui est performant en responsive web design.
0,00 0,50 1,00 1,50 2,00
Moyenne organisation
Moyenne nommage
Moyenne navigation Moyenne recherche
Moyenne responsive web design
mines-saint-etienne.org
aiefrei.org
alumni.skema.edu
chimie-paris.org
paristech-alumni.org
mines-stetienne.fr (n'utilise pas NetAnwser)
0,00 0,50 1,00 1,50 2,00
Moyenne organisation
Moyenne nommage
Moyenne navigation Moyenne recherche
Moyenne responsive web design
mines-saint-etienne.org Minimum
Maximum
Nicolas Girard 7
Figure 6. Évaluation de psluniversity-alumni.org
La figure 7 est une capture image de psluniversity-alumni.org sur ordinateur et smartphone.
Figure 7. Captures images de psluniversity-alumni.org sur ordinateur à gauche et smartphone à droite
Un autre exemple est chimie-paris.org dont on peut voir l’évaluation sur la figure 8. Ce site est surtout intéressant pour son responsive web design et son nommage.
0,00 0,50 1,00 1,50 2,00
Moyenne organisation
Moyenne nommage
Moyenne navigation Moyenne recherche
Moyenne responsive web design
psluniversity-alumni.org
Nicolas Girard 8
Figure 8. Évaluation de chimie-paris.org La figure 9 est une capture image de chimie-paris.org sur ordinateur et smartphone.
Figure 9. Captures images de chimie-paris.org sur ordinateur à gauche et smartphone à droite
3. Questionnaire aux utilisateurs
Les critères d’ergonomies retenus pour analyser mines-saint-etienne.org permettent de construire un site ergonomique s’ils sont remplis. Il faut cependant cerner les attentes des utilisateurs du site pour pouvoir remplir efficacement certains de ces critères.
Un questionnaire sur l'ergonomie du site a donc été diffusé auprès des utilisateurs ingénieurs pour élargir l’étude. Il permet aussi de remplir les critères de l'axe organisation. Des questions ouvertes permettant aux utilisateurs de donner leur avis et des suggestions ont été ajoutées au questionnaire. Nous avons reçu seulement 44 réponses, ce qui montre un certain manque d’intérêt pour le site. Cela est sûrement dû au fait que le site n’est pas très utilisable dans l’état actuel donc peu de personnes le visitent. Les figures 10 et 11 montrent la démographie des utilisateurs ayant répondu au questionnaire.
0,00 0,50 1,00 1,50 2,00
Moyenne organisation
Moyenne nommage
Moyenne navigation Moyenne recherche
Moyenne responsive web design
chimie-paris.org
Nicolas Girard 9
Figure 10. Type d’utilisateur
Figure 11. Répartition des promos des anciens ICM
La figure 12 répertorie les tâches les plus effectué par les utilisateurs. Cela va être utile pour concevoir la navigation du site.
Figure 12. Tâches les plus effectuées sur mines-saint-etienne.org
La figure 13 montre les sections les plus utilisées par les utilisateurs. Cela va aussi être utile pour concevoir la navigation du site.
Nicolas Girard 10
Figure 13. Sections du site les plus utilisées Enfin la figure 14 montre les types d’appareils utilisés par les utilisateurs.
Figure 14. Appareils utilisés par les utilisateurs de mines-saint-etienne.org
Le site n’étant pas utilisable sur tablette ou smartphone il est normal que peu d’utilisateurs le visionnent sur ces appareils. Les statistiques de la newsletter sont plus parlantes. Parmi les quelques 1800 personnes la recevant, 20% utilisent des tablettes et des smartphones. Cette proportion ne peut qu’augmenter dans le futur.
Beaucoup d’utilisateurs ont exprimé leur souhait d’avoir un site plus ergonomique avec un design mis au goût du jour.
Ces réponses au questionnaire seront utiles dans la suite du rapport qui détaille tous les critères d'ergonomie utilisés et les préconisations proposées pour remplir ces critères.
Nicolas Girard 11
II. Organisation
1. Catégorisation a. Description
Le contenu d'un site internet peut être classé dans plusieurs catégories. La catégorisation a pour but de définir ces différentes catégories de façon pertinente et logique pour l’utilisateur. L'utilisateur comprenant les différentes catégories pourra facilement naviguer et rechercher le contenu du site internet. Les catégories ne sont pas forcément mutuellement exclusives. Il n'est pas interdit qu'un contenu se retrouve dans plusieurs catégories. Cependant tout contenu doit être classé dans au moins une catégorie.
b. Remarques sur mines-saint-etienne.org
Les différentes catégories de mines-saint-etienne.org ne sont pas toutes mises en évidence, il est donc difficile de connaître toutes les catégories choisies. De manière générale il est utile de revoir la catégorisation.
c. Préconisations
Par exemple une catégorie « association » regroupant les différentes associations dont le site web parle n'a pas l'air d'exister. En implémentant cette catégorie, toutes les associations présentes sur le site pourraient être facilement présentées de la même manière selon un template (modèle de page) propre à la catégorie « associations ». De cette manière, rajouter la présentation d'une association au site sera facilité. Une catégorie « partenaires » semble bien exister bien qu'aucun template n'est appliqué pour les pages des partenaires. Il faut s’inspirer de ce qui a été fait pour les catégories
« actualités », « événements », etc. qui sont déjà utilisées de manière efficace sur le site.
2. Structure hiérarchique a. Description
Ces différentes catégories ont des relations entre elles. Il est souvent possible d'établir une hiérarchie de ces catégories, avec des catégories englobant d'autres catégories.
Ces relations doivent être pertinentes. L'utilisateur doit pouvoir reconnaître ces relations sans difficulté. Deux caractéristiques principales d'une hiérarchie sont sa largeur et sa profondeur (voir figure 15). La largeur ainsi que la profondeur doivent être raisonnables. Une hiérarchie trop large donne trop d'options à l'utilisateur pour une navigation rapide et une hiérarchie trop profonde allonge le temps nécessaire pour trouver un contenu en bas de la hiérarchie.
Figure 15. Exemple de hiérarchie
mines-saint- etienne.org
News
Actualités Evénements
Réseaux des anciens
Annuaire
Profondeur
Largeur
Nicolas Girard 12
b. Remarques sur mines-saint-etienne.org
Ce qui est catégorisé dans mines-saint-etienne.org est mal organisé. Par exemple tout ce qui est en rapport avec les news se retrouve un peu éparpillé sur le site : il y a des sous-onglets « Newsletter » et « Panoramines » dans l'onglet
« L'ASSOCIATION » alors qu’il existe un onglet « ACTUALITES » dans lequel il serait mieux de les placer. Les onglets « VIE DES PROMOS » et « PROMOS » font doublons. La hiérarchie du menu principal est aussi trop large et un peu trop profonde. En effet il y a beaucoup de liens dans le premier niveau du menu. De plus les sous-menus contiennent eux-mêmes beaucoup de liens. Enfin ces sous-menus ont aussi des onglets ouvrant un sous sous-menu. Voir la figure 16 pour une illustration de ces caractéristiques.
Figure 16. Menu principal de mines-saint-etienne.org
Cela fait beaucoup trop d’éléments pour que l’utilisateur puisse naviguer le site confortablement et rapidement. De plus on peut voir sur la figure 16 que le sous-menu « L’ASSOCIATION » contient un onglet « Partenaire » qui fait doublon avec l’onglet « PARTENARES » du menu principal. Cela augmente la taille du menu alors que ce n’est pas nécessaire.
c. Préconisations
Il faut repenser la hiérarchie en intégrant les nouvelles catégories. Ensuite l'arborescence devrait déjà avoir une largeur et profondeur réduite. Étaler la structure sur les pages (la page d'accueil notamment) est aussi un bon moyen de permettre à l'utilisateur de voir rapidement où il veut aller. Le menu principal n'est pas le seul moyen pour naviguer dans la hiérarchie et ne devrait pas être surchargé.
3. Classification a. Description
La classification consiste à répartir le contenu dans les différentes catégories.
b. Remarques sur mines-saint-etienne.org
Un exemple de mauvaise classification est que le bicentenaire apparaît dans « L'ASSOCIATION » et dans «Notre école».
c. Préconisations
La nouvelle catégorisation doit se faire selon le contenu, donc la bonne classification de celui-ci devrait en découler.
4. Organisation par sujet a. Description
Les catégories peuvent être organisées de plusieurs façons. La première est une organisation par sujet. Elle regroupe par exemple « L'ASSOCIATION », « ACTUALITES », etc.
Nicolas Girard 13
b. Remarques sur mines-saint-etienne.org
L'organisation actuelle du site web est faite quasi-exclusivement par sujet. Il est possible d'y ajouter les deux organisations suivantes.
5. Organisation par tâche a. Description
L'organisation par tâche présente les actions que peut faire l'utilisateur sur le site. C'est par exemple : « COTISER »,
« CHERCHER UN ALUMNI », etc. La figure 17 montre un exemple de cette organisation sur le site de l’a.i.efrei. Elle n’est pas existante sur mines-saint-etienne.org
Figure 17. Organisation par tâche sur aiefrei.org
b. Préconisations
Il faut repérer les différentes tâches effectuées sur le site et les répertorier dans l'organisation par tâche. La Figure 18 est un résultat du questionnaire et montre les tâches les plus effectuées sur mines-saint-etienne.org.
Figure 18. Tâches les plus effectuées sur mines-saint-etienne.org
La figure 18 permettra de choisir les tâches à mettre en avant sur le site dans l’organisation par tâche. De cette façon les utilisateurs auront accès plus rapidement aux tâches les plus importantes.
6. Organisation par public a. Description
L'organisation par public permet à l’utilisateur d'accéder rapidement aux sections du site qui l’intéresses. La figure 19 montre un exemple de cette organisation sur le site d’Alumni Skema. Elle n’est pas présente sur mines-saint-etienne.org.
Nicolas Girard 14
Figure 19. Organisation par public sur alumni.skema.edu
b. Préconisations
Il faut donc identifier tous les publics du site et les catégoriser. La figure 2 montre les types d’utilisateurs qui ont répondu au questionnaire, ici « élève ICM » et « ancien élève ICM ». Il ne faut cependant pas oublier les recruteurs, en effet la figure 18 montre qu’il y a une demande pour poster des offres d’emploi. Un début de catégorisation peut donc être :
« ELEVES », « ANCIENS », « RECRUTEURS ». Si d’autres types de public sont identifiés il peut être pertinent de les rajouter.
7. Séparation de ces différentes organisations a. Description
L'avantage d'un site internet est que plusieurs organisations peuvent coexister mais il faut que leur séparation soit claire. Mines-saint-etienne.org n’a pas cette séparation. Cette séparation permet à l’utilisateur de faire ses choix de navigation plus rapidement et donc de trouver ce qu’il cherche plus rapidement. La figure 20 montre un exemple de cette séparation sur le site d’Alumni Skema.
Nicolas Girard 15
Figure 20. Séparation des différentes organisations
b. Préconisations
Les menus de navigation doivent bien séparer visuellement les différentes organisations. Le menu principal peut avoir plusieurs barres avec chaque barre de liens dédiée à un type d'organisation. Une séparation au niveau de la couleur de fond du menu peut aussi être efficace.
Nicolas Girard 16
III. Nommage
1. Pertinence a. Description
Le nom est-il ambigu ? Représente-t-il bien ce qu'il nomme ? Ce sont les questions à se poser lors du nommage d'une catégorie.
b. Remarques sur mines-saint-etienne.org
Par exemple sur mines-saint-etienne.org, « PUBLICATIONS » ne veut pas forcément dire « NEWS » donc l'utilisateur peut ne pas savoir que derrière l'onglet « PUBLICATIONS » se trouve des news qu'il peut consulter. « CARRIERES » est en fait « Intermines carrières » ce qui n'est pas clair en utilisant juste « CARRIERES ».
c. Préconisations
Lors de la nouvelle catégorisation il faudra choisir des noms pertinents et non ambigus. Il est souvent pertinent de s’inspirer d’autres sites web ayant des catégories similaires et utiliser le même nommage. Ce n’est pas dans la pertinence du nommage qu’il faut être original et différent des autres.
2. Présentation, style et syntaxe a. Description
Tout ce qui a trait à l'aspect visuel des noms doit être cohérent : présentation, style et syntaxe. Par exemple un aspect visuel constant pour les noms qui ont un rapport entre eux (par exemple tous les titres). La présentation dépend de la police de caractère, sa taille, sa couleur, etc. Le style dépend de l'utilisation de majuscule, d'une ponctuation, etc. Et enfin la syntaxe dépend de l'utilisation de verbe, de nom ou de question.
b. Remarques sur mines-saint-etienne.org
Sur mines-saint-etienne.org les titres des pages et sections ont une apparence différente. Dans « CARRIERES », beaucoup de styles différents coexistent. On a « L'ASSOCIATION » et « AGENDA » au lieu de « L'AGENDA ». A noter que sur le site d'Intermines c'est « ASSOCIATION ». Il n'y a pas d'accent dans « ACTUALITES » alors qu'il y est dans « CARRIÈRE ». On a « Tous les numéros d'Infos carrières » mais « Les news ». Pour la syntaxe, il n'y a pas beaucoup d'utilisation de verbes et pas de questions sauf pour « Regarder les vidéos conférences ».
c. Préconisations
Il s'agit principalement de prendre des décisions comme mettre tout en majuscule, utiliser des accents, mettre les articles devant les noms, etc. et appliquer les mêmes règles de façon cohérente. Il est souvent pertinent d'utiliser des verbes pour l'organisation par tâche et des questions dans certaines catégories de l'organisation par public.
3. Granularité a. Description
La granularité est le principe qui consiste à regrouper visuellement plusieurs noms qui font partie d'une même catégorie ou du même niveau hiérarchique.
b. Remarques sur mines-saint-etienne.org
Un mauvais exemple sur mines-saint-etienne.org est « Sainte Barbe 2015 » à côté de « Présentation ». Le premier correspond à un événement qui est donc temporaire alors que le second est intemporel.
c. Préconisations
Le design des menus et des pages doit refléter visuellement la hiérarchie des catégories mises en place.
4. Public a. Description
Le nommage doit être compris par tous les utilisateurs. Il faut éviter d'utiliser des termes spécifiques seulement compris par un certain type de public.
Nicolas Girard 17
b. Remarques sur mines-saint-etienne.org
Sur mines-saint-etienne.org, « Les stéphanosaures » est compris par un nombre très réduit de personnes. Il est pertinent de le conserver, par contre il faut décrire ce terme le plus rapidement possible à l’utilisateur, par exemple dès le début de la page correspondante. Pour l’instant il n’y a aucune description écrite de ce terme sur le site.
c. Préconisations
Pour le reste, il faudra faire attention au nommage des catégories à l’intérieur de l’organisation par public. Chaque public devrait pouvoir comprendre le vocabulaire utilisé dans sa catégorie.
Nicolas Girard 18
IV. Navigation
1. Navigation globale a. Description
C’est une navigation qui se trouve sur toutes les pages. Elle contient au minimum un lien vers l'accueil du site et la fonction recherche.
b. Remarques sur mines-saint-etienne.org
Sur mines-saint-etienne.org, il n’y a pratiquement que cette navigation et elle n’est pas efficace. Il n’y a pas de lien explicite vers l’accueil du site. Il est possible de trouver du contenu par la fonction recherche qui ne se retrouve pas avec la navigation du site. Pour la boite de login, l’icône pour se connecter avec d'autres comptes est incompréhensible. La hiérarchie large et profonde du site donne un menu avec des sous sous-onglets et beaucoup trop d'options. Les liens vers des sous-onglets ne contiennent pas d’indicateur visuel les différenciant des autres liens du menu. Enfin certains onglets sont vides dans le menu principal.
c. Préconisations
Le logo principal du site devrait rediriger l’utilisateur vers l’accueil. Il faut utiliser des icônes évocatrices et ne pas hésiter à ajouter du texte si besoin. Avoir une hiérarchie mieux équilibré au niveau de la largeur et de la profondeur améliorera automatiquement le menu principal il le rendra plus facile d’utilisation. Pour choisir les liens prépondérants dans le menu principal, il faut prendre en compte les sections du site les plus utilisées par l’utilisateur, voir figure 21. Certaines fonctionnalités sont aussi moins utilisées que d’autres, il faut donc les mettre plus en retrait dans la navigation. D’après les réponses au questionnaire, ces fonctionnalités non indispensables pour un certain nombre d’utilisateurs sont: clubs, partenaires, vie des promos, derniers profils modifiés, actualités.
Figure 21. Sections du site les plus utilisées
2. Navigation locale a. Description
C’est une navigation qui est adaptée à chaque section du site.
b. Remarques sur mines-saint-etienne.org
Elle est quasiment inexistante sur mines-saint-etienne.org sauf pour une ou deux pages du site.
c. Préconisations
La navigation locale propre à une section du site peut être vraiment utile. Elle permet de naviguer cette section plus rapidement, sans aller explorer le menu principal. Cela permettra aussi d'alléger ce dernier. Voir la figure 22 pour un exemple de navigation locale.
Nicolas Girard 19
Figure 22. Navigation locale sur mines-stetienne.fr
3. Navigation contextuelle a. Description
C’est une navigation à l'intérieur du texte sous forme de liens. Ces liens ont pour cible d’autres pages qui ont un rapport avec la page actuelle.
b. Remarques sur mines-saint-etienne.org
Elle existe un peu sur mines-saint-etienne.org, ce qui est bien car il ne faut pas trop en abuser.
c. Préconisations
Une amélioration possible est de clarifier la cible des liens, de différencier les liens redirigeant à l’intérieur du site et ceux redirigeant à l’extérieur.
4. Sitemap a. Description
Le sitemap est un plan du site web. C'est une représentation de l'architecture du site qui liste les ressources proposées, en général sous forme hiérarchique. Cela permet à l'utilisateur d'accéder rapidement aux quelques premiers niveaux de la hiérarchie, voir tous les niveaux Mines-saint-etienne.org n’a pas de sitemap.
b. Préconisations
Le sitemap est présent sur beaucoup de site web et il est très utile. Il est aussi pertinent pour aider à l’indexation du site par Google et autre moteur de recherche. Il est souvent positionné dans un « fat footer » (un grand bas de page) comme sur la figure 23, ce qui serait très efficace sur mines-saint-etienne.org.
Nicolas Girard 20
Figure 23. Sitemap dans un fat footer sur icpalumni.fr
5. Repérage a. Description
Le principe du repérage est que l'utilisateur doit savoir où il se trouve dans le site à tout moment.
b. Remarques sur mines-saint-etienne.org
Sur mines-saint-etienne.org, seul un breadcrumb (fil d’Ariane en français) pratiquement invisible est utilisé. Un breabcrumb est une aide à la navigation sous forme de signalisation de la localisation du lecteur dans un site web. La figure 24 montre le breadcrumb de mines-saint-etiennes.org.
Figure 24. Breadcrumb sur mines-saint-etienne.org
c. Préconisations
Il faut tout d’abord rendre ce breadcrumb plus visible. Ensuite utiliser les menus principaux et locaux en mettant en évidence dans quel onglet on se trouve en modifiant le visuel de l’onglet actuel. Il faut aussi avoir des URL lisible par un humain au lieu de ce qui est fait pour l’instant. Sur mines-saint-etienne.org, les URL ressemblent à cela :
« http://www.mines-saint-etienne.org/gene/main.php?base=469 ». Il faut faire comme chimie-paris.org : « http://chimie- paris.org/fr/page/1/l-association ».
Nicolas Girard 21
6. Flexibilité a. Description
La flexibilité sur un site internet est la possibilité de naviguer le site latéralement, c’est à dire de passer directement d'une branche de la hiérarchie à une autre. Il ne faut pas en abuser car cela peut désorienter l’utilisateur. Mines-saint- etienne.org n’a pas cette flexibilité.
b. Préconisations
Il est possible d’ajouter un peu de flexibilité si cela est pertinent. Par exemple si une section du site fait référence à une autre, ajouter un lien lors de cette référence rendra le site plus flexible. Il faut bien identifier ce lien comme un lien interne au site. De cette manière l’utilisateur sait où il va.
Nicolas Girard 22
V. Recherche
1. Contenu indexé a. Description
Le contenu indexé est le contenu du site qui a été choisi comme recherchable. Cela peut être toutes les pages du site, toutes les actualités, etc. Le contenu indexé représente aussi ce qui est utilisé pour indexer un contenu, par exemple le titre, la date de publication, les tags, etc.
b. Remarques sur mines-saint-etienne.org
Les événements ne semblent pas être recherchables. Certaines pages du site sont recherchables mais pas toutes. Par exemple la page de l’annuaire n’est pas indexée dans la recherche globale.
c. Préconisations
Idéalement, tout le site devrait être recherchable. Dans l’état actuel il faut au minimum rajouter les évènements dans ce qui est recherchable.
2. Champs de recherche pertinents a. Description
Chaque champ de recherche doit être pertinent : il doit être compris par l’utilisateur et nécessaire pour la recherche.
Il ne faut pas avoir de champs redondants non plus.
b. Remarques sur mines-saint-etienne.org
Sur mines-saint-etienne.org, le champ de recherche de l’annuaire « Groupe entreprise » n'est pas clair et ne possède pas de liste d’options. Il est impossible de l’utiliser. Les champs « Pays » et « Continent » interfèrent, car il est possible de sélectionner un pays qui n’est pas dans le continent sélectionné.
c. Préconisations
Il faut revoir quels champs de recherche sont pertinent. Pour les champs « Pays » et « Continent », il est possible d’avoir une liste d’option pour « Pays » qui soit conditionnelle de l’option choisie pour « Continent ».
3. Liste d'options a. Description
Ce sont des listes déroulantes pour choisir une option. Il faut éviter qu’elles soient top longues. Il est possible pour des longues listes d’avoir une fonction recherche à l’intérieure de la liste comme sur la figure 25.
Figure 25. Liste d’option recherchable sur alumni.skema.edu
Nicolas Girard 23
b. Remarques sur mines-saint-etienne.org
L’annuaire du site a des listes d’options très longues. L’utilisateur mettra beaucoup de temps avant de sélectionner une option ou plus probablement il n’utilisera pas du tout ce critère de recherche.
c. Préconisations
Cette technique peut être implémentée pour mines-saint-etienne.org pour des longues listes d’options comme
« Secteur ». Une autre amélioration éventuelle est de donner la possibilité de sélectionner plusieurs options.
4. Sélection de l'information à afficher a. Description
Pour chaque résultat, il faut choisir quels éléments du résultat sont affichés. Ces éléments doivent être pertinents sans non plus en mettre trop pour ne pas trop charger la page de résultat.
b. Remarques sur mines-saint-etienne.org
Sur mines-saint-etienne.org, la date des news n’est pas présente dans les résultats, alors que c’est une donnée prépondérante pour une news.
c. Préconisations
Ajouter la date des news dans les résultats de recherche.
L’utilisateur peut déjà savoir ce qu’il recherche. Dans ce cas il faut utiliser des résultats représentatifs, qui identifient le contenu associé sans le décrire. L’utilisateur peut aussi ne pas savoir exactement ce qu’il recherche. Il sait qu’il veut quelque chose mais il ne sait pas exactement quoi. Dans ce cas il faut utiliser des résultats descriptifs qui résument le contenu associé.
Il est aussi très utile de mettre en évidence les termes recherchés dans les résultats. Cela permet de les parcourir plus rapidement comme sur la figure 26.
Figure 26. Terme de la recherche mis en rouge sur aeae-isipca.com
5. Nombre de résultats a. Description
Le nombre de résultats à afficher sur une page doit être adapté à la situation. Cela doit prendre en compte le nombre de résultats total, la taille de chaque résultat, la taille de l'écran, etc.
b. Remarques sur mines-saint-etienne.org
Pour l'annuaire, le nombre est bien affiché. Le site donne aussi l'option de modifier le nombre de résultats par page.
Ce n’est pas possible pour la recherche globale ce qui peut donner une page de résultat très longue.
c. Préconisations
Il faut donc ajouter cette fonctionnalité à la recherche globale.
6. Navigation a. Description
La page des résultats doit pouvoir être navigable avec des boutons « suivant » et « précédent ». Elle doit aussi présenter le numéro actuel de la page.
b. Remarques sur mines-saint-etienne.org
Cette navigation est présente sur mines-saint-etienne.org pour l’annuaire mais pas pour la recherche globale.
Nicolas Girard 24
c. Préconisations
Il faut rajouter cette navigation pour la recherche globale. Une amélioration possible est de permettre d'accéder directement à une page de résultats selon son numéro.
7. Ordre a. Description
Les résultats doivent être ordonnés de manière pertinente. L'ordre peut être déterminé par tri (alphabétique ou chronologique) et/ou par classement (selon la pertinence du résultat par exemple). Mines-saint-etienne.org n’a pas ces options.
b. Préconisations
Il est possible de donner à l’utilisateur l’option de choisir la façon d’ordonner les résultats comme il le souhaite. Il est aussi possible de filtrer les résultats, notamment pour la recherche globale en donnant l’option de n’afficher que les résultats qui sont des news par exemple.
8. Groupement a. Description
Les résultats peuvent être groupés selon un ou plusieurs critères pour faciliter leur navigation.
b. Remarques sur mines-saint-etienne.org
Sur mines-saint-etienne.org, la recherche globale effectue ce groupement. Ce n'est pas le cas pour l’annuaire et autres fonctions de recherche sur le site.
c. Préconisations
Il faut donc étendre ce qui a été fait pour la recherche globale à toutes les fonctions de recherches du site. Par exemple pour l’annuaire grouper les résultats selon la promo, l’école, etc.
9. Autocomplétion
C’est une technique qui permet de donner des propositions complétant le début de recherche de l'utilisateur. Cela permet d’accélérer la recherche, ce qui est toujours apprécié par l'utilisateur et peut être implémenté sur le site.
10. Le formulaire de recherche disponible sur la page des résultats a. Description
Cela permet à l'utilisateur de modifier rapidement sa recherche et de savoir ce qu'il vient de rechercher et les options qu'il a choisi. C’est le cas sur mines-saint-etienne.org bien que cela peut être amélioré.
b. Préconisations
Les pages qui ont une fonction de recherche ont beaucoup de place perdue. Placer le formulaire de recherche en haut de la page et laisser défiler les résultats ensuite fera gagner de la place, surtout pour les utilisateurs visionnant le site sur une tablette ou un smartphone.
11. Autres techniques d’amélioration de la recherche
Aucun des sites de NetAnswer analysés ne semble implémenter ces techniques. Il n’est donc peut-être pas possible de les implémenter sur mines-saint-etienne.org avec NetAnswer. Elles sont présentées ici car elles sont toujours pertinentes si jamais NetAnswer peut les implémenter.
La correction orthographique permet une marge d'erreur de la part de l'utilisateur en pardonnant des erreurs de frappes, comme sur le nom et le prénom par exemple pour une recherche dans l'annuaire.
Un algorithme phonétique permet par exemple lors de la rechercher d'un nom d'obtenir tous les noms se prononçant de la même façon. Un exemple d’algorithme est « Soundex ».
La racinisation est la transformation des mots en leur radical. Ce radical est ensuite utilisé pour la recherche, qui donne plus de résultats. Elle peut être utile pour la fonction de recherche globale du site.
Avoir un vocabulaire contrôlé et un thésaurus permet d'ajouter des synonymes dans la recherche. Cela évite à l’utilisateur de rechercher manuellement pour tous les synonymes d’un mot
Nicolas Girard 25
VI. Responsive web design
1. Police de caractère lisible a. Description
Avoir une police de caractère trop petite peut rendre sa lecture difficile. La taille de police devrait aussi s'adapter à la taille de la fenêtre d'affichage.
b. Remarques sur mines-saint-etienne.org
Sur mines-saint-etienne.org, beaucoup de textes sont trop petits, voir la figure 27 pour quelques exemples. De manière générale, la police de caractère du site est trop petite. Cela est encore plus flagrant en visionnant le site sur une tablette ou un smartphone.
Figure 27. Quelques exemples de textes trop petits sur mines-saint-etienne.org
c. Préconisations
La nouvelle version du progiciel NetAnswer est responsive web design donc peut suffire pour régler ce problème. Si ce n’est pas le cas il faut augmenter la taille des polices et utiliser dans le HTML des unités de taille relatives comme « em ».
Cette unité de mesure de la police de caractères permet au texte de s’adapter à l’écran de l’utilisateur.
2. Taille du contenu adapté a. Description
La taille du contenu devrait être adaptée à la taille de la fenêtre d'affichage. L'internaute ne devrait pas à avoir faire défiler la page horizontalement.
b. Remarques sur mines-saint-etienne.org
Sur mines-saint-etienne.org le contenu est trop large pour un appareil mobile. La largeur du contenu de la page est de 1 202 pixels alors que la largeur de la fenêtre d'affichage n'est que de 980 pixels par exemple pour un smartphone.
c. Préconisations
Encore une fois la nouvelle version du progiciel devrait régler ce problème. Sinon il faut utiliser des règles CSS adaptées à chaque dimension de fenêtre d'affichage pour que la largeur totale du contenu s’adapte à la taille de la fenêtre de l’appareil utilisé. C’est ce que fait chimie-paris.org par exemple.
3. Dimensionnement des éléments tactiles a. Description
Les liens et boutons doivent être assez grands pour pouvoir cliquer dessus de manière tactile. Les zones cliquables doivent aussi être assez espacées pour assurer une précision du clic.
b. Remarques sur mines-saint-etienne.org
Sur mines-saint-etienne.org certain liens et boutons sont trop petits et trop proches les uns des autres pour répondre à cette règle. C’est le cas par exemple des liens dans la zone de login.
Nicolas Girard 26
c. Préconisations
Il faut donc grossir et espacer ces liens et boutons. La nouvelle version du progiciel ne suffit pas à remplir ce critère donc il faut y faire attention.
4. Configuration de la fenêtre d'affichage a. Description
Cette configuration évite que les appareils mobiles génèrent la page comme sur un ordinateur de bureau mais la redimensionnent à l'écran de l'appareil, ce qui rend le contenu très petit. Il n'y a pas de configuration de la fenêtre d'affichage sur mines-saint-etienne.org.
b. Préconisations
Ici aussi la nouvelle version du progiciel devrait suffire. Dans le cas contraire il faut simplement rajouter dans le HTML un tag meta du type « <meta name=viewport content="width=device-width, initial-scale=1"> ».
Nicolas Girard 27
VII. Récapitulatif des préconisations
Le tableau suivant récapitule les préconisations pour chaque critère d’ergonomie.
Axe Critère Description Préconisations
Organisation
Catégorisation Choix des différentes catégories.
Par exemple la catégorie association
regroupant les différentes associations dont le site web parle n'a pas l'air d'exister. Elle permettrait de présenter toutes les
associations de la même manière. D’autres catégories sont à rajouter.
Organisation par sujet
Par exemple :
« L'ASSOCIATION »,
« ACTUALITES », etc.
Organisation par tâche
Par exemple : « COTISER »,
« CHERCHER UN ALUMNI », etc.
Il faut repérer les différentes tâches effectuées sur le site et les répertorier sous l'organisation par tâche. Voir la Figure 18. Tâches les plus effectuées sur mines-saint-etienne.org
Organisation par public
Par exemple : « ELEVES »,
« ANCIENS »,
« RECRUTEURS », etc.
Il faut trouver tous les publics du site et les catégoriser. Un début de catégorisation peut être : « ELEVES », « ANCIENS »,
« RECRUTEURS»
Séparation de ces différentes organisations
Plusieurs organisations peuvent coexister mais il faut que leur séparation soit claire.
Les menus de navigation doivent bien séparer visuellement les différentes organisations. Le menu principal peut avoir plusieurs barres avec chaque barre de liens dédiée à un type d'organisation. Une séparation au niveau de la couleur de fond du menu peut aussi être efficace.
Structure hiérarchique
Les relations entre catégories sont-elles pertinentes ? La hiérarchie est-elle trop large et/ou trop profonde ?
Il faut repenser la hiérarchie en intégrant les nouvelles catégories. Etaler la structure sur les pages (la page d'accueil notamment) est aussi un bon moyen de permettre à l'utilisateur de voir rapidement où il veut aller.
Classification
Répartition du contenu dans les différentes catégories.
La nouvelle catégorisation se fera selon le contenu donc la bonne classification de celui- ci devrait en découler.
Nommage
Pertinence
Le nom est-il ambiguë ? Représente-t-il bien ce qu'il nomme ?
Lors de la nouvelle catégorisation il faudra choisir des noms pertinents et non ambigus.
S’inspirer d’autres sites.
Style
Style consistant : utilisation de majuscule, ponctuation, etc.
C'est principalement des décisions à prendre comme mettre tout en majuscule, utiliser des accents, etc. et appliquer ces règles de façon cohérente.
Présentation
La police de caractère, sa taille, couleurs. Le groupement visuel
pertinent de plusieurs noms Idem
Syntaxe
Utilisation de verbes, de nom ou de question. Cohérence de la
syntaxe. Idem
Granularité
Plusieurs noms qui se voient groupé doivent faire partie du
même niveau hiérarchique. Le design du menu doit refléter la hiérarchie.
Public
Le nommage est-il compris par tous les utilisateurs ? Certains termes sont-ils spécifiques à certains types de publics ?
Il faudra faire attention au niveau de la navigation par public au vocabulaire compris par chaque type de public.
Navigation
Globale
Même navigation sur toutes les pages. Liens vers l'accueil, présence de la fonction recherche.
Choisir les liens prépondérants en utilisant les données de la Figure 21. Sections du site les plus utilisées. Utiliser des icônes évocatrices.
Locale
Navigation adaptée à chaque section du site.
Peut être vraiment utile pour naviguer des grosses sections du site, plutôt que d'aller explorer le menu principal. Permet aussi d'alléger ce dernier.
Nicolas Girard 28 Contextuelle
Navigation à l'intérieur du contenu et liens qui ont une relation avec contenu.
Clarifier la cible des liens (interne/externe entre autre). Ne pas utiliser des liens de type
« cliquer ici »
Sitemap
Plan du site web permettant à l'utilisateur d'accéder rapidement aux quelques premiers niveaux
de la hiérarchie. Mettre le sitemap dans un « fat footer »
Repérage
L'utilisateur doit savoir où il se trouve dans le site à tout moment.
Breadcrumb plus visible. Utiliser les menus principaux et locaux en mettant en évidence dans quel onglet on se trouve. Donner un titre à chaque page. Donner une URL lisible par un humain.
Flexibilité
Possibilité de naviguer le site latéralement : de passer
directement d'une branche de la hiérarchie à une autre.
Si pertinent peut être utilisé et préciser la cible des liens (interne/externe entre autre). Ne pas utiliser des liens du type « cliquer ici »
Recherche
Contenu indexé
Quelle partie du site est-t-il possible de rechercher ? Qu'est ce qui est utilisé pour indexer un contenu ? (titre, date de
publication, tags, ...)
Les événements devraient être rajoutés à l’indexation.
Champs de recherche pertinents
Les différents champs de recherche sont-ils tous nécessaire ? Certains sont-ils redondants?
Il peut être utile de modifier un peu ces champs de recherche par exemple pour
« pays » et « continents » Correction
orthographique
Permet une marge d'erreur de la part de l'utilisateur
Peut être utilisé pour le nom et le prénom de l'annuaire.
Algorithme phonétique
Permet par exemple lors de la rechercher d'un nom d'obtenir tous les noms se prononçant de
la même façon. Utiliser « Soundex » par exemple
Racinisation
Transformation des mots en leur radical pour une recherche plus large.
Elargir la recherche par ce moyen est toujours utile.
Vocabulaire contrôlé et Thésaurus
Permet d'ajouter des synonymes
dans la recherche. Idem
Liste d'options
Listes déroulantes pour choisir une option. Sont-elles trop longues ? Offrent-elles la possibilité de rechercher à l'intérieur des options ?
Permettre de rechercher les options pour y accéder plus rapidement. Donner la possibilité de sélectionner plusieurs options.
Sélection de l'information à afficher
Pour chaque résultat, quels éléments du résultat sont affichés. Ces éléments sont-ils pertinents ?
Résultats représentatifs pour les utilisateurs qui savent ce qu’ils veulent. Résultats
descriptifs pour les autres. Mettre en évidence les termes recherchés dans les résultats permet de parcourir plus rapidement ceux-ci.
Ajouter la date des news dans les résultats.
Nombre de résultats
Le nombre de résultats à afficher sur une page doit être adapté à la situation (nombre de résultats total, taille de chaque résultat, taille de l'écran, etc.).
Etendre ce qui a été fait pour l'annuaire à toutes les fonctions de recherches.
Navigation
Navigation des résultats. Boutons
« suivant », « précédent », numéro actuel de la page, etc.
Ajouter ces fonctions à la recherche globale.
Permettre d'accéder directement à une page de résultat.
Ordre
L'ordre peut être déterminé par tri ou par classement.
Donner la possibilité de modifier l'ordre.
Possibilité aussi de filtrer les résultats, notamment pour la recherche globale.
Groupement
Les résultats peuvent être groupés selon un ou plusieurs critères pour faciliter leur navigation.
Donner la possibilité de modifier le
groupement. Etendre ce qui a été fait pour la recherche globale à toutes les fonctions de recherches.
Nicolas Girard 29 Autocomplétion
Donne des propositions
complétant le début de recherche
de l'utilisateur. Peut être implémenté sur le site.
Le formulaire disponible sur la page des résultats
Permet à l'utilisateur de modifier rapidement sa recherche et de savoir ce qu'il vient de rechercher et les options qu'il a choisi.
Disposer le formulaire en haut de la page et laisser défiler les résultats ensuite plutôt que de les mettre côte à côte.
Adaptabilité
Tailles de police lisibles
Une police trop petite peut rendre sa lecture difficile. La taille de police devrait aussi s'adapter à la taille de la fenêtre d'affichage.
Augmenter les tailles de polices et utiliser des unités relatives comme « em »
Taille du contenu adapté
La taille du contenu devrait être adaptée à la taille de la fenêtre d'affichage.
Mettre à jour le progiciel NetAnswer. Utiliser des règles CSS adaptées à chaque dimension de fenêtre d'affichage.
Dimensionnem ent des éléments tactiles
Les liens et boutons doivent être assez grands et espacés pour pouvoir cliquer dessus de
manière tactile. Grossir ces zones et les espacer.
Configuration de la fenêtre d'affichage
Cette configuration évite que les appareils mobiles génèrent la page comme sur un ordinateur de bureau mais la redimensionne à l'écran de l'appareil, ce qui rend le contenu très petit.
Mettre à jour le progiciel. Rajouter un tag meta du type « <meta name=viewport
content="width=device-width, initial- scale=1"> »
Figure 28. Tableau récapitulatif des préconisations
Nicolas Girard 30
VIII. Plan d’action
La modification de mines-saint-etienne.org dépend beaucoup de NetAnswer et d’Intermines. Seul NetAnswer a accès au progiciel du site et Intermines contrôle un partie du site internet car certaines pages sont communes aux sites de Paris, Saint-Etienne, Nancy et Intermines. Ces pages sont toutes les pages rangées dans les onglets « ANNUAIRE », « CARRIERES », PUBLICATIONS », CLUBS », « GROUPES », « PROMOS » et « FAQ ». Ces onglets sont donc aussi sous le contrôle d’Intermines.
Dans l’état actuel des choses, Mines Saint-Etienne Alumni peut donc modifier les pages ainsi que les onglets du menu des sections « L’ASSOCIATION », « BICENTENAIRE », « ACTUALITES », « VIE DES PROMOS », « PARTENAIRES » et
« AGENDA ». Il est aussi possible de modifier les widgets s’affichant sur le bord des pages.
La plan d’action peut donc se découper en 3 étapes : une première étape de changement rapide du site réalisable par Mines Saint-Etienne Alumni, une seconde étape réalisable par Intermines mais qui affecterait tous les sites de Paris, Saint- Etienne, Nancy et Intermines et enfin une troisième étape réalisée avec NetAnswer.
1. Première étape de changement rapide par Mines Saint-Etienne Alumni
L’organisation des sections accessibles par Mines Saint-Etienne Alumni peut donc être remaniée selon les préconisations. Un groupe de personnes impliquées dans le site devra commencer à définir les différentes catégories utilisées dans ces sections (et dans les autres aussi, puisque qu’il faudra de toute façon le faire), effectuer ensuite le classement du contenu présent sur le site dans ces catégories et enfin nommer ces catégories en suivant les préconisations.
Il ne faut pas hésiter à s’inspirer d’autres sites internet similaires. La catégorisation ne prendra tout son sens que lorsque NetAnswer pourra construire un nouveau site autour de ces catégories et les utiliser pour construire des pages templates pour chaque catégorie comme expliqué dans la section dédié à la catégorisation.
Il serait possible d’implémenter à ce stade les différents types d’organisation (ajouter par tâche et par public) en ajoutant des onglets mais leur séparation visuelle ne pourra être faite qu’après redesign du site par NetAnswer. L’idée est de réduire le nombre d’onglet du menu principal donc l’ajout de ces organisations devrait se faire sur la page d’accueil en attendant le redesign du site. Il y a beaucoup de place sur la page d’accueil pour y rajouter du contenu.
Les préconisations sur le nommage peuvent aussi être implémentées dans les sections contrôlées par Mines Saint- Etienne Alumni. Il s’agira principalement de modifier les noms des onglets et les titres des pages pour répondre aux règles établies au préalable. Ces règles peuvent être inspirées par d’autres sites similaires. Le visuel des pages peut être fortement uniformisé. Pour ça il faut se décider sur un format de titre appliqué à toutes les pages. De même le texte, les liens et de manière générale tous les éléments d’une page doivent avoir un formatage constant sur tout le site. Pour l’instant l’outil NetAnswer laisse trop de liberté au publicateurs car il permet de formater de manière libre. En attendant un éditeur de page plus performant de NetAnswer qui permettrait d’appliquer ces formatages de manière semi-automatique à la manière de Word, il faut se forcer à utiliser les formats et les règles d’écritures choisis.
Sur ce dernier point, il est possible d’effectuer un coaching des publicateurs à travers une étude MEP. Il s’agira d’abord d’établir des règles de formatage du texte, des images et des vidéos répondant aux standards du web. Ensuite le coaching consistera à habituer les publicateurs à publier des pages respectant ces règles. De cette manière la cohérence globale du site sera assurée et sa lisibilité fortement amélioré.
Pour ce qui est de la navigation, il est difficile de la modifier sans NetAnswer. Ce qui peut être fait est d’améliorer tous les liens du type « cliquer ici » en des liens informant l’utilisateur de ce qui se cache derrière le « ici ». Il est peut-être possible d’ajouter un sitemap dans le bas de page si ce dernier n’est pas contrôlé par Intermines.
Pour la recherche, il faudra attendre le redesign de NetAnswer pour implémenter les préconisations qui sont de nature technique pour la très grande majorité.
Pour le responsive web design, mettre à jour le progiciel de NetAnwser devrait fortement augmenter la performance du site sur cet axe. Cependant, la transition entre la version actuelle du progiciel et la nouvelle version ne serait peut-être pas aussi facile que de mettre à jour un logiciel quelconque. Si NetAnwser a tout simplement commencé à faire les nouveaux sites de leurs clients avec une nouvelle version du progiciel sans penser aux sites déjà existants, cette transition est impossible sans refaire un nouveau site avec la nouvelle version. Par contre si NetAnwser a prévu que son progiciel soit mis à jour il serait possible de rendre le site « responsive web design » relativement facilement. Il faut donc contacter NetAnwser pour voir si cela est possible.
Nicolas Girard 31
2. Seconde étape avec Intermines
Il s’agit d’effectuer le même travail que décrit plus haut mais appliqué aux sections contrôlé par Intermines. Il est peut- être plus possible à ce stade de rajouter le sitemap dans le bas de page commun aux sites de Paris, Saint-Etienne, Nancy et Intermines.
3. Troisième étape avec NetAnswer
Pour le redesign du site et l’implémentation de la plupart des préconisations il faut s’adresser à NetAnswer. Eux seuls peuvent réellement changer le corps du site web, son visuel, la manière dont il fonctionne. D’après le benchmarking, le site peut déjà être fortement amélioré avec le nouvel outil de NetAnswer utilisé par les sites analysés. Passer à la nouvelle version du progiciel est déjà une grande étape. Cela veut dire avoir la nouvelle version d’HTML, c’est-à-dire HTML5 qui est sorti en 2014 au lieu du HTML4 qui est utilisé pour l’instant pour le site. Cette nouvelle version permettra aussi de remplir presque automatiquement tous les critères de l’axe responsive web design. Il faut ensuite voir avec eux si ils peuvent intégrer toutes les préconisations sur l’axe recherche qui ne sont pas présentes sur les autres sites NetAnswer. Montrer ce rapport à NetAnswer pourra leur donner une idée précise de ce que Mines Saint-Etienne Alumni veut pour son site, c’est-à- dire le meilleur.
Nicolas Girard 32
IX. Annexes
Axe Critère
mines-saint-
etienne.org aiefrei.org alumni.skema.edu
psluniversity-
alumni.org icpalumni.fr aeae- isipca.com
chimie- paris.org
paristech- alumni.org
mines- stetienne.fr (n'utilise pas NetAnwser)
Organisation
Catégorisation 1 2 2 1 1 2 1 1 2
Organisation par
sujet 2 2 2 2 2 2 2 2 2
Organisation par
tâche 0 2 1 0 1 0 0 0 1
Organisation par
public 0 1 2 0 0 1 0 0 1
Séparation de ces différentes
organisations 0 1 2 0 2 0 0 0 1
Structure
hiérarchique 0 2 1 1 1 1 0 2 1
Classification 1 2 2 1 1 2 1 1 2
Moyenne
organisation 0,57 1,71 1,71 0,71 1,14 1,14 0,57 0,86 1,43
Nommage
Pertinence 1 2 2 1 2 1 1 1 2
Style 0 2 1 0 2 1 2 2 2
Présentation 0 2 1 2 2 2 2 2 2
Syntaxe 1 1 2 1 1 1 1 1 2
Granularité 0 2 2 2 2 1 2 1 1
Intégralité 2 2 2 2 2 1 2 2 2
Public 1 2 2 1 2 2 1 1 2
Moyenne nommage 0,71 1,86 1,71 1,29 1,86 1,29 1,57 1,43 1,86
Navigation
Globale 1 2 2 1 2 1 1 2 1
Locale N/A N/A 2 N/A N/A N/A N/A 2 2
Contextuelle 1 2 1 1 1 1 1 1 2
Sitemap 0 2 0 2 2 0 0 0 0
Index N/A N/A N/A N/A N/A N/A N/A N/A N/A
Repérage 1 1 1 1 1 0 2 2 1
Flexibilité 0 1 2 0 2 1 1 1 2
Moyenne navigation 0,60 1,60 1,33 1,00 1,60 0,60 1,00 1,33 1,33
Recherche
Contenu indexé 1 1 1 1 1 1 1 1 N/A
Champs de
recherche pertinents 1 1 2 1 2 1 1 1 N/A
Correction
orthographique N/A N/A N/A N/A N/A N/A N/A N/A N/A
Algorithme
phonétique N/A N/A N/A N/A N/A N/A N/A N/A N/A
Racinisation N/A N/A N/A N/A N/A N/A N/A N/A N/A
Vocabulaire contrôlé
et Thésaurus N/A N/A N/A N/A N/A N/A N/A N/A N/A
Liste d'options 1 1 2 2 1 1 1 1 N/A
Sélection de l'information à
afficher 1 1 2 1 1 2 2 1 N/A
Nombre de résultats 1 0 1 1 1 1 1 2 N/A
Navigation 1 0 1 1 1 0 1 2 N/A
Ordre 1 1 2 1 1 1 1 1 N/A
Groupement 1 1 1 1 1 1 1 1 N/A
Autocomplétion 0 0 2 2 0 0 2 0 N/A
Formulaire disponible
à côté des résultats 2 1 1 1 1 1 1 2 N/A
Moyenne recherche 1,00 0,70 1,50 1,20 1,00 0,90 1,20 1,20
Responsive web design
Tailles de police
lisibles 0 1 0 2 2 0 2 0 2
Taille du contenu
adapté 0 0 0 1 0 1 2 1 2
Dimensionnement
des éléments tactiles 0 1 1 1 1 1 1 1 1
Configuration de la
fenêtre d'affichage 0 0 0 2 2 0 2 0 2
Moyenne responsive
web design 0,00 0,50 0,25 1,50 1,25 0,50 1,75 0,50 1,75
Tableau complet du benchmarking
