Améliorer l’affichage des espèces d’une maille

[juggler31]

L’interface actuelle n’est pas très ergonomique lorsqu’un visiteur souhaitera consulter les espèces présentes sur une maille :

Exemple d’une maille cliquée dans la carte de la page d’accueil.

Description de la demande

Il est demandé la proposition d’une interface plus ergonomique pour lister les espèces présentes sur la maille. Le prestataire a toute liberté de faire une proposition d’interface.

Proposition d’interface améliorée pour la consultation des espèces d’une maille.
Il est à noter qu’un soin doit être apporté aux performances, à l’accessibilité et à la sobriété numérique.

[juggler31]

Une Synthèse des idées va être proposée dans les jours à venir.

[pchapuis-nantesmetropole]

Afin d'améliorer l'affichage des espèces d'une maille, l'objectif est d'obtenir les informations telles qu'on les retrouve dans le panneau à droite de la carte et comportant, pour chaque espèce:

• Noms latin et vernaculaire
• Photo emblématique
• Un bouton d'accès à la fiche espèce ou un autre moyen d'accès (clic)
• Idéalement, le nombre d'observations dans la maille
• Idéalement, l'année de dernière observation
• Idéalement, les "badges" de protection, patrimonialité...

Cette amélioration concerne:

• La page d'accueil, lorsque l'affichage par espèces est activé ainsi que le mode maille (par défaut, ce sont des points des dernières observations). Ex: observatoire-biodiversite.nantesmetropole.fr/
• La page territoire, quand le mode maille est activé. Ex: https://observatoire-biodiversite.nantesmetropole.fr/area/16586

Trois solutions sont envisagées:

1. Rajouter les photos dans l'infobulle actuelle
2. Afficher une modal des espèces de la maille (dans l'esprit de la proposition du premier message)
3. Afficher les espèces d'une maille dans le panneau de droite, accessible via des onglets (voir description ci-dessous)

Présentation de l'affichage en panneau

Voici une description en images de ce mode:

Résultat:

Avantages / inconvénients

Rajouter les photos dans l'infobulle actuelle

Avantages

• Techniquement facile
• On identifie bien la maille cliquée

Inconvénients

• Une infobulle est pertinente pour un petit contenu à afficher. Dans l'état actuel, elle manque déjà d'ergonomie (passe "sous" l'interface, au déplacement).
• De fait, la quantité d'informations supplémentaires que l'on peut faire remonter est très limitée
• Peu adaptée à un nombre important d'espèces (jusqu'à 200, sur certaines mailles)

Implémentation d'une modal

Avantages

• Techniquement relativement facile
• Liberté ergonomique assez grande

Inconvénients

• Reste peu adaptée à un nombre important d'espèces à afficher. Nécessité de paginer.
• Cache l'interface qui est en dessous
• De fait, on ne voit plus la carte ni la maille sélectionnée
• Nouveau mode d'affichage d'espèces alors qu'on les présente déjà de plein de façons différentes => confusion
• Pas très ergonomique en mobilité

Utilisation d'un panneau

Avantages

• On reste dans la même interface principale
• De fait, pas de nouveau composant à entretenir. Seulement une amélioration de l'existant (à confirmer)
• Cohérence ergonomique entre la liste de toutes les espèces et de celles d'une maille
• L'utilisateur comprend qu'il peut cliquer sur une maille
• La pagination est faciltée, du fait de la réutilisation du composant

Inconvénients

• Plusieurs cas d'utilisation à anticiper et à gérer (ex: "que se passe t-il si l'utilisateur clique sur une espèce de la maille? => Rien? On sélectionne dans la liste principale? ...)
• De fait, plus complexe techniquement
• Relative complexité fonctionnelle par rapport aux deux autres solutions. Enjeu de garder la manipulation instinctive et accessible.

[camillemonchicourt]

Les préférences dans l'ordre :

1. Tooltip améliorée (simple et classique)
2. Modale (reste simple et permet d'avoir plus de place mais ouvre une fenêtre
3. Onglet. Complexe et ajoute trop de changement d'état, de passage entre la liste complète et la liste de la maille, sans forcément comprendre. Nécessité de griser l'onglet quand on est sur la fiche territoire et qu'on a cliqué sur une espèce, ce qui ajoute un troisième état, encore plus paumatoire.

Donc la solution "Onglet" est celle que j'aime le moins, mais à voir les autres avis et pourquoi pas, si c'est vraiment celle que vous voulez.

[pchapuis-nantesmetropole]

De mon côté, ce serait l'ordre inverse!

Je vais proposer un petit vote, sous forme de réactions à ce commentaire:

1. Tooltip => 🎉
2. Modale => 🚀
3. Onglet => 👀

Plusieurs votes sont possibles

[pchapuis-nantesmetropole]

Au vu des votes (même peu nombreux), voici une proposition sur le principe d'une amélioration de la tooltip:

Voici quelques éléments à considérer:

• évolution visible, quand la carto est en mode maille, dans la page d'accueil et dans les fiches territoires
• il n'y a pas la place de rajouter les "badges" de protection et patrimonialité, ni les informations de sensibilité (sauf à intégrer, à terme, un code couleur)
• le nom trop long de certaines espèces oblige à les oblitérer ( les ... à la fin du second badge)
• la liste ne doit être appelée au serveur qu'au clic et pas au chargement initial de la page
• pagination à défilement infini, comme implémenté sur l'onglet général, à appliquer avec les mêmes paramètres
• le bouton de fiche espèce double le fait que cliquer sur la carte ouvre la fiche de la même manière

Si pas d'oppositions rapides, on peut donc partir là dessus.