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 => 👀