Soutenance mémoire
Les bonnes pratiques d’ergonomie pour un moteur de recherche
Les fonctionnalités
Une fois le design du moteur de recherche prêt, on va pouvoir aborder certaines fonctionnalités importantes à implémenter sur un moteur de recherche afin de rendre son utilisation la plus agréable possible. L’autosuggestion est fondamentale dans la réalisation d’un bon moteur de recherche. Cela fait gagner du temps à l’utilisateur. Il aura plus de chance de trouver des résultats pertinents à l’aide de requêtes déjà connues et ainsi, le risque de fautes réalisées par l’utilisateur est réduit. Le fait de garder en mémoire d’anciennes recherches effectuées peut être intéressant à mettre en place. Il faut faire attention à certaines choses lors de la mise en place de l’autosuggestion. Le fait de proposer des résultats est une bonne chose pour celui qui l’utilise, mais lui proposer énormément de résultats peut impacter négativement son expérience avec cet outil.
D’ailleurs, une grande liste de résultats ne doit en aucun cas dépasser la ligne de flottaison qui correspond au bas de l’écran, ce qui obligerait l’utilisateur à scroller et voir le formulaire de recherche disparaitre. Par la suite, le formulaire doit être prêt à recevoir certaines saisies spéciales des utilisateurs. Il faut prévoir des requêtes telles que la chaine vide ou qui contiendrait des caractères spéciaux afin de ne pas perturber l’utilisateur dans l’utilisation de l’outil. La plupart des sites proposent une recherche avancée pour permettre à l’utilisateur d’affiner sa recherche. On peut mettre cela en place en ajoutant des filtres au formulaire qui vont trier les résultats obtenus sur différents critères. Cette recherche avancée peut être cachée de l’utilisateur et seulement affichée dans le cas où l’utilisateur en signale le besoin. Le fait de l’afficher par défaut ne pose pas de problème si c’est un réel besoin pour la plateforme. Figure 5 – Exemple de recherche avancée sur la recherche d’image de Google4 Pour terminer, il est déconseillé de mettre en place un bouton de réinitialisation de formulaire. Dans le cas où il est déclenché sans le vouloir, l’utilisateur se verrait mettre à zéro son formulaire.
L’affichage des résultats
La partie ergonomique est autant importante dans l’affichage des résultats que dans celle du formulaire de recherche. Une bonne lisibilité de celle-ci améliorera l’utilisabilité du moteur de recherche. L’utilisateur doit facilement pouvoir soumettre à nouveau une requête afin d’affiner les résultats, ou d’en trouver dans le cas où aucun résultat n’est retourné. Le formulaire de recherche doit quant à lui contenir les informations de la requête effectuée auparavant pour que l’utilisateur n’ait pas à entrer toutes ses informations à nouveau. De plus, il est primordial d’afficher le nombre de résultats retournés. Dans le cas où il y aurait un trop grand nombre de résultats, cela lui permettrait d’affiner sa recherche. Figure 6 – Affichage du nombre total de résultats obtenus par une recherche sur Bing5 Par la même occasion, si une requête dépasse un certain nombre de résultats, il est judicieux de mettre à disposition de l’utilisateur une pagination afin de mieux se retrouver dans la consultation des résultats. On peut aussi proposer des tris sur les résultats afin de pouvoir les classer et faciliter la recherche de l’utilisateur. Il est important pour le bon sens de l’utilisateur que le design de la page de résultats soit le même qui est utilisé pour la page du formulaire de recherche. Si l’on vient à ne pas répondre à ce critère, l’utilisateur peut se sentir perdu et finir par abandonner sa recherche. Il n’empêche pas que les deux se retrouvent sur la même page. Pour finir, préciser le type de résultat qui va être retourné peut être utile en fonction du but de la plateforme. On peut aussi utiliser le stockage local afin d’améliorer la rapidité et réduire les charges sur le serveur.
Modifications apportées
On va tout d’abord se concentrer sur l’affichage des informations. On a pu voir plus haut que lors de l’affichage des informations, une boucle se charge de parcourir un tableau et d’ajouter l’information dans les deux vues possibles qui sont desktop et mobile. Il faut faire en sorte d’ajouter au DOM l’information uniquement dans la vue qui nous intéresse. Pour remédier à cela, la solution qui a été mise en place est totalement gérée par jQuery. Au chargement de la page, on récupère la largeur de l’écran qui nous permettra de déterminer sous quelle forme il faudra afficher les informations. Il est également important de mettre en place l’évènement « resize() » au niveau de la fenêtre dans le but de modifier l’affichage des informations si le client vient à redimensionner la fenêtre de son navigateur ou lors d’un changement d’orientation sur mobile. Si cela se produit, on appelle à nouveau la méthode qui se charge d’afficher les informations mais en lui indiquant sous quel format il doit les afficher. Sur l’image ci-dessous, on peut voir le résultat final obtenu pour la fonction qui s’occupe de l’affichage des informations. Avant de lancer l’une des deux boucles d’affichage, on vérifie dans quelle vue se trouve l’utilisateur à l’aide d’un booléen.6 Les valeurs sont attribuées en fonction de la largeur de l’écran. A travers ce test, on sait quelle boucle va être exécutée, laquelle va se charger d’ajouter les informations au bon endroit dans le DOM. Dans une vue de type desktop, on ajoutera l’information au DOM au format spécifique pour desktop7 et dans le cas d’une vue mobile, on ajoutera au format spécifique pour mobile.8 Avec cette solution, la page ne contient plus qu’une fois l’information.
Maintenant que l’on s’est occupé de l’affichage des informations, on va se pencher sur les deux filtres de recherches qui se trouvent sur ces pages. Comme vu précédemment, on s’était rendu compte que la balise de formulaire contenait deux filtres de recherches, un pour chacune des vues de la plateforme. En analysant de plus près les deux filtres, on peut s’apercevoir qu’ils sont pareils à deux exceptions près. Chaque élément du filtre desktop est englobé dans une balise « div » et le « div » qui englobe la totalité du filtre de recherche a un attribut différent l’un de l’autre. On va donc jouer avec les attributs des balises « div » à l’aide de jQuery afin de passer facilement d’un filtre en vue desktop à mobile et réciproquement. Avant tout, le filtre mobile ne servant plus à rien est supprimé des pages. On va adapter celui du desktop pour répondre à la demande de l’utilisateur de la plateforme. Pour cela, on va ajouter au niveau de l’HTML un identifiant à chacune des balises « div » dont les attributs vont changer en fonction de la vue souhaitée. On peut voir, sur l’image ci-dessous, qu’on va ajouter un attribut « class »9 pour identifier le div qui englobe le filtre car l’attribut « id » disparaîtra dans la vue mobile. Pour ce qui est des autres balises « div », on va les identifier avec un attribut « id »10 afin de gérer facilement l’ajout ou suppression de l’attribut « class ».
Maintenant que l’on a fini avec l’identification des balises qui nous intéressent, on va se pencher sur le code. On va réutiliser les évènements qu’on avait déclarés et utilisés pour l’affichage des informations. Les évènements « ready() » et « resize() » vont permettre d’adapter en tout temps le filtre de recherche en fonction de la taille de l’écran. Tout d’abord, l’évènement « ready() » va permettre d’adapter le filtre de recherche au format mobile si nécessaire lors du chargement de la page car c’est le format desktop qui est affiché par défaut. Ensuite, l’évènement « resize() » va permettre, comme pour l’affichage des informations, d’adapter l’affichage du filtre dans le cas d’un redimensionnement de la page sur un navigateur ou lors d’un changement d’orientation sur mobile. À chaque redimensionnement, on vérifie la largeur de l’écran et si avant le redimensionnement le filtre était affiché différemment du format voulu actuellement, alors c’est seulement à ce moment-là que l’on va apporter les modifications au filtre. Enfin, sur l’image ci-dessous, le code encadré en rouge sera exécuté lorsque l’on passe en affichage mobile. Il va enlever le style appliqué sur la « div » de chaque élément du filtre et enlever l’attribut « id » sur le « div » qui englobe tous les éléments pour les mêmes raisons. Quant au code encadré en vert, il va faire le contraire du code précédent afin d’afficher le filtre au format desktop.
|
Table des matières
Déclaration
Remerciements
Résumé
Table des matières
Liste des figures
1. Introduction
2. Historique du projet
3. L’ergonomie d’une plateforme
3.1 Les critères de l’ergonomie
3.1.1 La sobriété
3.1.2 La lisibilité
3.1.3 L’utilisabilité
3.1.4 La rapidité
3.1.5 L’interactivité
3.1.6 L’adaptabilité
3.1.7 L’accessibilité
3.2 Les bonnes pratiques d’ergonomie pour un moteur de recherche
3.2.1 Le design
3.2.2 Les fonctionnalités
3.2.3 L’affichage des résultats
4. Analyse et amélioration de la plateforme
4.1 Architecture des pages de recherche
4.2 Affichage des résultats de recherche
4.3 Processus de login/récupération de mot de passe
4.4 Corrections de problèmes d’affichages et de fonctionnement
4.4.1 Inversion d’informations sur la page « AnneeScolaire » en vue mobile
4.4.2 Problème sur la page « vacances » en vue mobile
4.4.3 Modifications des conditions dans la requête d’affichage des activités
4.4.4 Correction de la requête de recherche des activités vacances
4.5 Suppression des éléments de l’Etat de Genève
4.6 Suppression de l’image « Résultat de la recherche »
4.7 Changement des curseurs
4.8 Affichage des détails des favoris en vue mobile
4.9 Correction de l’impression des favoris
4.10 Mise en place d’un tableau de bord pour l’administrateur
5. Future amélioration de la plateforme
5.1 L’état actuel de la plateforme
5.2 Des futures fonctionnalités ?
6. Conclusion
Bibliographie
Télécharger le rapport complet
