Design : Proposition d'amélioration de la page d'accueil

[Naomi-Fischer]

Bonjour, Suite à des retours clients et une analyse en interne de l'UX de la page d'accueil, nous avons pensé à une première proposition d'amélioration :

Le menu a été organisé par thématiques, représentées par des couleurs (saisie, données...) et le header a été simplifié.

L'espace d'affichage de l'accueil a été optimisé afin de pouvoir personnaliser l'accueil en fonction de l'instance à l'aide d'une image en fond. Un voile blanc sera toujours présent pour garantir une bonne lisibilité du texte et ce peu importe la photo.

Ci dessous le lien figma si vous souhaitez ajouter des commentaires ou des remarques : https://www.figma.com/file/Bzaxw8CZIYT37llpZH9fBf/GeoNature?node-id=0%3A1&t=vabuOanA6JEpDudH-1

Bonne journée !

[TheoLechemia]

Bonjour,

merci pour la proposition. Je trouve très bien l'organisation de la navbar et la simplification du menu (attention cependant car il y a des nouveaux boutons de notifications sur la droite, il y a aussi le bouton de logout). Le bloc de stat est sympa aussi. Je suis pas fan de l'image en fond, mais c'est perso, on peut toujours mettre un fond blanc. Par contre le texte serait blanc sur blanc si on ne met plus de "card"

[VincentCauchois]

Salut

Je rejoins les avis de Théo.

D'autre part, je pense que ça pourrait être sympa de faire ressortir davantage en avant-plan le bloc pour la carte et les 4 blocs de stat : avec une ombre projetée plus prononcée et/ou un cadre (noir ?) et/ou un effet de relief.

Et, en plus du bouton de logout et du bouton de notification à venir (comme l'a dit Théo), il y a actuellement un bouton pour ouvrir la documentation. Il y a également un pied de page en bas du panneau de navigation déroulant, avec des liens pour informations sur : le site officiel de présentation de GeoNature, la version du site consulté, et les auteurs crédités.

Voir la capture d'écran, ci-dessous, de mon installation locale de GeoNature, avec pour version la branche develop@9021d9b31538be7d8b839f594b1ff2cd86f704c9 :

[jupierrot]

Bonjour, Je trouve que le texte est peu lisible avec l'image de fond sur la proposition. Est-il possible d'ajouter un encadré blanc moins transparent derrière le texte pour garantir la lisibilité ? Et je confirme qu'il manque quelques boutons dans l'encadré en haut de page : les notifications et le lien vers la doc !

[camillemonchicourt]

Voici un aperçu de l'accueil sur notre GeoNature :

Comme on le voit, la hauteur du texte peut être très variable selon les instances et de notre côté, on change ce texte régulièrement, pour parler des nouveautés.

Le fait de pouvoir grouper les modules par couleur dans le menu est pas mal. Pour cela il faudra prévoir un champs, voire une table modules_groups dans la BDD car chacun dispose potentiellement de modules différents, voire de modules spécifiques.

Il est déjà possible de changer le nom des modules, leur picto, mais aussi leur ordre, grâce à la table t_modules.

L'idée de pouvoir afficher une image intéressante, mais je n'aime pas non plus l'image en arrière-plan du texte.

On peut déjà inclure une image avant ou après le texte actuellement, étant donné que celui est un bloc de HTML. Mais on pourrait imaginer une place fixe pour une image optionnelle, avant ou après le texte, plutôt que derrière.

---

Au-delà de cela, on pourrait d'abord s'interroger sur le rôle de la page d'accueil et ce que l'on voudrait y mettre en avant.

Actuellement on s'est limité à :

• un message d'accueil
• quelques chiffres pour donner un vue d'ensemble de ce qu'il y a dans l'instance GeoNature
• la carte des dernières observations pour inviter à voir ce qu'il y a de nouveau

Par exemple ici, on parlait de faire remonter les photos des dernières observations : https://github.com/PnX-SI/GeoNature/issues/1180#issuecomment-738811063. Voir aussi ce que propose Kollect avec la liste des dernières observations, des espèces du moment, etc... : https://cpie.kollect.fr / https://obs28.org

[DonovanMaillard]

Bonjour,

Même avis pour moi, l'image en arrière-plan nuit à la lisibilité du texte et des blocs présents.

La logique de trier les modules ou de leur donner une couleur par "type" me plait bien également.

Il y a également un bloc "footer", qui est optionnel mais qui existe, à intégrer à la révision à mon avis,

[orovellotti]

Je suis pas non plus super fan du fond, c'est une application pro qui doit fournir des éléments utiles et utilisables des l'ouvertures.

Un bloc dernières observations, deniers imports, ou un widget qui fait remonter des infos clefs par modules serait intéressant

D'une manière générale il nous faut une styleguide pour homogénéiser les interactions UI/UX avec 3 types de boutons max ?

[JulienCorny]

"Pour cela il faudra prévoir un champs, voire une table modules_groups dans la BDD car chacun dispose potentiellement de modules différents, voire de modules spécifiques." Il existe déjà un champ "module_group" dans la table gn_commons.t_modules, est-ce qu'il pourrait convenir si on se restreint à 1 seul critère/type simple ? Ou pour mieux faire les choses créer une table gn_commons. bib_module_groups et modifier module_group de gn_commons.t_modules pour ajouter une contrainte foreign key vers bib_module_groups ?

[camillemonchicourt]

OK bien vu. Je n'avais plus en tête ce champs module_group, certainement par le fait qu'il n'a pas d'usage actuellement, à ma connaissance. On avait certainement du l'ajouter avec cette idée de pouvoir regrouper des modules.

Si on le laisse en champs texte comme ça, ça peut fonctionner, mais c'est fragile et limité. Cela impliquerai que ce champs soit bien saisi de manière similaire pour tous les modules d'un groupe. Et on ne pourrait modifier facilement le label du groupe, ni lui définir un picto par exemple.

Une table gn_commons. bib_module_groups et un clé étrangère id_module_group dans la table t_modules éviterait ces limites.

PS : Depuis la version 2.12.0, il est possible de modifier les infos d'affichage des modules directement dans le module "Admin" pour permettre à des administrateurs de modifier facilement le label, le picto, l'ordre ou encore l'URL de la doc d'un module sans avoir accès à la BDD :

[orovellotti]

@Naomi-Fischer tu peux mettre les picots de la barre de menu ici pour commentaires ?

[camillemonchicourt]

Pour les pictos, on s'appuie actuellement uniquement sur ceux disponibles dans Font-awesome : https://fontawesome.com/icons Il faut d'ailleurs qu'on passe de la version 4 à la 6. Si il faut utiliser une autre source, c'est à changer globalement dans GeoNature, et à répercuter dans les configurations de toutes les instances de GeoNature et tous les modules.

[mvergez]

Salut !

Ma contribution :) :

Et, en plus du bouton de logout et du bouton de notification à venir (comme l'a dit Théo), il y a actuellement un bouton pour ouvrir la documentation

L'objectif est de regrouper tout ça dans un sous menu ou quand tu cliques sur l'utilisateur il y a dans un sous-menu (au maximum) :

• Mon compte
• Les notifications
• Se déconnecter
• Aidez-moi (documentation)

Cela simplifie grandement l'affichage. Et pour le responsive, c'est un premier pas !

Oui pour le bloc footer, j'ai fait remonter l'info

[camillemonchicourt]

Je préfère que l'accès aux notifications et à la documentation soit disponible directement, pas dans un sous-menu que l'on ne pensera pas forcément à aller voir, en cliquant sur le nom d'utilisateur. A voir.